@vrobots/storybook 0.1.57 → 0.1.59

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.1.57",
+    "version": "0.1.59",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
     "dependencies": {
         "@chakra-ui/react": "^3.32.0",
         "@emotion/react": "^11.14.0",
-        "@storybook/addon-themes": "^10.2.6",
+        "@storybook/addon-themes": "^10.2.16",
         "axios": "^1.13.4",
         "motion": "^12.34.0",
         "next-themes": "^0.4.6",
@@ -34,12 +34,12 @@
         "react-icons": "^5.6.0"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^5.0.0",
+        "@chromatic-com/storybook": "^5.0.1",
         "@eslint/js": "^9.39.1",
-        "@storybook/addon-a11y": "^10.2.6",
-        "@storybook/addon-docs": "^10.2.6",
-        "@storybook/addon-vitest": "^10.2.6",
-        "@storybook/react-vite": "^10.2.6",
+        "@storybook/addon-a11y": "^10.2.16",
+        "@storybook/addon-docs": "^10.2.16",
+        "@storybook/addon-vitest": "^10.2.16",
+        "@storybook/react-vite": "^10.2.16",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
@@ -50,11 +50,11 @@
         "eslint": "^9.39.1",
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
-        "eslint-plugin-storybook": "^10.2.6",
+        "eslint-plugin-storybook": "^10.2.16",
         "globals": "^16.5.0",
         "playwright": "^1.58.1",
         "rimraf": "^6.1.2",
-        "storybook": "^10.2.6",
+        "storybook": "^10.2.16",
         "ts-node": "^10.9.2",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.46.4",

package/dist/src/components/Breadcrumbs.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { HStack, Link, Text } from "@chakra-ui/react";
-import { useSelectedColorSchema } from "../hooks/useSelectedColorSchema";
 export const Breadcrumbs = React.forwardRef(({ breadcrumbs }, ref) => {
-    const { color } = useSelectedColorSchema('blue');
     if (!!breadcrumbs) {
         const crumbs = breadcrumbs.map(({ title, nav, color: itemColor }, key) => {
             if (!!nav) {
-                return (_jsxs(HStack, { children: [_jsx(Link, { href: nav, color: itemColor || color, whiteSpace: 'nowrap', wordBreak: 'break-word', fontSize: 'sm', truncate: true, children: title }), _jsx(Text, { ml: 2, mr: 2, fontSize: 'sm', children: ">" })] }, `${title}-${key}`));
+                return (_jsxs(HStack, { children: [_jsx(Link, { href: nav, color: itemColor || 'blue.500', whiteSpace: 'nowrap', wordBreak: 'break-word', fontSize: 'sm', truncate: true, children: title }), _jsx(Text, { ml: 2, mr: 2, fontSize: 'sm', children: ">" })] }, `${title}-${key}`));
             }
-            return (_jsx(Text, { whiteSpace: 'nowrap', wordBreak: 'break-word', color: color || 'gray.500', fontSize: 'sm', truncate: true, children: title }, `${title}-${key}`));
+            return (_jsx(Text, { whiteSpace: 'nowrap', wordBreak: 'break-word', color: 'gray.500', fontSize: 'sm', truncate: true, children: title }, `${title}-${key}`));
         });
         return (_jsx(HStack, { width: '100%', flex: `0 1 auto`, ref: ref, children: crumbs }));
     }

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

@@ -0,0 +1,12 @@
+import { CardRootProps } from "@chakra-ui/react";
+export interface IFileUploaderProps extends CardRootProps {
+    title?: string;
+    description?: string;
+    buttonLabel?: string;
+    helperText?: string;
+    accept?: string;
+    multiple?: boolean;
+    onFilesSelected?: (files: File[]) => void;
+}
+declare const FileUploader: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, ...props }: IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
+export default FileUploader;

package/dist/src/components/form/FileUploader.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, Button, Card, List, Text } from "@chakra-ui/react";
+const parseAcceptRules = (accept) => {
+    if (!accept)
+        return [];
+    return accept
+        .split(",")
+        .map((rule) => rule.trim().toLowerCase())
+        .filter(Boolean);
+};
+const fileMatchesRule = (file, rule) => {
+    if (rule === "*/*")
+        return true;
+    if (rule.endsWith("/*")) {
+        const mimeFamily = rule.replace("/*", "");
+        return file.type.toLowerCase().startsWith(`${mimeFamily}/`);
+    }
+    if (rule.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(rule);
+    }
+    return file.type.toLowerCase() === rule;
+};
+const filterFilesByAccept = (files, accept) => {
+    const rules = parseAcceptRules(accept);
+    if (!rules.length)
+        return files;
+    return files.filter((file) => rules.some((rule) => fileMatchesRule(file, rule)));
+};
+const FileUploader = ({ title, description, buttonLabel, helperText, accept, multiple = true, onFilesSelected, ...props }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [files, setFiles] = useState([]);
+    const fileInputRef = useRef(null);
+    const handleFiles = (nextFiles) => {
+        const acceptedFiles = filterFilesByAccept(nextFiles, accept);
+        const normalizedFiles = multiple ? acceptedFiles : acceptedFiles.slice(0, 1);
+        setFiles(normalizedFiles);
+        onFilesSelected?.(normalizedFiles);
+    };
+    const handleFileInputChange = (event) => {
+        const selectedFiles = Array.from(event.target.files ?? []);
+        handleFiles(selectedFiles);
+        event.target.value = "";
+    };
+    const handleDrag = (isDragging) => (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(isDragging);
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(false);
+        const droppedFiles = Array.from(event.dataTransfer.files ?? []);
+        handleFiles(droppedFiles);
+    };
+    return (_jsx(Card.Root, { ...props, children: _jsxs(Card.Body, { children: [_jsx(Card.Title, { children: title || "Upload Files" }), !!description && _jsx(Card.Description, { children: description }), _jsxs(Box, { mt: 4, p: 6, borderWidth: "2px", borderStyle: "dashed", borderColor: isDragging ? "teal.500" : "border.emphasized", borderRadius: "md", bg: isDragging ? "teal.subtle" : "bg.muted", textAlign: "center", transition: "background 0.2s ease, border-color 0.2s ease", onDragEnter: handleDrag(true), onDragOver: handleDrag(true), onDragLeave: handleDrag(false), onDrop: handleDrop, children: [_jsx(Text, { fontWeight: "medium", children: "Drag and drop files here" }), _jsx(Text, { fontSize: "sm", color: "fg.muted", mt: 1, children: "or click the button below to browse from your device" }), _jsx("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept, multiple: multiple, onChange: handleFileInputChange }), _jsx(Button, { mt: 4, onClick: () => fileInputRef.current?.click(), children: buttonLabel || "Choose Files" }), !!helperText && (_jsx(Text, { fontSize: "xs", color: "fg.muted", mt: 3, children: helperText }))] }), files.length > 0 && (_jsxs(Box, { mt: 4, children: [_jsx(Text, { fontSize: "sm", fontWeight: "medium", mb: 2, children: "Selected Files" }), _jsx(List.Root, { gap: "1", children: files.map((file) => (_jsx(List.Item, { children: file.name }, `${file.name}-${file.size}`))) })] }))] }) }));
+};
+export default FileUploader;

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

@@ -1,8 +1,10 @@
 export * from "./Login";
 export * from "./SecondFactorAuth";
+export * from "./FileUploader";
 declare const Form: {
     (): null;
     Login: ({ title, description, onLogin, ...props }: import("./Login").ILoginProps) => import("react/jsx-runtime").JSX.Element;
     SecondFactorAuth: ({ title, description, onSecondFactorAuth, onResendAuthCode, ...props }: import("./SecondFactorAuth").ISecondFactorAuthProps) => import("react/jsx-runtime").JSX.Element;
+    FileUploader: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, ...props }: import("./FileUploader").IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Form;

package/dist/src/components/form/index.js

@@ -1,8 +1,11 @@
 import Login from "./Login";
 import SecondFactorAuth from "./SecondFactorAuth";
+import FileUploader from "./FileUploader";
 export * from "./Login";
 export * from "./SecondFactorAuth";
+export * from "./FileUploader";
 const Form = () => null;
 Form.Login = Login;
 Form.SecondFactorAuth = SecondFactorAuth;
+Form.FileUploader = FileUploader;
 export default Form;

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

@@ -14,4 +14,5 @@ export * from './Sidebar';
 export * from './Timeline';
 export * from './form/Login';
 export * from './form/SecondFactorAuth';
+export * from './form/FileUploader';
 export { default as Form } from './form';

package/dist/src/components/index.js

@@ -14,4 +14,5 @@ export * from './Sidebar';
 export * from './Timeline';
 export * from './form/Login';
 export * from './form/SecondFactorAuth';
+export * from './form/FileUploader';
 export { default as Form } from './form';

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, ...props }: import("../components").IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        title: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Component: Story;

package/dist/src/stories/FileUploader.stories.js

@@ -0,0 +1,24 @@
+import { Form } from '../components';
+const meta = {
+    title: 'Forms/FileUploader',
+    component: Form.FileUploader,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        title: 'File Uploader',
+    }
+};
+export default meta;
+export const Component = {
+    args: {
+        title: 'Upload Files',
+        description: 'Drag and drop files in the area below, or choose files from your device.',
+        buttonLabel: 'Browse Files',
+        helperText: 'Accepted: image/*, .pdf',
+        accept: 'image/*',
+        multiple: true,
+        onFilesSelected: (files) => console.log(files),
+    }
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.1.57",
+  "version": "0.1.59",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@chakra-ui/react": "^3.32.0",
     "@emotion/react": "^11.14.0",
-    "@storybook/addon-themes": "^10.2.6",
+    "@storybook/addon-themes": "^10.2.16",
     "axios": "^1.13.4",
     "motion": "^12.34.0",
     "next-themes": "^0.4.6",
@@ -34,12 +34,12 @@
     "react-icons": "^5.6.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.0",
+    "@chromatic-com/storybook": "^5.0.1",
     "@eslint/js": "^9.39.1",
-    "@storybook/addon-a11y": "^10.2.6",
-    "@storybook/addon-docs": "^10.2.6",
-    "@storybook/addon-vitest": "^10.2.6",
-    "@storybook/react-vite": "^10.2.6",
+    "@storybook/addon-a11y": "^10.2.16",
+    "@storybook/addon-docs": "^10.2.16",
+    "@storybook/addon-vitest": "^10.2.16",
+    "@storybook/react-vite": "^10.2.16",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
@@ -50,11 +50,11 @@
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^10.2.6",
+    "eslint-plugin-storybook": "^10.2.16",
     "globals": "^16.5.0",
     "playwright": "^1.58.1",
     "rimraf": "^6.1.2",
-    "storybook": "^10.2.6",
+    "storybook": "^10.2.16",
     "ts-node": "^10.9.2",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",