@sybilion/uilib 1.2.24 → 1.3.0

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,79 @@
+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,50 @@
+@import '../../../lib/theme.styl'
+@import '../../ui/WorldMap/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
+
+.mapWorld
+  position absolute
+  inset 0
+  box-sizing border-box
+
+.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,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'inTransition': string;
+  'mapInner': string;
+  'mapWorld': string;
+  'root': string;
+  'shimmerOverlay': string;
+  'worldDrivers': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,212 @@
+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';
+
+import { BadgeSize, DriverIcon } from './DriverIcon/DriverIcon';
+import constants from './DriverIcon/DriverIcon.constants.json';
+import {
+  calculateBadgeSizes,
+  findMostSpecificRegion,
+  getDriverCoordinates,
+  hasValidCoords,
+} from './DriverMap.helpers';
+import S from './DriverMap.styl';
+import type { DriverData } from './driverMapGeography';
+import { getHighestImportanceDriver } from './driverMapSelection';
+
+export interface DriverMapProps {
+  drivers: DriverData[];
+  isLoading: boolean;
+  setSelectedDriver: (driver: DriverData) => void;
+  selectedDriver: DriverData | null;
+}
+
+const delay = (ms: number) => new Promise<void>(r => setTimeout(r, ms));
+
+const transitionDelay = () => delay(constants.FADE_DURATION);
+
+export function DriverMap({
+  drivers,
+  isLoading,
+  setSelectedDriver,
+  selectedDriver,
+}: DriverMapProps) {
+  const visibleDriversRef = useRef<DriverData[]>([]);
+
+  const [showingDrivers, setShowingDrivers] = useState<DriverData[]>(drivers);
+  const [badgeSizes, setBadgeSizes] = useState<Record<string, BadgeSize>>({});
+  const [isVisible, setIsVisible] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  const makeTransition = async (nextDrivers: DriverData[]) => {
+    const hadDrivers = showingDrivers.length > 0;
+
+    setIsTransitioning(true);
+
+    if (hadDrivers) {
+      setIsVisible(false);
+      await transitionDelay();
+    }
+
+    if (nextDrivers.length > 0) {
+      setShowingDrivers(nextDrivers);
+      setIsVisible(false);
+
+      const sizes = calculateBadgeSizes(nextDrivers);
+      setBadgeSizes(sizes);
+
+      await delay(30);
+      setIsVisible(true);
+      await transitionDelay();
+    } else {
+      setShowingDrivers([]);
+      setBadgeSizes({});
+      setIsVisible(false);
+    }
+
+    setIsTransitioning(false);
+  };
+
+  const [worldDrivers, otherDrivers] = useMemo(() => {
+    const visibleDrivers: DriverData[] = [];
+    const worldDriversList: DriverData[] = [];
+
+    drivers.forEach(driver => {
+      let importance = driver.importance || 0;
+      if (importance === 0) {
+        const mean = driver?.rawImportance?.overall?.mean;
+        if (typeof mean === 'number') {
+          importance = Math.abs(mean) * 100;
+        }
+      }
+
+      const specificRegion = findMostSpecificRegion(driver);
+      const isEmptyRegion = driver.region?.length === 0;
+      const isWorldRegion =
+        specificRegion.name === 'World' ||
+        driver.region?.slice(-1)[0] === 'World';
+
+      const coordinates = getDriverCoordinates(
+        driver,
+        specificRegion,
+        visibleDrivers,
+      );
+      const driverToAdd = {
+        ...driver,
+        coordinates,
+      };
+
+      const shouldGoToWorldDrivers =
+        isWorldRegion ||
+        !hasValidCoords(driverToAdd.coordinates) ||
+        (isEmptyRegion && !specificRegion.name);
+
+      if (shouldGoToWorldDrivers && importance >= 0) {
+        worldDriversList.push(driver);
+      } else if (hasValidCoords(driverToAdd.coordinates) && importance >= 0) {
+        visibleDrivers.push(driverToAdd);
+      }
+    });
+
+    return [
+      worldDriversList.sort((a, b) => b.importance - a.importance),
+      visibleDrivers,
+    ];
+  }, [drivers]);
+
+  useEffect(() => {
+    void makeTransition(drivers);
+
+    if (drivers.length > 0) {
+      const idx = getHighestImportanceDriver(drivers);
+      if (idx !== null && idx >= 0) {
+        setSelectedDriver(drivers[idx]);
+      }
+    }
+  }, [drivers]);
+
+  useEffect(() => {
+    visibleDriversRef.current = otherDrivers;
+  }, [otherDrivers]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const items = visibleDriversRef.current;
+
+      if (!selectedDriver || items.length === 0 || e.metaKey || e.ctrlKey)
+        return;
+
+      const stop = () => {
+        e.preventDefault();
+        e.stopPropagation();
+      };
+
+      const currIndex = items.findIndex(d => d.id === selectedDriver.id);
+
+      if (e.key === 'ArrowLeft') {
+        const prevIndex = currIndex > 0 ? currIndex - 1 : items.length - 1;
+
+        setSelectedDriver(items[prevIndex]);
+        stop();
+      } else if (e.key === 'ArrowRight') {
+        const nextIndex = currIndex < items.length - 1 ? currIndex + 1 : 0;
+
+        setSelectedDriver(items[nextIndex]);
+        stop();
+      }
+    },
+    [selectedDriver, setSelectedDriver],
+  );
+
+  useEvent({
+    event: 'keydown',
+    callback: handleKeyDown,
+    isCapture: true,
+  });
+
+  return (
+    <div className={cn(S.root, isTransitioning && S.inTransition)}>
+      <div className={S.mapInner}>
+        <WorldMap className={S.mapWorld} />
+        {isLoading && <Shimmer className={S.shimmerOverlay} size="l" />}
+        {otherDrivers.map(driver => (
+          <DriverIcon
+            key={driver.id}
+            isLoading={isLoading}
+            isVisible={isVisible}
+            driver={driver}
+            size={badgeSizes[driver.id] || 's'}
+            isSelected={selectedDriver?.id === driver.id}
+            onClick={() => setSelectedDriver(driver)}
+          />
+        ))}
+      </div>
+      <div className={S.worldDrivers}>
+        {worldDrivers.map(driver => {
+          const driverWithCoords = {
+            ...driver,
+            coordinates: driver.coordinates || {
+              x: 0,
+              y: 0,
+              continent: 'Global',
+            },
+          };
+          return (
+            <DriverIcon
+              key={driver.id}
+              isLoading={isLoading}
+              isVisible={isVisible}
+              driver={driverWithCoords}
+              size={badgeSizes[driver.id] || 's'}
+              isSelected={selectedDriver?.id === driver.id}
+              onClick={() => setSelectedDriver(driver)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}