@object-ui/plugin-form 0.3.1 → 2.0.0

package/src/ObjectForm.msw.test.tsx

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ObjectForm } from './ObjectForm';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+import { setupServer } from 'msw/node';
+import { http, HttpResponse } from 'msw';
+import { registerAllFields } from '@object-ui/fields';
+import React from 'react';
+import { ContactObject } from '../../../examples/crm/src/objects/contact.object';
+
+// Register widget renderers
+registerAllFields();
+
+const BASE_URL = process.env.OBJECTSTACK_API_URL || 'http://localhost';
+
+// --- Mock Data ---
+
+const mockSchema = ContactObject;
+
+const mockRecord = {
+  _id: '1',
+  name: 'Alice Johnson',
+  email: 'alice@example.com',
+  status: 'Active'
+};
+
+// --- MSW Setup ---
+
+const handlers = [
+  // .well-known discovery endpoint (used by client.connect())
+  http.get(`${BASE_URL}/.well-known/objectstack`, () => {
+    return HttpResponse.json({
+      name: 'ObjectStack API',
+      version: '1.0',
+      endpoints: {
+        data: '/api/v1/data',
+        metadata: '/api/v1/meta'
+      },
+      capabilities: {
+        graphql: false,
+        search: false,
+        websockets: false,
+        files: true,
+        analytics: false,
+        hub: false
+      }
+    });
+  }),
+
+  // OPTIONS handler for CORS preflight
+  http.options(`${BASE_URL}/*`, () => {
+    return new HttpResponse(null, {
+      status: 200,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET,HEAD,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH',
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      },
+    });
+  }),
+  
+  // Health check / Connection check (ObjectStackClient often pings root or /api/v1)
+  http.get(`${BASE_URL}/api/v1`, () => {
+    return HttpResponse.json({ status: 'ok', version: '1.0.0' });
+  }),
+
+  // Mock Schema Fetch: GET /api/v1/metadata/object/:name and /api/v1/meta/object/:name (client uses /meta)
+  http.get(`${BASE_URL}/api/v1/metadata/object/:name`, ({ params }) => {
+    const { name } = params;
+    if (name === 'contact') {
+      return HttpResponse.json(mockSchema);
+    }
+    return new HttpResponse(null, { status: 404 });
+  }),
+  http.get(`${BASE_URL}/api/v1/meta/object/:name`, ({ params }) => {
+    const { name } = params;
+    if (name === 'contact') {
+      return HttpResponse.json(mockSchema);
+    }
+    return new HttpResponse(null, { status: 404 });
+  }),
+
+  // Mock Record Fetch: GET /api/v1/data/:object/:id
+  http.get(`${BASE_URL}/api/v1/data/:object/:id`, ({ params }) => {
+    const { object, id } = params;
+    if (object === 'contact' && id === '1') {
+      return HttpResponse.json({ record: mockRecord });
+    }
+    return new HttpResponse(null, { status: 404 });
+  })
+];
+
+const server = setupServer(...handlers);
+
+// --- Test Suite ---
+
+describe('ObjectForm with ObjectStack/MSW', () => {
+  // Only start MSW if we are NOT using a real server
+  if (!process.env.OBJECTSTACK_API_URL) {
+    beforeAll(() => server.listen());
+    afterEach(() => server.resetHandlers());
+    afterAll(() => server.close());
+  }
+
+  // Create real adapter instance pointing to MSW or Real Server
+  const dataSource = new ObjectStackAdapter({
+    baseUrl: BASE_URL,
+    // Add custom fetch for environment that might need it, or rely on global fetch
+    // fetch: global.fetch 
+  });
+
+  it('loads schema and renders form fields', async () => {
+    render(
+      <ObjectForm
+        schema={{
+          type: 'object-form',
+          objectName: 'contact', // Triggers schema fetch
+          mode: 'create'
+        }}
+        dataSource={dataSource} // Logic moves from mock fn to real adapter + MSW
+      />
+    );
+
+    // Verify fields appear (async as schema loads via HTTP)
+    await waitFor(() => {
+      // Changed from 'Full Name' to 'Name' based on CRM example schema
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    }, { timeout: 2000 }); // Give slight buffer for network mock
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    expect(screen.getByText('Status')).toBeInTheDocument();
+  });
+
+  it('loads record data in edit mode', async () => {
+    render(
+      <ObjectForm
+        schema={{
+          type: 'object-form',
+          objectName: 'contact',
+          mode: 'edit',
+          recordId: '1'
+        }}
+        dataSource={dataSource}
+      />
+    );
+
+    // Initial load of schema logic + data fetch
+    await waitFor(() => {
+      // Changed from 'Full Name' to 'Name'
+      expect(screen.getByRole('textbox', { name: /Name/i })).toHaveValue('Alice Johnson');
+    }, { timeout: 2000 }); // Give slight buffer for network mock
+
+    // Changed from 'Email Address' to 'Email'
+    expect(screen.getByRole('textbox', { name: /Email/i })).toHaveValue('alice@example.com');
+  });
+});

