@k3-universe/react-kit 0.0.27 → 0.0.29

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

@@ -1,32 +1,42 @@
-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'
+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()
+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)
+        const elapsed = Date.now() - start;
+        const pct = Math.min(100, Math.round((elapsed / total) * 100));
+        onProgress(pct);
         if (pct >= 100) {
-          clearInterval(iv)
+          clearInterval(iv);
           if (willFail) {
-            reject(new Error('Simulated upload error'))
+            reject(new Error('Simulated upload error'));
           } else {
-            resolve({ id: `${file.name}-${Date.now()}` })
+            resolve({ id: `${file.name}-${Date.now()}` });
           }
         }
-      }, 150)
-    })
-  }
+      }, 150);
+    });
+  };
 }
 
 const meta: Meta<typeof FormBuilder> = {
@@ -36,11 +46,11 @@ const meta: Meta<typeof FormBuilder> = {
     controls: { expanded: true },
     backgrounds: { disable: true },
   },
-}
+};
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof FormBuilder>
+type Story = StoryObj<typeof FormBuilder>;
 
 export const FileUploaderForm: Story = {
   name: 'File Uploader',
@@ -48,7 +58,8 @@ export const FileUploaderForm: Story = {
     sections: [
       {
         title: 'Attachments',
-        description: 'Demonstrates the FileUploader field integrated with FormBuilder',
+        description:
+          'Demonstrates the FileUploader field integrated with FormBuilder',
         variant: 'card',
         layout: 'grid',
         grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
@@ -113,7 +124,7 @@ export const FileUploaderForm: Story = {
       docs: [] as FileRecord[],
     },
     onSubmit: (data: unknown) => {
-      console.log('Submit (FileUploader form):', data)
+      console.log('Submit (FileUploader form):', data);
     },
     showActions: true,
   } satisfies Partial<FormBuilderProps>,
@@ -122,4 +133,4 @@ export const FileUploaderForm: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};

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

@@ -1,31 +1,31 @@
-import { useMemo } from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { useForm } from 'react-hook-form'
-import { FormBuilder } from '../../../index'
-import type { FormBuilderSectionConfig } from '../../../kit/builder/form/types'
+import { useMemo } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useForm } from 'react-hook-form';
+import { FormBuilder } from '../../../index';
+import type { FormBuilderSectionConfig } from '../../../kit/builder/form/types';
 
 interface SplitFormValues {
-  userId: string
-  firstName: string
-  lastName: string
-  email: string
-  accountType: 'individual' | 'business'
-  companyName?: string
+  userId: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  accountType: 'individual' | 'business';
+  companyName?: string;
   address: {
-    street: string
-    city: string
-    zip: string
-  }
-  marketingOptIn: boolean
-  preferredContactMethod: 'email' | 'phone'
-  phoneNumber?: string
-  newsletterTopics: string[]
-  complianceContactEmail?: string
-  eventsWebhookUrl?: string
-  smsOptIn: boolean
-  smsFrequency?: 'daily' | 'weekly' | 'monthly'
-  timezone: string
-  authorizedContacts: Array<{ contactId: string; contactName: string }>
+    street: string;
+    city: string;
+    zip: string;
+  };
+  marketingOptIn: boolean;
+  preferredContactMethod: 'email' | 'phone';
+  phoneNumber?: string;
+  newsletterTopics: string[];
+  complianceContactEmail?: string;
+  eventsWebhookUrl?: string;
+  smsOptIn: boolean;
+  smsFrequency?: 'daily' | 'weekly' | 'monthly';
+  timezone: string;
+  authorizedContacts: Array<{ contactId: string; contactName: string }>;
 }
 
 const generalInfoSections: FormBuilderSectionConfig<SplitFormValues>[] = [
@@ -113,7 +113,7 @@ const generalInfoSections: FormBuilderSectionConfig<SplitFormValues>[] = [
       },
     ],
   },
