@object-ui/plugin-form 3.3.0 → 3.3.2

package/src/FormAnalytics.tsx

@@ -1,209 +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.
- */
-
-/**
- * FormAnalytics Component
- *
- * Displays basic analytics for form submissions:
- * - Total submissions count
- * - Fill rate (completed vs started)
- * - Average completion time
- * - Field drop-off rates
- *
- * This is an L1 Foundation component for Phase 14.
- */
-
-import React, { useMemo } from 'react';
-import { Card, CardHeader, CardTitle, CardContent, CardDescription } from '@object-ui/components';
-
-export interface FormSubmissionMetric {
-  /** Total number of form submissions */
-  totalSubmissions: number;
-  /** Number of forms started but not completed */
-  abandonedSubmissions?: number;
-  /** Average time to complete form in seconds */
-  avgCompletionTime?: number;
-  /** Submissions per day over the last N days */
-  dailySubmissions?: Array<{
-    date: string;
-    count: number;
-  }>;
-  /** Field-level drop-off data */
-  fieldDropOff?: Array<{
-    fieldName: string;
-    label: string;
-    completionRate: number;
-  }>;
-}
-
-export interface FormAnalyticsProps {
-  /** Form identifier */
-  formId: string;
-  /** Form title */
-  formTitle?: string;
-  /** Submission metrics data */
-  metrics: FormSubmissionMetric;
-  /** Additional CSS class */
-  className?: string;
-}
-
-function formatDuration(seconds: number): string {
-  if (seconds < 60) return `${Math.round(seconds)}s`;
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${Math.round(seconds % 60)}s`;
-  return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
-}
-
-/**
- * FormAnalytics — Basic form analytics dashboard showing submission metrics.
- *
- * Displays fill rate, completion time, and field-level drop-off data
- * for embeddable forms and data collection workflows.
- */
-export const FormAnalytics: React.FC<FormAnalyticsProps> = ({
-  formId,
-  formTitle,
-  metrics,
-  className,
-}) => {
-  const fillRate = useMemo(() => {
-    if (!metrics.abandonedSubmissions) return 100;
-    const total = metrics.totalSubmissions + metrics.abandonedSubmissions;
-    if (total === 0) return 0;
-    return Math.round((metrics.totalSubmissions / total) * 100);
-  }, [metrics.totalSubmissions, metrics.abandonedSubmissions]);
-
-  // Find max count for bar chart scaling
-  const maxDaily = useMemo(() => {
-    if (!metrics.dailySubmissions?.length) return 1;
-    return Math.max(...metrics.dailySubmissions.map(d => d.count), 1);
-  }, [metrics.dailySubmissions]);
-
-  return (
-    <div className={`space-y-4 ${className || ''}`}>
-      {/* Header */}
-      <div>
-        <h2 className="text-lg font-semibold text-foreground">
-          {formTitle || `Form Analytics`}
-        </h2>
-        <p className="text-sm text-muted-foreground">
-          Form ID: {formId}
-        </p>
-      </div>
-
-      {/* Metric cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-        {/* Total Submissions */}
-        <Card>
-          <CardHeader className="pb-2">
-            <CardDescription>Total Submissions</CardDescription>
-            <CardTitle className="text-2xl">
-              {metrics.totalSubmissions.toLocaleString()}
-            </CardTitle>
-          </CardHeader>
-        </Card>
-
-        {/* Fill Rate */}
-        <Card>
-          <CardHeader className="pb-2">
-            <CardDescription>Fill Rate</CardDescription>
-            <CardTitle className="text-2xl">
-              {fillRate}%
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="w-full bg-muted rounded-full h-2">
-              <div
-                className="bg-primary rounded-full h-2 transition-all"
-                style={{ width: `${fillRate}%` }}
-              />
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Avg Completion Time */}
-        <Card>
-          <CardHeader className="pb-2">
-            <CardDescription>Avg. Completion Time</CardDescription>
-            <CardTitle className="text-2xl">
-              {metrics.avgCompletionTime
-                ? formatDuration(metrics.avgCompletionTime)
-                : '—'}
-            </CardTitle>
-          </CardHeader>
-        </Card>
-      </div>
-
-      {/* Daily Submissions Chart */}
-      {metrics.dailySubmissions && metrics.dailySubmissions.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-sm font-medium">
-              Daily Submissions
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-end gap-1 h-32">
-              {metrics.dailySubmissions.map((day, idx) => (
-                <div key={idx} className="flex-1 flex flex-col items-center gap-1">
-                  <div
-                    className="w-full bg-primary/80 rounded-t transition-all hover:bg-primary"
-                    style={{ height: `${(day.count / maxDaily) * 100}%`, minHeight: day.count > 0 ? '4px' : '0' }}
-                    title={`${day.date}: ${day.count} submissions`}
-                  />
-                  <span className="text-[10px] text-muted-foreground truncate w-full text-center">
-                    {day.date.slice(-5)}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Field Drop-off */}
-      {metrics.fieldDropOff && metrics.fieldDropOff.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-sm font-medium">
-              Field Completion Rates
-            </CardTitle>
-            <CardDescription>
-              Percentage of users who completed each field
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              {metrics.fieldDropOff.map((field, idx) => (
-                <div key={idx} className="space-y-1">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-foreground">{field.label}</span>
-                    <span className="text-muted-foreground">{field.completionRate}%</span>
-                  </div>
-                  <div className="w-full bg-muted rounded-full h-1.5">
-                    <div
-                      className={`rounded-full h-1.5 transition-all ${
-                        field.completionRate >= 80
-                          ? 'bg-green-500'
-                          : field.completionRate >= 50
-                          ? 'bg-yellow-500'
-                          : 'bg-destructive'
-                      }`}
-                      style={{ width: `${field.completionRate}%` }}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
-};
-
-export default FormAnalytics;

package/src/FormSection.tsx

@@ -1,152 +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.
- */
-
-/**
- * FormSection Component
- * 
- * A form section component that groups fields together with optional
- * collapsibility and multi-column layout. Aligns with @objectstack/spec FormSection.
- */
-
-import React, { useState } from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { cn } from '@object-ui/components';
-
-export interface FormSectionProps {
-  /**
-   * Section title/label
-   */
-  label?: string;
-  
-  /**
-   * Section description
-   */
-  description?: string;
-  
-  /**
-   * Whether the section can be collapsed
-   * @default false
-   */
-  collapsible?: boolean;
-  
-  /**
-   * Whether the section is initially collapsed
-   * @default false
-   */
-  collapsed?: boolean;
-  
-  /**
-   * Number of columns for field layout
-   * @default 1
-   */
-  columns?: 1 | 2 | 3 | 4;
-  
-  /**
-   * Section children (form fields)
-   */
-  children: React.ReactNode;
-  
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-
-  /**
-   * Override the default responsive grid classes.
-   * When provided, replaces the viewport-based grid-cols classes
-   * (e.g. with container-query-based classes like `@md:grid-cols-2`).
-   */
-  gridClassName?: string;
-}
-
-/**
- * FormSection Component
- * 
- * Groups form fields with optional header, collapsibility, and multi-column layout.
- * 
- * @example
- * ```tsx
- * <FormSection label="Contact Details" columns={2} collapsible>
- *   <FormField name="firstName" />
- *   <FormField name="lastName" />
- * </FormSection>
- * ```
- */
-export const FormSection: React.FC<FormSectionProps> = ({
-  label,
-  description,
-  collapsible = false,
-  collapsed: initialCollapsed = false,
-  columns = 1,
-  children,
-  className,
-  gridClassName,
-}) => {
-  const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
-
-  const gridCols: Record<number, string> = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 md:grid-cols-2',
-    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
-  };
-
-  const handleToggle = () => {
-    if (collapsible) {
-      setIsCollapsed(!isCollapsed);
-    }
-  };
-
-  return (
-    <div className={cn('form-section', className)}>
-      {/* Section Header */}
-      {(label || description) && (
-        <div
-          className={cn(
-            'flex items-start gap-2 mb-4',
-            collapsible && 'cursor-pointer select-none'
-          )}
-          onClick={handleToggle}
-          role={collapsible ? 'button' : undefined}
-          aria-expanded={collapsible ? !isCollapsed : undefined}
-        >
-          {collapsible && (
-            <span className="mt-0.5 text-muted-foreground">
-              {isCollapsed ? (
-                <ChevronRight className="h-4 w-4" />
-              ) : (
-                <ChevronDown className="h-4 w-4" />
-              )}
-            </span>
-          )}
-          <div className="flex-1">
-            {label && (
-              <h3 className="text-base font-semibold text-foreground">
-                {label}
-              </h3>
-            )}
-            {description && (
-              <p className="text-sm text-muted-foreground mt-0.5">
-                {description}
-              </p>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Section Content */}
-      {!isCollapsed && (
-        <div className={cn('grid gap-4', gridClassName || gridCols[columns])}>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default FormSection;

package/src/FormVariants.test.tsx

@@ -1,219 +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 { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import '@object-ui/components';
-import '@object-ui/fields';
-import { FormSection } from './FormSection';
-import { ObjectForm } from './ObjectForm';
-
-describe('FormSection', () => {
-  it('renders children without label', () => {
-    render(
-      <FormSection>
-        <div data-testid="child">Field content</div>
-      </FormSection>
-    );
-
-    expect(screen.getByTestId('child')).toBeInTheDocument();
-  });
-
-  it('renders with label and description', () => {
-    render(
-      <FormSection label="Contact Info" description="Enter your contact details">
-        <div>Field</div>
-      </FormSection>
-    );
-
-    expect(screen.getByText('Contact Info')).toBeInTheDocument();
-    expect(screen.getByText('Enter your contact details')).toBeInTheDocument();
-  });
-
-  it('supports collapsible behavior', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <FormSection label="Details" collapsible>
-        <div data-testid="content">Collapsible content</div>
-      </FormSection>
-    );
-
-    // Content should be visible initially
-    expect(screen.getByTestId('content')).toBeInTheDocument();
-
-    // Click to collapse
-    await user.click(screen.getByText('Details'));
-    expect(screen.queryByTestId('content')).not.toBeInTheDocument();
-
-    // Click to expand
-    await user.click(screen.getByText('Details'));
-    expect(screen.getByTestId('content')).toBeInTheDocument();
-  });
-
-  it('starts collapsed when collapsed=true', () => {
-    render(
-      <FormSection label="Details" collapsible collapsed>
-        <div data-testid="content">Hidden content</div>
-      </FormSection>
-    );
-
-    expect(screen.queryByTestId('content')).not.toBeInTheDocument();
-  });
-
-  it('applies multi-column grid classes', () => {
-    const { container } = render(
-      <FormSection columns={2}>
-        <div>Field 1</div>
-        <div>Field 2</div>
-      </FormSection>
-    );
-
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeInTheDocument();
-    expect(grid?.className).toContain('md:grid-cols-2');
-  });
-});
-
-describe('ObjectForm with formType', () => {
-  const mockDataSource = {
-    getObjectSchema: vi.fn().mockResolvedValue({
-      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 },
-      }
-    }),
-    findOne: vi.fn().mockResolvedValue({}),
-    find: vi.fn().mockResolvedValue([]),
-    create: vi.fn().mockResolvedValue({ id: '1' }),
-    update: vi.fn().mockResolvedValue({ id: '1' }),
-    delete: vi.fn().mockResolvedValue(true),
-  };
-
-  it('renders simple form by default (no formType)', async () => {
-    render(
-      <ObjectForm
-        schema={{
-          type: 'object-form',
-          objectName: 'contacts',
-          mode: 'create',
-          fields: ['firstName', 'lastName'],
-        }}
-        dataSource={mockDataSource as any}
-      />
-    );
-
-    // Wait for schema fetch
-    await screen.findByText(/first name/i, {}, { timeout: 5000 });
-    expect(screen.getByText(/last name/i)).toBeInTheDocument();
-  });
-
-  it('renders simple form with sections', async () => {
-    render(
-      <ObjectForm
-        schema={{
-          type: 'object-form',
-          objectName: 'contacts',
-          mode: 'create',
-          formType: 'simple',
-          sections: [
-            {
-              label: 'Personal Info',
-              fields: ['firstName', 'lastName'],
-              columns: 2,
-            },
-            {
-              label: 'Contact Details',
-              fields: ['email', 'phone'],
-              columns: 2,
-            },
-          ],
-        }}
-        dataSource={mockDataSource as any}
-      />
-    );
-
-    // Wait for schema fetch and section rendering
-    await screen.findByText('Personal Info', {}, { timeout: 5000 });
-    expect(screen.getByText('Contact Details')).toBeInTheDocument();
-  });
-
-  it('renders tabbed form with sections as tabs', async () => {
-    render(
-      <ObjectForm
-        schema={{
-          type: 'object-form',
-          objectName: 'contacts',
-          mode: 'create',
-          formType: 'tabbed',
-          sections: [
-            {
-              name: 'personal',
-              label: 'Personal',
-              fields: ['firstName', 'lastName'],
-            },
-            {
-              name: 'contact',
-              label: 'Contact',
-              fields: ['email', 'phone'],
-            },
-          ],
-        }}
-        dataSource={mockDataSource as any}
-      />
-    );
-
-    // Wait for tabs to render
-    await screen.findByRole('tab', { name: 'Personal' }, { timeout: 5000 });
-    expect(screen.getByRole('tab', { name: 'Contact' })).toBeInTheDocument();
-  });
-
-  it('renders wizard form with step indicator', async () => {
-    render(
-      <ObjectForm
-        schema={{
-          type: 'object-form',
-          objectName: 'contacts',
-          mode: 'create',
-          formType: 'wizard',
-          sections: [
-            {
-              label: 'Step 1: Basics',
-              fields: ['firstName', 'lastName'],
-            },
-            {
-              label: 'Step 2: Contact',
-              fields: ['email', 'phone'],
-            },
-            {
-              label: 'Step 3: Address',
-              fields: ['street', 'city'],
-            },
-          ],
-        }}
-        dataSource={mockDataSource as any}
-      />
-    );
-
-    // Wait for loading to finish - wizard shows "Step X of Y" counter
-    await screen.findByText(/Step 1 of 3/, {}, { timeout: 5000 });
-    
-    // Should show Next button (not Submit, since we're on step 1)
-    expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
-    
-    // Step labels should be present (appears in both indicator and section header)
-    expect(screen.getAllByText('Step 1: Basics').length).toBeGreaterThanOrEqual(1);
-  });
-});