package/src/ObjectForm.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ObjectForm } from './ObjectForm';
+import { registerAllFields } from '@object-ui/fields';
+import React from 'react';
+
+// Ensure fields are registered
+registerAllFields();
+
+describe('ObjectForm Integration', () => {
+    const objectSchema = {
+        name: 'test_object',
+        fields: {
+            name: {
+                type: 'text',
+                label: 'Name'
+            },
+            price: {
+                type: 'currency',
+                label: 'Price',
+                scale: 2
+            }
+        }
+    };
+
+    const mockDataSource: any = {
+        getObjectSchema: vi.fn().mockResolvedValue(objectSchema),
+        createRecord: vi.fn(),
+        updateRecord: vi.fn(),
+        getRecord: vi.fn(),
+        query: vi.fn()
+    };
+
+    it('renders fields using specialized components', async () => {
+        render(
+            <ObjectForm 
+                schema={{
+                    type: 'object-form',
+                    objectName: 'test_object',
+                    mode: 'create'
+                }}
+                dataSource={mockDataSource}
+            />
+        );
+
+        // Wait for schema to load (useEffect)
+        await waitFor(() => {
+            expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('test_object');
+        });
+
+        // Check if labels are present
+        await waitFor(() => {
+            expect(screen.queryByText('Name')).toBeTruthy();
+        });
+        expect(screen.getByText('Price')).toBeTruthy();
+        
+        // Assert input exists
+        // Since we don't have getByLabelText working reliably without full accessibility tree in happy-dom sometimes,
+        // we can try looking for inputs.
+    });
+});

package/src/ObjectForm.tsx

@@ -17,6 +17,12 @@ import React, { useEffect, useState, useCallback } from 'react';
 import type { ObjectFormSchema, FormField, FormSchema, DataSource } from '@object-ui/types';
 import { SchemaRenderer } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules, evaluateCondition, formatFileSize } from '@object-ui/fields';
