@shipfox/react-ui 0.15.0 → 0.17.0

package/dist/components/dashboard/components/charts/line-chart.stories.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LineChart } from './line-chart.js';
+const meta = {
+    title: 'Components/Charts/LineChart',
+    component: LineChart,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+const sampleData = [
+    {
+        label: 'Jan',
+        value1: 100,
+        value2: 80,
+        value3: 120
+    },
+    {
+        label: 'Feb',
+        value1: 150,
+        value2: 130,
+        value3: 140
+    },
+    {
+        label: 'Mar',
+        value1: 200,
+        value2: 180,
+        value3: 160
+    },
+    {
+        label: 'Apr',
+        value1: 180,
+        value2: 200,
+        value3: 180
+    },
+    {
+        label: 'May',
+        value1: 250,
+        value2: 220,
+        value3: 200
+    },
+    {
+        label: 'Jun',
+        value1: 300,
+        value2: 280,
+        value3: 240
+    }
+];
+export const Default = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(LineChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        lines: [
+            {
+                dataKey: 'value1',
+                name: 'Series 1'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Series 2'
+            },
+            {
+                dataKey: 'value3',
+                name: 'Series 3'
+            }
+        ],
+        height: 200
+    }
+};
+export const WithTitle = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(LineChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        lines: [
+            {
+                dataKey: 'value1',
+                name: 'Revenue'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Expenses'
+            }
+        ],
+        height: 200,
+        title: 'Monthly Trends'
+    }
+};
+export const SingleLine = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(LineChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        lines: [
+            {
+                dataKey: 'value1',
+                name: 'Total Sales'
+            }
+        ],
+        height: 200,
+        title: 'Sales Over Time'
+    }
+};
+export const CustomColors = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(LineChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        lines: [
+            {
+                dataKey: 'value1',
+                name: 'Blue Series',
+                color: 'blue'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Green Series',
+                color: 'green'
+            },
+            {
+                dataKey: 'value3',
+                name: 'Orange Series',
+                color: 'orange'
+            }
+        ],
+        height: 200,
+        title: 'Custom Colored Lines'
+    }
+};
+export const HiddenAxis = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(LineChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        lines: [
+            {
+                dataKey: 'value1',
+                name: 'Series 1'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Series 2'
+            }
+        ],
+        height: 200,
+        xAxis: {
+            hide: true
+        },
+        yAxis: {
+            hide: true
+        },
+        title: 'No Axes'
+    }
+};
+export const HiddenLines = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(LineChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        lines: [
+            {
+                dataKey: 'value1',
+                name: 'Visible Series'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Hidden Series',
+                hide: true
+            },
+            {
+                dataKey: 'value3',
+                name: 'Another Visible Series'
+            }
+        ],
+        height: 200,
+        title: 'With Hidden Lines'
+    }
+};
+export const CustomFormatter = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(LineChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        lines: [
+            {
+                dataKey: 'value1',
+                name: 'Sales'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Profit'
+            }
+        ],
+        height: 200,
+        tooltip: {
+            formatter: (value)=>`$${value.toLocaleString()}`,
+            labelFormatter: (label)=>`Month: ${label}`
+        },
+        yAxis: {
+            tickFormatter: (value)=>`$${value}`
+        },
+        title: 'Formatted Values'
+    }
+};
+export const EmptyState = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(LineChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: [],
+        lines: [
+            {
+                dataKey: 'value1',
+                name: 'Series 1'
+            }
+        ],
+        height: 200,
+        title: 'Performance over time'
+    }
+};
+
+//# sourceMappingURL=line-chart.stories.js.map

package/dist/components/dashboard/components/charts/utils.d.ts

@@ -0,0 +1,13 @@
+import type { ChartTooltipContentProps } from './chart-tooltip';
+import { type ChartColor } from './colors';
+type RechartsPayloadItem = {
+    name?: unknown;
+    value?: unknown;
+    dataKey?: unknown;
+    color?: unknown;
+};
+export declare function normalizeTooltipPayload(payload: readonly RechartsPayloadItem[] | undefined, formatter?: (value: number) => string): ChartTooltipContentProps['payload'];
+export declare function getChartColor(color: ChartColor | undefined, index: number): string;
+export declare function getHoverOpacity(hoveredDataKey: string | undefined, currentDataKey: string): number;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/dashboard/components/charts/utils.js

