extended-dynamic-forms 0.1.20 → 0.1.21

package/README.md

@@ -66,13 +66,14 @@ const uiRules: UiRule[] = [{
 
 ### 🧙‍♂️ Multi-Step Wizard Forms 
 - Automatic step detection from schema structure
-- Step-aware conditional logic
+- **Full conditional logic support** with step-aware rule processing
 - Built-in progress indicators and navigation
 - Per-step validation
+- Supports both v1 conditions (deprecated) and v2 Three Pillars architecture
 
 **Step-Aware Conditional Logic**
 
-The `WizardForm` automatically scopes conditional logic to the current step. Use v2 `UiRule`s with field prefixes:
+The `WizardForm` automatically filters and transforms conditional rules to work within the current step's context. This means you can define conditions that reference fields across different steps, and the wizard will intelligently apply only the relevant rules for the active step:
 
 ```tsx
 // Define steps with prefixed field names to avoid collisions
@@ -161,6 +162,28 @@ const uiRules: UiRule[] = [{
 </html>
 ```
 
+**Important Notes on Conditional Logic in Vanilla JS:**
+- **Only v1 conditions are supported** - The Three Pillars v2 architecture requires React hooks
+- Use the `conditionals` prop with v1 format: `{ rules: [...] }`
+- Subject to v1's O(M×N) performance for array conditionals
+- For v2 benefits, use the React-based API instead
+
+```javascript
+// Vanilla JS supports only v1 conditionals
+ExtendedDynamicForms.createForm({
+  container: '#my-form',
+  schema: schema,
+  conditionals: {
+    rules: [
+      {
+        conditions: { showField: true },
+        event: { type: 'show', params: { field: 'conditionalField' } }
+      }
+    ]
+  }
+});
+```
+
 **Perfect for:**
 - WordPress/Drupal integrations
 - Legacy applications
@@ -524,7 +547,7 @@ const migrationReport = generateMigrationReport(v1Rules, {
 
 ### Simple Wizard Form (Recommended)
 
-The `WizardForm` component automatically detects multi-step forms and handles navigation. Use it with Three Pillars v2:
+The `WizardForm` component automatically detects multi-step forms and handles navigation. It fully supports conditional logic through either v1 conditions (deprecated) or the recommended Three Pillars v2 architecture:
 
 ```tsx
 import { useState } from 'react';
@@ -532,9 +555,22 @@ import { WizardForm } from 'extended-dynamic-forms';
 import { useConditionalUi, UiRule } from 'extended-dynamic-forms/conditionals/v2';
 import schema from './schema.json';
 import baseUiSchema from './ui-schema.json';
-import uiRules from './ui-rules'; // Your v2 UI rules
 import webhooks from './webhooks.json';
 
+// Example: v2 Three Pillars approach (recommended)
+const uiRules: UiRule[] = [
+  {
+    name: 'Show tax ID in company step when listed',
+    condition: (formData) => formData.STEP_COMPANY?.isListedCompany === true,
+    effect: [{ op: 'remove', path: '/STEP_COMPANY/taxId/ui:widget' }]
+  },
+  {
+    name: 'Show shareholding percentage for directors with shares',
+    condition: (formData) => formData.STEP_DIRECTORS?.directors?.some(d => d.hasShareholding),
+    effect: [{ op: 'remove', path: '/STEP_DIRECTORS/directors/items/shareholdingPercentage/ui:widget' }]
+  }
+];
+
 function App() {
   const [formData, setFormData] = useState({});
   const conditionalUiSchema = useConditionalUi(uiRules, baseUiSchema, formData);
@@ -550,6 +586,26 @@ function App() {
     />
   );
 }
+
+// Alternative: v1 conditions approach (deprecated but still supported)
+const v1Conditions = [
+  {
+    conditions: { "STEP_COMPANY.isListedCompany": true },
+    event: { type: "show", params: { field: "STEP_COMPANY.taxId" } }
+  },
+  {
+    conditions: { "STEP_DIRECTORS.directors[*].hasShareholding": true },
+    event: { type: "require", params: { field: "STEP_DIRECTORS.directors[*].shareholdingPercentage" } }
+  }
+];
+
+// Pass v1 conditions directly to WizardForm
+<WizardForm
+  schema={schema}
+  uiSchema={uiSchema}
+  conditions={v1Conditions}  // WizardForm handles step-aware transformation
+  onSubmit={(data) => console.log('Submitted:', data.formData)}
+/>
 ```
 
 ### Basic Form with Three Pillars v2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extended-dynamic-forms",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Extended React JSON Schema Form (RJSF) v6 with custom components, widgets, templates, layouts, and form events",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",