@sybilion/uilib 1.2.24 → 1.2.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.js +1 -1
  2. package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.styl.js +1 -1
  3. package/dist/esm/components/ui/DropdownMenu/DropdownMenu.js +4 -4
  4. package/dist/esm/components/widgets/DriverMap/DriverIcon/DriverIcon.constants.json.js +6 -0
  5. package/dist/esm/components/widgets/DriverMap/DriverIcon/DriverIcon.js +21 -0
  6. package/dist/esm/components/widgets/DriverMap/DriverIcon/DriverIcon.styl.js +7 -0
  7. package/dist/esm/components/widgets/DriverMap/DriverMap.helpers.js +107 -0
  8. package/dist/esm/components/widgets/DriverMap/DriverMap.js +129 -0
  9. package/dist/esm/components/widgets/DriverMap/DriverMap.styl.js +7 -0
  10. package/dist/esm/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.js +8 -0
  11. package/dist/esm/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.styl.js +7 -0
  12. package/dist/esm/components/widgets/DriverMap/MapBackground/MapBackground.js +10 -0
  13. package/dist/esm/components/widgets/DriverMap/MapBackground/MapBackground.styl.js +7 -0
  14. package/dist/esm/components/widgets/DriverMap/MapBackground/map.svg.js +3 -0
  15. package/dist/esm/components/widgets/DriverMap/driverCategoryIcon.js +194 -0
  16. package/dist/esm/components/widgets/DriverMap/driverMapGeography.js +345 -0
  17. package/dist/esm/components/widgets/DriverMap/driverMapSelection.js +17 -0
  18. package/dist/esm/hooks/index.js +1 -0
  19. package/dist/esm/hooks/useEvent.js +0 -2
  20. package/dist/esm/index.js +6 -0
  21. package/dist/esm/types/src/components/ui/DropdownMenu/DropdownMenu.d.ts +2 -2
  22. package/dist/esm/types/src/components/widgets/DriverMap/DriverIcon/DriverIcon.d.ts +17 -0
  23. package/dist/esm/types/src/components/widgets/DriverMap/DriverMap.d.ts +8 -0
  24. package/dist/esm/types/src/components/widgets/DriverMap/DriverMap.helpers.d.ts +21 -0
  25. package/dist/esm/types/src/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.d.ts +1 -0
  26. package/dist/esm/types/src/components/widgets/DriverMap/MapBackground/MapBackground.d.ts +1 -0
  27. package/dist/esm/types/src/components/widgets/DriverMap/driverCategoryIcon.d.ts +1 -0
  28. package/dist/esm/types/src/components/widgets/DriverMap/driverMapGeography.d.ts +80 -0
  29. package/dist/esm/types/src/components/widgets/DriverMap/driverMapSelection.d.ts +3 -0
  30. package/dist/esm/types/src/components/widgets/DriverMap/index.d.ts +8 -0
  31. package/dist/esm/types/src/docs/pages/DriverMapPage.d.ts +1 -0
  32. package/dist/esm/types/src/docs/registry.d.ts +1 -1
  33. package/dist/esm/types/src/hooks/index.d.ts +1 -0
  34. package/dist/esm/types/src/index.d.ts +1 -0
  35. package/package.json +1 -1
  36. package/src/components/ui/Chat/ChatSheet/ChatSelector.styl +3 -1
  37. package/src/components/ui/Chat/ChatSheet/ChatSelector.tsx +1 -1
  38. package/src/components/ui/DropdownMenu/DropdownMenu.tsx +4 -0
  39. package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.constants.json +3 -0
  40. package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.styl +125 -0
  41. package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.styl.d.ts +22 -0
  42. package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.tsx +81 -0
  43. package/src/components/widgets/DriverMap/DriverMap.helpers.ts +164 -0
  44. package/src/components/widgets/DriverMap/DriverMap.styl +45 -0
  45. package/src/components/widgets/DriverMap/DriverMap.styl.d.ts +11 -0
  46. package/src/components/widgets/DriverMap/DriverMap.tsx +214 -0
  47. package/src/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.styl +24 -0
  48. package/src/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.styl.d.ts +9 -0
  49. package/src/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.tsx +11 -0
  50. package/src/components/widgets/DriverMap/MapBackground/MapBackground.styl +13 -0
  51. package/src/components/widgets/DriverMap/MapBackground/MapBackground.styl.d.ts +7 -0
  52. package/src/components/widgets/DriverMap/MapBackground/MapBackground.tsx +18 -0
  53. package/src/components/widgets/DriverMap/MapBackground/map.svg +4337 -0
  54. package/src/components/widgets/DriverMap/MapBackground/mapAspect.mixin.styl +3 -0
  55. package/src/components/widgets/DriverMap/MapBackground/mapAspect.mixin.styl.d.ts +2 -0
  56. package/src/components/widgets/DriverMap/driverCategoryIcon.tsx +279 -0
  57. package/src/components/widgets/DriverMap/driverMapGeography.ts +478 -0
  58. package/src/components/widgets/DriverMap/driverMapSelection.ts +23 -0
  59. package/src/components/widgets/DriverMap/index.ts +18 -0
  60. package/src/docs/config/webpack.config.js +25 -9
  61. package/src/docs/pages/DriverMapPage.tsx +114 -0
  62. package/src/docs/pages/TooltipPage.tsx +14 -10
  63. package/src/docs/registry.ts +6 -5
  64. package/src/hooks/index.ts +1 -0
  65. package/src/hooks/useEvent.ts +0 -2
  66. package/src/index.ts +1 -0
