@object-ui/components 0.3.1 → 2.0.0

package/src/stories-json/form_advanced.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Primitives/Data Entry/Form Advanced',
+  component: SchemaRenderer,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } }
+  }
+} satisfies Meta<typeof SchemaRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const RadioGroup: Story = {
+  render: renderStory,
+  args: {
+    type: 'radio-group',
+    defaultValue: 'option-one',
+    id: 'r1',
+    options: [
+        { label: 'Option One', value: 'option-one' },
+        { label: 'Option Two', value: 'option-two' },
+        { label: 'Option Three', value: 'option-three' }
+    ]
+  } as any,
+};
+
+export const Slider: Story = {
+  render: renderStory,
+  args: {
+    type: 'slider',
+    defaultValue: [33],
+    max: 100,
+    step: 1,
+    className: 'w-[300px]'
+  } as any,
+};
+
+export const InputOTP: Story = {
+  render: renderStory,
+  args: {
+    type: 'input-otp',
+    maxLength: 6,
+    value: "123"
+  } as any,
+};
+
+export const Combobox: Story = {
+  render: renderStory,
+  args: {
+    type: 'combobox',
+    placeholder: 'Select framework...',
+    className: 'w-[300px]',
+    options: [
+        { label: 'Next.js', value: 'next.js' },
+        { label: 'SvelteKit', value: 'sveltekit' },
+        { label: 'Nuxt.js', value: 'nuxt.js' },
+        { label: 'Remix', value: 'remix' },
+        { label: 'Astro', value: 'astro' }
+    ]
+  } as any,
+};
+
+export const Command: Story = {
+  render: renderStory,
+  args: {
+      type: 'command',
+      placeholder: 'Search documentation...',
+      className: 'rounded-lg border shadow-md w-[450px]',
+      groups: [
+          {
+              heading: 'Suggestions',
+              items: [
+                 { value: 'cal', label: 'Calendar' },
+                 { value: 'em', label: 'Search Emoji' },
+                 { value: 'calc', label: 'Calculator' }
+              ]
+          },
+          {
+              heading: 'Settings',
+              items: [
+                  { value: 'prof', label: 'Profile' },
+                  { value: 'bill', label: 'Billing' },
+                  { value: 'set', label: 'Settings' }
+              ]
+          }
+      ]
+  } as any,
+};
+
+export const FilterBuilder: Story = {
+  render: renderStory,
+  args: {
+    type: 'filter-builder',
+    name: 'user_filters',
+    label: 'User Filters',
+    fields: [
+      { value: 'name', label: 'Name', type: 'text' },
+      { value: 'email', label: 'Email', type: 'text' },
+      { value: 'age', label: 'Age', type: 'number' },
+      { value: 'status', label: 'Status', type: 'select', options: ['active', 'inactive'] }
+    ],
+    value: {
+      id: 'root',
+      logic: 'and',
+      conditions: [
+          { field: 'age', operator: 'gt', value: 18 }
+      ]
+    }
+  } as any,
+};

