@object-ui/components 0.3.1 → 0.5.0

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

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Components/Table',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+  argTypes: {
+    // Schema properties
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+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: (args) => <SchemaRenderer schema={args} />
+};
+
+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: (args) => <SchemaRenderer schema={args} />
+  };

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

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

package/src/stories-json/date-picker.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Date Picker',
+  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 DatePicker: Story = {
+  render: renderStory,
+  args: {
+    type: 'date-picker',
+    label: 'Date of birth',
+    placeholder: 'Pick a date',
+    description: 'Your date of birth is used to calculate your age.'
+  } as any,
+};