extended-dynamic-forms 0.2.0 → 0.2.1

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>
-  );
-}