@@ -0,0 +1,18 @@
+import { chartColors, chartColorsList } from './colors.js';
+export function normalizeTooltipPayload(payload, formatter) {
+    if (!payload) return undefined;
+    return payload.map((p)=>({
+            name: typeof p.name === 'string' ? p.name : String(p.name ?? ''),
+            value: formatter ? formatter(Number(p.value)) : typeof p.value === 'string' || typeof p.value === 'number' ? p.value : String(p.value ?? ''),
+            dataKey: typeof p.dataKey === 'string' || typeof p.dataKey === 'number' ? p.dataKey : String(p.dataKey ?? ''),
+            color: typeof p.color === 'string' ? p.color : undefined
+        }));
+}
+export function getChartColor(color, index) {
+    return color ? chartColors[color] : chartColorsList[index % chartColorsList.length];
+}
+export function getHoverOpacity(hoveredDataKey, currentDataKey) {
+    return hoveredDataKey ? hoveredDataKey === currentDataKey ? 1 : 0.25 : 1;
+}
+
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1,8 @@
+export interface DashboardAlertProps {
+    title?: string;
+    description?: string;
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare function DashboardAlert({ title, description, onDismiss, className, }: DashboardAlertProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dashboard-alert.d.ts.map

package/dist/components/dashboard/components/dashboard-alert.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertClose, AlertContent, AlertDescription, AlertTitle } from '../../../components/alert/index.js';
+export function DashboardAlert({ title = 'Ship faster. At half the cost.', description = 'Track every workflow in one place, with full visibility into performance and reliability.', onDismiss, className }) {
+    return /*#__PURE__*/ _jsxs(Alert, {
+        variant: "info",
+        onOpenChange: (open)=>!open && onDismiss?.(),
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsxs(AlertContent, {
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsx(AlertDescription, {
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(AlertClose, {})
+        ]
+    });
+}
+
+//# sourceMappingURL=dashboard-alert.js.map

package/dist/components/dashboard/components/kpi-card.d.ts

@@ -0,0 +1,15 @@
+export type KpiVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info';
+export interface KpiCardProps {
+    label: string;
+    value: string | number;
+    variant?: KpiVariant;
+    className?: string;
+}
+export declare function KpiCard({ label, value, variant, className }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
+export interface KpiCardsGroupProps {
+    cards: KpiCardProps[];
+    className?: string;
+}
+export declare function KpiCardsGroup({ cards, className }: KpiCardsGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultKpiCards: KpiCardProps[];
+//# sourceMappingURL=kpi-card.d.ts.map

package/dist/components/dashboard/components/kpi-card.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../components/typography/index.js';
+import { cn } from '../../../utils/cn.js';
+const variantDotStyles = {
+    neutral: 'bg-foreground-neutral-muted',
+    success: 'bg-green-500',
+    warning: 'bg-orange-500',
+    error: 'bg-red-500',
+    info: 'bg-blue-500'
+};
+export function KpiCard({ label, value, variant = 'neutral', className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex flex-col gap-4 p-12 rounded-8', 'bg-background-neutral-base border border-border-neutral-base', 'min-w-120 flex-1', className),
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-xs text-foreground-neutral-subtle",
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-6",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn('size-8 rounded-2 shrink-0', variantDotStyles[variant])
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        size: "sm",
+                        className: "font-medium text-foreground-neutral-base",
+                        children: value
+                    })
+                ]
+            })
+        ]
+    });
+}
+export function KpiCardsGroup({ cards, className }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn(// Base layout
+        'flex gap-12 md:gap-16', // Mobile: Swipeable with scroll-snap
+        'overflow-x-auto scrollbar-none pb-4 md:pb-0', // Scroll snap for smooth swiping
+        'snap-x snap-mandatory', // Hide scrollbar but allow scrolling
+        '[&::-webkit-scrollbar]:hidden', // Smooth scrolling
+        'scroll-smooth', className),
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "flex gap-16 pl-12 md:pl-0 md:w-full",
+            children: cards.map((card, index)=>/*#__PURE__*/ _jsx(KpiCard, {
+                    ...card,
+                    className: cn(// Mobile: Show ~2 cards per view with peek of next
+                    'shrink-0 w-[calc((100vw-56px)/2)] md:w-auto', 'snap-start', // Desktop: Flex grow
+                    'md:flex-1')
+                }, `${card.label}-${index}`))
+        })
+    });
+}
+export const defaultKpiCards = [
+    {
+        label: 'Total',
+        value: '1211',
+        variant: 'neutral'
+    },
+    {
+        label: 'Success',
+        value: '1200',
+        variant: 'success'
+    },
+    {
+        label: 'Neutral',
+        value: '11',
+        variant: 'neutral'
+    },
+    {
+        label: 'Failure rate',
+        value: '0%',
+        variant: 'success'
+    }
+];
+
+//# sourceMappingURL=kpi-card.js.map

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

@@ -0,0 +1,19 @@
+/**
+ * Mobile Sidebar Component
+ *
+ * Drawer-based sidebar for mobile devices using DropdownMenu
+ */
+import type { SidebarNavItem } from './sidebar';
+export interface MobileSidebarProps {
+    items: SidebarNavItem[];
+    activeItemId?: string;
+    onItemClick?: (item: SidebarNavItem) => void;
+    className?: string;
+}
+/**
+ * Mobile Sidebar
+ *
+ * Hamburger menu that opens a dropdown with sidebar navigation
+ */
+export declare function MobileSidebar({ items, activeItemId, onItemClick, className }: MobileSidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=mobile-sidebar.d.ts.map

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Mobile Sidebar Component
+ *
+ * Drawer-based sidebar for mobile devices using DropdownMenu
+ */ import { Button } from '../../../components/button/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * Mobile Sidebar
+ *
+ * Hamburger menu that opens a dropdown with sidebar navigation
+ */ export function MobileSidebar({ items, activeItemId, onItemClick, className }) {
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "transparent",
+                    size: "sm",
+                    className: cn('lg:hidden', className),
+                    "aria-label": "Open navigation menu",
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        name: "menu2Line",
+                        className: "size-20"
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(DropdownMenuContent, {
+                side: "bottom",
+                align: "start",
+                size: "sm",
+                className: "space-y-4",
+                children: items.map((item)=>{
+                    const isActive = item.id === activeItemId;
+                    return /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: item.icon,
+                        onSelect: ()=>onItemClick?.(item),
+                        className: cn(isActive && 'bg-background-components-hover text-foreground-neutral-base font-medium'),
+                        iconStyle: "text-foreground-highlight-interactive",
+                        children: item.label
+                    }, item.id);
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=mobile-sidebar.js.map

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