@vrobots/storybook 0.2.11 → 0.2.12

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.2.11",
+    "version": "0.2.12",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -23,6 +23,7 @@
         "@storybook/addon-themes": "^10.2.16",
         "@tanstack/react-table": "^8.21.3",
         "axios": "^1.13.4",
+        "chart.js": "^4.5.1",
         "motion": "^12.34.0",
         "next": "^16.2.4",
         "next-themes": "^0.4.6",

package/dist/src/components/Chart.d.ts

@@ -0,0 +1,8 @@
+import { ChartDataset, Point, ChartDatasetCustomTypesPerDataset, ChartOptions, ChartType } from "chart.js";
+export interface IChart {
+    labels: string[];
+    type: ChartType;
+    datasets: ChartDataset<"line", (number | Point | null)[]>[] | ChartDatasetCustomTypesPerDataset<"line", (number | Point | null)[]>[];
+    options?: ChartOptions;
+}
+export declare const Chart: ({ labels, type, datasets, options, }: IChart) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Chart.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import ChartJs from "chart.js/auto";
+import { useColorMode } from "./ui/color-mode";
+export const Chart = ({ labels, type, datasets, options, }) => {
+    const chartRef = useRef(null);
+    const { colorMode } = useColorMode();
+    useEffect(() => {
+        const isDarkMode = colorMode === "dark";
+        const borderColorLight = 'rgba(100,100,100,1)';
+        const borderColorDark = 'rgba(200,200,200,1)';
+        const borderColor = isDarkMode ? borderColorDark : borderColorLight;
+        const gridColorLight = 'rgba(100,100,100,0.4)';
+        const gridColorDark = 'rgba(200,200,200,0.4)';
+        const gridColor = isDarkMode ? gridColorDark : gridColorLight;
+        const ticksColorLight = '#333';
+        const ticksColorDark = '#fff';
+        const ticksColor = isDarkMode ? ticksColorDark : ticksColorLight;
+        const scales = {
+            y: {
+                border: {
+                    color: borderColor,
+                },
+                grid: {
+                    color: gridColor,
+                },
+                ticks: {
+                    color: ticksColor,
+                },
+            },
+            x: {
+                border: {
+                    color: borderColor,
+                },
+                grid: {
+                    color: gridColor,
+                },
+                ticks: {
+                    color: ticksColor,
+                },
+            },
+        };
+        if (chartRef.current) {
+            const currentChart = ChartJs.getChart(chartRef.current);
+            currentChart?.destroy();
+        }
+        new ChartJs(chartRef.current, {
+            type,
+            data: {
+                labels,
+                datasets,
+            },
+            options: {
+                ...options,
+                scales,
+                color: ticksColor,
+                responsive: true,
+                maintainAspectRatio: false,
+            },
+        });
+    }, [
+        labels,
+        type,
+        datasets,
+        options,
+        colorMode,
+    ]);
+    return (_jsx("canvas", { ref: chartRef }));
+};

package/dist/src/components/Loader.js

@@ -15,7 +15,7 @@ export const Loader = ({ isLoading, isFullscreen, component, hideBackground, chi
                 zIndex: 100000,
                 maxHeight: '100vh',
                 display: 'flex',
-            }, bgColor: !hideBackground ? { _light: 'blue.50', _dark: 'gray.900' } : 'transparent', children: _jsxs(Box, { m: 'auto', children: [component && component, _jsx(Spinner, { position: 'static', m: 'auto' })] }) }));
+            }, bgColor: !hideBackground ? { _light: 'rgba(255, 255, 255, 0.5)', _dark: 'rgba(0, 0, 0, 0.5)' } : 'transparent', children: _jsxs(Box, { m: 'auto', children: [component && component, _jsx(Spinner, { position: 'static', m: 'auto' })] }) }));
     }
     return children ?? null;
 };

package/dist/src/components/Total.d.ts