+import { TabbedForm } from './TabbedForm';
+import { WizardForm } from './WizardForm';
+import { SplitForm } from './SplitForm';
+import { DrawerForm } from './DrawerForm';
+import { ModalForm } from './ModalForm';
+import { FormSection } from './FormSection';
 
 export interface ObjectFormProps {
   /**
@@ -58,6 +64,144 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
   schema,
   dataSource,
 }) => {
+
+  // Route to specialized form variant based on formType
+  if (schema.formType === 'tabbed' && schema.sections?.length) {
+    return (
+      <TabbedForm
+        schema={{
+          ...schema,
+          formType: 'tabbed',
+          sections: schema.sections.map(s => ({
+            name: s.name,
+            label: s.label,
+            description: s.description,
+            columns: s.columns,
+            fields: s.fields,
+          })),
+          defaultTab: schema.defaultTab,
+          tabPosition: schema.tabPosition,
+        }}
+        dataSource={dataSource}
+        className={schema.className}
+      />
+    );
+  }
+
+  if (schema.formType === 'wizard' && schema.sections?.length) {
+    return (
+      <WizardForm
+        schema={{
+          ...schema,
+          formType: 'wizard',
+          sections: schema.sections.map(s => ({
+            name: s.name,
+            label: s.label,
+            description: s.description,
+            columns: s.columns,
+            fields: s.fields,
+          })),
+          allowSkip: schema.allowSkip,
+          showStepIndicator: schema.showStepIndicator,
+          nextText: schema.nextText,
+          prevText: schema.prevText,
+          onStepChange: schema.onStepChange,
+        }}
+        dataSource={dataSource}
+        className={schema.className}
+      />
+    );
+  }
+
+  if (schema.formType === 'split' && schema.sections?.length) {
+    return (
+      <SplitForm
+        schema={{
+          ...schema,
+          formType: 'split',
+          sections: schema.sections.map(s => ({
+            name: s.name,
+            label: s.label,
+            description: s.description,
+            columns: s.columns,
+            fields: s.fields,
+          })),
+          splitDirection: schema.splitDirection,
+          splitSize: schema.splitSize,
+          splitResizable: schema.splitResizable,
+        }}
+        dataSource={dataSource}
+        className={schema.className}
+      />
+    );
+  }
+
+  if (schema.formType === 'drawer') {
+    const { layout: _layout, ...drawerRest } = schema;
+    const drawerLayout = (schema.layout === 'vertical' || schema.layout === 'horizontal') ? schema.layout : undefined;
+    return (
+      <DrawerForm
+        schema={{
+          ...drawerRest,
+          layout: drawerLayout,
+          formType: 'drawer',
+          sections: schema.sections?.map(s => ({
+            name: s.name,
+            label: s.label,
+            description: s.description,
+            columns: s.columns,
+            fields: s.fields,
+          })),
+          open: schema.open,
+          onOpenChange: schema.onOpenChange,
+          drawerSide: schema.drawerSide,
+          drawerWidth: schema.drawerWidth,
+        }}
+        dataSource={dataSource}
+        className={schema.className}
+      />
+    );
+  }
+
+  if (schema.formType === 'modal') {
+    const { layout: _layout2, ...modalRest } = schema;
+    const modalLayout = (schema.layout === 'vertical' || schema.layout === 'horizontal') ? schema.layout : undefined;
+    return (
+      <ModalForm
+        schema={{
+          ...modalRest,
+          layout: modalLayout,
+          formType: 'modal',
+          sections: schema.sections?.map(s => ({
+            name: s.name,
+            label: s.label,
+            description: s.description,
+            columns: s.columns,
+            fields: s.fields,
+          })),
+          open: schema.open,
+          onOpenChange: schema.onOpenChange,
+          modalSize: schema.modalSize,
+          modalCloseButton: schema.modalCloseButton,
+        }}
+        dataSource={dataSource}
+        className={schema.className}
+      />
+    );
+  }
+
+  // Default: simple form
+  return <SimpleObjectForm schema={schema} dataSource={dataSource} />;
+};
+
+/**
+ * SimpleObjectForm — default form variant with auto-generated fields from ObjectQL schema.
+ */
+const SimpleObjectForm: React.FC<ObjectFormProps> = ({
+  schema,
+  dataSource,
+}) => {
+
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formFields, setFormFields] = useState<FormField[]>([]);
   const [initialData, setInitialData] = useState<any>(null);
@@ -83,10 +227,13 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
           throw new Error('DataSource is required when using ObjectQL schema fetching (inline fields not provided)');
         }
         const schemaData = await dataSource.getObjectSchema(schema.objectName);
+        if (!schemaData) {
+          throw new Error(`No schema found for object "${schema.objectName}"`);
+        }
         setObjectSchema(schemaData);
       } catch (err) {
-        console.error('Failed to fetch object schema:', err);
         setError(err as Error);
+        setLoading(false);
       }
     };
 
@@ -99,6 +246,9 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
       });
     } else if (schema.objectName && dataSource) {
       fetchObjectSchema();
+    } else if (!hasInlineFields) {
+      // No objectName or dataSource and no inline fields — cannot proceed
+      setLoading(false);
     }
   }, [schema.objectName, dataSource, hasInlineFields]);
 
