@object-ui/plugin-form 0.5.0 → 2.0.0

package/src/__tests__/NewVariants.test.tsx

@@ -0,0 +1,488 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { ObjectForm } from '../ObjectForm';
+import { SplitForm } from '../SplitForm';
+import { DrawerForm } from '../DrawerForm';
+import { ModalForm } from '../ModalForm';
+
+// Mock dataSource used across tests
+const mockObjectSchema = {
+  name: 'contacts',
+  fields: {
+    firstName: { label: 'First Name', type: 'text', required: true },
+    lastName: { label: 'Last Name', type: 'text', required: false },
+    email: { label: 'Email', type: 'email', required: true },
+    phone: { label: 'Phone', type: 'phone', required: false },
+    street: { label: 'Street', type: 'text', required: false },
+    city: { label: 'City', type: 'text', required: false },
+  },
+};
+
+const createMockDataSource = () => ({
+  getObjectSchema: vi.fn().mockResolvedValue(mockObjectSchema),
+  findOne: vi.fn().mockResolvedValue({ firstName: 'John', lastName: 'Doe' }),
+  find: vi.fn().mockResolvedValue([]),
+  create: vi.fn().mockResolvedValue({ id: '1' }),
+  update: vi.fn().mockResolvedValue({ id: '1' }),
+  delete: vi.fn().mockResolvedValue(true),
+});
+
+// ─── SplitForm Tests ────────────────────────────────────────────────────
+
+describe('SplitForm', () => {
+  it('renders with split panel layout', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <SplitForm
+        schema={{
+          type: 'object-form',
+          formType: 'split',
+          objectName: 'contacts',
+          mode: 'create',
+          sections: [
+            {
+              label: 'Personal',
+              fields: ['firstName', 'lastName'],
+            },
+            {
+              label: 'Contact',
+              fields: ['email', 'phone'],
+            },
+          ],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    // Wait for schema to load
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('contacts');
+    });
+
+    // Should show section labels
+    await waitFor(() => {
+      expect(screen.getByText('Personal')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Contact')).toBeInTheDocument();
+  });
+
+  it('renders loading state initially', () => {
+    const mockDataSource = createMockDataSource();
+    // Make getObjectSchema hang (never resolve)
+    mockDataSource.getObjectSchema.mockReturnValue(new Promise(() => {}));
+
+    render(
+      <SplitForm
+        schema={{
+          type: 'object-form',
+          formType: 'split',
+          objectName: 'contacts',
+          mode: 'create',
+          sections: [
+            { label: 'Section 1', fields: ['firstName'] },
+            { label: 'Section 2', fields: ['email'] },
+          ],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    expect(screen.getByText('Loading form...')).toBeInTheDocument();
+  });
+
+  it('shows error state on fetch failure', async () => {
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockRejectedValue(new Error('Network error'));
+
+    render(
+      <SplitForm
+        schema={{
+          type: 'object-form',
+          formType: 'split',
+          objectName: 'contacts',
+          mode: 'create',
+          sections: [
+            { label: 'Section 1', fields: ['firstName'] },
+            { label: 'Section 2', fields: ['email'] },
+          ],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Error loading form')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Network error')).toBeInTheDocument();
+  });
+});
+
+// ─── DrawerForm Tests ───────────────────────────────────────────────────
+
+describe('DrawerForm', () => {
+  it('renders inside a sheet with title and description', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <DrawerForm
+        schema={{
+          type: 'object-form',
+          formType: 'drawer',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'Create Contact',
+          description: 'Fill in the contact details',
+          open: true,
+          fields: ['firstName', 'lastName', 'email'],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    // Wait for schema and rendering
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('contacts');
+    });
+
+    // Title and description should be visible
+    await waitFor(() => {
+      expect(screen.getByText('Create Contact')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Fill in the contact details')).toBeInTheDocument();
+  });
+
+  it('calls onOpenChange when closing', async () => {
+    const onOpenChange = vi.fn();
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <DrawerForm
+        schema={{
+          type: 'object-form',
+          formType: 'drawer',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'Create Contact',
+          open: true,
+          onOpenChange,
+          fields: ['firstName'],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    // The close button (X) in the Sheet should exist
+    await waitFor(() => {
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      expect(closeButton).toBeInTheDocument();
+    });
+  });
+
+  it('renders with sections layout inside drawer', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <DrawerForm
+        schema={{
+          type: 'object-form',
+          formType: 'drawer',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'New Contact',
+          open: true,
+          sections: [
+            {
+              label: 'Personal Info',
+              fields: ['firstName', 'lastName'],
+              columns: 2,
+            },
+            {
+              label: 'Contact Details',
+              fields: ['email', 'phone'],
+            },
+          ],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('New Contact')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Personal Info')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Contact Details')).toBeInTheDocument();
+  });
+
+  it('renders when open is false (hidden)', () => {
+    const mockDataSource = createMockDataSource();
+
+    const { container } = render(
+      <DrawerForm
+        schema={{
+          type: 'object-form',
+          formType: 'drawer',
+          objectName: 'contacts',
+          mode: 'create',
+          open: false,
+          fields: ['firstName'],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    // When open=false, the sheet should not render content
+    expect(screen.queryByText('Create Contact')).not.toBeInTheDocument();
+  });
+});
+
+// ─── ModalForm Tests ────────────────────────────────────────────────────
+
+describe('ModalForm', () => {
+  it('renders inside a dialog with title and description', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'Create Contact',
+          description: 'Enter contact information',
+          open: true,
+          fields: ['firstName', 'lastName', 'email'],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('contacts');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Contact')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Enter contact information')).toBeInTheDocument();
+  });
+
+  it('renders with sections layout inside modal', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'New Contact',
+          open: true,
+          sections: [
+            {
+              label: 'Basic Info',
+              fields: ['firstName', 'lastName'],
+              columns: 2,
+            },
+            {
+              label: 'Contact Details',
+              fields: ['email', 'phone'],
+            },
+          ],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('New Contact')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Basic Info')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Contact Details')).toBeInTheDocument();
+  });
+
+  it('does not render content when open is false', () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'Hidden Modal',
+          open: false,
+          fields: ['firstName'],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    expect(screen.queryByText('Hidden Modal')).not.toBeInTheDocument();
+  });
+
+  it('applies size class for large modal', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'Large Modal',
+          open: true,
+          modalSize: 'xl',
+          fields: ['firstName'],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Large Modal')).toBeInTheDocument();
+    });
+  });
+
+  it('shows error state on data fetch failure', async () => {
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockRejectedValue(new Error('Server error'));
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'contacts',
+          mode: 'create',
+          open: true,
+          fields: ['firstName'],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Error loading form')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Server error')).toBeInTheDocument();
+  });
+});
+
+// ─── ObjectForm Routing Tests ───────────────────────────────────────────
+
+describe('ObjectForm routing to new variants', () => {
+  it('routes formType=split to SplitForm', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ObjectForm
+        schema={{
+          type: 'object-form',
+          objectName: 'contacts',
+          mode: 'create',
+          formType: 'split',
+          sections: [
+            { label: 'Left Panel', fields: ['firstName', 'lastName'] },
+            { label: 'Right Panel', fields: ['email', 'phone'] },
+          ],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    // Should load via SplitForm
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('contacts');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Left Panel')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Right Panel')).toBeInTheDocument();
+  });
+
+  it('routes formType=drawer to DrawerForm', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ObjectForm
+        schema={{
+          type: 'object-form',
+          objectName: 'contacts',
+          mode: 'create',
+          formType: 'drawer',
+          title: 'Drawer Form Title',
+          open: true,
+          fields: ['firstName', 'lastName'],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Drawer Form Title')).toBeInTheDocument();
+    });
+  });
+
+  it('routes formType=modal to ModalForm', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ObjectForm
+        schema={{
+          type: 'object-form',
+          objectName: 'contacts',
+          mode: 'create',
+          formType: 'modal',
+          title: 'Modal Form Title',
+          open: true,
+          fields: ['firstName', 'lastName'],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Modal Form Title')).toBeInTheDocument();
+    });
+  });
+});
+
+// ─── Export Tests ────────────────────────────────────────────────────────
+
+describe('New variant exports', () => {
+  it('exports SplitForm', () => {
+    expect(SplitForm).toBeDefined();
+    expect(typeof SplitForm).toBe('function');
+  });
+
+  it('exports DrawerForm', () => {
+    expect(DrawerForm).toBeDefined();
+    expect(typeof DrawerForm).toBe('function');
+  });
+
+  it('exports ModalForm', () => {
+    expect(ModalForm).toBeDefined();
+    expect(typeof ModalForm).toBe('function');
+  });
+});

