@shipfox/react-ui 0.15.0 → 0.16.0

package/dist/components/dashboard/components/organization-selector.d.ts

@@ -1,2 +1,25 @@
-export declare function OrganizationSelector(): import("react/jsx-runtime").JSX.Element;
+export interface OrganizationSelectorProps {
+    /**
+     * The currently selected organization ID
+     * @default 'stripe'
+     */
+    defaultValue?: string;
+    /**
+     * Callback when organization changes
+     */
+    onOrganizationChange?: (organizationId: string) => void;
+    /**
+     * Callback when settings is clicked
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Callback when new organization is clicked
+     */
+    onNewOrganizationClick?: () => void;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+export declare function OrganizationSelector({ defaultValue, onOrganizationChange, onSettingsClick, onNewOrganizationClick, className, }: OrganizationSelectorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=organization-selector.d.ts.map

package/dist/components/dashboard/components/organization-selector.js

@@ -1,87 +1,110 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar } from '../../../components/avatar/index.js';
 import { Button } from '../../../components/button/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
 import { Icon } from '../../../components/icon/index.js';
-import { Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from '../../../components/select/index.js';
-export function OrganizationSelector() {
-    return /*#__PURE__*/ _jsxs(Select, {
-        defaultValue: "stripe",
+import { useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+const organizations = [
+    {
+        id: 'stripe',
+        name: 'Stripe',
+        logo: 'stripe'
+    },
+    {
+        id: 'shipfox',
+        name: 'Shipfox',
+        logo: 'shipfox'
+    },
+    {
+        id: 'github',
+        name: 'GitHub',
+        logo: 'github'
+    }
+];
+export function OrganizationSelector({ defaultValue = 'stripe', onOrganizationChange, onSettingsClick, onNewOrganizationClick, className }) {
+    const [selectedOrg, setSelectedOrg] = useState(defaultValue);
+    const currentOrg = organizations.find((org)=>org.id === selectedOrg) || organizations[0];
+    const handleOrganizationSelect = (orgId)=>{
+        setSelectedOrg(orgId);
+        onOrganizationChange?.(orgId);
+    };
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
         children: [
-            /*#__PURE__*/ _jsx(SelectTrigger, {
-                className: "w-200 h-40 shadow-none bg-background-neutral-base hover:bg-background-neutral-hover rounded-none gap-8 pl-12 border-l min-[321px]:border-r border-border-neutral-strong",
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: "flex items-center gap-8 flex-1 min-w-0",
-                    children: /*#__PURE__*/ _jsx(SelectValue, {
-                        placeholder: "Select organization"
-                    })
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    variant: "transparent",
+                    className: cn('w-200 h-40 shadow-none bg-background-neutral-base hover:bg-background-neutral-hover', 'rounded-none gap-8 pl-12 border-l min-[321px]:border-r border-border-neutral-strong', 'justify-start', className),
+                    children: [
+                        /*#__PURE__*/ _jsx(Avatar, {
+                            size: "3xs",
+                            content: "logo",
+                            logoName: currentOrg.logo,
+                            radius: "rounded"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "flex-1 text-left truncate text-sm text-foreground-neutral-subtle",
+                            children: currentOrg.name
+                        }),
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: "expandUpDownLine",
+                            className: "size-14 text-foreground-neutral-muted shrink-0"
+                        })
+                    ]
                 })
             }),
-            /*#__PURE__*/ _jsxs(SelectContent, {
+            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                side: "bottom",
+                align: "start",
+                size: "md",
+                className: "min-w-200",
                 children: [
-                    /*#__PURE__*/ _jsx(SelectItem, {
-                        value: "stripe",
-                        children: /*#__PURE__*/ _jsxs("div", {
-                            className: "flex items-center gap-8",
-                            children: [
-                                /*#__PURE__*/ _jsx(Avatar, {
-                                    size: "3xs",
-                                    content: "logo",
-                                    logoName: "stripe",
-                                    radius: "rounded"
-                                }),
-                                /*#__PURE__*/ _jsx("span", {
-                                    children: "Stripe"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(SelectItem, {
-                        value: "shipfox",
-                        children: /*#__PURE__*/ _jsxs("div", {
-                            className: "flex items-center gap-8",
-                            children: [
-                                /*#__PURE__*/ _jsx(Avatar, {
-                                    size: "3xs",
-                                    content: "logo",
-                                    logoName: "shipfox",
-                                    radius: "rounded"
-                                }),
-                                /*#__PURE__*/ _jsx("span", {
-                                    children: "Shipfox"
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-8 px-8 py-6 rounded-6",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                size: "3xs",
+                                content: "logo",
+                                logoName: currentOrg.logo,
+                                radius: "rounded"
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: "flex-1 text-sm text-foreground-neutral-subtle truncate",
+                                children: [
+                                    currentOrg.name,
+                                    "'s organization"
+                                ]
+                            })
+                        ]
                     }),
-                    /*#__PURE__*/ _jsx(SelectItem, {
-                        value: "github",
-                        children: /*#__PURE__*/ _jsxs("div", {
-                            className: "flex items-center gap-8",
-                            children: [
-                                /*#__PURE__*/ _jsx(Avatar, {
-                                    size: "3xs",
-                                    content: "logo",
-                                    logoName: "github",
-                                    radius: "rounded"
-                                }),
-                                /*#__PURE__*/ _jsx("span", {
-                                    children: "GitHub"
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "settings3Line",
+                        onSelect: onSettingsClick,
+                        children: "Settings"
                     }),
-                    /*#__PURE__*/ _jsx(SelectSeparator, {}),
-                    /*#__PURE__*/ _jsxs(Button, {
-                        variant: "transparent",
-                        className: "w-full justify-start text-foreground-neutral-subtle",
+                    /*#__PURE__*/ _jsxs(DropdownMenuSub, {
                         children: [
-                            /*#__PURE__*/ _jsx(Icon, {
-                                name: "addLine",
-                                className: "size-16 shrink-0"
+                            /*#__PURE__*/ _jsx(DropdownMenuSubTrigger, {
+                                icon: "arrowLeftRightLine",
+                                children: "Switch organization"
                             }),
-                            /*#__PURE__*/ _jsx("span", {
-                                children: "New organization"
+                            /*#__PURE__*/ _jsx(DropdownMenuSubContent, {
+                                children: organizations.map((org)=>/*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        icon: org.logo,
+                                        iconStyle: org.id === selectedOrg ? 'text-foreground-highlight-interactive' : 'text-foreground-neutral-base',
+                                        className: cn(org.id === selectedOrg && 'text-foreground-neutral-base font-medium'),
+                                        onSelect: ()=>handleOrganizationSelect(org.id),
+                                        children: org.name
+                                    }, org.id))
                             })
                         ]
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "addLine",
+                        onSelect: onNewOrganizationClick,
+                        children: "New organization"
                     })
                 ]
             })

package/dist/components/dashboard/components/sidebar.d.ts

@@ -0,0 +1,24 @@
+import { type IconName } from '../../../components/icon';
+export type SidebarNavItem = {
+    id: string;
+    label: string;
+    icon: IconName;
+    href?: string;
+    isActive?: boolean;
+};
+export interface SidebarProps {
+    items: SidebarNavItem[];
+    activeItemId?: string;
+    onItemClick?: (item: SidebarNavItem) => void;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+export declare function Sidebar({ items, activeItemId, onItemClick, defaultOpen, open: openProp, onOpenChange: setOpenProp, className, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Default sidebar items for Analytics page
+ * These represent sub-sections within Analytics
+ */
+export declare const defaultSidebarItems: SidebarNavItem[];
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/components/dashboard/components/sidebar.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { Kbd } from '../../../components/kbd/index.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../components/tooltip/index.js';
+import { Text } from '../../../components/typography/index.js';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+const SIDEBAR_WIDTH = '16rem'; // 256px
+const SIDEBAR_WIDTH_ICON = '4rem'; // 64px
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SidebarContext = /*#__PURE__*/ createContext(undefined);
+function useSidebarContext() {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebarContext must be used within Sidebar');
+    }
+    return context;
+}
+export function Sidebar({ items, activeItemId, onItemClick, defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className }) {
+    // Internal state for uncontrolled mode
+    const [_open, _setOpen] = useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = useCallback((value)=>{
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+            setOpenProp(openState);
+        } else {
+            _setOpen(openState);
+        }
+    }, [
+        setOpenProp,
+        open
+    ]);
+    const toggleSidebar = useCallback(()=>{
+        setOpen((prev)=>!prev);
+    }, [
+        setOpen
+    ]);
+    // Keyboard shortcut: Cmd/Ctrl + B
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>window.removeEventListener('keydown', handleKeyDown);
+    }, [
+        toggleSidebar
+    ]);
+    const state = open ? 'expanded' : 'collapsed';
+    const contextValue = useMemo(()=>({
+            state,
+            open,
+            setOpen,
+            toggleSidebar
+        }), [
+        state,
+        open,
+        setOpen,
+        toggleSidebar
+    ]);
+    return /*#__PURE__*/ _jsx(SidebarContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx(TooltipProvider, {
+            delayDuration: 0,
+            children: /*#__PURE__*/ _jsx("aside", {
+                style: {
+                    width: state === 'collapsed' ? SIDEBAR_WIDTH_ICON : SIDEBAR_WIDTH
+                },
+                className: cn('group/sidebar flex flex-col shrink-0 h-full', 'transition-[width] duration-150 ease-linear', className),
+                "data-state": state,
+                "data-collapsible": state === 'collapsed' ? 'icon' : '',
+                children: /*#__PURE__*/ _jsxs("nav", {
+                    className: "flex flex-col flex-1 overflow-hidden gap-4",
+                    children: [
+                        /*#__PURE__*/ _jsx(SidebarHeader, {}),
+                        /*#__PURE__*/ _jsx(SidebarContent, {
+                            children: /*#__PURE__*/ _jsx(SidebarMenu, {
+                                items: items,
+                                activeItemId: activeItemId,
+                                onItemClick: onItemClick
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+function SidebarHeader() {
+    const { state, toggleSidebar } = useSidebarContext();
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "sidebar-header",
+        className: cn('flex items-center h-32 shrink-0', 'transition-all duration-200', state === 'collapsed' ? 'justify-center px-0' : 'justify-between pl-24 pr-16'),
+        children: [
+            state === 'expanded' && /*#__PURE__*/ _jsx(Text, {
+                size: "xs",
+                className: "flex-1 font-medium text-foreground-neutral-muted whitespace-nowrap",
+                children: "Analytics"
+            }),
+            /*#__PURE__*/ _jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ _jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "transparent",
+                            size: "2xs",
+                            className: cn('shrink-0 text-foreground-neutral-muted hover:text-foreground-neutral-subtle', 'transition-all duration-200', 'p-6 rounded-6', 'size-32'),
+                            onClick: toggleSidebar,
+                            "aria-label": state === 'expanded' ? 'Collapse sidebar' : 'Expand sidebar',
+                            "aria-expanded": state === 'expanded',
+                            children: /*#__PURE__*/ _jsx(Icon, {
+                                name: state === 'expanded' ? 'sidebarFoldLine' : 'sidebarUnfoldLine',
+                                className: "size-16"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(TooltipContent, {
+                        side: "right",
+                        className: "flex items-center gap-8",
+                        children: [
+                            /*#__PURE__*/ _jsxs("span", {
+                                children: [
+                                    state === 'expanded' ? 'Collapse' : 'Expand',
+                                    " sidebar"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                className: "h-16 !text-foreground-neutral-subtle",
+                                children: "⌘B"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function SidebarContent({ className, children }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sidebar-content",
+        className: cn('flex min-h-0 flex-1 flex-col gap-4 overflow-auto scrollbar', 'px-16 pb-16', 'group-data-[collapsible=icon]/sidebar:overflow-hidden', className),
+        children: children
+    });
+}
+function SidebarMenu({ items, activeItemId, onItemClick }) {
+    return /*#__PURE__*/ _jsx("ul", {
+        "data-slot": "sidebar-menu",
+        className: "flex w-full min-w-0 flex-col gap-4",
+        children: items.map((item)=>{
+            const isActive = item.isActive ?? item.id === activeItemId;
+            return /*#__PURE__*/ _jsx(SidebarMenuItem, {
+                item: item,
+                isActive: isActive,
+                onClick: ()=>onItemClick?.(item)
+            }, item.id);
+        })
+    });
+}
+function SidebarMenuItem({ item, isActive, onClick }) {
+    const { state } = useSidebarContext();
+    const button = /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        onClick: onClick,
+        "data-slot": "sidebar-menu-button",
+        "data-active": isActive,
+        className: cn('peer/menu-button flex w-full items-center gap-10 overflow-hidden rounded-6', 'text-left text-sm outline-hidden', 'transition-[width,height,padding] duration-200 ease-linear', 'hover:bg-background-neutral-hover', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-highlight-interactive', 'active:bg-background-neutral-hover', 'disabled:pointer-events-none disabled:opacity-50', 'h-32 p-8', 'group-data-[collapsible=icon]/sidebar:size-32! group-data-[collapsible=icon]/sidebar:p-8!', isActive ? 'bg-background-neutral-hover font-medium text-foreground-neutral-base' : 'text-foreground-neutral-subtle', '[&>span:last-child]:truncate', 'relative'),
+        "aria-current": isActive ? 'page' : undefined,
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: item.icon,
+                className: cn('size-16 shrink-0 transition-colors duration-200', isActive ? 'text-[#FF4B00]' : 'text-foreground-neutral-muted')
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "flex-1 truncate text-sm font-normal",
+                children: item.label
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsx("li", {
+        "data-slot": "sidebar-menu-item",
+        className: "group/menu-item relative",
+        children: /*#__PURE__*/ _jsxs(Tooltip, {
+            children: [
+                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                    asChild: true,
+                    children: button
+                }),
+                /*#__PURE__*/ _jsx(TooltipContent, {
+                    side: "right",
+                    align: "center",
+                    hidden: state !== 'collapsed',
+                    children: item.label
+                })
+            ]
+        })
+    });
+}
+/**
+ * Default sidebar items for Analytics page
+ * These represent sub-sections within Analytics
+ */ export const defaultSidebarItems = [
+    {
+        id: 'reliability',
+        label: 'Reliability',
+        icon: 'shieldCheckLine'
+    },
+    {
+        id: 'performance',
+        label: 'Performance',
+        icon: 'speedLine'
+    }
+];
+
+//# sourceMappingURL=sidebar.js.map

package/dist/components/dashboard/context/dashboard-context.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Dashboard Context Provider
+ *
+ * Provides centralized state management for dashboard components including
+ * search, filters, column visibility, time period, and sidebar navigation.
+ */
+import { type ReactNode } from 'react';
+import type { DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn } from './types';
+export interface DashboardProviderProps {
+    children: ReactNode;
+    /**
+     * Initial columns configuration
+     * @default DEFAULT_COLUMNS
+     */
+    initialColumns?: ViewColumn[];
+    /**
+     * Initial filters configuration
+     * @default DEFAULT_FILTERS
+     */
+    initialFilters?: FilterOption[];
+    /**
+     * Initial time period
+     * @default '2days'
+     */
+    initialTimePeriod?: TimePeriod;
+    /**
+     * Initial active sidebar item
+     * @default 'reliability'
+     */
+    initialActiveSidebarItem?: string;
+    /**
+     * Initial resource type
+     * @default 'ci-pipeline'
+     */
+    initialResourceType?: ResourceType;
+    /**
+     * Custom column ID to accessor key mapping
+     * @default DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY from utils
+     */
+    columnMapping?: Record<string, string>;
+}
+/**
+ * Dashboard Provider Component
+ *
+ * Wraps dashboard components to provide shared state management.
+ *
+ * @example
+ * ```tsx
+ * <DashboardProvider initialTimePeriod="7days">
+ *   <AnalyticsContent />
+ * </DashboardProvider>
+ * ```
+ */
+export declare function DashboardProvider({ children, initialColumns, initialFilters, initialTimePeriod, initialActiveSidebarItem, initialResourceType, columnMapping, }: DashboardProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access dashboard context
+ *
+ * @throws Error if used outside of DashboardProvider
+ * @returns Dashboard state and setters
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { searchQuery, setSearchQuery } = useDashboardContext();
+ *   return <input value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />;
+ * }
+ * ```
+ */
+export declare function useDashboardContext(): DashboardState;
+//# sourceMappingURL=dashboard-context.d.ts.map