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>
115 lines
2.7 KiB
JSON
115 lines
2.7 KiB
JSON
{
|
|
"id": "button",
|
|
"type": "button",
|
|
"bindings": {
|
|
"type": {
|
|
"source": "type",
|
|
"transform": "data || 'button'"
|
|
},
|
|
"disabled": {
|
|
"source": ["disabled", "loading"],
|
|
"transform": "data[0] || data[1]"
|
|
},
|
|
"className": {
|
|
"source": ["fullWidth", "className"],
|
|
"transform": "const cn = (classes) => classes.filter(Boolean).join(' '); const fullWidth = data[0]; const className = data[1] || ''; const widthClass = fullWidth ? 'w-full' : ''; return cn([widthClass, className])"
|
|
},
|
|
"onClick": {
|
|
"source": "onClick",
|
|
"transform": "data"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "button-loading-content",
|
|
"type": "div",
|
|
"bindings": {
|
|
"_if": {
|
|
"source": "loading",
|
|
"transform": "data"
|
|
},
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'flex items-center gap-2'"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "spinner",
|
|
"type": "div",
|
|
"bindings": {
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin'"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "loading-text",
|
|
"type": "span",
|
|
"children": [
|
|
{"type": "text", "content": {"source": "children"}}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "button-normal-content",
|
|
"type": "div",
|
|
"bindings": {
|
|
"_if": {
|
|
"source": "loading",
|
|
"transform": "!data"
|
|
},
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'flex items-center gap-2'"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "left-icon",
|
|
"type": "span",
|
|
"bindings": {
|
|
"_if": {
|
|
"source": "leftIcon",
|
|
"transform": "data"
|
|
},
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'flex-shrink-0'"
|
|
}
|
|
},
|
|
"children": [
|
|
{"type": "slot", "source": "leftIcon"}
|
|
]
|
|
},
|
|
{
|
|
"id": "button-text",
|
|
"type": "span",
|
|
"children": [
|
|
{"type": "text", "content": {"source": "children"}}
|
|
]
|
|
},
|
|
{
|
|
"id": "right-icon",
|
|
"type": "span",
|
|
"bindings": {
|
|
"_if": {
|
|
"source": "rightIcon",
|
|
"transform": "data"
|
|
},
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'flex-shrink-0'"
|
|
}
|
|
},
|
|
"children": [
|
|
{"type": "slot", "source": "rightIcon"}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|