extended-dynamic-forms/examples/vanilla-js/README.md

Extended React JSON Schema Form (RJSF) v6 with custom components, widgets, templates, layouts, and form events

# 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