package/src/index.tsx

@@ -12,6 +12,18 @@ import { ObjectForm } from './ObjectForm';
 
 export { ObjectForm };
 export type { ObjectFormProps } from './ObjectForm';
+export { FormSection } from './FormSection';
+export type { FormSectionProps } from './FormSection';
+export { TabbedForm } from './TabbedForm';
+export type { TabbedFormProps, TabbedFormSchema, FormSectionConfig } from './TabbedForm';
+export { WizardForm } from './WizardForm';
+export type { WizardFormProps, WizardFormSchema } from './WizardForm';
+export { SplitForm } from './SplitForm';
+export type { SplitFormProps, SplitFormSchema } from './SplitForm';
+export { DrawerForm } from './DrawerForm';
+export type { DrawerFormProps, DrawerFormSchema } from './DrawerForm';
+export { ModalForm } from './ModalForm';
+export type { ModalFormProps, ModalFormSchema } from './ModalForm';
 
 // Register object-form component
 const ObjectFormRenderer: React.FC<{ schema: any }> = ({ schema }) => {
@@ -19,7 +31,52 @@ const ObjectFormRenderer: React.FC<{ schema: any }> = ({ schema }) => {
 };
 
 ComponentRegistry.register('object-form', ObjectFormRenderer, {
-  namespace: 'plugin-form'
+  namespace: 'plugin-form',
+  label: 'Object Form',
+  category: 'plugin',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'fields', type: 'array', label: 'Fields' },
+    { name: 'mode', type: 'enum', label: 'Mode', enum: ['create', 'edit', 'view'] },
+    { name: 'formType', type: 'enum', label: 'Form Type', enum: ['simple', 'tabbed', 'wizard', 'split', 'drawer', 'modal'] },
+    { name: 'sections', type: 'array', label: 'Sections' },
+    { name: 'title', type: 'string', label: 'Title' },
+    { name: 'description', type: 'string', label: 'Description' },
+    { name: 'layout', type: 'enum', label: 'Layout', enum: ['vertical', 'horizontal', 'inline', 'grid'] },
+    { name: 'columns', type: 'number', label: 'Columns' },
+    // Tabbed
+    { name: 'defaultTab', type: 'string', label: 'Default Tab' },
+    { name: 'tabPosition', type: 'enum', label: 'Tab Position', enum: ['top', 'bottom', 'left', 'right'] },
+    // Wizard
+    { name: 'allowSkip', type: 'boolean', label: 'Allow Skip Steps' },
+    { name: 'showStepIndicator', type: 'boolean', label: 'Show Step Indicator' },
+    // Split
+    { name: 'splitDirection', type: 'enum', label: 'Split Direction', enum: ['horizontal', 'vertical'] },
+    { name: 'splitSize', type: 'number', label: 'Split Panel Size (%)' },
+    { name: 'splitResizable', type: 'boolean', label: 'Split Resizable' },
+    // Drawer
+    { name: 'drawerSide', type: 'enum', label: 'Drawer Side', enum: ['top', 'bottom', 'left', 'right'] },
+    { name: 'drawerWidth', type: 'string', label: 'Drawer Width' },
+    // Modal
+    { name: 'modalSize', type: 'enum', label: 'Modal Size', enum: ['sm', 'default', 'lg', 'xl', 'full'] },
+  ]
 });
-// Note: 'form' type is handled by @object-ui/components Form component
-// This plugin only handles 'object-form' which integrates with ObjectQL/ObjectStack
+
+// Register as view:form for the standard view protocol
+// This allows using { type: 'view:form', objectName: '...' } in schemas
+// skipFallback prevents overwriting the basic 'form' component from @object-ui/components
+ComponentRegistry.register('form', ObjectFormRenderer, {
+  namespace: 'view',
+  skipFallback: true,
+  label: 'Data Form View',
+  category: 'view',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'fields', type: 'array', label: 'Fields' },
+    { name: 'mode', type: 'enum', label: 'Mode', enum: ['create', 'edit', 'view'] },
+  ]
+});
+
+// Note: 'form' type (without namespace) is handled by @object-ui/components Form component
+// This plugin registers as 'view:form' (with view namespace) for the view protocol
+// ObjectForm internally uses { type: 'form' } to render the basic Form component

package/vitest.config.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';