extended-dynamic-forms 0.2.0 → 0.3.0

package/examples/dynamic-array-items-example.tsx

@@ -1,211 +0,0 @@
-import React from 'react';
-import { ExtendedForm } from '../src/ExtendedForm';
-import { RJSFSchema, UiSchema } from '@rjsf/utils';
-import { 
-  createDynamicArrayItemsUiSchema, 
-  arrayItemPatterns 
-} from '../src/conditionals/v2/utils/dynamicArrayItems';
-
-const schema: RJSFSchema = {
-  type: 'object',
-  properties: {
-    directors: {
-      type: 'array',
-      title: 'Company Directors',
-      items: {
-        type: 'object',
-        required: ['name', 'directorType'],
-        properties: {
-          name: { type: 'string', title: 'Name' },
-          directorType: {
-            type: 'string',
-            title: 'Director Type',
-            enum: ['executive', 'non-executive'],
-            enumNames: ['Executive', 'Non-Executive']
-          },
-          executiveRole: {
-            type: 'string',
-            title: 'Executive Role',
-            enum: ['CEO', 'CFO', 'CTO', 'COO', 'Other'],
-            enumNames: ['CEO', 'CFO', 'CTO', 'COO', 'Other']
-          },
-          otherRoleDetails: {
-            type: 'string',
-            title: 'Other Role Details'
-          },
-          hasShareholding: { type: 'boolean', title: 'Has Shareholding?' },
-          shareholdingPercentage: { 
-            type: 'number', 
-            title: 'Shareholding %',
-            minimum: 0,
-            maximum: 100
-          }
-        }
-      }
-    }
-  }
-};
-
-// Base UI schema for all array items
-const baseItemUiSchema: UiSchema = {
-  'ui:order': ['name', 'directorType', 'executiveRole', 'otherRoleDetails', 'hasShareholding', 'shareholdingPercentage'],
-  name: {
-    'ui:widget': 'text',
-    'ui:placeholder': 'Enter director name'
-  },
-  directorType: {
-    'ui:widget': 'select'
-  },
-  executiveRole: {
-    'ui:widget': 'select'
-  },
-  otherRoleDetails: {
-    'ui:widget': 'text',
-    'ui:placeholder': 'Specify other role'
-  },
-  hasShareholding: {
-    'ui:widget': 'checkbox'
-  },
-  shareholdingPercentage: {
-    'ui:widget': 'updown'
-  }
-};
-
-// Create dynamic UI schema using the utility
-const uiSchema: UiSchema = {
-  directors: {
-    items: createDynamicArrayItemsUiSchema(
-      baseItemUiSchema,
-      (itemData, index) => {
-        const conditionalUi: Partial<UiSchema> = {};
-        
-        // Three-level conditional dependency chain
-        // Level 1: Director type determines if executive role is shown
-        if (itemData?.directorType !== 'executive') {
-          conditionalUi.executiveRole = { 'ui:widget': 'hidden' };
-          // Also hide dependent field since parent is hidden
-          conditionalUi.otherRoleDetails = { 'ui:widget': 'hidden' };
-        } else {
-          // Level 2: Executive role determines if other role details is shown
-          if (itemData?.executiveRole !== 'Other') {
-            conditionalUi.otherRoleDetails = { 'ui:widget': 'hidden' };
-          }
-        }
-        
-        // Hide shareholding percentage if not a shareholder
-        if (!itemData?.hasShareholding) {
-          conditionalUi.shareholdingPercentage = { 'ui:widget': 'hidden' };
-        }
-        
-        // Add special styling for first director
-        if (index === 0) {
-          conditionalUi['ui:classNames'] = 'primary-director';
-          conditionalUi['ui:title'] = 'Primary Director';
-        }
-        
-        return conditionalUi;
-      }
-    )
-  }
-};
-
-export function DynamicArrayItemsExample() {
-  const [formData, setFormData] = React.useState({
-    directors: [
-      { 
-        name: 'John Doe', 
-        directorType: 'executive', 
-        executiveRole: 'CEO', 
-        hasShareholding: true, 
-        shareholdingPercentage: 51 
-      },
-      { 
-        name: 'Jane Smith', 
-        directorType: 'executive', 
-        executiveRole: 'Other', 
-        otherRoleDetails: 'Head of Innovation',
-        hasShareholding: true,
-        shareholdingPercentage: 30
-      },
-      { 
-        name: 'Bob Johnson', 
-        directorType: 'non-executive',
-        hasShareholding: false
-      }
-    ]
-  });
-
-  return (
-    <div>
-      <h1>Dynamic Array Items Example</h1>
-      <p>
-        This example demonstrates O(n) performance for array conditionals using 
-        the RJSF fork's dynamic uiSchema.items capability. It showcases:
-      </p>
-      <ul>
-        <li>Three-level conditional dependencies (Director Type → Executive Role → Other Role Details)</li>
-        <li>Enum-based conditions for more realistic form patterns</li>
-        <li>The common "Other" option pattern with additional text field</li>
-        <li>Multiple independent conditionals within each array item</li>
-      </ul>
-      
-      <ExtendedForm
-        schema={schema}
-        uiSchema={uiSchema}
-        formData={formData}
-        onChange={({ formData }) => setFormData(formData)}
-      />
-      
-      <div style={{ marginTop: '20px' }}>
-        <h3>Performance Benefits:</h3>
-        <ul>
-          <li>Each array item's UI is calculated independently</li>
-          <li>No wildcard pattern expansion needed</li>
-          <li>O(n) complexity instead of O(n²)</li>
-          <li>Scales efficiently with large arrays</li>
-        </ul>
-      </div>
-    </div>
-  );
-}
-
-// Alternative example using helper patterns
-export function DynamicArrayPatternsExample() {
-  const uiSchemaWithPatterns: UiSchema = {
-    directors: {
-      items: createDynamicArrayItemsUiSchema(
-        baseItemUiSchema,
-        (itemData, index) => {
-          // Combine multiple pattern helpers for cleaner code
-          const hideShareholding = arrayItemPatterns.hideField(
-            'shareholdingPercentage',
-            (data) => !data?.hasShareholding
-          )(itemData, index);
-          
-          const hideExecutiveRole = arrayItemPatterns.hideField(
-            'executiveRole',
-            (data) => data?.directorType !== 'executive'
-          )(itemData, index);
-          
-          const hideOtherRoleDetails = arrayItemPatterns.hideField(
-            'otherRoleDetails',
-            (data) => data?.directorType !== 'executive' || data?.executiveRole !== 'Other'
-          )(itemData, index);
-          
-          return {
-            ...hideShareholding,
-            ...hideExecutiveRole,
-            ...hideOtherRoleDetails
-          };
-        }
-      )
-    }
-  };
-  
-  return (
-    <ExtendedForm
-      schema={schema}
-      uiSchema={uiSchemaWithPatterns}
-    />
-  );
-}

