@object-ui/plugin-form 3.3.0 → 3.3.2

package/src/DrawerForm.tsx

@@ -1,410 +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.
- */
-
-/**
- * DrawerForm Component
- * 
- * A form variant that renders inside a slide-out Sheet (drawer) panel.
- * Aligns with @objectstack/spec FormView type: 'drawer'
- */
-
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import type { FormField, DataSource } from '@object-ui/types';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-  cn,
-} from '@object-ui/components';
-import { FormSection } from './FormSection';
-import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
-import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
-import { applyAutoLayout } from './autoLayout';
-
-/**
- * Container-query-based grid classes for form field layout.
- * Uses @container / @md: / @2xl: / @4xl: variants so that the grid
- * responds to the drawer's actual width instead of the viewport.
- */
-const CONTAINER_GRID_COLS: Record<number, string | undefined> = {
-  1: undefined,
-  2: 'grid gap-4 grid-cols-1 @md:grid-cols-2',
-  3: 'grid gap-4 grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3',
-  4: 'grid gap-4 grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 @4xl:grid-cols-4',
-};
-
-export interface DrawerFormSectionConfig {
-  name?: string;
-  label?: string;
-  description?: string;
-  columns?: 1 | 2 | 3 | 4;
-  fields: (string | FormField)[];
-}
-
-export interface DrawerFormSchema {
-  type: 'object-form';
-  formType: 'drawer';
-  objectName: string;
-  mode: 'create' | 'edit' | 'view';
-  recordId?: string | number;
-  title?: string;
-  description?: string;
-  sections?: DrawerFormSectionConfig[];
-  fields?: string[];
-  customFields?: FormField[];
-
-  /**
-   * Whether the drawer is open.
-   * @default true
-   */
-  open?: boolean;
-
-  /**
-   * Callback when open state changes.
-   */
-  onOpenChange?: (open: boolean) => void;
-
-  /**
-   * Drawer side.
-   * @default 'right'
-   */
-  drawerSide?: 'top' | 'bottom' | 'left' | 'right';
-
-  /**
-   * Drawer width (CSS value for left/right, or height for top/bottom).
-   * Applied via className overrides since Sheet uses cva variants.
-   * @default undefined (uses Sheet default)
-   */
-  drawerWidth?: string;
-
-  // Common form props
-  showSubmit?: boolean;
-  submitText?: string;
-  showCancel?: boolean;
-  cancelText?: string;
-  initialValues?: Record<string, any>;
-  initialData?: Record<string, any>;
-  readOnly?: boolean;
-  layout?: 'vertical' | 'horizontal';
-  columns?: number;
-  onSuccess?: (data: any) => void | Promise<void>;
-  onError?: (error: Error) => void;
-  onCancel?: () => void;
-  className?: string;
-}
-
-export interface DrawerFormProps {
-  schema: DrawerFormSchema;
-  dataSource?: DataSource;
-  className?: string;
-}
-
-export const DrawerForm: React.FC<DrawerFormProps> = ({
-  schema,
-  dataSource,
-  className,
-}) => {
-  const { fieldLabel } = useSafeFieldLabel();
-  const [objectSchema, setObjectSchema] = useState<any>(null);
-  const [formFields, setFormFields] = useState<FormField[]>([]);
-  const [formData, setFormData] = useState<Record<string, any>>({});
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  const isOpen = schema.open !== false;
-  const side = schema.drawerSide || 'right';
-
-  // 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: DrawerFormSectionConfig): 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: fieldLabel(schema.objectName, fieldName, 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]);
-
-  // Build fields from flat field list (when no sections provided)
-  useEffect(() => {
-    if (!objectSchema && dataSource) return;
-
-    if (schema.customFields?.length) {
-      setFormFields(schema.customFields);
-      setLoading(false);
-      return;
-    }
-
-    if (schema.sections?.length) {
-      // Fields are built per-section in the render
-      setLoading(false);
-      return;
-    }
-
-    if (!objectSchema) return;
-
-    const fieldsToShow = schema.fields || Object.keys(objectSchema.fields || {});
-    const generated: FormField[] = [];
-
-    for (const fieldName of fieldsToShow) {
-      const name = typeof fieldName === 'string' ? fieldName : (fieldName as any).name;
-      if (!name) continue;
-      const field = objectSchema.fields?.[name];
-      if (!field) continue;
-
-      generated.push({
-        name,
-        label: fieldLabel(schema.objectName, name, field.label || name),
-        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,
-      });
-    }
-
-    setFormFields(generated);
-    setLoading(false);
-  }, [objectSchema, schema.fields, schema.customFields, schema.sections, schema.readOnly, schema.mode, dataSource]);
-
-  // Handle form submission
-  const handleSubmit = useCallback(async (data: Record<string, any>) => {
-    if (!dataSource) {
-      if (schema.onSuccess) {
-        await schema.onSuccess(data);
-      }
-      // Close drawer on success
-      schema.onOpenChange?.(false);
-      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);
-      }
-      // Close drawer on success
-      schema.onOpenChange?.(false);
-      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();
-    }
-    // Close drawer on cancel
-    schema.onOpenChange?.(false);
-  }, [schema]);
-
-  // Width style for the drawer content
-  const widthStyle = useMemo(() => {
-    if (!schema.drawerWidth) return undefined;
-    const isHorizontal = side === 'left' || side === 'right';
-    return isHorizontal
-      ? { width: schema.drawerWidth, maxWidth: schema.drawerWidth }
-      : { height: schema.drawerWidth, maxHeight: schema.drawerWidth };
-  }, [schema.drawerWidth, side]);
-
-  const formLayout = (schema.layout === 'vertical' || schema.layout === 'horizontal')
-    ? schema.layout
-    : 'vertical';
-
-  // Build base form schema
-  const baseFormSchema = {
-    type: 'form' as const,
-    layout: formLayout,
-    defaultValues: formData,
-    submitLabel: schema.submitText || (schema.mode === 'create' ? 'Create' : 'Update'),
-    cancelLabel: schema.cancelText,
-    showSubmit: schema.showSubmit !== false && schema.mode !== 'view',
-    showCancel: schema.showCancel !== false,
-    onSubmit: handleSubmit,
-    onCancel: handleCancel,
-  };
-
-  const renderContent = () => {
-    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>
-      );
-    }
-
-    // Sections layout
-    if (schema.sections?.length) {
-      return (
-        <div className="space-y-6">
-          {schema.sections.map((section, index) => {
-            const sectionCols = section.columns || 1;
-            return (
-              <FormSection
-                key={section.name || section.label || index}
-                label={section.label}
-                description={section.description}
-                columns={sectionCols}
-                gridClassName={CONTAINER_GRID_COLS[sectionCols]}
-              >
-                <SchemaRenderer
-                  schema={{
-                    ...baseFormSchema,
-                    fields: buildSectionFields(section),
-                    showSubmit: index === schema.sections!.length - 1 && baseFormSchema.showSubmit,
-                    showCancel: index === schema.sections!.length - 1 && baseFormSchema.showCancel,
-                  }}
-                />
-              </FormSection>
-            );
-          })}
-        </div>
-      );
-    }
-
-    // Apply auto-layout for flat fields (infer columns + colSpan)
-    const autoLayoutResult = applyAutoLayout(formFields, objectSchema, schema.columns, schema.mode);
-
-    // Flat fields layout — use container-query grid classes so the form
-    // responds to the drawer width, not the viewport width.
-    const containerFieldClass = CONTAINER_GRID_COLS[autoLayoutResult.columns || 1];
-
-    return (
-      <SchemaRenderer
-        schema={{
-          ...baseFormSchema,
-          fields: autoLayoutResult.fields,
-          columns: autoLayoutResult.columns,
-          ...(containerFieldClass ? { fieldContainerClass: containerFieldClass } : {}),
-        }}
-      />
-    );
-  };
-
-  return (
-    <Sheet open={isOpen} onOpenChange={schema.onOpenChange}>
-      <SheetContent
-        side={side}
-        className={cn('overflow-y-auto', className, schema.className)}
-        style={widthStyle}
-      >
-        {(schema.title || schema.description) && (
-          <SheetHeader>
-            {schema.title && <SheetTitle>{schema.title}</SheetTitle>}
-            {schema.description && <SheetDescription>{schema.description}</SheetDescription>}
-          </SheetHeader>
-        )}
-
-        <div className="@container py-4">
-          {renderContent()}
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-};
-
-export default DrawerForm;

