@object-ui/components 3.3.0 → 3.3.1

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

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

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

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

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

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

@@ -1,295 +0,0 @@
-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,
-};