@sybilion/uilib 1.2.26 → 1.3.1

package/src/components/widgets/DriverCard/DriverCard.tsx

@@ -0,0 +1,219 @@
+import React, { useMemo } from 'react';
+
+import { CoffeeIcon, TrendDownIcon, TrendUpIcon } from '@phosphor-icons/react';
+
+import { Badge } from '../../ui/Badge';
+import { Card, CardContent } from '../../ui/Card';
+import { LabelWithId } from '../../ui/LabelWithId';
+import { Skeleton } from '../../ui/Skeleton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/Tooltip';
+import { getCategoryIcon } from '../DriverMap/driverCategoryIcon';
+import type { DriverData } from '../DriverMap/driverMapGeography';
+import S from './DriverCard.styl';
+import { DriverPerformanceChart } from './DriverPerformanceChart';
+
+export interface DriverCardProps {
+  selectedDriver: DriverData | null;
+  isLoading: boolean;
+  inQueue?: boolean;
+  driverSelector?: React.ReactNode;
+}
+
+export function DriverCard({
+  selectedDriver,
+  isLoading,
+  inQueue = false,
+  driverSelector,
+}: DriverCardProps) {
+  const importanceDisplay = useMemo(() => {
+    if (!selectedDriver) return '';
+
+    let importance = 0;
+    if (
+      selectedDriver.rawImportance &&
+      typeof selectedDriver.rawImportance === 'object'
+    ) {
+      const importanceObj = selectedDriver.rawImportance as any;
+      if (importanceObj.overall && typeof importanceObj.overall === 'object') {
+        const overall = importanceObj.overall as any;
+        if (typeof overall.mean === 'number') {
+          importance = Math.round(overall.mean);
+        }
+      }
+    }
+
+    return importance > 0
+      ? `${importance}%`
+      : `${selectedDriver.importance.toFixed(1)}%`;
+  }, [selectedDriver]);
+
+  const regionDisplay = React.useMemo(() => {
+    if (!selectedDriver) return '';
+
+    // Check for src_region and tgt_region properties first
+    const driver = selectedDriver as any;
+    const srcRegion = driver.src_region;
+    const tgtRegion = driver.tgt_region;
+    const srcName = srcRegion?.name;
+    const tgtName = tgtRegion?.name;
+
+    // If both src_region and tgt_region have valid names
+    if (srcName && tgtName) {
+      // If source and target are the same, just show one
+      if (srcName === tgtName) {
+        return srcName;
+      }
+      return `${srcName} → ${tgtName}`;
+    }
+
+    // If only src_region has a valid name
+    if (srcName) {
+      if (srcName === 'World') {
+        return 'World';
+      }
+      return `${srcName} → World`;
+    }
+
+    // If only tgt_region has a valid name
+    if (tgtName) {
+      if (tgtName === 'World') {
+        return 'World';
+      }
+      return `World → ${tgtName}`;
+    }
+
+    if (selectedDriver.region.length === 1) return selectedDriver.region[0];
+
+    if (selectedDriver.region.length > 1) {
+      return (
+        selectedDriver.region
+          // .filter(region => region !== 'World')
+          .join(' → ')
+      );
+    }
+
+    // Fallback to "World" when no region information is available
+    return 'World';
+  }, [selectedDriver]);
+
+  if (inQueue) {
+    return (
+      <Card className={S.root}>
+        <CardContent centered fullHeight noScroll>
+          <div className={S.queueMessage}>
+            <CoffeeIcon size={24} weight="regular" />
+            <div>
+              <p>Retrieving drivers data.</p>
+              <p>This may take a while.</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Card className={S.root}>
+        <CardContent noScroll>
+          <div className={S.skeletonContainer}>
+            <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w75}`} />
+            <Skeleton className={`${S.skeletonItem} ${S.hm} ${S.w50}`} />
+            <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w33}`} />
+            <div className={S.skeletonGroup}>
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.wFull}`} />
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w75}`} />
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w50}`} />
+            </div>
+            <Skeleton className={`${S.skeletonItem} ${S.hl} ${S.wFull}`} />
+            <div className={S.skeletonGroup}>
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.wFull}`} />
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w75}`} />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!selectedDriver) {
+    return (
+      <Card className={S.root}>
+        <CardContent centered fullHeight noScroll>
+          <span className={S.noDriverSelected}>No driver selected</span>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const { id, name, category, direction, lag, summary } = selectedDriver;
+  const directionText = direction > 0 ? 'Positive' : 'Negative';
+  const DirectionIcon = direction > 0 ? TrendUpIcon : TrendDownIcon;
+
+  const nameElem = (
+    <h4 className={`${S.driverTitle} ${S.truncated}`}>{name}</h4>
+  );
+
+  return (
+    <Card className={S.root} paddingSize="l">
+      <CardContent noScroll>
+        <div className={S.cardContent}>
+          {/* Driver Header */}
+          <div className={S.driverHeader}>
+            <div className={S.headerContent}>
+              <div className={S.topHeader}>
+                <p className={S.categoryInfo}>
+                  <span className={S.categoryIcon}>
+                    {getCategoryIcon(category)}
+                  </span>
+                  <span className={S.categoryText}>{category}</span>
+                </p>
+
+                {driverSelector}
+              </div>
+              {name.length > 60 ? (
+                <Tooltip>
+                  <LabelWithId
+                    id={id}
+                    label={<TooltipTrigger asChild>{nameElem}</TooltipTrigger>}
+                  />
+                  <TooltipContent side="left" className={S.tooltipContent}>
+                    <div className={S.tooltipTitle}>{name}</div>
+                  </TooltipContent>
+                </Tooltip>
+              ) : (
+                <LabelWithId id={id} label={nameElem} />
+              )}
+
+              <p className={S.regionDisplay}>{regionDisplay}</p>
+            </div>
+          </div>
+
+          {/* Key Metrics */}
+          <div className={S.metricsSection}>
+            <div className={S.importanceScore}>{importanceDisplay}</div>
+          </div>
+
+          {/* Direction and Lag Information */}
+          <div className={S.directionLagSection}>
+            <Badge
+              variant={direction > 0 ? 'green' : 'red'}
+              className={S.directionBadge}
+            >
+              <DirectionIcon className={S.trendIcon} />
+              {directionText} correlation
+            </Badge>
+
+            <span className={S.lagInfo}>Lag: {lag}</span>
+          </div>
+
+          {/* Driver Performance Chart */}
+          <DriverPerformanceChart driver={selectedDriver} />
+
+          {/* Description */}
+          <p className={S.description}>{summary ?? ''}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/widgets/DriverCard/DriverPerformanceChart.styl

@@ -0,0 +1,43 @@
+// Driver performance chart (normalized series)
+.driverChartContainer
+  width 100%
+  position relative
+
+  svg
+    overflow visible
+
+.chartContainer
+  height 214px
+  width 100%
+  margin-left -0.5rem
+  padding var(--p-4) 0
+
+.chartContainerDisabled
+  opacity 0.1
+
+.noDataMessage
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+  font-size 0.875rem
+  font-weight 500
+  color var(--foreground)
+  pointer-events none
+  z-index 10
+
+.chartTooltip
+  background-color var(--popover)
+  border 1px solid var(--border)
+  border-radius 0.5rem
+  padding 0.75rem
+  box-shadow 0 10px 15px -3px rgba(0, 0, 0, 0.1)
+
+.tooltipDate
+  font-size 0.875rem
+  font-weight 500
+  color var(--popover-foreground)
+
+.tooltipPerformance
+  font-size 0.875rem
+  color var(--muted-foreground)

package/src/components/widgets/DriverCard/DriverPerformanceChart.styl.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chartContainer': string;
+  'chartContainerDisabled': string;
+  'chartTooltip': string;
+  'driverChartContainer': string;
+  'noDataMessage': string;
+  'tooltipDate': string;
+  'tooltipPerformance': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/widgets/DriverCard/DriverPerformanceChart.tsx

@@ -0,0 +1,150 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  Tooltip as RechartsTooltip,
+  type TooltipContentProps,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartEmptyState,
+} from '../../ui/Chart/Chart';
+import type { DriverData } from '../DriverMap/driverMapGeography';
+import S from './DriverPerformanceChart.styl';
+import { generateDriverChartData } from './driverPerformanceChartData';
+
+const driverChartConfig = {
+  value: {
+    label: 'Performance',
+    color: 'var(--primary)',
+  },
+} satisfies ChartConfig;
+
+export interface DriverPerformanceChartProps {
+  driver: DriverData;
+}
+
+export function DriverPerformanceChart({
+  driver,
+}: DriverPerformanceChartProps) {
+  const precision = useMemo(() => {
+    if (!driver.normalized_series) return 7;
+
+    const values = Object.values(driver.normalized_series).filter(
+      (v): v is number => typeof v === 'number' && v !== null,
+    );
+
+    if (values.length === 0) return 7;
+
+    const absoluteValues = values.map(Math.abs).filter(v => v > 0);
+    if (absoluteValues.length === 0) return 7;
+
+    const minAbs = Math.min(...absoluteValues);
+
+    if (minAbs < 0.0001) return 7;
+    if (minAbs < 0.001) return 6;
+    if (minAbs < 0.01) return 5;
+    if (minAbs < 0.1) return 4;
+    if (minAbs < 1) return 3;
+    return 2;
+  }, [driver.normalized_series]);
+
+  const chartData = useMemo(
+    () => generateDriverChartData(driver, precision),
+    [driver, precision],
+  );
+
+  const noSeriesData = useMemo(() => {
+    if (!driver.normalized_series) return false;
+    return Object.values(driver.normalized_series).every(
+      value => value === null,
+    );
+  }, [driver.normalized_series]);
+
+  const renderTooltipContent = ({
+    active,
+    payload,
+  }: TooltipContentProps<number, string>) => {
+    if (active && payload?.length) {
+      const dataPoint = payload[0];
+      const row = dataPoint?.payload as
+        | { date?: Date; value?: number }
+        | undefined;
+      const date = row?.date;
+      const value = dataPoint?.value;
+
+      return (
+        <div className={S.chartTooltip}>
+          <div className={S.tooltipDate}>
+            {date instanceof Date
+              ? date.toLocaleDateString('en-US', {
+                  month: 'long',
+                  year: 'numeric',
+                })
+              : 'Unknown Date'}
+          </div>
+          <div className={S.tooltipPerformance}>
+            Performance:{' '}
+            {typeof value === 'number'
+              ? value.toFixed(precision)
+              : String(value ?? '')}
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className={S.driverChartContainer}>
+      <ChartContainer
+        config={driverChartConfig}
+        className={cn(
+          S.chartContainer,
+          noSeriesData && S.chartContainerDisabled,
+        )}
+      >
+        <LineChart
+          data={chartData}
+          margin={{ left: 8, right: 8, top: 8, bottom: -20 }}
+        >
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="date"
+            tickLine={false}
+            axisLine={false}
+            tick={false}
+            tickMargin={0}
+            minTickGap={0}
+          />
+          <YAxis
+            tickLine={false}
+            axisLine={false}
+            tick={false}
+            tickMargin={0}
+            minTickGap={0}
+            width={0}
+            domain={['dataMin', 'dataMax']}
+          />
+          <RechartsTooltip cursor={false} content={renderTooltipContent} />
+          <Line dataKey="value" type="natural" stroke="var(--color-value)" />
+        </LineChart>
+      </ChartContainer>
+      {noSeriesData && (
+        <ChartEmptyState
+          variant="inline"
+          align="center"
+          status="No series data"
+          className={S.noDataMessage}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/widgets/DriverCard/driverPerformanceChartData.ts

@@ -0,0 +1,64 @@
+import type { DriverData } from '../DriverMap/driverMapGeography';
+
+export type DriverPerformanceChartPoint = {
+  date: Date;
+  value: number;
+};
+
+/** Last non-null points from `normalized_series`, or deterministic fallback sample. */
+export function generateDriverChartData(
+  driver: DriverData,
+  precision: number = 7,
+): DriverPerformanceChartPoint[] {
+  if (driver.normalized_series) {
+    const entries = Object.entries(driver.normalized_series);
+
+    const seriesData = entries
+      .filter(([, value]) => value !== null)
+      .map(([date, value]) => {
+        let parsedDate: Date;
+        try {
+          const dateStr = date.toString();
+
+          if (dateStr.includes('-')) {
+            parsedDate = new Date(`${dateStr}T00:00:00`);
+          } else {
+            parsedDate = new Date(dateStr);
+          }
+
+          if (Number.isNaN(parsedDate.getTime())) {
+            return null;
+          }
+        } catch {
+          return null;
+        }
+
+        const numericValue = parseFloat((value as number).toFixed(precision));
+
+        return {
+          date: parsedDate,
+          value: numericValue,
+        };
+      })
+      .filter((item): item is DriverPerformanceChartPoint => item !== null)
+      .sort((a, b) => a.date.getTime() - b.date.getTime())
+      .slice(-24);
+
+    if (seriesData.length > 0) {
+      return seriesData;
+    }
+  }
+
+  const data: DriverPerformanceChartPoint[] = [];
+  const baseValue = driver.importance / 100;
+
+  for (let i = 0; i < 12; i++) {
+    const randomVariation = (Math.random() - 0.5) * 0.2;
+    const value = Math.max(0, Math.min(1, baseValue + randomVariation));
+    data.push({
+      date: new Date(2023, i, 1),
+      value: parseFloat(value.toFixed(precision)),
+    });
+  }
+  return data;
+}

package/src/components/widgets/DriverCard/index.ts

@@ -0,0 +1 @@
+export { DriverCard, type DriverCardProps } from './DriverCard';

package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import cn from 'classnames';
 
 import { Badge } from '#uilib/components/ui/Badge';

package/src/components/widgets/DriverMap/DriverMap.styl

@@ -1,5 +1,5 @@
 @import '../../../lib/theme.styl'
-@import './MapBackground/mapAspect.mixin.styl'
+@import '../../ui/WorldMap/mapAspect.mixin.styl'
 
 
 .root
@@ -22,6 +22,11 @@
   border-radius var(--p-4)
   overflow hidden
 
+.mapWorld
+  position absolute
+  inset 0
+  box-sizing border-box
+
 .shimmerOverlay
   z-index 20
 

package/src/components/widgets/DriverMap/DriverMap.styl.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'inTransition': string;
   'mapInner': string;
+  'mapWorld': string;
   'root': string;
   'shimmerOverlay': string;
   'worldDrivers': string;

package/src/components/widgets/DriverMap/DriverMap.tsx

@@ -1,8 +1,7 @@
-'use client';
-
 import cn from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { WorldMap } from '#uilib/components/ui/WorldMap';
 import useEvent from '#uilib/hooks/useEvent';
 import { Shimmer } from '@homecode/ui';
 
@@ -15,7 +14,6 @@ import {
   hasValidCoords,
 } from './DriverMap.helpers';
 import S from './DriverMap.styl';
-import { MapBackground } from './MapBackground/MapBackground';
 import type { DriverData } from './driverMapGeography';
 import { getHighestImportanceDriver } from './driverMapSelection';
 
@@ -172,7 +170,7 @@ export function DriverMap({
   return (
     <div className={cn(S.root, isTransitioning && S.inTransition)}>
       <div className={S.mapInner}>
-        <MapBackground />
+        <WorldMap className={S.mapWorld} />
         {isLoading && <Shimmer className={S.shimmerOverlay} size="l" />}
         {otherDrivers.map(driver => (
           <DriverIcon

package/src/components/widgets/DriverMap/driverCategoryIcon.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   ChartBarIcon,
   ChartLineIcon,

package/src/components/widgets/DriverMap/index.ts

@@ -13,6 +13,4 @@ export {
   getResponsiveCoordinates,
   svgToPercentage,
 } from './driverMapGeography';
-export { MapBackground } from './MapBackground/MapBackground';
-export { LoadingSpinner } from './LoadingSpinner/LoadingSpinner';
 export type { BadgeSize } from './DriverIcon/DriverIcon';

package/src/declarations.d.ts

@@ -1,4 +1,6 @@
 declare const VERSION: string;
+/** Base URL path for docs Router (empty at site root; e.g. `/uilib` on GitHub Pages project site). */
+declare const DOCS_ROUTER_BASENAME: string;
 
 declare module '*.png';
 declare module '*.json';

package/src/docs/config/webpack.config.js

@@ -22,9 +22,27 @@ const pkg = require('../../../package.json');
 const themeStyl = pathResolve(paths.src, 'theme.styl');
 const logoSvgPath = pathResolve(paths.assets, 'logo.svg');
 
+/** GitHub Pages project sites live at /<repo>/; set PUBLIC_PATH=/repo-name/ for production deploy. */
+function normalizePublicPath(raw) {
+  const v = (raw && String(raw).trim()) || '/';
+  if (v === '/') {
+    return '/';
+  }
+  const withLeading = v.startsWith('/') ? v : `/${v}`;
+  return withLeading.endsWith('/') ? withLeading : `${withLeading}/`;
+}
+
+function routerBasenameFromPublicPath(publicPath) {
+  if (publicPath === '/') {
+    return '';
+  }
+  return publicPath.replace(/\/$/, '');
+}
+
 export default (env, argv) => {
   const isDev = argv.mode === 'development';
-  const analyticsPath = `${paths.assets}/analytics.html`;
+  const publicPath = normalizePublicPath(process.env.PUBLIC_PATH);
+  const docsRouterBasename = routerBasenameFromPublicPath(publicPath);
   const alias = {
     '#uilib': paths.src,
     uilib: paths.src,
@@ -38,6 +56,7 @@ export default (env, argv) => {
     entry: [paths.docs],
     output: {
       path: paths.build,
+      publicPath,
     },
 
     resolve: {
@@ -104,7 +123,7 @@ export default (env, argv) => {
               type: 'asset/resource',
             },
             {
-              include: /DriverMap[/\\]MapBackground[/\\]map\.svg$/,
+              include: /components[/\\]ui[/\\]WorldMap[/\\]map\.svg$/,
               type: 'asset/resource',
             },
             {
@@ -152,6 +171,7 @@ export default (env, argv) => {
       new webpack.DefinePlugin({
         isDEV: JSON.stringify(isDev),
         VERSION: JSON.stringify(pkg.version),
+        DOCS_ROUTER_BASENAME: JSON.stringify(docsRouterBasename),
       }),
       new CopyWebpackPlugin({
         patterns: [
@@ -174,7 +194,7 @@ export default (env, argv) => {
 
       new HtmlWebpackPlugin({
         lang: 'en',
-        baseUrl: '/',
+        baseUrl: publicPath,
         filename: 'index.html',
         template: `${paths.assets}/index.html`,
         minify: isDev
@@ -221,6 +241,9 @@ export default (env, argv) => {
         hot: true,
         port: process.env.PORT || 8181,
         historyApiFallback: true,
+        ...(publicPath !== '/' && {
+          devMiddleware: { publicPath },
+        }),
       },
     });
   }

package/src/docs/index.tsx

@@ -10,7 +10,7 @@ const elem = document.getElementById('app-root') as HTMLElement;
 const root = createRoot(elem);
 
 root.render(
-  <BrowserRouter>
+  <BrowserRouter basename={DOCS_ROUTER_BASENAME || undefined}>
     <ThemeProvider activeColor={DEFAULT_THEME_ACTIVE_COLOR}>
       <App />
     </ThemeProvider>

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { ChartAreaInteractive } from '#uilib/components/ui/ChartAreaInteractive';
-import type { TimeRange } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers';
 import type {
   ChartDataPoint,
   OverlayMode,
@@ -91,7 +90,7 @@ type DemoMode = 'none' | OverlayMode;
 
 export default function ChartAreaInteractivePage() {
   const { isDarkMode } = useTheme();
-  const [timeRange, setTimeRange] = useState<TimeRange>('1y');
+  const [timeRange, setTimeRange] = useState<string>('1y');
   const [pinMonth, setPinMonth] = useState<string | undefined>(undefined);
   const [demoMode, setDemoMode] = useState<DemoMode>('none');
   const [chartData] = useState<ChartDataPoint[]>(INITIAL_CHART);
@@ -158,7 +157,7 @@ export default function ChartAreaInteractivePage() {
         </Tabs>
         <ChartAreaInteractive
           timeRange={timeRange}
-          onTimeRangeChange={v => setTimeRange(v as TimeRange)}
+          onTimeRangeChange={setTimeRange}
           pinMonth={pinMonth}
           onPinMonthChange={setPinMonth}
           mode={mode}