@wallarm-org/design-system 1.27.1-rc-fix-remote-shell-breadcrumb-transition.2 → 1.28.0

package/dist/components/AppShell/story-content/_storyAccountDropdown.d.ts

@@ -0,0 +1,11 @@
+import { type NavRailMode } from '../../NavRail';
+import { type Theme } from '../../ThemeProvider';
+export type SidebarMode = 'adaptive' | 'expanded' | 'collapsed' | 'compact';
+/** Adaptive collapses the rail inside a product and expands it on Home; the other modes pin it. */
+export declare const railModeFor: (mode: SidebarMode, onHome: boolean) => NavRailMode;
+export declare const AccountDropdown: ({ sidebarMode, onSidebarModeChange, theme, onThemeChange, }: {
+    sidebarMode: SidebarMode;
+    onSidebarModeChange: (mode: SidebarMode) => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
+}) => import("react").JSX.Element;

package/dist/components/AppShell/story-content/_storyAccountDropdown.js

@@ -0,0 +1,242 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { LogOut, PanelLeftDashed, PencilRuler, Settings, User, UserRound } from "../../../icons/index.js";
+import { cn } from "../../../utils/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
+import { NavRailItem } from "../../NavRail/index.js";
+import { HStack, VStack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+import { useTheme } from "../../ThemeProvider/index.js";
+const railModeFor = (mode, onHome)=>{
+    if ('adaptive' === mode) return onHome ? 'expanded' : 'collapsed';
+    return mode;
+};
+const USER_NAME = 'Meow Meow';
+const USER_EMAIL = 'meow@meow.com';
+const THEMES = [
+    'light',
+    'dark'
+];
+const SIDEBAR_MODE_GROUPS = [
+    [
+        'adaptive'
+    ],
+    [
+        'expanded',
+        'collapsed'
+    ],
+    [
+        'compact'
+    ]
+];
+const SIDEBAR_MODES = SIDEBAR_MODE_GROUPS.flat();
+const THEME_LABELS = {
+    light: 'Light',
+    dark: 'Dark'
+};
+const FRAME_STYLES = [
+    'neutral',
+    'branded'
+];
+const FRAME_STYLE_LABELS = {
+    neutral: 'Neutral',
+    branded: 'Branded'
+};
+const FRAME_STYLE_SWATCH = {
+    neutral: 'bg-icon-secondary',
+    branded: 'bg-icon-brand'
+};
+const SIDEBAR_MODE_LABELS = {
+    adaptive: 'Adaptive',
+    expanded: 'Always expanded',
+    collapsed: 'Always collapsed',
+    compact: 'Compact'
+};
+const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChange })=>{
+    const { frameStyle, setFrameStyle } = useTheme();
+    return /*#__PURE__*/ jsxs(DropdownMenu, {
+        positioning: {
+            placement: 'right-end',
+            gutter: 6,
+            offset: {
+                crossAxis: 12
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                children: /*#__PURE__*/ jsx(NavRailItem, {
+                    icon: UserRound,
+                    label: USER_NAME,
+                    avatar: true
+                })
+            }),
+            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                className: "w-256",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "rounded-6 border border-border-primary-light bg-states-primary-hover px-8 py-8 mb-4",
+                        children: /*#__PURE__*/ jsxs(HStack, {
+                            gap: 8,
+                            align: "start",
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    children: /*#__PURE__*/ jsx(User, {})
+                                }),
+                                /*#__PURE__*/ jsxs(VStack, {
+                                    gap: 0,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            size: "sm",
+                                            color: "primary",
+                                            children: USER_NAME
+                                        }),
+                                        /*#__PURE__*/ jsx(Text, {
+                                            size: "xs",
+                                            color: "secondary",
+                                            children: USER_EMAIL
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                children: /*#__PURE__*/ jsx(Settings, {})
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                children: "Profile settings"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ jsxs(DropdownMenuTriggerItem, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                        children: /*#__PURE__*/ jsx(PencilRuler, {})
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: "Appearance"
+                                            }),
+                                            /*#__PURE__*/ jsxs(Text, {
+                                                size: "xs",
+                                                color: "secondary",
+                                                children: [
+                                                    THEME_LABELS[theme],
+                                                    " and ",
+                                                    FRAME_STYLE_LABELS[frameStyle].toLowerCase()
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                                className: "w-132",
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
+                                        value: theme,
+                                        onValueChange: ({ value })=>{
+                                            const next = THEMES.find((t)=>t === value);
+                                            if (next) onThemeChange(next);
+                                        },
+                                        children: THEMES.map((t)=>/*#__PURE__*/ jsx(DropdownMenuRadioItem, {
+                                                value: t,
+                                                children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                    children: THEME_LABELS[t]
+                                                })
+                                            }, t))
+                                    }),
+                                    /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                                    /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
+                                        value: frameStyle,
+                                        onValueChange: ({ value })=>{
+                                            const next = FRAME_STYLES.find((s)=>s === value);
+                                            if (next) setFrameStyle(next);
+                                        },
+                                        children: FRAME_STYLES.map((s)=>/*#__PURE__*/ jsxs(DropdownMenuRadioItem, {
+                                                value: s,
+                                                children: [
+                                                    /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                                        children: /*#__PURE__*/ jsx("span", {
+                                                            className: "flex size-16 items-center justify-center",
+                                                            children: /*#__PURE__*/ jsx("span", {
+                                                                className: cn('size-8 rounded-full', FRAME_STYLE_SWATCH[s])
+                                                            })
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                        children: FRAME_STYLE_LABELS[s]
+                                                    })
+                                                ]
+                                            }, s))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ jsxs(DropdownMenuTriggerItem, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                        children: /*#__PURE__*/ jsx(PanelLeftDashed, {})
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: "Sidebar mode"
+                                            }),
+                                            /*#__PURE__*/ jsx(Text, {
+                                                size: "xs",
+                                                color: "secondary",
+                                                children: SIDEBAR_MODE_LABELS[sidebarMode]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuContent, {
+                                className: "w-200",
+                                children: /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
+                                    value: sidebarMode,
+                                    onValueChange: ({ value })=>{
+                                        const next = SIDEBAR_MODES.find((m)=>m === value);
+                                        if (next) onSidebarModeChange(next);
+                                    },
+                                    children: SIDEBAR_MODE_GROUPS.map((group, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                                            children: [
+                                                index > 0 && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                                                group.map((m)=>/*#__PURE__*/ jsx(DropdownMenuRadioItem, {
+                                                        value: m,
+                                                        children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                            children: SIDEBAR_MODE_LABELS[m]
+                                                        })
+                                                    }, m))
+                                            ]
+                                        }, group.join('-')))
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                children: /*#__PURE__*/ jsx(LogOut, {})
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                children: "Sign out"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { AccountDropdown, railModeFor };

package/dist/components/AppShell/story-content/_storyConfigRenderer.d.ts

@@ -0,0 +1,12 @@
+import { type NavConfig } from '../../RemoteShell';
+import { type Product } from './_storyLib';
+export interface ConfigRemoteProps {
+    config: NavConfig;
+    basePath?: string;
+    /** Fake a 2s load whenever the product changes, to show the panel and content skeletons. */
+    simulateLoading?: boolean;
+}
+export declare const RemoteForProduct: ({ product, simulateLoading, }: {
+    product: Product;
+    simulateLoading?: boolean;
+}) => import("react").JSX.Element;

package/dist/components/AppShell/story-content/_storyConfigRenderer.js

@@ -0,0 +1,81 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Page, PageContent, PageHeader, PageTitle } from "../../Page/index.js";
+import { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, useRemoteShellContext } from "../../RemoteShell/index.js";
+import { HomeContent } from "./_storyHomeContent.js";
+import { PRODUCT_CONFIGS } from "./_storyLib.js";
+const RemotePageContent = ()=>{
+    const { breadcrumbSegments } = useRemoteShellContext();
+    const lastSegment = breadcrumbSegments[breadcrumbSegments.length - 1];
+    const pageTitle = lastSegment?.label ?? '';
+    const fullPath = breadcrumbSegments.map((s)=>s.label).join(' / ');
+    return /*#__PURE__*/ jsxs(Page, {
+        title: pageTitle,
+        fixedHeight: true,
+        children: [
+            /*#__PURE__*/ jsx(PageHeader, {
+                children: /*#__PURE__*/ jsx(PageTitle, {
+                    children: pageTitle
+                })
+            }),
+            /*#__PURE__*/ jsx(PageContent, {
+                children: /*#__PURE__*/ jsxs("p", {
+                    className: "text-sm text-text-secondary",
+                    children: [
+                        "Placeholder page for ",
+                        fullPath,
+                        "."
+                    ]
+                })
+            })
+        ]
+    });
+};
+const ConfigRemote = ({ config, basePath, simulateLoading = true })=>{
+    const [loading, setLoading] = useState(simulateLoading);
+    useEffect(()=>{
+        if (!simulateLoading) return;
+        setLoading(true);
+        const timer = setTimeout(()=>{
+            setLoading(false);
+        }, 2000);
+        return ()=>clearTimeout(timer);
+    }, [
+        config.productLabel,
+        simulateLoading
+    ]);
+    return /*#__PURE__*/ jsx(RemoteShell, {
+        config: config,
+        basePath: basePath,
+        children: loading ? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(RemoteShellPanel, {
+                    isLoading: true
+                }),
+                /*#__PURE__*/ jsx(RemoteShellContent, {
+                    isLoading: true
+                })
+            ]
+        }) : /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(RemoteShellPanel, {
+                    resizable: true
+                }),
+                /*#__PURE__*/ jsx(RemoteShellBreadcrumb, {}),
+                /*#__PURE__*/ jsx(RemoteShellContent, {
+                    children: /*#__PURE__*/ jsx(RemotePageContent, {})
+                })
+            ]
+        })
+    });
+};
+const RemoteForProduct = ({ product, simulateLoading = true })=>{
+    if ('home' === product) return /*#__PURE__*/ jsx(HomeContent, {});
+    const { config } = PRODUCT_CONFIGS[product];
+    return /*#__PURE__*/ jsx(ConfigRemote, {
+        config: config,
+        basePath: `/${product}`,
+        simulateLoading: simulateLoading
+    });
+};
+export { RemoteForProduct };

