@k3-universe/react-kit 0.0.1

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

@@ -0,0 +1,72 @@
+import React, { 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

@@ -0,0 +1,63 @@
+import 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

@@ -0,0 +1,56 @@
+import 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>
+  ),
+};

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogProvider, useDialog } from '../../../kit/builder/dialog';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta = {
+  title: 'Kit/Builder/Dialog',
+  decorators: [
+    (Story) => (
+      <DialogProvider>
+        <div className="space-y-6">
+          <Story />
+        </div>
+      </DialogProvider>
+    ),
+  ],
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ConfirmExample: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { confirm } = useDialog();
+    return (
+      <div className="flex items-center gap-3">
+        <Button
+          onClick={async () => {
+            const ok = await confirm({
+              title: 'Delete item?',
+              description: 'This action cannot be undone.',
+              destructive: true,
+              confirmText: 'Delete',
+              cancelText: 'Cancel',
+            });
+            // eslint-disable-next-line no-console
+            console.log('confirm result:', ok);
+          }}
+        >
+          Open Confirm
+        </Button>
+      </div>
+    );
+  },
+};
+
+export const CustomExample: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { open } = useDialog();
+    return (
+      <div className="flex items-center gap-3">
+        <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>
+                </div>
+              </div>
+            ), { preventCloseOnInteractOutside: true });
+            // eslint-disable-next-line no-console
+            console.log('custom result:', val);
+          }}
+        >
+          Open Custom
+        </Button>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,45 @@
+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',
+  component: FormBuilder,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormBuilder>;
+
+export const BasicUsage: Story = {
+  name: 'Basic usage',
+  args: {
+    sections: [
+      {
+        title: 'User Info',
+        description: 'A minimal configuration using grid layout',
+        variant: 'card',
+        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: 'email', label: 'Email', type: 'email', required: true },
+          { name: 'newsletter', label: 'Subscribe to newsletter', type: 'checkbox', defaultValue: false, gridCols: 2 },
+        ],
+      },
+    ],
+    onSubmit: (data: unknown) => {
+      console.log('Submit (basic):', data);
+    },
+    showActions: true,
+  } satisfies Partial<FormBuilderProps>,
+  render: (args) => (
+    <div className="max-w-3xl mx-auto p-6">
+      <FormBuilder {...(args as FormBuilderProps)} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,223 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormBuilder } from '../../../kit/builder/form/components/FormBuilder';
+import { createSection, createField, commonValidations, createDependency, conditions, validators } from '../../../kit/builder/form/utils';
+
+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 ComplexExample: Story = {
+  name: 'Complex example',
+  render: () => {
+
+    const handleSubmit = (data: unknown) => {
+      console.log('Complex form submitted:', data);
+    };
+
+    const handleFieldChange = (name: string, value: unknown, allValues: Record<string, unknown>) => {
+      console.log(`Field ${name} changed to:`, value);
+      console.log('All form values:', allValues);
+    };
+
+    const sections = [
+      createSection.card('Personal Information', [
+        createField.text('firstName', 'First Name', { required: true, placeholder: 'Enter first name' }),
+        createField.text('lastName', 'Last Name', { required: true, placeholder: 'Enter last name' }),
+        createField.email('email', 'Email Address', { required: true, placeholder: 'Enter email address' }),
+        createField.date('dateOfBirth', 'Date of Birth', { required: true }),
+        createField.select(
+          'gender',
+          'Gender',
+          [
+            { label: 'Male', value: 'male' },
+            { label: 'Female', value: 'female' },
+            { label: 'Other', value: 'other' },
+            { label: 'Prefer not to say', value: 'not_specified' },
+          ],
+          { placeholder: 'Select gender' },
+        ),
+      ]),
+
+      createSection.card('Address Information', [
+        createField.object('address', 'Primary Address', [
+          createField.text('street', 'Street Address', { required: true, placeholder: '123 Main St', gridCols: 2 }),
+          createField.text('city', 'City', { required: true, placeholder: 'New York' }),
+          createField.text('state', 'State/Province', { required: true, placeholder: 'NY' }),
+          createField.text('postalCode', 'Postal Code', { required: true, placeholder: '10001' }),
+          createField.select(
+            'country',
+            'Country',
+            [
+              { label: 'United States', value: 'US' },
+              { label: 'Canada', value: 'CA' },
+              { label: 'United Kingdom', value: 'UK' },
+              { label: 'Australia', value: 'AU' },
+            ],
+            { required: true, defaultValue: 'US' },
+          ),
+        ], { gridCols: 2 }),
+
+        createField.checkbox('sameAsShipping', 'Billing address same as shipping', { defaultValue: true, gridCols: 2 }),
+
+        createField.object('billingAddress', 'Billing Address', [
+          createField.text('street', 'Street Address', { required: true, placeholder: '123 Main St', gridCols: 2 }),
+          createField.text('city', 'City', { required: true, placeholder: 'New York' }),
+          createField.text('state', 'State/Province', { required: true, placeholder: 'NY' }),
+          createField.text('postalCode', 'Postal Code', { required: true, placeholder: '10001' }),
+          createField.select(
+            'country',
+            'Country',
+            [
+              { label: 'United States', value: 'US' },
+              { label: 'Canada', value: 'CA' },
+              { label: 'United Kingdom', value: 'UK' },
+              { label: 'Australia', value: 'AU' },
+            ],
+            { required: true, defaultValue: 'US' },
+          ),
+        ], {
+          gridCols: 2,
+          dependencies: [createDependency.showWhen('sameAsShipping', conditions.isFalse())],
+        }),
+      ]),
+
+      createSection.card('Employment Information', [
+        createField.select(
+          'employmentStatus',
+          'Employment Status',
+          [
+            { label: 'Employed', value: 'employed' },
+            { label: 'Self-employed', value: 'self_employed' },
+            { label: 'Unemployed', value: 'unemployed' },
+            { label: 'Student', value: 'student' },
+            { label: 'Retired', value: 'retired' },
+          ],
+          { required: true, placeholder: 'Select employment status' },
+        ),
+
+        createField.text('company', 'Company Name', {
+          required: true,
+          placeholder: 'Enter company name',
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))],
+        }),
+
+        createField.text('jobTitle', 'Job Title', {
+          required: true,
+          placeholder: 'Enter job title',
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('employed'))],
+        }),
+
+        createField.text('businessName', 'Business Name', {
+          required: true,
+          placeholder: 'Enter business name',
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('self_employed'))],
+        }),
+
+        createField.text('businessType', 'Type of Business', {
+          placeholder: 'e.g., Consulting, Retail, etc.',
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('self_employed'))],
+        }),
+
+        createField.text('school', 'School/University', {
+          required: true,
+          placeholder: 'Enter school name',
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('student'))],
+        }),
+
+        createField.text('major', 'Major/Field of Study', {
+          placeholder: 'Enter your major',
+          dependencies: [createDependency.showWhen('employmentStatus', conditions.equals('student'))],
+        }),
+
+        createField.number('annualIncome', 'Annual Income', {
+          placeholder: '50000',
+          validation: validators.minItems(0, 'Income must be positive'),
+          dependencies: [
+            createDependency.showWhen('employmentStatus', value => ['employed', 'self_employed'].includes(value)),
+          ],
+        }),
+      ]),
+
+      createSection.card('Skills & Experience', [
+        createField.array(
+          'skills',
+          'Skills',
+          [
+            createField.text('name', 'Skill Name', { required: true, placeholder: 'e.g., JavaScript, Project Management' }),
+            createField.select(
+              'level',
+              'Proficiency Level',
+              [
+                { label: 'Beginner', value: 'beginner' },
+                { label: 'Intermediate', value: 'intermediate' },
+                { label: 'Advanced', value: 'advanced' },
+                { label: 'Expert', value: 'expert' },
+              ],
+              { required: true, placeholder: 'Select level' },
+            ),
+            createField.number('yearsOfExperience', 'Years of Experience', {
+              placeholder: '2',
+              validation: validators.minItems(0, 'Years must be positive'),
+            }),
+          ],
+          { gridCols: 2, defaultValue: [{ name: '', level: '', yearsOfExperience: 0 }] },
+        ),
+      ]),
+
+      createSection.card('Professional References', [
+        createField.checkbox('hasReferences', 'I have professional references', { defaultValue: false, gridCols: 2 }),
+        createField.array(
+          'references',
+          'References',
+          [
+            createField.text('name', 'Full Name', { required: true, placeholder: 'John Doe' }),
+            createField.text('title', 'Job Title', { required: true, placeholder: 'Senior Manager' }),
+            createField.text('company', 'Company', { required: true, placeholder: 'ABC Corporation' }),
+            createField.email('email', 'Email', { required: true, placeholder: 'john.doe@company.com' }),
+            createField.text('phone', 'Phone', { validation: commonValidations.phone, placeholder: '+1 (555) 123-4567' }),
+            createField.select(
+              'relationship',
+              'Relationship',
+              [
+                { label: 'Direct Supervisor', value: 'supervisor' },
+                { label: 'Colleague', value: 'colleague' },
+                { label: 'Client', value: 'client' },
+                { label: 'Other', value: 'other' },
+              ],
+              { required: true, placeholder: 'Select relationship' },
+            ),
+          ],
+          { gridCols: 2, defaultValue: [], dependencies: [createDependency.showWhen('hasReferences', conditions.isTrue())] },
+        ),
+      ]),
+
+      createSection.card('Additional Information', [
+        createField.textarea('additionalInfo', 'Additional Comments', { placeholder: "Any additional information you'd like to share...", gridCols: 2 }),
+        createField.checkbox('agreeToTerms', 'I agree to the terms and conditions', { required: true, gridCols: 2 }),
+        createField.checkbox('allowMarketing', 'I agree to receive marketing communications', { defaultValue: false, gridCols: 2 }),
+      ]),
+    ];
+
+    return (
+      <div className="max-w-4xl mx-auto p-6">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Professional Profile</h1>
+          <p className="text-gray-600 mt-2">
+            Complete your professional profile with detailed information. This form demonstrates complex nested structures and field dependencies.
+          </p>
+        </div>
+
+        <FormBuilder sections={sections} onSubmit={handleSubmit} onFieldChange={handleFieldChange} className="space-y-8" />
+      </div>
+    );
+  }
+};