@sybilion/uilib 1.2.23 → 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.
- package/dist/esm/components/ui/AppHeader/AppHeader.styl.js +1 -1
- package/dist/esm/components/ui/Card/Card.styl.js +1 -1
- package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.js +1 -1
- package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.styl.js +1 -1
- package/dist/esm/components/ui/DropdownMenu/DropdownMenu.js +4 -4
- package/dist/esm/components/ui/NavUserHeader/NavUserHeader.js +5 -2
- package/dist/esm/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.js +1 -1
- package/dist/esm/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.styl.js +2 -2
- package/dist/esm/components/widgets/DriverMap/DriverIcon/DriverIcon.constants.json.js +6 -0
- package/dist/esm/components/widgets/DriverMap/DriverIcon/DriverIcon.js +21 -0
- package/dist/esm/components/widgets/DriverMap/DriverIcon/DriverIcon.styl.js +7 -0
- package/dist/esm/components/widgets/DriverMap/DriverMap.helpers.js +107 -0
- package/dist/esm/components/widgets/DriverMap/DriverMap.js +129 -0
- package/dist/esm/components/widgets/DriverMap/DriverMap.styl.js +7 -0
- package/dist/esm/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.js +8 -0
- package/dist/esm/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.styl.js +7 -0
- package/dist/esm/components/widgets/DriverMap/MapBackground/MapBackground.js +10 -0
- package/dist/esm/components/widgets/DriverMap/MapBackground/MapBackground.styl.js +7 -0
- package/dist/esm/components/widgets/DriverMap/MapBackground/map.svg.js +3 -0
- package/dist/esm/components/widgets/DriverMap/driverCategoryIcon.js +194 -0
- package/dist/esm/components/widgets/DriverMap/driverMapGeography.js +345 -0
- package/dist/esm/components/widgets/DriverMap/driverMapSelection.js +17 -0
- package/dist/esm/hooks/index.js +1 -0
- package/dist/esm/hooks/useEvent.js +0 -2
- package/dist/esm/index.js +6 -0
- package/dist/esm/types/src/components/ui/DropdownMenu/DropdownMenu.d.ts +2 -2
- package/dist/esm/types/src/components/widgets/DriverMap/DriverIcon/DriverIcon.d.ts +17 -0
- package/dist/esm/types/src/components/widgets/DriverMap/DriverMap.d.ts +8 -0
- package/dist/esm/types/src/components/widgets/DriverMap/DriverMap.helpers.d.ts +21 -0
- package/dist/esm/types/src/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.d.ts +1 -0
- package/dist/esm/types/src/components/widgets/DriverMap/MapBackground/MapBackground.d.ts +1 -0
- package/dist/esm/types/src/components/widgets/DriverMap/driverCategoryIcon.d.ts +1 -0
- package/dist/esm/types/src/components/widgets/DriverMap/driverMapGeography.d.ts +80 -0
- package/dist/esm/types/src/components/widgets/DriverMap/driverMapSelection.d.ts +3 -0
- package/dist/esm/types/src/components/widgets/DriverMap/index.d.ts +8 -0
- package/dist/esm/types/src/docs/pages/DriverMapPage.d.ts +1 -0
- package/dist/esm/types/src/docs/registry.d.ts +1 -1
- package/dist/esm/types/src/hooks/index.d.ts +1 -0
- package/dist/esm/types/src/index.d.ts +1 -0
- package/dist/esm/types/src/sybilion-auth/SybilionAuthProvider.d.ts +1 -1
- package/package.json +4 -4
- package/src/components/ui/AppHeader/AppHeader.styl +4 -0
- package/src/components/ui/Card/Card.styl +1 -0
- package/src/components/ui/Chat/ChatSheet/ChatSelector.styl +3 -1
- package/src/components/ui/Chat/ChatSheet/ChatSelector.tsx +1 -1
- package/src/components/ui/DropdownMenu/DropdownMenu.tsx +4 -0
- package/src/components/ui/NavUserHeader/NavUserHeader.tsx +9 -3
- package/src/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.styl +12 -0
- package/src/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.styl.d.ts +1 -0
- package/src/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.tsx +1 -1
- package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.constants.json +3 -0
- package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.styl +125 -0
- package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.styl.d.ts +22 -0
- package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.tsx +81 -0
- package/src/components/widgets/DriverMap/DriverMap.helpers.ts +164 -0
- package/src/components/widgets/DriverMap/DriverMap.styl +45 -0
- package/src/components/widgets/DriverMap/DriverMap.styl.d.ts +11 -0
- package/src/components/widgets/DriverMap/DriverMap.tsx +214 -0
- package/src/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.styl +24 -0
- package/src/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.styl.d.ts +9 -0
- package/src/components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.tsx +11 -0
- package/src/components/widgets/DriverMap/MapBackground/MapBackground.styl +13 -0
- package/src/components/widgets/DriverMap/MapBackground/MapBackground.styl.d.ts +7 -0
- package/src/components/widgets/DriverMap/MapBackground/MapBackground.tsx +18 -0
- package/src/components/widgets/DriverMap/MapBackground/map.svg +4337 -0
- package/src/components/widgets/DriverMap/MapBackground/mapAspect.mixin.styl +3 -0
- package/src/components/widgets/DriverMap/MapBackground/mapAspect.mixin.styl.d.ts +2 -0
- package/src/components/widgets/DriverMap/driverCategoryIcon.tsx +279 -0
- package/src/components/widgets/DriverMap/driverMapGeography.ts +478 -0
- package/src/components/widgets/DriverMap/driverMapSelection.ts +23 -0
- package/src/components/widgets/DriverMap/index.ts +18 -0
- package/src/docs/config/webpack.config.js +25 -9
- package/src/docs/pages/DriverMapPage.tsx +114 -0
- package/src/docs/pages/StandaloneAppLayoutPage/StandaloneAppLayoutPage.tsx +5 -7
- package/src/docs/pages/TooltipPage.tsx +14 -10
- package/src/docs/registry.ts +6 -5
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useEvent.ts +0 -2
- package/src/index.ts +1 -0
- package/src/sybilion-auth/SybilionAuthProvider.tsx +1 -1
|
@@ -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)}}.AppHeader_root__SdbDv{align-items:center;align-self:flex-end;background-color:var(--color-background);display:flex;max-width:calc(100vw - var(--sidebar-width) - var(--p-3));min-height:var(--header-height);padding-right:var(--p-2);width:100%}@media (min-width:768px){[data-slot=sidebar-wrapper][data-state=collapsed] .AppHeader_root__SdbDv{max-width:100%;padding-left:200px}}.AppHeader_content__kyxem{align-items:center;display:flex;gap:2rem;justify-content:flex-end;padding:0 var(--p-9);width:100%}.AppHeader_logo__v31FX{align-items:center;color:var(--color-foreground);display:flex;font-size:1.5rem;font-weight:400;gap:.5rem;text-decoration:none;white-space:nowrap}.AppHeader_logo__v31FX svg{display:inline-flex;height:32px;transition:transform .1s ease-in-out;width:auto}.AppHeader_logo__v31FX:hover svg{transform:scale(1.05)}.AppHeader_nav__ahN1p{align-items:center;display:flex;flex:1;gap:1.5rem;justify-content:center}@media (max-width:units(768px,\"px\")){.AppHeader_nav__ahN1p{display:none}}.AppHeader_navLink__z43jY{color:var(--color-muted-foreground);font-size:.875rem;font-weight:400;text-decoration:none;transition:color .2s ease}.AppHeader_navLink__z43jY:hover{color:var(--color-foreground)}.AppHeader_actions__QuxEF{align-items:center;display:flex;gap:var(--p-4);margin-right:var(--p-2)}@media (max-width:units(768px,\"px\")){.AppHeader_actions__QuxEF{gap:var(--p-1)}}.AppHeader_pageHeaderActionsAnchor__qzQMs{align-items:center;display:flex;flex-shrink:0;gap:var(--p-4)}";
|
|
3
|
+
var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.AppHeader_root__SdbDv{align-items:center;align-self:flex-end;background-color:var(--color-background);display:flex;max-width:calc(100vw - var(--sidebar-width) - var(--p-3));min-height:var(--header-height);padding-right:var(--p-2);width:100%}@media (max-width:768px){.AppHeader_root__SdbDv{max-width:100%;padding-left:200px}}@media (min-width:768px){[data-slot=sidebar-wrapper][data-state=collapsed] .AppHeader_root__SdbDv{max-width:100%;padding-left:200px}}.AppHeader_content__kyxem{align-items:center;display:flex;gap:2rem;justify-content:flex-end;padding:0 var(--p-9);width:100%}.AppHeader_logo__v31FX{align-items:center;color:var(--color-foreground);display:flex;font-size:1.5rem;font-weight:400;gap:.5rem;text-decoration:none;white-space:nowrap}.AppHeader_logo__v31FX svg{display:inline-flex;height:32px;transition:transform .1s ease-in-out;width:auto}.AppHeader_logo__v31FX:hover svg{transform:scale(1.05)}.AppHeader_nav__ahN1p{align-items:center;display:flex;flex:1;gap:1.5rem;justify-content:center}@media (max-width:units(768px,\"px\")){.AppHeader_nav__ahN1p{display:none}}.AppHeader_navLink__z43jY{color:var(--color-muted-foreground);font-size:.875rem;font-weight:400;text-decoration:none;transition:color .2s ease}.AppHeader_navLink__z43jY:hover{color:var(--color-foreground)}.AppHeader_actions__QuxEF{align-items:center;display:flex;gap:var(--p-4);margin-right:var(--p-2)}@media (max-width:units(768px,\"px\")){.AppHeader_actions__QuxEF{gap:var(--p-1)}}.AppHeader_pageHeaderActionsAnchor__qzQMs{align-items:center;display:flex;flex-shrink:0;gap:var(--p-4)}";
|
|
4
4
|
var S = {"root":"AppHeader_root__SdbDv","content":"AppHeader_content__kyxem","logo":"AppHeader_logo__v31FX","nav":"AppHeader_nav__ahN1p","navLink":"AppHeader_navLink__z43jY","actions":"AppHeader_actions__QuxEF","pageHeaderActionsAnchor":"AppHeader_pageHeaderActionsAnchor__qzQMs"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -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)}}.Card_root__8q1qb{background-color:var(--card);border-radius:20px;color:var(--card-foreground);display:flex;flex-direction:column;gap:var(--p-4);max-height:100%;position:relative}.Card_root__8q1qb.Card_padding-s__lpLdw{padding:var(--p-4)}.Card_root__8q1qb.Card_padding-m__TvrUr{padding:var(--p-6)}.Card_root__8q1qb.Card_padding-l__lRXKf{padding:var(--p-8)}.Card_header__5P3LR{align-items:flex-start;display:flex;flex-direction:column;font-size:var(--text-base);justify-content:space-between}.Card_header__5P3LR:has([data-slot=card-action]){grid-template-columns:1fr auto}.Card_icon__-gwqq{align-items:center;border-radius:calc(var(--p-4) - 2px);box-shadow:inset 0 0 0 1px var(--border);display:flex;flex-shrink:0;height:var(--p-12);justify-content:center;width:var(--p-12)}.Card_icon__-gwqq.Card_withBackground__v0pKJ{background:var(--page-color);box-shadow:none}.Card_icon__-gwqq>img,.Card_icon__-gwqq>svg{height:var(--p-5);width:var(--p-5)}.Card_headerText__GEqp9{flex-grow:1;overflow:hidden}.Card_scroll__iUPCa{max-height:100%;overflow:hidden;padding-right:var(--p-6);width:calc(100% + var(--p-6))}.Card_scroll__iUPCa [data-slot=card-content]{padding-right:1px}.Card_centered__BIpG2,.Card_fullHeight__EU9J4{display:flex;flex-direction:column}.Card_centered__BIpG2{align-items:center;justify-content:center}.Card_fullHeight__EU9J4{flex-grow:1}.Card_description__gjvqz,.Card_title__wDAJw{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.Card_title__wDAJw{font-size:var(--text-lg);font-weight:500;line-height:var(--p-7);overflow:hidden}.Card_description__gjvqz{color:var(--muted-foreground);font-size:var(--text-sm);max-width:100%;word-break:break-word}.Card_action__Y2YHY{grid-column-start:2;grid-row-span:2;align-self:start;grid-row-start:1;justify-self:end}.Card_footer__T0BW7{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;overflow:hidden}.Card_footer__T0BW7.border-t{padding-top:24px}";
|
|
3
|
+
var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Card_root__8q1qb{background-color:var(--card);border-radius:20px;color:var(--card-foreground);display:flex;flex-direction:column;gap:var(--p-4);max-height:100%;position:relative}.Card_root__8q1qb.Card_padding-s__lpLdw{padding:var(--p-4)}.Card_root__8q1qb.Card_padding-m__TvrUr{padding:var(--p-6)}.Card_root__8q1qb.Card_padding-l__lRXKf{padding:var(--p-8)}.Card_header__5P3LR{align-items:flex-start;display:flex;flex-direction:column;font-size:var(--text-base);justify-content:space-between}.Card_header__5P3LR:has([data-slot=card-action]){grid-template-columns:1fr auto}.Card_icon__-gwqq{align-items:center;border-radius:calc(var(--p-4) - 2px);box-shadow:inset 0 0 0 1px var(--border);display:flex;flex-shrink:0;height:var(--p-12);justify-content:center;width:var(--p-12)}.Card_icon__-gwqq.Card_withBackground__v0pKJ{background:var(--page-color);box-shadow:none}.Card_icon__-gwqq>img,.Card_icon__-gwqq>svg{height:var(--p-5);width:var(--p-5)}.Card_headerText__GEqp9{flex-grow:1;overflow:hidden;width:100%}.Card_scroll__iUPCa{max-height:100%;overflow:hidden;padding-right:var(--p-6);width:calc(100% + var(--p-6))}.Card_scroll__iUPCa [data-slot=card-content]{padding-right:1px}.Card_centered__BIpG2,.Card_fullHeight__EU9J4{display:flex;flex-direction:column}.Card_centered__BIpG2{align-items:center;justify-content:center}.Card_fullHeight__EU9J4{flex-grow:1}.Card_description__gjvqz,.Card_title__wDAJw{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.Card_title__wDAJw{font-size:var(--text-lg);font-weight:500;line-height:var(--p-7);overflow:hidden}.Card_description__gjvqz{color:var(--muted-foreground);font-size:var(--text-sm);max-width:100%;word-break:break-word}.Card_action__Y2YHY{grid-column-start:2;grid-row-span:2;align-self:start;grid-row-start:1;justify-self:end}.Card_footer__T0BW7{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;overflow:hidden}.Card_footer__T0BW7.border-t{padding-top:24px}";
|
|
4
4
|
var S = {"root":"Card_root__8q1qb","padding-s":"Card_padding-s__lpLdw","padding-m":"Card_padding-m__TvrUr","padding-l":"Card_padding-l__lRXKf","header":"Card_header__5P3LR","icon":"Card_icon__-gwqq","withBackground":"Card_withBackground__v0pKJ","headerText":"Card_headerText__GEqp9","scroll":"Card_scroll__iUPCa","centered":"Card_centered__BIpG2","fullHeight":"Card_fullHeight__EU9J4","title":"Card_title__wDAJw","description":"Card_description__gjvqz","action":"Card_action__Y2YHY","footer":"Card_footer__T0BW7"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -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
|
|
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
|
+
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 };
|
|
@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import { useTheme } from '../../../contexts/theme-context.js';
|
|
5
|
+
import { useIsMobile } from '../../../hooks/useIsMobile.js';
|
|
5
6
|
import { UserCircleIcon, SunIcon, MoonIcon, SignOutIcon } from '@phosphor-icons/react';
|
|
6
7
|
import { ChevronDownIcon } from 'lucide-react';
|
|
7
8
|
import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
|
|
@@ -9,8 +10,10 @@ import { Button } from '../Button/Button.js';
|
|
|
9
10
|
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from '../DropdownMenu/DropdownMenu.js';
|
|
10
11
|
import S from './NavUserHeader.styl.js';
|
|
11
12
|
|
|
12
|
-
function NavUserHeader({ variant
|
|
13
|
+
function NavUserHeader({ variant, isLoading = false, isAuthenticated, user = null, menuItems, onLogout, signInSlot, onSignInClick, theme: themeFromHost, onThemeToggle: onThemeToggleFromHost, }) {
|
|
13
14
|
const docsTheme = useTheme();
|
|
15
|
+
const isMobile = useIsMobile();
|
|
16
|
+
const effectiveVariant = variant ?? (isMobile ? 'compact' : 'default');
|
|
14
17
|
const hostControlsTheme = themeFromHost !== undefined && onThemeToggleFromHost !== undefined;
|
|
15
18
|
const theme = hostControlsTheme ? themeFromHost : docsTheme.theme;
|
|
16
19
|
const toggleTheme = hostControlsTheme
|
|
@@ -37,7 +40,7 @@ function NavUserHeader({ variant = 'default', isLoading = false, isAuthenticated
|
|
|
37
40
|
}
|
|
38
41
|
return (jsxs(Button, { variant: "ghost", size: "sm", className: S.loginButton, type: "button", onClick: onSignInClick, children: [jsx(UserCircleIcon, { className: S.iconLg }), jsx("span", { children: "Log in" })] }));
|
|
39
42
|
}
|
|
40
|
-
return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: cn(S.userButton,
|
|
43
|
+
return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: cn(S.userButton, effectiveVariant === 'compact' && S.compact), children: [avatar, effectiveVariant === 'default' && (jsxs(Fragment, { children: [userIdentity, jsx(ChevronDownIcon, { className: S.iconSm })] }))] }) }), jsxs(DropdownMenuContent, { className: S.dropdownContent, align: "end", elevation: "md", children: [jsx(DropdownMenuLabel, { className: S.userLabel, children: jsxs("div", { className: S.userLabelContent, children: [avatar, userIdentity] }) }), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuGroup, { children: [menuItems, jsx(DropdownMenuItem, { onSelect: toggleTheme, children: theme === 'dark' ? (jsxs(Fragment, { children: [jsx(SunIcon, {}), "Light theme"] })) : (jsxs(Fragment, { children: [jsx(MoonIcon, {}), "Dark theme"] })) })] }), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuItem, { variant: "destructive", onSelect: () => onLogout(), children: [jsx(SignOutIcon, {}), "Log out"] })] })] }));
|
|
41
44
|
}
|
|
42
45
|
|
|
43
46
|
export { NavUserHeader };
|
|
@@ -51,7 +51,7 @@ function WorkspaceAppSwitcher({ pathname, onNavigate, authenticated = true, defa
|
|
|
51
51
|
if (!displayApp) {
|
|
52
52
|
return null;
|
|
53
53
|
}
|
|
54
|
-
return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", className: S.trigger, "aria-label": "Select workspace app", children: [jsx(IconTile, { iconKey: displayApp.iconKey, accentMuted: displayApp.accentMuted, accent: displayApp.accent }), jsxs("span", { className: S.textCol, children: [jsx("span", { className: S.name, children: displayApp.displayName }), jsx("span", { className: S.sub, children: displayApp.subtitle })] }), jsx(ChevronDown, { size: 12 })] }) }), jsx(DropdownMenuContent, { className: S.menuContent, align: "start", sideOffset: 8, elevation: "md", children: apps.map(entry => {
|
|
54
|
+
return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", className: S.trigger, "aria-label": "Select workspace app", children: [jsx(IconTile, { iconKey: displayApp.iconKey, accentMuted: displayApp.accentMuted, accent: displayApp.accent }), jsxs("span", { className: S.textCol, children: [jsx("span", { className: S.name, children: displayApp.displayName }), jsx("span", { className: S.sub, children: displayApp.subtitle })] }), jsx(ChevronDown, { className: S.chevron, size: 12, "aria-hidden": true })] }) }), jsx(DropdownMenuContent, { className: S.menuContent, align: "start", sideOffset: 8, elevation: "md", children: apps.map(entry => {
|
|
55
55
|
const active = current != null ? entryKey(entry) === entryKey(current) : false;
|
|
56
56
|
return (jsxs(DropdownMenuItem, { className: cn(S.item, active && S.itemActive), onSelect: () => {
|
|
57
57
|
onNavigate(entry.href);
|
|
@@ -1,7 +1,7 @@
|
|
|
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)}}.WorkspaceAppSwitcher_trigger__s6qYT{align-items:center;background:transparent;border:none;border-radius:12px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:var(--p-2);height:auto;margin-left:var(--p-3)!important;max-width:320px;padding:var(--p-1)!important;padding-right:var(--p-3)!important;text-align:left}.WorkspaceAppSwitcher_trigger__s6qYT:hover{background-color:var(--muted)}.WorkspaceAppSwitcher_iconTile__tVDr8{align-items:center;border-radius:10px;color:var(--fg-color);display:flex;flex-shrink:0;height:40px;justify-content:center;position:relative;width:40px}.WorkspaceAppSwitcher_iconTile__tVDr8:after,.WorkspaceAppSwitcher_iconTile__tVDr8:before{border-radius:inherit;content:\"\";display:block;height:100%;position:absolute;width:100%}.WorkspaceAppSwitcher_iconTile__tVDr8:before{background-color:var(--background)}.WorkspaceAppSwitcher_iconTile__tVDr8:after{background-color:var(--bg-color)}.WorkspaceAppSwitcher_icon__Jgw14{color:var(--fg-color)!important;height:22px!important;width:22px!important;z-index:1}.WorkspaceAppSwitcher_textCol__K1gfI{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.WorkspaceAppSwitcher_name__ewMYP{color:var(--foreground);font-size:var(--text-sm);font-weight:600}.WorkspaceAppSwitcher_name__ewMYP,.WorkspaceAppSwitcher_sub__b7w1p{line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.WorkspaceAppSwitcher_sub__b7w1p{color:var(--muted-foreground);font-size:var(--text-xs)}.WorkspaceAppSwitcher_menuContent__4-UNY{max-width:360px;min-width:280px}.WorkspaceAppSwitcher_item__nnufY{align-items:center;cursor:pointer;display:flex;gap:var(--p-3);outline:none;padding:var(--p-3)}.WorkspaceAppSwitcher_itemActive__3mPlO{background-color:var(--muted)}";
|
|
4
|
-
var S = {"trigger":"WorkspaceAppSwitcher_trigger__s6qYT","
|
|
3
|
+
var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.WorkspaceAppSwitcher_trigger__s6qYT{align-items:center;background:transparent;border:none;border-radius:12px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:var(--p-2);height:auto;margin-left:var(--p-3)!important;max-width:320px;padding:var(--p-1)!important;padding-right:var(--p-3)!important;text-align:left}.WorkspaceAppSwitcher_trigger__s6qYT:hover{background-color:var(--muted)}@media (max-width:768px){.WorkspaceAppSwitcher_trigger__s6qYT{gap:0;margin-left:0!important;max-width:none;padding-right:var(--p-1)!important}.WorkspaceAppSwitcher_trigger__s6qYT .WorkspaceAppSwitcher_chevron__7kAqO,.WorkspaceAppSwitcher_trigger__s6qYT .WorkspaceAppSwitcher_textCol__K1gfI{display:none}}.WorkspaceAppSwitcher_iconTile__tVDr8{align-items:center;border-radius:10px;color:var(--fg-color);display:flex;flex-shrink:0;height:40px;justify-content:center;position:relative;width:40px}.WorkspaceAppSwitcher_iconTile__tVDr8:after,.WorkspaceAppSwitcher_iconTile__tVDr8:before{border-radius:inherit;content:\"\";display:block;height:100%;position:absolute;width:100%}.WorkspaceAppSwitcher_iconTile__tVDr8:before{background-color:var(--background)}.WorkspaceAppSwitcher_iconTile__tVDr8:after{background-color:var(--bg-color)}.WorkspaceAppSwitcher_icon__Jgw14{color:var(--fg-color)!important;height:22px!important;width:22px!important;z-index:1}.WorkspaceAppSwitcher_textCol__K1gfI{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.WorkspaceAppSwitcher_name__ewMYP{color:var(--foreground);font-size:var(--text-sm);font-weight:600}.WorkspaceAppSwitcher_name__ewMYP,.WorkspaceAppSwitcher_sub__b7w1p{line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.WorkspaceAppSwitcher_sub__b7w1p{color:var(--muted-foreground);font-size:var(--text-xs)}.WorkspaceAppSwitcher_menuContent__4-UNY{max-width:360px;min-width:280px}.WorkspaceAppSwitcher_item__nnufY{align-items:center;cursor:pointer;display:flex;gap:var(--p-3);outline:none;padding:var(--p-3)}.WorkspaceAppSwitcher_itemActive__3mPlO{background-color:var(--muted)}";
|
|
4
|
+
var S = {"trigger":"WorkspaceAppSwitcher_trigger__s6qYT","textCol":"WorkspaceAppSwitcher_textCol__K1gfI","chevron":"WorkspaceAppSwitcher_chevron__7kAqO","iconTile":"WorkspaceAppSwitcher_iconTile__tVDr8","icon":"WorkspaceAppSwitcher_icon__Jgw14","name":"WorkspaceAppSwitcher_name__ewMYP","sub":"WorkspaceAppSwitcher_sub__b7w1p","menuContent":"WorkspaceAppSwitcher_menuContent__4-UNY","item":"WorkspaceAppSwitcher_item__nnufY","itemActive":"WorkspaceAppSwitcher_itemActive__3mPlO"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { S 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 };
|