package/examples/form-devtools-example.tsx

@@ -1,384 +0,0 @@
-import React, { useState } from 'react';
-import Form from '@rjsf/antd';
-import { IChangeEvent } from '@rjsf/core';
-import { RJSFSchema, UiSchema } from '@rjsf/utils';
-import validator from '@rjsf/validator-ajv8';
-import {
-  Card,
-  Collapse,
-  Badge,
-  Tag,
-  Space,
-  Switch,
-  Typography,
-  Alert,
-} from 'antd';
-import {
-  Rule,
-  UiEffect,
-  SchemaEffect,
-  ValidationEffect,
-  JsonLogicRule,
-} from '../src/conditionals/v2/types';
-import {
-  useConditionalUi,
-  useConditionalSchema,
-  useConditionalValidation,
-} from '../src/conditionals/v2';
-import { useFormDevTools } from '../src/hooks/useFormDevTools';
-
-const { Panel } = Collapse;
-const { Text } = Typography;
-
-// Base schema
-const baseSchema: RJSFSchema = {
-  type: 'object',
-  title: 'Form with DevTools Example',
-  properties: {
-    country: {
-      type: 'string',
-      title: 'Country',
-      enum: ['USA', 'Canada', 'UK', 'Other'],
-    },
-    requiresShipping: {
-      type: 'boolean',
-      title: 'Requires Shipping?',
-    },
-    shippingAddress: {
-      type: 'object',
-      title: 'Shipping Address',
-      properties: {
-        street: { type: 'string', title: 'Street' },
-        city: { type: 'string', title: 'City' },
-        state: { type: 'string', title: 'State' },
-        zip: { type: 'string', title: 'ZIP Code' },
-      },
-    },
-    maritalStatus: {
-      type: 'string',
-      title: 'Marital Status',
-      enum: ['single', 'married', 'divorced', 'widowed'],
-    },
-    spouseName: {
-      type: 'string',
-      title: 'Spouse Name',
-    },
-  },
-};
-
-// Base UI schema
-const baseUiSchema: UiSchema = {
-  'ui:order': [
-    'country',
-    'requiresShipping',
-    'shippingAddress',
-    'maritalStatus',
-    'spouseName',
-  ],
-};
-
-// UI Rules
-const uiRules: Rule<UiEffect>[] = [
-  {
-    name: 'Hide shipping address when not required',
-    condition: { "!": { "var": "requiresShipping" } } as JsonLogicRule,
-    effect: [
-      { op: 'add', path: '/shippingAddress/ui:widget', value: 'hidden' },
-    ],
-  },
-  {
-    name: 'Show state dropdown for US/Canada',
-    condition: { "or": [{ "==": [{ "var": "country" }, "USA"] }, { "==": [{ "var": "country" }, "Canada"] }] } as JsonLogicRule,
-    effect: [
-      {
-        op: 'add',
-        path: '/shippingAddress/state/ui:widget',
-        value: 'select',
-      },
-    ],
-  },
-];
-
-// Schema Rules
-const schemaRules: Rule<SchemaEffect>[] = [
-  {
-    name: 'Add spouse fields when married',
-    condition: { "===": [{ "var": "maritalStatus" }, "married"] } as JsonLogicRule,
-    effect: [{ op: 'add', path: '/required/-', value: 'spouseName' }],
-  },
-  {
-    name: 'Remove spouse field when not married',
-    condition: { "!==": [{ "var": "maritalStatus" }, "married"] } as JsonLogicRule,
-    effect: [{ op: 'remove', path: '/properties/spouseName' }],
-  },
-];
-
-// Validation Rules
-const validationRules: Rule<ValidationEffect>[] = [
-  {
-    name: 'US ZIP code format validation',
-    effect: {
-      name: 'US ZIP code format',
-      isActive: { "and": [{ "==": [{ "var": "country" }, "USA"] }, { "var": "requiresShipping" }] } as JsonLogicRule,
-      validate: (errors, formData) => {
-        if (
-          formData.shippingAddress?.zip &&
-          !/^\d{5}(-\d{4})?$/.test(formData.shippingAddress.zip)
-        ) {
-          if (!errors.shippingAddress) errors.shippingAddress = {};
-          if (!errors.shippingAddress.zip) errors.shippingAddress.zip = {};
-          errors.shippingAddress.zip.__errors = [
-            'ZIP code must be XXXXX or XXXXX-XXXX format',
-          ];
-        }
-      },
-    },
-  },
-  {
-    name: 'Canadian postal code validation',
-    effect: {
-      name: 'Canadian postal code',
-      isActive: { "and": [{ "==": [{ "var": "country" }, "Canada"] }, { "var": "requiresShipping" }] } as JsonLogicRule,
-      validate: (errors, formData) => {
-        if (
-          formData.shippingAddress?.zip &&
-          !/^[A-Z]\d[A-Z] \d[A-Z]\d$/.test(formData.shippingAddress.zip)
-        ) {
-          if (!errors.shippingAddress) errors.shippingAddress = {};
-          if (!errors.shippingAddress.zip) errors.shippingAddress.zip = {};
-          errors.shippingAddress.zip.__errors = [
-            'Postal code must be A1A 1A1 format',
-          ];
-        }
-      },
-    },
-  },
-];
-
-// DevTools Panel Component
-const DevToolsPanel: React.FC<{
-  devTools: ReturnType<typeof useFormDevTools>;
-}> = ({ devTools }) => {
-  const { evaluations, activeRules, hasErrors, errors, summary } = devTools;
-
-  return (
-    <Card title='Form DevTools' style={{ marginTop: 24 }}>
-      <Space direction='vertical' style={{ width: '100%' }}>
-        {/* Summary */}
-        <Alert
-          message={
-            <Space>
-              <Text>Total Rules: {summary.totalRules}</Text>
-              <Badge
-                count={summary.activeCount}
-                style={{ backgroundColor: '#52c41a' }}
-              />
-              <Text>Active</Text>
-              {hasErrors && (
-                <>
-                  <Badge count={summary.errorCount} />
-                  <Text>Errors</Text>
-                </>
-              )}
-            </Space>
-          }
-          type={hasErrors ? 'warning' : 'info'}
-        />
-
-        {/* Errors */}
-        {hasErrors && (
-          <Alert
-            message='Rule Evaluation Errors'
-            description={
-              <ul>
-                {errors.map((error, idx) => (
-                  <li key={idx}>
-                    <Text type='danger'>
-                      {error.pillar} Rule "{error.ruleName}": {error.error}
-                    </Text>
-                  </li>
-                ))}
-              </ul>
-            }
-            type='error'
-          />
-        )}
-
-        {/* Rule Details */}
-        <Collapse defaultActiveKey={['ui']}>
-          <Panel
-            header={`UI Rules (${activeRules.ui.length} active)`}
-            key='ui'
-            extra={
-              <Badge
-                count={activeRules.ui.length}
-                style={{ backgroundColor: '#52c41a' }}
-              />
-            }
-          >
-            {evaluations
-              .filter(e => e.pillar === 'UI')
-              .map((evaluation, idx) => (
-                <div key={idx} style={{ marginBottom: 8 }}>
-                  <Tag color={evaluation.active ? 'green' : 'default'}>
-                    {evaluation.active ? '✓' : '○'}
-                  </Tag>
-                  <Text>{evaluation.ruleName}</Text>
-                  {evaluation.error && (
-                    <Text type='danger'> (Error: {evaluation.error})</Text>
-                  )}
-                </div>
-              ))}
-          </Panel>
-
-          <Panel
-            header={`Schema Rules (${activeRules.schema.length} active)`}
-            key='schema'
-            extra={
-              <Badge
-                count={activeRules.schema.length}
-                style={{ backgroundColor: '#52c41a' }}
-              />
-            }
-          >
-            {evaluations
-              .filter(e => e.pillar === 'Schema')
-              .map((evaluation, idx) => (
-                <div key={idx} style={{ marginBottom: 8 }}>
-                  <Tag color={evaluation.active ? 'green' : 'default'}>
-                    {evaluation.active ? '✓' : '○'}
-                  </Tag>
-                  <Text>{evaluation.ruleName}</Text>
-                  {evaluation.error && (
-                    <Text type='danger'> (Error: {evaluation.error})</Text>
-                  )}
-                </div>
-              ))}
-          </Panel>
-
-          <Panel
-            header={`Validation Rules (${activeRules.validation.length} active)`}
-            key='validation'
-            extra={
-              <Badge
-                count={activeRules.validation.length}
-                style={{ backgroundColor: '#52c41a' }}
-              />
-            }
-          >
-            {evaluations
-              .filter(e => e.pillar === 'Validation')
-              .map((evaluation, idx) => (
-                <div key={idx} style={{ marginBottom: 8 }}>
-                  <Tag color={evaluation.active ? 'green' : 'default'}>
-                    {evaluation.active ? '✓' : '○'}
-                  </Tag>
-                  <Text>{evaluation.ruleName}</Text>
-                  {evaluation.error && (
-                    <Text type='danger'> (Error: {evaluation.error})</Text>
-                  )}
-                </div>
-              ))}
-          </Panel>
-        </Collapse>
-      </Space>
-    </Card>
-  );
-};
-
-export default function FormDevToolsExample() {
-  const [formData, setFormData] = useState({});
-  const [devToolsEnabled, setDevToolsEnabled] = useState(true);
-  const [logToConsole, setLogToConsole] = useState(false);
-  const [captureHistory, setCaptureHistory] = useState(false);
-
-  // Apply conditional logic
-  const conditionalUiSchema = useConditionalUi(uiRules, baseUiSchema, formData);
-  const conditionalSchema = useConditionalSchema(
-    schemaRules,
-    baseSchema,
-    formData
-  );
-  const customValidate = useConditionalValidation(validationRules, formData);
-
-  // Use DevTools
-  const devTools = useFormDevTools(
-    formData,
-    uiRules,
-    schemaRules,
-    validationRules,
-    {
-      enabled: devToolsEnabled,
-      logToConsole,
-      captureHistory,
-      historySize: 10,
-    }
-  );
-
-  const handleChange = (e: IChangeEvent) => {
-    setFormData(e.formData);
-  };
-
-  return (
-    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
-      <Card title='DevTools Settings' style={{ marginBottom: 24 }}>
-        <Space>
-          <label>
-            <Switch checked={devToolsEnabled} onChange={setDevToolsEnabled} />
-            <Text style={{ marginLeft: 8 }}>Enable DevTools</Text>
-          </label>
-          <label>
-            <Switch checked={logToConsole} onChange={setLogToConsole} />
-            <Text style={{ marginLeft: 8 }}>Log to Console</Text>
-          </label>
-          <label>
-            <Switch checked={captureHistory} onChange={setCaptureHistory} />
-            <Text style={{ marginLeft: 8 }}>Capture History</Text>
-          </label>
-        </Space>
-      </Card>
-
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
-        <div>
-          <Form
-            schema={conditionalSchema}
-            uiSchema={conditionalUiSchema}
-            formData={formData}
-            onChange={handleChange}
-            validator={validator}
-            customValidate={customValidate}
-          />
-        </div>
-
-        <div>
-          {devToolsEnabled && <DevToolsPanel devTools={devTools} />}
-
-          {captureHistory && devTools.history.length > 0 && (
-            <Card title='History' style={{ marginTop: 24 }}>
-              <Text>History entries: {devTools.history.length}</Text>
-              <div style={{ maxHeight: 200, overflow: 'auto', marginTop: 8 }}>
-                {devTools.history.map((entry, idx) => (
-                  <div
-                    key={idx}
-                    style={{
-                      marginBottom: 8,
-                      padding: 8,
-                      background: '#f0f0f0',
-                    }}
-                  >
-                    <Text type='secondary'>
-                      {new Date(entry.timestamp).toLocaleTimeString()}
-                    </Text>
-                    <pre style={{ fontSize: 12, margin: 0 }}>
-                      {JSON.stringify(entry.formData, null, 2)}
-                    </pre>
-                  </div>
-                ))}
-              </div>
-            </Card>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}