@k3-universe/react-kit 0.0.41 → 0.0.42

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

@@ -1,98 +1,98 @@
-import type React from 'react';
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-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';
-
-interface Order {
-  id: string;
-  customer: string;
-  status: 'pending' | 'paid' | 'shipped';
-  total: number;
-}
-
-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)}`,
-  },
-];
-
-const allData: Order[] = [
-  { id: '1001', customer: 'Alice', status: 'pending', total: 120.4 },
-  { id: '1002', customer: 'Bob', status: 'paid', total: 59.0 },
-  { id: '1003', customer: 'Carol', status: 'shipped', total: 220.75 },
-  { id: '1004', customer: 'Alice', status: 'paid', total: 18.0 },
-  { id: '1005', customer: 'Dan', status: 'pending', total: 44.99 },
-];
-
-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 } },
-  ),
-];
-
-const meta: Meta<typeof DataTable<Order, unknown>> = {
-  title: 'Kit/Builder/DataTable',
-  component: DataTable as unknown as React.FC<any>,
-};
-export default meta;
-
-type Story = StoryObj<typeof DataTable<Order, unknown>>;
-
-export const WithFilters: Story = {
-  name: 'With filters (FormBuilder)',
-  render: () => {
-    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 byStatus = values.status ? o.status === values.status : true;
-      return byCustomer && byStatus;
-    });
-
-    return (
-      <div className="max-w-5xl mx-auto p-6">
-        <DataTable<Order, unknown>
-          columns={columns}
-          data={filtered}
-          loading={false}
-          columnVisibility
-          formFilters={filterSections}
-          formFilterValues={values}
-          onFormFilterChange={setValues}
-          actions={[
-            {
-              key: 'export',
-              label: 'Export',
-              variant: 'outline',
-              onClick: () => {
-                toast.info('Export...');
-              },
-            },
-          ]}
-        />
-      </div>
-    );
-  },
-};
+import type React from 'react';
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+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';
+
+interface Order {
+  id: string;
+  customer: string;
+  status: 'pending' | 'paid' | 'shipped';
+  total: number;
+}
+
+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)}`,
+  },
+];
+
+const allData: Order[] = [
+  { id: '1001', customer: 'Alice', status: 'pending', total: 120.4 },
+  { id: '1002', customer: 'Bob', status: 'paid', total: 59.0 },
+  { id: '1003', customer: 'Carol', status: 'shipped', total: 220.75 },
+  { id: '1004', customer: 'Alice', status: 'paid', total: 18.0 },
+  { id: '1005', customer: 'Dan', status: 'pending', total: 44.99 },
+];
+
+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 } },
+  ),
+];
+
+const meta: Meta<typeof DataTable<Order, unknown>> = {
+  title: 'Kit/Builder/DataTable',
+  component: DataTable as unknown as React.FC<any>,
+};
+export default meta;
+
+type Story = StoryObj<typeof DataTable<Order, unknown>>;
+
+export const WithFilters: Story = {
+  name: 'With filters (FormBuilder)',
+  render: () => {
+    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 byStatus = values.status ? o.status === values.status : true;
+      return byCustomer && byStatus;
+    });
+
+    return (
+      <div className="max-w-5xl mx-auto p-6">
+        <DataTable<Order, unknown>
+          columns={columns}
+          data={filtered}
+          loading={false}
+          columnVisibility
+          formFilters={filterSections}
+          formFilterValues={values}
+          onFormFilterChange={setValues}
+          actions={[
+            {
+              key: 'export',
+              label: 'Export',
+              variant: 'outline',
+              onClick: () => {
+                toast.info('Export...');
+              },
+            },
+          ]}
+        />
+      </div>
+    );
+  },
+};

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