@@ -107,6 +257,7 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
     const fetchInitialData = async () => {
       if (!schema.recordId || schema.mode === 'create') {
         setInitialData(schema.initialData || schema.initialValues || {});
+        setLoading(false);
         return;
       }
 
@@ -154,23 +305,33 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
     // Determine which fields to include
     const fieldsToShow = schema.fields || Object.keys(objectSchema.fields || {});
     
-    fieldsToShow.forEach((fieldName) => {
-      const field = objectSchema.fields?.[fieldName];
-      if (!field) return;
+    // Support object format for fields in schema (legacy/compat)
+    const fieldNames = Array.isArray(fieldsToShow) 
+        ? fieldsToShow 
+        : Object.keys(fieldsToShow);
+
+    fieldNames.forEach((fieldName) => {
+      // If fieldsToShow is an array of strings, fieldName is the string
+      // If fieldsToShow is array of objects (unlikely but possible in some formats), we need to extract name
+      const name = typeof fieldName === 'string' ? fieldName : (fieldName as any).name;
+      if (!name) return;
+
+      const field = objectSchema.fields?.[name];
+      if (!field && !hasInlineFields) return; // Skip if not found in object definition unless inline
 
       // Check field-level permissions for create/edit modes
-      const hasWritePermission = !field.permissions || field.permissions.write !== false;
+      const hasWritePermission = !field?.permissions || field?.permissions.write !== false;
       if (schema.mode !== 'view' && !hasWritePermission) return; // Skip fields without write permission
 
       // Check if there's a custom field configuration
-      const customField = schema.customFields?.find(f => f.name === fieldName);
+      const customField = schema.customFields?.find(f => f.name === name);
       
       if (customField) {
         generatedFields.push(customField);
-      } else {
+      } else if (field) {
         // Auto-generate field from schema
         const formField: FormField = {
-          name: fieldName,
+          name: name,
           label: field.label || fieldName,
           type: mapFieldTypeToFormType(field.type),
           required: field.required || false,
@@ -178,6 +339,8 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
           placeholder: field.placeholder,
           description: field.help || field.description,
           validation: buildValidationRules(field),
+          // Important: Pass the original field metadata so widgets can access properties like precision, currency, etc.
+          field: field, 
         };
 
         // Add field-specific properties
@@ -187,17 +350,27 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
         }
 
         if (field.type === 'number' || field.type === 'currency' || field.type === 'percent') {
+          formField.inputType = 'number';
           formField.min = field.min;
           formField.max = field.max;
           formField.step = field.precision ? Math.pow(10, -field.precision) : undefined;
         }
 
+        if (field.type === 'date') {
+          formField.inputType = 'date';
+        }
+
+        if (field.type === 'datetime') {
+          formField.inputType = 'datetime-local';
+        }
+
         if (field.type === 'text' || field.type === 'textarea' || field.type === 'markdown' || field.type === 'html') {
           formField.maxLength = field.max_length;
           formField.minLength = field.min_length;
         }
 
         if (field.type === 'file' || field.type === 'image') {
+          formField.inputType = 'file';
           formField.multiple = field.multiple;
           formField.accept = field.accept ? field.accept.join(',') : undefined;
           // Add validation hints for file size and dimensions
@@ -246,11 +419,29 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
     });
 
     setFormFields(generatedFields);
-    setLoading(false);
-  }, [objectSchema, schema.fields, schema.customFields, schema.readOnly, schema.mode, hasInlineFields]);
+
+    // Only set loading to false if we are not going to fetch data
+    // This prevents a flash of empty form before data is loaded in edit mode
+    const willFetchData = !hasInlineFields && (schema.recordId && schema.mode !== 'create' && dataSource);
+    if (!willFetchData) {
+      setLoading(false);
+    }
+  }, [objectSchema, schema.fields, schema.customFields, schema.readOnly, schema.mode, hasInlineFields, schema.recordId, dataSource]);
 
   // Handle form submission
