extended-dynamic-forms 0.3.5 → 0.3.7

package/README.md

@@ -24,6 +24,14 @@ Extended Dynamic Forms is an extension library for React JSON Schema Form (RJSF)
 - **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.
@@ -145,6 +153,67 @@ const schema = {
 condition: { "==": [{ "var": "hasDriversLicense" }, true] }
 ```
 
+Note on wizard detection:
+- Wizard mode activates only when the root schema contains two or more properties whose keys start with `STEP_`.
+- With a single `STEP_…` property, the form renders as a single-page form (no progress/navigation UI).
+- To display steps UI, define at least two step objects (e.g., `STEP_PERSONAL`, `STEP_REVIEW`).
+
+### Step Layouts with LayoutGridField
+
+Wizard steps can define their own grid layout using a custom object field (e.g., `LayoutGridField`). Place the layout at the step key in `uiSchema` and pass your custom field via `fields` to `WizardForm`.
+
+```tsx
+import { WizardForm } from 'extended-dynamic-forms';
+
+const schema = {
+  type: 'object',
+  properties: {
+    STEP_LAYOUT: {
+      type: 'object',
+      title: 'Personal Info',
+      properties: {
+        firstName: { type: 'string', title: 'First Name' },
+        lastName: { type: 'string', title: 'Last Name' },
+        age: { type: 'number', title: 'Age' },
+        gender: { type: 'string', enum: ['Male','Female','Other'] },
+        favoriteBook: { type: 'string' },
+      }
+    }
+  }
+};
+
+const uiSchema = {
+  STEP_LAYOUT: {
+    'ui:field': 'LayoutGridField',
+    'ui:layoutGrid': {
+      'ui:row': [
+        { 'ui:row': { gutter: [16,16], children: [
+          { 'ui:col': { span: 12, children: ['firstName'] } },
+          { 'ui:col': { span: 12, children: ['lastName'] } }
+        ]}},
+        { 'ui:row': { gutter: [16,16], children: [
+          { 'ui:col': { span: 24, children: ['age'] } }
+        ]}},
+        { 'ui:row': { gutter: [16,16], children: [
+          { 'ui:col': { span: 24, children: ['gender'] } }
+        ]}},
+        { 'ui:row': { gutter: [16,16], children: [
+          { 'ui:col': { span: 24, children: ['favoriteBook'] } }
+        ]}}
+      ]
+    }
+  }
+};
+
+// LayoutGridField is included by default in EDF; no extra wiring needed
+<WizardForm schema={schema} uiSchema={uiSchema} />
+```
+
+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.
+
 ## Event System & Webhooks
 
 Central event orchestration for all form interactions:
@@ -191,6 +260,26 @@ export const CustomWidget: FC<WidgetProps> = ({ id, value, onChange, schema }) =
 };
 ```
 
+### Auto-registered by Default
+- All EDF custom widgets are included by default; no wiring is required.
+- Every widget is also exposed as a field, so you can use either `ui:widget` or `ui:field` with the same key.
+
+Examples:
+
+```json
+{
+  "schema": { "type": "string", "title": "First Name" },
+  "uiSchema": { "ui:widget": "text" }
+}
+```
+
+```json
+{
+  "schema": { "type": "string", "title": "First Name" },
+  "uiSchema": { "ui:field": "text" }
+}
+```
+
 ## JsonLogic Migration Examples
 
 Common patterns for migrating from function-based conditions:
@@ -264,6 +353,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
 {
@@ -313,6 +484,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
 {
@@ -378,7 +568,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,
@@ -388,6 +578,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
 {
@@ -437,21 +644,14 @@ Common patterns for migrating from function-based conditions:
 }
 ```
 
-### Widget Registration
+### Widget Registration (optional)
 
-Register custom widgets with ExtendedForm:
+Widgets are auto-registered. You can still override or pass a subset if needed:
 
 ```typescript
 import { ExtendedForm, customWidgets } from 'extended-dynamic-forms';
 
-// Use all built-in widgets
-<ExtendedForm 
-  widgets={customWidgets}
-  schema={schema}
-  uiSchema={uiSchema}
-/>
-
-// Or register specific widgets
+// Override or register specific widgets
 <ExtendedForm 
   widgets={{
     text: customWidgets.text,
@@ -540,4 +740,4 @@ import {
 
 ## License
 
-MIT License - see LICENSE file for details.
+MIT License - see LICENSE file for details.

package/dist/WizardForm.d.ts

@@ -24,5 +24,8 @@ export interface WizardFormProps {
     onWebhookStart?: (webhook: WebhookConfig, event: any) => void;
     onWebhookComplete?: (webhook: WebhookConfig, event: any, response: any) => void;
     onWebhookError?: (webhook: WebhookConfig, event: any, error: Error) => void;
+    widgets?: any;
+    fields?: any;
+    templates?: any;
 }
-export declare function WizardForm({ schema, uiSchema, webhooks, formData: initialFormData, onSubmit, onStepChange, onFieldFocus, onFieldBlur, onFieldChange, onLiveChange, showProgressBar, showStepDescription, submitButtonText, liveValidate, showErrorList, onWebhookStart, onWebhookComplete, onWebhookError, }: WizardFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function WizardForm({ schema, uiSchema, webhooks, formData: initialFormData, onSubmit, onStepChange, onFieldFocus, onFieldBlur, onFieldChange, onLiveChange, showProgressBar, showStepDescription, submitButtonText, liveValidate, showErrorList, onWebhookStart, onWebhookComplete, onWebhookError, widgets, fields, templates, }: WizardFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/fields/LayoutGridField.d.ts

@@ -0,0 +1,4 @@
+import { FieldProps, RJSFSchema, StrictRJSFSchema, FormContextType } from '@rjsf/utils';
+
+export declare const LayoutGridField: <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>) => import("react/jsx-runtime").JSX.Element;
+export default LayoutGridField;

package/dist/components/index.d.ts

@@ -1,24 +1,28 @@
+import { default as React } from 'react';
 import { AddressField } from './fields/AddressField';
 import { PhoneField } from './fields/PhoneField';
 import { CurrencyField } from './fields/CurrencyField';
+import { LayoutGridField } from './fields/LayoutGridField';
 import { ArrayFieldTemplate, ArrayFieldItemTemplate } from './arrays';
 import { WizardObjectFieldTemplate, WizardSectionTemplate } from '../layouts/wizard';
 import { SubmitButton } from './templates/SubmitButton';
 import { FieldTemplate } from './templates/FieldTemplate';
+import { FieldProps } from '@rjsf/utils';
 
 export declare const customFields: {
-    address: import('react').FC<import('@rjsf/utils').FieldProps<any, import('@rjsf/utils').RJSFSchema, any>>;
-    phone: import('react').FC<import('@rjsf/utils').FieldProps<any, import('@rjsf/utils').RJSFSchema, any>>;
-    currency: import('react').FC<import('@rjsf/utils').FieldProps<any, import('@rjsf/utils').RJSFSchema, any>>;
+    address: React.FC<FieldProps<any, import('@rjsf/utils').RJSFSchema, any>>;
+    phone: React.FC<FieldProps<any, import('@rjsf/utils').RJSFSchema, any>>;
+    currency: React.FC<FieldProps<any, import('@rjsf/utils').RJSFSchema, any>>;
+    LayoutGridField: <T = any, S extends import('@rjsf/utils').StrictRJSFSchema = import('@rjsf/utils').RJSFSchema, F extends import('@rjsf/utils').FormContextType = any>(props: FieldProps<T, S, F>) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const customTemplates: {
-    FieldTemplate: import('react').FC<import('@rjsf/utils').FieldTemplateProps>;
+    FieldTemplate: React.FC<import('@rjsf/utils').FieldTemplateProps>;
     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: import('react').FC<import('@rjsf/utils').ObjectFieldTemplateProps>;
-    WizardSectionTemplate: import('react').FC<import('../layouts/wizard/WizardSectionTemplate').WizardSectionTemplateProps>;
+    WizardObjectFieldTemplate: React.FC<import('@rjsf/utils').ObjectFieldTemplateProps>;
+    WizardSectionTemplate: React.FC<import('../layouts/wizard/WizardSectionTemplate').WizardSectionTemplateProps>;
     ButtonTemplates: {
-        SubmitButton: import('react').FC<import('@rjsf/utils').SubmitButtonProps>;
+        SubmitButton: React.FC<import('@rjsf/utils').SubmitButtonProps>;
     };
 };
-export { AddressField, PhoneField, CurrencyField, FieldTemplate, ArrayFieldTemplate, ArrayFieldItemTemplate, WizardObjectFieldTemplate, WizardSectionTemplate, SubmitButton, };
+export { AddressField, PhoneField, CurrencyField, LayoutGridField, FieldTemplate, ArrayFieldTemplate, ArrayFieldItemTemplate, WizardObjectFieldTemplate, WizardSectionTemplate, SubmitButton, };

package/dist/conditionals/v2/index.d.ts

@@ -3,7 +3,7 @@ export type { Rule, EngineConfig, ConditionalEngineHook, UiEffect, SchemaEffect,
 export { useConditionalUi, type UiRule } from './hooks/useConditionalUi';
 export { useConditionalSchema, type SchemaRule, } from './hooks/useConditionalSchema';
 export { useConditionalValidation, type ValidationRule, } from './hooks/useConditionalValidation';
-export { createDynamicArrayItemsUiSchema, mergeItemUiSchema, arrayItemPatterns, type ArrayItemsFunction, type ArrayItemConditionalFn, } from './utils/dynamicArrayItems';
+export { createDynamicArrayItemsUiSchema, mergeItemUiSchema, arrayItemPatterns, normalizeUiSchemaDynamicItems, compileDynamicItems, type ArrayItemsFunction, type ArrayItemConditionalFn, type DynamicItemsConfig, type DynamicItemsRule, } from './utils/dynamicArrayItems';
 export { uiEngineConfig } from './engines/uiEngineConfig';
 export { schemaEngineConfig } from './engines/schemaEngineConfig';
 export { validationEngineConfig, createCustomValidate, } from './engines/validationEngineConfig';

package/dist/conditionals/v2/utils/dynamicArrayItems.d.ts

@@ -40,6 +40,31 @@ export declare function createDynamicArrayItemsUiSchema(baseItemUiSchema: UiSche
  * @returns Merged UI schema
  */
 export declare function mergeItemUiSchema(base: UiSchema, overrides: Partial<UiSchema>): UiSchema;
+/**
+ * Declarative JSON config for dynamic array items (compiled to a function at runtime)
+ */
+export type DynamicItemsRule = {
+    condition: any;
+    ui?: Partial<UiSchema>;
+    otherwise?: Partial<UiSchema>;
+};
+export type DynamicItemsConfig = {
+    base?: UiSchema;
+    rules: DynamicItemsRule[];
+};
+/**
+ * Compile a declarative JSON config into an ArrayItemsFunction
+ * - Supports single-rule shorthand and multi-rule configs
+ * - JsonLogic context = itemData extended with {$index, $formContext}
+ */
+export declare function compileDynamicItems(def: {
+    'ui:dynamicItems': DynamicItemsConfig;
+}): ArrayItemsFunction;
+/**
+ * Recursively scan a UiSchema and convert declarative dynamic items into functions
+ * - Looks for items: { ui:dynamicItems: { ... } }
+ */
+export declare function normalizeUiSchemaDynamicItems(uiSchema: UiSchema): UiSchema;
 /**
  * Helper to create common conditional patterns
  */

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>;