@sybilion/uilib 1.2.24 → 1.3.0

package/src/docs/pages/DriverMapPage.tsx

@@ -0,0 +1,268 @@
+import { useState } from 'react';
+
+import { PageColumns, PageContentSection } from '#uilib/components/ui/Page';
+import { Switch } from '#uilib/components/ui/Switch';
+import { DriverCard } from '#uilib/components/widgets/DriverCard';
+import {
+  type DriverData,
+  DriverMap,
+  getPreciseCoordinates,
+} from '#uilib/components/widgets/DriverMap';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+/** ISO `YYYY-MM` keys, sorted ascending → series for DriverPerformanceChart. */
+function buildMonthlySeries(
+  seed: number,
+  months: number,
+  drift = 0.15,
+): NonNullable<DriverData['normalized_series']> {
+  const out: NonNullable<DriverData['normalized_series']> = {};
+  const start = new Date('2019-01-01');
+  for (let i = 0; i < months; i++) {
+    const d = new Date(start);
+    d.setMonth(d.getMonth() + i);
+    const key = d.toISOString().slice(0, 7);
+    out[key] =
+      seed + Math.sin(i * 0.35) * 14 + Math.cos(i * 0.11) * 7 + i * drift;
+  }
+  return out;
+}
+
+function DriverPager({
+  drivers,
+  selectedDriver,
+  onSelect,
+}: {
+  drivers: DriverData[];
+  selectedDriver: DriverData | null;
+  onSelect: (d: DriverData | null) => void;
+}) {
+  const index = selectedDriver
+    ? drivers.findIndex(d => d.id === selectedDriver.id)
+    : -1;
+  const total = drivers.length;
+  const safeIndex = index >= 0 ? index : 0;
+  const displayIndex = index >= 0 ? index + 1 : 0;
+
+  const go = (nextIdx: number) => {
+    if (total === 0) {
+      onSelect(null);
+      return;
+    }
+    const wrapped = ((nextIdx % total) + total) % total;
+    onSelect(drivers[wrapped] ?? null);
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+        fontSize: 12,
+        color: 'var(--muted-foreground)',
+      }}
+    >
+      <button
+        type="button"
+        aria-label="Previous driver"
+        disabled={total === 0 || !selectedDriver}
+        onClick={() => go(safeIndex - 1)}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 4,
+          borderRadius: 6,
+          border: '1px solid var(--border)',
+          background: 'var(--background)',
+          cursor: total && selectedDriver ? 'pointer' : 'default',
+          opacity: total && selectedDriver ? 1 : 0.45,
+        }}
+      >
+        <CaretLeft size={14} />
+      </button>
+      <span
+        aria-live="polite"
+        style={{ minWidth: '2.5rem', textAlign: 'center' }}
+      >
+        {displayIndex}/{total}
+      </span>
+      <button
+        type="button"
+        aria-label="Next driver"
+        disabled={total === 0 || !selectedDriver}
+        onClick={() => go(safeIndex + 1)}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 4,
+          borderRadius: 6,
+          border: '1px solid var(--border)',
+          background: 'var(--background)',
+          cursor: total && selectedDriver ? 'pointer' : 'default',
+          opacity: total && selectedDriver ? 1 : 0.45,
+        }}
+      >
+        <CaretRight size={14} />
+      </button>
+    </div>
+  );
+}
+
+// Drivers ordered for pager: long title + USA→World, EU negative + decimal %, Asia positive + large %, global negative.
+const MOCK_DRIVERS: DriverData[] = [
+  {
+    id: 'mock-us-world-long-title',
+    name: 'North American manufacturing PMI composite — orders, production, employment, supplier deliveries (SA, quarterly)',
+    region: ['North America', 'United States of America'],
+    category: 'Manufacturing',
+    isPublic: true,
+    importance: 84.2,
+    direction: 0.55,
+    lag: '1 quarter(s)',
+    coordinates: getPreciseCoordinates('United States of America'),
+    src_region: {
+      name: 'United States of America',
+      coordinates: { x: 0, y: 0 },
+    },
+    tgt_region: {
+      name: 'World',
+      coordinates: { x: 0, y: 0 },
+    },
+    rawImportance: { overall: { mean: 96 } },
+    summary:
+      'U.S. factory activity leads global manufacturing cycles by roughly one quarter: strength here typically coincides with wider world demand, with inventory and orders transmitting across trade links.',
+    normalized_series: buildMonthlySeries(48, 42, 0.22),
+  },
+  {
+    id: 'mock-europe-germany-negative',
+    name: 'German industrial orders (domestic + foreign)',
+    region: ['Europe', 'Germany'],
+    category: 'Industrial',
+    isPublic: true,
+    importance: 81.6,
+    direction: -0.42,
+    lag: '2 month(s)',
+    coordinates: getPreciseCoordinates('Germany'),
+    summary:
+      'New orders in Germany are a timely read on euro-area capex and export pipelines; pullbacks often precede broader EU production softness before PMI surveys fully reflect the turn.',
+    normalized_series: buildMonthlySeries(62, 42, -0.12),
+  },
+  {
+    id: 'mock-asia-japan-positive',
+    name: 'Japan machinery orders (core private-sector ex. ships)',
+    region: ['Asia', 'Japan'],
+    category: 'market',
+    isPublic: true,
+    importance: 77,
+    direction: 0.28,
+    lag: '~1 month(s)',
+    coordinates: getPreciseCoordinates('Japan'),
+    rawImportance: { overall: { mean: 99 } },
+    summary:
+      'Core machinery orders capture forward-looking domestic investment and Asia supply-chain capex; spikes cluster around fiscal years and robotics/automation cycles.',
+    normalized_series: buildMonthlySeries(55, 42, 0.18),
+  },
+  {
+    id: 'mock-global-risk-negative',
+    name: 'Global equity risk appetite (cross-asset composite)',
+    region: ['World'],
+    category: 'Trade',
+    isPublic: true,
+    importance: 66.5,
+    direction: -0.05,
+    lag: 'Unknown',
+    coordinates: getPreciseCoordinates('World'),
+    rawImportance: { overall: { mean: 91 } },
+    summary:
+      'Combines credit spreads, vol surfaces, and cyclical equity factor tilt into a single read on whether markets are paying for growth or for safety; sharp deterioration often coincides with funding stress.',
+    normalized_series: buildMonthlySeries(40, 42, 0.08),
+  },
+];
+
+export default function DriverMapPage() {
+  const [selectedDriver, setSelectedDriver] = useState<DriverData | null>(
+    MOCK_DRIVERS[0],
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  // DriverCard checks `inQueue` before `isLoading` — toggles queue empty state independent of mocks.
+  const [inQueue, setInQueue] = useState(false);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Driver map' }]}
+        title="DriverMap & DriverCard"
+        subheader="World map with driver badges and the driver detail card — map clicks and the selector sync selection; arrow keys navigate the map."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: 16,
+            marginBottom: 16,
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="loading-overlay"
+              checked={isLoading}
+              onCheckedChange={setIsLoading}
+            />
+            <label htmlFor="loading-overlay">Loading state</label>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="in-queue"
+              checked={inQueue}
+              onCheckedChange={setInQueue}
+            />
+            <label htmlFor="in-queue">In queue (empty state)</label>
+          </div>
+        </div>
+        <PageColumns
+          fill="left"
+          columns={[
+            <div
+              key="map"
+              style={{
+                width: '100%',
+                maxWidth: '100%',
+                // @ts-expect-error CSS custom property on div
+                '--shimmer-color': 'var(--page-color)',
+              }}
+            >
+              <DriverMap
+                drivers={MOCK_DRIVERS}
+                isLoading={isLoading}
+                selectedDriver={selectedDriver}
+                setSelectedDriver={setSelectedDriver}
+              />
+            </div>,
+            <DriverCard
+              key="card"
+              selectedDriver={selectedDriver}
+              isLoading={isLoading}
+              inQueue={inQueue}
+              driverSelector={
+                <DriverPager
+                  drivers={MOCK_DRIVERS}
+                  selectedDriver={selectedDriver}
+                  onSelect={setSelectedDriver}
+                />
+              }
+            />,
+          ]}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/PageColumnsPage.tsx

@@ -0,0 +1,92 @@
+import type { CSSProperties } from 'react';
+
+import { PageColumns, PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const demoBlockStyle: CSSProperties = {
+  margin: 0,
+  padding: 'var(--p-4)',
+  borderRadius: 'var(--p-3)',
+  border: '1px solid var(--border)',
+  backgroundColor: 'var(--muted)',
+};
+
+function ColumnDemo({ label }: { label: string }) {
+  return <p style={demoBlockStyle}>{label}</p>;
+}
+
+export default function PageColumnsPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'PageColumns' }]}
+        title="PageColumns"
+        subheader="Responsive row of columns; fill prop controls which column(s) grow past the default width cap on wide viewports."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
+      >
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>
+            fill=&quot;all&quot; (default)
+          </h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            Both columns grow; max-width cap is removed on stretched columns.
+          </p>
+          <PageColumns
+            columns={[
+              <ColumnDemo key="a" label="Column A" />,
+              <ColumnDemo key="b" label="Column B" />,
+            ]}
+          />
+        </section>
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>fill=&quot;left&quot;</h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            First column grows; second stays at the default fixed width on wide
+            screens.
+          </p>
+          <PageColumns
+            fill="left"
+            columns={[
+              <ColumnDemo key="a" label="Growing left column" />,
+              <ColumnDemo key="b" label="Fixed sidebar" />,
+            ]}
+          />
+        </section>
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>fill=&quot;right&quot;</h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            Last column grows; first stays at the default fixed width on wide
+            screens.
+          </p>
+          <PageColumns
+            fill="right"
+            columns={[
+              <ColumnDemo key="a" label="Fixed sidebar" />,
+              <ColumnDemo key="b" label="Growing right column" />,
+            ]}
+          />
+        </section>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/TimeRangeControlsPage.tsx