@@ -0,0 +1,9 @@
+import { CardRootProps } from "@chakra-ui/react";
+export interface TotalProps {
+    title: string;
+    total: number;
+    colorTotal?: string;
+    colorTital?: string;
+    cardProps?: CardRootProps;
+}
+export declare const Total: ({ title, total, colorTotal, colorTital, cardProps }: TotalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Total.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "@chakra-ui/react";
+import { useState } from "react";
+import utils from "../utils";
+export const Total = ({ title, total, colorTotal, colorTital, cardProps }) => {
+    const [count, setCount] = useState(0);
+    const isAdding = count < total;
+    if (count !== total) {
+        setTimeout(() => {
+            setCount(prevCount => {
+                const isDiffGreaterThan10000 = isAdding
+                    ? total - prevCount > 10000
+                    : prevCount - total > 10000;
+                const isDiffGreaterThan1000 = isAdding
+                    ? total - prevCount > 1000
+                    : prevCount - total > 1000;
+                const isDiffGreaterThan100 = isAdding
+                    ? total - prevCount > 100
+                    : prevCount - total > 100;
+                const count = isDiffGreaterThan10000
+                    ? 10000
+                    : isDiffGreaterThan1000
+                        ? 1000
+                        : isDiffGreaterThan100
+                            ? 100
+                            : 1;
+                return isAdding ? prevCount + count : count;
+            });
+        }, 1);
+    }
+    return (_jsx(Card.Root, { display: 'flex', pt: 1, pb: 2, bgColor: 'transparent', ...cardProps, children: _jsxs(Card.Body, { children: [_jsx(Card.Title, { textAlign: 'center', color: colorTotal, children: utils.format.number(count) }), _jsx(Card.Description, { textAlign: 'center', fontWeight: 'bold', color: colorTital, children: title })] }) }));
+};

package/dist/src/components/form/Form.Root.d.ts

@@ -1,3 +1,6 @@
 import { BoxProps } from "@chakra-ui/react";
-export declare const FormRoot: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export interface FormRootProps extends BoxProps {
+    isLoading?: boolean;
+}
+export declare const FormRoot: ({ isLoading, ...props }: FormRootProps) => import("react/jsx-runtime").JSX.Element;
 export default FormRoot;

package/dist/src/components/form/Form.Root.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Card } from "@chakra-ui/react";
-export const FormRoot = (props) => {
-    return (_jsx(Box, { as: "form", display: "flex", justifyContent: "center", alignItems: "center", height: `100%`, bg: "neu.bg", px: 4, ...props, children: _jsx(Box, { layerStyle: "neuRaised", minW: { base: "100%", sm: "460px" }, maxW: "560px", bg: { _light: 'white', _dark: 'black' }, children: _jsx(Card.Root, { m: { base: 6, md: 8 }, bg: 'transparent', border: 'none', ...props, children: _jsx(Card.Body, { children: props.children }) }) }) }));
+import { Loader } from "../Loader";
+export const FormRoot = ({ isLoading = false, ...props }) => {
+    return (_jsxs(Box, { as: "form", display: "flex", justifyContent: "center", alignItems: "center", height: `100%`, bg: "neu.bg", px: 4, ...props, children: [_jsx(Loader, { isLoading: isLoading }), _jsx(Box, { layerStyle: "neuRaised", p: { base: 6, md: 8 }, minW: { base: "100%", sm: "460px" }, maxW: "560px", bg: { _light: 'white', _dark: 'black' }, children: _jsx(Card.Root, { bg: 'transparent', border: 'none', ...props, children: _jsx(Card.Body, { children: props.children }) }) })] }));
 };
 export default FormRoot;

package/dist/src/components/form/index.d.ts

@@ -3,7 +3,7 @@ export * from "./SecondFactorAuth";
 export * from "./FileUploader";
 declare const Form: {
     (): null;
-    Root: (props: import("@chakra-ui/react").BoxProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ isLoading, ...props }: import("./Form.Root").FormRootProps) => import("react/jsx-runtime").JSX.Element;
     Title: ({ title }: {
         title: string;
     }) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,7 @@ export * from './ui/tooltip';
 export * from './Accordion';
 export * from './AvatarIconMenu';
 export * from './Breadcrumbs';
+export * from './Chart';
 export * from './Display';
 export * from './FoldersAndFiles';
 export * from './Frame';
@@ -15,6 +16,7 @@ export * from './Page';
 export * from './Section';
 export * from './Sidebar';
 export * from './Timeline';
+export * from './Total';
 export * from './VerifyAction';
 export * from './form/Login';
 export * from './form/SecondFactorAuth';

package/dist/src/components/index.js

@@ -4,6 +4,7 @@ export * from './ui/tooltip';
 export * from './Accordion';
 export * from './AvatarIconMenu';
 export * from './Breadcrumbs';
+export * from './Chart';
 export * from './Display';
 export * from './FoldersAndFiles';
 export * from './Frame';
@@ -15,6 +16,7 @@ export * from './Page';
 export * from './Section';
 export * from './Sidebar';
 export * from './Timeline';
+export * from './Total';
 export * from './VerifyAction';
 export * from './form/Login';
 export * from './form/SecondFactorAuth';

package/dist/src/stories/Chart.stories.d.ts

@@ -0,0 +1,27 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ labels, type, datasets, options, }: import("../components").IChart) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        labels: string[];
+        type: import("chart.js").ChartType;
+        datasets: import("chart.js").ChartDataset<"line", (number | import("chart.js").Point | null)[]>[] | import("chart.js").ChartDatasetCustomTypesPerDataset<"line", (number | import("chart.js").Point | null)[]>[];
+        options?: import("chart.js").ChartOptions | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    args: {
+        labels: string[];
+        type: "line";
+        datasets: never[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Line: Story;
+export declare const MultiLine: Story;
+export declare const Bar: Story;
+export declare const Radar: Story;
+export declare const Doughnut: Story;

package/dist/src/stories/Chart.stories.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { Chart } from '../components';
+const meta = {
+    title: 'Data Visualization/Chart',
+    component: Chart,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx(Box, { width: "640px", height: "400px", children: _jsx(Story, {}) })),
+    ],
+    args: {
+        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+        type: 'line',
+        datasets: [],
+    },
+};
+export default meta;
+export const Line = {
+    args: {
+        type: 'line',
+        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+        datasets: [
+            {
+                label: 'Revenue',
+                data: [12000, 19000, 14000, 22000, 18000, 27000],
+                borderColor: 'rgba(99, 179, 237, 1)',
+                backgroundColor: 'rgba(99, 179, 237, 0.15)',
+                tension: 0.4,
+                fill: true,
+            },
+        ],
+    },
+};
+export const MultiLine = {
+    name: 'Line — Multiple Series',
+    args: {
+        type: 'line',
+        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+        datasets: [
+            {
+                label: 'Claims Submitted',
+                data: [340, 410, 390, 480, 420, 510],
+                borderColor: 'rgba(99, 179, 237, 1)',
+                backgroundColor: 'rgba(99, 179, 237, 0.1)',
+                tension: 0.4,
+                fill: false,
+            },
+            {
+                label: 'Claims Approved',
+                data: [300, 380, 350, 440, 390, 470],
+                borderColor: 'rgba(154, 230, 180, 1)',
+                backgroundColor: 'rgba(154, 230, 180, 0.1)',
+                tension: 0.4,
+                fill: false,
+            },
+            {
+                label: 'Claims Denied',
+                data: [40, 30, 40, 40, 30, 40],
+                borderColor: 'rgba(252, 129, 129, 1)',
+                backgroundColor: 'rgba(252, 129, 129, 0.1)',
+                tension: 0.4,
+                fill: false,
+            },
+        ],
+    },
+};
+export const Bar = {
+    args: {
+        type: 'bar',
+        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+        datasets: [
+            {
+                label: 'Billed',
+                data: [84000, 97000, 110000, 128000],
+                backgroundColor: 'rgba(99, 179, 237, 0.7)',
+                borderColor: 'rgba(99, 179, 237, 1)',
+                borderWidth: 1,
+            },
+            {
+                label: 'Collected',
+                data: [72000, 88000, 98000, 115000],
+                backgroundColor: 'rgba(154, 230, 180, 0.7)',
+                borderColor: 'rgba(154, 230, 180, 1)',
+                borderWidth: 1,
+            },
+        ],
+    },
+};
+export const Radar = {
+    args: {
+        type: 'radar',
+        labels: ['Coding Accuracy', 'Submission Speed', 'Denial Rate', 'Collection Rate', 'Documentation', 'Compliance'],
+        datasets: [
+            {
+                label: 'Current Period',
+                data: [85, 72, 60, 90, 78, 95],
+                borderColor: 'rgba(99, 179, 237, 1)',
+                backgroundColor: 'rgba(99, 179, 237, 0.25)',
+            },
+            {
+                label: 'Prior Period',
+                data: [70, 65, 55, 80, 70, 88],
+                borderColor: 'rgba(197, 160, 252, 1)',
+                backgroundColor: 'rgba(197, 160, 252, 0.2)',
+            },
+        ],
+    },
+};
+export const Doughnut = {
+    args: {
+        type: 'doughnut',
+        labels: ['Approved', 'Pending', 'Denied', 'Appealed'],
+        datasets: [
+            {
+                label: 'Claims',
+                data: [620, 140, 80, 35],
+                backgroundColor: [
+                    'rgba(154, 230, 180, 0.8)',
+                    'rgba(251, 211, 141, 0.8)',
+                    'rgba(252, 129, 129, 0.8)',
+                    'rgba(99, 179, 237, 0.8)',
+                ],
+                borderColor: [
+                    'rgba(154, 230, 180, 1)',
+                    'rgba(251, 211, 141, 1)',
+                    'rgba(252, 129, 129, 1)',
+                    'rgba(99, 179, 237, 1)',
+                ],
+                borderWidth: 1,
+            },
+        ],
+    },
+};

