mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-02 17:44:52 +00:00
git
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>
37 lines
1003 B
JSON
37 lines
1003 B
JSON
{
|
|
"id": "rating-root",
|
|
"type": "div",
|
|
"bindings": {
|
|
"className": {
|
|
"source": "className",
|
|
"transform": "data ? data + ' flex items-center gap-2' : 'flex items-center gap-2'"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "rating-stars",
|
|
"type": "div",
|
|
"props": {
|
|
"className": "flex items-center gap-0.5"
|
|
},
|
|
"children": "(() => { const max = max || 5; return Array.from({ length: max }, (_, idx) => ({ id: `star-${idx}`, type: 'button', props: { className: 'transition-colors', 'data-rating': idx + 1 }, bindings: { onClick: `() => onChange(${idx + 1})` } })); })()"
|
|
},
|
|
{
|
|
"id": "rating-value",
|
|
"type": "span",
|
|
"props": {
|
|
"className": "text-sm font-medium text-muted-foreground"
|
|
},
|
|
"bindings": {
|
|
"children": {
|
|
"source": "value",
|
|
"transform": "data ? `${data.toFixed(1)} / ${max || 5}` : ''"
|
|
}
|
|
},
|
|
"conditional": {
|
|
"if": "showValue"
|
|
}
|
|
}
|
|
]
|
|
}
|