@object-ui/components 3.3.0 → 3.3.1

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

@@ -1,76 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-
-const meta: Meta = {
-  title: 'Primitives/Layout/Container',
-  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

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-
-const meta: Meta = {
-  title: 'Primitives/Layout/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

@@ -1,97 +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/List 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 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,
-};

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

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Plugins/Rich Content/Markdown',
-  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: 'markdown',
-    content: '# Hello World\n\nThis is a **markdown** component with *formatting* support.\n\n- Item 1\n- Item 2\n- Item 3'
-  } as any,
-};
-
-export const CompleteExample: Story = {
-  render: renderStory,
-  args: {
-    type: 'markdown',
-    content: `# ObjectUI Documentation
-
-## Introduction
-
-ObjectUI is a **Universal, Server-Driven UI (SDUI) Engine** built on React + Tailwind + Shadcn.
-
-### Key Features
-
-- 🚀 JSON-based component definitions
-- 🎨 Beautiful UI with Shadcn components
-- ⚡ Fast and lightweight
-- 🔧 Fully customizable
-
-### Installation
-
-\`\`\`bash
-npm install @object-ui/react
-\`\`\`
-
-### Quick Start
-
-\`\`\`javascript
-import { SchemaRenderer } from '@object-ui/react';
-
-const schema = {
-  type: 'button',
-  children: [{ type: 'text', content: 'Click Me' }]
-};
-
-<SchemaRenderer schema={schema} />
-\`\`\`
-
-> **Note:** This is just a sample documentation.
-
-For more information, visit our [website](https://objectui.dev).
-`
-  } as any,
-};
-
-export const CodeExample: Story = {
-  render: renderStory,
-  args: {
-    type: 'markdown',
-    content: `## Code Snippets
-
-Here's how to create a button component:
-
-\`\`\`json
-{
-  "type": "button",
-  "props": {
-    "variant": "default"
-  },
-  "children": [
-    {
-      "type": "text",
-      "content": "Click Me"
-    }
-  ]
-}
-\`\`\`
-
-And here's a TypeScript example:
-
-\`\`\`typescript
-interface ButtonSchema {
-  type: 'button';
-  props?: {
-    variant?: 'default' | 'outline' | 'ghost';
-  };
-  children?: BaseSchema[];
-}
-\`\`\`
-`
-  } as any,
-};
-
-export const TableExample: Story = {
-  render: renderStory,
-  args: {
-    type: 'markdown',
-    content: `## Component Comparison
-
-| Feature | ObjectUI | Traditional |
-|---------|----------|-------------|
-| Development Speed | ⚡ Fast | 🐌 Slow |
-| Flexibility | 🔥 High | ⭐ Medium |
-| Learning Curve | 📚 Easy | 🎓 Steep |
-| Performance | 🚀 Excellent | ✅ Good |
-
-### Conclusion
-
-ObjectUI provides a modern approach to building user interfaces with better development speed and flexibility.
-`
-  } as any,
-};

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

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Primitives/Navigation/Menus',
-  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 DropdownMenu: Story = {
-  render: renderStory,
-  args: {
-    type: 'dropdown-menu',
-    trigger: [
-        { type: 'button', props: { variant: 'outline' }, children: [{type:'text', content: 'Open Menu'}] }
-    ],
-    label: 'My Account',
-    items: [
-        { label: 'Profile', shortcut: '⇧⌘P' },
-        { label: 'Billing', shortcut: '⌘B' },
-        { label: 'Settings', shortcut: '⌘S' },
-        { type: 'separator' },
-        { label: 'Team', children: [
-            { label: 'Invite users' },
-            { label: 'Create team' },
-        ]},
-        { type: 'separator' },
-        { label: 'Log out', shortcut: '⇧⌘Q' }
-    ]
-  } as any,
-};
-
-export const Sheet: Story = {
-  render: renderStory,
-  args: {
-    type: 'sheet',
-    trigger: [
-        { type: 'button', props: { variant: 'outline' }, children: [{type: 'text', content: 'Open Sheet'}] }
-    ],
-    title: 'Schema/Navigation/Edit profile',
-    description: 'Make changes to your profile here. Click save when you\'re done.',
-    side: 'right',
-    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/metric-card.stories.tsx

@@ -1,143 +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 Display/Metric Card',
-  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: 'metric-card',
-    title: 'Total Revenue',
-    value: '$45,231.89',
-  } as any,
-};
-
-export const WithIcon: Story = {
-  render: renderStory,
-  args: {
-    type: 'metric-card',
-    title: 'Total Revenue',
-    value: '$45,231.89',
-    icon: 'DollarSign',
-  } as any,
-};
-
-export const WithTrendUp: Story = {
-  render: renderStory,
-  args: {
-    type: 'metric-card',
-    title: 'Total Revenue',
-    value: '$45,231.89',
-    icon: 'DollarSign',
-    trend: 'up',
-    trendValue: '+20.1%',
-    description: 'from last month'
-  } as any,
-};
-
-export const WithTrendDown: Story = {
-  render: renderStory,
-  args: {
-    type: 'metric-card',
-    title: 'Bounce Rate',
-    value: '2.4%',
-    icon: 'TrendingDown',
-    trend: 'down',
-    trendValue: '-5.2%',
-    description: 'from last month'
-  } as any,
-};
-
-export const WithTrendNeutral: Story = {
-  render: renderStory,
-  args: {
-    type: 'metric-card',
-    title: 'Active Users',
-    value: '1,234',
-    icon: 'Users',
-    trend: 'neutral',
-    trendValue: '0%',
-    description: 'no change'
-  } as any,
-};
-
-export const MultipleMetrics: Story = {
-  render: renderStory,
-  args: {
-    type: 'flex',
-    direction: 'row',
-    gap: 4,
-    children: [
-      {
-        type: 'metric-card',
-        title: 'Total Revenue',
-        value: '$45,231.89',
-        icon: 'DollarSign',
-        trend: 'up',
-        trendValue: '+20.1%',
-        description: 'from last month',
-        className: 'flex-1'
-      },
-      {
-        type: 'metric-card',
-        title: 'New Customers',
-        value: '+2,350',
-        icon: 'Users',
-        trend: 'up',
-        trendValue: '+180.1%',
-        description: 'from last month',
-        className: 'flex-1'
-      },
-      {
-        type: 'metric-card',
-        title: 'Active Sessions',
-        value: '+573',
-        icon: 'Activity',
-        trend: 'up',
-        trendValue: '+201',
-        description: 'since last hour',
-        className: 'flex-1'
-      }
-    ]
-  } as any,
-};
-
-export const LargeNumbers: Story = {
-  render: renderStory,
-  args: {
-    type: 'metric-card',
-    title: 'Total Views',
-    value: '1,234,567',
-    icon: 'Eye',
-    trend: 'up',
-    trendValue: '+45.2%',
-    description: 'from last quarter'
-  } as any,
-};
-
-export const WithDescription: Story = {
-  render: renderStory,
-  args: {
-    type: 'metric-card',
-    title: 'Conversion Rate',
-    value: '12.5%',
-    icon: 'Target',
-    description: 'above industry average'
-  } as any,
-};

package/src/stories-json/navigation-menu.stories.tsx

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Primitives/Navigation/Navigation Menu',
-  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: 'navigation-menu',
-    items: [
-        { label: 'Home', href: '#' },
-        { 
-            label: 'Products', 
-            children: [
-                { label: 'Analytics', description: 'Get insights into who is clicking your links', href: '#' },
-                { label: 'Engagement', description: 'Measure active engagement with your brand', href: '#' },
-                { label: 'Security', description: 'Advanced security features', href: '#' }
-            ]
-        },
-        { label: 'Pricing', href: '#' }
-    ]
-  } as any,
-};