-]
+];
 
 const preferencesSections: FormBuilderSectionConfig<SplitFormValues>[] = [
   {
@@ -159,11 +159,13 @@ const preferencesSections: FormBuilderSectionConfig<SplitFormValues>[] = [
         label: 'Events webhook URL',
         type: 'text',
         placeholder: 'https://example.com/webhooks/events',
-        description: 'Provide a webhook to receive notifications about upcoming events.',
+        description:
+          'Provide a webhook to receive notifications about upcoming events.',
         dependencies: [
           {
             field: 'newsletterTopics',
-            condition: (value) => Array.isArray(value) && value.includes('events'),
+            condition: (value) =>
+              Array.isArray(value) && value.includes('events'),
             action: 'show',
           },
         ],
@@ -228,7 +230,8 @@ const preferencesSections: FormBuilderSectionConfig<SplitFormValues>[] = [
         label: 'Compliance contact email',
         type: 'email',
         placeholder: 'compliance@company.com',
-        description: 'Required for business accounts to receive compliance updates.',
+        description:
+          'Required for business accounts to receive compliance updates.',
         dependencies: [
           {
             field: 'accountType',
@@ -253,7 +256,8 @@ const preferencesSections: FormBuilderSectionConfig<SplitFormValues>[] = [
       {
         name: 'authorizedContacts',
         label: 'Authorized contacts',
-        description: 'Names remain editable while hidden IDs stay intact for submission.',
+        description:
+          'Names remain editable while hidden IDs stay intact for submission.',
         type: 'array',
         arrayLayout: 'table',
         defaultValue: [
@@ -278,7 +282,7 @@ const preferencesSections: FormBuilderSectionConfig<SplitFormValues>[] = [
       },
     ],
   },
-]
+];
 
 const SplitFormExample = () => {
   const form = useForm<SplitFormValues>({
@@ -309,15 +313,15 @@ const SplitFormExample = () => {
       ],
     },
     mode: 'onSubmit',
-  })
+  });
 
   const logSubmit = useMemo(
     () =>
       form.handleSubmit((values) => {
-        console.log('Story submit', values)
+        console.log('Story submit', values);
       }),
     [form],
-  )
+  );
 
   return (
     <div className="space-y-6">
@@ -336,7 +340,7 @@ const SplitFormExample = () => {
         onSubmit={async () => {
           /* handled by explicit button */
         }}
-        customActions={(
+        customActions={
           <button
             type="button"
             className="px-4 py-2 text-sm font-medium text-white bg-primary rounded-md"
@@ -344,11 +348,11 @@ const SplitFormExample = () => {
           >
             Save all sections
           </button>
-        )}
+        }
       />
     </div>
-  )
-}
+  );
+};
 
 const meta: Meta<typeof SplitFormExample> = {
   title: 'Kit/Builder/Form',
@@ -361,13 +365,13 @@ const meta: Meta<typeof SplitFormExample> = {
       },
     },
   },
-}
+};
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof SplitFormExample>
+type Story = StoryObj<typeof SplitFormExample>;
 
 export const SharedFormInstance: Story = {
   name: 'Shared form instance across sections',
   render: () => <SplitFormExample />,
-}
+};

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

@@ -1,5 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
+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',
@@ -8,11 +11,11 @@ const meta: Meta<typeof FormBuilder> = {
     controls: { expanded: true },
     backgrounds: { disable: true },
   },
