@shipfox/react-ui 0.16.0 → 0.17.0

package/dist/components/card/card.d.ts

@@ -0,0 +1,24 @@
+import { Header, Text } from '../../components/typography';
+import type { ComponentProps } from 'react';
+export interface CardProps extends ComponentProps<'div'> {
+}
+export declare function Card({ className, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export interface CardHeaderProps extends ComponentProps<'div'> {
+}
+export declare function CardHeader({ className, children, ...props }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface CardTitleProps extends ComponentProps<typeof Header> {
+}
+export declare function CardTitle({ className, children, variant, ...props }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface CardDescriptionProps extends ComponentProps<typeof Text> {
+}
+export declare function CardDescription({ className, children, size, ...props }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export interface CardActionProps extends ComponentProps<'div'> {
+}
+export declare function CardAction({ className, children, ...props }: CardActionProps): import("react/jsx-runtime").JSX.Element;
+export interface CardContentProps extends ComponentProps<'div'> {
+}
+export declare function CardContent({ className, children, ...props }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+export interface CardFooterProps extends ComponentProps<'div'> {
+}
+export declare function CardFooter({ className, children, ...props }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card/card.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Header, Text } from '../../components/typography/index.js';
+import { cn } from '../../utils/cn.js';
+export function Card({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base flex flex-col gap-16', className),
+        ...props,
+        children: children
+    });
+}
+export function CardHeader({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('flex flex-col gap-4', className),
+        ...props,
+        children: children
+    });
+}
+export function CardTitle({ className, children, variant = 'h3', ...props }) {
+    return /*#__PURE__*/ _jsx(Header, {
+        variant: variant,
+        className: cn('text-foreground-neutral-base', className),
+        ...props,
+        children: children
+    });
+}
+export function CardDescription({ className, children, size = 'sm', ...props }) {
+    return /*#__PURE__*/ _jsx(Text, {
+        size: size,
+        className: cn('text-foreground-neutral-muted', className),
+        ...props,
+        children: children
+    });
+}
+export function CardAction({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('ml-auto', className),
+        ...props,
+        children: children
+    });
+}
+export function CardContent({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('flex-1', className),
+        ...props,
+        children: children
+    });
+}
+export function CardFooter({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('flex items-center gap-8', className),
+        ...props,
+        children: children
+    });
+}
+
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.stories.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/button/index.js';
+import { Input } from '../../components/input/index.js';
+import { Label } from '../../components/label/index.js';
+import { Text } from '../../components/typography/index.js';
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card.js';
+const meta = {
+    title: 'Components/Card',
+    component: Card,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                children: [
+                    /*#__PURE__*/ _jsxs(CardHeader, {
+                        children: [
+                            /*#__PURE__*/ _jsx(CardTitle, {
+                                children: "Card Title"
+                            }),
+                            /*#__PURE__*/ _jsx(CardDescription, {
+                                children: "This is a description of the card content."
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Card content goes here. This is where the main information is displayed."
+                        })
+                    })
+                ]
+            })
+        })
+};
+export const WithFooter = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                children: [
+                    /*#__PURE__*/ _jsxs(CardHeader, {
+                        children: [
+                            /*#__PURE__*/ _jsx(CardTitle, {
+                                children: "Card with Footer"
+                            }),
+                            /*#__PURE__*/ _jsx(CardDescription, {
+                                children: "This card includes a footer with actions."
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Main content area with important information."
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(CardFooter, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                size: "sm",
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "sm",
+                                children: "Save"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+};
+export const WithAction = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                children: [
+                    /*#__PURE__*/ _jsx(CardHeader, {
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-start justify-between gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4 flex-1",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CardTitle, {
+                                            children: "Card with Action"
+                                        }),
+                                        /*#__PURE__*/ _jsx(CardDescription, {
+                                            children: "This card has an action button in the header."
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(CardAction, {
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        size: "sm",
+                                        children: "Edit"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Content that can be edited using the action button."
+                        })
+                    })
+                ]
+            })
+        })
+};
+export const LoginForm = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                children: [
+                    /*#__PURE__*/ _jsx(CardHeader, {
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-start justify-between gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4 flex-1",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CardTitle, {
+                                            children: "Login to your account"
+                                        }),
+                                        /*#__PURE__*/ _jsx(CardDescription, {
+                                            children: "Enter your email below to login to your account"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(CardAction, {
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        size: "sm",
+                                        children: "Sign Up"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        children: /*#__PURE__*/ _jsxs("form", {
+                            className: "flex flex-col gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "grid gap-6",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Label, {
+                                            htmlFor: "email",
+                                            children: "Email"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Input, {
+                                            id: "email",
+                                            type: "email",
+                                            placeholder: "m@example.com",
+                                            required: true
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "grid gap-6",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Label, {
+                                                    htmlFor: "password",
+                                                    children: "Password"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Button, {
+                                                    variant: "transparent",
+                                                    size: "xs",
+                                                    className: "ml-auto",
+                                                    children: "Forgot password?"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Input, {
+                                            id: "password",
+                                            type: "password",
+                                            required: true
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(CardFooter, {
+                        className: "flex-col gap-8",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                className: "w-full",
+                                children: "Login"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                variant: "secondary",
+                                className: "w-full",
+                                children: "Login with Google"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+};
+
+//# sourceMappingURL=card.stories.js.map

package/dist/components/card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -0,0 +1,3 @@
+export * from './card.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -1,34 +1,25 @@
 import type { ComponentProps } from 'react';
-import { type BarProps, BarChart as RechartsBarChart } from 'recharts';
-import { type ChartColor } from './colors';
+import { type BarProps, type CartesianGridProps, BarChart as RechartsBarChart, type XAxisProps, type YAxisProps } from 'recharts';
+import type { ChartColor } from './colors';
 export type RechartsBarChartProps = ComponentProps<typeof RechartsBarChart>;
 export interface BarChartBar extends Omit<BarProps, 'dataKey'> {
     dataKey: string;
     name?: string;
     color?: ChartColor;
+    hide?: boolean;
+    stackId?: string;
 }
 export interface BarChartProps {
     data: RechartsBarChartProps['data'];
     bars: BarChartBar[];
     syncId?: RechartsBarChartProps['syncId'];
     height?: number;
-    xAxis?: {
-        dataKey?: string;
-        tickFormatter?: (value: string) => string;
-        hide?: boolean;
-        interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
-    };
-    yAxis?: {
-        domain?: [number, number];
-        ticks?: number[];
-        hide?: boolean;
-    };
-    grid?: {
-        vertical?: boolean;
-        horizontal?: boolean;
-    };
+    xAxis?: Pick<XAxisProps, 'dataKey' | 'tickFormatter' | 'hide' | 'interval'>;
+    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;

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);
+                        })
                     })
-                })
+                ]
             })
         ]
     });