extended-dynamic-forms 0.3.5 → 0.3.6

package/README.md

@@ -145,6 +145,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 +252,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:
@@ -437,21 +518,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 +614,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
  */