@object-ui/components 3.3.0 → 3.3.1

package/src/stories-json/crm-live-data.stories.tsx

@@ -1,154 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useEffect, useState, useCallback } from 'react';
-import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
-import type { BaseSchema } from '@object-ui/types';
-import { createStorybookDataSource } from '@storybook-config/datasource';
-
-const meta: Meta = {
-  title: 'Plugins/Data Views/CRM Live Data',
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-export default meta;
-
-const dataSource = createStorybookDataSource();
-
-// ==========================================
-// Helper: Fetches data from MSW and renders a schema
-// ==========================================
-const LiveDataView = ({ 
-  objectName, 
-  schema, 
-  title 
-}: { 
-  objectName: string; 
-  schema: (data: any[]) => BaseSchema;
-  title: string;
-}) => {
-    const [data, setData] = useState<any[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    const fetchData = useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const result = await dataSource.find(objectName, { $top: 50 });
-            setData(result.data as any[]);
-        } catch (err: any) {
-            console.error(`[CRM Live] Failed to fetch ${objectName}:`, err);
-            setError(err?.message || `Failed to fetch ${objectName}`);
-        } finally {
-            setLoading(false);
-        }
-    }, [objectName]);
-
-    useEffect(() => {
-        fetchData();
-    }, [fetchData]);
-
-    if (loading) return <div className="p-8 text-muted-foreground">Loading {title} from MSW API...</div>;
-    if (error) return (
-        <div className="p-8 space-y-2">
-            <div className="text-destructive font-medium">API Error: {error}</div>
-            <div className="text-sm text-muted-foreground">
-                Ensure the ObjectStack MSW runtime is running. Check browser console for logs.
-            </div>
-        </div>
-    );
-
-    return (
-        <SchemaRendererProvider dataSource={dataSource}>
-            <div className="space-y-4">
-                <h2 className="text-lg font-semibold">{title} ({data.length} records)</h2>
-                <SchemaRenderer schema={schema(data)} />
-            </div>
-        </SchemaRendererProvider>
-    );
-};
-
-// ==========================================
-// Contact Grid from MSW
-// ==========================================
-export const ContactGrid: StoryObj = {
-    name: 'Contact Grid (Live)',
-    render: () => (
-        <LiveDataView
-            objectName="contact"
-            title="Contacts"
-            schema={(data) => ({
-                type: 'object-grid',
-                objectName: 'contact',
-                columns: [
-                    { field: 'name', header: 'Name', sortable: true, filterable: true },
-                    { field: 'email', header: 'Email', sortable: true },
-                    { field: 'title', header: 'Title' },
-                    { field: 'department', header: 'Department' },
-                    { field: 'status', header: 'Status', sortable: true },
-                ],
-                data,
-                pagination: true,
-                pageSize: 10,
-                className: 'w-full',
-            } as any)}
-        />
-    ),
-};
-
-// ==========================================
-// Account Grid from MSW
-// ==========================================
-export const AccountGrid: StoryObj = {
-    name: 'Account Grid (Live)',
-    render: () => (
-        <LiveDataView
-            objectName="account"
-            title="Accounts"
-            schema={(data) => ({
-                type: 'object-grid',
-                objectName: 'account',
-                columns: [
-                    { field: 'name', header: 'Company', sortable: true, filterable: true },
-                    { field: 'industry', header: 'Industry', sortable: true },
-                    { field: 'type', header: 'Type' },
-                    { field: 'employees', header: 'Employees', type: 'number' },
-                    { field: 'phone', header: 'Phone' },
-                ],
-                data,
-                pagination: true,
-                pageSize: 10,
-                className: 'w-full',
-            } as any)}
-        />
-    ),
-};
-
-// ==========================================
-// Opportunity Grid from MSW
-// ==========================================
-export const OpportunityGrid: StoryObj = {
-    name: 'Opportunity Grid (Live)',
-    render: () => (
-        <LiveDataView
-            objectName="opportunity"
-            title="Opportunities"
-            schema={(data) => ({
-                type: 'object-grid',
-                objectName: 'opportunity',
-                columns: [
-                    { field: 'name', header: 'Opportunity', sortable: true },
-                    { field: 'amount', header: 'Amount', type: 'currency', sortable: true },
-                    { field: 'stage', header: 'Stage', sortable: true },
-                    { field: 'probability', header: 'Probability' },
-                    { field: 'close_date', header: 'Close Date', type: 'date' },
-                ],
-                data,
-                pagination: true,
-                pageSize: 10,
-                className: 'w-full',
-            } as any)}
-        />
-    ),
-};

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