package/src/EmbeddableForm.tsx

@@ -1,240 +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.
- */
-
-/**
- * EmbeddableForm Component
- *
- * A standalone embeddable form that can be accessed without authentication.
- * Designed for external data collection use cases (surveys, registrations, etc.).
- *
- * Features:
- * - Renders from ObjectFormSchema or inline field definitions
- * - No authentication required (public access)
- * - URL prefill parameters support (?name=John&email=...)
- * - Configurable branding (logo, colors, title)
- * - Success/thank-you page after submission
- */
-
-import React, { useState, useCallback, useMemo } from 'react';
-import type { DataSource, FormField } from '@object-ui/types';
-import { ObjectForm } from './ObjectForm';
-
-export interface EmbeddableFormConfig {
-  /** Unique form ID */
-  formId: string;
-  /** Object name to create records in */
-  objectName: string;
-  /** Form title displayed at the top */
-  title?: string;
-  /** Form description / instructions */
-  description?: string;
-  /** Fields to include in the form (subset of object fields) */
-  fields?: string[];
-  /** Custom field definitions for inline forms */
-  customFields?: FormField[];
-  /** Branding configuration */
-  branding?: {
-    logo?: string;
-    primaryColor?: string;
-    backgroundColor?: string;
-  };
-  /** Thank you page configuration */
-  thankYouPage?: {
-    title?: string;
-    message?: string;
-    redirectUrl?: string;
-    redirectDelay?: number;
-  };
-  /** Allow multiple submissions */
-  allowMultiple?: boolean;
-}
-
-export interface EmbeddableFormProps {
-  /** Form configuration */
-  config: EmbeddableFormConfig;
-  /** Data source for creating records */
-  dataSource?: DataSource;
-  /** URL search parameters for prefilling fields */
-  prefillParams?: Record<string, string>;
-  /** Additional CSS class */
-  className?: string;
-}
-
-/**
- * EmbeddableForm — Standalone form for external data collection.
- *
- * Can be rendered at a public URL (e.g., `/forms/:formId`) without auth.
- * Submissions create records in the specified object via DataSource.
- */
-export const EmbeddableForm: React.FC<EmbeddableFormProps> = ({
-  config,
-  dataSource,
-  prefillParams,
-  className,
-}) => {
-  const [submitted, setSubmitted] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Build initial data from URL prefill params or window.location.search
-  const initialData = useMemo(() => {
-    const data: Record<string, string> = {};
-    // Explicit prefillParams take priority
-    if (prefillParams) {
-      for (const [key, value] of Object.entries(prefillParams)) {
-        data[key] = value;
-      }
-    }
-    // Also parse URL search parameters for prefilling (Phase 14 L2)
-    if (typeof window !== 'undefined') {
-      const urlParams = new URLSearchParams(window.location.search);
-      urlParams.forEach((value, key) => {
-        if (!(key in data)) {
-          data[key] = value;
-        }
-      });
-    }
-    return Object.keys(data).length > 0 ? data : undefined;
-  }, [prefillParams]);
-
-  const handleSubmit = useCallback(async (formData: Record<string, any>) => {
-    setSubmitting(true);
-    setError(null);
-
-    try {
-      if (dataSource) {
-        await dataSource.create(config.objectName, formData);
-      }
-      setSubmitted(true);
-
-      // Handle redirect after delay
-      if (config.thankYouPage?.redirectUrl) {
-        const delay = config.thankYouPage.redirectDelay ?? 3000;
-        setTimeout(() => {
-          window.location.href = config.thankYouPage!.redirectUrl!;
-        }, delay);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to submit form. Please try again.');
-    } finally {
-      setSubmitting(false);
-    }
-  }, [dataSource, config]);
-
-  const handleReset = useCallback(() => {
-    setSubmitted(false);
-    setError(null);
-  }, []);
-
-  // Branding styles
-  const brandingStyle = useMemo(() => {
-    const style: React.CSSProperties = {};
-    if (config.branding?.backgroundColor) {
-      style.backgroundColor = config.branding.backgroundColor;
-    }
-    return style;
-  }, [config.branding]);
-
-  // Thank you page
-  if (submitted) {
-    const thankYou = config.thankYouPage;
-    return (
-      <div
-        className={`min-h-screen flex items-center justify-center p-4 ${className || ''}`}
-        style={brandingStyle}
-      >
-        <div className="max-w-md w-full bg-card rounded-lg shadow-lg p-8 text-center space-y-4">
-          <div className="text-4xl">✓</div>
-          <h2 className="text-xl font-semibold text-foreground">
-            {thankYou?.title || 'Thank You!'}
-          </h2>
-          <p className="text-muted-foreground">
-            {thankYou?.message || 'Your submission has been received successfully.'}
-          </p>
-          {config.allowMultiple && (
-            <button
-              onClick={handleReset}
-              className="mt-4 px-4 py-2 text-sm font-medium rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
-            >
-              Submit Another Response
-            </button>
-          )}
-          {thankYou?.redirectUrl && (
-            <p className="text-xs text-muted-foreground">
-              Redirecting in {Math.ceil((thankYou.redirectDelay ?? 3000) / 1000)} seconds...
-            </p>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`min-h-screen flex items-center justify-center p-4 ${className || ''}`}
-      style={brandingStyle}
-    >
-      <div className="max-w-2xl w-full bg-card rounded-lg shadow-lg overflow-hidden">
-        {/* Header */}
-        <div
-          className="p-6 border-b"
-          style={config.branding?.primaryColor ? { borderBottomColor: config.branding.primaryColor } : undefined}
-        >
-          {config.branding?.logo && (
-            <img
-              src={config.branding.logo}
-              alt="Logo"
-              className="h-8 mb-4"
-            />
-          )}
-          {config.title && (
-            <h1 className="text-xl font-semibold text-foreground">
-              {config.title}
-            </h1>
-          )}
-          {config.description && (
-            <p className="text-sm text-muted-foreground mt-1">
-              {config.description}
-            </p>
-          )}
-        </div>
-
-        {/* Form body */}
-        <div className="p-6">
-          {error && (
-            <div className="mb-4 p-3 bg-destructive/10 border border-destructive/30 rounded-md text-sm text-destructive">
-              {error}
-            </div>
-          )}
-          <ObjectForm
-            schema={{
-              type: 'object-form',
-              objectName: config.objectName,
-              mode: 'create',
-              fields: config.fields,
-              customFields: config.customFields,
-              initialData,
-              onSuccess: handleSubmit,
-              submitLabel: submitting ? 'Submitting...' : 'Submit',
-            }}
-            dataSource={dataSource}
-          />
-        </div>
-
-        {/* Footer */}
-        <div className="px-6 py-3 border-t bg-muted/20 text-center">
-          <p className="text-xs text-muted-foreground">
-            Powered by ObjectStack
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default EmbeddableForm;