@shipfox/react-ui 0.17.0 → 0.19.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/kpi-card.d.ts

@@ -1,15 +1,14 @@
-export type KpiVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info';
-export interface KpiCardProps {
+import type { ComponentProps, ReactNode } from 'react';
+export type KpiVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'purple';
+export interface KpiCardProps extends Omit<ComponentProps<'div'>, 'title'> {
     label: string;
-    value: string | number;
+    value: string | number | ReactNode;
     variant?: KpiVariant;
-    className?: string;
+    isLoading?: boolean;
 }
-export declare function KpiCard({ label, value, variant, className }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
-export interface KpiCardsGroupProps {
+export declare function KpiCard({ label, value, variant, isLoading, className, ...props }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
+export interface KpiCardsGroupProps extends ComponentProps<'div'> {
     cards: KpiCardProps[];
-    className?: string;
 }
-export declare function KpiCardsGroup({ cards, className }: KpiCardsGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare const defaultKpiCards: KpiCardProps[];
+export declare function KpiCardsGroup({ cards, className, ...props }: KpiCardsGroupProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=kpi-card.d.ts.map