@@ -1,73 +1,73 @@
-import type React from 'react';
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import type { ColumnDef } from '@tanstack/react-table';
-import { DataTable } from '../../../kit/builder/data-table';
-
-interface Person {
-  id: string;
-  name: string;
-  email: string;
-}
-
-const columns: ColumnDef<Person>[] = [
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'email', header: 'Email' },
-];
-
-const data: Person[] = Array.from({ length: 48 }, (_, i) => ({
-  id: String(i + 1),
-  name: `User ${i + 1}`,
-  email: `user${i + 1}@example.com`,
-}));
-
-const meta: Meta<typeof DataTable<Person, unknown>> = {
-  title: 'Kit/Builder/DataTable',
-  component: DataTable as unknown as React.FC<any>,
-};
-export default meta;
-
-type Story = StoryObj<typeof DataTable<Person, unknown>>;
-
-export const WithClientPagination: Story = {
-  name: 'With pagination (client)',
-  render: () => (
-    <div className="max-w-4xl mx-auto p-6">
-      <DataTable<Person, unknown>
-        columns={columns}
-        data={data}
-        loading={false}
-        pagination
-      />
-    </div>
-  ),
-};
-
-export const WithControlledPagination: Story = {
-  name: 'With pagination (controlled/server-like)',
-  render: () => {
-    const [pageIndex, setPageIndex] = useState(0);
-    const [pageSize, setPageSize] = useState(10);
-
-    const start = pageIndex * pageSize;
-    const end = start + pageSize;
-    const slice = data.slice(start, end);
-
-    return (
-      <div className="max-w-4xl mx-auto p-6">
-        <DataTable<Person, unknown>
-          columns={columns}
-          data={slice}
-          loading={false}
-          pagination
-          rowCount={data.length}
-          paginationState={{ pageIndex, pageSize }}
-          onPaginationChange={(next) => {
-            setPageIndex(next.pageIndex);
-            setPageSize(next.pageSize);
-          }}
-        />
-      </div>
-    );
-  },
-};
+import type React from 'react';
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { DataTable } from '../../../kit/builder/data-table';
+
+interface Person {
+  id: string;
+  name: string;
+  email: string;
+}
+
+const columns: ColumnDef<Person>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+];
+
+const data: Person[] = Array.from({ length: 48 }, (_, i) => ({
+  id: String(i + 1),
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+}));
+
+const meta: Meta<typeof DataTable<Person, unknown>> = {
+  title: 'Kit/Builder/DataTable',
+  component: DataTable as unknown as React.FC<any>,
+};
+export default meta;
+
+type Story = StoryObj<typeof DataTable<Person, unknown>>;
+
+export const WithClientPagination: Story = {
+  name: 'With pagination (client)',
+  render: () => (
+    <div className="max-w-4xl mx-auto p-6">
+      <DataTable<Person, unknown>
+        columns={columns}
+        data={data}
+        loading={false}
+        pagination
+      />
+    </div>
+  ),
+};
+
+export const WithControlledPagination: Story = {
+  name: 'With pagination (controlled/server-like)',
+  render: () => {
+    const [pageIndex, setPageIndex] = useState(0);
+    const [pageSize, setPageSize] = useState(10);
+
+    const start = pageIndex * pageSize;
+    const end = start + pageSize;
+    const slice = data.slice(start, end);
+
+    return (
+      <div className="max-w-4xl mx-auto p-6">
+        <DataTable<Person, unknown>
+          columns={columns}
+          data={slice}
+          loading={false}
+          pagination
+          rowCount={data.length}
+          paginationState={{ pageIndex, pageSize }}
+          onPaginationChange={(next) => {
+            setPageIndex(next.pageIndex);
+            setPageSize(next.pageSize);
+          }}
+        />
+      </div>
+    );
+  },
+};

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

