@object-ui/components 0.3.1 → 2.0.0

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: '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

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

@@ -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: '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

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

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

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

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