@object-ui/plugin-form 3.3.0 → 3.3.1

package/src/autoLayout.ts

@@ -1,166 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Auto-Layout for ObjectForm
- *
- * Provides intelligent, zero-configuration default layout for metadata-driven forms.
- * When the user has not explicitly set columns/colSpan/sections, this module
- * infers optimal layout based on field count and field types.
- *
- * Priority: User configuration > Auto-layout inference
- */
-
-import type { FormField } from '@object-ui/types';
-
-/** Field types that should span full width in multi-column layouts */
-const WIDE_FIELD_TYPES = new Set([
-  'field:textarea',
-  'field:markdown',
-  'field:html',
-  'field:grid',
-  'field:rich-text',
-  'textarea',
-  'markdown',
-  'html',
-  'grid',
-  'rich-text',
-]);
-
-/** Object field types that are auto-generated and should be hidden in create mode */
-const AUTO_GENERATED_FIELD_TYPES = new Set([
-  'formula',
-  'summary',
-  'auto_number',
-  'autonumber',
-]);
-
-/**
- * Check if a field type is "wide" (should span full row in multi-column layout).
- */
-export function isWideFieldType(type: string): boolean {
-  return WIDE_FIELD_TYPES.has(type);
-}
-
-/**
- * Check if an object field type is auto-generated (formula, summary, auto_number).
- */
-export function isAutoGeneratedFieldType(type: string): boolean {
-  return AUTO_GENERATED_FIELD_TYPES.has(type);
-}
-
-/**
- * Infer optimal number of columns based on the number of visible fields
- * and whether any wide fields are present.
- *
- * Rules:
- * - 0-3 fields → 1 column
- * - 4+ fields → 2 columns
- */
-export function inferColumns(fieldCount: number): number {
-  if (fieldCount <= 3) return 1;
-  return 2;
-}
-
-/**
- * Apply colSpan to wide fields so they span the full row.
- * Only sets colSpan if the field does not already have one explicitly set.
- *
- * @returns A new array of fields with colSpan applied where needed.
- */
-export function applyAutoColSpan(fields: FormField[], columns: number): FormField[] {
-  if (columns <= 1) return fields;
-
-  return fields.map(field => {
-    // User-defined colSpan takes priority
-    if (field.colSpan !== undefined) return field;
-
-    // Wide field types should span full row
-    if (field.type && isWideFieldType(field.type)) {
-      return { ...field, colSpan: columns };
-    }
-
-    return field;
-  });
-}
-
-/**
- * Filter out auto-generated/readonly fields for create mode.
- * These fields (formula, summary, auto_number) are computed server-side
- * and should not appear in create forms.
- *
- * @param fields - The form fields array
- * @param objectSchema - The object schema with original field metadata
- * @returns Filtered fields array
- */
-export function filterCreateModeFields(
-  fields: FormField[],
-  objectSchema: any
-): FormField[] {
-  if (!objectSchema?.fields) return fields;
-
-  return fields.filter(field => {
-    const objField = objectSchema.fields[field.name];
-    if (!objField) return true; // keep fields not in schema (custom fields)
-
-    return !isAutoGeneratedFieldType(objField.type);
-  });
-}
-
-/**
- * Infer an appropriate modal size based on the number of layout columns.
- * Used to auto-upgrade the modal width when auto-layout detects multi-column forms.
- *
- * Mapping:
- * - 1 column   → 'default' (max-w-lg)
- * - 2 columns  → 'xl'      (max-w-5xl)
- * - 3+ columns → 'full'    (max-w-[95vw])
- */
-export function inferModalSize(columns: number): 'sm' | 'default' | 'lg' | 'xl' | 'full' {
-  if (columns <= 1) return 'default';
-  if (columns === 2) return 'xl';
-  return 'full';
-}
-
-/**
- * Main auto-layout orchestrator.
- * Applies intelligent defaults only when the user has not explicitly configured layout.
- *
- * @param formFields - Generated form fields
- * @param objectSchema - The original object schema (with field types)
- * @param schemaColumns - User-provided columns (from ObjectFormSchema)
- * @param mode - Form mode ('create' | 'edit' | 'view')
- * @returns Object with processed fields and inferred columns
- */
-export function applyAutoLayout(
-  formFields: FormField[],
-  objectSchema: any,
-  schemaColumns: number | undefined,
-  mode: string | undefined
-): { fields: FormField[]; columns: number | undefined } {
-  let fields = [...formFields];
-
-  // Step 1: Filter auto-generated fields in create mode
-  if (mode === 'create') {
-    fields = filterCreateModeFields(fields, objectSchema);
-  }
-
-  // Step 2: If user explicitly set columns, respect it but still apply auto colSpan
-  if (schemaColumns !== undefined) {
-    fields = applyAutoColSpan(fields, schemaColumns);
-    return { fields, columns: schemaColumns };
-  }
-
-  // Step 3: Infer columns from field count
-  const columns = inferColumns(fields.length);
-
-  // Step 4: Apply auto colSpan for wide fields
-  fields = applyAutoColSpan(fields, columns);
-
-  return { fields, columns };
-}

