@shipfox/react-ui 0.16.0 → 0.18.0

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

@@ -1,101 +1,147 @@
 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 { Bar, CartesianGrid, BarChart as RechartsBarChart, 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 BarChart({ data, bars, height = 200, xAxis, yAxis, grid, tooltip, className, title, barRadius = [
-    2,
-    2,
+    0,
+    0,
     0,
     0
 ], maxBarSize = 8 }) {
     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 visibleBars = bars.filter((bar)=>!bar.hide);
+    const hasData = data && data.length > 0 && visibleBars.length > 0;
+    const hasNonZeroData = hasData && data.some((item)=>visibleBars.some((bar)=>{
+            const value = item[bar.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(RechartsBarChart, {
-                        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,
-                                interval: xAxis?.interval ?? 'preserveStartEnd'
-                            }),
-                            !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(ResponsiveContainer, {
+                                width: "100%",
+                                height: "100%",
+                                children: /*#__PURE__*/ _jsxs(RechartsBarChart, {
+                                    data: isEmpty ? [] : data,
+                                    margin: {
+                                        top: 8,
+                                        right: 8,
+                                        left: -20,
+                                        bottom: 0
+                                    },
+                                    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,
+                                            interval: xAxis?.interval ?? 'preserveStartEnd'
+                                        }),
+                                        !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, {
+                                            cursor: {
+                                                fill: 'var(--background-neutral-hover)'
+                                            },
+                                            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
+                                                });
+                                            }
+                                        }),
+                                        visibleBars.map((bar, index)=>{
+                                            const color = getChartColor(bar.color, index);
+                                            const fillOpacity = getHoverOpacity(hoveredDataKey, bar.dataKey);
+                                            return /*#__PURE__*/ _jsx(Bar, {
+                                                dataKey: bar.dataKey,
+                                                name: bar.name ?? bar.dataKey,
+                                                fill: color,
+                                                fillOpacity: fillOpacity,
+                                                radius: barRadius,
+                                                maxBarSize: maxBarSize,
+                                                onMouseEnter: ()=>setHoveredDataKey(bar.dataKey),
+                                                onMouseLeave: ()=>setHoveredDataKey(undefined),
+                                                isAnimationActive: false,
+                                                stackId: bar.stackId
+                                            }, bar.dataKey);
+                                        })
+                                    ]
+                                })
                             }),
-                            /*#__PURE__*/ _jsx(CartesianGrid, {
-                                strokeDasharray: "3 3",
-                                stroke: "var(--border-neutral-base)",
-                                vertical: grid?.vertical ?? false,
-                                horizontal: grid?.horizontal ?? true
-                            }),
-                            /*#__PURE__*/ _jsx(Tooltip, {
-                                cursor: {
-                                    fill: 'var(--background-neutral-hover)'
-                                },
-                                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
-                                    });
-                                }
-                            }),
-                            bars.map((bar, index)=>{
-                                const defaultColor = bar.color ? chartColors[bar.color] : chartColorsList[index % chartColorsList.length];
-                                const fillOpacity = hoveredDataKey ? hoveredDataKey === bar.dataKey ? 1 : 0.25 : 1;
-                                const { dataKey, name, ...restBar } = bar;
-                                return /*#__PURE__*/ _jsx(Bar, {
-                                    dataKey: dataKey,
-                                    name: name ?? dataKey,
-                                    fill: defaultColor,
-                                    fillOpacity: fillOpacity,
-                                    radius: barRadius,
-                                    maxBarSize: maxBarSize,
-                                    onMouseEnter: ()=>setHoveredDataKey(dataKey),
-                                    onMouseLeave: ()=>setHoveredDataKey(undefined),
-                                    isAnimationActive: false,
-                                    ...restBar
-                                }, dataKey);
+                            isEmpty && /*#__PURE__*/ _jsx(EmptyState, {
+                                icon: "barChartBoxLine",
+                                title: "Nothing here yet.",
+                                variant: "compact",
+                                className: "absolute inset-0 z-10"
                             })
                         ]
+                    }),
+                    !isEmpty && visibleBars.length > 0 && /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center justify-center flex-wrap gap-16",
+                        children: visibleBars.map((bar, index)=>{
+                            const color = getChartColor(bar.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: bar.name ?? bar.dataKey
+                                    })
+                                ]
+                            }, bar.dataKey);
+                        })
                     })
