@object-ui/components 0.3.1 → 2.0.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: 'Plugins/Data Views/Detail View',
+  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: 'Primitives/Feedback/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: 'Primitives/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: 'Primitives/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-variants.stories.tsx

@@ -0,0 +1,210 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/Forms/Form Variants',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <div className="max-w-4xl mx-auto">
+      <SchemaRenderer schema={args as unknown as BaseSchema} />
+    </div>
+  </SchemaRendererProvider>
+);
+
+// ==========================================
+// Sectioned Form
+// ==========================================
+
+export const SectionedForm: Story = {
+  name: 'Sectioned Form',
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Employee',
+    formType: 'simple',
+    sections: [
+      {
+        name: 'personal',
+        label: 'Personal Information',
+        description: 'Basic employee details',
+        columns: 2,
+        collapsible: true,
+        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: 'phone', label: 'Phone', type: 'tel' },
+        ]
+      },
+      {
+        name: 'employment',
+        label: 'Employment Details',
+        description: 'Job-related information',
+        columns: 2,
+        collapsible: true,
+        fields: [
+          { name: 'department', label: 'Department', type: 'select', options: ['Engineering', 'Sales', 'Marketing', 'HR'] },
+          { name: 'title', label: 'Job Title', type: 'text' },
+          { name: 'startDate', label: 'Start Date', type: 'date' },
+          { name: 'salary', label: 'Salary', type: 'number' },
+        ]
+      },
+      {
+        name: 'address',
+        label: 'Address',
+        columns: 1,
+        collapsible: true,
+        collapsed: true,
+        fields: [
+          { name: 'street', label: 'Street Address', type: 'text' },
+          { name: 'city', label: 'City', type: 'text' },
+          { name: 'state', label: 'State', type: 'text' },
+          { name: 'zip', label: 'ZIP Code', type: 'text' },
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+// ==========================================
+// Tabbed Form
+// ==========================================
+
+export const TabbedForm: Story = {
+  name: 'Tabbed Form',
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Contact',
+    formType: 'tabbed',
+    defaultTab: 'basic',
+    sections: [
+      {
+        name: 'basic',
+        label: 'Basic Info',
+        columns: 2,
+        fields: [
+          { name: 'name', label: 'Full Name', type: 'text', required: true },
+          { name: 'email', label: 'Email', type: 'email', required: true },
+          { name: 'phone', label: 'Phone', type: 'tel' },
+          { name: 'company', label: 'Company', type: 'text' },
+        ]
+      },
+      {
+        name: 'social',
+        label: 'Social Media',
+        columns: 2,
+        fields: [
+          { name: 'linkedin', label: 'LinkedIn', type: 'url' },
+          { name: 'twitter', label: 'Twitter', type: 'text' },
+          { name: 'github', label: 'GitHub', type: 'text' },
+          { name: 'website', label: 'Website', type: 'url' },
+        ]
+      },
+      {
+        name: 'notes',
+        label: 'Notes',
+        columns: 1,
+        fields: [
+          { name: 'notes', label: 'Additional Notes', type: 'textarea', rows: 6 },
+          { name: 'tags', label: 'Tags', type: 'text' },
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+// ==========================================
+// Wizard Form
+// ==========================================
+
+export const WizardForm: Story = {
+  name: 'Wizard Form',
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Account',
+    formType: 'wizard',
+    showStepIndicator: true,
+    nextText: 'Continue',
+    prevText: 'Go Back',
+    sections: [
+      {
+        name: 'step1',
+        label: 'Company Details',
+        description: 'Tell us about your company',
+        columns: 2,
+        fields: [
+          { name: 'companyName', label: 'Company Name', type: 'text', required: true },
+          { name: 'industry', label: 'Industry', type: 'select', options: ['Technology', 'Finance', 'Healthcare', 'Retail'] },
+          { name: 'website', label: 'Website', type: 'url' },
+          { name: 'employees', label: 'Employee Count', type: 'number' },
+        ]
+      },
+      {
+        name: 'step2',
+        label: 'Primary Contact',
+        description: 'Who should we contact?',
+        columns: 2,
+        fields: [
+          { name: 'contactName', label: 'Contact Name', type: 'text', required: true },
+          { name: 'contactEmail', label: 'Contact Email', type: 'email', required: true },
+          { name: 'contactPhone', label: 'Phone', type: 'tel' },
+          { name: 'contactRole', label: 'Role', type: 'text' },
+        ]
+      },
+      {
+        name: 'step3',
+        label: 'Preferences',
+        description: 'Configure your preferences',
+        columns: 1,
+        fields: [
+          { name: 'plan', label: 'Plan', type: 'select', options: ['Starter', 'Professional', 'Enterprise'] },
+          { name: 'newsletter', label: 'Subscribe to Newsletter', type: 'checkbox' },
+          { name: 'notes', label: 'Additional Notes', type: 'textarea', rows: 4 },
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+// ==========================================
+// Simple Form (Default)
+// ==========================================
+
+export const SimpleForm: Story = {
+  name: 'Simple Form (Default)',
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Task',
+    customFields: [
+      { name: 'title', label: 'Task Title', type: 'text', required: true },
+      { name: 'description', label: 'Description', type: 'textarea', rows: 3 },
+      { name: 'priority', label: 'Priority', type: 'select', options: ['Low', 'Medium', 'High', 'Critical'] },
+      { name: 'dueDate', label: 'Due Date', type: 'date' },
+      { name: 'assignee', label: 'Assignee', type: 'text' },
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};