package/src/index.tsx

@@ -1,134 +0,0 @@
-/**
- * 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 React from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import { ObjectForm } from './ObjectForm';
-
-export { ObjectForm };
-export type { ObjectFormProps } from './ObjectForm';
-export { FormSection } from './FormSection';
-export type { FormSectionProps } from './FormSection';
-export {
-  applyAutoLayout,
-  inferColumns,
-  inferModalSize,
-  isWideFieldType,
-  isAutoGeneratedFieldType,
-  applyAutoColSpan,
-  filterCreateModeFields,
-} from './autoLayout';
-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';
-export { EmbeddableForm } from './EmbeddableForm';
-export type { EmbeddableFormProps, EmbeddableFormConfig } from './EmbeddableForm';
-export { FormAnalytics } from './FormAnalytics';
-export type { FormAnalyticsProps, FormSubmissionMetric } from './FormAnalytics';
-
-// Register object-form component
-const ObjectFormRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  return <ObjectForm schema={schema} />;
-};
-
-ComponentRegistry.register('object-form', ObjectFormRenderer, {
-  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'] },
-  ]
-});
-
-// 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
-
-// Register embeddable-form component for standalone public forms
-import { EmbeddableForm } from './EmbeddableForm';
-
-const EmbeddableFormRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  return <EmbeddableForm config={schema} />;
-};
-
-ComponentRegistry.register('embeddable-form', EmbeddableFormRenderer, {
-  namespace: 'plugin-form',
-  label: 'Embeddable Form',
-  category: 'plugin',
-  inputs: [
-    { name: 'formId', type: 'string', label: 'Form ID', required: true },
-    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
-    { name: 'title', type: 'string', label: 'Form Title' },
-    { name: 'description', type: 'string', label: 'Description' },
-    { name: 'fields', type: 'array', label: 'Fields' },
-    { name: 'allowMultiple', type: 'boolean', label: 'Allow Multiple Submissions' },
-  ]
-});
-
-// Register form-analytics component for submission dashboards
-import { FormAnalytics } from './FormAnalytics';
-
-const FormAnalyticsRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  return <FormAnalytics formId={schema.formId} formTitle={schema.formTitle} metrics={schema.metrics || { totalSubmissions: 0 }} />;
-};
-
-ComponentRegistry.register('form-analytics', FormAnalyticsRenderer, {
-  namespace: 'plugin-form',
-  label: 'Form Analytics',
-  category: 'plugin',
-  inputs: [
-    { name: 'formId', type: 'string', label: 'Form ID', required: true },
-    { name: 'formTitle', type: 'string', label: 'Form Title' },
-    { name: 'metrics', type: 'object', label: 'Submission Metrics' },
-  ]
-});

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "jsx": "react-jsx"
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.tsx"]
-}

package/vite.config.ts

@@ -1,58 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import { resolve } from 'path';
-
-export default defineConfig({
-  plugins: [
-    react(),
-    dts({
-      insertTypesEntry: true,
-      compilerOptions: { rootDir: resolve(__dirname, '../..') },
-      include: ['src'],
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@object-ui/core': resolve(__dirname, '../core/src'),
-      '@object-ui/types': resolve(__dirname, '../types/src'),
-      '@object-ui/data-objectstack': resolve(__dirname, '../data-objectstack/src'),
-      '@object-ui/react': resolve(__dirname, '../react/src'),
-      '@object-ui/components': resolve(__dirname, '../components/src'),
-      '@object-ui/fields': resolve(__dirname, '../fields/src'),
-      '@object-ui/plugin-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
-      '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
-    }
-  },
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.tsx'),
-      name: 'ObjectUIPluginForm',
-      fileName: 'index',
-    },
-    rollupOptions: {
-      external: [
-        'react',
-        'react-dom',
-        '@object-ui/components',
-        '@object-ui/core',
-        '@object-ui/fields',
-        '@object-ui/react',
-        '@object-ui/types',
-        'lucide-react'
-      ],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-        },
-      },
-    },
-  },
-  test: {
-    globals: true,
-    environment: 'happy-dom',
-    setupFiles: ['../../vitest.setup.tsx'],
-    passWithNoTests: true,
-  },
-});

package/vitest.config.ts

@@ -1,12 +0,0 @@
-/// <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

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