@sybilion/uilib 1.2.23 → 1.2.26

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;

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

@@ -0,0 +1,214 @@
+'use client';
+
+import cn from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+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 { MapBackground } from './MapBackground/MapBackground';
+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}>
+        <MapBackground />
+        {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>
+  );
+}

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

@@ -0,0 +1,24 @@
+// Loading spinner component styles
+.loadingSpinnerContainer
+  position absolute
+  inset 0
+  display flex
+  align-items center
+  justify-content center
+  z-index 20
+
+.loadingSpinner
+  width 1.5rem
+  height 1.5rem
+  border 2px solid var(--muted-foreground)
+  border-opacity 0.2
+  border-top-color var(--muted-foreground)
+  border-top-opacity 0.6
+  border-radius 50%
+  animation spin 1s linear infinite
+
+@keyframes spin
+  from
+    transform rotate(0deg)
+  to
+    transform rotate(360deg)

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

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

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

@@ -0,0 +1,11 @@
+'use client';
+
+import S from './LoadingSpinner.styl';
+
+export function LoadingSpinner() {
+  return (
+    <div className={S.loadingSpinnerContainer}>
+      <div className={S.loadingSpinner}></div>
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+@import './mapAspect.mixin.styl'
+
+// Map is <img src> from bundled URL (data URL or file). Avoids CSS url() resolving to broken relative paths in consumers.
+.mapBackground
+  position absolute
+  display block
+  width 100%
+  height 100%
+  mapAspect()
+  object-fit contain
+  object-position center
+  pointer-events none
+  user-select none

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

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

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

@@ -0,0 +1,18 @@
+'use client';
+
+import S from './MapBackground.styl';
+import mapBgUrl from './map.svg';
+
+export function MapBackground() {
+  const src = mapBgUrl as unknown as string;
+
+  return (
+    <img
+      alt=""
+      className={S.mapBackground}
+      decoding="async"
+      draggable={false}
+      src={src}
+    />
+  );
+}