mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 13:44:54 +00:00
johndoe6345789
4f75409096
Migrated EmptyCanvasState, SchemaCodeViewer, ToolbarActions, and AppHeader from TSX to JSON-based components. These are display-focused organisms with no complex state management requirements. Changes: - Create JSON definitions for 4 organisms in src/components/json-definitions/ - Create TypeScript interfaces in src/lib/json-ui/interfaces/ - Add exports to src/lib/json-ui/json-components.ts - Update interfaces/index.ts to export new interfaces - Registry entries already marked as jsonCompatible: true All organisms are pure JSON components (no custom hooks needed): - EmptyCanvasState: Display component with optional action buttons - SchemaCodeViewer: Display component showing JSON schema with tabs - ToolbarActions: Flex container with conditional toolbar buttons - AppHeader: Complex header layout with multiple sub-components Build passing with no errors. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
119 lines
2.9 KiB
JSON
119 lines
2.9 KiB
JSON
{
|
|
"id": "schema-code-viewer",
|
|
"type": "Stack",
|
|
"bindings": {
|
|
"direction": { "value": "vertical" },
|
|
"spacing": { "value": "none" },
|
|
"className": { "value": "h-full flex flex-col bg-card" }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "panel-header",
|
|
"type": "PanelHeader",
|
|
"props": {
|
|
"title": "Schema Output",
|
|
"icon": {
|
|
"type": "Icon",
|
|
"props": {
|
|
"name": "Code",
|
|
"size": 20,
|
|
"weight": "duotone"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "tabs",
|
|
"type": "Tabs",
|
|
"props": {
|
|
"defaultValue": "json",
|
|
"className": "flex-1 flex flex-col"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "tabs-list",
|
|
"type": "TabsList",
|
|
"props": {
|
|
"className": "w-full justify-start px-4 pt-2"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "json-trigger",
|
|
"type": "TabsTrigger",
|
|
"props": {
|
|
"value": "json",
|
|
"children": "JSON"
|
|
}
|
|
},
|
|
{
|
|
"id": "preview-trigger",
|
|
"type": "TabsTrigger",
|
|
"props": {
|
|
"value": "preview",
|
|
"children": "Preview"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "json-content",
|
|
"type": "TabsContent",
|
|
"props": {
|
|
"value": "json",
|
|
"className": "flex-1 m-0 mt-2"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "scroll-area",
|
|
"type": "ScrollArea",
|
|
"props": {
|
|
"className": "h-full"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "code-block",
|
|
"type": "Code",
|
|
"bindings": {
|
|
"children": {
|
|
"source": "schema",
|
|
"transform": "data ? JSON.stringify(data, null, 2) : ''"
|
|
},
|
|
"className": { "value": "p-4 text-xs font-mono text-foreground" }
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "preview-content",
|
|
"type": "TabsContent",
|
|
"props": {
|
|
"value": "preview",
|
|
"className": "flex-1 m-0 mt-2"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "preview-text",
|
|
"type": "Stack",
|
|
"props": {
|
|
"className": "p-4"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "preview-message",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "muted",
|
|
"children": "Live preview coming soon"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|