@@ -1,77 +1,77 @@
-import type React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import type { ColumnDef } from '@tanstack/react-table';
-import { Trash2, Plus } from 'lucide-react';
-import { DataTable } from '../../../kit/builder/data-table';
-import { toast } from 'sonner';
-
-interface Item {
-  id: string;
-  name: string;
-  price: number;
-}
-
-const columns: ColumnDef<Item>[] = [
-  { accessorKey: 'name', header: 'Item' },
-  {
-    accessorKey: 'price',
-    header: 'Price',
-    cell: ({ getValue }) => (
-      <span className="tabular-nums">${(getValue() as number).toFixed(2)}</span>
-    ),
-  },
-];
-
-const data: Item[] = [
-  { id: '1', name: 'Keyboard', price: 49.99 },
-  { id: '2', name: 'Mouse', price: 24.5 },
-  { id: '3', name: 'Headset', price: 79.0 },
-  { id: '4', name: 'Monitor', price: 199.0 },
-];
-
-const meta: Meta<typeof DataTable<Item, unknown>> = {
-  title: 'Kit/Builder/DataTable',
-  component: DataTable as unknown as React.FC<any>,
-};
-export default meta;
-
-type Story = StoryObj<typeof DataTable<Item, unknown>>;
-
-export const SelectableWithActions: Story = {
-  name: 'Selectable + actions',
-  render: () => (
-    <div className="max-w-4xl mx-auto p-6">
-      <DataTable<Item, unknown>
-        columns={columns}
-        data={data}
-        loading={false}
-        selectable
-        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');
-            },
-          },
-        ]}
-        batchActions={[
-          {
-            key: 'delete',
-            label: 'Delete Selected',
-            icon: <Trash2 className="h-4 w-4" />,
-            variant: 'destructive',
-            onClick: async ({ selectedRows, clearSelection }) => {
-              toast.info(`Would delete ${selectedRows.length} items`);
-              clearSelection();
-            },
-          },
-        ]}
-      />
-    </div>
-  ),
-};
+import type React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { Trash2, Plus } from 'lucide-react';
+import { DataTable } from '../../../kit/builder/data-table';
+import { toast } from 'sonner';
+
+interface Item {
+  id: string;
+  name: string;
+  price: number;
+}
+
+const columns: ColumnDef<Item>[] = [
+  { accessorKey: 'name', header: 'Item' },
+  {
+    accessorKey: 'price',
+    header: 'Price',
+    cell: ({ getValue }) => (
+      <span className="tabular-nums">${(getValue() as number).toFixed(2)}</span>
+    ),
+  },
+];
+
+const data: Item[] = [
+  { id: '1', name: 'Keyboard', price: 49.99 },
+  { id: '2', name: 'Mouse', price: 24.5 },
+  { id: '3', name: 'Headset', price: 79.0 },
+  { id: '4', name: 'Monitor', price: 199.0 },
+];
+
+const meta: Meta<typeof DataTable<Item, unknown>> = {
+  title: 'Kit/Builder/DataTable',
+  component: DataTable as unknown as React.FC<any>,
+};
+export default meta;
+
+type Story = StoryObj<typeof DataTable<Item, unknown>>;
+
+export const SelectableWithActions: Story = {
+  name: 'Selectable + actions',
+  render: () => (
+    <div className="max-w-4xl mx-auto p-6">
+      <DataTable<Item, unknown>
+        columns={columns}
+        data={data}
+        loading={false}
+        selectable
+        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');
+            },
+          },
+        ]}
+        batchActions={[
+          {
+            key: 'delete',
+            label: 'Delete Selected',
+            icon: <Trash2 className="h-4 w-4" />,
+            variant: 'destructive',
+            onClick: async ({ selectedRows, clearSelection }) => {
+              toast.info(`Would delete ${selectedRows.length} items`);
+              clearSelection();
+            },
+          },
+        ]}
+      />
+    </div>
+  ),
+};

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

@@ -1,67 +1,67 @@
-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';
-
-interface Person {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-}
-
-const columns: ColumnDef<Person>[] = [
-  {
-    accessorKey: 'name',
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Name" />
-    ),
-  },
-  {
-    accessorKey: '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>
-    ),
-  },
-];
-
-const data: Person[] = [
-  { id: '1', name: 'Zara', email: 'zara@example.com', age: 29 },
-  { id: '2', name: 'Mike', email: 'mike@example.com', age: 41 },
-  { id: '3', name: 'Anna', email: 'anna@example.com', age: 22 },
-  { id: '4', name: 'Ben', email: 'ben@example.com', age: 35 },
-];
-
-const meta: Meta<typeof DataTable<Person, unknown>> = {
-  title: 'Kit/Builder/DataTable',
-  component: DataTable as unknown as React.FC<any>,
-};
-export default meta;
-
-type Story = StoryObj<typeof DataTable<Person, unknown>>;
-
-export const WithSorting: Story = {
-  name: 'With sorting',
-  render: () => (
-    <div className="max-w-4xl mx-auto p-6">
-      <DataTable<Person, unknown>
-        columns={columns}
-        data={data}
-        loading={false}
-        sorting
-      />
-    </div>
-  ),
-};
+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';
+
+interface Person {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+}
+
+const columns: ColumnDef<Person>[] = [
+  {
+    accessorKey: 'name',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Name" />
+    ),
+  },
+  {
+    accessorKey: '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>
+    ),
+  },
+];
+
+const data: Person[] = [
+  { id: '1', name: 'Zara', email: 'zara@example.com', age: 29 },
+  { id: '2', name: 'Mike', email: 'mike@example.com', age: 41 },
+  { id: '3', name: 'Anna', email: 'anna@example.com', age: 22 },
+  { id: '4', name: 'Ben', email: 'ben@example.com', age: 35 },
+];
+
+const meta: Meta<typeof DataTable<Person, unknown>> = {
+  title: 'Kit/Builder/DataTable',
+  component: DataTable as unknown as React.FC<any>,
+};
+export default meta;
+
+type Story = StoryObj<typeof DataTable<Person, unknown>>;
+
+export const WithSorting: Story = {
+  name: 'With sorting',
+  render: () => (
+    <div className="max-w-4xl mx-auto p-6">
+      <DataTable<Person, unknown>
+        columns={columns}
+        data={data}
+        loading={false}
+        sorting
+      />
+    </div>
+  ),
+};