From 64c3b5b12b43817bb5fb1ec2ee6887d0ef84223a Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 11:40:46 +0000 Subject: [PATCH] Convert page schemas to JSON --- src/components/JSONUIShowcasePage.tsx | 3 +- src/schemas/page-schemas.json | 212 +++++++++++++++++++++++++ src/schemas/page-schemas.ts | 213 -------------------------- 3 files changed, 214 insertions(+), 214 deletions(-) create mode 100644 src/schemas/page-schemas.json delete mode 100644 src/schemas/page-schemas.ts diff --git a/src/components/JSONUIShowcasePage.tsx b/src/components/JSONUIShowcasePage.tsx index 1cd4c08..e2aadbe 100644 --- a/src/components/JSONUIShowcasePage.tsx +++ b/src/components/JSONUIShowcasePage.tsx @@ -3,12 +3,13 @@ import { AtomicComponentDemo } from '@/components/AtomicComponentDemo' import { DashboardDemoPage } from '@/components/DashboardDemoPage' import { PageRenderer } from '@/lib/json-ui/page-renderer' import { hydrateSchema } from '@/schemas/schema-loader' -import { dataComponentsDemoSchema } from '@/schemas/page-schemas' +import pageSchemasJson from '@/schemas/page-schemas.json' import todoListJson from '@/schemas/todo-list.json' import newMoleculesShowcaseJson from '@/schemas/new-molecules-showcase.json' const todoListSchema = hydrateSchema(todoListJson) const newMoleculesShowcaseSchema = hydrateSchema(newMoleculesShowcaseJson) +const dataComponentsDemoSchema = hydrateSchema(pageSchemasJson.dataComponentsDemoSchema) export function JSONUIShowcasePage() { return ( diff --git a/src/schemas/page-schemas.json b/src/schemas/page-schemas.json new file mode 100644 index 0000000..0a38f9a --- /dev/null +++ b/src/schemas/page-schemas.json @@ -0,0 +1,212 @@ +{ + "stateBindingsDemoSchema": { + "id": "state-bindings-demo", + "name": "State & Bindings Demo", + "layout": { + "type": "single" + }, + "dataSources": [ + { + "id": "statusItems", + "type": "static", + "defaultValue": ["KV Ready", "Components Loaded", "Sync Enabled"] + } + ], + "components": [ + { + "id": "state-demo-root", + "type": "div", + "props": { + "className": "space-y-4 rounded-lg border border-border bg-card p-6" + }, + "children": [ + { + "id": "state-demo-title", + "type": "Heading", + "props": { + "className": "text-xl font-semibold", + "children": "Renderer State Binding Demo" + } + }, + { + "id": "state-demo-theme", + "type": "Text", + "props": { + "className": "text-sm text-muted-foreground" + }, + "bindings": { + "children": { + "sourceType": "state", + "source": "settings", + "path": "settings.theme" + } + } + }, + { + "id": "state-demo-list", + "type": "div", + "props": { + "className": "space-y-2" + }, + "loop": { + "source": "statusItems", + "itemVar": "statusItem" + }, + "children": [ + { + "id": "state-demo-list-item", + "type": "Text", + "props": { + "className": "text-sm" + }, + "bindings": { + "children": { + "sourceType": "bindings", + "source": "statusItem" + } + } + } + ] + } + ] + } + ] + }, + "dataComponentsDemoSchema": { + "id": "data-components-demo", + "name": "Data Components Demo", + "layout": { + "type": "single" + }, + "dataSources": [ + { + "id": "metricCards", + "type": "static", + "defaultValue": [ + { "label": "Active Users", "value": 1248, "trend": { "value": 12.4, "direction": "up" } }, + { "label": "Churn Rate", "value": "3.2%", "trend": { "value": 1.1, "direction": "down" } }, + { "label": "Net Revenue", "value": "$48.3k", "trend": { "value": 6.8, "direction": "up" } } + ] + }, + { + "id": "tableColumns", + "type": "static", + "defaultValue": [ + { "key": "initiative", "header": "Initiative" }, + { "key": "owner", "header": "Owner" }, + { "key": "status", "header": "Status" } + ] + }, + { + "id": "tableRows", + "type": "static", + "defaultValue": [ + { "initiative": "Landing Page", "owner": "Avery", "status": "In Progress" }, + { "initiative": "Retention Emails", "owner": "Jordan", "status": "Review" }, + { "initiative": "Billing Update", "owner": "Riley", "status": "Done" } + ] + }, + { + "id": "listItems", + "type": "static", + "defaultValue": ["Prepare briefing deck", "Confirm stakeholder approvals", "Publish roadmap update"] + }, + { + "id": "timelineItems", + "type": "static", + "defaultValue": [ + { + "title": "Kickoff", + "description": "Align on scope and milestones", + "timestamp": "Mon 9:00 AM", + "status": "completed" + }, + { + "title": "Execution", + "description": "Deliver initial workstream", + "timestamp": "Tue 11:00 AM", + "status": "current" + }, + { + "title": "Review", + "description": "Stakeholder walkthrough", + "timestamp": "Thu 3:00 PM", + "status": "pending" + } + ] + } + ], + "components": [ + { + "id": "data-components-root", + "type": "div", + "props": { + "className": "space-y-6 rounded-lg border border-border bg-card p-6" + }, + "children": [ + { + "id": "data-components-title", + "type": "Heading", + "props": { + "className": "text-xl font-semibold", + "children": "Data Components Showcase" + } + }, + { + "id": "data-components-metrics-grid", + "type": "div", + "props": { + "className": "grid gap-4 md:grid-cols-3" + }, + "loop": { + "source": "metricCards", + "itemVar": "metricCard" + }, + "children": [ + { + "id": "data-components-metric-card", + "type": "MetricCard", + "bindings": { + "label": { "sourceType": "bindings", "source": "metricCard", "path": "label" }, + "value": { "sourceType": "bindings", "source": "metricCard", "path": "value" }, + "trend": { "sourceType": "bindings", "source": "metricCard", "path": "trend" } + } + } + ] + }, + { + "id": "data-components-table", + "type": "DataTable", + "props": { + "className": "bg-background", + "emptyMessage": "No initiatives found" + }, + "bindings": { + "columns": { "source": "tableColumns", "sourceType": "data" }, + "data": { "source": "tableRows", "sourceType": "data" } + } + }, + { + "id": "data-components-list", + "type": "DataList", + "props": { + "className": "space-y-3", + "itemClassName": "rounded-md border border-border bg-card/50 px-4 py-2 text-sm", + "emptyMessage": "No action items" + }, + "bindings": { + "items": { "source": "listItems", "sourceType": "data" } + } + }, + { + "id": "data-components-timeline", + "type": "Timeline", + "bindings": { + "items": { "source": "timelineItems", "sourceType": "data" } + } + } + ] + } + ] + } +} diff --git a/src/schemas/page-schemas.ts b/src/schemas/page-schemas.ts deleted file mode 100644 index 68299c8..0000000 --- a/src/schemas/page-schemas.ts +++ /dev/null @@ -1,213 +0,0 @@ -import type { PageSchema } from '@/types/json-ui' - -export const stateBindingsDemoSchema: PageSchema = { - id: 'state-bindings-demo', - name: 'State & Bindings Demo', - layout: { - type: 'single', - }, - dataSources: [ - { - id: 'statusItems', - type: 'static', - defaultValue: ['KV Ready', 'Components Loaded', 'Sync Enabled'], - }, - ], - components: [ - { - id: 'state-demo-root', - type: 'div', - props: { - className: 'space-y-4 rounded-lg border border-border bg-card p-6', - }, - children: [ - { - id: 'state-demo-title', - type: 'Heading', - props: { - className: 'text-xl font-semibold', - children: 'Renderer State Binding Demo', - }, - }, - { - id: 'state-demo-theme', - type: 'Text', - props: { - className: 'text-sm text-muted-foreground', - }, - bindings: { - children: { - sourceType: 'state', - source: 'settings', - path: 'settings.theme', - }, - }, - }, - { - id: 'state-demo-list', - type: 'div', - props: { - className: 'space-y-2', - }, - loop: { - source: 'statusItems', - itemVar: 'statusItem', - }, - children: [ - { - id: 'state-demo-list-item', - type: 'Text', - props: { - className: 'text-sm', - }, - bindings: { - children: { - sourceType: 'bindings', - source: 'statusItem', - }, - }, - }, - ], - }, - ], - }, - ], -} - -export const dataComponentsDemoSchema: PageSchema = { - id: 'data-components-demo', - name: 'Data Components Demo', - layout: { - type: 'single', - }, - dataSources: [ - { - id: 'metricCards', - type: 'static', - defaultValue: [ - { label: 'Active Users', value: 1248, trend: { value: 12.4, direction: 'up' } }, - { label: 'Churn Rate', value: '3.2%', trend: { value: 1.1, direction: 'down' } }, - { label: 'Net Revenue', value: '$48.3k', trend: { value: 6.8, direction: 'up' } }, - ], - }, - { - id: 'tableColumns', - type: 'static', - defaultValue: [ - { key: 'initiative', header: 'Initiative' }, - { key: 'owner', header: 'Owner' }, - { key: 'status', header: 'Status' }, - ], - }, - { - id: 'tableRows', - type: 'static', - defaultValue: [ - { initiative: 'Landing Page', owner: 'Avery', status: 'In Progress' }, - { initiative: 'Retention Emails', owner: 'Jordan', status: 'Review' }, - { initiative: 'Billing Update', owner: 'Riley', status: 'Done' }, - ], - }, - { - id: 'listItems', - type: 'static', - defaultValue: ['Prepare briefing deck', 'Confirm stakeholder approvals', 'Publish roadmap update'], - }, - { - id: 'timelineItems', - type: 'static', - defaultValue: [ - { - title: 'Kickoff', - description: 'Align on scope and milestones', - timestamp: 'Mon 9:00 AM', - status: 'completed', - }, - { - title: 'Execution', - description: 'Deliver initial workstream', - timestamp: 'Tue 11:00 AM', - status: 'current', - }, - { - title: 'Review', - description: 'Stakeholder walkthrough', - timestamp: 'Thu 3:00 PM', - status: 'pending', - }, - ], - }, - ], - components: [ - { - id: 'data-components-root', - type: 'div', - props: { - className: 'space-y-6 rounded-lg border border-border bg-card p-6', - }, - children: [ - { - id: 'data-components-title', - type: 'Heading', - props: { - className: 'text-xl font-semibold', - children: 'Data Components Showcase', - }, - }, - { - id: 'data-components-metrics-grid', - type: 'div', - props: { - className: 'grid gap-4 md:grid-cols-3', - }, - loop: { - source: 'metricCards', - itemVar: 'metricCard', - }, - children: [ - { - id: 'data-components-metric-card', - type: 'MetricCard', - bindings: { - label: { sourceType: 'bindings', source: 'metricCard', path: 'label' }, - value: { sourceType: 'bindings', source: 'metricCard', path: 'value' }, - trend: { sourceType: 'bindings', source: 'metricCard', path: 'trend' }, - }, - }, - ], - }, - { - id: 'data-components-table', - type: 'DataTable', - props: { - className: 'bg-background', - emptyMessage: 'No initiatives found', - }, - bindings: { - columns: { source: 'tableColumns', sourceType: 'data' }, - data: { source: 'tableRows', sourceType: 'data' }, - }, - }, - { - id: 'data-components-list', - type: 'DataList', - props: { - className: 'space-y-3', - itemClassName: 'rounded-md border border-border bg-card/50 px-4 py-2 text-sm', - emptyMessage: 'No action items', - }, - bindings: { - items: { source: 'listItems', sourceType: 'data' }, - }, - }, - { - id: 'data-components-timeline', - type: 'Timeline', - bindings: { - items: { source: 'timelineItems', sourceType: 'data' }, - }, - }, - ], - }, - ], -}