@uipath/apollo-vertex 0.0.0-stage → 0.1.0

package/dist/registry/shell/shell-sidebar.js

@@ -0,0 +1,260 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link, useLocation } from "@tanstack/react-router";
+import { AnimatePresence, motion } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible/collapsible.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar } from "../sidebar/sidebar.js";
+import { cn } from "../../lib/utils.js";
+import { fastFadeTransition, iconHoverScale, textFadeVariants } from "./shell-animations.js";
+import { Company } from "./shell-company.js";
+import { MinimalCompany } from "./shell-minimal-company.js";
+import { MinimalNavItem } from "./shell-minimal-nav-item.js";
+import { Text } from "./shell-text.js";
+import { UserProfile } from "./shell-user-profile.js";
+const activeNavClass = "text-sidebar-foreground/85 hover:text-sidebar-foreground data-[active=true]:text-primary-700 dark:data-[active=true]:text-primary-400 data-[active=true]:font-semibold data-[active=true]:bg-primary-100/40 dark:data-[active=true]:bg-primary-900/30";
+const navButtonClass = `font-medium ${activeNavClass}`;
+const subButtonClass = activeNavClass;
+const ShellSidebar = ({ companyName, productName, variant, companyLogo, navItems })=>{
+    if ("minimal" === variant) return /*#__PURE__*/ jsxs("header", {
+        className: "relative flex items-center justify-between px-4 sm:px-6 lg:px-8 py-6 transition-[padding] duration-300 ease-in-out",
+        children: [
+            /*#__PURE__*/ jsx(MinimalCompany, {
+                companyName: companyName,
+                productName: productName,
+                companyLogo: companyLogo
+            }),
+            navItems.length > 0 && /*#__PURE__*/ jsx("nav", {
+                className: "absolute left-1/2 -translate-x-1/2 flex items-center bg-muted dark:bg-[oklch(0.24_0.033_254)] rounded-full p-1.5 overflow-x-auto scrollbar-thin",
+                children: navItems.map((item)=>/*#__PURE__*/ jsx(MinimalNavItem, {
+                        to: item.path,
+                        label: item.label
+                    }, item.path))
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex items-center gap-2",
+                children: /*#__PURE__*/ jsx(UserProfile, {
+                    isCollapsed: true,
+                    collapsedMenuSide: "bottom",
+                    collapsedMenuAlign: "end"
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx(SidebarNav, {
+        companyName: companyName,
+        productName: productName,
+        companyLogo: companyLogo,
+        navItems: navItems
+    });
+};
+function SidebarNav({ companyName, productName, companyLogo, navItems }) {
+    const { t } = useTranslation();
+    const { state, toggleSidebar } = useSidebar();
+    const { pathname } = useLocation();
+    const isCollapsed = "collapsed" === state;
+    const [sidebarHovered, setSidebarHovered] = useState(false);
+    const handleMouseEnter = ()=>{
+        if (isCollapsed) setSidebarHovered(true);
+    };
+    const handleMouseLeave = ()=>{
+        setSidebarHovered(false);
+    };
+    const [expandedItems, setExpandedItems] = useState(()=>{
+        const expanded = new Set();
+        for (const item of navItems)if (item.subItems?.some((sub)=>pathname.startsWith(sub.path))) expanded.add(item.path);
+        return expanded;
+    });
+    useEffect(()=>{
+        const expanded = new Set();
+        for (const item of navItems)if (item.subItems?.some((sub)=>pathname.startsWith(sub.path))) expanded.add(item.path);
+        setExpandedItems(expanded);
+    }, [
+        pathname,
+        navItems
+    ]);
+    const handleMenuClick = (path)=>{
+        if (isCollapsed) {
+            toggleSidebar();
+            setExpandedItems((prev)=>new Set(prev).add(path));
+        } else setExpandedItems((prev)=>{
+            const next = new Set(prev);
+            if (next.has(path)) next.delete(path);
+            else next.add(path);
+            return next;
+        });
+    };
+    const isActive = (path)=>{
+        if ("/" === path) return "/" === pathname;
+        return pathname === path || pathname.startsWith(`${path}/`);
+    };
+    const isParentActive = (item)=>item.subItems?.some((sub)=>isActive(sub.path)) ?? false;
+    const getTooltipText = (label)=>{
+        if ("string" == typeof label) return t(label);
+        return t(label.i18nKey, label.values);
+    };
+    return /*#__PURE__*/ jsxs(Sidebar, {
+        collapsible: "icon",
+        variant: "sidebar",
+        className: "border-0 bg-transparent [&_[data-slot=sidebar-container]]:border-0 [&_[data-slot=sidebar-inner]]:bg-[oklch(0.99_0_0)]/70 [&_[data-slot=sidebar-inner]]:backdrop-blur-xl dark:[&_[data-slot=sidebar-inner]]:bg-sidebar/75 [&_[data-slot=sidebar-inner]]:overflow-hidden",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [
+            /*#__PURE__*/ jsx(SidebarHeader, {
+                className: "pt-6 px-4 pb-0",
+                children: /*#__PURE__*/ jsx(Company, {
+                    companyName: companyName,
+                    productName: productName,
+                    companyLogo: companyLogo,
+                    sidebarHovered: sidebarHovered
+                })
+            }),
+            /*#__PURE__*/ jsx(SidebarContent, {
+                className: "px-4 pt-0 pb-3 mt-10",
+                children: /*#__PURE__*/ jsx(SidebarGroup, {
+                    className: "p-0",
+                    children: /*#__PURE__*/ jsx(SidebarGroupContent, {
+                        children: /*#__PURE__*/ jsx(SidebarMenu, {
+                            children: navItems.map((item)=>{
+                                const Icon = item.icon;
+                                const active = isActive(item.path);
+                                const parentActive = isParentActive(item);
+                                const isExpanded = expandedItems.has(item.path);
+                                if (item.subItems && item.subItems.length > 0) {
+                                    const showParentActive = isCollapsed && parentActive;
+                                    return /*#__PURE__*/ jsx(Collapsible, {
+                                        open: isExpanded && !isCollapsed,
+                                        onOpenChange: ()=>handleMenuClick(item.path),
+                                        className: "group/collapsible",
+                                        children: /*#__PURE__*/ jsxs(SidebarMenuItem, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(CollapsibleTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ jsxs(SidebarMenuButton, {
+                                                        tooltip: getTooltipText(item.label),
+                                                        isActive: showParentActive,
+                                                        className: navButtonClass,
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(motion.span, {
+                                                                className: "inline-flex items-center justify-center shrink-0",
+                                                                ...isCollapsed ? {
+                                                                    whileHover: iconHoverScale
+                                                                } : {},
+                                                                children: /*#__PURE__*/ jsx(Icon, {
+                                                                    className: "size-4 shrink-0"
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ jsx(AnimatePresence, {
+                                                                initial: false,
+                                                                children: !isCollapsed && /*#__PURE__*/ jsx(motion.span, {
+                                                                    variants: textFadeVariants,
+                                                                    initial: "initial",
+                                                                    animate: "animate",
+                                                                    exit: "exit",
+                                                                    transition: fastFadeTransition,
+                                                                    className: "whitespace-nowrap truncate",
+                                                                    children: /*#__PURE__*/ jsx(Text, {
+                                                                        value: item.label
+                                                                    })
+                                                                }, "text")
+                                                            }),
+                                                            /*#__PURE__*/ jsx(AnimatePresence, {
+                                                                initial: false,
+                                                                children: !isCollapsed && /*#__PURE__*/ jsx(motion.div, {
+                                                                    variants: textFadeVariants,
+                                                                    initial: "initial",
+                                                                    animate: "animate",
+                                                                    exit: "exit",
+                                                                    transition: fastFadeTransition,
+                                                                    className: "ml-auto",
+                                                                    children: /*#__PURE__*/ jsx(ChevronDown, {
+                                                                        className: cn("size-4 transition-transform duration-200", isExpanded && "rotate-180")
+                                                                    })
+                                                                }, "chevron")
+                                                            })
+                                                        ]
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx(CollapsibleContent, {
+                                                    children: /*#__PURE__*/ jsx(SidebarMenuSub, {
+                                                        className: "ml-4 mr-0 mt-1 gap-0.5 pl-3 pr-0",
+                                                        children: item.subItems.map((subItem)=>{
+                                                            const subActive = isActive(subItem.path);
+                                                            return /*#__PURE__*/ jsx(SidebarMenuSubItem, {
+                                                                children: /*#__PURE__*/ jsx(SidebarMenuSubButton, {
+                                                                    asChild: true,
+                                                                    isActive: subActive,
+                                                                    className: cn("cursor-pointer whitespace-nowrap", subButtonClass),
+                                                                    children: /*#__PURE__*/ jsx(Link, {
+                                                                        to: subItem.path,
+                                                                        children: /*#__PURE__*/ jsx(Text, {
+                                                                            value: subItem.label
+                                                                        })
+                                                                    })
+                                                                })
+                                                            }, subItem.path);
+                                                        })
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    }, item.path);
+                                }
+                                return /*#__PURE__*/ jsx(SidebarMenuItem, {
+                                    children: /*#__PURE__*/ jsx(SidebarMenuButton, {
+                                        tooltip: getTooltipText(item.label),
+                                        isActive: active,
+                                        asChild: true,
+                                        className: navButtonClass,
+                                        children: /*#__PURE__*/ jsxs(Link, {
+                                            to: item.path,
+                                            children: [
+                                                /*#__PURE__*/ jsx(motion.span, {
+                                                    className: "inline-flex items-center justify-center shrink-0",
+                                                    ...isCollapsed ? {
+                                                        whileHover: iconHoverScale
+                                                    } : {},
+                                                    children: /*#__PURE__*/ jsx(Icon, {
+                                                        className: "size-4 shrink-0"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx(AnimatePresence, {
+                                                    initial: false,
+                                                    children: !isCollapsed && /*#__PURE__*/ jsx(motion.span, {
+                                                        variants: textFadeVariants,
+                                                        initial: "initial",
+                                                        animate: "animate",
+                                                        exit: "exit",
+                                                        transition: fastFadeTransition,
+                                                        className: "whitespace-nowrap truncate",
+                                                        children: /*#__PURE__*/ jsx(Text, {
+                                                            value: item.label
+                                                        })
+                                                    }, "text")
+                                                })
+                                            ]
+                                        })
+                                    })
+                                }, item.path);
+                            })
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(SidebarFooter, {
+                className: "p-4 pt-0",
+                children: /*#__PURE__*/ jsx(UserProfile, {
+                    isCollapsed: isCollapsed
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "absolute inset-0 pointer-events-none",
+                style: {
+                    boxShadow: "inset -1px 0 0 0 color-mix(in srgb, var(--color-border) 50%, transparent)"
+                }
+            })
+        ]
+    });
+}
+export { ShellSidebar };

package/dist/registry/shell/shell-text.d.ts

@@ -0,0 +1,4 @@
+import type { TranslationKey } from "./shell-translation-key";
+export declare const Text: ({ value }: {
+    value: TranslationKey;
+}) => string | import("react/jsx-runtime").JSX.Element;

package/dist/registry/shell/shell-text.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Trans, useTranslation } from "react-i18next";
+const Text = ({ value })=>{
+    const { t } = useTranslation();
+    if ("string" == typeof value) return t(value);
+    return /*#__PURE__*/ jsx(Trans, {
+        i18nKey: value.i18nKey,
+        values: value.values,
+        components: value.components
+    });
+};
+export { Text };

package/dist/registry/shell/shell-theme-provider.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export type ThemeConfig = {
+    light?: Record<string, string>;
+    dark?: Record<string, string>;
+};
+export type Theme = "light" | "dark" | "system";
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: Theme;
+    themeConfig?: ThemeConfig;
+    storageKey?: string;
+}
+interface ThemeProviderState {
+    theme: Theme;
+    resolvedTheme: "light" | "dark";
+    setTheme: (theme: Theme) => void;
+}
+export declare function ThemeProvider({ children, defaultTheme, themeConfig, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => ThemeProviderState;
+export {};

package/dist/registry/shell/shell-theme-provider.js

@@ -0,0 +1,117 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
+import { THEME_STORAGE_KEY } from "./shell-constants.js";
+const ThemeProviderContext = /*#__PURE__*/ createContext(null);
+const cssVarMap = {
+    background: "--background",
+    foreground: "--foreground",
+    card: "--card",
+    cardForeground: "--card-foreground",
+    popover: "--popover",
+    popoverForeground: "--popover-foreground",
+    primary: "--primary",
+    primaryForeground: "--primary-foreground",
+    secondary: "--secondary",
+    secondaryForeground: "--secondary-foreground",
+    muted: "--muted",
+    mutedForeground: "--muted-foreground",
+    accent: "--accent",
+    accentForeground: "--accent-foreground",
+    destructive: "--destructive",
+    success: "--success",
+    info: "--info",
+    warning: "--warning",
+    border: "--border",
+    input: "--input",
+    ring: "--ring",
+    chart1: "--chart-1",
+    chart2: "--chart-2",
+    chart3: "--chart-3",
+    chart4: "--chart-4",
+    chart5: "--chart-5",
+    sidebar: "--sidebar",
+    sidebarForeground: "--sidebar-foreground",
+    sidebarPrimary: "--sidebar-primary",
+    sidebarPrimaryForeground: "--sidebar-primary-foreground",
+    sidebarAccent: "--sidebar-accent",
+    sidebarAccentForeground: "--sidebar-accent-foreground",
+    sidebarBorder: "--sidebar-border",
+    sidebarRing: "--sidebar-ring"
+};
+function isValidTheme(value) {
+    return "light" === value || "dark" === value || "system" === value;
+}
+function applyThemeClass(resolved) {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(resolved);
+    root.style.colorScheme = resolved;
+}
+function applyThemeConfig(config, resolved) {
+    const root = document.documentElement;
+    const isDark = "dark" === resolved;
+    for (const cssVar of Object.values(cssVarMap))root.style.removeProperty(cssVar);
+    const themeVars = isDark ? config.dark : config.light;
+    if (null == themeVars) return;
+    for (const [key, value] of Object.entries(themeVars)){
+        const cssVar = cssVarMap[key];
+        if (cssVar && value) root.style.setProperty(cssVar, value);
+    }
+}
+function clearThemeConfig() {
+    const root = document.documentElement;
+    for (const cssVar of Object.values(cssVarMap))root.style.removeProperty(cssVar);
+}
+function ThemeProvider({ children, defaultTheme = "system", themeConfig, storageKey = THEME_STORAGE_KEY }) {
+    const [theme, setThemeState] = useState(()=>{
+        if ("u" < typeof window) return defaultTheme;
+        const stored = localStorage.getItem(storageKey);
+        return isValidTheme(stored) ? stored : defaultTheme;
+    });
+    const systemDark = useSyncExternalStore((cb)=>{
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        mq.addEventListener("change", cb);
+        return ()=>mq.removeEventListener("change", cb);
+    }, ()=>window.matchMedia("(prefers-color-scheme: dark)").matches, ()=>false);
+    const resolvedTheme = "system" === theme ? systemDark ? "dark" : "light" : theme;
+    const setTheme = (newTheme)=>{
+        localStorage.setItem(storageKey, newTheme);
+        setThemeState(newTheme);
+    };
+    useEffect(()=>{
+        applyThemeClass(resolvedTheme);
+    }, [
+        resolvedTheme
+    ]);
+    useEffect(()=>{
+        const handleStorageChange = (e)=>{
+            if (e.key === storageKey && isValidTheme(e.newValue)) setThemeState(e.newValue);
+        };
+        window.addEventListener("storage", handleStorageChange);
+        return ()=>window.removeEventListener("storage", handleStorageChange);
+    }, [
+        storageKey
+    ]);
+    useEffect(()=>{
+        if (!themeConfig) return;
+        applyThemeConfig(themeConfig, resolvedTheme);
+        return ()=>clearThemeConfig();
+    }, [
+        themeConfig,
+        resolvedTheme
+    ]);
+    return /*#__PURE__*/ jsx(ThemeProviderContext.Provider, {
+        value: {
+            theme,
+            resolvedTheme,
+            setTheme
+        },
+        children: children
+    });
+}
+const useTheme = ()=>{
+    const context = useContext(ThemeProviderContext);
+    if (null == context) throw new Error("useTheme must be used within a ThemeProvider");
+    return context;
+};
+export { ThemeProvider, useTheme };

package/dist/registry/shell/shell-translation-key.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import type { ParseKeys } from "react-i18next";
+export type TranslationKey = {
+    i18nKey: ParseKeys;
+    values: Record<string, string | number | string[]>;
+    components: Record<string, ReactElement>;
+} | ParseKeys;

package/dist/registry/shell/shell-user-profile-menu-items.d.ts

@@ -0,0 +1 @@
+export declare const UserProfileMenuItems: () => import("react/jsx-runtime").JSX.Element;

package/dist/registry/shell/shell-user-profile-menu-items.js

@@ -0,0 +1,116 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Globe, LogOut, Monitor, Moon, Sun } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from "../dropdown-menu/dropdown-menu.js";
+import { cn } from "../../lib/utils.js";
+import { useAuth } from "./shell-auth-provider.js";
+import { LANGUAGE_CHANGED_EVENT, LOCALE_OPTIONS } from "./shell-constants.js";
+import { Text } from "./shell-text.js";
+import { useTheme } from "./shell-theme-provider.js";
+const UserProfileMenuItems = ()=>{
+    const { t, i18n } = useTranslation();
+    const { logout } = useAuth();
+    const { setTheme } = useTheme();
+    const language = i18n.language;
+    function setLanguage(code) {
+        document.dispatchEvent(new CustomEvent(LANGUAGE_CHANGED_EVENT, {
+            detail: {
+                selectedLanguageId: code
+            }
+        }));
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(DropdownMenuSub, {
+                children: [
+                    /*#__PURE__*/ jsxs(DropdownMenuSubTrigger, {
+                        children: [
+                            /*#__PURE__*/ jsx(Sun, {
+                                className: "w-4 h-4 dark:hidden"
+                            }),
+                            /*#__PURE__*/ jsx(Moon, {
+                                className: "w-4 h-4 hidden dark:block"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: t("toggle_theme")
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenuSubContent, {
+                        children: [
+                            /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                onClick: ()=>setTheme("light"),
+                                children: [
+                                    /*#__PURE__*/ jsx(Sun, {
+                                        className: "w-4 h-4"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: t("light")
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                onClick: ()=>setTheme("dark"),
+                                children: [
+                                    /*#__PURE__*/ jsx(Moon, {
+                                        className: "w-4 h-4"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: t("dark")
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                onClick: ()=>setTheme("system"),
+                                children: [
+                                    /*#__PURE__*/ jsx(Monitor, {
+                                        className: "w-4 h-4"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: t("system")
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(DropdownMenuSub, {
+                children: [
+                    /*#__PURE__*/ jsxs(DropdownMenuSubTrigger, {
+                        children: [
+                            /*#__PURE__*/ jsx(Globe, {
+                                className: "w-4 h-4"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: t("language")
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(DropdownMenuSubContent, {
+                        children: LOCALE_OPTIONS.map((locale)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
+                                onClick: ()=>setLanguage(locale.code),
+                                className: cn(language === locale.code ? "bg-accent" : ""),
+                                children: /*#__PURE__*/ jsx(Text, {
+                                    value: locale.translationKey
+                                })
+                            }, locale.code))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+            /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                onClick: logout,
+                children: [
+                    /*#__PURE__*/ jsx(LogOut, {
+                        className: "w-4 h-4"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: t("sign_out")
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { UserProfileMenuItems };

package/dist/registry/shell/shell-user-profile.d.ts

@@ -0,0 +1,7 @@
+interface UserProfileProps {
+    isCollapsed: boolean;
+    collapsedMenuSide?: "top" | "right" | "bottom" | "left";
+    collapsedMenuAlign?: "start" | "center" | "end";
+}
+export declare const UserProfile: ({ isCollapsed, collapsedMenuSide, collapsedMenuAlign, }: UserProfileProps) => import("react/jsx-runtime").JSX.Element;
+export {};