git/low-code-react-app-b
1
0
Fork 0
mirror of https://github.com/johndoe6345789/low-code-react-app-b.git synced 2026-04-26 06:34:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generated by Spark: Load more of UI from JSON declarations and break up large components into atomic and create hooks as needed

Browse Source
This commit is contained in:
johndoe6345789
2026-01-17 12:01:34 +00:00
committed by GitHub
parent 165c8d3847
commit 944e164deb
13 changed files with 1035 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/config/schemas/json-ui-dashboard.json Normal file
View File

@@ -0,0 +1,236 @@
{
"id": "json-ui-dashboard",
"title": "JSON-Driven Dashboard",
"description": "A complete UI page rendered from JSON declarations",
"layout": {
"type": "flex",
"direction": "column",
"gap": "6",
"className": "h-full overflow-auto p-6"
},
"components": [
{
"id": "page-header",
"type": "div",
"props": {
"className": "mb-6"
},
"children": [
{
"id": "page-title",
"type": "div",
"props": {
"className": "text-3xl font-bold mb-2"
},
"children": [
{
"id": "title-text",
"type": "div",
"props": {
"children": "JSON-Driven UI System"
}
}
]
},
{
"id": "page-description",
"type": "div",
"props": {
"className": "text-muted-foreground",
"children": "This entire page is rendered from JSON schemas with data bindings"
}
}
]
},
{
"id": "stat-cards-grid",
"type": "div",
"props": {
"className": "grid gap-4 md:grid-cols-2 lg:grid-cols-3"
},
"children": [
{
"id": "stat-card-1",
"type": "Card",
"children": [
{
"id": "stat-card-1-header",
"type": "CardHeader",
"children": [
{
"id": "stat-card-1-title",
"type": "CardTitle",
"props": {
"className": "flex items-center gap-2"
},
"children": [
{
"id": "stat-1-text",
"type": "div",
"props": {
"children": "{{files.length}} Files"
}
}
]
}
]
},
{
"id": "stat-card-1-content",
"type": "CardContent",
"children": [
{
"id": "stat-1-value",
"type": "div",
"props": {
"className": "text-2xl font-bold",
"children": "{{files.length}}"
}
}
]
}
]
},
{
"id": "stat-card-2",
"type": "Card",
"children": [
{
"id": "stat-card-2-header",
"type": "CardHeader",
"children": [
{
"id": "stat-card-2-title",
"type": "CardTitle",
"props": {
"children": "{{models.length}} Models"
}
}
]
},
{
"id": "stat-card-2-content",
"type": "CardContent",
"children": [
{
"id": "stat-2-value",
"type": "div",
"props": {
"className": "text-2xl font-bold",
"children": "{{models.length}}"
}
}
]
}
]
},
{
"id": "stat-card-3",
"type": "Card",
"children": [
{
"id": "stat-card-3-header",
"type": "CardHeader",
"children": [
{
"id": "stat-card-3-title",
"type": "CardTitle",
"props": {
"children": "{{components.length}} Components"
}
}
]
},
{
"id": "stat-card-3-content",
"type": "CardContent",
"children": [
{
"id": "stat-3-value",
"type": "div",
"props": {
"className": "text-2xl font-bold",
"children": "{{components.length}}"
}
}
]
}
]
}
]
},
{
"id": "files-section",
"type": "Card",
"props": {
"className": "mt-6"
},
"children": [
{
"id": "files-header",
"type": "CardHeader",
"children": [
{
"id": "files-title",
"type": "CardTitle",
"props": {
"children": "Recent Files"
}
},
{
"id": "files-description",
"type": "CardDescription",
"props": {
"children": "Files loaded from your project"
}
}
]
},
{
"id": "files-content",
"type": "CardContent",
"children": [
{
"id": "files-list",
"type": "div",
"props": {
"className": "space-y-2"
},
"repeat": {
"items": "files.slice(0, 5)",
"itemVar": "file"
},
"children": [
{
"id": "file-item",
"type": "div",
"props": {
"className": "flex items-center justify-between p-2 border border-border rounded-md hover:bg-accent/50 transition-colors"
},
"children": [
{
"id": "file-name",
"type": "div",
"props": {
"className": "font-mono text-sm",
"children": "{{file.name}}"
}
},
{
"id": "file-badge",
"type": "Badge",
"props": {
"variant": "outline",
"children": "{{file.type}}"
}
}
]
}
]
}
]
}
]
}
]
}