mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-25 06:04:54 +00:00
johndoe6345789
982fee43ac
Converts 8 atom components from TSX to JSON-driven architecture: - ActionButton: Action trigger with optional tooltip - ActionCard: Interactive card with icon and description - ActionIcon: Icon mapper for common actions - Alert: Variant-based alert notifications - AppLogo: Branding logo component - Avatar: User profile images with fallbacks - AvatarGroup: Grouped avatar display with overflow - Badge: Status and count indicators Changes: - Created interface files for all 8 components in src/lib/json-ui/interfaces/ - Created JSON definitions in src/components/json-definitions/ - Updated json-components.ts with imports and pure JSON exports - Updated interfaces/index.ts with new exports - Updated json-components-registry.json to mark all as jsonCompatible All components are stateless pure JSON implementations using createJsonComponent. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
113 lines
3.0 KiB
JSON
113 lines
3.0 KiB
JSON
{
|
|
"id": "action-button-root",
|
|
"type": "div",
|
|
"props": {
|
|
"className": "inline-flex"
|
|
},
|
|
"conditional": {
|
|
"if": "tooltip",
|
|
"then": {
|
|
"id": "action-button-with-tooltip",
|
|
"type": "div",
|
|
"children": [
|
|
{
|
|
"id": "action-button-tooltip-provider",
|
|
"type": "TooltipProvider",
|
|
"children": [
|
|
{
|
|
"id": "action-button-tooltip",
|
|
"type": "Tooltip",
|
|
"children": [
|
|
{
|
|
"id": "action-button-trigger",
|
|
"type": "TooltipTrigger",
|
|
"props": {
|
|
"asChild": true
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "action-button-element",
|
|
"type": "Button",
|
|
"props": {
|
|
"disabled": "disabled",
|
|
"className": "className"
|
|
},
|
|
"bindings": {
|
|
"variant": "variant",
|
|
"size": "size"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "action-button-icon",
|
|
"type": "span",
|
|
"props": {
|
|
"className": "mr-2"
|
|
},
|
|
"bindings": {
|
|
"children": "icon"
|
|
},
|
|
"conditional": {
|
|
"if": "icon"
|
|
}
|
|
},
|
|
{
|
|
"id": "action-button-label",
|
|
"type": "span",
|
|
"bindings": {
|
|
"children": "label"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "action-button-tooltip-content",
|
|
"type": "TooltipContent",
|
|
"bindings": {
|
|
"children": "tooltip"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"else": {
|
|
"id": "action-button-direct",
|
|
"type": "Button",
|
|
"props": {
|
|
"disabled": "disabled",
|
|
"className": "className"
|
|
},
|
|
"bindings": {
|
|
"variant": "variant",
|
|
"size": "size"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "action-button-icon-direct",
|
|
"type": "span",
|
|
"props": {
|
|
"className": "mr-2"
|
|
},
|
|
"bindings": {
|
|
"children": "icon"
|
|
},
|
|
"conditional": {
|
|
"if": "icon"
|
|
}
|
|
},
|
|
{
|
|
"id": "action-button-label-direct",
|
|
"type": "span",
|
|
"bindings": {
|
|
"children": "label"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|