package/src/stories-json/form_extras.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Primitives/Data Entry/Form Extras',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+  argTypes: {
+    // Schema properties
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Toggle: Story = {
+  args: {
+    type: 'toggle',
+    ariaLabel: 'Toggle italic',
+    variant: 'outline',
+    children: [
+        { type: 'icon', name: 'italic', className: 'h-4 w-4' }
+    ]
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const ToggleGroup: Story = {
+  args: {
+    type: 'toggle-group',
+    selectionType: 'multiple',
+    variant: 'outline',
+    items: [
+        { value: 'bold', label: 'Bold', icon: <SchemaRenderer schema={{ type: 'icon', name: 'bold', className: 'h-4 w-4' }} /> },
+        { value: 'italic', label: 'Italic', icon: <SchemaRenderer schema={{ type: 'icon', name: 'italic', className: 'h-4 w-4' }} /> },
+        { value: 'underline', label: 'Underline', icon: <SchemaRenderer schema={{ type: 'icon', name: 'underline', className: 'h-4 w-4' }} /> }
+    ]
+  },
+  // Note: SchemaRenderer in icon prop might not work if items expects pure objects. 
+  // Let's check implementation. The implementation just renders {item.icon || item.label}.
+  // It expects item.icon to be a ReactNode. We can't pass ReactNode in JSON.
+  // Wait, if I am passing generic args, I can. But if this is strict JSON, I can't.
+  // The renderer maps `items.map(...)`.
+  // Let's try passing text first.
+};
+
+export const ToggleGroupText: Story = {
+    args: {
+      type: 'toggle-group',
+      selectionType: 'single',
+      variant: 'outline',
+      items: [
+          { value: 'left', label: 'Left' },
+          { value: 'center', label: 'Center' },
+          { value: 'right', label: 'Right' }
+      ]
+    },
+    render: (args) => <SchemaRenderer schema={args} />
+  };
+
+export const FileUpload: Story = {
+    args: {
+        type: 'file-upload',
+        id: 'documents-upload',
+        label: 'Upload Documents',
+        buttonText: 'Drop files here',
+        multiple: true,
+        accept: 'image/*'
+    },
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Calendar: Story = {
+    args: {
+        type: 'calendar',
+        mode: 'single',
+        className: 'rounded-md border shadow'
+    },
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const FormConfigured: Story = {
+    args: {
+        type: 'form',
+        label: 'User Registration',
+        submitLabel: 'Create Account',
+        columns: 2,
+        fields: [
+            { name: 'firstName', label: 'First Name', required: true, placeholder: 'John' },
+            { name: 'lastName', label: 'Last Name', required: true, placeholder: 'Doe' },
+            { name: 'email', label: 'Email Address', inputType: 'email', required: true, className: 'col-span-2' },
+            { name: 'role', label: 'Role', type: 'select', options: [{label: 'Admin', value: 'admin'}, {label: 'User', value: 'user'}], defaultValue: 'user' },
+            { name: 'notifications', label: 'Receive Notifications', type: 'checkbox', className: 'flex flex-row items-center space-x-3 space-y-0 p-4' }
+        ]
+    },
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const FormComposed: Story = {
+    args: {
+        type: 'form',
+        submitLabel: 'Sign In',
+        children: [
+             {
+                 type: 'div',
+                 className: 'space-y-2',
+                 children: [
+                     { type: 'label', content: 'Username' },
+                     { type: 'input', placeholder: 'user@example.com' }
+                 ]
+             },
+             {
+                type: 'div',
+                className: 'space-y-2',
+                children: [
+                    { type: 'label', content: 'Password' },
+                    { type: 'input', inputType: 'password' }
+                ]
+            }
+        ]
+    },
+    render: (args) => <SchemaRenderer schema={args} />
+};

package/src/stories-json/grid.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Primitives/Layout/Grid',
+  component: SchemaRenderer,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } }
+  }
+} satisfies Meta<typeof SchemaRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Grid: Story = {
+  render: renderStory,
+  args: {
+    type: 'grid',
+    props: {
+      cols: 2,
+      gap: 4
+    },
+    children: [
+        { type: 'card', className: 'p-4 bg-gray-100', children: [{type:'text', content: 'Column 1'}] },
+        { type: 'card', className: 'p-4 bg-gray-100', children: [{type:'text', content: 'Column 2'}] },
+        { type: 'card', className: 'p-4 bg-gray-100', children: [{type:'text', content: 'Column 3'}] },
+        { type: 'card', className: 'p-4 bg-gray-100', children: [{type:'text', content: 'Column 4'}] }
+    ]
+  } as any,
+};
+
+export const Responsive: Story = {
+    render: renderStory,
+    args: {
+      type: 'grid',
+      props: {
+        cols: {
+            base: 1,
+            md: 2,
+            lg: 4
+        },
+        gap: 4
+      },
+      children: [
+          { type: 'card', className: 'p-4 bg-red-100', children: [{type:'text', content: '1'}] },
+          { type: 'card', className: 'p-4 bg-blue-100', children: [{type:'text', content: '2'}] },
+          { type: 'card', className: 'p-4 bg-green-100', children: [{type:'text', content: '3'}] },
+          { type: 'card', className: 'p-4 bg-yellow-100', children: [{type:'text', content: '4'}] }
+      ]
+    } as any,
+  };

package/src/stories-json/icon.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Primitives/General/Icon',
+  component: SchemaRenderer,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } }
+  }
+} satisfies Meta<typeof SchemaRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'icon',
+    name: 'calendar',
+    className: 'h-10 w-10 text-primary'
+  } as any,
+};
+
+export const Colored: Story = {
+  render: renderStory,
+  args: {
+    type: 'icon',
+    name: 'heart',
+    className: 'h-10 w-10 text-red-500 fill-red-500'
+  } as any,
+};

