Add new fields to ContactObject and update App component to include them in the form

Author: hotlong

examples/msw-object-form/objectstack.config.ts

@@ -71,6 +71,60 @@ export const ContactObject = {
       min: 1,
       max: 10
     },
+    // New fields for testing all types
+    salary: {
+      name: 'salary',
+      label: 'Salary (Currency)',
+      type: 'currency',
+      precision: 2
+    },
+    commission_rate: {
+      name: 'commission_rate',
+      label: 'Commission Rate (Percent)',
+      type: 'percent',
+      precision: 2
+    },
+    birthdate: {
+      name: 'birthdate',
+      label: 'Birth Date (Date)',
+      type: 'date'
+    },
+    last_contacted: {
+      name: 'last_contacted',
+      label: 'Last Contacted (DateTime)',
+      type: 'datetime'
+    },
+    available_time: {
+      name: 'available_time',
+      label: 'Preferred Time (Time)',
+      type: 'time'
+    },
+     profile_url: {
+      name: 'profile_url',
+      label: 'LinkedIn Profile (URL)',
+      type: 'url'
+    },
+    department: {
+      name: 'department',
+      label: 'Department (Select)',
+      type: 'select',
+      options: [
+        { label: 'Sales', value: 'sales' },
+        { label: 'Marketing', value: 'marketing' },
+        { label: 'Engineering', value: 'engineering' },
+        { label: 'HR', value: 'hr' }
+      ]
+    },
+    resume: {
+      name: 'resume',
+      label: 'Resume (File)',
+      type: 'file'
+    },
+    avatar: {
+      name: 'avatar',
+      label: 'Avatar (Image)',
+      type: 'image'
+    },
     created_at: { 
       name: 'created_at', 
       label: 'Created At', 
@@ -125,6 +179,13 @@ export default defineStack({
             notes: 'Initial contact from tech conference',
             is_active: true,
             priority: 8,
+            salary: 120000,
+            commission_rate: 0.05,
+            birthdate: '1990-05-15',
+            last_contacted: new Date('2024-05-01T10:00:00').toISOString(),
+            available_time: '09:00:00',
+            profile_url: 'https://linkedin.com/in/johndoe',
+            department: 'engineering',
             created_at: new Date('2024-01-15').toISOString()
           },
           {
@@ -137,6 +198,13 @@ export default defineStack({
             notes: 'Met at product launch event',
             is_active: true,
             priority: 7,
+            salary: 135000,
+            commission_rate: 0.1,
+            birthdate: '1988-11-20',
+            last_contacted: new Date('2024-05-02T14:30:00').toISOString(),
+            available_time: '14:00:00',
+            profile_url: 'https://linkedin.com/in/janesmith',
+            department: 'marketing',
             created_at: new Date('2024-02-20').toISOString()
           },
           {
@@ -149,6 +217,13 @@ export default defineStack({
             notes: '',
             is_active: false,
             priority: 5,
+            salary: 180000,
+            commission_rate: 0,
+            birthdate: '1985-03-30',
+            last_contacted: new Date('2024-04-15T09:00:00').toISOString(),
+            available_time: '10:30:00',
+            profile_url: 'https://linkedin.com/in/bobjohnson',
+            department: 'engineering',
             created_at: new Date('2024-03-10').toISOString()
           }
         ]

examples/msw-object-form/src/App.tsx

@@ -125,7 +125,25 @@ export function App() {
                 objectName: 'contact',
                 mode: editingContact ? 'edit' : 'create',
                 recordId: editingContact?.id,
-                fields: ['name', 'email', 'phone', 'company', 'position', 'priority', 'is_active', 'notes'],
+                fields: [
+                  'name', 
+                  'email', 
+                  'phone', 
+                  'company', 
+                  'position',
+                  'priority',
+                  'salary',           // Added
+                  'commission_rate',  // Added
+                  'birthdate',        // Added
+                  'last_contacted',   // Added
+                  'available_time',   // Added
+                  'profile_url',      // Added
+                  'department',       // Added
+                  'resume',           // Added
+                  'avatar',           // Added
+                  'is_active', 
+                  'notes'
+                ],
                 layout: 'vertical',
                 columns: 1,
                 showSubmit: true,

packages/components/src/renderers/form/form.tsx

@@ -405,8 +405,13 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
 
   switch (type) {
     case 'input':
+      if (inputType === 'file') {
+        // File inputs cannot be controlled with value prop
+         const { value, ...fileProps } = fieldProps;
+         return <Input type="file" placeholder={placeholder} {...fileProps} />;
+      }
       return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} value={fieldProps.value ?? ''} />;
-    
+      
     case 'textarea':
       return <Textarea placeholder={placeholder} {...fieldProps} value={fieldProps.value ?? ''} />;