package/dist/components/AppShell/story-content/_storyHeaderActions.d.ts

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

package/dist/components/AppShell/story-content/_storyHeaderActions.js

@@ -0,0 +1,59 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Bell, ChevronUpDown } from "../../../icons/index.js";
+import { Button } from "../../Button/index.js";
+import { Code } from "../../Code/index.js";
+import { Text } from "../../Text/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
+import { TopHeaderSeparator } from "../../TopHeader/index.js";
+import { QuickHelpDropdown } from "./_storyQuickHelpDropdown.js";
+import { StorySearchModal } from "./_storySearchModal.js";
+const HeaderActions = ()=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(StorySearchModal, {}),
+            /*#__PURE__*/ jsx(TopHeaderSeparator, {}),
+            /*#__PURE__*/ jsxs(Button, {
+                variant: "ghost",
+                size: "small",
+                color: "neutral",
+                className: "py-4 rounded-6",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "xs",
+                        weight: "medium",
+                        children: "Tenant Name"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-text-tertiary mx-[-2px]",
+                        children: "•"
+                    }),
+                    /*#__PURE__*/ jsx(Code, {
+                        size: "s",
+                        color: "secondary",
+                        children: "12345"
+                    }),
+                    /*#__PURE__*/ jsx(ChevronUpDown, {
+                        className: "!icon-sm"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            size: "small",
+                            color: "neutral",
+                            "aria-label": "Wallarm Updates",
+                            children: /*#__PURE__*/ jsx(Bell, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: "Wallarm updates"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(QuickHelpDropdown, {})
+        ]
+    });
+export { HeaderActions };

