@sybilion/uilib 1.2.24 → 1.2.26

package/dist/esm/types/src/components/widgets/DriverMap/MapBackground/MapBackground.d.ts

@@ -0,0 +1 @@
+export declare function MapBackground(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriverMap/driverCategoryIcon.d.ts

@@ -0,0 +1 @@
+export declare const getCategoryIcon: (category: string | undefined | null) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriverMap/driverMapGeography.d.ts

@@ -0,0 +1,80 @@
+export interface DriverData {
+    id: string;
+    name: string;
+    region: string[];
+    category: string;
+    isPublic: boolean;
+    importance: number;
+    direction: number;
+    lag: string;
+    coordinates: {
+        x: number;
+        y: number;
+        continent: string;
+    };
+    normalized_series?: {
+        [date: string]: number | null;
+    };
+    rawImportance?: any;
+    summary?: string;
+    src_region?: {
+        name: string;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    } | null;
+    tgt_region?: {
+        name: string;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    } | null;
+}
+export interface RegionMapping {
+    [key: string]: {
+        x: number;
+        y: number;
+        continent: string;
+    };
+}
+export interface AnalysisInfo {
+    id: string;
+    name: string;
+    driverCount: number;
+    path: string;
+}
+export interface DatasetInfo {
+    id: string;
+    name: string;
+    analyses: AnalysisInfo[];
+}
+interface GeographicCoordinates {
+    latitude: number;
+    longitude: number;
+    continent: string;
+}
+export declare const geographicCoordinates: {
+    [key: string]: GeographicCoordinates;
+};
+export declare function geographicToSVG(lat: number, lng: number): {
+    x: number;
+    y: number;
+};
+export declare function svgToPercentage(svgX: number, svgY: number): {
+    x: number;
+    y: number;
+};
+export declare function getContinentFromRegion(region: string): string | null;
+export declare function getPreciseCoordinates(region: string): {
+    x: number;
+    y: number;
+    continent: string;
+};
+export declare function getResponsiveCoordinates(region: string, existingDrivers?: DriverData[], mapContainerWidth?: number, mapContainerHeight?: number): {
+    x: number;
+    y: number;
+    continent: string;
+};
+export {};

package/dist/esm/types/src/components/widgets/DriverMap/driverMapSelection.d.ts

@@ -0,0 +1,3 @@
+import type { DriverData } from './driverMapGeography';
+export declare const getDriverImportance: (driver: DriverData) => any;
+export declare const getHighestImportanceDriver: (drivers: DriverData[]) => number | null;

package/dist/esm/types/src/components/widgets/DriverMap/index.d.ts

@@ -0,0 +1,8 @@
+export { DriverMap, type DriverMapProps } from './DriverMap';
+export type { DriverData } from './driverMapGeography';
+export { getCategoryIcon } from './driverCategoryIcon';
+export { getDriverImportance, getHighestImportanceDriver, } from './driverMapSelection';
+export { geographicCoordinates, geographicToSVG, getContinentFromRegion, getPreciseCoordinates, getResponsiveCoordinates, svgToPercentage, } from './driverMapGeography';
+export { MapBackground } from './MapBackground/MapBackground';
+export { LoadingSpinner } from './LoadingSpinner/LoadingSpinner';
+export type { BadgeSize } from './DriverIcon/DriverIcon';

package/dist/esm/types/src/docs/pages/DriverMapPage.d.ts

@@ -0,0 +1 @@
+export default function DriverMapPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/docs/registry.d.ts

@@ -8,7 +8,7 @@ export type DocEntry = {
     }>;
 };
 /** Sidebar group order */
-export declare const DOC_SECTION_ORDER: readonly ["Forms", "Feedback", "Layout", "Navigation", "Overlays", "Data display", "Charts", "Chat", "Media", "Misc"];
+export declare const DOC_SECTION_ORDER: readonly ["Forms", "Feedback", "Layout", "Navigation", "Widgets", "Overlays", "Data display", "Charts", "Chat", "Media", "Misc"];
 export declare const DOC_DEFAULT_SLUG = "button";
 export declare const DOC_REGISTRY: DocEntry[];
 export declare const docPageComponents: Record<string, LazyExoticComponent<ComponentType<object>>>;

package/dist/esm/types/src/hooks/index.d.ts

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

package/dist/esm/types/src/index.d.ts

@@ -60,6 +60,7 @@ export * from './components/ui/Tooltip';
 export * from './components/ui/VimeoEmbed';
 export * from './components/ui/WorkspaceAppSwitcher';
 export * from './components/widgets/SidebarDatasetsItemsGrouped';
