@object-ui/components 0.3.1 → 2.0.0

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

@@ -0,0 +1,118 @@
+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/Data Views/Object View',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Create a DataSource instance that connects to MSW
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const UserProfile: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-view',
+    objectName: 'User',
+    layout: 'card',
+    data: {
+      id: 1,
+      name: 'John Doe',
+      email: 'john.doe@example.com',
+      role: 'Administrator',
+      status: 'Active',
+      joinedDate: '2023-01-15',
+      department: 'Engineering'
+    },
+    fields: [
+      { name: 'id', label: 'User ID', type: 'text' },
+      { name: 'name', label: 'Full Name', type: 'text' },
+      { name: 'email', label: 'Email Address', type: 'email' },
+      { name: 'role', label: 'Role', type: 'text' },
+      { name: 'status', label: 'Status', type: 'badge' },
+      { name: 'joinedDate', label: 'Joined Date', type: 'date' },
+      { name: 'department', label: 'Department', type: 'text' }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+export const ProductDetails: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-view',
+    objectName: 'Product',
+    layout: 'table',
+    data: {
+      sku: 'PROD-12345',
+      name: 'Professional Laptop',
+      category: 'Electronics',
+      brand: 'TechCorp',
+      price: 1299.99,
+      stock: 45,
+      description: 'High-performance laptop for professionals',
+      rating: 4.5,
+      reviews: 128
+    },
+    fields: [
+      { name: 'sku', label: 'SKU', type: 'text' },
+      { name: 'name', label: 'Product Name', type: 'text' },
+      { name: 'category', label: 'Category', type: 'text' },
+      { name: 'brand', label: 'Brand', type: 'text' },
+      { name: 'price', label: 'Price', type: 'currency' },
+      { name: 'stock', label: 'In Stock', type: 'number' },
+      { name: 'description', label: 'Description', type: 'textarea' },
+      { name: 'rating', label: 'Rating', type: 'number' },
+      { name: 'reviews', label: 'Reviews', type: 'number' }
+    ],
+    className: 'w-full max-w-3xl'
+  } as any,
+};
+
+export const OrderSummary: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-view',
+    objectName: 'Order',
+    layout: 'card',
+    data: {
+      orderId: 'ORD-98765',
+      customer: 'Alice Johnson',
+      orderDate: '2024-01-20',
+      total: 456.78,
+      status: 'Processing',
+      shippingAddress: '456 Oak Street, San Francisco, CA 94102',
+      items: 3,
+      trackingNumber: 'TRK123456789'
+    },
+    fields: [
+      { name: 'orderId', label: 'Order ID', type: 'text' },
+      { name: 'customer', label: 'Customer Name', type: 'text' },
+      { name: 'orderDate', label: 'Order Date', type: 'date' },
+      { name: 'total', label: 'Total Amount', type: 'currency' },
+      { name: 'status', label: 'Status', type: 'badge' },
+      { name: 'shippingAddress', label: 'Shipping Address', type: 'textarea' },
+      { name: 'items', label: 'Number of Items', type: 'number' },
+      { name: 'trackingNumber', label: 'Tracking Number', type: 'text' }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};

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: 'Primitives/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: 'Primitives/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: 'Primitives/Layout/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: 'Primitives/Data Entry/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: 'Primitives/General/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,
+};