-}
+};
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof FormBuilder>
+type Story = StoryObj<typeof FormBuilder>;
 
 export const Pickers: Story = {
   name: 'Pickers (Date, Date Range, Month, Month Range)',
@@ -20,7 +23,8 @@ export const Pickers: Story = {
     sections: [
       {
         title: 'Pickers',
-        description: 'Showcase of DatePicker, DateRangePicker, MonthPicker, and MonthRangePicker via FormBuilder fields',
+        description:
+          'Showcase of DatePicker, DateRangePicker, MonthPicker, and MonthRangePicker via FormBuilder fields',
         variant: 'card',
         layout: 'grid',
         grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
@@ -59,7 +63,7 @@ export const Pickers: Story = {
       },
     ],
     onSubmit: (data: unknown) => {
-      console.log('Submit (pickers):', data)
+      console.log('Submit (pickers):', data);
     },
     showActions: true,
   } satisfies Partial<FormBuilderProps>,
@@ -68,4 +72,4 @@ export const Pickers: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};

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

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
-import { createSection, createField, commonValidations } from '../../../kit/builder/form/utils';
+import {
+  createSection,
+  createField,
+  commonValidations,
+} from '../../../kit/builder/form/utils';
 
 const meta: Meta<typeof FormBuilder> = {
   title: 'Kit/Builder/Form',
@@ -21,7 +25,7 @@ export const SimpleExample: Story = {
     const handleSubmit = (data: unknown) => {
       console.log('Form submitted:', data);
     };
-  
+
     const sections = [
       createSection.card('Contact Information', [
         createField.text('name', 'Full Name', {
@@ -65,17 +69,22 @@ export const SimpleExample: Story = {
         }),
       ]),
     ];
-  
+
     return (
       <div className="max-w-2xl mx-auto p-6">
         <div className="mb-6">
           <h1 className="text-2xl font-bold text-gray-900">Contact Us</h1>
           <p className="text-gray-600 mt-2">
-            Fill out the form below and we'll get back to you as soon as possible.
+            Fill out the form below and we'll get back to you as soon as
+            possible.
           </p>
         </div>
-  
-        <FormBuilder sections={sections} onSubmit={handleSubmit} className="space-y-6" />
+
+        <FormBuilder
+          sections={sections}
+          onSubmit={handleSubmit}
+          className="space-y-6"
+        />
       </div>
     );
   },

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

@@ -1,5 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder'
+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',
@@ -8,11 +11,11 @@ const meta: Meta<typeof FormBuilder> = {
     controls: { expanded: true },
     backgrounds: { disable: true },
   },
-}
+};
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof FormBuilder>
+type Story = StoryObj<typeof FormBuilder>;
 
 export const TimeFields: Story = {
   name: 'Time fields (12/24h, precision)',
@@ -20,7 +23,8 @@ export const TimeFields: Story = {
     sections: [
       {
         title: 'Time',
-        description: 'TimePicker fields with different precisions and hour cycles',
+        description:
+          'TimePicker fields with different precisions and hour cycles',
         variant: 'card',
         layout: 'grid',
         grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
@@ -52,7 +56,7 @@ export const TimeFields: Story = {
       },
     ],
     onSubmit: (data: unknown) => {
-      console.log('Submit (time):', data)
+      console.log('Submit (time):', data);
     },
     showActions: true,
   } satisfies Partial<FormBuilderProps>,
@@ -61,4 +65,4 @@ export const TimeFields: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};

package/src/stories/kit/builder/Page.stories.tsx

@@ -1,7 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Page, type PageAction } from '../../../kit/builder/page';
 import { Button } from '../../../shadcn/ui/button';
-import { Plus, Download, MoreHorizontal, RefreshCw, Trash2 } from 'lucide-react';
+import {
+  Plus,
+  Download,
+  MoreHorizontal,
+  RefreshCw,
+  Trash2,
+} from 'lucide-react';
 
 const meta: Meta<typeof Page> = {
   title: 'kit/Builder/Page',
@@ -15,7 +21,11 @@ type Story = StoryObj<typeof Page>;
 export const Basic: Story = {
   name: 'Basic',
   render: () => (
-    <Page title="Orders" subtitle="Manage and review customer orders" containerWidth="lg">
+    <Page
+      title="Orders"
+      subtitle="Manage and review customer orders"
+      containerWidth="lg"
+    >
       <div className="rounded-md border bg-card p-6 text-sm text-muted-foreground">
         Page content goes here.
       </div>
@@ -49,15 +59,29 @@ export const WithActions: Story = {
           leftIcon: <MoreHorizontal className="h-4 w-4" />,
         },
         items: [
-          { label: 'Refresh', leftIcon: <RefreshCw className="h-4 w-4" />, onSelect: () => console.log('refresh') },
+          {
+            label: 'Refresh',
+            leftIcon: <RefreshCw className="h-4 w-4" />,
+            onSelect: () => console.log('refresh'),
+          },
           { type: 'separator' },
-          { label: 'Delete selected', leftIcon: <Trash2 className="h-4 w-4" />, destructive: true, onSelect: () => console.log('delete') },
+          {
+            label: 'Delete selected',
+            leftIcon: <Trash2 className="h-4 w-4" />,
+            destructive: true,
+            onSelect: () => console.log('delete'),
+          },
         ],
       },
     ];
 
     return (
-      <Page title="Orders" subtitle="Manage and review customer orders" actions={actions} containerWidth="xl">
+      <Page
+        title="Orders"
+        subtitle="Manage and review customer orders"
+        actions={actions}
+        containerWidth="xl"
+      >
         <div className="rounded-md border bg-card p-6 text-sm text-muted-foreground">
           Content with actions.
         </div>
@@ -76,7 +100,9 @@ export const WithFooter: Story = {
       footerLeft={<span className="text-xs">Last updated 2 hours ago</span>}
       footerRight={
         <div className="flex gap-2">
-          <Button variant="outline" onClick={() => console.log('cancel')}>Cancel</Button>
+          <Button variant="outline" onClick={() => console.log('cancel')}>
+            Cancel
+          </Button>
           <Button onClick={() => console.log('save')}>Save changes</Button>
         </div>
       }

package/src/stories/kit/builder/Section.stories.tsx

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import SectionBuilder from '../../../kit/builder/section/SectionBuilder';
-import type { SectionLeaf, SectionNode } from '../../../kit/builder/section/types';
+import type {
+  SectionLeaf,
+  SectionNode,
+} from '../../../kit/builder/section/types';
 
 const meta: Meta<typeof SectionBuilder> = {
   title: 'Kit/Builder/Section',
@@ -35,8 +38,16 @@ export const TabsLayout: Story = {
               layout: 'grid',
               grid: { cols: 1, mdCols: 12, gap: 'gap-4' },
               children: [
-                { key: 't1', content: demoBox('Overview content A'), span: { md: 6 } },
-                { key: 't2', content: demoBox('Overview content B'), span: { md: 6 } },
+                {
+                  key: 't1',
+                  content: demoBox('Overview content A'),
+                  span: { md: 6 },
+                },
+                {
+                  key: 't2',
+                  content: demoBox('Overview content B'),
+                  span: { md: 6 },
+                },
               ],
             },
           },
@@ -55,9 +66,21 @@ export const TabsLayout: Story = {
                   layout: 'grid',
                   grid: { cols: 1, mdCols: 12 },
                   children: [
-                    { key: 'd1', content: demoBox('Detail 1'), span: { md: 4 } },
-                    { key: 'd2', content: demoBox('Detail 2'), span: { md: 4 } },
-                    { key: 'd3', content: demoBox('Detail 3'), span: { md: 4 } },
+                    {
+                      key: 'd1',
+                      content: demoBox('Detail 1'),
+                      span: { md: 4 },
+                    },
+                    {
+                      key: 'd2',
+                      content: demoBox('Detail 2'),
+                      span: { md: 4 },
+                    },
+                    {
+                      key: 'd3',
+                      content: demoBox('Detail 3'),
+                      span: { md: 4 },
+                    },
                   ],
                 } as unknown as SectionNode,
               ],
@@ -74,7 +97,11 @@ export default meta;
 
 function demoBox(text: string, className?: string) {
   return (
-    <div className={['rounded border p-3 text-sm', className].filter(Boolean).join(' ')}>
+    <div
+      className={['rounded border p-3 text-sm', className]
+        .filter(Boolean)
+        .join(' ')}
+    >
       {text}
     </div>
   );
@@ -156,7 +183,13 @@ export const FlexLayout: Story = {
         title: 'Horizontal flex with wrap',
         variant: 'card',
         layout: 'flex',
-        flex: { direction: 'row', wrap: true, gap: 'gap-3', align: 'start', justify: 'start' },
+        flex: {
+          direction: 'row',
+          wrap: true,
+          gap: 'gap-3',
+          align: 'start',
+          justify: 'start',
+        },
         children: [
           { key: 'f1', content: demoBox('Item 1'), className: 'w-56' },
           { key: 'f2', content: demoBox('Item 2'), className: 'w-56' },
@@ -219,14 +252,28 @@ export const CustomLeafRenderer: Story = {
         layout: 'grid',
         grid: { cols: 1, mdCols: 12 },
         children: [
-          { key: 'x', label: 'Name', labelLayout: 'inline', content: 'Jane Doe', span: { md: 6 } },
-          { key: 'y', label: 'Email', labelLayout: 'inline', content: 'jane@example.com', span: { md: 6 } },
+          {
+            key: 'x',
+            label: 'Name',
+            labelLayout: 'inline',
+            content: 'Jane Doe',
+            span: { md: 6 },
+          },
+          {
+            key: 'y',
+            label: 'Email',
+            labelLayout: 'inline',
+            content: 'jane@example.com',
+            span: { md: 6 },
+          },
         ],
       },
     ] satisfies SectionNode[],
     renderLeaf: (leaf) => (
       <div className="rounded border p-3">
-        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">{leaf.label ?? 'Field'}</div>
+        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
+          {leaf.label ?? 'Field'}
+        </div>
         <div className="text-sm">{leaf.content}</div>
       </div>
     ),