+export * from './components/widgets/DriverMap';
 export * from './components/widgets/SybilionAppHeader';
 export * from './components/widgets/SybilionAuthLayout';
 export * from './components/widgets/SybilionSignInPanel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.24",
+  "version": "1.2.26",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatSheet/ChatSelector.styl

@@ -18,7 +18,9 @@
 .deleteBtn
   flex-shrink 0
   border-radius 50px
-  opacity 0.3
+  opacity 0
+  pointer-events none
 
 .wrapper:hover .deleteBtn
   opacity 1
+  pointer-events auto

package/src/components/ui/Chat/ChatSheet/ChatSelector.tsx

@@ -54,7 +54,7 @@ export function ChatSelector({
         (firstMessage.text.length > 30 ? '...' : '')
       );
     }
-    return `Chat ${chat.session_id}`;
+    return 'New chat';
   };
 
   return (

package/src/components/ui/DropdownMenu/DropdownMenu.tsx

@@ -44,6 +44,7 @@ function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps) {
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  collisionPadding = 8,
   elevation = 'sm',
   ...props
 }: DropdownMenuContentProps) {
@@ -52,6 +53,7 @@ function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
         className={cn(S.content, S[`elevation-${elevation}`], className)}
         {...props}
       />
@@ -201,11 +203,13 @@ function DropdownMenuSubTrigger({
 
 function DropdownMenuSubContent({
   className,
+  collisionPadding = 8,
   ...props
 }: DropdownMenuSubContentProps) {
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
+      collisionPadding={collisionPadding}
       className={cn(S.subContent, className)}
       {...props}
     />

package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.constants.json

@@ -0,0 +1,3 @@
+{
+  "FADE_DURATION": 300
+}

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

@@ -0,0 +1,125 @@
+@import '../../../../lib/theme.styl';
+json('./DriverIcon.constants.json')
+
+$dur = unit(FADE_DURATION, 'ms')
+$msOffset = 30ms
+
+.root
+  position absolute
+  transform translateX(-50%) translateY(-50%)
+  cursor pointer
+  outline none
+
+  &:hover
+    transition transform 300ms ease-out
+
+  &:focus
+    outline none
+
+.loadingHidden
+  opacity 0
+  pointer-events none
+
+.badge
+  padding 0.25rem
+  transition all $dur ease-out
+  pointer-events none
+
+  opacity 0
+  transform translateY(10px)
+
+  svg
+    height 20px
+    width 20px
+
+.size-s
+.size-s .badge
+  width 2rem
+  height 2rem
+  border-radius 10px
+.size-m
+.size-m .badge
+  width 2.5rem
+  height 2.5rem
+  border-radius 12px
+.size-l
+.size-l .badge
+  width 3rem
+  height 3rem
+  border-radius 14px
+
+
+// show/hide animations
+.visible .badge
+  transition $dur ease-out
+  transition-property opacity, transform
+  opacity 1
+  transform translateY(0)
+
+  span
+    transition box-shadow 0s .1s ease-out
+
+for $i in (1..6)
+  .root:nth-child({$i}) .badge
+    transition-delay ($i * $msOffset)
+  .visible:nth-child({$i}) .badge
+    transition-delay ($i * ($msOffset * 2))
+  .hidden:nth-child({$i}) .badge
+    transition-duration 'calc(%s - %s)' % ($dur ($i * $msOffset))
+
+
+// Hover
+.root:hover
+  z-index 10
+
+  .badge
+    box-shadow 0 0 0 1px var(--background)
+    transform scale(1.1)
+    transition-delay 0ms
+    transition-duration .2s
+
+.selected .badge
+.selected:hover .badge
+  transform scale(1.1)
+
+  // span
+  box-shadow inset 0 0 0 3px var(--sb-cyan-400)
+
+  :global(.dark) &
+    box-shadow inset 0 0 0 2px var(--sb-cyan-500)
+
+.root:not(.selected):hover .icon
+  transform scale(1.05)
+
+
+.tooltipContent
+  max-width 20rem
+  border 1px solid var(--border)
+  background-color var(--popover)
+  color var(--popover-foreground)
+  font-size 0.75rem
+  font-family var(--font-family-body)
+  box-shadow 0 10px 15px -3px rgba(0, 0, 0, 0.1)
+
+.tooltipCategory
+  color var(--muted-foreground)
+  display flex
+  align-items center
+  gap 0.25rem
+
+.tooltipCategoryIcon
+  height 0.75rem
+  width 0.75rem
+  color var(--muted-foreground)
+
+.tooltipCategoryText
+  line-clamp(1)
+  overflow hidden
+
+.tooltipName
+  font-weight normal
+
+.tooltipSpacing
+  display flex
+  flex-direction column
+  gap 0.25rem

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

@@ -0,0 +1,22 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'badge': string;
+  'hidden': string;
+  'icon': string;
+  'loadingHidden': string;
+  'root': string;
+  'selected': string;
+  'size-l': string;
+  'size-m': string;
+  'size-s': string;
+  'tooltipCategory': string;
+  'tooltipCategoryIcon': string;
+  'tooltipCategoryText': string;
+  'tooltipContent': string;
+  'tooltipName': string;
+  'tooltipSpacing': string;
+  'visible': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,81 @@
+'use client';
+
+import cn from 'classnames';
+
+import { Badge } from '#uilib/components/ui/Badge';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#uilib/components/ui/Tooltip';
+
+import { getCategoryIcon } from '../driverCategoryIcon';
+import type { DriverData } from '../driverMapGeography';
+import S from './DriverIcon.styl';
+
+export const BADGE_SIZES = {
+  s: 's',
+  m: 'm',
+  l: 'l',
+} as const;
+
+export type BadgeSize = (typeof BADGE_SIZES)[keyof typeof BADGE_SIZES];
+
+interface DriverIconProps {
+  driver: DriverData;
+  size: BadgeSize;
+  isSelected: boolean;
+  onClick: () => void;
+  isVisible: boolean;
+  isLoading?: boolean;
+}
+
+export function DriverIcon({
+  driver,
+  size,
+  isSelected,
+  onClick,
+  isVisible,
+  isLoading = false,
+}: DriverIconProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        asChild
+        className={cn(
+          S.root,
+          S[`size-${size}`],
+          isSelected && S.selected,
+          isVisible ? S.visible : S.hidden,
+          isLoading && S.loadingHidden,
+        )}
+      >
+        <button
+          type="button"
+          onClick={onClick}
+          style={{
+            left: `${driver.coordinates.x}%`,
+            top: `${driver.coordinates.y}%`,
+            zIndex: isSelected ? 2 : '',
+          }}
+        >
+          <Badge className={S.badge}>
+            <div className={S.icon}>{getCategoryIcon(driver.category)}</div>
+          </Badge>
+        </button>
+      </TooltipTrigger>
+
+      <TooltipContent side="top" className={S.tooltipContent}>
+        <div className={S.tooltipSpacing}>
+          <div className={S.tooltipCategory}>
+            <span className={S.tooltipCategoryIcon}>
+              {getCategoryIcon(driver.category)}
+            </span>
+            <span className={S.tooltipCategoryText}>{driver.category}</span>
+          </div>
+          <div className={S.tooltipName}>{driver.name}</div>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,164 @@
+import { BADGE_SIZES, type BadgeSize } from './DriverIcon/DriverIcon';
+import {
+  type DriverData,
+  geographicToSVG,
+  getResponsiveCoordinates,
+  svgToPercentage,
+} from './driverMapGeography';
+import { getDriverImportance } from './driverMapSelection';
+
+// Calculate badge sizes for all drivers based on their importance
+export const calculateBadgeSizes = (
+  drivers: DriverData[],
+): Record<string, BadgeSize> => {
+  if (drivers.length === 0) return {};
+
+  const importanceValues = drivers
+    .map(getDriverImportance)
+    .filter(
+      (val): val is number =>
+        typeof val === 'number' && !isNaN(val) && val >= 0,
+    );
+
+  if (importanceValues.length === 0) {
+    return drivers.reduce(
+      (acc, driver) => {
+        acc[driver.id] = BADGE_SIZES.s;
+        return acc;
+      },
+      {} as Record<string, BadgeSize>,
+    );
+  }
+
+  const min = Math.min(...importanceValues);
+  const max = Math.max(...importanceValues);
+  const range = max - min;
+
+  if (range === 0) {
+    return drivers.reduce(
+      (acc, driver) => {
+        acc[driver.id] = BADGE_SIZES.s;
+        return acc;
+      },
+      {} as Record<string, BadgeSize>,
+    );
+  }
+
+  return drivers.reduce(
+    (acc, driver) => {
+      const importance = getDriverImportance(driver);
+
+      if (
+        typeof importance !== 'number' ||
+        isNaN(importance) ||
+        importance < 0
+      ) {
+        acc[driver.id] = BADGE_SIZES.s;
+        return acc;
+      }
+
+      const normalized = (importance - min) / range;
+      acc[driver.id] =
+        normalized >= 0.66
+          ? BADGE_SIZES.l
+          : normalized >= 0.33
+            ? BADGE_SIZES.m
+            : BADGE_SIZES.s;
+      return acc;
+    },
+    {} as Record<string, BadgeSize>,
+  );
+};
+
+export const hasValidCoords = (
+  coords: { x: number; y: number } | null | undefined,
+): boolean => {
+  return (
+    coords?.x != null &&
+    coords?.y != null &&
+    typeof coords.x === 'number' &&
+    typeof coords.y === 'number' &&
+    !isNaN(coords.x) &&
+    !isNaN(coords.y) &&
+    Math.abs(coords.x) > 0 &&
+    Math.abs(coords.y) > 0
+  );
+};
+
+export const findMostSpecificRegion = (
+  driver: DriverData,
+): {
+  name: string | null;
+  coordinates: { x: number; y: number } | null;
+} => {
+  if (driver.region?.length > 0) {
+    return {
+      name: driver.region[driver.region.length - 1],
+      coordinates: null,
+    };
+  }
+
+  const srcName = driver.src_region?.name;
+  const tgtName = driver.tgt_region?.name;
+  const srcCoords = driver.src_region?.coordinates;
+  const tgtCoords = driver.tgt_region?.coordinates;
+  const srcIsNonWorld =
+    srcName && srcName !== 'World' && hasValidCoords(srcCoords);
+  const tgtIsNonWorld =
+    tgtName && tgtName !== 'World' && hasValidCoords(tgtCoords);
+
+  if (tgtIsNonWorld) {
+    return {
+      name: tgtName,
+      coordinates: tgtCoords!,
+    };
+  }
+  if (srcIsNonWorld) {
+    return {
+      name: srcName,
+      coordinates: srcCoords!,
+    };
+  }
+
+  return { name: null, coordinates: null };
+};
+
+export const getDriverCoordinates = (
+  driver: DriverData,
+  specificRegion: {
+    name: string | null;
+    coordinates: { x: number; y: number } | null;
+  },
+  existingDrivers: DriverData[] = [],
+): DriverData['coordinates'] => {
+  if (!specificRegion.name || specificRegion.name === 'World') {
+    return driver.coordinates;
+  }
+
+  if (specificRegion.coordinates) {
+    const isLatLng =
+      Math.abs(specificRegion.coordinates.x) <= 180 &&
+      Math.abs(specificRegion.coordinates.y) <= 90;
+
+    if (isLatLng) {
+      const svgCoords = geographicToSVG(
+        specificRegion.coordinates.y,
+        specificRegion.coordinates.x,
+      );
+      const percentageCoords = svgToPercentage(svgCoords.x, svgCoords.y);
+      return {
+        x: Math.min(95, Math.max(5, percentageCoords.x)),
+        y: Math.min(95, Math.max(5, percentageCoords.y)),
+        continent: driver.coordinates?.continent || 'Global',
+      };
+    }
+
+    return {
+      x: specificRegion.coordinates.x,
+      y: specificRegion.coordinates.y,
+      continent: driver.coordinates?.continent || 'Global',
+    };
+  }
+
+  return getResponsiveCoordinates(specificRegion.name, existingDrivers);
+};

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

@@ -0,0 +1,45 @@
+@import '../../../lib/theme.styl'
+@import './MapBackground/mapAspect.mixin.styl'
+
+
+.root
+  position relative
+  width 100%
+  mapAspect()
+  padding 0
+  overflow hidden
+
+  @media (min-width: 768px)
+    height 35rem
+    width fit-content
+    flex 1
+
+.mapInner
+  position relative
+  max-height 100%
+  mapAspect()
+  margin 0 auto
+  border-radius var(--p-4)
+  overflow hidden
+
+.shimmerOverlay
+  z-index 20
+
+.inTransition
+  pointer-events none
+
+.worldDrivers
+  position absolute
+  bottom 0
+  display flex
+  align-items center
+  gap 0.5rem
+  padding 0.5rem
+
+  button
+    position static !important
+    transform none !important
+
+    & > span
+      transform none !important
+      opacity 1 !important

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

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'inTransition': string;
+  'mapInner': string;
+  'root': string;
+  'shimmerOverlay': string;
+  'worldDrivers': string;
+}
+export const cssExports: CssExports;
+export default cssExports;