package/dist/src/stories/Total.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ title, total, colorTotal, colorTital, cardProps }: import("../components").TotalProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        title: string;
+        total: number;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LargeNumber: Story;
+export declare const WithColors: Story;
+export declare const NegativeTotal: Story;
+export declare const Zero: Story;
+export declare const Dashboard: Story;

package/dist/src/stories/Total.stories.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack } from '@chakra-ui/react';
+import { Total } from '../components';
+const meta = {
+    title: 'Data Display/Total',
+    component: Total,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        title: 'Total Claims',
+        total: 1284,
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Total Claims',
+        total: 1284,
+    },
+};
+export const LargeNumber = {
+    name: 'Large Number — animates in steps',
+    args: {
+        title: 'Revenue',
+        total: 1250000,
+    },
+};
+export const WithColors = {
+    name: 'With Custom Colors',
+    args: {
+        title: 'Approved',
+        total: 947,
+        colorTotal: 'green.500',
+        colorTital: 'green.400',
+    },
+};
+export const NegativeTotal = {
+    name: 'Negative / Decremented Value',
+    args: {
+        title: 'Outstanding Balance',
+        total: -340,
+        colorTotal: 'red.500',
+        colorTital: 'red.400',
+    },
+};
+export const Zero = {
+    args: {
+        title: 'Denied Claims',
+        total: 0,
+    },
+};
+export const Dashboard = {
+    name: 'Dashboard — Multiple Totals',
+    render: () => (_jsxs(HStack, { gap: 6, align: "stretch", children: [_jsx(Total, { title: "Submitted", total: 1284, colorTotal: "blue.400", colorTital: "blue.300" }), _jsx(Total, { title: "Approved", total: 947, colorTotal: "green.500", colorTital: "green.400" }), _jsx(Total, { title: "Pending", total: 210, colorTotal: "orange.400", colorTital: "orange.300" }), _jsx(Total, { title: "Denied", total: 127, colorTotal: "red.500", colorTital: "red.400" })] })),
+    args: {},
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.2.11",
+  "version": "0.2.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,6 +23,7 @@
     "@storybook/addon-themes": "^10.2.16",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.13.4",
+    "chart.js": "^4.5.1",
     "motion": "^12.34.0",
     "next": "^16.2.4",
     "next-themes": "^0.4.6",