@object-ui/components 0.5.0 → 2.0.0

package/src/stories/MockedData.stories.tsx

@@ -1,71 +1,121 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
-import { PageSchema } from '@object-ui/types';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
 
-// Define a schema that binds to fetched data
-const contactDetailSchema: PageSchema = {
+// ==========================================
+// Story 1: Static Data Binding
+// ==========================================
+// Demonstrates how JSON schemas can reference data via expressions like ${data.field}
+
+const staticDataSchema: BaseSchema = {
     type: "page",
-    props: { title: "Contact Details (Mocked)" },
+    props: { title: "Static Data Binding" },
     children: [
         {
             type: "page:header",
             props: {
-                title: "${data.name}", 
-                description: "${data.title} at ${data.company}"
+                title: "Sarah Connors",
+                description: "Lead Engineer at Cyberdyne Systems"
             }
         },
         {
-            type: "view:simple", 
-            props: { columns: 2, className: "mt-4 border p-4 rounded" },
+            type: "grid",
+            props: { cols: 2, gap: 4, className: "mt-4" },
             children: [
-                { type: "field:text", bind: "name", props: { label: "Full Name", readonly: true } },
-                { type: "field:email", bind: "email", props: { label: "Email", readonly: true } },
-                { type: "field:text", bind: "status", props: { label: "Status", readonly: true } }
+                { type: "card", title: "Full Name", children: [{ type: "text", content: "Sarah Connors" }] },
+                { type: "card", title: "Email", children: [{ type: "text", content: "sarah@cyberdyne.com" }] },
+                { type: "card", title: "Status", children: [{ type: "badge", props: { variant: "default", children: "Active" } }] },
+                { type: "card", title: "Department", children: [{ type: "text", content: "Engineering" }] },
             ]
         }
     ]
 };
 
-// A wrapper component that fetches data from the MSW mock
-const DataFetcher = () => {
-    const [data, setData] = useState<any>(null);
+// ==========================================
+// Story 2: MSW-Backed Data (Live API)
+// ==========================================
+// The ObjectStack kernel seeds CRM data via MSW. This story fetches contacts from /api/v1.
 
-    useEffect(() => {
-        // Simulate a fetch call locally since MSW might not be configured in this environment
-        const mockData = {
-            name: "Sarah Connors",
-            title: "Lead Engineer",
-            company: "Cyberdyne Systems",
-            email: "sarah@cyberdyne.com",
-            status: "Active"
-        };
+const dataSource = createStorybookDataSource();
 
-        const timer = setTimeout(() => {
-            setData(mockData);
-        }, 800);
+const ContactListFromAPI = () => {
+    const [contacts, setContacts] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
 
-        return () => clearTimeout(timer);
+    const fetchContacts = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await dataSource.find('contact', { $top: 10 });
+            setContacts(result.data as any[]);
+        } catch (err: any) {
+            console.error('[Data Binding] Failed to fetch contacts:', err);
+            setError(err?.message || 'Failed to fetch data from MSW API');
+        } finally {
+            setLoading(false);
+        }
     }, []);
 
-    if (!data) return <div className="p-4">Loading data from MSW...</div>;
+    useEffect(() => {
+        fetchContacts();
+    }, [fetchContacts]);
+
+    if (loading) return <div className="p-8 text-muted-foreground">Loading contacts 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">
+                This story requires the ObjectStack MSW runtime to be running.
+                Check the browser console for [Storybook MSW] logs.
+            </div>
+        </div>
+    );
+
+    const gridSchema: BaseSchema = {
+        type: 'object-grid',
+        objectName: 'contact',
+        columns: [
+            { field: 'name', header: 'Name', sortable: true },
+            { field: 'email', header: 'Email', sortable: true },
+            { field: 'title', header: 'Title' },
+            { field: 'status', header: 'Status' },
+        ],
+        data: contacts,
+        className: 'w-full'
+    } as any;
 
     return (
-        <SchemaRendererProvider dataSource={data}>
-            <SchemaRenderer schema={contactDetailSchema} />
+        <SchemaRendererProvider dataSource={dataSource}>
+            <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                    <h2 className="text-lg font-semibold">Contacts from MSW ({contacts.length} records)</h2>
+                </div>
+                <SchemaRenderer schema={gridSchema} />
+            </div>
         </SchemaRendererProvider>
     );
 };
 
