Add JSON UI support for date picker and file upload

src/lib/component-definitions.ts

@@ -6,6 +6,7 @@ export interface ComponentDefinition {
   category: 'layout' | 'input' | 'display' | 'navigation' | 'feedback' | 'data' | 'custom'
   icon: string
   defaultProps?: Record<string, any>
+  propSchema?: Record<string, { type: string; description?: string; required?: boolean }>
   canHaveChildren?: boolean
 }
 
@@ -97,6 +98,33 @@ export const componentDefinitions: ComponentDefinition[] = [
     icon: 'CaretDown',
     defaultProps: { placeholder: 'Choose option...' }
   },
+  {
+    type: 'DatePicker',
+    label: 'Date Picker',
+    category: 'input',
+    icon: 'Calendar',
+    defaultProps: { placeholder: 'Pick a date' },
+    propSchema: {
+      value: { type: 'date', description: 'Selected date value' },
+      placeholder: { type: 'string', description: 'Placeholder when no date is selected' },
+      disabled: { type: 'boolean', description: 'Disable the date picker' },
+      onChange: { type: 'event', description: 'Fires when the date selection changes' }
+    }
+  },
+  {
+    type: 'FileUpload',
+    label: 'File Upload',
+    category: 'input',
+    icon: 'Upload',
+    defaultProps: { accept: '', multiple: false },
+    propSchema: {
+      accept: { type: 'string', description: 'Accepted file types (comma-separated)' },
+      multiple: { type: 'boolean', description: 'Allow multiple file selections' },
+      maxSize: { type: 'number', description: 'Maximum file size in bytes' },
+      disabled: { type: 'boolean', description: 'Disable file uploads' },
+      onFilesSelected: { type: 'event', description: 'Fires when files are selected' }
+    }
+  },
   {
     type: 'Checkbox',
     label: 'Checkbox',

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

@@ -136,10 +136,14 @@ export const shadcnComponents: UIComponentRegistry = {
   AvatarImage,
 }
 
-export const atomComponents: UIComponentRegistry = buildRegistryFromNames(
-  atomRegistryNames,
-  AtomComponents as Record<string, ComponentType<any>>
-)
+export const atomComponents: UIComponentRegistry = {
+  ...buildRegistryFromNames(
+    atomRegistryNames,
+    AtomComponents as Record<string, ComponentType<any>>
+  ),
+  DatePicker: AtomComponents.DatePicker,
+  FileUpload: AtomComponents.FileUpload,
+}
 
 export const moleculeComponents: UIComponentRegistry = buildRegistryFromNames(
   moleculeRegistryNames,