@wallarm-org/design-system 1.28.0 → 1.28.1

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

@@ -1,242 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

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

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

@@ -1,59 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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;