extended-dynamic-forms 0.1.15 → 0.1.18

package/examples/form-devtools-example.tsx

@@ -0,0 +1,386 @@
+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,
+} 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: formData => !formData.requiresShipping,
+    effect: [
+      { op: 'add', path: '/shippingAddress/ui:widget', value: 'hidden' },
+    ],
+  },
+  {
+    name: 'Show state dropdown for US/Canada',
+    condition: formData =>
+      formData.country === 'USA' || formData.country === 'Canada',
+    effect: [
+      {
+        op: 'add',
+        path: '/shippingAddress/state/ui:widget',
+        value: 'select',
+      },
+    ],
+  },
+];
+
+// Schema Rules
+const schemaRules: Rule<SchemaEffect>[] = [
+  {
+    name: 'Add spouse fields when married',
+    condition: formData => formData.maritalStatus === 'married',
+    effect: [{ op: 'add', path: '/required/-', value: 'spouseName' }],
+  },
+  {
+    name: 'Remove spouse field when not married',
+    condition: formData => formData.maritalStatus !== 'married',
+    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: formData =>
+        formData.country === 'USA' && formData.requiresShipping,
+      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: formData =>
+        formData.country === 'Canada' && formData.requiresShipping,
+      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>
+  );
+}