@@ -32,7 +32,7 @@ function ChatSelector({ id, className, onChatDeleted, }) {
32
32
  return (firstMessage.text.slice(0, 30) +
33
33
  (firstMessage.text.length > 30 ? '...' : ''));
34
34
  }
35
- return `Chat ${chat.session_id}`;
35
+ return 'New chat';
36
36
  };
37
37
  return (jsxs("div", { className: S.wrapper, children: [jsx("div", { className: S.selectGrow, children: jsxs(Select, { variant: "clear", value: currentChatId?.toString() ?? '', onValueChange: handleValueChange, children: [jsx(SelectTrigger, { size: "sm", className: className ? cn(S.selectTrigger, className) : S.selectTrigger, children: jsx(SelectValue, { placeholder: "Select chat" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "new", children: "+ New Chat" }), chats.map(chat => (jsx(SelectItem, { value: chat.session_id.toString(), selected: chat.session_id === currentChatId, children: getChatDisplayName(chat) }, chat.session_id)))] })] }) }), jsx(Button, { type: "button", variant: "ghost", size: "sm", className: S.deleteBtn, "aria-label": "Delete chat", disabled: !currentChatId || chats.length === 0, onClick: handleDeleteChat, children: jsx(Trash2Icon, { size: 16 }) })] }));
38
38
  }
@@ -1,6 +1,6 @@
1
1
  import styleInject from 'style-inject';
2
2
 
3
- var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatSelector_wrapper__8Z4wN{align-items:center;display:flex;gap:var(--p-2);min-width:200px;z-index:1000}.ChatSelector_selectGrow__bGR0A{flex:1;min-width:0}.ChatSelector_selectTrigger__DASfc{width:100%}.ChatSelector_deleteBtn__oJ-9b{border-radius:50px;flex-shrink:0;opacity:.3}.ChatSelector_wrapper__8Z4wN:hover .ChatSelector_deleteBtn__oJ-9b{opacity:1}";
3
+ var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatSelector_wrapper__8Z4wN{align-items:center;display:flex;gap:var(--p-2);min-width:200px;z-index:1000}.ChatSelector_selectGrow__bGR0A{flex:1;min-width:0}.ChatSelector_selectTrigger__DASfc{width:100%}.ChatSelector_deleteBtn__oJ-9b{border-radius:50px;flex-shrink:0;opacity:0;pointer-events:none}.ChatSelector_wrapper__8Z4wN:hover .ChatSelector_deleteBtn__oJ-9b{opacity:1;pointer-events:auto}";
4
4
  var S = {"wrapper":"ChatSelector_wrapper__8Z4wN","selectGrow":"ChatSelector_selectGrow__bGR0A","selectTrigger":"ChatSelector_selectTrigger__DASfc","deleteBtn":"ChatSelector_deleteBtn__oJ-9b"};
