@shipfox/react-ui 0.16.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.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;