Merge pull request #124 from johndoe6345789/codex/add-datepicker-and-fileupload-components

Add DatePicker and FileUpload to JSON UI registry, types, and showcase

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:

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",

json-components-registry.json

@@ -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"
     },
     {

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)

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
       }
     }

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'