mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 13:44:54 +00:00
Merge pull request #116 from johndoe6345789/codex/convert-page-schemas.ts-to-json
Convert page schemas to JSON
This commit is contained in:
GitHub
@@ -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 (
|
||||
|
||||
212
src/schemas/page-schemas.json
Normal file
212
src/schemas/page-schemas.json
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -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' },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
Reference in New Issue
Block a user