@@ -2,13 +2,12 @@ import { useState } from 'react';
 
 import { PageContentSection } from '#uilib/components/ui/Page';
 import { TimeRangeControls } from '#uilib/components/ui/TimeRangeControls';
-import type { TimeRange } from '#uilib/components/ui/TimeRangeControls/TimeRangeControls.types';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
 export default function TimeRangeControlsPage() {
-  const [range, setRange] = useState<TimeRange>('1y');
+  const [range, setRange] = useState<string>('1y');
 
   return (
     <>
@@ -21,7 +20,7 @@ export default function TimeRangeControlsPage() {
       <PageContentSection>
         <TimeRangeControls
           timeRange={range}
-          onTimeRangeChange={v => setRange(v as TimeRange)}
+          onTimeRangeChange={setRange}
           loading={false}
         />
       </PageContentSection>

package/src/docs/pages/TooltipPage.tsx

@@ -9,6 +9,8 @@ import {
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
+const TOOLTIP_SIDES = ['left', 'top', 'bottom', 'right'] as const;
+
 export default function TooltipPage() {
   return (
     <>
@@ -19,16 +21,18 @@ export default function TooltipPage() {
         actions={<DocsHeaderActions />}
       />
       <PageContentSection>
-        <span>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button type="button" variant="outline">
-                Hover me
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Tooltip text</TooltipContent>
-          </Tooltip>
-        </span>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+          {TOOLTIP_SIDES.map(side => (
+            <Tooltip key={side}>
+              <TooltipTrigger asChild>
+                <Button type="button" variant="outline">
+                  {side.charAt(0).toUpperCase() + side.slice(1)}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side={side}>Tooltip opens {side}</TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
       </PageContentSection>
     </>
   );

package/src/docs/pages/WorldMapPage.styl

@@ -0,0 +1,14 @@
+@import '../../components/ui/WorldMap/mapAspect.mixin.styl'
+
+.demoFrame
+  position relative
+  width 100%
+  max-width 42rem
+  mapAspect()
+  border-radius var(--p-4)
+  overflow hidden
+
+.demoFill
+  position absolute
+  inset 0
+  box-sizing border-box

package/src/docs/pages/WorldMapPage.styl.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'demoFill': string;
+  'demoFrame': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/docs/pages/WorldMapPage.tsx

@@ -0,0 +1,26 @@
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { WorldMap } from '#uilib/components/ui/WorldMap';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+import S from './WorldMapPage.styl';
+
+export default function WorldMapPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'World map' }]}
+        title="WorldMap"
+        subheader="Bundled SVG world map for layouts such as DriverMap — optional className for positioning."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <div className={S.demoFrame}>
+          <div className={S.demoFill}>
+            <WorldMap />
+          </div>
+        </div>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -13,6 +13,7 @@ export const DOC_SECTION_ORDER = [
   'Feedback',
   'Layout',
   'Navigation',
+  'Widgets',
   'Overlays',
   'Data display',
   'Charts',
@@ -115,10 +116,10 @@ export const DOC_REGISTRY: DocEntry[] = [
     load: () => import('./pages/DialogPage'),
   },
   {
-    slug: 'drawer',
-    title: 'Drawer',
-    section: 'Overlays',
-    load: () => import('./pages/DrawerPage'),
+    slug: 'driver-map',
+    title: 'DriverMap & DriverCard',
+    section: 'Widgets',
+    load: () => import('./pages/DriverMapPage'),
   },
   {
     slug: 'dropdown-menu',
@@ -222,6 +223,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Layout',
     load: () => import('./pages/PagePage'),
   },
+  {
+    slug: 'page-columns',
+    title: 'PageColumns',
+    section: 'Layout',
+    load: () => import('./pages/PageColumnsPage'),
+  },
   {
     slug: 'page-footer',
     title: 'PageFooter',
@@ -286,7 +293,7 @@ export const DOC_REGISTRY: DocEntry[] = [
   {
     slug: 'sidebar-datasets-items-grouped',
     title: 'SidebarDatasetsItemsGrouped',
-    section: 'Navigation',
+    section: 'Widgets',
     load: () => import('./pages/SidebarDatasetsItemsGroupedPage'),
   },
   {
@@ -373,6 +380,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Media',
     load: () => import('./pages/VimeoEmbedPage'),
   },
+  {
+    slug: 'world-map',
+    title: 'WorldMap',
+    section: 'Media',
+    load: () => import('./pages/WorldMapPage'),
+  },
 ];
 
 export const docPageComponents: Record<

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export { useIsMobile } from './useIsMobile';
+export { default as useEvent, type UseEventParams } from './useEvent';

package/src/hooks/useEvent.ts

@@ -20,11 +20,9 @@ export default function useEvent({
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
 
-  // Track when elem.current changes to force effect re-run
   const [elemKey, setElemKey] = useState(0);
   const prevElemRef = useRef<HTMLElement | null>(null);
 
-  // Watch for elem.current changes and update state to trigger main effect re-run
   useEffect(() => {
     const currentElem = Array.isArray(elem)
       ? elem.find(ref => ref?.current)?.current || null

package/src/index.ts

@@ -58,8 +58,11 @@ export * from './components/ui/Toggle';
 export * from './components/ui/ToggleGroup';
 export * from './components/ui/Tooltip';
 export * from './components/ui/VimeoEmbed';
+export * from './components/ui/WorldMap';
 export * from './components/ui/WorkspaceAppSwitcher';
 export * from './components/widgets/SidebarDatasetsItemsGrouped';
+export * from './components/widgets/DriverCard';
+export * from './components/widgets/DriverMap';
 export * from './components/widgets/SybilionAppHeader';
 export * from './components/widgets/SybilionAuthLayout';
 export * from './components/widgets/SybilionSignInPanel';