@shipfox/react-ui 0.16.0 → 0.18.0

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

@@ -1,125 +1,149 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/card/index.js';
+import { EmptyState } from '../../../../components/empty-state/index.js';
+import { Text } from '../../../../components/typography/index.js';
 import { useState } from 'react';
 import { CartesianGrid, Line, LineChart as RechartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-import { cn } from '../../../../utils/cn.js';
 import { ChartTooltipContent } from './chart-tooltip.js';
-import { chartColors, chartColorsList } from './colors.js';
+import { getChartColor, getHoverOpacity, normalizeTooltipPayload } from './utils.js';
 export function LineChart({ data, lines, height = 200, xAxis, yAxis, grid, tooltip, className, title }) {
     const [hoveredDataKey, setHoveredDataKey] = useState(undefined);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn('p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base', className),
+    const visibleLines = lines.filter((line)=>!line.hide);
+    const hasData = data && data.length > 0 && visibleLines.length > 0;
+    const hasNonZeroData = hasData && data.some((item)=>visibleLines.some((line)=>{
+            const value = item[line.dataKey];
+            return value !== undefined && value !== null && Number(value) !== 0;
+        }));
+    const isEmpty = !hasData || !hasNonZeroData;
+    return /*#__PURE__*/ _jsxs(Card, {
+        className: className,
         children: [
-            title && /*#__PURE__*/ _jsx("p", {
-                className: "text-sm font-medium text-foreground-neutral-base mb-12",
-                children: title
+            title && /*#__PURE__*/ _jsx(CardHeader, {
+                children: /*#__PURE__*/ _jsx(CardTitle, {
+                    variant: "h4",
+                    children: title
+                })
             }),
-            /*#__PURE__*/ _jsx("div", {
-                style: {
-                    height
-                },
-                children: /*#__PURE__*/ _jsx(ResponsiveContainer, {
-                    width: "100%",
-                    height: "100%",
-                    children: /*#__PURE__*/ _jsxs(RechartsLineChart, {
-                        data: data,
-                        margin: {
-                            top: 8,
-                            right: 8,
-                            left: -20,
-                            bottom: 0
+            /*#__PURE__*/ _jsxs(CardContent, {
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            height
                         },
+                        className: "relative",
                         children: [
-                            !xAxis?.hide && /*#__PURE__*/ _jsx(XAxis, {
-                                dataKey: xAxis?.dataKey ?? 'label',
-                                axisLine: false,
-                                tickLine: false,
-                                tick: {
-                                    fill: 'var(--foreground-neutral-muted)',
-                                    fontSize: 12
-                                },
-                                tickFormatter: xAxis?.tickFormatter
-                            }),
-                            !yAxis?.hide && /*#__PURE__*/ _jsx(YAxis, {
-                                axisLine: false,
-                                tickLine: false,
-                                tick: {
-                                    fill: 'var(--foreground-neutral-muted)',
-                                    fontSize: 12
-                                },
-                                domain: yAxis?.domain,
-                                ticks: yAxis?.ticks
-                            }),
-                            /*#__PURE__*/ _jsx(CartesianGrid, {
-                                strokeDasharray: "3 3",
-                                stroke: "var(--border-neutral-base)",
-                                vertical: grid?.vertical ?? false,
-                                horizontal: grid?.horizontal ?? true
-                            }),
-                            /*#__PURE__*/ _jsx(Tooltip, {
-                                content: (props)=>{
-                                    if (!props.active) return null;
-                                    return /*#__PURE__*/ _jsx(ChartTooltipContent, {
-                                        active: props.active,
-                                        label: props.label,
-                                        payload: props.payload,
-                                        hoveredDataKey: hoveredDataKey,
-                                        labelFormatter: tooltip?.labelFormatter
-                                    });
-                                }
-                            }),
-                            lines.map((line, index)=>{
-                                const defaultColor = line.color ? chartColors[line.color] : chartColorsList[index % chartColorsList.length];
-                                const strokeWidth = line.strokeWidth ?? 2;
-                                const strokeOpacity = hoveredDataKey ? hoveredDataKey === line.dataKey ? 1 : 0.25 : 1;
-                                const { dataKey, name, ...restLine } = line;
-                                return /*#__PURE__*/ _jsx(Line, {
-                                    type: "monotone",
-                                    dataKey: dataKey,
-                                    name: name ?? dataKey,
-                                    stroke: defaultColor,
-                                    strokeWidth: strokeWidth,
-                                    strokeOpacity: strokeOpacity,
-                                    dot: false,
-                                    activeDot: {
-                                        r: strokeWidth * 2,
-                                        fill: defaultColor,
-                                        fillOpacity: strokeOpacity,
-                                        stroke: 'var(--background-neutral-base)',
-                                        strokeWidth,
-                                        strokeOpacity,
-                                        onMouseEnter: ()=>setHoveredDataKey(dataKey),
-                                        onMouseLeave: ()=>setHoveredDataKey(undefined)
+                            /*#__PURE__*/ _jsx(ResponsiveContainer, {
+                                width: "100%",
+                                height: "100%",
+                                children: /*#__PURE__*/ _jsxs(RechartsLineChart, {
+                                    data: isEmpty ? [] : data,
+                                    margin: {
+                                        top: 8,
+                                        right: 8,
+                                        left: -20,
+                                        bottom: 0
                                     },
-                                    onMouseEnter: ()=>setHoveredDataKey(dataKey),
-                                    onMouseLeave: ()=>setHoveredDataKey(undefined),
-                                    isAnimationActive: false,
-                                    ...restLine
-                                }, dataKey);
-                            })
-                        ]
-                    })
-                })
-            }),
-            lines.length > 0 && /*#__PURE__*/ _jsx("div", {
-                className: "flex items-center justify-center gap-16 mt-12",
-                children: lines.map((line, index)=>{
-                    const color = line.color ? chartColors[line.color] : chartColorsList[index % chartColorsList.length];
-                    return /*#__PURE__*/ _jsxs("div", {
-                        className: "flex items-center gap-6",
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "size-8 rounded-full",
-                                style: {
-                                    backgroundColor: color
-                                }
+                                    children: [
+                                        !xAxis?.hide && /*#__PURE__*/ _jsx(XAxis, {
+                                            dataKey: xAxis?.dataKey ?? 'label',
+                                            axisLine: false,
+                                            tickLine: false,
+                                            tick: {
+                                                fill: 'var(--foreground-neutral-muted)',
+                                                fontSize: 12
+                                            },
+                                            tickFormatter: xAxis?.tickFormatter
+                                        }),
+                                        !yAxis?.hide && /*#__PURE__*/ _jsx(YAxis, {
+                                            axisLine: false,
+                                            tickLine: false,
+                                            tick: {
+                                                fill: 'var(--foreground-neutral-muted)',
+                                                fontSize: 12
+                                            },
+                                            domain: yAxis?.domain,
+                                            ticks: yAxis?.ticks,
+                                            tickFormatter: yAxis?.tickFormatter
+                                        }),
+                                        /*#__PURE__*/ _jsx(CartesianGrid, {
+                                            strokeDasharray: "3 3",
+                                            stroke: "var(--border-neutral-base)",
+                                            vertical: grid?.vertical ?? false,
+                                            horizontal: grid?.horizontal ?? true
+                                        }),
+                                        /*#__PURE__*/ _jsx(Tooltip, {
+                                            content: (props)=>{
+                                                if (!props.active) return null;
+                                                return /*#__PURE__*/ _jsx(ChartTooltipContent, {
+                                                    active: props.active,
+                                                    label: props.label,
+                                                    payload: normalizeTooltipPayload(props.payload, tooltip?.formatter),
+                                                    hoveredDataKey: hoveredDataKey,
+                                                    labelFormatter: tooltip?.labelFormatter
+                                                });
+                                            }
+                                        }),
+                                        visibleLines.map((line, index)=>{
+                                            const color = getChartColor(line.color, index);
+                                            const strokeWidth = line.strokeWidth ?? 2;
+                                            const strokeOpacity = getHoverOpacity(hoveredDataKey, line.dataKey);
+                                            return /*#__PURE__*/ _jsx(Line, {
+                                                type: "monotone",
+                                                dataKey: line.dataKey,
+                                                name: line.name ?? line.dataKey,
+                                                stroke: color,
+                                                strokeWidth: strokeWidth,
+                                                strokeOpacity: strokeOpacity,
+                                                dot: false,
+                                                activeDot: {
+                                                    r: strokeWidth * 2,
+                                                    fill: color,
+                                                    fillOpacity: strokeOpacity,
+                                                    stroke: 'var(--background-neutral-base)',
+                                                    strokeWidth,
+                                                    strokeOpacity,
+                                                    onMouseEnter: ()=>setHoveredDataKey(line.dataKey),
+                                                    onMouseLeave: ()=>setHoveredDataKey(undefined)
+                                                },
+                                                onMouseEnter: ()=>setHoveredDataKey(line.dataKey),
+                                                onMouseLeave: ()=>setHoveredDataKey(undefined),
+                                                isAnimationActive: false
+                                            }, line.dataKey);
+                                        })
+                                    ]
+                                })
                             }),
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "text-xs text-foreground-neutral-subtle",
-                                children: line.name ?? line.dataKey
+                            isEmpty && /*#__PURE__*/ _jsx(EmptyState, {
+                                icon: "lineChartLine",
+                                title: "Nothing here yet.",
+                                variant: "compact",
+                                className: "absolute inset-0 z-10"
                             })
                         ]
-                    }, line.dataKey);
-                })
+                    }),
+                    !isEmpty && visibleLines.length > 0 && /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center justify-center flex-wrap gap-16",
+                        children: visibleLines.map((line, index)=>{
+                            const color = getChartColor(line.color, index);
+                            return /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-6",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "size-8 rounded-full",
+                                        style: {
+                                            backgroundColor: color
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "xs",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: line.name ?? line.dataKey
+                                    })
+                                ]
+                            }, line.dataKey);
+                        })
+                    })
+                ]
             })
         ]
     });

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/kpi-card.d.ts

@@ -1,15 +1,14 @@
-export type KpiVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info';
-export interface KpiCardProps {
+import type { ComponentProps, ReactNode } from 'react';
+export type KpiVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'purple';
+export interface KpiCardProps extends Omit<ComponentProps<'div'>, 'title'> {
     label: string;
-    value: string | number;
+    value: string | number | ReactNode;
     variant?: KpiVariant;
-    className?: string;
+    isLoading?: boolean;
 }
-export declare function KpiCard({ label, value, variant, className }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
-export interface KpiCardsGroupProps {
+export declare function KpiCard({ label, value, variant, isLoading, className, ...props }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
+export interface KpiCardsGroupProps extends ComponentProps<'div'> {
     cards: KpiCardProps[];
-    className?: string;
 }
-export declare function KpiCardsGroup({ cards, className }: KpiCardsGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare const defaultKpiCards: KpiCardProps[];
+export declare function KpiCardsGroup({ cards, className, ...props }: KpiCardsGroupProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=kpi-card.d.ts.map