@shipfox/react-ui 0.15.0 → 0.17.0

package/dist/components/button-group/button-group.stories.js

@@ -186,12 +186,12 @@ export const Default = {
                             children: "Basic Button Group"
                         }),
                         /*#__PURE__*/ _jsxs(ButtonGroup, {
-                            "aria-label": "Text alignment",
+                            "aria-label": "Playback controls",
                             children: [
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "secondary",
                                     size: "sm",
-                                    "aria-label": "Align left",
+                                    "aria-label": "Rewind",
                                     children: /*#__PURE__*/ _jsx(Icon, {
                                         name: "rewindFill",
                                         className: "size-14 text-foreground-neutral-subtle"
@@ -201,7 +201,7 @@ export const Default = {
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "secondary",
                                     size: "sm",
-                                    "aria-label": "Align center",
+                                    "aria-label": "Play",
                                     children: /*#__PURE__*/ _jsx(Icon, {
                                         name: "playFill",
                                         className: "size-14 text-foreground-neutral-subtle"
@@ -211,7 +211,7 @@ export const Default = {
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "secondary",
                                     size: "sm",
-                                    "aria-label": "Align right",
+                                    "aria-label": "Speed",
                                     children: /*#__PURE__*/ _jsx(Icon, {
                                         name: "speedFill",
                                         className: "size-14 text-foreground-neutral-subtle"

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

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react';
+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?: 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;
+    barRadius?: [number, number, number, number];
+    maxBarSize?: number;
+}
+export declare function BarChart({ data, bars, height, xAxis, yAxis, grid, tooltip, className, title, barRadius, maxBarSize, }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=bar-chart.d.ts.map

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

@@ -0,0 +1,150 @@
+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 { ChartTooltipContent } from './chart-tooltip.js';
+import { getChartColor, getHoverOpacity, normalizeTooltipPayload } from './utils.js';
+export function BarChart({ data, bars, height = 200, xAxis, yAxis, grid, tooltip, className, title, barRadius = [
+    0,
+    0,
+    0,
+    0
+], maxBarSize = 8 }) {
+    const [hoveredDataKey, setHoveredDataKey] = useState(undefined);
+    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(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(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);
+                                        })
+                                    ]
+                                })
+                            }),
+                            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);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=bar-chart.js.map