package/src/stories-json/input.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Primitives/Data Entry/Input',
+  component: SchemaRenderer,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } }
+  }
+} satisfies Meta<typeof SchemaRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Input: Story = {
+  render: renderStory,
+  args: {
+    type: 'input',
+    label: 'Email Address',
+    placeholder: 'Enter your email',
+    inputType: 'email',
+    description: 'We will never share your email.',
+    wrapperClass: 'w-[300px]'
+  } as any,
+};
+
+export const WithError: Story = {
+  render: renderStory,
+  args: {
+    type: 'input',
+    label: 'Username',
+    placeholder: 'jdoe',
+    value: 'invalid name',
+    error: 'Username is already taken',
+    wrapperClass: 'w-[300px]'
+  } as any,
+};
+
+export const Textarea: Story = {
+  render: renderStory,
+  args: {
+    type: 'textarea',
+    label: 'Bio',
+    placeholder: 'Tell us a little bit about yourself',
+    wrapperClass: 'w-[300px]'
+  } as any,
+};

package/src/stories-json/kanban.stories.tsx

@@ -0,0 +1,295 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Plugins/Scheduling/Kanban',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: [
+      {
+        id: 'todo',
+        title: 'Schema/Plugins/To Do',
+        cards: [
+          {
+            id: 'card-1',
+            title: 'Schema/Plugins/Task 1',
+            description: 'This is the first task',
+            badges: [
+              { label: 'High Priority', variant: 'destructive' },
+              { label: 'Feature', variant: 'default' }
+            ]
+          },
+          {
+            id: 'card-2',
+            title: 'Schema/Plugins/Task 2',
+            description: 'This is the second task',
+            badges: [
+              { label: 'Bug', variant: 'destructive' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'in-progress',
+        title: 'Schema/Plugins/In Progress',
+        limit: 3,
+        cards: [
+          {
+            id: 'card-3',
+            title: 'Schema/Plugins/Task 3',
+            description: 'Currently working on this',
+            badges: [
+              { label: 'In Progress', variant: 'default' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'done',
+        title: 'Schema/Plugins/Done',
+        cards: [
+          {
+            id: 'card-4',
+            title: 'Schema/Plugins/Task 4',
+            description: 'This task is completed',
+            badges: [
+              { label: 'Completed', variant: 'outline' }
+            ]
+          },
+          {
+            id: 'card-5',
+            title: 'Schema/Plugins/Task 5',
+            description: 'Another completed task',
+            badges: [
+              { label: 'Completed', variant: 'outline' }
+            ]
+          }
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+export const ProjectManagement: Story = {
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: [
+      {
+        id: 'backlog',
+        title: 'Schema/Plugins/Backlog',
+        cards: [
+          {
+            id: 'task-1',
+            title: 'Schema/Plugins/Implement dark mode',
+            description: 'Add support for dark theme across the application',
+            badges: [
+              { label: 'Enhancement', variant: 'default' },
+              { label: 'Low Priority', variant: 'secondary' }
+            ]
+          },
+          {
+            id: 'task-2',
+            title: 'Schema/Plugins/Performance optimization',
+            description: 'Optimize bundle size and loading time',
+            badges: [
+              { label: 'Performance', variant: 'default' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'in-progress',
+        title: 'Schema/Plugins/In Progress',
+        limit: 2,
+        cards: [
+          {
+            id: 'task-3',
+            title: 'Schema/Plugins/User authentication',
+            description: 'Implement JWT-based authentication',
+            badges: [
+              { label: 'Feature', variant: 'default' },
+              { label: 'High Priority', variant: 'destructive' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'review',
+        title: 'Schema/Plugins/In Review',
+        cards: [
+          {
+            id: 'task-4',
+            title: 'Schema/Plugins/API integration',
+            description: 'Connect to REST API endpoints',
+            badges: [
+              { label: 'Feature', variant: 'default' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'completed',
+        title: 'Schema/Plugins/Completed',
+        cards: [
+          {
+            id: 'task-5',
+            title: 'Schema/Plugins/Initial setup',
+            description: 'Project scaffolding and configuration',
+            badges: [
+              { label: 'Done', variant: 'outline' }
+            ]
+          }
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+export const WithVirtualScrolling: Story = {
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    enableVirtualScrolling: true,
+    columns: [
+      {
+        id: 'backlog',
+        title: 'Backlog',
+        cards: Array.from({ length: 100 }, (_, i) => ({
+          id: `card-${i}`,
+          title: `Task ${i + 1}`,
+          description: `Description for task ${i + 1}`,
+          badges: [
+            { label: i % 3 === 0 ? 'Bug' : i % 2 === 0 ? 'Feature' : 'Enhancement', variant: 'default' }
+          ]
+        }))
+      },
+      {
+        id: 'in-progress',
+        title: 'In Progress',
+        limit: 5,
+        cards: []
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: []
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+export const WithColumnLimits: Story = {
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: [
+      {
+        id: 'todo',
+        title: 'To Do',
+        cards: [
+          { id: '1', title: 'Task 1', badges: [{ label: 'P1', variant: 'destructive' }] },
+          { id: '2', title: 'Task 2', badges: [{ label: 'P2', variant: 'default' }] },
+        ]
+      },
+      {
+        id: 'in-progress',
+        title: 'In Progress (80% Full)',
+        limit: 5,
+        cards: [
+          { id: '3', title: 'Task 3', description: 'Working on this' },
+          { id: '4', title: 'Task 4', description: 'Almost done' },
+          { id: '5', title: 'Task 5', description: 'In review' },
+          { id: '6', title: 'Task 6', description: 'Testing' },
+        ]
+      },
+      {
+        id: 'blocked',
+        title: 'Blocked (Over Limit)',
+        limit: 2,
+        cards: [
+          { id: '7', title: 'Task 7', description: 'Waiting for API', badges: [{ label: 'Blocked', variant: 'destructive' }] },
+          { id: '8', title: 'Task 8', description: 'Dependency issue', badges: [{ label: 'Blocked', variant: 'destructive' }] },
+          { id: '9', title: 'Task 9', description: 'Needs approval', badges: [{ label: 'Blocked', variant: 'destructive' }] },
+        ]
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: [
+          { id: '10', title: 'Task 10', badges: [{ label: 'Completed', variant: 'outline' }] },
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+export const WithCollapsibleColumns: Story = {
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    enableCollapse: true,
+    columns: [
+      {
+        id: 'backlog',
+        title: 'Backlog',
+        collapsed: false,
+        cards: [
+          { id: '1', title: 'Feature Request 1', description: 'Add dark mode support' },
+          { id: '2', title: 'Feature Request 2', description: 'Export to PDF' },
+          { id: '3', title: 'Bug Fix 1', description: 'Fix login issue' },
+        ]
+      },
+      {
+        id: 'todo',
+        title: 'To Do',
+        collapsed: false,
+        cards: [
+          { id: '4', title: 'Update documentation', badges: [{ label: 'Docs', variant: 'secondary' }] },
+          { id: '5', title: 'Write tests', badges: [{ label: 'Testing', variant: 'default' }] },
+        ]
+      },
+      {
+        id: 'in-progress',
+        title: 'In Progress',
+        collapsed: false,
+        cards: [
+          { id: '6', title: 'Implement API', description: 'RESTful endpoints' },
+        ]
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        collapsed: true,
+        cards: [
+          { id: '7', title: 'Setup project', badges: [{ label: 'Done', variant: 'outline' }] },
+          { id: '8', title: 'Configure CI/CD', badges: [{ label: 'Done', variant: 'outline' }] },
+          { id: '9', title: 'Deploy to staging', badges: [{ label: 'Done', variant: 'outline' }] },
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};