extended-dynamic-forms 0.3.6 → 0.3.8

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,12 +18,20 @@ 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
 - **TypeScript-first** development with full type safety
 
+### Ant Design Prop Pass-through
+
+All custom widgets built on Ant Design components forward their props via `ui:options`. For example, Rate, Slider, DatePicker, Input, InputNumber, ColorPicker, and TimePicker can be configured using the same prop names from AntD. In addition, you can customize the containing `Form.Item` using `ui:options.formItem`. See docs/custom-widgets-configuration.md for details and examples.
+
+- DatePicker notes:
+  - JSON-only flags: `disablePastDates`, `disableFutureDates`, `disableWeekends` (builds `disabledDate` internally)
+  - Range support: set `ui:options.range: true` to render AntD `RangePicker` (see examples below)
+
 ## Installation
 
 **Note:** This library currently requires local development setup and cannot be installed via npm due to local file dependencies.
@@ -43,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:
-
-```typescript
-import { createDynamicArrayItemsUiSchema } from 'extended-dynamic-forms/conditionals/v2';
+Use declarative `ui:dynamicItems` with per-item JsonLogic. No functions:
 
-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
@@ -119,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}`);
@@ -141,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:
@@ -345,6 +344,88 @@ Common patterns for migrating from function-based conditions:
 }
 ```
 
+#### Text Input with Variant and Auto-complete
+```json
+{
+  "schema": { "type": "string", "title": "Username" },
+  "uiSchema": {
+    "ui:widget": "text",
+    "ui:options": {
+      "variant": "outlined",
+      "autoFocus": true,
+      "autoComplete": "username",
+      "allowClear": true
+    }
+  }
+}
+```
+
+#### Date Range (RangePicker)
+```json
+{
+  "schema": {
+    "type": "array",
+    "title": "Date Range",
+    "items": { "type": "string" },
+    "minItems": 2,
+    "maxItems": 2
+  },
+  "uiSchema": {
+    "ui:widget": "date",
+    "ui:options": {
+      "range": true,
+      "format": "YYYY-MM-DD",
+      "placeholder": ["Start date", "End date"],
+      "picker": "date"
+    }
+  }
+}
+```
+
+With time selection:
+```json
+{
+  "schema": {
+    "type": "array",
+    "title": "Date Range With Time",
+    "items": { "type": "string" },
+    "minItems": 2,
+    "maxItems": 2
+  },
+  "uiSchema": {
+    "ui:widget": "date",
+    "ui:options": {
+      "range": true,
+      "showTime": true,
+      "format": "YYYY-MM-DD HH:mm",
+      "placeholder": ["Start date/time", "End date/time"]
+    }
+  }
+}
+```
+
+Month range:
+```json
+{
+  "schema": {
+    "type": "array",
+    "title": "Month Range",
+    "items": { "type": "string" },
+    "minItems": 2,
+    "maxItems": 2
+  },
+  "uiSchema": {
+    "ui:widget": "date",
+    "ui:options": {
+      "range": true,
+      "picker": "month",
+      "format": "YYYY-MM",
+      "placeholder": ["Start month", "End month"]
+    }
+  }
+}
+```
+
 #### Number Input with Range
 ```json
 {
@@ -394,6 +475,25 @@ Common patterns for migrating from function-based conditions:
 }
 ```
 
+#### Choice Widget with AntD props (Dropdown)
+```json
+{
+  "schema": { "type": "string", "title": "Country" },
+  "uiSchema": {
+    "ui:widget": "choice",
+    "ui:options": {
+      "choiceConfig": {
+        "presentationMode": "dropdown",
+        "dataSource": { "type": "static", "options": [
+          { "label": "USA", "value": "us" }, { "label": "UK", "value": "uk" }
+        ]},
+        "antd": { "select": { "dropdownMatchSelectWidth": 280, "placement": "bottomLeft" } }
+      }
+    }
+  }
+}
+```
+
 #### Choice Widget (Radio Group)
 ```json
 {
@@ -459,7 +559,7 @@ Common patterns for migrating from function-based conditions:
     "format": "data-url"
   },
   "uiSchema": {
-    "ui:widget": "FileUploadWidget",
+    "ui:widget": "fileUpload",
     "ui:options": {
       "accept": ".pdf,.doc,.docx",
       "maxSize": 5242880,
@@ -469,6 +569,23 @@ Common patterns for migrating from function-based conditions:
 }
 ```
 
+#### File Upload (Ant Upload options)
+```json
+{
+  "schema": { "type": "string", "title": "Profile Picture" },
+  "uiSchema": {
+    "ui:widget": "fileUpload",
+    "ui:options": {
+      "useAntUpload": true,
+      "listType": "picture-card",
+      "showUploadList": { "showPreviewIcon": true, "showRemoveIcon": true },
+      "maxCount": 1,
+      "accept": "image/*"
+    }
+  }
+}
+```
+
 #### Color Picker
 ```json
 {
@@ -558,7 +675,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
@@ -592,16 +709,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/icons/LucideIcon.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+export interface LucideIconProps {
+    name: string;
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const LucideIcon: React.FC<LucideIconProps>;