+// ==========================================
+// Meta
+// ==========================================
+
 const meta: Meta = {
-  title: 'Guide/Mocked Data',
-  component: DataFetcher,
+  title: 'Getting Started/Data Binding',
   parameters: {
-      // We can also override handlers per story here if needed
-      // msw: { handlers: [...] }
-  }
+      layout: 'padded',
+  },
 };
 
 export default meta;
 
-export const Default: StoryObj = {};
+export const StaticData: StoryObj = {
+    render: () => <SchemaRenderer schema={staticDataSchema} />,
+};
+
+export const LiveAPI: StoryObj = {
+    render: () => <ContactListFromAPI />,
+};

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Accordion',
+  title: 'Primitives/Data Display/Accordion',
   component: SchemaRenderer,
   parameters: { layout: 'padded' },
   tags: ['autodocs'],

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Views/Data Grid (AgGrid)',
+  title: 'Plugins/Data Views/AgGrid',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Alert',
+  title: 'Primitives/Feedback/Alert',
   component: SchemaRenderer,
   parameters: { layout: 'padded' },
   tags: ['autodocs'],

package/src/stories-json/aspect-ratio.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Aspect Ratio',
+  title: 'Primitives/Data Display/Aspect Ratio',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Avatar',
+  title: 'Primitives/Data Display/Avatar',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Badge',
+  title: 'Primitives/Data Display/Badge',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Breadcrumb',
+  title: 'Primitives/Navigation/Breadcrumb',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

package/src/stories-json/button-group.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Button Group',
+  title: 'Primitives/General/Button Group',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Button',
+  title: 'Primitives/General/Button',
   component: SchemaRenderer,
   parameters: {
     layout: 'centered',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Calendar',
+  title: 'Plugins/Scheduling/Calendar',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Card',
+  title: 'Primitives/Data Display/Card',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Carousel',
+  title: 'Primitives/Data Display/Carousel',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Views/Charts',
+  title: 'Plugins/Rich Content/Charts',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Views/Chatbot',
+  title: 'Plugins/Rich Content/Chatbot',
   component: SchemaRenderer,
   parameters: {
     layout: 'centered',

package/src/stories-json/code-editor.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Views/Code Editor',
+  title: 'Plugins/Rich Content/Code Editor',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Collapsible',
+  title: 'Primitives/Data Display/Collapsible',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Controls',
+  title: 'Primitives/Data Entry/Controls',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

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

@@ -0,0 +1,154 @@
+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/data-table.stories.tsx

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
 
 const meta: Meta = {
-  title: 'Components/Table',
+  title: 'Primitives/Data Display/Table',
   component: SchemaRenderer,
   tags: ['autodocs'],
   argTypes: {
@@ -13,6 +15,15 @@ const meta: Meta = {
 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',
@@ -29,7 +40,7 @@ export const DataTable: Story = {
         { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' }
     ]
   },
-  render: (args) => <SchemaRenderer schema={args} />
+  render: renderStory
 };
 
 export const FullFeatures: Story = {
@@ -56,5 +67,70 @@ export const FullFeatures: Story = {
           method: i % 2 === 0 ? 'Credit Card' : 'PayPal'
       }))
     },
-    render: (args) => <SchemaRenderer schema={args} />
+    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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SchemaRenderer } from '../SchemaRenderer';
 
 const meta: Meta = {
-  title: 'Components/Data Display Extras',
+  title: 'Primitives/Data Display/Extras',
   component: SchemaRenderer,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Date Picker',
+  title: 'Primitives/Data Entry/Date Picker',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Views/DetailView',
+  title: 'Plugins/Data Views/Detail View',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Dialog',
+  title: 'Primitives/Feedback/Dialog',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SchemaRenderer } from '../SchemaRenderer';
 
 const meta: Meta = {
-  title: 'Components/Feedback Extras',
+  title: 'Primitives/Feedback/Extras',
   component: SchemaRenderer,
   tags: ['autodocs'],
 };

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Feedback Others',
+  title: 'Primitives/Feedback/Others',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],