-                })
+                ]
             })
         ]
     });

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

@@ -0,0 +1,287 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BarChart } from './bar-chart.js';
+const meta = {
+    title: 'Components/Charts/BarChart',
+    component: BarChart,
+    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(BarChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        bars: [
+            {
+                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(BarChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        bars: [
+            {
+                dataKey: 'value1',
+                name: 'Revenue'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Expenses'
+            }
+        ],
+        height: 200,
+        title: 'Monthly Comparison'
+    }
+};
+export const SingleBar = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(BarChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        bars: [
+            {
+                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(BarChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        bars: [
+            {
+                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 Bars'
+    }
+};
+export const StackedBars = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(BarChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        bars: [
+            {
+                dataKey: 'value1',
+                name: 'Series 1',
+                stackId: 'stack'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Series 2',
+                stackId: 'stack'
+            },
+            {
+                dataKey: 'value3',
+                name: 'Series 3',
+                stackId: 'stack'
+            }
+        ],
+        height: 200,
+        title: 'Stacked Bars'
+    }
+};
+export const RoundedBars = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(BarChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        bars: [
+            {
+                dataKey: 'value1',
+                name: 'Series 1'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Series 2'
+            }
+        ],
+        height: 200,
+        barRadius: [
+            4,
+            4,
+            0,
+            0
+        ],
+        title: 'Rounded Top Corners'
+    }
+};
+export const HiddenBars = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(BarChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        bars: [
+            {
+                dataKey: 'value1',
+                name: 'Visible Series'
+            },
+            {
+                dataKey: 'value2',
+                name: 'Hidden Series',
+                hide: true
+            },
+            {
+                dataKey: 'value3',
+                name: 'Another Visible Series'
+            }
+        ],
+        height: 200,
+        title: 'With Hidden Bars'
+    }
+};
+export const CustomFormatter = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(BarChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: sampleData,
+        bars: [
+            {
+                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(BarChart, {
+                ...args
+            })
+        }),
+    args: {
+        data: [],
+        bars: [
+            {
+                dataKey: 'value1',
+                name: 'Series 1'
+            }
+        ],
+        height: 200,
+        title: 'Duration distribution'
+    }
+};
+
+//# sourceMappingURL=bar-chart.stories.js.map

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

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../../components/typography/index.js';
 import { cn } from '../../../../utils/cn.js';
 export function ChartTooltipContent({ active, label, payload, hoveredDataKey, labelFormatter }) {
     const isVisible = active && payload && payload.length;
     if (!isVisible) return null;
     return /*#__PURE__*/ _jsxs("div", {
-        className: cn('flex flex-col gap-4 rounded-8 border border-border-neutral-base', 'bg-background-neutral-overlay p-12 shadow-tooltip'),
+        className: "flex flex-col gap-4 rounded-8 p-12 bg-background-neutral-overlay border border-border-neutral-base shadow-lg",
         children: [
-            /*#__PURE__*/ _jsx("p", {
-                className: "text-xs text-foreground-neutral-muted",
+            /*#__PURE__*/ _jsx(Text, {
+                size: "xs",
+                className: "text-foreground-neutral-muted",
                 children: labelFormatter ? labelFormatter(String(label)) : label
             }),
             /*#__PURE__*/ _jsx("div", {
@@ -16,23 +18,22 @@ export function ChartTooltipContent({ active, label, payload, hoveredDataKey, la
             /*#__PURE__*/ _jsx("div", {
                 className: "flex flex-col gap-4",
                 children: payload.map((item, index)=>/*#__PURE__*/ _jsxs("div", {
-                        className: "flex items-center gap-8",
-                        style: {
-                            opacity: hoveredDataKey ? item.dataKey === hoveredDataKey ? 1 : 0.5 : 1
-                        },
+                        className: cn('flex items-center gap-8', hoveredDataKey && item.dataKey !== hoveredDataKey && 'opacity-50'),
                         children: [
                             /*#__PURE__*/ _jsx("span", {
-                                className: "size-8 rounded-full shrink-0",
+                                className: "size-8 shrink-0 rounded-full",
                                 style: {
                                     backgroundColor: item.color
                                 }
                             }),
-                            item.name && /*#__PURE__*/ _jsx("span", {
-                                className: "text-xs text-foreground-neutral-subtle",
+                            item.name && /*#__PURE__*/ _jsx(Text, {
+                                size: "xs",
+                                className: "text-foreground-neutral-subtle",
                                 children: item.name
                             }),
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "text-xs text-foreground-neutral-base font-medium ml-auto tabular-nums",
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "xs",
+                                className: "text-foreground-neutral-base font-medium ml-auto tabular-nums",
                                 children: item.value
                             })
                         ]

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

@@ -4,8 +4,9 @@ export declare const chartColors: {
     readonly orange: "var(--color-orange-500)";
     readonly purple: "var(--color-purple-500)";
     readonly red: "var(--color-red-500)";
-    readonly neutral: "var(--foreground-neutral-muted)";
+    readonly amber: "var(--color-amber-500)";
+    readonly neutral: "var(--color-neutral-500)";
 };
 export type ChartColor = keyof typeof chartColors;
-export declare const chartColorsList: ("var(--color-blue-500)" | "var(--color-green-500)" | "var(--color-orange-500)" | "var(--color-purple-500)" | "var(--color-red-500)")[];
+export declare const chartColorsList: ("var(--color-blue-500)" | "var(--color-green-500)" | "var(--color-orange-500)" | "var(--color-purple-500)" | "var(--color-red-500)" | "var(--color-amber-500)" | "var(--color-neutral-500)")[];
 //# sourceMappingURL=colors.d.ts.map

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

@@ -4,14 +4,17 @@ export const chartColors = {
     orange: 'var(--color-orange-500)',
     purple: 'var(--color-purple-500)',
     red: 'var(--color-red-500)',
-    neutral: 'var(--foreground-neutral-muted)'
+    amber: 'var(--color-amber-500)',
+    neutral: 'var(--color-neutral-500)'
 };
 export const chartColorsList = [
     chartColors.blue,
     chartColors.green,
     chartColors.orange,
     chartColors.purple,
-    chartColors.red
+    chartColors.red,
+    chartColors.amber,
+    chartColors.neutral
 ];
 
 //# sourceMappingURL=colors.js.map

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

@@ -2,4 +2,5 @@ export * from './bar-chart';
 export * from './chart-tooltip';
 export * from './colors';
 export * from './line-chart';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -2,5 +2,6 @@ export * from './bar-chart.js';
 export * from './chart-tooltip.js';
 export * from './colors.js';
 export * from './line-chart.js';
+export * from './utils.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/dashboard/components/charts/line-chart.d.ts

@@ -1,34 +1,25 @@
 import type { ComponentProps } from 'react';
-import { type LineProps, LineChart as RechartsLineChart } from 'recharts';
-import { type ChartColor } from './colors';
+import { type CartesianGridProps, type LineProps, LineChart as RechartsLineChart, type XAxisProps, type YAxisProps } from 'recharts';
+import type { ChartColor } from './colors';
 export type RechartsLineChartProps = ComponentProps<typeof RechartsLineChart>;
 export interface LineChartLine extends Omit<LineProps, 'dataKey' | 'strokeWidth'> {
     dataKey: string;
     name?: string;
     strokeWidth?: number;
     color?: ChartColor;
+    hide?: boolean;
 }
 export interface LineChartProps {
     data: RechartsLineChartProps['data'];
     lines: LineChartLine[];
     syncId?: RechartsLineChartProps['syncId'];
     height?: number;
-    xAxis?: {
-        dataKey?: string;
-        tickFormatter?: (value: string) => string;
-        hide?: boolean;
-    };
-    yAxis?: {
-        domain?: [number, number];
-        ticks?: number[];
-        hide?: boolean;
-    };
-    grid?: {
-        vertical?: boolean;
-        horizontal?: boolean;
-    };
+    xAxis?: Pick<XAxisProps, 'dataKey' | 'tickFormatter' | 'hide'>;
+    yAxis?: Pick<YAxisProps, 'domain' | 'ticks' | 'hide' | 'tickFormatter'>;
+    grid?: Pick<CartesianGridProps, 'vertical' | 'horizontal'>;
     tooltip?: {
         labelFormatter?: (label: string) => string;
+        formatter?: (value: number) => string;
     };
     className?: string;
     title?: string;