mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-28 15:44:55 +00:00
johndoe6345789
788109dfe3
Implemented JSON wrappers for 29 key shadcn/ui components, enabling JSON-based configuration for commonly-used library components. These stay as TSX internally but are now JSON-compatible. Components migrated: - Button: ShadcnButton - Badge: ShadcnBadge - Card family: ShadcnCard, ShadcnCardHeader, ShadcnCardTitle, ShadcnCardContent - Form inputs: ShadcnLabel, ShadcnInput, ShadcnTextarea, ShadcnCheckbox, ShadcnSwitch - Separator: ShadcnSeparator - ScrollArea: ShadcnScrollArea - Tabs family: ShadcnTabs, ShadcnTabsList, ShadcnTabsTrigger, ShadcnTabsContent - Dialog family: ShadcnDialog, ShadcnDialogContent, ShadcnDialogHeader, ShadcnDialogTitle - Select family: ShadcnSelect, ShadcnSelectTrigger, ShadcnSelectContent, ShadcnSelectItem - Slider: ShadcnSlider - Tooltip family: ShadcnTooltip, ShadcnTooltipTrigger, ShadcnTooltipContent Files created: - 14 TypeScript interface files in src/lib/json-ui/interfaces/ - 29 JSON definition files in src/components/json-definitions/ Updated exports in: - src/lib/json-ui/json-components.ts (29 new components) - src/lib/json-ui/interfaces/index.ts (14 new interfaces) Build: ✓ PASSED Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
37 lines
1.1 KiB
JSON
37 lines
1.1 KiB
JSON
{
|
|
"id": "info-section-container",
|
|
"type": "Box",
|
|
"className": "space-y-4",
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Heading",
|
|
"level": 3,
|
|
"className": "text-lg font-semibold mb-1",
|
|
"children": [{ "type": "Text", "value": "{title}" }]
|
|
},
|
|
{
|
|
"type": "Paragraph",
|
|
"className": "text-sm text-muted-foreground",
|
|
"children": [{ "type": "Text", "value": "{description}" }]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Separator"
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "space-y-3",
|
|
"bindings": {
|
|
"children": {
|
|
"source": "items",
|
|
"transform": "source.map((item, index) => ({ id: `item-${index}`, type: 'Box', className: 'flex items-center justify-between', children: [{ type: 'Label', className: 'text-sm', children: [{ type: 'Text', value: item.label }] }, { type: 'Box', className: 'text-sm font-mono text-muted-foreground', children: [{ type: 'Text', value: item.value }] }] }))"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|