mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 21:54:56 +00:00
johndoe6345789
eb8a8689fb
Migrate the following components from TSX to JSON-driven architecture: - Slider - range input control with label and value display - Spinner - rotating loading indicator with Phosphor icons - StatusIcon - saved/synced status indicators - StepIndicator - step-by-step progress display - Stepper - numbered step progression indicator - Switch - toggle control with optional label - Table - data table with columns and row handling - Tabs - tabbed navigation with active state - Tag - inline tag/badge with optional remove button - TextArea - multiline text input with error state - TextGradient - gradient text effect component - TextHighlight - highlighted/emphasized text span - Timeline - vertical timeline with status indicators - Timestamp - date/time display with relative formatting - Toggle - simple toggle switch control - Tooltip - popover tooltip with positioning Created: - 17 TypeScript interface files in src/lib/json-ui/interfaces/ - 17 JSON definition files in src/components/json-definitions/ - Updated json-components.ts with imports and exports - Updated json-components-registry.json to mark components as jsonCompatible All components are pure JSON with no custom hooks required (stateless rendering). Build successfully completes with no errors. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
45 lines
1.1 KiB
JSON
45 lines
1.1 KiB
JSON
{
|
|
"id": "label-wrapper",
|
|
"type": "label",
|
|
"bindings": {
|
|
"htmlFor": {
|
|
"source": "htmlFor",
|
|
"transform": "data"
|
|
},
|
|
"className": {
|
|
"source": ["required", "className"],
|
|
"transform": "const required = data[0]; const className = data[1] || ''; const baseClasses = 'text-sm font-medium text-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'; return required ? `${baseClasses} ${className}`.trim() : `${baseClasses} ${className}`.trim()"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "label-content",
|
|
"type": "span",
|
|
"bindings": {
|
|
"children": {
|
|
"source": "children",
|
|
"transform": "data"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "label-required-indicator",
|
|
"type": "span",
|
|
"bindings": {
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'text-destructive ml-1'"
|
|
},
|
|
"children": {
|
|
"source": null,
|
|
"transform": "'*'"
|
|
},
|
|
"_if": {
|
|
"source": "required",
|
|
"transform": "data"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|