-  const handleSubmit = useCallback(async (formData: any) => {
+  const handleSubmit = useCallback(async (formData: any, e?: any) => {
+    // If we receive an event as the first argument, it means the Form renderer passed the event instead of data
+    // This happens when react-hook-form's handleSubmit is bypassed or configured incorrectly
+    if (formData && (formData.nativeEvent || formData._reactName === 'onSubmit')) {
+      console.warn('ObjectForm: Received Event instead of data in handleSubmit! This suggests a Form renderer issue.');
+      // Proceed defensively - we can't do much if we don't have data, but let's try to not crash
+      // If we are here, formData is actually the event
+      if (e === undefined) {
+         e = formData;
+         formData = {}; // Reset to empty object or we try to submit the Event object
+      }
+    }
+
     // For inline fields without a dataSource, just call the success callback
     if (hasInlineFields && !dataSource) {
       if (schema.onSuccess) {
@@ -299,6 +490,24 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
     }
   }, [schema]);
 
+  // Calculate default values from schema fields
+  const schemaDefaultValues = React.useMemo(() => {
+    if (!objectSchema?.fields) return {};
+    const defaults: Record<string, any> = {};
+    Object.keys(objectSchema.fields).forEach(key => {
+        const field = objectSchema.fields[key];
+        if (field.defaultValue !== undefined) {
+            defaults[key] = field.defaultValue;
+        }
+    });
+    return defaults;
+  }, [objectSchema]);
+
+  const finalDefaultValues = {
+     ...schemaDefaultValues,
+     ...initialData
+  };
+
   // Render error state
   if (error) {
     return (
@@ -322,19 +531,62 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
   // Convert to FormSchema
   // Note: FormSchema currently only supports 'vertical' and 'horizontal' layouts
   // Map 'grid' and 'inline' to 'vertical' as fallback
+  const formLayout = (schema.layout === 'vertical' || schema.layout === 'horizontal') 
+    ? schema.layout 
+    : 'vertical';
+
+  // If sections are provided for the simple form, render with FormSection grouping
+  if (schema.sections?.length && (!schema.formType || schema.formType === 'simple')) {
+    return (
+      <div className="w-full space-y-6">
+        {schema.sections.map((section, index) => {
+          // Filter formFields to only include fields in this section
+          const sectionFieldNames = section.fields.map(f => typeof f === 'string' ? f : f.name);
+          const sectionFields = formFields.filter(f => sectionFieldNames.includes(f.name));
+          
+          return (
+            <FormSection
+              key={section.name || section.label || index}
+              label={section.label}
+              description={section.description}
+              collapsible={section.collapsible}
+              collapsed={section.collapsed}
+              columns={section.columns}
+            >
+              <SchemaRenderer
+                schema={{
+                  type: 'form',
+                  fields: sectionFields,
+                  layout: formLayout,
+                  defaultValues: finalDefaultValues,
+                  // Only show action buttons after the last section
+                  showSubmit: index === schema.sections!.length - 1 && schema.showSubmit !== false && schema.mode !== 'view',
+                  showCancel: index === schema.sections!.length - 1 && schema.showCancel !== false,
+                  submitLabel: schema.submitText || (schema.mode === 'create' ? 'Create' : 'Update'),
+                  cancelLabel: schema.cancelText,
+                  onSubmit: handleSubmit,
+                  onCancel: handleCancel,
+                } as FormSchema}
+              />
+            </FormSection>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Default flat form (no sections)
   const formSchema: FormSchema = {
     type: 'form',
     fields: formFields,
-    layout: (schema.layout === 'vertical' || schema.layout === 'horizontal') 
-      ? schema.layout 
-      : 'vertical',
+    layout: formLayout,
     columns: schema.columns,
     submitLabel: schema.submitText || (schema.mode === 'create' ? 'Create' : 'Update'),
     cancelLabel: schema.cancelText,
     showSubmit: schema.showSubmit !== false && schema.mode !== 'view',
     showCancel: schema.showCancel !== false,
     resetOnSubmit: schema.showReset,
-    defaultValues: initialData,
+    defaultValues: finalDefaultValues,
     onSubmit: handleSubmit,
     onCancel: handleCancel,
     className: schema.className,