5
5
  styleInject(css_248z);
6
6
 
@@ -13,8 +13,8 @@ function DropdownMenuPortal({ ...props }) {
13
13
  function DropdownMenuTrigger({ ...props }) {
14
14
  return (jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
15
15
  }
16
- function DropdownMenuContent({ className, sideOffset = 4, elevation = 'sm', ...props }) {
17
- return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn(S.content, S[`elevation-${elevation}`], className), ...props }) }));
16
+ function DropdownMenuContent({ className, sideOffset = 4, collisionPadding = 8, elevation = 'sm', ...props }) {
17
+ return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(S.content, S[`elevation-${elevation}`], className), ...props }) }));
18
18
  }
19
19
  function DropdownMenuGroup({ ...props }) {
20
20
  return (jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
@@ -46,8 +46,8 @@ function DropdownMenuSub({ ...props }) {
46
46
  function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
47
47
  return (jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn(S.subTrigger, className), ...props, children: [children, jsx(CaretRight, { className: "ml-auto size-4" })] }));
48
48
  }
49
- function DropdownMenuSubContent({ className, ...props }) {
50
- return (jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn(S.subContent, className), ...props }));
49
+ function DropdownMenuSubContent({ className, collisionPadding = 8, ...props }) {
50
+ return (jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", collisionPadding: collisionPadding, className: cn(S.subContent, className), ...props }));
51
51
  }
52
52
 
53
53
  export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
@@ -0,0 +1,6 @@
1
+ var FADE_DURATION = 300;
2
+ var constants = {
3
+ FADE_DURATION: FADE_DURATION
4
+ };
5
+
6
+ export { FADE_DURATION, constants as default };
@@ -0,0 +1,21 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import cn from 'classnames';
3
+ import { Badge } from '../../../ui/Badge/Badge.js';
4
+ import { Tooltip, TooltipTrigger, TooltipContent } from '../../../ui/Tooltip/Tooltip.js';
5
+ import { getCategoryIcon } from '../driverCategoryIcon.js';
6
+ import S from './DriverIcon.styl.js';
7
+
8
+ const BADGE_SIZES = {
9
+ s: 's',
10
+ m: 'm',
11
+ l: 'l',
12
+ };
13
+ function DriverIcon({ driver, size, isSelected, onClick, isVisible, isLoading = false, }) {
14
+ return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, className: cn(S.root, S[`size-${size}`], isSelected && S.selected, isVisible ? S.visible : S.hidden, isLoading && S.loadingHidden), children: jsx("button", { type: "button", onClick: onClick, style: {
15
+ left: `${driver.coordinates.x}%`,
16
+ top: `${driver.coordinates.y}%`,
17
+ zIndex: isSelected ? 2 : '',
18
+ }, children: jsx(Badge, { className: S.badge, children: jsx("div", { className: S.icon, children: getCategoryIcon(driver.category) }) }) }) }), jsx(TooltipContent, { side: "top", className: S.tooltipContent, children: jsxs("div", { className: S.tooltipSpacing, children: [jsxs("div", { className: S.tooltipCategory, children: [jsx("span", { className: S.tooltipCategoryIcon, children: getCategoryIcon(driver.category) }), jsx("span", { className: S.tooltipCategoryText, children: driver.category })] }), jsx("div", { className: S.tooltipName, children: driver.name })] }) })] }));
19
+ }
20
+
21
+ export { BADGE_SIZES, DriverIcon };
@@ -0,0 +1,7 @@
1
+ import styleInject from 'style-inject';
2
+
3
+ var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.DriverIcon_root__LJkZV{cursor:pointer;outline:none;position:absolute;transform:translateX(-50%) translateY(-50%)}.DriverIcon_root__LJkZV:hover{transition:transform .3s ease-out}.DriverIcon_root__LJkZV:focus{outline:none}.DriverIcon_badge__gV6XC,.DriverIcon_loadingHidden__fm2N0{opacity:0;pointer-events:none}.DriverIcon_badge__gV6XC{padding:.25rem;transform:translateY(10px);transition:all .3s ease-out}.DriverIcon_badge__gV6XC svg{height:20px;width:20px}.DriverIcon_size-s__5oC0V,.DriverIcon_size-s__5oC0V .DriverIcon_badge__gV6XC{border-radius:10px;height:2rem;width:2rem}.DriverIcon_size-m__HoK4J,.DriverIcon_size-m__HoK4J .DriverIcon_badge__gV6XC{border-radius:12px;height:2.5rem;width:2.5rem}.DriverIcon_size-l__6solM,.DriverIcon_size-l__6solM .DriverIcon_badge__gV6XC{border-radius:14px;height:3rem;width:3rem}.DriverIcon_visible__HVfIl .DriverIcon_badge__gV6XC{opacity:1;transform:translateY(0);transition:.3s ease-out;transition-property:opacity,transform}.DriverIcon_visible__HVfIl .DriverIcon_badge__gV6XC span{transition:box-shadow 0s ease-out .1s}.DriverIcon_root__LJkZV:first-child .DriverIcon_badge__gV6XC{transition-delay:30ms}.DriverIcon_visible__HVfIl:first-child .DriverIcon_badge__gV6XC{transition-delay:60ms}.DriverIcon_hidden__udGUf:first-child .DriverIcon_badge__gV6XC{transition-duration:.27s}.DriverIcon_root__LJkZV:nth-child(2) .DriverIcon_badge__gV6XC{transition-delay:60ms}.DriverIcon_visible__HVfIl:nth-child(2) .DriverIcon_badge__gV6XC{transition-delay:.12s}.DriverIcon_hidden__udGUf:nth-child(2) .DriverIcon_badge__gV6XC{transition-duration:.24s}.DriverIcon_root__LJkZV:nth-child(3) .DriverIcon_badge__gV6XC{transition-delay:90ms}.DriverIcon_visible__HVfIl:nth-child(3) .DriverIcon_badge__gV6XC{transition-delay:.18s}.DriverIcon_hidden__udGUf:nth-child(3) .DriverIcon_badge__gV6XC{transition-duration:.21s}.DriverIcon_root__LJkZV:nth-child(4) .DriverIcon_badge__gV6XC{transition-delay:.12s}.DriverIcon_visible__HVfIl:nth-child(4) .DriverIcon_badge__gV6XC{transition-delay:.24s}.DriverIcon_hidden__udGUf:nth-child(4) .DriverIcon_badge__gV6XC{transition-duration:.18s}.DriverIcon_root__LJkZV:nth-child(5) .DriverIcon_badge__gV6XC{transition-delay:.15s}.DriverIcon_visible__HVfIl:nth-child(5) .DriverIcon_badge__gV6XC{transition-delay:.3s}.DriverIcon_hidden__udGUf:nth-child(5) .DriverIcon_badge__gV6XC{transition-duration:.15s}.DriverIcon_root__LJkZV:nth-child(6) .DriverIcon_badge__gV6XC{transition-delay:.18s}.DriverIcon_visible__HVfIl:nth-child(6) .DriverIcon_badge__gV6XC{transition-delay:.36s}.DriverIcon_hidden__udGUf:nth-child(6) .DriverIcon_badge__gV6XC{transition-duration:.12s}.DriverIcon_root__LJkZV:hover{z-index:10}.DriverIcon_root__LJkZV:hover .DriverIcon_badge__gV6XC{box-shadow:0 0 0 1px var(--background);transform:scale(1.1);transition-delay:0ms;transition-duration:.2s}.DriverIcon_selected__-yaRV .DriverIcon_badge__gV6XC,.DriverIcon_selected__-yaRV:hover .DriverIcon_badge__gV6XC{box-shadow:inset 0 0 0 3px var(--sb-cyan-400);transform:scale(1.1)}.dark .DriverIcon_selected__-yaRV .DriverIcon_badge__gV6XC,.dark .DriverIcon_selected__-yaRV:hover .DriverIcon_badge__gV6XC{box-shadow:inset 0 0 0 2px var(--sb-cyan-500)}.DriverIcon_root__LJkZV:not(.DriverIcon_selected__-yaRV):hover .DriverIcon_icon__1XnNP{transform:scale(1.05)}.DriverIcon_tooltipContent__a5p3p{background-color:var(--popover);border:1px solid var(--border);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:var(--popover-foreground);font-family:var(--font-family-body);font-size:.75rem;max-width:20rem}.DriverIcon_tooltipCategory__k036X{align-items:center;color:var(--muted-foreground);display:flex;gap:.25rem}.DriverIcon_tooltipCategoryIcon__CKac6{color:var(--muted-foreground);height:.75rem;width:.75rem}.DriverIcon_tooltipCategoryText__YaHvf{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.DriverIcon_tooltipName__3YJCB{font-weight:400}.DriverIcon_tooltipSpacing__p2MvJ{display:flex;flex-direction:column;gap:.25rem}";
4
+ var S = {"root":"DriverIcon_root__LJkZV","loadingHidden":"DriverIcon_loadingHidden__fm2N0","badge":"DriverIcon_badge__gV6XC","size-s":"DriverIcon_size-s__5oC0V","size-m":"DriverIcon_size-m__HoK4J","size-l":"DriverIcon_size-l__6solM","visible":"DriverIcon_visible__HVfIl","hidden":"DriverIcon_hidden__udGUf","selected":"DriverIcon_selected__-yaRV","icon":"DriverIcon_icon__1XnNP","tooltipContent":"DriverIcon_tooltipContent__a5p3p","tooltipCategory":"DriverIcon_tooltipCategory__k036X","tooltipCategoryIcon":"DriverIcon_tooltipCategoryIcon__CKac6","tooltipCategoryText":"DriverIcon_tooltipCategoryText__YaHvf","tooltipName":"DriverIcon_tooltipName__3YJCB","tooltipSpacing":"DriverIcon_tooltipSpacing__p2MvJ"};
5
+ styleInject(css_248z);
6
+
7
+ export { S as default };
@@ -0,0 +1,107 @@
1
+ import { BADGE_SIZES } from './DriverIcon/DriverIcon.js';
2
+ import { geographicToSVG, svgToPercentage, getResponsiveCoordinates } from './driverMapGeography.js';
3
+ import { getDriverImportance } from './driverMapSelection.js';
4
+
5
+ // Calculate badge sizes for all drivers based on their importance
6
+ const calculateBadgeSizes = (drivers) => {
7
+ if (drivers.length === 0)
8
+ return {};
9
+ const importanceValues = drivers
10
+ .map(getDriverImportance)
11
+ .filter((val) => typeof val === 'number' && !isNaN(val) && val >= 0);
12
+ if (importanceValues.length === 0) {
13
+ return drivers.reduce((acc, driver) => {
14
+ acc[driver.id] = BADGE_SIZES.s;
15
+ return acc;
16
+ }, {});
17
+ }
18
+ const min = Math.min(...importanceValues);
19
+ const max = Math.max(...importanceValues);
20
+ const range = max - min;
21
+ if (range === 0) {
22
+ return drivers.reduce((acc, driver) => {
23
+ acc[driver.id] = BADGE_SIZES.s;
24
+ return acc;
25
+ }, {});
26
+ }
27
+ return drivers.reduce((acc, driver) => {
28
+ const importance = getDriverImportance(driver);
29
+ if (typeof importance !== 'number' ||
30
+ isNaN(importance) ||
31
+ importance < 0) {
32
+ acc[driver.id] = BADGE_SIZES.s;
33
+ return acc;
34
+ }
35
+ const normalized = (importance - min) / range;
36
+ acc[driver.id] =
37
+ normalized >= 0.66
38
+ ? BADGE_SIZES.l
39
+ : normalized >= 0.33
40
+ ? BADGE_SIZES.m
41
+ : BADGE_SIZES.s;
42
+ return acc;
43
+ }, {});
44
+ };
45
+ const hasValidCoords = (coords) => {
46
+ return (coords?.x != null &&
47
+ coords?.y != null &&
48
+ typeof coords.x === 'number' &&
49
+ typeof coords.y === 'number' &&
50
+ !isNaN(coords.x) &&
51
+ !isNaN(coords.y) &&
52
+ Math.abs(coords.x) > 0 &&
53
+ Math.abs(coords.y) > 0);
54
+ };
55
+ const findMostSpecificRegion = (driver) => {
56
+ if (driver.region?.length > 0) {
57
+ return {
58
+ name: driver.region[driver.region.length - 1],
59
+ coordinates: null,
60
+ };
61
+ }
62
+ const srcName = driver.src_region?.name;
63
+ const tgtName = driver.tgt_region?.name;
64
+ const srcCoords = driver.src_region?.coordinates;
65
+ const tgtCoords = driver.tgt_region?.coordinates;
66
+ const srcIsNonWorld = srcName && srcName !== 'World' && hasValidCoords(srcCoords);
67
+ const tgtIsNonWorld = tgtName && tgtName !== 'World' && hasValidCoords(tgtCoords);
68
+ if (tgtIsNonWorld) {
69
+ return {
70
+ name: tgtName,
71
+ coordinates: tgtCoords,
72
+ };
73
+ }
74
+ if (srcIsNonWorld) {
75
+ return {
76
+ name: srcName,
77
+ coordinates: srcCoords,
78
+ };
79
+ }
80
+ return { name: null, coordinates: null };
81
+ };
82
+ const getDriverCoordinates = (driver, specificRegion, existingDrivers = []) => {
83
+ if (!specificRegion.name || specificRegion.name === 'World') {
84
+ return driver.coordinates;
85
+ }
86
+ if (specificRegion.coordinates) {
87
+ const isLatLng = Math.abs(specificRegion.coordinates.x) <= 180 &&
88
+ Math.abs(specificRegion.coordinates.y) <= 90;
89
+ if (isLatLng) {
90
+ const svgCoords = geographicToSVG(specificRegion.coordinates.y, specificRegion.coordinates.x);
91
+ const percentageCoords = svgToPercentage(svgCoords.x, svgCoords.y);
92
+ return {
93
+ x: Math.min(95, Math.max(5, percentageCoords.x)),
94
+ y: Math.min(95, Math.max(5, percentageCoords.y)),
95
+ continent: driver.coordinates?.continent || 'Global',
96
+ };
97
+ }
98
+ return {
99
+ x: specificRegion.coordinates.x,
100
+ y: specificRegion.coordinates.y,
101
+ continent: driver.coordinates?.continent || 'Global',
102
+ };
103
+ }
104
+ return getResponsiveCoordinates(specificRegion.name, existingDrivers);
105
+ };
106
+
107
+ export { calculateBadgeSizes, findMostSpecificRegion, getDriverCoordinates, hasValidCoords };
@@ -0,0 +1,129 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import cn from 'classnames';
3
+ import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
4
+ import useEvent from '../../../hooks/useEvent.js';
5
+ import { Shimmer } from '@homecode/ui';
6
+ import { DriverIcon } from './DriverIcon/DriverIcon.js';
7
+ import constants from './DriverIcon/DriverIcon.constants.json.js';
8
+ import { findMostSpecificRegion, getDriverCoordinates, hasValidCoords, calculateBadgeSizes } from './DriverMap.helpers.js';
9
+ import S from './DriverMap.styl.js';
10
+ import { MapBackground } from './MapBackground/MapBackground.js';
11
+ import { getHighestImportanceDriver } from './driverMapSelection.js';
12
+
13
+ const delay = (ms) => new Promise(r => setTimeout(r, ms));
14
+ const transitionDelay = () => delay(constants.FADE_DURATION);
15
+ function DriverMap({ drivers, isLoading, setSelectedDriver, selectedDriver, }) {
16
+ const visibleDriversRef = useRef([]);
17
+ const [showingDrivers, setShowingDrivers] = useState(drivers);
18
+ const [badgeSizes, setBadgeSizes] = useState({});
19
+ const [isVisible, setIsVisible] = useState(false);
20
+ const [isTransitioning, setIsTransitioning] = useState(false);
21
+ const makeTransition = async (nextDrivers) => {
22
+ const hadDrivers = showingDrivers.length > 0;
23
+ setIsTransitioning(true);
24
+ if (hadDrivers) {
25
+ setIsVisible(false);
26
+ await transitionDelay();
27
+ }
28
+ if (nextDrivers.length > 0) {
29
+ setShowingDrivers(nextDrivers);
30
+ setIsVisible(false);
31
+ const sizes = calculateBadgeSizes(nextDrivers);
32
+ setBadgeSizes(sizes);
33
+ await delay(30);
34
+ setIsVisible(true);
35
+ await transitionDelay();
36
+ }
37
+ else {
38
+ setShowingDrivers([]);
39
+ setBadgeSizes({});
40
+ setIsVisible(false);
41
+ }
42
+ setIsTransitioning(false);
43
+ };
44
+ const [worldDrivers, otherDrivers] = useMemo(() => {
45
+ const visibleDrivers = [];
46
+ const worldDriversList = [];
47
+ drivers.forEach(driver => {
48
+ let importance = driver.importance || 0;
49
+ if (importance === 0) {
50
+ const mean = driver?.rawImportance?.overall?.mean;
51
+ if (typeof mean === 'number') {
52
+ importance = Math.abs(mean) * 100;
53
+ }
54
+ }
55
+ const specificRegion = findMostSpecificRegion(driver);
56
+ const isEmptyRegion = driver.region?.length === 0;
57
+ const isWorldRegion = specificRegion.name === 'World' ||
58
+ driver.region?.slice(-1)[0] === 'World';
59
+ const coordinates = getDriverCoordinates(driver, specificRegion, visibleDrivers);
60
+ const driverToAdd = {
61
+ ...driver,
62
+ coordinates,
63
+ };
64
+ const shouldGoToWorldDrivers = isWorldRegion ||
65
+ !hasValidCoords(driverToAdd.coordinates) ||
66
+ (isEmptyRegion && !specificRegion.name);
67
+ if (shouldGoToWorldDrivers && importance >= 0) {
68
+ worldDriversList.push(driver);
69
+ }
70
+ else if (hasValidCoords(driverToAdd.coordinates) && importance >= 0) {
71
+ visibleDrivers.push(driverToAdd);
72
+ }
73
+ });
74
+ return [
75
+ worldDriversList.sort((a, b) => b.importance - a.importance),
76
+ visibleDrivers,
77
+ ];
78
+ }, [drivers]);
79
+ useEffect(() => {
80
+ void makeTransition(drivers);
81
+ if (drivers.length > 0) {
82
+ const idx = getHighestImportanceDriver(drivers);
83
+ if (idx !== null && idx >= 0) {
84
+ setSelectedDriver(drivers[idx]);
85
+ }
86
+ }
87
+ }, [drivers]);
88
+ useEffect(() => {
89
+ visibleDriversRef.current = otherDrivers;
90
+ }, [otherDrivers]);
91
+ const handleKeyDown = useCallback((e) => {
92
+ const items = visibleDriversRef.current;
93
+ if (!selectedDriver || items.length === 0 || e.metaKey || e.ctrlKey)
94
+ return;
95
+ const stop = () => {
96
+ e.preventDefault();
97
+ e.stopPropagation();
98
+ };
99
+ const currIndex = items.findIndex(d => d.id === selectedDriver.id);
100
+ if (e.key === 'ArrowLeft') {
101
+ const prevIndex = currIndex > 0 ? currIndex - 1 : items.length - 1;
102
+ setSelectedDriver(items[prevIndex]);
103
+ stop();
104
+ }
105
+ else if (e.key === 'ArrowRight') {
106
+ const nextIndex = currIndex < items.length - 1 ? currIndex + 1 : 0;
107
+ setSelectedDriver(items[nextIndex]);
108
+ stop();
109
+ }
110
+ }, [selectedDriver, setSelectedDriver]);
111
+ useEvent({
112
+ event: 'keydown',
113
+ callback: handleKeyDown,
114
+ isCapture: true,
115
+ });
116
+ return (jsxs("div", { className: cn(S.root, isTransitioning && S.inTransition), children: [jsxs("div", { className: S.mapInner, children: [jsx(MapBackground, {}), isLoading && jsx(Shimmer, { className: S.shimmerOverlay, size: "l" }), otherDrivers.map(driver => (jsx(DriverIcon, { isLoading: isLoading, isVisible: isVisible, driver: driver, size: badgeSizes[driver.id] || 's', isSelected: selectedDriver?.id === driver.id, onClick: () => setSelectedDriver(driver) }, driver.id)))] }), jsx("div", { className: S.worldDrivers, children: worldDrivers.map(driver => {
117
+ const driverWithCoords = {
118
+ ...driver,
119
+ coordinates: driver.coordinates || {
120
+ x: 0,
121
+ y: 0,
122
+ continent: 'Global',
123
+ },
124
+ };
125
+ return (jsx(DriverIcon, { isLoading: isLoading, isVisible: isVisible, driver: driverWithCoords, size: badgeSizes[driver.id] || 's', isSelected: selectedDriver?.id === driver.id, onClick: () => setSelectedDriver(driver) }, driver.id));
126
+ }) })] }));
127
+ }
128
+
129
+ export { DriverMap };
@@ -0,0 +1,7 @@
1
+ import styleInject from 'style-inject';
2
+
3
+ var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.DriverMap_root__JszhG{aspect-ratio:623.2/341.276;max-width:100%;overflow:hidden;padding:0;position:relative;width:100%}@media (min-width:768px){.DriverMap_root__JszhG{flex:1;height:35rem;width:-moz-fit-content;width:fit-content}}.DriverMap_mapInner__E7rZR{aspect-ratio:623.2/341.276;border-radius:var(--p-4);margin:0 auto;max-height:100%;max-width:100%;overflow:hidden;position:relative}.DriverMap_shimmerOverlay__UH2qz{z-index:20}.DriverMap_inTransition__lvYwJ{pointer-events:none}.DriverMap_worldDrivers__sZOIW{align-items:center;bottom:0;display:flex;gap:.5rem;padding:.5rem;position:absolute}.DriverMap_worldDrivers__sZOIW button{position:static!important;transform:none!important}.DriverMap_worldDrivers__sZOIW button>span{opacity:1!important;transform:none!important}";
4
+ var S = {"root":"DriverMap_root__JszhG","mapInner":"DriverMap_mapInner__E7rZR","shimmerOverlay":"DriverMap_shimmerOverlay__UH2qz","inTransition":"DriverMap_inTransition__lvYwJ","worldDrivers":"DriverMap_worldDrivers__sZOIW"};
5
+ styleInject(css_248z);
6
+
7
+ export { S as default };
@@ -0,0 +1,8 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import S from './LoadingSpinner.styl.js';
3
+
4
+ function LoadingSpinner() {
5
+ return (jsx("div", { className: S.loadingSpinnerContainer, children: jsx("div", { className: S.loadingSpinner }) }));
6
+ }
7
+
8
+ export { LoadingSpinner };
@@ -0,0 +1,7 @@
1
+ import styleInject from 'style-inject';
2
+
3
+ var css_248z = ".LoadingSpinner_loadingSpinnerContainer__Z69yY{align-items:center;display:flex;inset:0;justify-content:center;position:absolute;z-index:20}.LoadingSpinner_loadingSpinner__Nouur{border-top-color:var(--muted-foreground);height:1.5rem;width:1.5rem;border-opacity:.2;border:2px solid var(--muted-foreground);border-top-opacity:.6;animation:LoadingSpinner_spin__VSFJr 1s linear infinite;border-radius:50%}@keyframes LoadingSpinner_spin__VSFJr{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";
4
+ var S = {"loadingSpinnerContainer":"LoadingSpinner_loadingSpinnerContainer__Z69yY","loadingSpinner":"LoadingSpinner_loadingSpinner__Nouur","spin":"LoadingSpinner_spin__VSFJr"};
5
+ styleInject(css_248z);
6
+
7
+ export { S as default };
@@ -0,0 +1,10 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import S from './MapBackground.styl.js';
3
+ import mapBgUrl from './map.svg.js';
4
+
5
+ function MapBackground() {
6
+ const src = mapBgUrl;
7
+ return (jsx("img", { alt: "", className: S.mapBackground, decoding: "async", draggable: false, src: src }));
8
+ }
9
+
10
+ export { MapBackground };
@@ -0,0 +1,7 @@
1
+ import styleInject from 'style-inject';
2
+
3
+ var css_248z = ".MapBackground_mapBackground__DC1-Z{aspect-ratio:623.2/341.276;display:block;height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}";
4
+ var S = {"mapBackground":"MapBackground_mapBackground__DC1-Z"};
5
+ styleInject(css_248z);
6
+
7
+ export { S as default };