From 0d13710c0955659967bb705bd65f996a34d8253a Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 11:59:51 +0000 Subject: [PATCH] Add DatePicker and FileUpload to JSON UI --- JSON_COMPONENTS.md | 4 +- json-components-list.json | 4 +- json-components-registry.json | 10 ++--- src/components/JSONUIPage.tsx | 10 +++++ src/config/ui-examples/form.json | 63 ++++++++++++++++++++++++++++++++ src/types/json-ui.ts | 1 + 6 files changed, 83 insertions(+), 9 deletions(-) diff --git a/JSON_COMPONENTS.md b/JSON_COMPONENTS.md index d3b497e..4858f58 100644 --- a/JSON_COMPONENTS.md +++ b/JSON_COMPONENTS.md @@ -92,8 +92,8 @@ Form inputs and interactive controls: - `Switch` - Toggle switch - `Slider` - Numeric range slider - `NumberInput` - Numeric input with increment/decrement -- `DatePicker` - Date selection (planned) -- `FileUpload` - File upload control (planned) +- `DatePicker` - Date selection +- `FileUpload` - File upload control ### Display Components (16) Presentation and visual elements: diff --git a/json-components-list.json b/json-components-list.json index 0c9a2ed..712450b 100644 --- a/json-components-list.json +++ b/json-components-list.json @@ -172,7 +172,7 @@ "category": "input", "canHaveChildren": false, "description": "Date selection input", - "status": "planned" + "status": "supported" }, { "type": "FileUpload", @@ -180,7 +180,7 @@ "category": "input", "canHaveChildren": false, "description": "File upload control", - "status": "planned" + "status": "supported" }, { "type": "Text", diff --git a/json-components-registry.json b/json-components-registry.json index bc0676f..c5bd857 100644 --- a/json-components-registry.json +++ b/json-components-registry.json @@ -2,7 +2,7 @@ "$schema": "./schemas/json-components-registry-schema.json", "version": "2.0.0", "description": "Registry of all components in the application", - "lastUpdated": "2026-01-18T11:30:24.191Z", + "lastUpdated": "2026-01-18T11:54:11.109Z", "categories": { "layout": "Layout and container components", "input": "Form inputs and interactive controls", @@ -322,7 +322,7 @@ "category": "input", "canHaveChildren": false, "description": "Date selection input", - "status": "planned", + "status": "supported", "source": "atoms" }, { @@ -331,7 +331,7 @@ "category": "input", "canHaveChildren": false, "description": "File upload control", - "status": "planned", + "status": "supported", "source": "atoms" }, { @@ -2024,8 +2024,8 @@ ], "statistics": { "total": 219, - "supported": 154, - "planned": 10, + "supported": 156, + "planned": 8, "jsonCompatible": 14, "maybeJsonCompatible": 41, "byCategory": { diff --git a/src/components/JSONUIPage.tsx b/src/components/JSONUIPage.tsx index 55f189c..08edaad 100644 --- a/src/components/JSONUIPage.tsx +++ b/src/components/JSONUIPage.tsx @@ -78,6 +78,16 @@ export function JSONUIPage({ jsonConfig }: JSONUIPageProps) { updateDataField('formData', action.params.field, event) } break + case 'update-date': + if (action.params?.field) { + updateDataField('formData', action.params.field, event) + } + break + case 'update-files': + if (action.params?.field) { + updateDataField('formData', action.params.field, event) + } + break case 'submit-form': toast.success('Form submitted!') console.log('Form data:', dataMap.formData) diff --git a/src/config/ui-examples/form.json b/src/config/ui-examples/form.json index ebc87c1..e0a3428 100644 --- a/src/config/ui-examples/form.json +++ b/src/config/ui-examples/form.json @@ -130,6 +130,37 @@ } ] }, + { + "id": "birthdate-field", + "type": "div", + "className": "space-y-2", + "children": [ + { + "id": "birthdate-label", + "type": "Label", + "props": { + "htmlFor": "birthDate" + }, + "children": "Birth date" + }, + { + "id": "birthdate-input", + "type": "DatePicker", + "props": { + "placeholder": "Select a date" + }, + "dataBinding": "formData.birthDate", + "events": { + "onChange": { + "action": "update-date", + "payload": { + "field": "birthDate" + } + } + } + } + ] + }, { "id": "bio-field", "type": "div", @@ -159,6 +190,36 @@ } ] }, + { + "id": "resume-field", + "type": "div", + "className": "space-y-2", + "children": [ + { + "id": "resume-label", + "type": "Label", + "props": { + "htmlFor": "resume" + }, + "children": "Resume" + }, + { + "id": "resume-upload", + "type": "FileUpload", + "props": { + "accept": ".pdf,.doc,.docx" + }, + "events": { + "onFilesSelected": { + "action": "update-files", + "payload": { + "field": "resumeFiles" + } + } + } + } + ] + }, { "id": "subscribe-field", "type": "div", @@ -234,6 +295,8 @@ "email": "", "password": "", "bio": "", + "birthDate": null, + "resumeFiles": [], "subscribe": false } } diff --git a/src/types/json-ui.ts b/src/types/json-ui.ts index 8c30f10..69b1d39 100644 --- a/src/types/json-ui.ts +++ b/src/types/json-ui.ts @@ -2,6 +2,7 @@ export type ComponentType = | 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'Button' | 'Card' | 'CardHeader' | 'CardTitle' | 'CardDescription' | 'CardContent' | 'CardFooter' | 'Input' | 'TextArea' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'NumberInput' + | 'DatePicker' | 'FileUpload' | 'Badge' | 'Progress' | 'Separator' | 'Tabs' | 'TabsContent' | 'TabsList' | 'TabsTrigger' | 'Dialog' | 'Text' | 'Heading' | 'Label' | 'List' | 'Grid' | 'Stack' | 'Flex' | 'Container' | 'Link' | 'Breadcrumb' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'