mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-06 11:29:35 +00:00
feat: Convert ComponentTree and SeedDataManager to pure JSON with hooks
- Created useComponentTree hook to flatten recursive tree structure - Created useStorageBackendInfo hook for backend icon/copy logic - Created useD3BarChart hook for chart calculations - Registered all new hooks in hooks-registry - Created component-tree.json with list rendering using treeData from hook - Created seed-data-manager.json with full Card/Alert/Button structure - Deleted ComponentTreeWrapper.tsx and SeedDataManagerWrapper.tsx - Updated exports to use JSON components - 9 components now pure JSON, 2 wrappers remaining Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -0,0 +1,65 @@
|
||||
{
|
||||
"id": "component-tree-container",
|
||||
"type": "div",
|
||||
"bindings": {
|
||||
"className": {
|
||||
"source": "className",
|
||||
"transform": "data ? `space-y-2 ${data}` : 'space-y-2'"
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "empty-message",
|
||||
"type": "p",
|
||||
"props": { "className": "text-sm text-muted-foreground" },
|
||||
"bindings": { "children": "emptyMessage" },
|
||||
"conditional": { "if": "components.length === 0" }
|
||||
},
|
||||
{
|
||||
"id": "tree-nodes",
|
||||
"type": "div",
|
||||
"props": { "className": "space-y-1" },
|
||||
"conditional": { "if": "components.length > 0" },
|
||||
"children": [
|
||||
{
|
||||
"id": "tree-node-list",
|
||||
"type": "list",
|
||||
"bindings": {
|
||||
"items": "treeData",
|
||||
"keyPath": "component.id"
|
||||
},
|
||||
"itemTemplate": {
|
||||
"type": "button",
|
||||
"props": { "type": "button" },
|
||||
"bindings": {
|
||||
"onClick": {
|
||||
"source": "onSelect,item.component.id",
|
||||
"transform": "() => onSelect?.(item.component.id)"
|
||||
},
|
||||
"className": {
|
||||
"source": "item.isSelected",
|
||||
"transform": "item.isSelected ? 'flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm transition-colors bg-accent/40 text-foreground' : 'flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm transition-colors hover:bg-muted'"
|
||||
},
|
||||
"style": {
|
||||
"source": "item.paddingLeft",
|
||||
"transform": "{ paddingLeft: item.paddingLeft }"
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "span",
|
||||
"props": { "className": "font-medium" },
|
||||
"bindings": { "children": "item.component.type" }
|
||||
},
|
||||
{
|
||||
"type": "span",
|
||||
"props": { "className": "text-xs text-muted-foreground" },
|
||||
"bindings": { "children": "item.component.id" }
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
{
|
||||
"id": "seed-data-manager-card",
|
||||
"type": "Card",
|
||||
"children": [
|
||||
{
|
||||
"id": "card-header",
|
||||
"type": "CardHeader",
|
||||
"children": [
|
||||
{
|
||||
"id": "card-title",
|
||||
"type": "CardTitle",
|
||||
"props": { "className": "flex items-center gap-2" },
|
||||
"children": [
|
||||
{
|
||||
"id": "title-icon",
|
||||
"type": "PhosphorIcon",
|
||||
"props": { "icon": "Database", "size": 24, "weight": "duotone" }
|
||||
},
|
||||
{
|
||||
"id": "title-text",
|
||||
"type": "text",
|
||||
"bindings": { "children": "title" }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "card-description",
|
||||
"type": "CardDescription",
|
||||
"bindings": { "children": "description" }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "card-content",
|
||||
"type": "CardContent",
|
||||
"props": { "className": "flex flex-col gap-4" },
|
||||
"children": [
|
||||
{
|
||||
"id": "loaded-alert",
|
||||
"type": "Alert",
|
||||
"conditional": { "if": "isLoaded" },
|
||||
"children": [
|
||||
{
|
||||
"id": "alert-icon",
|
||||
"type": "PhosphorIcon",
|
||||
"props": { "icon": "CheckCircle", "className": "h-4 w-4", "weight": "fill" }
|
||||
},
|
||||
{
|
||||
"id": "alert-description",
|
||||
"type": "AlertDescription",
|
||||
"children": [{ "type": "text", "children": "Seed data is loaded and available" }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "buttons-container",
|
||||
"type": "div",
|
||||
"props": { "className": "flex flex-col gap-3" },
|
||||
"children": [
|
||||
{
|
||||
"id": "buttons-row",
|
||||
"type": "div",
|
||||
"props": { "className": "flex gap-2 flex-wrap" },
|
||||
"children": [
|
||||
{
|
||||
"id": "load-button",
|
||||
"type": "Button",
|
||||
"bindings": {
|
||||
"onClick": "onLoadSeedData",
|
||||
"disabled": {
|
||||
"source": "isLoading,isLoaded",
|
||||
"transform": "isLoading || isLoaded"
|
||||
}
|
||||
},
|
||||
"props": { "variant": "default" },
|
||||
"children": [
|
||||
{
|
||||
"id": "load-button-content",
|
||||
"type": "conditional-group",
|
||||
"conditional": { "if": "isLoading" },
|
||||
"children": [
|
||||
{
|
||||
"type": "PhosphorIcon",
|
||||
"props": { "icon": "CircleNotch", "className": "animate-spin", "size": 16 }
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"bindings": { "children": "loadingLabel" }
|
||||
}
|
||||
],
|
||||
"else": [
|
||||
{
|
||||
"type": "PhosphorIcon",
|
||||
"props": { "icon": "Database", "size": 16, "weight": "fill" }
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"bindings": { "children": "loadLabel" }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "reset-button",
|
||||
"type": "Button",
|
||||
"bindings": {
|
||||
"onClick": "onResetSeedData",
|
||||
"disabled": "isLoading"
|
||||
},
|
||||
"props": { "variant": "outline" },
|
||||
"children": [
|
||||
{
|
||||
"id": "reset-button-content",
|
||||
"type": "conditional-group",
|
||||
"conditional": { "if": "isLoading" },
|
||||
"children": [
|
||||
{
|
||||
"type": "PhosphorIcon",
|
||||
"props": { "icon": "CircleNotch", "className": "animate-spin", "size": 16 }
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"bindings": { "children": "resettingLabel" }
|
||||
}
|
||||
],
|
||||
"else": [
|
||||
{
|
||||
"type": "PhosphorIcon",
|
||||
"props": { "icon": "ArrowClockwise", "size": 16, "weight": "bold" }
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"bindings": { "children": "resetLabel" }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "clear-button",
|
||||
"type": "Button",
|
||||
"bindings": {
|
||||
"onClick": "onClearAllData",
|
||||
"disabled": "isLoading"
|
||||
},
|
||||
"props": { "variant": "destructive" },
|
||||
"children": [
|
||||
{
|
||||
"id": "clear-button-content",
|
||||
"type": "conditional-group",
|
||||
"conditional": { "if": "isLoading" },
|
||||
"children": [
|
||||
{
|
||||
"type": "PhosphorIcon",
|
||||
"props": { "icon": "CircleNotch", "className": "animate-spin", "size": 16 }
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"bindings": { "children": "clearingLabel" }
|
||||
}
|
||||
],
|
||||
"else": [
|
||||
{
|
||||
"type": "PhosphorIcon",
|
||||
"props": { "icon": "Trash", "size": 16, "weight": "fill" }
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"bindings": { "children": "clearLabel" }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "helper-text",
|
||||
"type": "div",
|
||||
"props": { "className": "text-sm text-muted-foreground space-y-1" },
|
||||
"children": [
|
||||
{
|
||||
"id": "load-help",
|
||||
"type": "p",
|
||||
"conditional": { "if": "helperText.load" },
|
||||
"children": [
|
||||
{ "type": "strong", "children": "Load Seed Data: " },
|
||||
{ "type": "text", "bindings": { "children": "helperText.load" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "reset-help",
|
||||
"type": "p",
|
||||
"conditional": { "if": "helperText.reset" },
|
||||
"children": [
|
||||
{ "type": "strong", "children": "Reset to Defaults: " },
|
||||
{ "type": "text", "bindings": { "children": "helperText.reset" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "clear-help",
|
||||
"type": "p",
|
||||
"conditional": { "if": "helperText.clear" },
|
||||
"children": [
|
||||
{ "type": "strong", "children": "Clear All Data: " },
|
||||
{ "type": "text", "bindings": { "children": "helperText.clear" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user