extended-dynamic-forms 0.3.7 → 0.3.9

package/README.md

@@ -1,8 +1,8 @@
 # Extended Dynamic Forms
 
-## BREAKING CHANGE: v0.2.0
+## Declarative Configuration (JSON-only)
 
-All conditional logic now uses **JsonLogic rules only** for conditions. Function-based conditions have been removed for security and portability. Note that validation effects may still use functions. See migration examples below.
+Conditional logic is configured with pure JSON via `x-edf:rules` in your `schema` and `uiSchema`. Function-based conditions and external hooks are not required and should not be used in app code.
 
 ## Project Status
 
@@ -18,7 +18,7 @@ All conditional logic now uses **JsonLogic rules only** for conditions. Function
 
 Extended Dynamic Forms is an extension library for React JSON Schema Form (RJSF) v6 that adds:
 
-- **Three Pillars Architecture** for conditional logic with O(N) performance (where N is the number of conditional rules/array items)
+- **Declarative conditionals** with O(N) performance (rules + dynamic arrays)
 - **Multi-step wizard forms** with automatic step detection
 - **Central event orchestration** with webhook support
 - **25+ Ant Design components** for professional UI
@@ -51,71 +51,62 @@ npm run dev
 
 ## Core Architecture
 
-### Three Pillars Conditional System
+### Declarative Conditionals (JSON-only)
 
-The conditional logic system is divided into three independent pillars:
+Embed rules directly inside your configs. EDF evaluates JsonLogic `condition` and applies JSON Patch `effect` internally. No hooks, functions, or classes in user code.
 
-#### 1. UI Logic Pillar
-Controls form appearance using JsonLogic conditions and JSON Patch operations:
+- UI rules → `uiSchema['x-edf:rules']`
+- Schema rules → `schema['x-edf:rules']`
 
-```typescript
-import { useConditionalUi, UiRule } from 'extended-dynamic-forms/conditionals/v2';
-
-const uiRules: UiRule[] = [{
-  name: 'Show license number when has license',
-  condition: { "==": [{ "var": "hasDriversLicense" }, true] },
-  effect: [{ op: 'remove', path: '/licenseNumber/ui:widget' }]
-}];
-
-const conditionalUiSchema = useConditionalUi(uiRules, baseUiSchema, formData);
-```
-
-#### 2. Schema Logic Pillar  
-Modifies JSON Schema structure dynamically (use sparingly):
-
-```typescript
-const schemaRules: SchemaRule[] = [{
-  name: 'Add premium fields',
-  condition: { "==": [{ "var": "accountType" }, "premium"] },
-  effect: [{ op: 'add', path: '/properties/premiumFeatures', value: {...} }]
-}];
+Example (UI rules):
+```json
+{
+  "x-edf:rules": [
+    {
+      "name": "Show license number when has license",
+      "condition": { "==": [{ "var": "hasDriversLicense" }, true] },
+      "effect": [{ "op": "remove", "path": "/licenseNumber/ui:widget" }]
+    }
+  ]
+}
 ```
 
-#### 3. Validation Logic Pillar
-Adds conditional validation rules:
-
-```typescript
-const validationRules: ValidationRule[] = [{
-  name: 'Require consent for minors',
-  condition: { "<": [{ "var": "age" }, 18] },
-  effect: {
-    name: 'Parent consent validation',
-    isActive: { "<": [{ "var": "age" }, 18] },
-    validate: (errors, formData) => {
-      if (!formData.parentConsent) {
-        errors.parentConsent.__errors = ['Parent consent required'];
-      }
+Example (Schema rules):
+```json
+{
+  "x-edf:rules": [
+    {
+      "name": "Add premium fields",
+      "condition": { "==": [{ "var": "accountType" }, "premium"] },
+      "effect": [
+        { "op": "add", "path": "/properties/premiumFeatures", "value": { "type": "object" } }
+      ]
     }
-  }
-}];
+  ]
+}
 ```
 
 ### Dynamic Arrays with O(N) Performance
 
-Provides efficient handling of conditional logic within arrays, where N is the number of array items:
+Use declarative `ui:dynamicItems` with per-item JsonLogic. No functions:
 
-```typescript
-import { createDynamicArrayItemsUiSchema } from 'extended-dynamic-forms/conditionals/v2';
-
-const uiSchema = {
-  directors: {
-    items: createDynamicArrayItemsUiSchema((director, index) => ({
-      shareholdingPercentage: {
-        'ui:widget': director.hasShareholding ? 'percentage' : 'hidden'
+```json
+{
+  "directors": {
+    "items": {
+      "ui:dynamicItems": {
+        "base": { "shareholdingPercentage": { "ui:widget": "hidden" } },
+        "rules": [
+          {
+            "condition": { "===": [{ "var": "hasShareholding" }, true] },
+            "ui": { "shareholdingPercentage": { "ui:widget": "updown" } },
+            "otherwise": { "shareholdingPercentage": { "ui:widget": "hidden" } }
+          }
+        ]
       }
-    }))
+    }
   }
-};
+}
 ```
 
 ## Multi-Step Wizard Forms
@@ -127,7 +118,7 @@ import { WizardForm } from 'extended-dynamic-forms';
 
 <WizardForm
   schema={wizardSchema}
-  uiSchema={conditionalUiSchema}
+  uiSchema={uiSchema}
   formData={formData}
   onStepChange={(fromStep, toStep) => {
     console.log(`Step ${fromStep} → ${toStep}`);
@@ -149,8 +140,8 @@ const schema = {
   }
 };
 
-// Conditions use flat paths (no STEP_ prefix)
-condition: { "==": [{ "var": "hasDriversLicense" }, true] }
+// Conditions refer to flattened form data (no STEP_ prefix)
+// Example rule (in uiSchema.x-edf:rules): { "==": [{ "var": "hasDriversLicense" }, true] }
 ```
 
 Note on wizard detection:
