@shipfox/react-ui 0.16.0 → 0.18.0

package/dist/components/count-up/count-up.stories.js

@@ -0,0 +1,568 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code } from '../../components/typography/index.js';
+import { useInView, useMotionValue, useSpring } from 'framer-motion';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { formatNumberCompact } from '../../utils/format/number.js';
+import { CountUp } from './count-up.js';
+const meta = {
+    title: 'Components/CountUp',
+    component: CountUp,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    },
+    argTypes: {
+        to: {
+            control: 'number'
+        },
+        from: {
+            control: 'number'
+        },
+        direction: {
+            control: 'select',
+            options: [
+                'up',
+                'down'
+            ]
+        },
+        delay: {
+            control: 'number'
+        },
+        duration: {
+            control: 'number'
+        },
+        separator: {
+            control: 'text'
+        },
+        startWhen: {
+            control: 'boolean'
+        }
+    },
+    args: {
+        to: 1000,
+        from: 0,
+        direction: 'up',
+        delay: 0,
+        duration: 2,
+        separator: '',
+        startWhen: true
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        to: 1000,
+        from: 0
+    }
+};
+export const Basic = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Count from 0 to 1000"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1000,
+                                from: 0,
+                                duration: 2
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Count from 500 to 1000"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1000,
+                                from: 500,
+                                duration: 2
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Count down from 1000 to 0"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1000,
+                                from: 0,
+                                direction: "down",
+                                duration: 2
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const WithSeparator = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "With comma separator"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1234567,
+                                from: 0,
+                                duration: 2,
+                                separator: ","
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "With space separator"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1234567,
+                                from: 0,
+                                duration: 2,
+                                separator: " "
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const WithDecimals = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "With 1 decimal place"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 99.5,
+                                from: 0,
+                                duration: 2
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "With 2 decimal places"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 123.45,
+                                from: 0,
+                                duration: 2
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const WithDelay = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "With 1 second delay"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1000,
+                                from: 0,
+                                duration: 2,
+                                delay: 1
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "With 2 second delay"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1000,
+                                from: 0,
+                                duration: 2,
+                                delay: 2
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const DifferentDurations = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Fast (0.5s)"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1000,
+                                from: 0,
+                                duration: 0.5
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Normal (2s)"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1000,
+                                from: 0,
+                                duration: 2
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Slow (5s)"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1000,
+                                from: 0,
+                                duration: 5
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const WithCallbacks = {
+    render: ()=>{
+        const [started, setStarted] = useState(false);
+        const [ended, setEnded] = useState(false);
+        const handleStart = ()=>{
+            setStarted(true);
+        };
+        const handleEnd = ()=>{
+            setEnded(true);
+        };
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Callbacks triggered"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUp, {
+                                to: 1000,
+                                from: 0,
+                                duration: 2,
+                                onStart: handleStart,
+                                onEnd: handleEnd
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-4 text-sm",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                "Started: ",
+                                started ? 'Yes' : 'No'
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                "Ended: ",
+                                ended ? 'Yes' : 'No'
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};
+function CountUpCompact({ to, from = 0, direction = 'up', delay = 0, duration = 2, className = '', startWhen = true, onStart, onEnd }) {
+    const ref = useRef(null);
+    const motionValue = useMotionValue(direction === 'down' ? to : from);
+    const damping = 20 + 40 * (1 / duration);
+    const stiffness = 100 * (1 / duration);
+    const springValue = useSpring(motionValue, {
+        damping,
+        stiffness
+    });
+    const isInView = useInView(ref, {
+        once: true,
+        margin: '0px'
+    });
+    const formatValue = useCallback((latest)=>{
+        if (Math.abs(latest) >= 999) {
+            return formatNumberCompact(latest);
+        }
+        const hasDecimals = latest % 1 !== 0;
+        const options = {
+            useGrouping: false,
+            minimumFractionDigits: hasDecimals ? 1 : 0,
+            maximumFractionDigits: hasDecimals ? 1 : 0
+        };
+        return Intl.NumberFormat('en-US', options).format(latest);
+    }, []);
+    useEffect(()=>{
+        if (ref.current) {
+            ref.current.textContent = formatValue(direction === 'down' ? to : from);
+        }
+    }, [
+        from,
+        to,
+        direction,
+        formatValue
+    ]);
+    useEffect(()=>{
+        if (isInView && startWhen) {
+            if (typeof onStart === 'function') {
+                onStart();
+            }
+            const timeoutId = setTimeout(()=>{
+                motionValue.set(direction === 'down' ? from : to);
+            }, delay * 1000);
+            const durationTimeoutId = setTimeout(()=>{
+                if (typeof onEnd === 'function') {
+                    onEnd();
+                }
+            }, delay * 1000 + duration * 1000);
+            return ()=>{
+                clearTimeout(timeoutId);
+                clearTimeout(durationTimeoutId);
+            };
+        }
+    }, [
+        isInView,
+        startWhen,
+        motionValue,
+        direction,
+        from,
+        to,
+        delay,
+        onStart,
+        onEnd,
+        duration
+    ]);
+    useEffect(()=>{
+        const unsubscribe = springValue.on('change', (latest)=>{
+            if (ref.current) {
+                ref.current.textContent = formatValue(latest);
+            }
+        });
+        return ()=>unsubscribe();
+    }, [
+        springValue,
+        formatValue
+    ]);
+    return /*#__PURE__*/ _jsx("span", {
+        className: className,
+        ref: ref
+    });
+}
+export const WithCompactFormat = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "From 999 to 1.1K"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUpCompact, {
+                                to: 1100,
+                                from: 999,
+                                duration: 2
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "From 0 to 1.5K"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUpCompact, {
+                                to: 1500,
+                                from: 0,
+                                duration: 2
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "From 999,999 to 1.1M"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUpCompact, {
+                                to: 1100000,
+                                from: 999999,
+                                duration: 2
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "From 0 to 2.5M"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUpCompact, {
+                                to: 2500000,
+                                from: 0,
+                                duration: 2
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "From 0 to 1.2B"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUpCompact, {
+                                to: 1200000000,
+                                from: 0,
+                                duration: 2
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Count down from 1.5K to 999"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-4xl font-semibold",
+                            children: /*#__PURE__*/ _jsx(CountUpCompact, {
+                                to: 999,
+                                from: 1500,
+                                direction: "down",
+                                duration: 2
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=count-up.stories.js.map

package/dist/components/count-up/index.d.ts

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

package/dist/components/count-up/index.js

@@ -0,0 +1,3 @@
+export * from './count-up.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;