@@ -1,318 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Templates/Dashboard',
-  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: 'dashboard',
-    columns: 3,
-    gap: 4,
-    widgets: [
-      { 
-        id: 'metric-1',
-        component: {
-          type: 'metric', 
-          label: 'Total Revenue',
-          value: '$45,231.89',
-        }
-      },
-      { 
-        id: 'metric-2',
-        component: {
-          type: 'metric', 
-          label: 'Active Users',
-          value: '2,350',
-        }
-      },
-      { 
-        id: 'metric-3',
-        component: {
-          type: 'metric', 
-          label: 'Conversion Rate',
-          value: '12.5%',
-        }
-      }
-    ]
-  } as any,
-};
-
-export const WithCards: Story = {
-  render: renderStory,
-  args: {
-    type: 'dashboard',
-    columns: 2,
-    gap: 6,
-    widgets: [
-      {
-        id: 'card-1',
-        title: 'Sales Overview',
-        component: {
-          type: 'card',
-          children: [
-            { type: 'metric', label: 'Today', value: '$1,234' },
-            { type: 'metric', label: 'This Week', value: '$8,456' },
-          ],
-        }
-      },
-      {
-        id: 'card-2',
-        title: 'User Metrics',
-        component: {
-          type: 'card',
-          children: [
-            { type: 'metric', label: 'Online', value: '456' },
-            { type: 'metric', label: 'New Today', value: '89' },
-          ],
-        }
-      }
-    ]
-  } as any,
-};
-
-export const WithMetricCards: Story = {
-  render: renderStory,
-  args: {
-    type: 'dashboard',
-    columns: 3,
-    gap: 4,
-    widgets: [
-      {
-        id: 'metric-card-1',
-        component: {
-          type: 'metric-card',
-          title: 'Total Revenue',
-          value: '$45,231.89',
-          icon: 'DollarSign',
-          trend: 'up',
-          trendValue: '+20.1%',
-          description: 'from last month'
-        },
-        layout: { x: 0, y: 0, w: 1, h: 1 }
-      },
-      {
-        id: 'metric-card-2',
-        component: {
-          type: 'metric-card',
-          title: 'New Customers',
-          value: '+2,350',
-          icon: 'Users',
-          trend: 'up',
-          trendValue: '+180.1%',
-          description: 'from last month'
-        },
-        layout: { x: 1, y: 0, w: 1, h: 1 }
-      },
-      {
-        id: 'metric-card-3',
-        component: {
-          type: 'metric-card',
-          title: 'Active Sessions',
-          value: '+573',
-          icon: 'Activity',
-          trend: 'up',
-          trendValue: '+201',
-          description: 'since last hour'
-        },
-        layout: { x: 2, y: 0, w: 1, h: 1 }
-      }
-    ]
-  } as any,
-};
-
-export const WithChartsAndMetrics: Story = {
-  render: renderStory,
-  args: {
-    type: 'dashboard',
-    columns: 3,
-    gap: 4,
-    widgets: [
-      {
-        id: 'metric-1',
-        component: {
-          type: 'metric-card',
-          title: 'Total Revenue',
-          value: '$45,231',
-          icon: 'DollarSign',
-          trend: 'up',
-          trendValue: '+12%'
-        },
-        layout: { x: 0, y: 0, w: 1, h: 1 }
-      },
-      {
-        id: 'metric-2',
-        component: {
-          type: 'metric-card',
-          title: 'Orders',
-          value: '856',
-          icon: 'ShoppingCart',
-          trend: 'up',
-          trendValue: '+8%'
-        },
-        layout: { x: 1, y: 0, w: 1, h: 1 }
-      },
-      {
-        id: 'metric-3',
-        component: {
-          type: 'metric-card',
-          title: 'Bounce Rate',
-          value: '2.4%',
-          icon: 'TrendingDown',
-          trend: 'down',
-          trendValue: '-5%'
-        },
-        layout: { x: 2, y: 0, w: 1, h: 1 }
-      },
-      {
-        id: 'chart-1',
-        title: 'Revenue Overview',
-        component: {
-          type: 'chart',
-          chartType: 'line',
-          data: [
-            { month: 'Jan', revenue: 4000 },
-            { month: 'Feb', revenue: 3000 },
-            { month: 'Mar', revenue: 6000 },
-            { month: 'Apr', revenue: 8000 },
-            { month: 'May', revenue: 5000 },
-            { month: 'Jun', revenue: 7000 },
-          ],
-          xAxisKey: 'month',
-          series: [{ dataKey: 'revenue' }],
-          config: {
-            revenue: { label: 'Revenue', color: '#10b981' }
-          }
-        },
-        layout: { x: 0, y: 1, w: 3, h: 2 }
-      }
-    ]
-  } as any,
-};
-
-export const WithGridLayout: Story = {
-  render: renderStory,
-  args: {
-    type: 'dashboard',
-    name: 'sales_dashboard',
-    title: 'Sales Analytics Dashboard',
-    enableGridLayout: true,
-    persistLayout: true,
-    widgets: [
-      {
-        id: 'total-revenue',
-        type: 'metric-card',
-        title: 'Total Revenue',
-        value: '$142,892',
-        change: '+12.5%',
-        trend: 'up',
-        layout: { x: 0, y: 0, w: 3, h: 2 },
-      },
-      {
-        id: 'new-customers',
-        type: 'metric-card',
-        title: 'New Customers',
-        value: '847',
-        change: '+8.2%',
-        trend: 'up',
-        layout: { x: 3, y: 0, w: 3, h: 2 },
-      },
-      {
-        id: 'conversion-rate',
-        type: 'metric-card',
-        title: 'Conversion Rate',
-        value: '3.24%',
-        change: '-0.5%',
-        trend: 'down',
-        layout: { x: 6, y: 0, w: 3, h: 2 },
-      },
-      {
-        id: 'revenue-chart',
-        type: 'bar',
-        title: 'Monthly Revenue',
-        data: [
-          { month: 'Jan', revenue: 12000 },
-          { month: 'Feb', revenue: 15000 },
-          { month: 'Mar', revenue: 18000 },
-          { month: 'Apr', revenue: 14000 },
-          { month: 'May', revenue: 20000 },
-          { month: 'Jun', revenue: 22000 },
-        ],
-        xAxisKey: 'month',
-        series: [{ dataKey: 'revenue' }],
-        layout: { x: 0, y: 2, w: 6, h: 4 },
-      },
-      {
-        id: 'top-products',
-        type: 'table',
-        title: 'Top Products',
-        columns: ['Product', 'Sales', 'Revenue'],
-        data: [
-          { Product: 'Product A', Sales: 245, Revenue: '$12,450' },
-          { Product: 'Product B', Sales: 189, Revenue: '$9,450' },
-          { Product: 'Product C', Sales: 156, Revenue: '$7,800' },
-        ],
-        layout: { x: 6, y: 2, w: 3, h: 4 },
-      },
-    ],
-  } as any,
-};
-
-export const EditableLayout: Story = {
-  render: renderStory,
-  args: {
-    type: 'dashboard',
-    name: 'custom_dashboard',
-    title: 'Customizable Dashboard',
-    enableGridLayout: true,
-    enableEditMode: true,
-    persistLayout: true,
-    widgets: [
-      {
-        id: 'widget-1',
-        type: 'metric-card',
-        title: 'Metric 1',
-        value: '1,234',
-        layout: { x: 0, y: 0, w: 3, h: 2 },
-      },
-      {
-        id: 'widget-2',
-        type: 'metric-card',
-        title: 'Metric 2',
-        value: '5,678',
-        layout: { x: 3, y: 0, w: 3, h: 2 },
-      },
-      {
-        id: 'widget-3',
-        type: 'line',
-        title: 'Trend Chart',
-        data: [
-          { date: 'Mon', value: 100 },
-          { date: 'Tue', value: 150 },
-          { date: 'Wed', value: 130 },
-          { date: 'Thu', value: 180 },
-          { date: 'Fri', value: 200 },
-        ],
-        xAxisKey: 'date',
-        series: [{ dataKey: 'value' }],
-        layout: { x: 0, y: 2, w: 6, h: 3 },
-      },
-    ],
-  } as any,
-};

