Add DatePicker and FileUpload defaults

src/config/ui-examples/form.json

@@ -147,7 +147,8 @@
                         "id": "birthdate-input",
                         "type": "DatePicker",
                         "props": {
-                          "placeholder": "Select a date"
+                          "placeholder": "Select a date",
+                          "disabled": false
                         },
                         "dataBinding": "formData.birthDate",
                         "events": {
@@ -207,7 +208,9 @@
                         "id": "resume-upload",
                         "type": "FileUpload",
                         "props": {
-                          "accept": ".pdf,.doc,.docx"
+                          "accept": ".pdf,.doc,.docx",
+                          "multiple": false,
+                          "maxSize": 10485760
                         },
                         "events": {
                           "onFilesSelected": {

src/lib/component-definitions.json

@@ -119,6 +119,20 @@
     "icon": "NumberCircleOne",
     "defaultProps": { "placeholder": "0", "min": 0 }
   },
+  {
+    "type": "DatePicker",
+    "label": "Date Picker",
+    "category": "input",
+    "icon": "Calendar",
+    "defaultProps": { "placeholder": "Pick a date" }
+  },
+  {
+    "type": "FileUpload",
+    "label": "File Upload",
+    "category": "input",
+    "icon": "Upload",
+    "defaultProps": { "multiple": false }
+  },
   {
     "type": "Heading",
     "label": "Heading",

src/lib/json-ui/component-registry.ts

@@ -77,6 +77,7 @@ const buildRegistryFromNames = (
 }
 
 const jsonRegistryEntries = jsonRegistry.components ?? []
+const atomComponentMap = AtomComponents as Record<string, ComponentType<any>>
 const deprecatedComponentInfo = jsonRegistryEntries.reduce<Record<string, DeprecatedComponentInfo>>(
   (acc, entry) => {
     const entryName = entry.export ?? entry.name ?? entry.type
@@ -173,12 +174,14 @@ export const shadcnComponents: UIComponentRegistry = {
 export const atomComponents: UIComponentRegistry = {
   ...buildRegistryFromNames(
     atomRegistryNames,
-    AtomComponents as Record<string, ComponentType<any>>
+    atomComponentMap
   ),
-  DataList: (AtomComponents as Record<string, ComponentType<any>>).DataList,
-  DataTable: (AtomComponents as Record<string, ComponentType<any>>).DataTable,
-  MetricCard: (AtomComponents as Record<string, ComponentType<any>>).MetricCard,
-  Timeline: (AtomComponents as Record<string, ComponentType<any>>).Timeline,
+  DatePicker: atomComponentMap.DatePicker,
+  FileUpload: atomComponentMap.FileUpload,
+  DataList: atomComponentMap.DataList,
+  DataTable: atomComponentMap.DataTable,
+  MetricCard: atomComponentMap.MetricCard,
+  Timeline: atomComponentMap.Timeline,
 }
 
 const breadcrumbComponent = AtomComponents.Breadcrumb ?? AtomComponents.BreadcrumbNav

src/types/json-ui.ts

@@ -1,8 +1,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'
+  | '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'