@object-ui/components 0.3.0 → 0.5.0

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: 'Components/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: 'Components/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: 'Views/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,
+};

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

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Components/Extended',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ScrollArea: Story = {
+    args: {
+        type: 'scroll-area',
+        height: '200px',
+        width: '350px',
+        className: 'rounded-md border p-4',
+        content: [
+            { type: 'div', className: 'mb-4 text-sm font-bold', children: [{ type: 'text', content: 'Tags' }] },
+            { 
+               type: 'div', 
+               children: Array.from({ length: 50 }).map((_, i) => ({
+                   type: 'div',
+                   className: 'text-sm border-b py-2',
+                   children: [{ type: 'text', content: `Tag ${i + 1}` }]
+               }))
+            }
+        ]
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const HeaderBar: Story = {
+    args: {
+        type: 'sidebar-provider',
+        body: [
+            {
+                type: 'sidebar-inset',
+                children: [
+                    {
+                        type: 'header-bar',
+                        crumbs: [
+                            { label: 'Application' },
+                            { label: 'Dashboard', href: '/dashboard' },
+                            { label: 'Analytics' }
+                        ]
+                    }
+                ]
+            }
+        ]
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Pagination: Story = {
+    args: {
+        type: 'pagination',
+        currentPage: 2,
+        totalPages: 10,
+        className: 'mt-4'
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Image: Story = {
+    args: {
+        type: 'image',
+        src: 'https://images.unsplash.com/photo-1576075796615-2c1185331f36?w=800&dpr=2&q=80',
+        alt: 'Photo by Unsplash',
+        className: 'rounded-xl object-cover',
+        width: 300,
+        height: 200
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};

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

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Components/Flex',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+  argTypes: {
+    // Schema properties will be passed as args
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FlexRow: Story = {
+  args: {
+    type: 'flex',
+    direction: 'row',
+    gap: 4,
+    align: 'center',
+    className: 'p-4 border rounded-lg bg-slate-50',
+    children: [
+      { 
+        type: 'badge', 
+        variant: 'default',
+        content: 'Item 1' 
+      },
+      { 
+        type: 'badge', 
+        variant: 'secondary',
+        content: 'Item 2' 
+      },
+      { 
+        type: 'badge', 
+        variant: 'outline',
+        content: 'Item 3' 
+      }
+    ]
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const FlexColumn: Story = {
+  args: {
+    type: 'flex',
+    direction: 'col',
+    gap: 2,
+    className: 'p-4 border rounded-lg max-w-xs',
+    children: [
+      { 
+        type: 'alert', 
+        variant: 'default',
+        children: [{ type: 'text', content: 'Alert 1' }]
+      },
+      { 
+        type: 'alert', 
+        variant: 'destructive',
+         children: [{ type: 'text', content: 'Alert 2' }]
+      }
+    ]
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const StackDefault: Story = {
+  args: {
+    type: 'stack',
+    gap: 4,
+    className: 'p-6 border rounded-md',
+    children: [
+      { 
+        type: 'text', 
+        content: 'Stack is essentially a Flex Column', 
+        className: 'font-semibold' 
+      },
+      { 
+        type: 'input', 
+        placeholder: 'First Name' 
+      },
+      { 
+        type: 'input', 
+        placeholder: 'Last Name' 
+      },
+      { 
+        type: 'button', 
+        content: 'Submit',
+        className: 'w-full'
+      }
+    ]
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const FlexWrap: Story = {
+  args: {
+    type: 'flex',
+    wrap: true,
+    gap: 2,
+    className: 'w-64 p-4 border border-dashed',
+    children: Array.from({ length: 12 }).map((_, i) => ({
+      type: 'badge',
+      content: `Tag ${i + 1}`
+    }))
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};

package/src/stories-json/list-view.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Views/ListView',
+  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 ContactsGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'list-view',
+    objectName: 'contacts',
+    viewType: 'grid',
+    fields: ['name', 'email', 'phone', 'company'],
+    sort: [{ field: 'name', order: 'asc' }],
+  } as any,
+};
+
+export const DealsKanban: Story = {
+  render: renderStory,
+  args: {
+    type: 'list-view',
+    objectName: 'deals',
+    viewType: 'kanban',
+    fields: ['name', 'amount', 'stage', 'close_date'],
+    options: {
+      kanban: {
+        groupField: 'stage',
+        titleField: 'name',
+        cardFields: ['amount', 'close_date'],
+      },
+    },
+  } as any,
+};
+
+export const TasksCalendar: Story = {
+  render: renderStory,
+  args: {
+    type: 'list-view',
+    objectName: 'tasks',
+    viewType: 'calendar',
+    fields: ['title', 'status', 'priority', 'due_date'],
+    options: {
+      calendar: {
+        startDateField: 'due_date',
+        titleField: 'title',
+      },
+    },
+  } as any,
+};
+
+export const SalesChart: Story = {
+  render: renderStory,
+  args: {
+    type: 'list-view',
+    objectName: 'sales',
+    viewType: 'chart',
+    fields: ['month', 'revenue', 'profit'],
+    options: {
+      chart: {
+        chartType: 'bar',
+        xAxisField: 'month',
+        yAxisFields: ['revenue', 'profit'],
+      },
+    },
+  } as any,
+};
+
+export const WithFiltersAndSearch: Story = {
+  render: renderStory,
+  args: {
+    type: 'list-view',
+    objectName: 'opportunities',
+    viewType: 'grid',
+    fields: ['name', 'amount', 'stage', 'owner', 'close_date'],
+    filters: [
+      ['stage', '=', 'Prospecting'],
+      'OR',
+      ['stage', '=', 'Qualification'],
+    ],
+    sort: [{ field: 'amount', order: 'desc' }],
+  } as any,
+};