@shipfox/react-ui 0.15.0 → 0.17.0

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.d.ts

@@ -0,0 +1,14 @@
+export interface ChartTooltipContentProps {
+    active?: boolean;
+    label?: string | number;
+    payload?: ReadonlyArray<{
+        name?: string;
+        value?: string | number;
+        dataKey?: string | number;
+        color?: string;
+    }>;
+    hoveredDataKey?: string;
+    labelFormatter?: (label: string) => string;
+}
+export declare function ChartTooltipContent({ active, label, payload, hoveredDataKey, labelFormatter, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=chart-tooltip.d.ts.map

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

@@ -0,0 +1,46 @@
+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: "flex flex-col gap-4 rounded-8 p-12 bg-background-neutral-overlay border border-border-neutral-base shadow-lg",
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                size: "xs",
+                className: "text-foreground-neutral-muted",
+                children: labelFormatter ? labelFormatter(String(label)) : label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "h-px w-full bg-border-neutral-base"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-col gap-4",
+                children: payload.map((item, index)=>/*#__PURE__*/ _jsxs("div", {
+                        className: cn('flex items-center gap-8', hoveredDataKey && item.dataKey !== hoveredDataKey && 'opacity-50'),
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "size-8 shrink-0 rounded-full",
+                                style: {
+                                    backgroundColor: item.color
+                                }
+                            }),
+                            item.name && /*#__PURE__*/ _jsx(Text, {
+                                size: "xs",
+                                className: "text-foreground-neutral-subtle",
+                                children: item.name
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "xs",
+                                className: "text-foreground-neutral-base font-medium ml-auto tabular-nums",
+                                children: item.value
+                            })
+                        ]
+                    }, item.name ?? index.toString()))
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=chart-tooltip.js.map

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

@@ -0,0 +1,12 @@
+export declare const chartColors: {
+    readonly blue: "var(--color-blue-500)";
+    readonly green: "var(--color-green-500)";
+    readonly orange: "var(--color-orange-500)";
+    readonly purple: "var(--color-purple-500)";
+    readonly red: "var(--color-red-500)";
+    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)" | "var(--color-amber-500)" | "var(--color-neutral-500)")[];
+//# sourceMappingURL=colors.d.ts.map

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

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

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

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

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

@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'react';
+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?: 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;
+}
+export declare function LineChart({ data, lines, height, xAxis, yAxis, grid, tooltip, className, title, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=line-chart.d.ts.map

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

@@ -0,0 +1,152 @@
+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 { ChartTooltipContent } from './chart-tooltip.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);
+    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(CardHeader, {
+                children: /*#__PURE__*/ _jsx(CardTitle, {
+                    variant: "h4",
+                    children: title
+                })
+            }),
+            /*#__PURE__*/ _jsxs(CardContent, {
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            height
+                        },
+                        className: "relative",
+                        children: [
+                            /*#__PURE__*/ _jsx(ResponsiveContainer, {
+                                width: "100%",
+                                height: "100%",
+                                children: /*#__PURE__*/ _jsxs(RechartsLineChart, {
+                                    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
+                                        }),
+                                        !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);
+                                        })
+                                    ]
+                                })
+                            }),
+                            isEmpty && /*#__PURE__*/ _jsx(EmptyState, {
+                                icon: "lineChartLine",
+                                title: "Nothing here yet.",
+                                variant: "compact",
+                                className: "absolute inset-0 z-10"
+                            })
+                        ]
+                    }),
+                    !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);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=line-chart.js.map