package/src/stories-json/data-table.stories.tsx

@@ -1,136 +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: Meta = {
-  title: 'Primitives/Data Display/Table',
-  component: SchemaRenderer,
-  tags: ['autodocs'],
-  argTypes: {
-    // Schema properties
-  }
-};
-
-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 DataTable: Story = {
-  args: {
-    type: 'data-table',
-    caption: 'Employees',
-    columns: [
-        { header: 'ID', accessorKey: 'id', width: '80px' },
-        { header: 'Name', accessorKey: 'name' },
-        { header: 'Email', accessorKey: 'email' },
-        { header: 'Role', accessorKey: 'role' },
-    ],
-    data: [
-        { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
-        { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
-        { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' }
-    ]
-  },
-  render: renderStory
-};
-
-export const FullFeatures: Story = {
-    args: {
-      type: 'data-table',
-      caption: 'Full Feature Table',
-      searchable: true,
-      pagination: true,
-      selectable: true,
-      sortable: true,
-      exportable: true,
-      rowActions: true,
-      pageSize: 5,
-      columns: [
-          { header: 'Invoice', accessorKey: 'invoice' },
-          { header: 'Status', accessorKey: 'status' },
-          { header: 'Amount', accessorKey: 'amount', enableSorting: true },
-          { header: 'Method', accessorKey: 'method' }
-      ],
-      data: Array.from({ length: 20 }).map((_, i) => ({
-          invoice: `INV-${1000 + i}`,
-          status: i % 3 === 0 ? 'Paid' : 'Pending',
-          amount: `$${(Math.random() * 500).toFixed(2)}`,
-          method: i % 2 === 0 ? 'Credit Card' : 'PayPal'
-      }))
-    },
-    render: renderStory
-  };
-
-export const EditableTable: Story = {
-    args: {
-      type: 'data-table',
-      caption: 'Editable Product Inventory - Simple Cell Editing',
-      searchable: false,
-      pagination: false,
-      editable: true,
-      columns: [
-          { header: 'SKU', accessorKey: 'sku', width: '100px', editable: false },
-          { header: 'Product Name', accessorKey: 'name' },
-          { header: 'Price', accessorKey: 'price' },
-          { header: 'Stock', accessorKey: 'stock' }
-      ],
-      data: [
-          { sku: 'PROD-001', name: 'Laptop', price: '$1299.99', stock: 15 },
-          { sku: 'PROD-002', name: 'Mouse', price: '$29.99', stock: 120 },
-          { sku: 'PROD-003', name: 'Keyboard', price: '$79.99', stock: 45 },
-          { sku: 'PROD-004', name: 'Monitor', price: '$399.99', stock: 22 }
-      ],
-      onCellChange: (rowIndex: number, columnKey: string, newValue: any, row: any) => {
-        console.log('Cell edited:', { rowIndex, columnKey, newValue, row });
-        alert(`Updated ${columnKey} to "${newValue}" for ${row.name}`);
-      }
-    },
-    render: renderStory
-  };
-
-export const BatchEditTable: Story = {
-    args: {
-      type: 'data-table',
-      caption: 'Batch Edit Mode - Edit Multiple Rows & Save Together (💡 Double-click cells to edit, then see save buttons appear)',
-      searchable: false,
-      pagination: false,
-      editable: true,
-      rowActions: true,
-      columns: [
-          { header: 'ID', accessorKey: 'id', width: '60px', editable: false },
-          { header: 'Product Name', accessorKey: 'name' },
-          { header: 'Category', accessorKey: 'category' },
-          { header: 'Price', accessorKey: 'price' },
-          { header: 'Stock', accessorKey: 'stock' }
-      ],
-      data: [
-          { id: 1, name: 'Wireless Mouse', category: 'Electronics', price: '$29.99', stock: 50 },
-          { id: 2, name: 'USB-C Cable', category: 'Accessories', price: '$12.99', stock: 100 },
-          { id: 3, name: 'Laptop Stand', category: 'Accessories', price: '$45.99', stock: 25 },
-          { id: 4, name: 'Webcam HD', category: 'Electronics', price: '$79.99', stock: 15 },
-          { id: 5, name: 'Desk Lamp', category: 'Furniture', price: '$34.99', stock: 30 }
-      ],
-      onRowSave: async (rowIndex: number, changes: Record<string, any>, row: any) => {
-        console.log('Saving single row:', { rowIndex, changes, row });
-        await new Promise(resolve => setTimeout(resolve, 500));
-        alert(`✓ Saved changes for "${row.name}":\n${JSON.stringify(changes, null, 2)}`);
-      },
-      onBatchSave: async (allChanges: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => {
-        console.log('Batch saving all rows:', allChanges);
-        await new Promise(resolve => setTimeout(resolve, 800));
-        const summary = allChanges.map(c => `${c.row.name}: ${Object.keys(c.changes).length} field(s)`).join('\n');
-        alert(`✓ Batch saved ${allChanges.length} rows:\n\n${summary}`);
-      }
-    },
-    render: renderStory
-  };
-

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

@@ -1,102 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-
-const meta: Meta = {
-  title: 'Primitives/Data Display/Extras',
-  component: SchemaRenderer,
-  tags: ['autodocs'],
-  argTypes: {
-    // Schema properties
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const KeyboardKey: Story = {
-  args: {
-    type: 'kbd',
-    keys: ['⌘', 'K'],
-    className: 'text-xs'
-  },
-  render: (args) => <SchemaRenderer schema={args} />
-};
-
-export const ListUnordered: Story = {
-  args: {
-    type: 'list',
-    title: 'Schema/Data Display/Technology Stack',
-    ordered: false,
-    items: [
-        'React',
-        'TypeScript',
-        'Tailwind CSS',
-        { content: 'Storybook', className: 'font-bold' }
-    ]
-  },
-  render: (args) => <SchemaRenderer schema={args} />
-};
-
-export const ListOrdered: Story = {
-  args: {
-    type: 'list',
-    title: 'Schema/Data Display/Installation Steps',
-    ordered: true,
-    items: [
-        'Run npm install',
-        'Configure provider',
-        'Start application'
-    ]
-  },
-  render: (args) => <SchemaRenderer schema={args} />
-};
-
-export const SimpleTable: Story = {
-  args: {
-    type: 'table',
-    bind: 'users',
-    columns: [
-        { key: 'id', label: 'ID' },
-        { key: 'name', label: 'Name' },
-        { key: 'role', label: 'Role' }
-    ]
-  },
-  decorators: [
-    (Story) => (
-      <div className="p-4">
-        {/* Mock data context would be needed here, but since stories don't have easy data injection without a provider, 
-            we rely on the renderer handling undefined/empty data gracefully, or we wrap it in a provider if available using decorators.
-            However, SchemaRenderer doesn't accept a provider prop directly. 
-            The users will see "Table data must be an array" or Empty state.
-            Hack: We can't easily inject data into the unified SchemaRenderer story pattern without a wrapping provider in the story.
-         */}
-         <Story />
-      </div>
-    )
-  ],
-  render: (args) => <SchemaRenderer schema={args} />
-};
-
-export const TreeView: Story = {
-  args: {
-    type: 'tree-view',
-    title: 'Schema/Data Display/Project Files',
-    nodes: [
-        {
-          id: 'src',
-          label: 'src',
-          icon: 'folder',
-          children: [
-             { id: 'components', label: 'components', icon: 'folder', children: [{id: 'Button.tsx', label: 'Button.tsx', icon: 'file'}] },
-             { id: 'App.tsx', label: 'App.tsx', icon: 'file' }
-          ]
-        },
-        {
-          id: 'package.json',
-          label: 'package.json',
-          icon: 'file'
-        }
-    ]
-  },
-  render: (args) => <SchemaRenderer schema={args} />
-};