@object-ui/components 0.5.0 → 3.0.0

package/src/stories-json/GettingStarted.mdx

@@ -0,0 +1,89 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started" />
+
+# ObjectUI Component Library
+
+ObjectUI is a **server-driven UI engine** that renders enterprise interfaces from JSON metadata.
+Built on **React**, **Tailwind CSS**, and **Shadcn UI (Radix)**, it bridges the speed of
+low-code with the design quality of hand-crafted components.
+
+## Installation
+
+```bash
+# Core packages
+pnpm add @object-ui/types @object-ui/core @object-ui/react
+
+# UI layer
+pnpm add @object-ui/components @object-ui/fields @object-ui/layout
+```
+
+Peer dependencies — make sure these are in your project:
+
+```bash
+pnpm add react react-dom tailwindcss
+```
+
+## Quick Usage
+
+```tsx
+import { ObjectRenderer } from '@object-ui/react';
+
+const schema = {
+  type: 'Card',
+  props: { title: 'Hello' },
+  children: [
+    {
+      type: 'Text',
+      props: { content: 'Rendered from JSON!' },
+    },
+  ],
+};
+
+export default function App() {
+  return <ObjectRenderer schema={schema} />;
+}
+```
+
+The `ObjectRenderer` resolves each node in the schema tree against the **Component Registry**,
+producing a fully interactive React tree.
+
+## Accessibility
+
+Every component in ObjectUI follows the **WAI-ARIA** authoring practices provided by
+[Radix UI](https://www.radix-ui.com/). This means:
+
+- Correct ARIA roles and attributes out of the box
+- Full keyboard navigation support
+- Focus management for overlays, dialogs, and menus
+- Screen-reader-friendly labels and live regions
+
+Run the Storybook accessibility addon (included) to audit any story for violations.
+
+## Theme Configuration
+
+ObjectUI uses Tailwind CSS for styling. Customise the design tokens through your
+`tailwind.config` and CSS variables:
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222 84% 5%;
+    --primary: 222 47% 11%;
+    --primary-foreground: 210 40% 98%;
+    /* ...other tokens */
+  }
+}
+```
+
+All Shadcn-based components pick up these tokens automatically — no prop drilling required.
+
+## Explore
+
+Use the sidebar to browse every component. Each story shows:
+
+- **Live preview** — interact directly in the canvas
+- **Controls** — tweak props in real time
+- **Docs** — auto-generated API tables (when tagged with `autodocs`)
+- **Accessibility** — axe audit panel

package/src/stories-json/Introduction.mdx

@@ -0,0 +1,127 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started/Introduction" />
+
+# ObjectUI — Universal Server-Driven UI Engine
+
+ObjectUI is a **JSON-to-UI rendering engine** for React that transforms declarative schemas
+into fully interactive enterprise interfaces. Built on **Shadcn UI**, **Radix Primitives**,
+and **Tailwind CSS**, it bridges the speed of low-code platforms with the design quality of
+hand-crafted components.
+
+---
+
+## Why ObjectUI?
+
+| Benefit | Description |
+|---|---|
+| **Schema-Driven** | Define your UI as JSON — render it anywhere with zero custom JSX. |
+| **Enterprise-Ready** | Dashboards, data grids, Kanbans, forms, and CRUDs out of the box. |
+| **Accessible by Default** | Every component inherits WAI-ARIA patterns from Radix UI. |
+| **Themeable** | Tailwind CSS design tokens + CSS variables — no prop drilling required. |
+| **Backend Agnostic** | Works with any API or data source; no server lock-in. |
+
+---
+
+## Architecture Overview
+
+ObjectUI follows a layered architecture where each layer has a single responsibility:
+
+```
+┌─────────────────────────────────────────────────────┐
+│                    Your Application                  │
+├─────────────────────────────────────────────────────┤
+│              @object-ui/react  (Runtime)             │
+│         ObjectRenderer · SchemaRenderer · Hooks      │
+├──────────┬──────────────────────────┬───────────────┤
+│ Plugins  │       @object-ui/fields  │  @object-ui/  │
+│ Grid,    │  Text, Number, Select,   │    layout     │
+│ Kanban,  │  Date, Checkbox, …       │  AppShell,    │
+│ Charts,  │                          │  Sidebar,     │
+│ Form, …  │                          │  Header       │
+├──────────┴──────────────────────────┴───────────────┤
+│           @object-ui/components  (Atoms)             │
+│     Button · Card · Badge · Dialog · Tabs · …        │
+├─────────────────────────────────────────────────────┤
+│              @object-ui/core  (Engine)               │
+│   Component Registry · Schema Validation ·           │
+│   Expression Evaluation · Data Binding               │
+├─────────────────────────────────────────────────────┤
+│              @object-ui/types  (Protocol)            │
+│     ComponentSchema · ActionSchema · FieldSchema     │
+│                  Pure TypeScript — 0 deps            │
+└─────────────────────────────────────────────────────┘
+```
+
+### Layer Breakdown
+
+1. **`@object-ui/types`** — Pure TypeScript interfaces that define the JSON protocol.
+   Zero runtime dependencies.
+2. **`@object-ui/core`** — The rendering engine: component registry, schema validation,
+   expression evaluation (`visible: "${data.age > 18}"`), and data binding. No UI code.
+3. **`@object-ui/components`** — Shadcn-based UI atoms (Button, Card, Badge, Dialog, etc.).
+   Pure presentation — no business logic.
+4. **`@object-ui/fields`** — Standard field renderers for form inputs (Text, Number,
+   Select, Date). Each field implements the `FieldWidgetProps` contract.
+5. **`@object-ui/layout`** — Page-level structure components (AppShell, Header, Sidebar).
+   Routing-aware composition.
+6. **`@object-ui/plugin-*`** — Complex view widgets (Grid, Kanban, Charts, Map, Gantt,
+   Form, Timeline). Heavy third-party dependencies are isolated here.
+7. **`@object-ui/react`** — The public runtime entry point that ties everything together.
+   Provides `ObjectRenderer`, hooks, and provider components.
+
+---
+
+## Quick Start
+
+```tsx
+import { ObjectRenderer } from '@object-ui/react';
+
+const schema = {
+  type: 'Card',
+  props: { title: 'Welcome' },
+  children: [
+    { type: 'Text', props: { content: 'Rendered from JSON!' } },
+    { type: 'Button', props: { label: 'Click me', variant: 'default' } },
+  ],
+};
+
+export default function App() {
+  return <ObjectRenderer schema={schema} />;
+}
+```
+
+The `ObjectRenderer` walks the schema tree, resolves each node against the **Component
+Registry**, and produces a fully interactive React component tree.
+
+---
+
+## Browsing This Storybook
+
+Use the **sidebar** on the left to explore every component. Stories are organised into:
+
+| Section | What You'll Find |
+|---|---|
+| **Getting Started** | Introduction, data binding guides, and setup instructions. |
+| **Primitives** | Base Shadcn atoms — Buttons, Cards, Badges, Inputs, Dialogs, and more. |
+| **Fields** | Form field renderers — text, number, select, date, checkbox, etc. |
+| **Plugins** | Complex view widgets — Data Grid, Kanban, Charts, Map, Gantt, Timeline. |
+| **Templates** | Pre-built page layouts — Dashboards, Reports, Sidebar navigation. |
+| **Apps** | Full application demos (e.g. CRM) composed from multiple plugins. |
+
+Each story provides:
+
+- **Canvas** — Live interactive preview.
+- **Controls** — Tweak JSON props in real time via the controls panel.
+- **Docs** — Auto-generated API reference (for stories tagged `autodocs`).
+- **Accessibility** — axe-core audit panel to check WCAG compliance.
+
+---
+
+## Documentation
+
+Full documentation, migration guides, and API references are available at the
+[ObjectUI docs site](https://objectui.dev).
+
+For source code and contribution guidelines, visit the
+[GitHub repository](https://github.com/objectstack-ai/objectui).

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: {