extended-dynamic-forms 0.2.0 → 0.2.1

package/examples/global-ui-rules-example.tsx

@@ -1,371 +0,0 @@
-import React from 'react';
-import { ExtendedForm } from '../src/ExtendedForm';
-import { RJSFSchema, UiSchema, IChangeEvent } from '@rjsf/utils';
-import { useConditionalUi, UiRule, JsonLogicRule } from '../src/conditionals/v2';
-
-/**
- * Global UI Rules Example
- * 
- * This example demonstrates the UI Logic Pillar of the Three Pillars architecture.
- * It shows how to:
- * 1. Show/hide form sections based on conditions
- * 2. Dynamically change widget types
- * 3. Modify field ordering based on user input
- * 4. Handle data clearing in the onChange handler (separation of concerns)
- */
-
-// Type definition for our form data
-type ShippingFormData = {
-  name: string;
-  email: string;
-  requiresShipping: boolean;
-  shippingAddress?: {
-    street?: string;
-    city?: string;
-    zipCode?: string;
-    country?: 'USA' | 'Canada' | 'Mexico' | 'Other';
-    state?: string;
-    province?: string;
-    region?: string;
-    internationalDetails?: string;
-  };
-  deliveryInstructions?: string;
-  expressShipping?: boolean;
-};
-
-// Schema definition for a comprehensive shipping form
-const schema: RJSFSchema = {
-  type: 'object',
-  required: ['name', 'email'],
-  properties: {
-    name: { 
-      type: 'string', 
-      title: 'Full Name' 
-    },
-    email: { 
-      type: 'string', 
-      format: 'email', 
-      title: 'Email Address' 
-    },
-    requiresShipping: {
-      type: 'boolean',
-      title: 'Requires Physical Shipping?',
-      default: false
-    },
-    shippingAddress: {
-      type: 'object',
-      title: 'Shipping Address',
-      required: ['street', 'city', 'zipCode', 'country'],
-      properties: {
-        street: { 
-          type: 'string', 
-          title: 'Street Address' 
-        },
-        city: { 
-          type: 'string', 
-          title: 'City' 
-        },
-        zipCode: { 
-          type: 'string', 
-          title: 'ZIP/Postal Code' 
-        },
-        country: {
-          type: 'string',
-          title: 'Country',
-          enum: ['USA', 'Canada', 'Mexico', 'Other'],
-          default: 'USA'
-        },
-        // Different fields for different countries
-        state: {
-          type: 'string',
-          title: 'State',
-          enum: ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 
-                 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD',
-                 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
-                 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC',
-                 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY']
-        },
-        province: {
-          type: 'string',
-          title: 'Province',
-          enum: ['AB', 'BC', 'MB', 'NB', 'NL', 'NS', 'NT', 'NU', 'ON', 'PE', 'QC', 'SK', 'YT']
-        },
-        region: {
-          type: 'string',
-          title: 'State/Province/Region'
-        },
-        internationalDetails: {
-          type: 'string',
-          title: 'International Shipping Details',
-          description: 'Please provide any special international shipping requirements'
-        }
-      }
-    },
-    deliveryInstructions: {
-      type: 'string',
-      title: 'Delivery Instructions',
-      description: 'Special instructions for the delivery person'
-    },
-    expressShipping: {
-      type: 'boolean',
-      title: 'Express Shipping (2-3 days)',
-      default: false
-    }
-  }
-};
-
-// Base UI Schema - defines the default UI configuration
-const baseUiSchema: UiSchema = {
-  'ui:order': ['name', 'email', 'requiresShipping', 'shippingAddress', 'expressShipping', 'deliveryInstructions'],
-  name: { 
-    'ui:autofocus': true,
-    'ui:placeholder': 'Enter your full name'
-  },
-  email: { 
-    'ui:placeholder': 'email@example.com',
-    'ui:help': 'We\'ll use this for order confirmation'
-  },
-  shippingAddress: {
-    // Initially hidden until shipping is required
-    'ui:widget': 'hidden',
-    'ui:order': ['street', 'city', 'country', 'state', 'province', 'region', 'zipCode'],
-    street: { 
-      'ui:placeholder': '123 Main St' 
-    },
-    city: {
-      'ui:placeholder': 'New York'
-    },
-    zipCode: {
-      'ui:placeholder': '10001'
-    },
-    state: {
-      'ui:widget': 'select',
-      'ui:placeholder': 'Select a state'
-    },
-    province: {
-      'ui:placeholder': 'Select a province',
-      // Initially hidden
-      'ui:widget': 'hidden'
-    },
-    region: {
-      'ui:placeholder': 'Enter state/province/region',
-      // Initially hidden
-      'ui:widget': 'hidden'
-    },
-    internationalDetails: {
-      'ui:widget': 'hidden',  // Hidden by default
-      'ui:options': { 
-        rows: 3 
-      }
-    }
-  },
-  deliveryInstructions: {
-    'ui:widget': 'hidden',
-    'ui:options': { 
-      rows: 3 
-    }
-  },
-  expressShipping: {
-    'ui:widget': 'hidden'
-  }
-};
-
-// Global UI Rules using JSON Patch operations
-const globalUiRules: UiRule[] = [
-  // Rule 1: Show shipping address when shipping is required
-  {
-    name: 'Show shipping address when shipping required',
-    condition: { "===": [{ "var": "requiresShipping" }, true] } as JsonLogicRule,
-    effect: [
-      { op: 'remove', path: '/shippingAddress/ui:widget' }
-    ],
-    order: 1
-  },
-  
-  // Rule 2: Show delivery instructions when shipping is required
-  {
-    name: 'Show delivery instructions when shipping required',
-    condition: { "===": [{ "var": "requiresShipping" }, true] } as JsonLogicRule,
-    effect: [
-      { op: 'replace', path: '/deliveryInstructions/ui:widget', value: 'textarea' }
-    ],
-    order: 2
-  },
-  
-  // Rule 3: Show express shipping option when shipping is required
-  {
-    name: 'Show express shipping option when shipping required',
-    condition: { "===": [{ "var": "requiresShipping" }, true] } as JsonLogicRule,
-    effect: [
-      { op: 'remove', path: '/expressShipping/ui:widget' }
-    ],
-    order: 3
-  },
-  
-  // Rule 4: Show state dropdown only for USA
-  {
-    name: 'Show state field for USA',
-    condition: { 
-      "and": [
-        { "===": [{ "var": "requiresShipping" }, true] },
-        { "===": [{ "var": "shippingAddress.country" }, "USA"] }
-      ]
-    } as JsonLogicRule,
-    effect: [
-      { op: 'remove', path: '/shippingAddress/state/ui:widget' },
-      { op: 'add', path: '/shippingAddress/province/ui:widget', value: 'hidden' },
-      { op: 'add', path: '/shippingAddress/region/ui:widget', value: 'hidden' }
-    ],
-    order: 4
-  },
-  
-  // Rule 5: Show province dropdown only for Canada
-  {
-    name: 'Show province field for Canada',
-    condition: { 
-      "and": [
-        { "===": [{ "var": "requiresShipping" }, true] },
-        { "===": [{ "var": "shippingAddress.country" }, "Canada"] }
-      ]
-    } as JsonLogicRule,
-    effect: [
-      { op: 'add', path: '/shippingAddress/state/ui:widget', value: 'hidden' },
-      { op: 'remove', path: '/shippingAddress/province/ui:widget' },
-      { op: 'add', path: '/shippingAddress/region/ui:widget', value: 'hidden' }
-    ],
-    order: 5
-  },
-  
-  // Rule 6: Show region text field for Mexico and Other
-  {
-    name: 'Show region field for Mexico and Other countries',
-    condition: { 
-      "and": [
-        { "===": [{ "var": "requiresShipping" }, true] },
-        { "in": [{ "var": "shippingAddress.country" }, ["Mexico", "Other"]] }
-      ]
-    } as JsonLogicRule,
-    effect: [
-      { op: 'add', path: '/shippingAddress/state/ui:widget', value: 'hidden' },
-      { op: 'add', path: '/shippingAddress/province/ui:widget', value: 'hidden' },
-      { op: 'remove', path: '/shippingAddress/region/ui:widget' }
-    ],
-    order: 6
-  },
-  
-  // Rule 7: Show international details only for "Other" countries
-  {
-    name: 'Show international details for non-North American countries',
-    condition: { 
-      "and": [
-        { "===": [{ "var": "requiresShipping" }, true] },
-        { "===": [{ "var": "shippingAddress.country" }, "Other"] }
-      ]
-    } as JsonLogicRule,
-    effect: [
-      { op: 'replace', path: '/shippingAddress/internationalDetails/ui:widget', value: 'textarea' }
-    ],
-    order: 7
-  },
-  
-  // Rule 8: Reorder fields to put international details at end when visible
-  {
-    name: 'Reorder fields for international shipping',
-    condition: { 
-      "and": [
-        { "===": [{ "var": "requiresShipping" }, true] },
-        { "===": [{ "var": "shippingAddress.country" }, "Other"] }
-      ]
-    } as JsonLogicRule,
-    effect: [
-      { 
-        op: 'replace', 
-        path: '/shippingAddress/ui:order', 
-        value: ['street', 'city', 'country', 'region', 'zipCode', 'internationalDetails'] 
-      }
-    ],
-    order: 8
-  }
-];
-
-export function GlobalUiRulesExample() {
-  const [formData, setFormData] = React.useState<ShippingFormData>({
-    name: '',
-    email: '',
-    requiresShipping: false,
-    shippingAddress: {
-      country: 'USA'
-    }
-  });
-  
-  // Apply UI rules to base UI schema
-  // This is a pure function that only modifies the UI schema
-  const conditionalUiSchema = useConditionalUi(globalUiRules, baseUiSchema, formData);
-  
-  // Handle form changes with data side effects
-  // This demonstrates the separation of concerns between UI and data logic
-  const handleChange = ({ formData: newFormData }: IChangeEvent<ShippingFormData>) => {
-    let dataToSet = { ...newFormData };
-    
-    // DATA SIDE EFFECT: Clear shipping address when shipping is disabled
-    if (formData.requiresShipping && !newFormData.requiresShipping) {
-      dataToSet.shippingAddress = {
-        country: 'USA' // Reset to default country
-      };
-      dataToSet.deliveryInstructions = '';
-      dataToSet.expressShipping = false;
-    }
-    
-    // DATA SIDE EFFECT: Clear state/province/region when country changes
-    const oldCountry = formData.shippingAddress?.country;
-    const newCountry = newFormData.shippingAddress?.country;
-    
-    if (oldCountry !== newCountry && newFormData.shippingAddress) {
-      // Clear location fields when switching countries
-      delete dataToSet.shippingAddress.state;
-      delete dataToSet.shippingAddress.province;
-      delete dataToSet.shippingAddress.region;
-      delete dataToSet.shippingAddress.internationalDetails;
-    }
-    
-    setFormData(dataToSet);
-  };
-  
-  const handleSubmit = ({ formData }: IChangeEvent<ShippingFormData>) => {
-    console.log('Form submitted:', formData);
-    alert('Form submitted! Check console for details.');
-  };
-  
-  return (
-    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
-      <h1>Global UI Rules Example</h1>
-      <p>
-        This example demonstrates the UI Logic Pillar of the Three Pillars conditional system.
-        Try toggling "Requires Physical Shipping" and changing countries to see dynamic UI updates.
-      </p>
-      
-      <div style={{ marginBottom: '20px', padding: '10px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
-        <h3>Features Demonstrated:</h3>
-        <ul>
-          <li>Show/hide form sections based on shipping requirement</li>
-          <li>Dynamic widget changes (state dropdown vs province dropdown vs region text field)</li>
-          <li>Conditional field ordering (international details appears at end)</li>
-          <li>Data clearing when sections are hidden (handled in onChange)</li>
-        </ul>
-      </div>
-      
-      <ExtendedForm
-        schema={schema}
-        uiSchema={conditionalUiSchema}
-        formData={formData}
-        onChange={handleChange}
-        onSubmit={handleSubmit}
-      />
-      
-      <div style={{ marginTop: '20px', padding: '10px', backgroundColor: '#f9f9f9', borderRadius: '4px' }}>
-        <h4>Current Form Data:</h4>
-        <pre>{JSON.stringify(formData, null, 2)}</pre>
-      </div>
-    </div>
-  );
-}

package/examples/vanilla-js/README.md

@@ -1,212 +0,0 @@
-# Vanilla JS Usage Guide
-
-This directory contains examples of how to use Extended Dynamic Forms as a vanilla JavaScript library without React knowledge.
-
-## Quick Start
-
-1. **Include the standalone bundle:**
-```html
-<script src="path/to/extended-dynamic-forms.standalone.js"></script>
-```
-
-2. **Create a basic form:**
-```javascript
-const form = ExtendedDynamicForms.createForm({
-  container: '#my-form',
-  schema: {
-    type: 'object',
-    properties: {
-      name: { type: 'string', title: 'Name' },
-      email: { type: 'string', format: 'email', title: 'Email' }
-    }
-  },
-  onChange: (formData) => console.log(formData),
-  onSubmit: (formData) => alert('Submitted: ' + JSON.stringify(formData))
-});
-```
-
-## Examples
-
-- **`basic-form.html`** - Simple contact form with validation
-- **`conditional-form.html`** - Form with conditional field visibility
-- **`wizard-form.html`** - Multi-step wizard form
-
-## API Reference
-
-### ExtendedDynamicForms.createForm(config)
-
-Creates a standard form.
-
-**Config Options:**
-- `container` (string|HTMLElement) - Container selector or element
-- `schema` (object) - JSON Schema defining form structure
-- `uiSchema` (object) - UI customizations and widget selections
-- `formData` (object) - Initial form data
-- `onChange` (function) - Called when form data changes
-- `onSubmit` (function) - Called when form is submitted
-- `onError` (function) - Called when validation errors occur
-- `conditionals` (object) - Conditional logic rules
-- `webhooks` (array) - Webhook configurations
-- `widgets` (object) - Custom widget overrides
-- `fields` (object) - Custom field components
-
-**Returns:**
-- `setFormData(data)` - Update form data
-- `destroy()` - Remove form from DOM
-
-### ExtendedDynamicForms.createWizardForm(config)
-
-Creates a multi-step wizard form.
-
-**Config Options:**
-- `container` (string|HTMLElement) - Container selector or element
-- `steps` (array) - Array of step definitions
-- `initialData` (object) - Initial form data
-- `onStepChange` (function) - Called when step changes
-- `onComplete` (function) - Called when wizard completes
-- `conditionals` (object) - Conditional logic rules
-
-### Schema Definition
-
-JSON Schema format with additional UI enhancements:
-
-```javascript
-const schema = {
-  type: 'object',
-  properties: {
-    fieldName: {
-      type: 'string',        // string, number, boolean, array, object
-      title: 'Display Name',
-      description: 'Help text',
-      minLength: 2,          // Validation rules
-      pattern: '^[A-Za-z]+$'
-    }
-  },
-  required: ['fieldName']
-};
-```
-
-### UI Schema
-
-Customize field appearance and behavior:
-
-```javascript
-const uiSchema = {
-  fieldName: {
-    'ui:widget': 'textarea',     // Widget type
-    'ui:placeholder': 'Enter text...',
-    'ui:autofocus': true,
-    'ui:options': {
-      rows: 4
-    }
-  }
-};
-```
-
-### Available Widgets
-
-- `text` - Single line text input
-- `textarea` - Multi-line text area
-- `email` - Email input with validation
-- `password` - Password input (masked)
-- `number` - Numeric input
-- `select` - Dropdown selection
-- `radio` - Radio button group
-- `checkbox` - Single checkbox
-- `checkboxes` - Multiple checkboxes
-- `date` - Date picker
-- `datetime` - Date and time picker
-- `file` - File upload
-- `hidden` - Hidden field
-
-### Conditional Logic
-
-Control field visibility and behavior based on form data:
-
-```javascript
-const conditionals = {
-  rules: [
-    {
-      conditions: { userType: 'business' },
-      event: { 
-        type: 'require', 
-        params: { field: ['businessName', 'taxId'] } 
-      }
-    },
-    {
-      conditions: { age: { less: 18 } },
-      event: { 
-        type: 'remove', 
-        params: { field: 'driversLicense' } 
-      }
-    }
-  ]
-};
-```
-
-### Webhook Integration
-
-Send form events to external APIs:
-
-```javascript
-const webhooks = [{
-  url: 'https://api.example.com/form-events',
-  method: 'POST',
-  events: ['change', 'submit'],
-  debounceMs: 500,
-  retries: 3,
-  headers: {
-    'Authorization': 'Bearer your-token'
-  }
-}];
-```
-
-## Building Standalone Version
-
-To build the standalone version for vanilla JS:
-
-```bash
-npm run build:vanilla
-```
-
-This creates `dist/extended-dynamic-forms.standalone.js` with all dependencies bundled.
-
-## Browser Compatibility
-
-- Modern browsers (Chrome 80+, Firefox 75+, Safari 13+, Edge 80+)
-- ES2018+ features required
-- CSS Grid and Flexbox support needed for layouts
-
-## Bundle Size
-
-The standalone bundle is approximately 2-3MB (uncompressed) and includes:
-- React and ReactDOM
-- Ant Design components
-- RJSF core libraries
-- All form components and widgets
-
-Consider using gzip compression on your server to reduce transfer size.
-
-## Troubleshooting
-
-**Forms not rendering:**
-- Check browser console for errors
-- Ensure container element exists in DOM
-- Verify script is loaded after DOM ready
-
-**Styling issues:**
-- Include Ant Design CSS
-- Check for CSS conflicts with existing styles
-- Ensure proper viewport meta tag
-
-**Validation not working:**
-- Verify schema format is valid JSON Schema
-- Check required field definitions
-- Review conditional logic syntax
-
-## Support
-
-For issues and questions:
-- Check the main repository documentation
-- Review example HTML files
-- Open issues on GitHub repository