@k3-universe/react-kit 0.0.28 → 0.0.30

package/src/stories/kit/builder/DataTable.Basic.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import type React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { type ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef } from '@tanstack/react-table';
 import { DataTable } from '../../../kit/builder/data-table';
 
 // Simple type for demo
@@ -33,9 +33,19 @@ const columns: ColumnDef<Person>[] = [
 ];
 
 const data: Person[] = [
-  { id: '1', name: 'Alice Johnson', email: 'alice@example.com', status: 'active' },
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    status: 'active',
+  },
   { id: '2', name: 'Bob Smith', email: 'bob@example.com', status: 'inactive' },
-  { id: '3', name: 'Carol White', email: 'carol@example.com', status: 'active' },
+  {
+    id: '3',
+    name: 'Carol White',
+    email: 'carol@example.com',
+    status: 'active',
+  },
 ];
 
 const meta: Meta<typeof DataTable<Person, unknown>> = {

package/src/stories/kit/builder/DataTable.Filters.stories.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import type React from 'react';
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { type ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef } from '@tanstack/react-table';
 import { DataTable } from '../../../kit/builder/data-table';
 import { createSection, createField } from '../../../kit/builder/form';
 import { toast } from 'sonner';
@@ -16,7 +17,11 @@ const columns: ColumnDef<Order>[] = [
   { accessorKey: 'id', header: 'Order #' },
   { accessorKey: 'customer', header: 'Customer' },
   { accessorKey: 'status', header: 'Status' },
-  { accessorKey: 'total', header: 'Total', cell: ({ getValue }) => `$${(getValue() as number).toFixed(2)}` },
+  {
+    accessorKey: 'total',
+    header: 'Total',
+    cell: ({ getValue }) => `$${(getValue() as number).toFixed(2)}`,
+  },
 ];
 
 const allData: Order[] = [
@@ -28,15 +33,19 @@ const allData: Order[] = [
 ];
 
 const filterSections = [
-  createSection.card('Find orders', [
-    createField.text('customer', 'Customer'),
-    createField.select('status', 'Status', [
-      { label: 'Any', value: null },
-      { label: 'Pending', value: 'pending' },
-      { label: 'Paid', value: 'paid' },
-      { label: 'Shipped', value: 'shipped' },
-    ]),
-  ], { grid: { cols: 3 } }),
+  createSection.card(
+    'Find orders',
+    [
+      createField.text('customer', 'Customer'),
+      createField.select('status', 'Status', [
+        { label: 'Any', value: null },
+        { label: 'Pending', value: 'pending' },
+        { label: 'Paid', value: 'paid' },
+        { label: 'Shipped', value: 'shipped' },
+      ]),
+    ],
+    { grid: { cols: 3 } },
+  ),
 ];
 
 const meta: Meta<typeof DataTable<Order, unknown>> = {
@@ -53,7 +62,11 @@ export const WithFilters: Story = {
     const [values, setValues] = useState<Record<string, unknown>>({});
 
     const filtered = allData.filter((o) => {
-      const byCustomer = values.customer ? o.customer.toLowerCase().includes(String(values.customer).toLowerCase()) : true;
+      const byCustomer = values.customer
+        ? o.customer
+            .toLowerCase()
+            .includes(String(values.customer).toLowerCase())
+        : true;
       const byStatus = values.status ? o.status === values.status : true;
       return byCustomer && byStatus;
     });
@@ -68,7 +81,16 @@ export const WithFilters: Story = {
           formFilters={filterSections}
           formFilterValues={values}
           onFormFilterChange={setValues}
-          actions={[{ key: 'export', label: 'Export', variant: 'outline', onClick: () => { toast.info('Export...') } }]}
+          actions={[
+            {
+              key: 'export',
+              label: 'Export',
+              variant: 'outline',
+              onClick: () => {
+                toast.info('Export...');
+              },
+            },
+          ]}
         />
       </div>
     );

package/src/stories/kit/builder/DataTable.Pagination.stories.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import type React from 'react';
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { type ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef } from '@tanstack/react-table';
 import { DataTable } from '../../../kit/builder/data-table';
 
 interface Person {

package/src/stories/kit/builder/DataTable.SelectionAndActions.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import type React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { type ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef } from '@tanstack/react-table';
 import { Trash2, Plus } from 'lucide-react';
 import { DataTable } from '../../../kit/builder/data-table';
 import { toast } from 'sonner';
@@ -13,7 +13,13 @@ interface Item {
 
 const columns: ColumnDef<Item>[] = [
   { accessorKey: 'name', header: 'Item' },
-  { accessorKey: 'price', header: 'Price', cell: ({ getValue }) => <span className="tabular-nums">${(getValue() as number).toFixed(2)}</span> },
+  {
+    accessorKey: 'price',
+    header: 'Price',
+    cell: ({ getValue }) => (
+      <span className="tabular-nums">${(getValue() as number).toFixed(2)}</span>
+    ),
+  },
 ];
 
 const data: Item[] = [
@@ -43,7 +49,15 @@ export const SelectableWithActions: Story = {
         showStandardActions
         onRefresh={() => new Promise((r) => setTimeout(r, 800))}
         actions={[
-          { key: 'create', label: 'New Item', icon: <Plus className="h-4 w-4" />, variant: 'outline', onClick: () => { toast.info('Create clicked') } },
+          {
+            key: 'create',
+            label: 'New Item',
+            icon: <Plus className="h-4 w-4" />,
+            variant: 'outline',
+            onClick: () => {
+              toast.info('Create clicked');
+            },
+          },
         ]}
         batchActions={[
           {

package/src/stories/kit/builder/DataTable.Sorting.stories.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import type React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { type ColumnDef } from '@tanstack/react-table';
-import { DataTable, DataTableColumnHeader } from '../../../kit/builder/data-table';
+import type { ColumnDef } from '@tanstack/react-table';
+import {
+  DataTable,
+  DataTableColumnHeader,
+} from '../../../kit/builder/data-table';
 
 interface Person {
   id: string;
@@ -13,16 +16,24 @@ interface Person {
 const columns: ColumnDef<Person>[] = [
   {
     accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Name" />
+    ),
   },
   {
     accessorKey: 'email',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Email" />
+    ),
   },
   {
     accessorKey: 'age',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Age" />,
-    cell: ({ getValue }) => <span className="tabular-nums">{getValue() as number}</span>,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Age" />
+    ),
+    cell: ({ getValue }) => (
+      <span className="tabular-nums">{getValue() as number}</span>
+    ),
   },
 ];
 

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

@@ -58,20 +58,26 @@ export const CustomExample: Story = {
         <Button
           variant="secondary"
           onClick={async () => {
-            const val = await open<string>(({ close }) => (
-              <div className="space-y-4">
-                <h3 className="text-lg font-medium text-foreground">Custom Modal</h3>
-                <p className="text-sm text-muted-foreground">You can render anything here and call close(value) to resolve.</p>
-                <div className="flex justify-end gap-2">
-                  <Button variant="outline" onClick={() => close(undefined)}>
-                    Cancel
-                  </Button>
-                  <Button onClick={() => close('done')}>
-                    Confirm
-                  </Button>
+            const val = await open<string>(
+              ({ close }) => (
+                <div className="space-y-4">
+                  <h3 className="text-lg font-medium text-foreground">
+                    Custom Modal
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    You can render anything here and call close(value) to
+                    resolve.
+                  </p>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={() => close(undefined)}>
+                      Cancel
+                    </Button>
+                    <Button onClick={() => close('done')}>Confirm</Button>
+                  </div>
                 </div>
-              </div>
-            ), { preventCloseOnInteractOutside: true });
+              ),
+              { preventCloseOnInteractOutside: true },
+            );
             // eslint-disable-next-line no-console
             console.log('custom result:', val);
           }}

package/src/stories/kit/builder/Form.ArrayLayouts.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 ArrayCardLayout: Story = {
   name: 'Array - Card layout',
@@ -44,7 +47,7 @@ export const ArrayCardLayout: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};
 
 export const ArrayTableLayout: Story = {
   name: 'Array - Table layout',
@@ -52,7 +55,8 @@ export const ArrayTableLayout: Story = {
     sections: [
       {
         title: 'Table Layout',
-        description: 'Array items are displayed in a table with configurable colors',
+        description:
+          'Array items are displayed in a table with configurable colors',
         layout: 'grid',
         grid: { cols: 1, gap: 'gap-4' },
         fields: [
@@ -67,7 +71,12 @@ export const ArrayTableLayout: Story = {
               rowAltBgClass: 'bg-teal-50',
             },
             fields: [
-              { name: 'product', label: 'Product', type: 'text', required: true },
+              {
+                name: 'product',
+                label: 'Product',
+                type: 'text',
+                required: true,
+              },
               { name: 'price', label: 'Price', type: 'number', required: true },
             ],
           },
@@ -82,7 +91,7 @@ export const ArrayTableLayout: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};
 
 export const ArrayCustomLayout: Story = {
   name: 'Array - Custom renderer',
@@ -103,7 +112,13 @@ export const ArrayCustomLayout: Story = {
             label: 'Items (custom)',
             defaultValue: [],
             arrayLayout: 'custom',
-            arrayRender: ({ value: _value = [], rows = [], addItem, removeItem, disabled }) => {
+            arrayRender: ({
+              value: _value = [],
+              rows = [],
+              addItem,
+              removeItem,
+              disabled,
+            }) => {
               return (
                 <div className="space-y-3">
                   <div className="flex justify-between items-center">
@@ -117,11 +132,18 @@ export const ArrayCustomLayout: Story = {
                     </button>
                   </div>
                   <div className="space-y-2">
-                    <div className="text-xs text-muted-foreground">Rows: {rows.length}</div>
+                    <div className="text-xs text-muted-foreground">
+                      Rows: {rows.length}
+                    </div>
                     {Array.isArray(rows) && rows.length > 0 ? (
                       rows.map((row: { id: string }, i: number) => (
-                        <div key={row.id ?? i} className="flex items-center gap-3 border rounded-md p-3">
-                          <span className="text-sm text-muted-foreground">Row {i + 1}</span>
+                        <div
+                          key={row.id ?? i}
+                          className="flex items-center gap-3 border rounded-md p-3"
+                        >
+                          <span className="text-sm text-muted-foreground">
+                            Row {i + 1}
+                          </span>
                           <button
                             type="button"
                             className="ml-auto btn btn-destructive"
@@ -132,11 +154,13 @@ export const ArrayCustomLayout: Story = {
                         </div>
                       ))
                     ) : (
-                      <p className="text-sm text-muted-foreground">No items. Click Add Item.</p>
+                      <p className="text-sm text-muted-foreground">
+                        No items. Click Add Item.
+                      </p>
                     )}
                   </div>
                 </div>
-              )
+              );
             },
           },
         ],
@@ -150,4 +174,4 @@ export const ArrayCustomLayout: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};

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

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder'
-import { type FormBuilderProps } from '../../../kit/builder/form/types'
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
+import type { FormBuilderProps } from '../../../kit/builder/form/types';
 
 const meta: Meta<typeof FormBuilder> = {
   title: 'Kit/Builder/Form',
@@ -9,11 +9,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>;
 
 const CITY_OPTIONS = [
   { label: 'New York', value: 'nyc' },
@@ -26,7 +26,7 @@ const CITY_OPTIONS = [
   { label: 'Boston', value: 'bos' },
   { label: 'Denver', value: 'den' },
   { label: 'Portland', value: 'pdx' },
-]
+];
 
 export const SingleAutocomplete: Story = {
   name: 'Autocomplete - Single select (clearable + custom allowed)',
@@ -52,7 +52,7 @@ export const SingleAutocomplete: Story = {
       },
     ],
     onSubmit: (data: unknown) => {
-      console.log('Submit (single):', data)
+      console.log('Submit (single):', data);
     },
     showActions: true,
   } satisfies Partial<FormBuilderProps>,
@@ -61,7 +61,7 @@ export const SingleAutocomplete: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};
 
 // ---- Server edit page (prefilled IDs -> fetch labels) ----
 const ALL_SERVER_OPTIONS = Array.from({ length: 100 }).map((_, i) => ({
@@ -70,22 +70,32 @@ const ALL_SERVER_OPTIONS = Array.from({ length: 100 }).map((_, i) => ({
 }));
 
 function makeServerFetcher(all = ALL_SERVER_OPTIONS, minLatency = 250) {
-  return async ({ search, page = 1, pageSize = 10 }: { search: string; page?: number; pageSize: number; }) => {
+  return async ({
+    search,
+    page = 1,
+    pageSize = 10,
+  }: {
+    search: string;
+    page?: number;
+    pageSize: number;
+  }) => {
     const q = (search || '').toLowerCase();
-    const filtered = q ? all.filter(o => o.label.toLowerCase().includes(q)) : all;
+    const filtered = q
+      ? all.filter((o) => o.label.toLowerCase().includes(q))
+      : all;
     const start = (page - 1) * pageSize;
     const slice = filtered.slice(start, start + pageSize);
     const hasMore = start + pageSize < filtered.length;
-    await new Promise(r => setTimeout(r, minLatency));
+    await new Promise((r) => setTimeout(r, minLatency));
     return { items: slice, hasMore, nextCursor: null };
   };
 }
 
 async function loadSelectedByIds(values: Array<string | number>) {
   // Simulate server lookup for labels by ID
-  await new Promise(r => setTimeout(r, 150));
-  const nums = values.map(v => (typeof v === 'string' ? Number(v) : v));
-  return ALL_SERVER_OPTIONS.filter(o => nums.includes(o.value));
+  await new Promise((r) => setTimeout(r, 150));
+  const nums = values.map((v) => (typeof v === 'string' ? Number(v) : v));
+  return ALL_SERVER_OPTIONS.filter((o) => nums.includes(o.value));
 }
 
 export const ServerEditPrefilledByIds: Story = {
@@ -113,7 +123,9 @@ export const ServerEditPrefilledByIds: Story = {
             // Provide resolver to fetch labels for the current values
             loadSelected: loadSelectedByIds,
             // Pre-seed labels so chips render labels immediately on load
-            initialSelectedOptions: ALL_SERVER_OPTIONS.filter(o => [2, 5, 17].includes(o.value)),
+            initialSelectedOptions: ALL_SERVER_OPTIONS.filter((o) =>
+              [2, 5, 17].includes(o.value),
+            ),
           },
         ],
       },
@@ -123,7 +135,7 @@ export const ServerEditPrefilledByIds: Story = {
       cities: [2, 5, 17],
     },
     onSubmit: (data: unknown) => {
-      console.log('Submit (server edit):', data)
+      console.log('Submit (server edit):', data);
     },
     showActions: true,
   } satisfies Partial<FormBuilderProps>,
@@ -132,7 +144,7 @@ export const ServerEditPrefilledByIds: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};
 
 export const MultiAutocompleteChips: Story = {
   name: 'Autocomplete - Multi select with chips',
@@ -159,7 +171,7 @@ export const MultiAutocompleteChips: Story = {
       },
     ],
     onSubmit: (data: unknown) => {
-      console.log('Submit (multi):', data)
+      console.log('Submit (multi):', data);
     },
     showActions: true,
   } satisfies Partial<FormBuilderProps>,
@@ -168,7 +180,7 @@ export const MultiAutocompleteChips: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};
 
 export const TaggingAutocomplete: Story = {
   name: 'Autocomplete - Tagging (no options, custom values)',
@@ -196,7 +208,7 @@ export const TaggingAutocomplete: Story = {
       },
     ],
     onSubmit: (data: unknown) => {
-      console.log('Submit (tagging):', data)
+      console.log('Submit (tagging):', data);
     },
     showActions: true,
   } satisfies Partial<FormBuilderProps>,
@@ -205,4 +217,4 @@ export const TaggingAutocomplete: Story = {
       <FormBuilder {...(args as FormBuilderProps)} />
     </div>
   ),
-}
+};

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

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { FormBuilder, type FormBuilderProps } from '../../../kit/builder/form/components/FormBuilder';
+import {
+  FormBuilder,
+  type FormBuilderProps,
+} from '../../../kit/builder/form/components/FormBuilder';
 
 const meta: Meta<typeof FormBuilder> = {
   title: 'Kit/Builder/Form',
@@ -25,12 +28,41 @@ export const BasicUsage: Story = {
         layout: 'grid',
         grid: { cols: 1, mdCols: 2, gap: 'gap-4' },
         fields: [
-          { name: 'firstName', label: 'First name', type: 'text', required: true },
-          { name: 'lastName', label: 'Last name', type: 'text', required: true },
+          {
+            name: 'firstName',
+            label: 'First name',
+            type: 'text',
+            required: true,
+          },
+          {
+            name: 'lastName',
+            label: 'Last name',
+            type: 'text',
+            required: true,
+          },
           { name: 'email', label: 'Email', type: 'email', required: true },
-          { name: 'newsletter', label: 'Subscribe to newsletter', type: 'checkbox', defaultValue: false, gridCols: 2 },
-          { name: 'darkMode', label: 'Enable dark mode', type: 'switch', defaultValue: false, gridCols: 2 },
-          { name: 'darkModeStacked', label: 'Enable dark mode (stacked)', type: 'switch', defaultValue: true, labelPlacement: 'stacked', gridCols: 2 },
+          {
+            name: 'newsletter',
+            label: 'Subscribe to newsletter',
+            type: 'checkbox',
+            defaultValue: false,
+            gridCols: 2,
+          },
+          {
+            name: 'darkMode',
+            label: 'Enable dark mode',
+            type: 'switch',
+            defaultValue: false,
+            gridCols: 2,
+          },
+          {
+            name: 'darkModeStacked',
+            label: 'Enable dark mode (stacked)',
+            type: 'switch',
+            defaultValue: true,
+            labelPlacement: 'stacked',
+            gridCols: 2,
+          },
         ],
       },
     ],