@object-ui/plugin-form 0.5.0 → 3.0.0

package/src/ObjectForm.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/ObjectForm',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Contact',
+    customFields: [
+      { name: 'firstName', label: 'First Name', type: 'text', required: true },
+      { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+      { name: 'email', label: 'Email', type: 'email', required: true },
+      { name: 'phone', label: 'Phone', type: 'tel' },
+    ],
+    className: 'w-full max-w-2xl',
+  } as any,
+};
+
+export const WithSections: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Employee',
+    sections: [
+      {
+        title: 'Personal Information',
+        fields: [
+          { name: 'firstName', label: 'First Name', type: 'text', required: true },
+          { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+          { name: 'dateOfBirth', label: 'Date of Birth', type: 'date' },
+        ],
+      },
+      {
+        title: 'Work Details',
+        fields: [
+          { name: 'department', label: 'Department', type: 'select', options: ['Engineering', 'Marketing', 'Sales', 'HR'] },
+          { name: 'role', label: 'Role', type: 'text' },
+          { name: 'startDate', label: 'Start Date', type: 'date' },
+        ],
+      },
+    ],
+    className: 'w-full max-w-2xl',
+  } as any,
+};
+
+export const ComplexFields: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Product',
+    customFields: [
+      { name: 'name', label: 'Product Name', type: 'text', required: true },
+      { name: 'category', label: 'Category', type: 'select', options: ['Electronics', 'Clothing', 'Food', 'Books'], required: true },
+      { name: 'price', label: 'Price', type: 'number', required: true },
+      { name: 'inStock', label: 'In Stock', type: 'checkbox' },
+      { name: 'description', label: 'Description', type: 'textarea', rows: 4 },
+    ],
+    className: 'w-full max-w-2xl',
+  } as any,
+};

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 {
   /**
@@ -59,6 +65,143 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
   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);
@@ -84,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);
       }
     };
 
@@ -100,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]);
 
@@ -270,8 +419,14 @@ 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, e?: any) => {
@@ -356,7 +511,7 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
   // Render error state
   if (error) {
     return (
-      <div className="p-4 border border-red-300 bg-red-50 rounded-md">
+      <div className="p-3 sm:p-4 border border-red-300 bg-red-50 rounded-md">
         <h3 className="text-red-800 font-semibold">Error loading form</h3>
         <p className="text-red-600 text-sm mt-1">{error.message}</p>
       </div>
@@ -366,7 +521,7 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
   // Render loading state
   if (loading) {
     return (
-      <div className="p-8 text-center">
+      <div className="p-4 sm:p-8 text-center">
         <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
         <p className="mt-2 text-sm text-gray-600">Loading form...</p>
       </div>
@@ -376,12 +531,55 @@ 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,

package/src/SplitForm.tsx

@@ -0,0 +1,299 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * SplitForm Component
+ * 
+ * A form variant that displays sections in a resizable split-panel layout.
+ * The first section renders in the left/top panel, remaining sections in the right/bottom panel.
+ * Aligns with @objectstack/spec FormView type: 'split'
+ */
+
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import type { FormField, DataSource } from '@object-ui/types';
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+  cn,
+} from '@object-ui/components';
+import { FormSection } from './FormSection';
+import { SchemaRenderer } from '@object-ui/react';
+import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
+
+export interface SplitFormSectionConfig {
+  name?: string;
+  label?: string;
+  description?: string;
+  columns?: 1 | 2 | 3 | 4;
+  fields: (string | FormField)[];
+}
+
+export interface SplitFormSchema {
+  type: 'object-form';
+  formType: 'split';
+  objectName: string;
+  mode: 'create' | 'edit' | 'view';
+  recordId?: string | number;
+  sections: SplitFormSectionConfig[];
+  
+  /**
+   * Split direction.
+   * @default 'horizontal'
+   */
+  splitDirection?: 'horizontal' | 'vertical';
+  
+  /**
+   * Size of the first panel (percentage 1-99).
+   * @default 50
+   */
+  splitSize?: number;
+  
+  /**
+   * Whether panels can be resized.
+   * @default true
+   */
+  splitResizable?: boolean;
+
+  // Common form props
+  showSubmit?: boolean;
+  submitText?: string;
+  showCancel?: boolean;
+  cancelText?: string;
+  initialValues?: Record<string, any>;
+  initialData?: Record<string, any>;
+  readOnly?: boolean;
+  onSuccess?: (data: any) => void | Promise<void>;
+  onError?: (error: Error) => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+export interface SplitFormProps {
+  schema: SplitFormSchema;
+  dataSource?: DataSource;
+  className?: string;
+}
+
+export const SplitForm: React.FC<SplitFormProps> = ({
+  schema,
+  dataSource,
+  className,
+}) => {
+  const [objectSchema, setObjectSchema] = useState<any>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Fetch object schema
+  useEffect(() => {
+    const fetchSchema = async () => {
+      if (!dataSource) {
+        setLoading(false);
+        return;
+      }
+      try {
+        const data = await dataSource.getObjectSchema(schema.objectName);
+        setObjectSchema(data);
+      } catch (err) {
+        setError(err as Error);
+        setLoading(false);
+      }
+    };
+    fetchSchema();
+  }, [schema.objectName, dataSource]);
+
+  // Fetch initial data
+  useEffect(() => {
+    const fetchData = async () => {
+      if (schema.mode === 'create' || !schema.recordId) {
+        setFormData(schema.initialData || schema.initialValues || {});
+        setLoading(false);
+        return;
+      }
+
+      if (!dataSource) {
+        setFormData(schema.initialData || schema.initialValues || {});
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const data = await dataSource.findOne(schema.objectName, schema.recordId);
+        setFormData(data || {});
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (objectSchema || !dataSource) {
+      fetchData();
+    }
+  }, [objectSchema, schema.mode, schema.recordId, schema.initialData, schema.initialValues, dataSource, schema.objectName]);
+
+  // Build form fields from section config
+  const buildSectionFields = useCallback((section: SplitFormSectionConfig): FormField[] => {
+    const fields: FormField[] = [];
+
+    for (const fieldDef of section.fields) {
+      const fieldName = typeof fieldDef === 'string' ? fieldDef : fieldDef.name;
+
+      if (typeof fieldDef === 'object') {
+        fields.push(fieldDef);
+      } else if (objectSchema?.fields?.[fieldName]) {
+        const field = objectSchema.fields[fieldName];
+        fields.push({
+          name: fieldName,
+          label: field.label || fieldName,
+          type: mapFieldTypeToFormType(field.type),
+          required: field.required || false,
+          disabled: schema.readOnly || schema.mode === 'view' || field.readonly,
+          placeholder: field.placeholder,
+          description: field.help || field.description,
+          validation: buildValidationRules(field),
+          field: field,
+          options: field.options,
+          multiple: field.multiple,
+        });
+      } else {
+        fields.push({
+          name: fieldName,
+          label: fieldName,
+          type: 'input',
+        });
+      }
+    }
+
+    return fields;
+  }, [objectSchema, schema.readOnly, schema.mode]);
+
+  // Handle form submission
+  const handleSubmit = useCallback(async (data: Record<string, any>) => {
+    if (!dataSource) {
+      if (schema.onSuccess) {
+        await schema.onSuccess(data);
+      }
+      return data;
+    }
+
+    try {
+      let result;
+      if (schema.mode === 'create') {
+        result = await dataSource.create(schema.objectName, data);
+      } else if (schema.mode === 'edit' && schema.recordId) {
+        result = await dataSource.update(schema.objectName, schema.recordId, data);
+      }
+      if (schema.onSuccess) {
+        await schema.onSuccess(result);
+      }
+      return result;
+    } catch (err) {
+      if (schema.onError) {
+        schema.onError(err as Error);
+      }
+      throw err;
+    }
+  }, [schema, dataSource]);
+
+  // Handle cancel
+  const handleCancel = useCallback(() => {
+    if (schema.onCancel) {
+      schema.onCancel();
+    }
+  }, [schema]);
+
+  // Split sections: first section in panel 1, rest in panel 2
+  const leftSections = useMemo(() => schema.sections.slice(0, 1), [schema.sections]);
+  const rightSections = useMemo(() => schema.sections.slice(1), [schema.sections]);
+
+  // Collect all fields for a unified form submission
+  const allFields: FormField[] = useMemo(
+    () => schema.sections.flatMap(section => buildSectionFields(section)),
+    [schema.sections, buildSectionFields]
+  );
+
+  const direction = schema.splitDirection || 'horizontal';
+  const panelSize = schema.splitSize || 50;
+
+  if (error) {
+    return (
+      <div className="p-4 border border-red-300 bg-red-50 rounded-md">
+        <h3 className="text-red-800 font-semibold">Error loading form</h3>
+        <p className="text-red-600 text-sm mt-1">{error.message}</p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="p-8 text-center">
+        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+        <p className="mt-2 text-sm text-gray-600">Loading form...</p>
+      </div>
+    );
+  }
+
+  // Build base form schema for SchemaRenderer
+  const baseFormSchema = {
+    type: 'form' as const,
+    layout: 'vertical' as const,
+    defaultValues: formData,
+    onSubmit: handleSubmit,
+    onCancel: handleCancel,
+  };
+
+  const renderSections = (sections: SplitFormSectionConfig[], showButtons: boolean) => (
+    <div className="space-y-4 p-4">
+      {sections.map((section, index) => (
+        <FormSection
+          key={section.name || section.label || index}
+          label={section.label}
+          description={section.description}
+          columns={section.columns || 1}
+        >
+          <SchemaRenderer
+            schema={{
+              ...baseFormSchema,
+              fields: buildSectionFields(section),
+              showSubmit: showButtons && schema.showSubmit !== false && schema.mode !== 'view',
+              showCancel: showButtons && schema.showCancel !== false,
+              submitLabel: schema.submitText || (schema.mode === 'create' ? 'Create' : 'Update'),
+              cancelLabel: schema.cancelText,
+            }}
+          />
+        </FormSection>
+      ))}
+    </div>
+  );
+
+  return (
+    <div className={cn('w-full', className, schema.className)}>
+      <ResizablePanelGroup orientation={direction as 'horizontal' | 'vertical'} className="min-h-[300px] rounded-lg border">
+        {/* Left / Top Panel */}
+        <ResizablePanel defaultSize={panelSize} minSize={20}>
+          {renderSections(leftSections, rightSections.length === 0)}
+        </ResizablePanel>
+
+        {rightSections.length > 0 && (
+          <>
+            <ResizableHandle withHandle={schema.splitResizable !== false} />
+
+            {/* Right / Bottom Panel */}
+            <ResizablePanel defaultSize={100 - panelSize} minSize={20}>
+              {renderSections(rightSections, true)}
+            </ResizablePanel>
+          </>
+        )}
+      </ResizablePanelGroup>
+    </div>
+  );
+};
+
+export default SplitForm;