@object-ui/components 0.3.0 → 0.5.0

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Components/Overlay Extras',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+  argTypes: {
+    // Schema properties
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AlertDialogExample: Story = {
+  args: {
+    type: 'alert-dialog',
+    title: 'Schema/Feedback/Delete Account',
+    description: 'Are you sure you want to delete your account? This action cannot be undone.',
+    actionText: 'Yes, Delete',
+    cancelText: 'Cancel',
+    trigger: [
+        { type: 'button', content: 'Delete Account', variant: 'destructive' }
+    ]
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const ContextMenuExample: Story = {
+  args: {
+    type: 'context-menu',
+    triggerClassName: 'flex h-[150px] w-full items-center justify-center rounded-md border border-dashed text-sm',
+    trigger: [
+        { type: 'text', content: 'Right click here' }
+    ],
+    items: [
+        { label: 'Back', shortcut: '⌘[' },
+        { label: 'Forward', shortcut: '⌘]', disabled: true },
+        { label: 'Reload', shortcut: '⌘R' },
+        { type: 'separator' },
+        { label: 'Save As...', shortcut: '⇧⌘S' },
+        { label: 'Print...', shortcut: '⌘P' }
+    ]
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const DrawerExample: Story = {
+    args: {
+      type: 'drawer',
+      title: 'Schema/Feedback/Monthly Goal',
+      description: 'Set your daily activity goal.',
+      trigger: [
+          { type: 'button', content: 'Open Drawer', variant: 'outline' }
+      ],
+      content: [
+          { 
+              type: 'div', 
+              className: 'p-4 pb-0 items-center justify-center flex',
+              children: [
+                  { 
+                      type: 'div', 
+                      className: 'text-4xl font-bold p-10',
+                      children: [{ type: 'text', content: '400/500' }] 
+                  }
+              ] 
+          }
+      ],
+      footer: [
+          { type: 'button', content: 'Submit', className: 'w-full' },
+          { type: 'button', content: 'Cancel', variant: 'outline', className: 'w-full' }
+      ]
+    },
+    render: (args) => <SchemaRenderer schema={args} />
+  };
+
+export const MenubarExample: Story = {
+    args: {
+      type: 'menubar',
+      menus: [
+          {
+              label: 'File',
+              items: [
+                  { label: 'New Tab', shortcut: '⌘T' },
+                  { label: 'New Window', shortcut: '⌘N' },
+                  { separator: true },
+                  { label: 'Share', children: [
+                      { label: 'Email link' },
+                      { label: 'Messages' }
+                  ]},
+                  { separator: true },
+                  { label: 'Print' }
+              ]
+          },
+          {
+              label: 'Edit',
+              items: [
+                  { label: 'Undo', shortcut: '⌘Z' },
+                  { label: 'Redo', shortcut: '⇧⌘Z' }
+              ]
+          },
+          {
+              label: 'View',
+              items: [
+                  { label: 'Always Show Bookmarks Bar' },
+                  { label: 'Always Show Full URLs' }
+              ]
+          }
+      ]
+    },
+    render: (args) => <SchemaRenderer schema={args} />
+  };

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

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Overlay 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 Tooltip: Story = {
+  render: renderStory,
+  args: {
+    type: 'tooltip',
+    content: 'Add to library',
+    trigger: [
+        { type: 'button', props: { variant: 'outline' }, children: [{type:'text', content: 'Hover Me'}] }
+    ]
+  } as any,
+};
+
+export const Popover: Story = {
+  render: renderStory,
+  args: {
+    type: 'popover',
+    trigger: [
+        { type: 'button', props: { variant: 'outline' }, children: [{type: 'text', content: 'Open Popover'}] }
+    ],
+    content: [
+         { type: 'div', className: 'grid gap-4', children: [
+             { type: 'div', className: 'space-y-2', children: [
+                 { type: 'html', tag: 'h4', className: 'font-medium leading-none', content: 'Dimensions' },
+                 { type: 'text', content: 'Set the dimensions for the layer.', className: 'text-sm text-muted-foreground' }
+             ]},
+             { type: 'div', className: 'grid gap-2', children: [
+                 { type: 'input', label: 'Width', defaultValue: '100%' },
+                 { type: 'input', label: 'Max. width', defaultValue: '300px' },
+                 { type: 'input', label: 'Height', defaultValue: '25px' },
+                 { type: 'input', label: 'Max. height', defaultValue: 'none' },
+             ]}
+         ]}
+    ]
+  } as any,
+};
+
+export const HoverCard: Story = {
+    render: renderStory,
+    args: {
+      type: 'hover-card',
+      trigger: [
+          { type: 'button', props: { variant: 'link' }, children: [{ type: 'text', content: '@nextjs'}] }
+      ],
+      content: [
+          { type: 'div', className: 'flex justify-between space-x-4', children: [
+              { type: 'avatar', src: 'https://github.com/vercel.png', fallback: 'VC' },
+              { type: 'div', className: 'space-y-1', children: [
+                  { type: 'html', tag: 'h4', className: 'text-sm font-semibold', content: '@nextjs' },
+                  { type: 'text', content: 'The React Framework – created and maintained by @vercel.', className: 'text-sm' },
+                  { type: 'div', className: 'flex items-center pt-2', children: [
+                      { type: 'icon', name: 'calendar', className: 'mr-2 h-4 w-4 opacity-70' },
+                      { type: 'text', content: 'Joined December 2021', className: 'text-xs text-muted-foreground' }
+                  ]}
+              ]}
+          ]}
+      ]
+    } as any,
+  };

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+
+const meta: Meta = {
+  title: 'Templates/Page',
+  component: SchemaRenderer,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  argTypes: {
+    // Schema properties
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Page: Story = {
+  args: {
+    type: 'page',
+    title: 'Schema/Layout/Dashboard',
+    description: 'Overview of your project analysis.',
+    children: [
+        { 
+            type: 'grid', 
+            cols: { base: 1, md: 3 }, 
+            gap: 4,
+            children: [
+                { type: 'statistic', label: 'Total Revenue', value: '$45,231.89', trend: 'up', description: '+20.1% from last month' },
+                { type: 'statistic', label: 'Subscriptions', value: '+2350', trend: 'up', description: '+180.1% from last month' },
+                { type: 'statistic', label: 'Sales', value: '+12,234', trend: 'down', description: '-19% from last month' }
+            ]
+        },
+        { type: 'separator', className: 'my-6' },
+        { 
+             type: 'data-table',
+             caption: 'Recent Transactions',
+             columns: [
+                 { header: 'ID', accessorKey: 'id', width: '80px' },
+                 { header: 'Amount', accessorKey: 'amount' },
+                 { header: 'Status', accessorKey: 'status' }
+             ],
+             data: [
+                 { id: 1, amount: '$350.00', status: 'Paid' },
+                 { id: 2, amount: '$120.50', status: 'Processing' },
+                 { id: 3, amount: '$850.00', status: 'Paid' }
+             ]
+        }
+    ]
+  },
+  render: (args) => (
+    <SchemaRendererProvider dataSource={{}}>
+      <SchemaRenderer schema={args} />
+    </SchemaRendererProvider>
+  )
+};

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

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Templates/Reports',
+  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 ReportViewer: Story = {
+  render: renderStory,
+  args: {
+    type: 'report-viewer',
+    report: {
+      type: 'report',
+      title: 'Quarterly Sales Report',
+      description: 'Sales performance analysis for Q1 2024',
+      fields: [
+        { name: 'region', label: 'Region', type: 'string' },
+        { name: 'revenue', label: 'Revenue', type: 'number', aggregation: 'sum', showInSummary: true },
+        { name: 'units', label: 'Units Sold', type: 'number', aggregation: 'sum', showInSummary: true }
+      ],
+      sections: [
+        {
+          type: 'header',
+          title: 'Executive Summary'
+        },
+        {
+          type: 'summary',
+          title: 'Key Metrics'
+        },
+        {
+          type: 'chart',
+          title: 'Revenue by Region',
+          chart: {
+            type: 'chart',
+            chartType: 'bar',
+            data: [
+              { region: 'North', revenue: 45000 },
+              { region: 'South', revenue: 32000 },
+              { region: 'East', revenue: 38000 },
+              { region: 'West', revenue: 41000 },
+            ],
+            xAxisKey: 'region',
+            series: [{ dataKey: 'revenue' }],
+            config: {
+              revenue: { label: 'Revenue', color: '#3b82f6' }
+            }
+          }
+        },
+        {
+          type: 'table',
+          title: 'Detailed Breakdown',
+          columns: [
+            { name: 'region', label: 'Region' },
+            { name: 'revenue', label: 'Revenue' },
+            { name: 'units', label: 'Units Sold' }
+          ]
+        }
+      ],
+      showExportButtons: true
+    },
+    data: [
+      { region: 'North', revenue: 45000, units: 1200 },
+      { region: 'South', revenue: 32000, units: 850 },
+      { region: 'East', revenue: 38000, units: 1050 },
+      { region: 'West', revenue: 41000, units: 1100 },
+    ],
+    showToolbar: true,
+    allowExport: true,
+    allowPrint: true
+  } as any,
+};
+
+export const ReportViewerMinimal: Story = {
+  render: renderStory,
+  args: {
+    type: 'report-viewer',
+    report: {
+      type: 'report',
+      title: 'Simple Report',
+      description: 'Basic report without sections',
+      fields: [
+        { name: 'product', label: 'Product' },
+        { name: 'sales', label: 'Sales' },
+      ],
+    },
+    data: [
+      { product: 'Widget A', sales: 1200 },
+      { product: 'Widget B', sales: 850 },
+      { product: 'Widget C', sales: 1450 },
+    ],
+    showToolbar: false,
+  } as any,
+};
+
+export const ReportBuilder: Story = {
+  render: renderStory,
+  args: {
+    type: 'report-builder',
+    availableFields: [
+      { name: 'revenue', label: 'Revenue', type: 'number' },
+      { name: 'units', label: 'Units Sold', type: 'number' },
+      { name: 'region', label: 'Region', type: 'string' },
+      { name: 'product', label: 'Product', type: 'string' },
+      { name: 'date', label: 'Date', type: 'date' },
+      { name: 'customer', label: 'Customer', type: 'string' }
+    ],
+    showPreview: true,
+    onSave: 'handleSaveReport',
+    onCancel: 'handleCancel'
+  } as any,
+};
+
+export const ReportBuilderWithInitialConfig: Story = {
+  render: renderStory,
+  args: {
+    type: 'report-builder',
+    report: {
+      type: 'report',
+      title: 'Monthly Sales Report',
+      description: 'Sales performance tracking by region',
+      fields: [
+        { name: 'revenue', label: 'Revenue', type: 'number', aggregation: 'sum', showInSummary: true },
+        { name: 'units', label: 'Units Sold', type: 'number', aggregation: 'count', showInSummary: true },
+        { name: 'region', label: 'Region', type: 'string' }
+      ],
+      filters: [
+        { field: 'date', operator: 'greater_than', value: '2024-01-01' }
+      ],
+      groupBy: [
+        { field: 'region', sort: 'asc' }
+      ],
+      sections: [
+        { type: 'header', title: 'Executive Summary' },
+        { type: 'summary', title: 'Key Metrics' },
+        { type: 'table', title: 'Detailed Data' }
+      ],
+      showExportButtons: true,
+      defaultExportFormat: 'pdf'
+    },
+    availableFields: [
+      { name: 'revenue', label: 'Revenue', type: 'number' },
+      { name: 'units', label: 'Units Sold', type: 'number' },
+      { name: 'region', label: 'Region', type: 'string' },
+      { name: 'product', label: 'Product', type: 'string' },
+      { name: 'date', label: 'Date', type: 'date' }
+    ],
+    showPreview: true,
+  } as any,
+};

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Resizable',
+  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 Resizable: Story = {
+  render: renderStory,
+  args: {
+    type: 'resizable',
+    className: 'max-w-md rounded-lg border',
+    minHeight: '200px',
+    panels: [
+        { 
+            defaultSize: 50, 
+            content: [
+                { type: 'div', className: 'flex h-full items-center justify-center p-6', children: [{type:'text', className:'font-semibold', content:'One'}] }
+            ] 
+        },
+        { 
+            defaultSize: 50, 
+            content: [
+                 { type: 'resizable', direction: 'vertical', children: [], panels: [
+                     { defaultSize: 25, content: [{ type: 'div', className: 'flex h-full items-center justify-center p-6', children: [{type:'text', className:'font-semibold', content:'Two'}] }] },
+                     { defaultSize: 75, content: [{ type: 'div', className: 'flex h-full items-center justify-center p-6', children: [{type:'text', className:'font-semibold', content:'Three'}] }] }
+                 ] }
+            ] 
+        }
+    ]
+  } as any,
+};

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Select',
+  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 Select: Story = {
+  render: renderStory,
+  args: {
+    type: 'select',
+    label: 'Framework',
+    placeholder: 'Select a framework',
+    wrapperClass: 'w-[280px]',
+    options: [
+        { label: 'Next.js', value: 'next' },
+        { label: 'SvelteKit', value: 'svelte' },
+        { label: 'Astro', value: 'astro' },
+        { label: 'Nuxt', value: 'nuxt' }
+    ]
+  } as any,
+};

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Separator',
+  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 Separator: Story = {
+  render: renderStory,
+  args: {
+    type: 'div',
+    className: 'text-sm font-medium',
+    children: [
+        { type: 'text', content: 'Radix Primitives' },
+        { type: 'separator', className: 'my-4' },
+        { 
+            type: 'div', 
+            className: 'flex h-5 items-center space-x-4 text-sm',
+            children: [
+                { type: 'text', content: 'Blog' },
+                { type: 'separator', orientation: 'vertical' },
+                { type: 'text', content: 'Docs' },
+                { type: 'separator', orientation: 'vertical' },
+                { type: 'text', content: 'Source' }
+            ]
+        }
+    ]
+  } as any,
+};

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

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Templates/Sidebar',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+  argTypes: {
+    // Schema properties
+  },
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Helper to minimize nesting
+const sidebarMenu = (items: { label: string, icon?: string, active?: boolean }[]) => ({
+  type: 'sidebar-menu',
+  body: items.map(item => ({
+    type: 'sidebar-menu-item',
+    body: [
+      {
+        type: 'sidebar-menu-button',
+        active: item.active,
+        tooltip: item.label,
+        body: [
+          item.icon ? { type: 'icon', name: item.icon } : null,
+          { type: 'text', content: item.label }
+        ]
+      }
+    ]
+  }))
+});
+
+export const DefaultSidebar: Story = {
+  args: {
+    type: 'sidebar-provider',
+    defaultOpen: true,
+    style: { height: '600px', border: '1px solid #e2e8f0' }, // Constrain height for storybook
+    body: [
+      {
+        type: 'sidebar',
+        collapsible: 'icon',
+        body: [
+          {
+            type: 'sidebar-header',
+            body: [
+               { 
+                 type: 'sidebar-menu',
+                 body: [{
+                   type: 'sidebar-menu-item',
+                   body: [{
+                     type: 'sidebar-menu-button',
+                     size: 'lg',
+                     body: [
+                       { 
+                         type: 'div', 
+                         className: 'flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground',
+                         children: [{ type: 'icon', name: 'flower-2', className: 'size-4' }] 
+                       },
+                       {
+                         type: 'div',
+                         className: 'grid flex-1 text-left text-sm leading-tight',
+                         children: [
+                            { type: 'span', className: 'truncate font-semibold', children: [{ type: 'text', content: 'Acme Inc' }] },
+                            { type: 'span', className: 'truncate text-xs', children: [{ type: 'text', content: 'Enterprise' }] }
+                         ]
+                       }
+                     ]
+                   }]
+                 }]
+               }
+            ]
+          },
+          {
+            type: 'sidebar-content',
+            body: [
+              {
+                type: 'sidebar-group',
+                label: 'Platform',
+                body: [
+                    sidebarMenu([
+                        { label: 'Playground', icon: 'terminal', active: true },
+                        { label: 'Models', icon: 'bot' },
+                        { label: 'Documentation', icon: 'book-open' },
+                        { label: 'Settings', icon: 'settings-2' }
+                    ])
+                ]
+              },
+              {
+                type: 'sidebar-group',
+                label: 'Projects',
+                body: [
+                    sidebarMenu([
+                        { label: 'Design Engineering', icon: 'frame' },
+                        { label: 'Sales & Marketing', icon: 'pie-chart' },
+                        { label: 'Travel', icon: 'map' }
+                    ])
+                ]
+              }
+            ]
+          },
+          {
+            type: 'sidebar-footer',
+            body: [
+               sidebarMenu([
+                   { label: 'User Account', icon: 'user' }
+               ])
+            ]
+          }
+        ]
+      },
+      {
+        type: 'sidebar-inset',
+        body: [
+          {
+            type: 'header-bar',
+            crumbs: [
+                { label: 'Building Your Application', href: '#' },
+                { label: 'Data Fetching' }
+            ]
+          },
+          {
+            type: 'div',
+            className: 'flex flex-1 flex-col gap-4 p-4 pt-0',
+            children: [
+                {
+                    type: 'div',
+                    className: 'grid auto-rows-min gap-4 md:grid-cols-3',
+                    children: [
+                        { type: 'div', className: 'aspect-video rounded-xl bg-muted/50' },
+                        { type: 'div', className: 'aspect-video rounded-xl bg-muted/50' },
+                        { type: 'div', className: 'aspect-video rounded-xl bg-muted/50' }
+                    ]
+                },
+                { type: 'div', className: 'min-h-[100vh] flex-1 rounded-xl bg-muted/50' }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};