@@ -213,6 +204,7 @@ Notes:
 - EDF includes `LayoutGridField` out of the box. Just set `ui:field: 'LayoutGridField'` on the step object.
 - EDF variant uses `'ui:layoutGrid'` with AntD gutter and 24-grid spans. The RJSF canonical layout (`'ui:layout'` with 12-grid widths) is also parsed.
 - You can still override or extend via the `fields` prop if needed.
+- LayoutGridField now writes nested updates immutably using path metadata. This is enabled by default; set `ui:options.pathAware: false` on a step to fall back to the previous shallow merge behaviour.
 
 ## Event System & Webhooks
 
@@ -684,7 +676,7 @@ npm run format           # Prettier
 ```
 src/
 ├── components/          # Core form components
-├── conditionals/        # Three Pillars system
+├── conditionals/        # Declarative conditional engines (internal)
 │   └── v2/             # Current implementation
 ├── events/             # Event orchestration
 ├── layouts/            # Layout systems
@@ -718,16 +710,8 @@ Run `npm run dev` to explore examples.
 Full TypeScript support with exported types:
 
 ```typescript
-import {
-  ExtendedForm,
-  WizardForm,
-  UiRule,
-  SchemaRule,
-  ValidationRule,
-  JsonLogicRule,
-  FormEvent,
-  WebhookConfig
-} from 'extended-dynamic-forms';
+import { ExtendedForm, WizardForm } from 'extended-dynamic-forms';
+// Config is JSON-only; rules are embedded via x-edf:rules
 ```
 
 ## Contributing

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export declare const customFields: {
 };
 export declare const customTemplates: {
     FieldTemplate: React.FC<import('@rjsf/utils').FieldTemplateProps>;
+    ObjectFieldTemplate: React.FC<import('@rjsf/utils').ObjectFieldTemplateProps>;
     ArrayFieldTemplate: (props: import('@rjsf/utils').ArrayFieldTemplateProps) => import("react/jsx-runtime").JSX.Element;
     ArrayFieldItemTemplate: (props: import('@rjsf/utils').ArrayFieldItemTemplateType) => import("react/jsx-runtime").JSX.Element;
     WizardObjectFieldTemplate: React.FC<import('@rjsf/utils').ObjectFieldTemplateProps>;

package/dist/components/templates/ObjectFieldTemplate.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ObjectFieldTemplateProps } from '@rjsf/utils';
+
+export declare const ObjectFieldTemplate: React.FC<ObjectFieldTemplateProps>;
+export default ObjectFieldTemplate;