package/dist/components/AppShell/story-content/_storyHomeContent.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const HomeContent: FC;

package/dist/components/AppShell/story-content/_storyHomeContent.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const HomeContent = ()=>/*#__PURE__*/ jsxs("div", {
+        className: "p-24",
+        children: [
+            /*#__PURE__*/ jsx("h1", {
+                className: "text-xl font-semibold text-text-primary",
+                children: "Home"
+            }),
+            /*#__PURE__*/ jsx("p", {
+                className: "mt-4 text-sm text-text-secondary",
+                children: "Cross-product summary. Click any product in the rail to drill into it."
+            })
+        ]
+    });
+export { HomeContent };

package/dist/components/AppShell/story-content/_storyLib.d.ts

@@ -0,0 +1,9 @@
+import { edgeNavConfig } from './_storyNavConfigs';
+declare const KNOWN_PRODUCTS: readonly ['home', 'edge', 'ai-hypervisor', 'infra-discovery', 'security-testing', 'settings'];
+export type Product = (typeof KNOWN_PRODUCTS)[number];
+export declare const PRODUCT_CONFIGS: Record<Exclude<Product, 'home'>, {
+    config: typeof edgeNavConfig;
+}>;
+export declare function deriveProduct(pathname: string): Product;
+export declare function navigateToProduct(product: Product): void;
+export {};

package/dist/components/AppShell/story-content/_storyLib.js

@@ -0,0 +1,39 @@
+import { findFirstLinkPath, pushPathname } from "../../RemoteShell/index.js";
+import { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig } from "./_storyNavConfigs.js";
+const KNOWN_PRODUCTS = [
+    'home',
+    'edge',
+    'ai-hypervisor',
+    'infra-discovery',
+    'security-testing',
+    'settings'
+];
+const PRODUCT_CONFIGS = {
+    edge: {
+        config: edgeNavConfig
+    },
+    'ai-hypervisor': {
+        config: aiHypervisorNavConfig
+    },
+    'infra-discovery': {
+        config: infraDiscoveryNavConfig
+    },
+    'security-testing': {
+        config: securityTestingNavConfig
+    },
+    settings: {
+        config: settingsNavConfig
+    }
+};
+function deriveProduct(pathname) {
+    const segment = pathname.split('/').filter(Boolean)[0];
+    if (segment && KNOWN_PRODUCTS.includes(segment)) return segment;
+    return 'home';
+}
+function navigateToProduct(product) {
+    if ('home' === product) return void pushPathname('/home');
+    const { config } = PRODUCT_CONFIGS[product];
+    const firstPath = findFirstLinkPath(config.items) ?? '';
+    pushPathname(`/${product}/${firstPath}`);
+}
+export { PRODUCT_CONFIGS, deriveProduct, navigateToProduct };

package/dist/components/AppShell/story-content/_storyNavConfigs.d.ts

@@ -0,0 +1,6 @@
+import type { NavConfig } from '../../RemoteShell';
+export declare const edgeNavConfig: NavConfig;
+export declare const aiHypervisorNavConfig: NavConfig;
+export declare const infraDiscoveryNavConfig: NavConfig;
+export declare const securityTestingNavConfig: NavConfig;
+export declare const settingsNavConfig: NavConfig;