@k3-universe/react-kit 0.0.12 → 0.0.13

package/src/stories/FileUploader.stories.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { FileUploader } from '../index';
+import type { FileRecord } from '../kit/components/fileuploader/types';
+
+// ---- helpers
+function isImage(name?: string, type?: string) {
+  const t = (type || '').toLowerCase();
+  const ext = (name?.split('.')?.pop() || '').toLowerCase();
+  return t.startsWith('image/') || ['png','jpg','jpeg','webp','gif','bmp','svg','heic','heif'].includes(ext);
+}
+
+function mockUploaderFactory(options?: { minMs?: number; maxMs?: number; failRate?: number }) {
+  const minMs = options?.minMs ?? 800;
+  const maxMs = options?.maxMs ?? 1800;
+  const failRate = options?.failRate ?? 0;
+  return async (file: File, onProgress: (p: number) => void): Promise<Partial<FileRecord>> => {
+    const willFail = Math.random() < failRate;
+    const total = Math.floor(Math.random() * (maxMs - minMs + 1)) + minMs;
+    const start = Date.now();
+    return new Promise((resolve, reject) => {
+      const iv = window.setInterval(() => {
+        const elapsed = Date.now() - start;
+        const pct = Math.min(100, Math.round((elapsed / total) * 100));
+        onProgress(pct);
+        if (pct >= 100) {
+          window.clearInterval(iv);
+          if (willFail) {
+            reject(new Error('Simulated upload error'));
+          } else {
+            // Simulate server response: echo a URL
+            const url = isImage(file.name, file.type)
+              ? URL.createObjectURL(file)
+              : undefined;
+            resolve({ url, id: `${file.name}-${Date.now()}` });
+          }
+        }
+      }, 150);
+    });
+  };
+}
+
+const meta: Meta<typeof FileUploader> = {
+  title: 'Kit/Components/FileUploader',
+  component: FileUploader,
+  parameters: {
+    centered: false,
+    docs: {
+      description: {
+        component:
+          'Upload files with drag-and-drop, thumbnails, progress, success/error indicators, download and remove actions. Uses react-dropzone and shadcn/ui.',
+      },
+    },
+  },
+  argTypes: {
+    onRetry: { action: 'onRetry' },
+    onRetryAll: { action: 'onRetryAll' },
+  },
+  args: {
+    multiple: true,
+    withDownload: true,
+    layout: 'grid',
+    placeholder: 'Drag and drop files here, or click Select files',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof FileUploader>;
+
+export const ImagesGrid: Story = {
+  name: 'Images • Grid layout',
+  args: {
+    accept: { 'image/*': [] },
+    maxFiles: 8,
+    uploader: mockUploaderFactory({ minMs: 700, maxMs: 1600, failRate: 0 }),
+    defaultValue: [
+      {
+        id: 'p1',
+        name: 'mountain.jpg',
+        url: 'https://picsum.photos/seed/mountain/600/400',
+        size: 123456,
+        type: 'image/jpeg',
+        status: 'success',
+        progress: 100,
+      },
+      {
+        id: 'p2',
+        name: 'forest.jpg',
+        url: 'https://picsum.photos/seed/forest/600/400',
+        size: 234567,
+        type: 'image/jpeg',
+        status: 'success',
+        progress: 100,
+      },
+    ] satisfies FileRecord[],
+  },
+};
+
+export const MixedList: Story = {
+  name: 'Mixed files • List layout',
+  args: {
+    layout: 'list',
+    multiple: true,
+    maxFiles: 5,
+    uploader: mockUploaderFactory({ minMs: 900, maxMs: 2000, failRate: 0.1 }),
+  },
+};
+
+export const SingleFile: Story = {
+  name: 'Single file',
+  args: {
+    multiple: false,
+    maxFiles: 1,
+    accept: undefined,
+    uploader: mockUploaderFactory({ failRate: 0 }),
+    layout: 'grid',
+  },
+};
+
+export const ErrorSimulation: Story = {
+  name: 'Error simulation (50% fail)',
+  args: {
+    multiple: true,
+    uploader: mockUploaderFactory({ minMs: 600, maxMs: 1200, failRate: 0.5 }),
+    maxFiles: 6,
+  },
+};
+
+export const RetryAllDemo: Story = {
+  name: 'Retry all failed (demo)',
+  args: {
+    multiple: true,
+    uploader: mockUploaderFactory({ minMs: 600, maxMs: 1200, failRate: 0.5 }),
+    maxFiles: 6,
+    layout: 'list',
+  },
+};
+
+export const WithDefaultServerFiles: Story = {
+  name: 'Edit mode with default server files',
+  args: {
+    multiple: true,
+    layout: 'list',
+    uploader: mockUploaderFactory({ failRate: 0 }),
+    defaultValue: [
+      {
+        id: 'doc-1',
+        name: 'contract.pdf',
+        size: 987654,
+        type: 'application/pdf',
+        // no url -> will render as icon
+        status: 'success',
+        progress: 100,
+      },
+      {
+        id: 'img-1',
+        name: 'avatar.png',
+        url: 'https://picsum.photos/seed/avatar/300/300',
+        size: 54321,
+        type: 'image/png',
+        status: 'success',
+        progress: 100,
+      },
+    ] satisfies FileRecord[],
+  },
+};

package/src/stories/kit/builder/Form.ArrayLayouts.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
 
 const meta: Meta<typeof FormBuilder> = {
-  title: 'Kit/Builder/Form (Array Layouts)',
+  title: 'Kit/Builder/Form',
   component: FormBuilder,
   parameters: {
     controls: { expanded: true },

package/src/stories/kit/builder/Form.Autocomplete.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
 
 const meta: Meta<typeof FormBuilder> = {
-  title: 'Kit/Builder/Form Autocomplete',
+  title: 'Kit/Builder/Form',
   component: FormBuilder,
   parameters: {
     controls: { expanded: true },
@@ -28,7 +28,7 @@ const CITY_OPTIONS = [
 ]
 
 export const SingleAutocomplete: Story = {
-  name: 'Single select (clearable + custom allowed)',
+  name: 'Autocomplete - Single select (clearable + custom allowed)',
   args: {
     sections: [
       {
@@ -89,7 +89,7 @@ async function loadSelectedByIds(values: Array<string | number>) {
 }
 
 export const ServerEditPrefilledByIds: Story = {
-  name: 'Server edit page (prefilled IDs)',
+  name: 'Autocomplete - Server edit page (prefilled IDs)',
   args: {
     sections: [
       {
@@ -135,7 +135,7 @@ export const ServerEditPrefilledByIds: Story = {
 }
 
 export const MultiAutocompleteChips: Story = {
-  name: 'Multi select with chips',
+  name: 'Autocomplete - Multi select with chips',
   args: {
     sections: [
       {
@@ -172,7 +172,7 @@ export const MultiAutocompleteChips: Story = {
 }
 
 export const TaggingAutocomplete: Story = {
-  name: 'Tagging (no options, custom values)',
+  name: 'Autocomplete - Tagging (no options, custom values)',
   args: {
     sections: [
       {

package/src/stories/kit/builder/Form.DateTime.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
 
 const meta: Meta<typeof FormBuilder> = {
-  title: 'Kit/Builder/Form (DateTime)',
+  title: 'Kit/Builder/Form',
   component: FormBuilder,
   parameters: {
     controls: { expanded: true },

package/src/stories/kit/builder/Form.Files.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
+import type { FileRecord } from '../../../kit/components/fileuploader/types'
+
+// Simple mocked uploader with progress + optional failure
+function mockUploader(options?: { minMs?: number; maxMs?: number; failRate?: number }) {
+  const minMs = options?.minMs ?? 700
+  const maxMs = options?.maxMs ?? 1600
+  const failRate = options?.failRate ?? 0.15
+  return async (file: File, onProgress: (pct: number) => void): Promise<Partial<FileRecord>> => {
+    const willFail = Math.random() < failRate
+    const total = Math.floor(Math.random() * (maxMs - minMs + 1)) + minMs
+    const start = Date.now()
+    return new Promise((resolve, reject) => {
+      const iv = setInterval(() => {
+        const elapsed = Date.now() - start
+        const pct = Math.min(100, Math.round((elapsed / total) * 100))
+        onProgress(pct)
+        if (pct >= 100) {
+          clearInterval(iv)
+          if (willFail) {
+            reject(new Error('Simulated upload error'))
+          } else {
+            resolve({ id: `${file.name}-${Date.now()}` })
+          }
+        }
+      }, 150)
+    })
+  }
+}
+
+const meta: Meta<typeof FormBuilder> = {
+  title: 'Kit/Builder/Form',
+  component: FormBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof FormBuilder>
+
+export const FileUploaderForm: Story = {
+  name: 'File Uploader',
+  args: {
+    sections: [
+      {
+        title: 'Attachments',
+        description: 'Demonstrates the FileUploader field integrated with FormBuilder',
+        variant: 'card',
+        layout: 'grid',
+        grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
+        fields: [
+          {
+            name: 'images',
+            label: 'Product Images',
+            type: 'file',
+            gridCols: 2,
+            required: true,
+            // FileUploader pass-through
+            fileMultiple: true,
+            fileMaxFiles: 6,
+            fileAccept: { 'image/*': [] },
+            fileLayout: 'grid',
+            fileWithDownload: true,
+            fileUploader: mockUploader({ failRate: 0.1 }),
+            validation: {
+              minItems: { value: 1, message: 'Please upload at least 1 image' },
+              maxItems: { value: 6, message: 'Maximum 6 images allowed' },
+            },
+          },
+          {
+            name: 'docs',
+            label: 'Documents',
+            type: 'file',
+            gridCols: 2,
+            fileMultiple: true,
+            fileMaxFiles: 4,
+            fileAccept: { 'application/pdf': ['.pdf'], 'text/plain': ['.txt'] },
+            fileLayout: 'list',
+            fileWithDownload: false,
+            fileUploader: mockUploader({ failRate: 0.25 }),
+            validation: {
+              maxItems: { value: 4, message: 'Up to 4 documents' },
+            },
+          },
+        ],
+      },
+    ],
+    defaultValues: {
+      images: [
+        {
+          id: 'img-1',
+          name: 'existing-1.jpg',
+          url: 'https://picsum.photos/seed/fb-uploader-1/600/400',
+          type: 'image/jpeg',
+          size: 200000,
+          status: 'success',
+          progress: 100,
+        },
+        {
+          id: 'img-2',
+          name: 'existing-2.jpg',
+          url: 'https://picsum.photos/seed/fb-uploader-2/600/400',
+          type: 'image/jpeg',
+          size: 180000,
+          status: 'success',
+          progress: 100,
+        },
+      ] satisfies FileRecord[],
+      docs: [] as FileRecord[],
+    },
+    onSubmit: (data: unknown) => {
+      console.log('Submit (FileUploader form):', data)
+    },
+    showActions: true,
+  } satisfies Partial<FormBuilderProps>,
+  render: (args) => (
+    <div className="max-w-5xl mx-auto p-6">
+      <FormBuilder {...(args as FormBuilderProps)} />
+    </div>
+  ),
+}

package/src/stories/kit/builder/Form.Time.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
 
 const meta: Meta<typeof FormBuilder> = {
-  title: 'Kit/Builder/Form (Time)',
+  title: 'Kit/Builder/Form',
   component: FormBuilder,
   parameters: {
     controls: { expanded: true },