@object-ui/components 0.3.0 → 0.5.0

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

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Views/DetailView',
+  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 ContactDetail: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Contact Details',
+    data: {
+      name: 'John Doe',
+      email: 'john.doe@example.com',
+      phone: '+1 (555) 123-4567',
+      company: 'Acme Corporation',
+      title: 'Senior Developer',
+      department: 'Engineering',
+    },
+    fields: [
+      { name: 'name', label: 'Full Name' },
+      { name: 'email', label: 'Email' },
+      { name: 'phone', label: 'Phone' },
+      { name: 'company', label: 'Company' },
+      { name: 'title', label: 'Job Title' },
+      { name: 'department', label: 'Department' },
+    ],
+    showBack: true,
+    showEdit: true,
+    showDelete: true,
+  } as any,
+};
+
+export const WithSections: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Account: Acme Corporation',
+    data: {
+      name: 'Acme Corporation',
+      industry: 'Technology',
+      website: 'https://acme.com',
+      employees: '500-1000',
+      revenue: '$50M - $100M',
+      street: '123 Main Street',
+      city: 'San Francisco',
+      state: 'CA',
+      zipcode: '94102',
+      country: 'USA',
+      description: 'Leading technology solutions provider',
+    },
+    sections: [
+      {
+        title: 'Basic Information',
+        icon: '📋',
+        fields: [
+          { name: 'name', label: 'Account Name' },
+          { name: 'industry', label: 'Industry' },
+          { name: 'website', label: 'Website' },
+          { name: 'employees', label: 'Employees' },
+          { name: 'revenue', label: 'Annual Revenue' },
+        ],
+        columns: 2,
+      },
+      {
+        title: 'Address',
+        icon: '📍',
+        collapsible: true,
+        defaultCollapsed: false,
+        fields: [
+          { name: 'street', label: 'Street' },
+          { name: 'city', label: 'City' },
+          { name: 'state', label: 'State' },
+          { name: 'zipcode', label: 'Zip Code' },
+          { name: 'country', label: 'Country' },
+        ],
+        columns: 2,
+      },
+      {
+        title: 'Additional Information',
+        collapsible: true,
+        defaultCollapsed: true,
+        fields: [
+          { name: 'description', label: 'Description' },
+        ],
+        columns: 1,
+      },
+    ],
+    showBack: true,
+    showEdit: true,
+    showDelete: true,
+  } as any,
+};
+
+export const WithTabs: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Opportunity: Q1 Enterprise Deal',
+    data: {
+      name: 'Q1 Enterprise Deal',
+      amount: '$250,000',
+      stage: 'Proposal',
+      probability: '75%',
+      close_date: '2024-03-31',
+    },
+    fields: [
+      { name: 'name', label: 'Opportunity Name' },
+      { name: 'amount', label: 'Amount' },
+      { name: 'stage', label: 'Stage' },
+      { name: 'probability', label: 'Probability' },
+      { name: 'close_date', label: 'Close Date' },
+    ],
+    tabs: [
+      {
+        key: 'details',
+        label: 'Details',
+        icon: '📄',
+        content: {
+          type: 'box',
+          children: [
+            {
+              type: 'text',
+              text: 'Detailed opportunity information goes here...',
+            },
+          ],
+        },
+      },
+      {
+        key: 'activity',
+        label: 'Activity',
+        icon: '📊',
+        badge: '12',
+        content: {
+          type: 'box',
+          children: [
+            {
+              type: 'text',
+              text: 'Activity timeline and history...',
+            },
+          ],
+        },
+      },
+      {
+        key: 'notes',
+        label: 'Notes',
+        icon: '📝',
+        content: {
+          type: 'box',
+          children: [
+            {
+              type: 'text',
+              text: 'Internal notes and comments...',
+            },
+          ],
+        },
+      },
+    ],
+    showBack: true,
+    showEdit: true,
+    showDelete: true,
+  } as any,
+};
+
+export const WithRelatedLists: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Account: Acme Corporation',
+    objectName: 'accounts',
+    resourceId: '12345',
+    data: {
+      name: 'Acme Corporation',
+      industry: 'Technology',
+    },
+    fields: [
+      { name: 'name', label: 'Account Name' },
+      { name: 'industry', label: 'Industry' },
+    ],
+    related: [
+      {
+        title: 'Contacts',
+        type: 'table',
+        data: [
+          {
+            id: '1',
+            name: 'John Doe',
+            email: 'john@acme.com',
+            phone: '+1 555-0001',
+            title: 'CEO',
+          },
+          {
+            id: '2',
+            name: 'Jane Smith',
+            email: 'jane@acme.com',
+            phone: '+1 555-0002',
+            title: 'CTO',
+          },
+        ],
+        columns: ['name', 'email', 'phone', 'title'],
+      },
+      {
+        title: 'Opportunities',
+        type: 'table',
+        data: [
+          {
+            id: '1',
+            name: 'Q1 Deal',
+            amount: '$250,000',
+            stage: 'Proposal',
+            close_date: '2024-03-31',
+          },
+          {
+            id: '2',
+            name: 'Q2 Expansion',
+            amount: '$100,000',
+            stage: 'Prospecting',
+            close_date: '2024-06-30',
+          },
+        ],
+        columns: ['name', 'amount', 'stage', 'close_date'],
+      },
+    ],
+    showBack: true,
+    showEdit: true,
+    showDelete: true,
+  } as any,
+};
+
+export const LoadingState: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Loading...',
+    loading: true,
+    fields: [
+      { name: 'name', label: 'Name' },
+      { name: 'email', label: 'Email' },
+      { name: 'phone', label: 'Phone' },
+    ],
+    showBack: true,
+  } as any,
+};

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Dialog',
+  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: 'dialog',
+    title: 'Schema/Feedback/Edit profile',
+    description: 'Make changes to your profile here. Click save when you\'re done.',
+    trigger: [
+        { type: 'button', props: { variant: 'outline' }, children: [{type:'text', content: 'Edit Profile'}] }
+    ],
+    content: [
+        { 
+            type: 'div', 
+            className: 'grid gap-4 py-4',
+            children: [
+                { type: 'input', label: 'Name', defaultValue: 'Pedro Duarte', wrapperClass: 'grid grid-cols-4 items-center gap-4' },
+                { type: 'input', label: 'Username', defaultValue: '@peduarte', wrapperClass: 'grid grid-cols-4 items-center gap-4' }
+            ]
+        }
+    ],
+    footer: [
+        { type: 'button', children: [{type: 'text', content: 'Save changes'}] }
+    ]
+  } as any,
+};

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Components/Feedback Extras',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Spinner: Story = {
+    args: {
+        type: 'spinner',
+        size: 'lg',
+        className: 'text-primary'
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Empty: Story = {
+    args: {
+        type: 'empty',
+        description: 'No Data Found',
+        children: [
+            { type: 'button', content: 'Create Item', variant: 'default', size: 'sm' }
+        ]
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Loading: Story = {
+    args: {
+        type: 'loading',
+        text: 'Loading your experience...',
+        className: 'h-[200px]'
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Feedback Others',
+  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 Progress: Story = {
+  render: renderStory,
+  args: {
+    type: 'progress',
+    value: 60,
+    className: 'w-[300px]'
+  } as any,
+};
+
+export const Skeleton: Story = {
+  render: renderStory,
+  args: {
+    type: 'div',
+    className: 'flex items-center space-x-4',
+    children: [
+        { type: 'skeleton', className: 'h-12 w-12 rounded-full' },
+        { 
+            type: 'div', 
+            className: 'space-y-2',
+            children: [
+                { type: 'skeleton', className: 'h-4 w-[250px]' },
+                { type: 'skeleton', className: 'h-4 w-[200px]' },
+            ]
+        }
+    ]
+  } as any,
+};

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