@object-ui/components 3.3.0 → 3.3.1

package/src/stories-json/date-picker.stories.tsx

@@ -1,28 +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/Date Picker',
-  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 DatePicker: Story = {
-  render: renderStory,
-  args: {
-    type: 'date-picker',
-    label: 'Date of birth',
-    placeholder: 'Pick a date',
-    description: 'Your date of birth is used to calculate your age.'
-  } as any,
-};

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

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

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

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

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

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