@bolttech/form-engine 3.0.0-beta.16 → 3.0.0-beta.17

package/README.md

@@ -1,56 +1,128 @@
 # Form Engine React Adapter
 
-This is a react adapter to be used with form engine.
+This is an adapter to be used with the bolttech form engine. Compatible with Next.js 13 and 14 and react 18.
 
-## React `<FormProvider />`
+## React `<FormGroupContextProvider />`
 
-React context that lets you provide configuration information to your application forms
+Provider of the context surrounding the child components, providing the state and functions to manage the group of forms.
 
 ### Props
 
-| Prop         | Type          | Description                                                   |
-| ------------ | ------------- | ------------------------------------------------------------- |
-| mapper       | TMapper       | Allow you to map your own components to be used with the form |
-| propsMapping | TPropsMapping | Map your component props names with the form functionalities  |
+| Prop      | Type                   | Description                                                                                            |
+| --------- | ---------------------- | ------------------------------------------------------------------------------------------------------ |
+| mappers   | TMapper<ElementType>[] | Array of mappers for form element types. Allow you to map your own components to be used with the form |
+| debugMode | boolean                | Optional flag to enable debug mode (default: `false`).                                                 |
+
+### Implementation
+
+- Creates a reference to the form group instance.
+- Defines functions for adding, getting, and removing forms from the group.
+- Defines a function to print the form group instance.
+- Defines a function to submit multiple forms via the index.
+- Defines the value of the context with the created functions and states.
+- Returns the context provider involving the child components.
 
 ### Example
 
 The following example shows a provider that will provide forms with input and Dropdown component
 
-```javascript
-import Input from 'Components/Input';
-import Dropdown from 'Components/Dropdown';
+#### With lazy import
 
-const Mappings = {
-  inputForm: { component: Input },
-  dropdownForm: { component: Dropdown },
+```typescript
+import { ElementType, SyntheticEvent } from 'react';
+import { TValueChangeEvent, TMapper } from '@bolttech/form-engine-core';
+
+const defaultChangeEvent: TValueChangeEvent = (event: unknown) => {
+  return (event as SyntheticEvent<HTMLInputElement>).currentTarget.value;
 };
 
-const propsMapping = {
-  inputForm: {
-    getValue: 'onChange',
-    setValue: 'value',
+const pathImports = {
+  input: lazy(() =>
+    import('@bolttech/atoms-input').then((module) => ({
+      default: module.Input,
+    }))
+  ),
+};
+
+const mappers: TMapper<ElementType>[] = [
+  {
+    asynccomponent: pathImports.input,
+    componentName: 'input',
+    events: {
+      getValue: 'onChange',
+      setValue: 'value',
+      setErrorMessage: 'errorMessage',
+      onBlur: 'onBlur',
+      onFocus: 'onFocus',
+      onKeyUp: 'onKeyUp',
+      onKeyDown: 'onKeyUpCapture',
+    },
+    valueChangeEvent: defaultChangeEvent,
   },
-  dropdownForm: {
-    getValue: 'onChangeCallback',
-    setValue: 'data',
-    setErrorMessage: 'errorMessageArray',
-    setErrorState: 'isErrored',
-    onBlur: 'onBlurCallback',
-    onFocus: 'onFocusCallback',
-    onKeyUp: 'onKeyUpCallback',
-    onKeyDown: 'onKeyDownCallback',
+];
+```
+
+#### Without lazy import
+
+```typescript
+import { ElementType, SyntheticEvent } from 'react';
+import { TValueChangeEvent, TMapper } from '@bolttech/form-engine-core';
+import { OptionType } from '@bolttech/atoms-select';
+import { Dropdown } from '@bolttech/molecules-dropdown';
+
+const mappers: TMapper<ElementType>[] = [
+  {
+    component: Dropdown,
+    componentName: 'dropdown',
+    events: {
+      getValue: 'onChange',
+      setValue: 'value',
+      setErrorMessage: 'errorMessage',
+    },
+    valueChangeEvent: (event: unknown, opts) => {
+      if (typeof event === 'object' && event !== null && 'value' in event && 'id' in event) {
+        return {
+          _value: event?.id,
+          _metadata: event,
+        };
+      } else if (typeof event === 'string' && typeof opts === 'object' && 'props' in opts && typeof opts.props === 'object' && 'optionList' in opts.props && Array.isArray(opts.props.optionList)) {
+        const option = (opts.props.optionList as OptionType[]).find((el) => el?.value === event);
+        if (option) return { _value: option.id, _metadata: option };
+      } else return { _value: event, _metadata: event };
+    },
   },
+];
+```
+
+The codes above are created using the `valueChangeEvent` method, which is a new way of controlling how the field value will be manipulated when setValue happens. In other words: Optional function to handle value changes.
+
+#### Calling provider
+
+```typescript
+import React from 'react';
+import { FormGroupContextProvider } from '@bolttech/form-engine'; // Import the previously created provider
+
+type Props = {
+  children: React.ReactNode;
 };
 
-const App = () => {
-  return <FormProvider mapper={Mappings} propsMapping={propsMapping} />;
+const App = ({ children }: Props): React.ReactElement => {
+  const mappers = []; // Define your type mappers here
+  const debugMode = true; // Enable debug mode
+
+  return (
+    <FormGroupContextProvider mappers={mappers} debugMode={debugMode}>
+      {children}
+    </FormGroupContextProvider>
+  );
 };
+
+export default App;
 ```
 
-You now can use in your [form](#react-form-) the mapped components with names `inputForm` and `dropdownForm`.
+You now can use in your [form](#react-form-) the mapped components with names `input` and `dropdown`.
 
-Also note the data in `propsMapping`. There you can map up to five form functionalities per component
+Also note the data in `TMapper.events`. There you can map up to five form functionalities per component
 
 | Key             | Functionality                                                                                                        |
 | --------------- | -------------------------------------------------------------------------------------------------------------------- |
@@ -63,7 +135,7 @@ Also note the data in `propsMapping`. There you can map up to five form function
 | onKeyUp         | Prop name that is called when user releases a key on field                                                           |
 | onKeyDown       | Prop name that is called when user presses a key on field                                                            |
 
-You can also use default prop names for functionalities like:
+[DEPRECIATED] You can also use default prop names for functionalities like:
 
 ```javascript
 import Input from 'Components/Input';
@@ -91,180 +163,131 @@ const App = () => {
 };
 ```
 
-This will make form search for those names in all your components that do not have split mapping.
+[DEPRECIATED] This will make form search for those names in all your components that do not have split mapping.
 
-## React `<Form />`
+## React `useFormGroupContext()` hook
 
-After configuring the provider, `<Form />` components lets you render a form
+Hook that facilitates the use of the FormGroupContext context in functional components.
 
-### Props
+- Checks if the context is set and throws an error if not.
+- Returns the context.
 
-| Prop                  | Type                                                                               | Description                                                                                                                                 |
-| --------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| disable               | boolean                                                                            | Disable all form inputs. It will use the default htm disable attribute                                                                      |
-| group                 | string                                                                             | Form group identifier. Used be able to group several forms and then get data with useGroupForm. One will be generated as default if omitted |
-| id                    | string                                                                             | Form identified. One will be generated as default if omitted                                                                                |
-| hooks                 | THooks                                                                             | Provide functions to run on certain life-cycle events                                                                                       |
-| iVars                 | Object                                                                             | One object with internal variables to be used in form with data binding                                                                     |
-| initialValues         | Object                                                                             | Object with form initial values that will map to a field.                                                                                   |
-| Schema                | TSchema                                                                            | Form Schema                                                                                                                                 |
-| autoComplete          | string                                                                             | HTML autocomplete                                                                                                                           |
-| className             | string                                                                             | Allow to style form                                                                                                                         |
-| onSubmit              | callback(HTMLFormElement,TFormValues)                                              | Will be called when there is a submit action in the form                                                                                    |
-| onData                | callback(TFormValues,TComponent, TField)                                           | Will be called when any field data change. The arguments will let you know which field changed and the field configuration                  |
-| onBlur                | callback(TFormValues,TComponent, TField)                                           | Will be called when any field blured. The arguments will let you know which field blured and the field configuration                        |
-| onFocus               | callback(TFormValues,TComponent, TField)                                           | Will be called when any field focused change. The arguments will let you know which field focused and the field configuration               |
-| onFieldMount          | callback(TFormValues,TComponent, TField)                                           | Will be called when some field mounted. Its called with the field that information that mounted.                                            |
-| onStep                | callback(TFormValues)                                                              | Called when a form step changed                                                                                                             |
-| onLog                 | callback(TLoggingEvent)                                                            | Called on each log, if the logging is enabled                                                                                               |
-| onScopeChange         | onScopeChange?(scope: TScope, namespace: string, key: string): void;               | Called everything scope change with the changing information (namespace and key) and the changed scope                                      |
-| onClick               | onClick(TFormValues, TField)                                                       | Callback function that runs on each component click                                                                                         |
-| afterApiCall          | afterApiCall(values: TFormValues, component?: TComponent, field?: TField)          | Callback function that runs on each component after api call.                                                                               |
-| onFieldRehydrate      | onFieldRehydrate?(values: TFormValues, component: TComponent, field: TField): void | This callback is called whenever some form field was rehydrated                                                                             |
-| renderLoading         | renderLoading?(): ReactElement;                                                    | Component to render while the schema has not rendered                                                                                       |
-| onFormMount           | onFormMount?(values: TFormValues): void;                                           | Called when the form finished mounted                                                                                                       |
-| formattedDataDefaults | Object                                                                             | Some default data to fields when they are undefined                                                                                         |
-| submitOnValidOnly     | boolean                                                                            | Boolean indicating if form can be submitted even if it is invalid                                                                           |
-| renderFieldWrapper    | renderFieldWrapper(component: TComponent, children: ReactElement[])                | Function that allows to insert a wrapper in place of a component or wrapping the component                                                  |
+### What comes from
 
-### Example
+- `addForm`: Function to add a form to the group.
+- `getForm`: Function to obtain a specific form from the group.
+- `removeForm`: Function to remove a form from the group.
+- `formGroupInstance`: Instance of the form group.
+- `printFormGroupInstance`: Function to print the form group instance.
+- `submitMultipleFormsByIndex`: Function to submit multiple forms by index.
 
-A simple example of rendering a basic form
-
-```javascript
-<Form schema={schema} />
+```typescript
+type TFormContext = {
+  addForm: (payload: { key: string; formInstance: TFormCore }) => void;
+  getForm: (payload: { key: string }) => FormCore | undefined;
+  removeForm: (payload: { key: string }) => void;
+  formGroupInstance: TFormGroup;
+  printFormGroupInstance: () => void;
+  submitMultipleFormsByIndex: (indexes: string[]) => TFormValues;
+};
 ```
 
-## React `useForm()`
-
-Exposed hook that allows you to connect to any form by the formId in any part of the application, as long as you are inside the form context.
+### Example
 
-### Props
+```typescript
+import React from 'react';
+import { useFormGroupContext } from '@bolttech/form-engine'; // Import the previously created hook
 
-You can use the following arguments to tho hook
+const FormComponent = (): React.ReactElement => {
+  const { addForm, removeForm, getForm, printFormGroupInstance, submitMultipleFormsByIndex, debugMode } = useFormGroupContext();
 
-| Prop     | Type            | Description                                            |
-| -------- | --------------- | ------------------------------------------------------ |
-| id       | string          | The id of the form you want to connect to              |
-| ids      | array of string | A range of ids of the each form you want to connect to |
-| onValid  | callback        | Called whenever form validation changes                |
-| onClick  | callback        | Called whenever field has clicked                      |
-| onData   | callback        | Called whenever data changes                           |
-| onSubmit | callback        | Called whenever form is submitted                      |
+  const handleAddForm = () => {
+    const key = 'form1';
+    const formInstance = new FormCore(); // Assuming FormCore is an existing class
+    addForm({ key, formInstance });
+  };
 
-And it will provide you the following
+  const handleRemoveForm = () => {
+    const key = 'form1';
+    removeForm({ key });
+  };
 
-| Prop       | Type     | Description                                                                                     |
-| ---------- | -------- | ----------------------------------------------------------------------------------------------- |
-| submitForm | function | Function that lets you call the submit on the form. After, the onSubmit callback will be called |
-| formData   | function | Lets you get the most up-to-date form date                                                      |
+  const handleGetForm = () => {
+    const key = 'form1';
+    const form = getForm({ key });
+    console.log(form);
+  };
 
-### Example
+  const handleSubmitForms = () => {
+    const indexes = ['form1', 'form2'];
+    const formValues = submitMultipleFormsByIndex(indexes);
+    console.log(formValues);
+  };
 
-In the following example `useForm` hooks are used to connect to multiple forms that are inside other components.
+  return (
+    <div>
+      <button onClick={handleAddForm}>Add Form</button>
+      <button onClick={handleRemoveForm}>Remove Form</button>
+      <button onClick={handleGetForm}>Get Form</button>
+      <button onClick={handleSubmitForms}>Submit Forms</button>
+      <button onClick={printFormGroupInstance}>Print Form Group Instance</button>
+      {debugMode && <p>Debug mode is enabled</p>}
+    </div>
+  );
+};
 
-```javascript
-  const Comp = () => {
-    const { submitForm: submitOne } = useForm({
-      id: 'id1',
-      onData: (data) => {},
-      onSubmit: () => {},
-    });
-    const { submitForm: submitTwo } = useForm({
-      id: 'id2',
-      onData: (data) => {},
-      onSubmit: () => {},
-    });
-
-    return (
-      <>
-        <button onClick={(() => submitOne())}>
-        <button onClick={(() => submitTwo())}>
-      </>
-    );
-  }
-
-  const CompOne = () => {
-    return (
-      <Form id="id1" {...}/>
-    );
-  }
-
-  const CompTwo = () => {
-    return (
-      <Form id="id2" {...} />
-    );
-  }
+export default FormComponent;
 ```
 
-## React `useFormGroup()`
+## React `<Form />`
 
-Similar to `useForm`
+After configuring the provider, `<Form />` components lets you render a form
 
 ### Props
 
-You can use the following arguments to tho hook
-
-| Prop     | Type            | Description                                               |
-| -------- | --------------- | --------------------------------------------------------- |
-| ids      | array of string | The ids we want to listen to                              |
-| group    | string          | A string to identify the form group we want to connect to |
-| onValid  | callback        | Called whenever form validation changes                   |
-| onClick  | callback        | Called whenever field has clicked                         |
-| onData   | callback        | Called whenever data changes                              |
-| onSubmit | callback        | Called whenever form is submitted                         |
-
-And it will provide you the following
-
-| Prop       | Type                  | Description                                                                                                                                                            |
-| ---------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| submitForm | function              | Function that lets you call the submit on the form. After, the onSubmit callback will be called                                                                        |
-| formData   | function({aggregate}) | Lets you get the most up-to-date form date in two ways. Aggregate the forms data in a single object or split by the several forms in the group or identified by the id |
+| Prop                                | Type                                                                               | Description                                                                                                                                 |
+| ----------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| [DEPRECIATED] disable               | boolean                                                                            | Disable all form inputs. It will use the default htm disable attribute                                                                      |
+| [DEPRECIATED] group                 | string                                                                             | Form group identifier. Used be able to group several forms and then get data with useGroupForm. One will be generated as default if omitted |
+| index                               | string                                                                             | Form identified. One will be generated as default if omitted                                                                                |
+| [DEPRECIATED] hooks                 | THooks                                                                             | Provide functions to run on certain life-cycle events                                                                                       |
+| iVars                               | Object                                                                             | One object with internal variables to be used in form with data binding                                                                     |
+| initialValues                       | Object                                                                             | Object with form initial values that will map to a field.                                                                                   |
+| Schema                              | TSchema                                                                            | Form Schema                                                                                                                                 |
+| [DEPRECIATED] autoComplete          | string                                                                             | HTML autocomplete                                                                                                                           |
+| className                           | string                                                                             | Allow to style form                                                                                                                         |
+| onSubmit                            | callback(HTMLFormElement,TFormValues)                                              | Will be called when there is a submit action in the form                                                                                    |
+| onData                              | callback(TFormValues,TComponent, TField)                                           | Will be called when any field data change. The arguments will let you know which field changed and the field configuration                  |
+| onBlur                              | callback(TFormValues,TComponent, TField)                                           | Will be called when any field blured. The arguments will let you know which field blured and the field configuration                        |
+| onFocus                             | callback(TFormValues,TComponent, TField)                                           | Will be called when any field focused change. The arguments will let you know which field focused and the field configuration               |
+| onMount                             | callback(TFormValues,TComponent, TField)                                           | Will be called when some field mounted. Its called with the field that information that mounted.                                            |
+| [DEPRECIATED] onStep                | callback(TFormValues)                                                              | Called when a form step changed                                                                                                             |
+| [DEPRECIATED] onLog                 | callback(TLoggingEvent)                                                            | Called on each log, if the logging is enabled                                                                                               |
+| [DEPRECIATED] onScopeChange         | onScopeChange?(scope: TScope, namespace: string, key: string): void;               | Called everything scope change with the changing information (namespace and key) and the changed scope                                      |
+| onClick                             | onClick(TFormValues, TField)                                                       | Callback function that runs on each component click                                                                                         |
+| onApiResponse                       | onApiResponse(values: TFormValues, component?: TComponent, field?: TField)         | Callback function that runs on each component after api call.                                                                               |
+| [DEPRECIATED] onFieldRehydrate      | onFieldRehydrate?(values: TFormValues, component: TComponent, field: TField): void | This callback is called whenever some form field was rehydrated                                                                             |
+| [DEPRECIATED] renderLoading         | renderLoading?(): ReactElement;                                                    | Component to render while the schema has not rendered                                                                                       |
+| [DEPRECIATED] onFormMount           | onFormMount?(values: TFormValues): void;                                           | Called when the form finished mounted                                                                                                       |
+| [DEPRECIATED] formattedDataDefaults | Object                                                                             | Some default data to fields when they are undefined                                                                                         |
+| [DEPRECIATED] submitOnValidOnly     | boolean                                                                            | Boolean indicating if form can be submitted even if it is invalid                                                                           |
+| [DEPRECIATED] renderFieldWrapper    | renderFieldWrapper(component: TComponent, children: ReactElement[])                | Function that allows to insert a wrapper in place of a component or wrapping the component                                                  |
 
 ### Example
 
-In the following example `useForm` hooks are used to connect to multiple forms that are inside other components.
+A simple example of rendering a basic form
 
 ```javascript
-  useForm({
-    onSubmit: () => {
-      dispatch(
-        formData({
-          aggregate: true,
-        }),
-      );
-    },
-    id: 'main-form',
-  });
-  const { formData } = useFormGroup({
-    onSubmit: (data) => {
-      console.log('SUBMIT', data);
-    },
-    onData: (data) => {
-      console.log('-> ', data);
-    },
-    group: 'logical',
-  });
-
-  return (
-    <Form
-      id="1"
-      group="logical"
-      schema={...}
-    />
-    <Form
-      id="2"
-      group="logical"
-      schema={...}
-    />
-    <Form
-      id="main-form"
-      schema={...}
-    />
-  )
+<Form schema={schema} />
 ```
 
-The above example will connect to main-form with `useForm` and to a form group (logical) with `useFormGroup`
+## React `useForm()`
+
+Exposed hook that allows you to connect to any form by the formId in any part of the application, as long as you are inside the form context.
+
+## React `useFormGroup()` [DEPRECIATED]
+
+Similar to `useForm`
 
 ## React `asFormField()`
 
@@ -314,54 +337,83 @@ In the following example `asFormField` hooks are used to create `Component` fiel
         propsMapping: propsMapping.component,
       };
 
-  <FormProvider mapper={Mappings} propsMapping={formBuilderPropsMapping}>
+  <FormGroupContextProvider mapper={Mappings}>
     <FormComponent
       formId="test"
       label="Field example"
       name="ss"
-      filter={{ maxLength: 10 }}
-      masks={{
-        ON_FIELD_FOCUS: { cleanMask: true },
-        ON_FIELD_BLUR: {
-          generic: [
-            {
-              from: 1,
-              to: 2,
-              mask: 'X',
-            },
-            {
-              from: 4,
-              to: 5,
-              mask: 'X',
-            },
-          ],
-        },
-      }}
-      formatters={{
-        ON_FIELD_CHANGE: {
-          splitter: [
-            {
-              position: 2,
-              value: '/',
-            },
-            {
-              position: 5,
-              value: '/',
-            },
-          ],
-        },
-      }}
+      formatters={
+        splitter: [
+          {
+            position: 2,
+            value: '/',
+          },
+          {
+            position: 5,
+            value: '/',
+          },
+        ]
+      }
       validations={{
-        ON_FIELD_BLUR: {
+        config: {
           callback: (data) => {
             return {
               fail: data === '10/10/1000',
             };
           },
         },
+        events: ['ON_FIELD_BLUR']
       }}
-      errorMessages={{ default: 'ERRRO' }}
+      errorMessages={{ callback: 'ERRRO' }}
     />
-  </FormProvider>;
+  </FormGroupContextProvider>;
 }
 ```
+
+## React `AsFormFieldBuilder()`
+
+Extends the asFormField implementation with the addition of the prop formId and mapper and doesn't required the Form component to render a form field
+
+| Prop | Type | Description |
+|formIndex | string | index of the form to identity the form |
+|mapper | TMapper<ElementType> | same mapper used on the mapper context |
+
+```javascript
+<FormGroupContextProvider mapper={Mappings}>
+  <AsFormFieldBuilder
+    mapper={{
+      component: Input,
+      componentName: 'input',
+      events: {
+        getValue: 'onChange',
+        setValue: 'value',
+        setErrorMessage: 'errorMessage',
+        onBlur: 'onBlur',
+        onFocus: 'onFocus',
+        onKeyUp: 'onKeyUp',
+        onKeyDown: 'onKeyUpCapture',
+      },
+      valueChangeEvent: (event: unknown) => {
+        return (event as SyntheticEvent<HTMLInputElement>).currentTarget
+          .value;
+      },
+    }}
+    formIndex="form1"
+    name={`input1`}
+    props={{
+      label: '${"insert something"||${input1.value}}',
+      helperMessage: `\${input1.api.default.response}`,
+    }}
+    api={{
+      defaultConfig: {
+        config: {
+          method: 'GET',
+          url: 'https://api.chucknorris.io/jokes/random',
+          resultPath: 'value',
+        },
+        events: ['ON_FIELD_MOUNT'],
+      },
+    }}
+  />
+</FormGroupContextProvider>
+```

package/index.esm.js

@@ -1616,8 +1616,13 @@ $$1({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
-let context;
 const FormGroupContext = /*#__PURE__*/createContext({});
+/**
+ * context interface to be used isolated or with the context provider
+ *
+ * @param {TFormContextProvider} param context parameters
+ * @returns {TFormContext}
+ */
 const IsolatedContext = ({
   debugMode: _debugMode = false,
   mappers
@@ -1670,6 +1675,12 @@ const IsolatedContext = ({
   };
   return contextValue;
 };
+/**
+ * context provider to wrap form-engine adapter elements
+ *
+ * @param {PropsWithChildren<TFormContextProvider>} param context parameters
+ * @returns {ReactElement}
+ */
 const FormGroupContextProvider = ({
   children,
   mappers,
@@ -1691,9 +1702,15 @@ const FormGroupContextProvider = ({
     }), children]
   });
 };
+/**
+ * FormGroup context hook to handle context or isolated context implementations
+ *
+ * @param {TFormContextProvider} props form group context parameters
+ * @returns {TFormContext}
+ */
 const useFormGroupContext = props => {
-  context = useContext(FormGroupContext);
-  if (Object.keys(context).length === 0) {
+  const context = useContext(FormGroupContext);
+  if (Object.keys(context).length === 0 && props) {
     return IsolatedContext({
       debugMode: props.debugMode,
       mappers: props.mappers
@@ -1702,6 +1719,12 @@ const useFormGroupContext = props => {
   return context;
 };
 
+/**
+ * Renders the React element defined on the mappers configuration
+ *
+ * @param param component props, field instance and children to render
+ * @returns
+ */
 const FieldWrapperComponentRender = ({
   props,
   fieldInstance,
@@ -1722,6 +1745,13 @@ const FieldWrapperComponentRender = ({
     children: `failed to render field ${fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.name} with componentName:${(_c = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _c === void 0 ? void 0 : _c.componentName}, please check mappers`
   });
 };
+/**
+ * Base field Wrapper to render the component with the necessary configurations from the schema
+ * and mapper configuration
+ *
+ * @param {TFieldWrapperProps} param FieldWrapper params
+ * @returns {ReactElement}
+ */
 const FieldWrapper = ({
   name,
   formIndex,
@@ -1731,37 +1761,40 @@ const FieldWrapper = ({
 }) => {
   var _a;
   const localContext = useFormGroupContext({});
+  /**
+   * picks the right context prioritizing the context passed as prop
+   */
   const {
     formGroupInstance,
     debugMode
   } = useMemo(() => context ? context : localContext, [context, localContext]);
-  const fieldInstance = (_a = formGroupInstance.getForm({
+  const fieldInstance = useRef((_a = formGroupInstance.getForm({
     key: formIndex
   })) === null || _a === void 0 ? void 0 : _a.getField({
     key: name
-  });
-  const [valueState, setValueState] = useState(fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.stateValue);
+  })).current;
+  const [valueState, setValueState] = useState((fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.stateValue) || {});
   const [state, setState] = useState({
     visibility: (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.visibility) || true,
-    props: (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.props) || props,
-    apiResponse: fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.api
+    props: (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.props) || props
   });
+  /**
+   * handles the mounting and unmounting logic onto the field instance
+   */
   useEffect(() => {
     fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mountField({
       valueSubscription: value => {
         setValueState(value);
       },
       propsSubscription: ({
-        errors,
         visibility,
-        apiResponse,
-        props
+        props,
+        errors
       }) => {
         setState(prev => Object.assign(Object.assign({}, prev), {
-          errors,
           visibility,
-          apiResponse,
-          props
+          props,
+          errors
         }));
       }
     });
@@ -1769,17 +1802,27 @@ const FieldWrapper = ({
       fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.destroyField();
     };
   }, []);
+  /**
+   * handles the value change onto the field instance
+   */
   const handleChange = useCallback(event => {
     fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.emitValue({
       value: event,
       event: 'ON_FIELD_CHANGE'
     });
   }, []);
+  /**
+   * handles the event emission onto the field instance
+   */
   const handleEvent = useCallback(event => {
     fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.emitEvents({
       event
     });
   }, []);
+  /**
+   * handles the mappers configuration to bind the event submission callback
+   * to the corresponding prop defined on the mappers
+   */
   const mapProps = useMemo(() => {
     var _a;
     const events = (_a = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _a === void 0 ? void 0 : _a.events;
@@ -1792,13 +1835,6 @@ const FieldWrapper = ({
     if (events === null || events === void 0 ? void 0 : events.onKeyDown) props[events.onKeyDown] = () => handleEvent('ON_FIELD_KEYDOWN');
     return props;
   }, []);
-  const mapValue = useMemo(() => {
-    var _a;
-    const events = (_a = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _a === void 0 ? void 0 : _a.events;
-    return (events === null || events === void 0 ? void 0 : events.setValue) ? {
-      [events.setValue]: valueState
-    } : {};
-  }, [valueState]);
   return (state === null || state === void 0 ? void 0 : state.visibility) ? jsxs(Fragment, {
     children: [debugMode && jsxs(Fragment, {
       children: [jsx("b", {
@@ -1809,13 +1845,22 @@ const FieldWrapper = ({
         children: name
       }), jsx("br", {}), jsx("hr", {})]
     }), jsx(FieldWrapperComponentRender, {
-      props: Object.assign(Object.assign(Object.assign({}, mapProps), state.props), mapValue),
+      props: Object.assign(Object.assign(Object.assign(Object.assign({}, mapProps), state.props), state.errors), valueState),
       fieldInstance: fieldInstance,
       children: children && children
     })]
   }) : jsx(Fragment, {});
 };
 
+/**
+ * recursive function to transform form fields from a form instance into
+ * a react component tree
+ *
+ * @param {Map<string,IFormField>} param.fields form instance field Map
+ * @param {string} param.prevPath previous field path to track the tree branch creation
+ * @param {string} param.formIndex form index to aid field identification onto the FieldWrapper
+ * @returns {ReactNode}
+ */
 const BuildTree = ({
   fields,
   prevPath,
@@ -1838,6 +1883,12 @@ const BuildTree = ({
     }, fieldName);
   });
 };
+/**
+ * function to transform AsFormField elements onto a JSON schema
+ *
+ * @param param.children ReactNode children elements
+ * @returns {IComponentSchema[] | null | undefined}
+ */
 const BuildAsFormFieldTree = ({
   children
 }) => {
@@ -1890,6 +1941,9 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+/**
+ * events mapping to aid function callback binding
+ */
 const eventsMapping = {
   ON_FIELD_CHANGE: 'onChange',
   ON_FIELD_BLUR: 'onBlur',
@@ -1901,6 +1955,9 @@ const eventsMapping = {
   ON_FIELD_CLICK: 'onClick'
 };
 
+/**
+ * Hook to register events callback functions
+ */
 const useForm = _a => {
   var {
       id
@@ -1909,10 +1966,18 @@ const useForm = _a => {
   const {
     formGroupInstance
   } = useFormGroupContext({});
+  /**
+   * reference to store all updated callback functions rerendered by props change
+   */
   const callbackRefs = useRef(rest);
   useEffect(() => {
     callbackRefs.current = rest;
   }, [rest]);
+  /**
+   * handle function call after the debounce occurs on the form instance field event
+   * subject in order to call the most updated function with the updated function
+   * reference to avoid events get outdated values
+   */
   useEffect(() => {
     var _a;
     const callback = payload => {
@@ -1932,6 +1997,11 @@ const useForm = _a => {
   return;
 };
 
+/**
+ *
+ * @param {TFormProps} param form properties initializor
+ * @returns {ReactElement}
+ */
 const Form = ({
   schema,
   index,
@@ -1960,6 +2030,9 @@ const Form = ({
   } = useFormGroupContext({});
   const [tree, setTree] = useState();
   const schemaIndex = useMemo(() => index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange', [index, schema]);
+  /**
+   * logic to initialize the form instance and it's removal
+   */
   useEffect(() => {
     if (schemaIndex === 'defaultChange') {
       console.warn('please, add an unique id to the form, otherwise multiple forms will break');
@@ -1988,6 +2061,11 @@ const Form = ({
       });
     };
   }, []);
+  /**
+   * logic to transform AsFormFields onto JSON schema
+   * and JSON schema onto FieldWrappers, refreshes when
+   * the react tree changes it's children
+   */
   useEffect(() => {
     var _a;
     const schema = BuildAsFormFieldTree({
@@ -2007,11 +2085,17 @@ const Form = ({
       setTree(buildTree);
     }
   }, [children]);
+  /**
+   * iVars change tracker to update iVars onto form instance
+   */
   useEffect(() => {
     if (iVars) getForm({
       key: index
     }).iVars = iVars;
   }, [iVars]);
+  /**
+   * hook usage to keep event bindings updated on callback functions passed as props
+   */
   useForm({
     id: schemaIndex,
     onApiResponse,
@@ -2066,10 +2150,17 @@ const Form = ({
   });
 };
 
+/**
+ * Component wrapper to aid building schemas with react without writting a JSON schema
+ * along with BuildAsFormFieldTree inside a Form component, FieldWrapper gets this props
+ * to build the component as it does with a JSON schema, this component only works inside
+ * the Form component
+ *
+ * @param {TAsFormFieldProps} props JSON schema props
+ * @returns {ReactNode}
+ */
 const AsFormField = props => {
-  return jsx(Fragment, {
-    children: props.children
-  });
+  return props.children;
 };
 
 var wellKnownSymbol$1 = wellKnownSymbol$8;
@@ -2318,9 +2409,24 @@ $({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
   exec: exec
 });
 
+/**
+ * Component Wrapper to render form fields without the Form component, gets additional formId and mapper since
+ * it won't rely on them and needs to be manually declared
+ *
+ * @param {TAsFormFieldBuilderProps} props JSON schema props along with FieldWrapper props and mapper props
+ * @returns {ReactElement}
+ */
 const AsFormFieldBuilder = props => {
   const context = useFormGroupContext({});
+  /**
+   * state to track the field instance creation process
+   */
   const [mounted, setMounted] = useState(false);
+  /**
+   * initializer to create or add a form instance to the formGroup by it's formId
+   * and add the field to the form instance
+   * Also has the logic to remove it once this element is removed
+   */
   useEffect(() => {
     var _a;
     if (!((_a = context.formGroupInstance) === null || _a === void 0 ? void 0 : _a.forms.has(props.formIndex))) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.0-beta.16",
+  "version": "3.0.0-beta.17",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
-    "@bolttech/form-engine-core": "0.0.1-beta.7",
+    "@bolttech/form-engine-core": "0.0.1-beta.8",
     "react": "18.2.0"
   },
   "peerDependencies": {}

package/src/components/AsFormField/AsFormField.d.ts

@@ -1,4 +1,13 @@
-import { IComponentSchema } from '@bolttech/form-engine-core';
-import { PropsWithChildren, ReactElement } from 'react';
-declare const AsFormField: (props: PropsWithChildren<Omit<IComponentSchema, 'children'>>) => ReactElement;
+import { ReactNode } from 'react';
+import { TAsFormFieldProps } from './AsFormField.type';
+/**
+ * Component wrapper to aid building schemas with react without writting a JSON schema
+ * along with BuildAsFormFieldTree inside a Form component, FieldWrapper gets this props
+ * to build the component as it does with a JSON schema, this component only works inside
+ * the Form component
+ *
+ * @param {TAsFormFieldProps} props JSON schema props
+ * @returns {ReactNode}
+ */
+declare const AsFormField: (props: TAsFormFieldProps) => ReactNode;
 export default AsFormField;

package/src/components/AsFormField/AsFormField.type.d.ts

@@ -0,0 +1,9 @@
+import { IComponentSchema } from '@bolttech/form-engine-core';
+import { PropsWithChildren } from 'react';
+/**
+ * AsFormField props, inherits all schema field implementation except the children
+ * property, that will be a ReactNode
+ * @see {@link IComponentSchema}
+ */
+type TAsFormFieldProps = PropsWithChildren<Omit<IComponentSchema, 'children'>>;
+export type { TAsFormFieldProps };

package/src/components/AsFormFieldBuilder/AsFormFieldBuilder.d.ts

@@ -1,7 +1,11 @@
-import { IComponentSchema, TMapper } from '@bolttech/form-engine-core';
-import { ElementType, PropsWithChildren, ReactElement } from 'react';
-import { TFieldWrapper } from '../../types';
-declare const AsFormFieldBuilder: (props: PropsWithChildren<Omit<IComponentSchema, 'children' | 'component'> & Required<TFieldWrapper> & {
-    mapper: TMapper<ElementType>;
-}>) => ReactElement;
+import { ReactElement } from 'react';
+import { TAsFormFieldBuilderProps } from './AsFormFieldBuilder.type';
+/**
+ * Component Wrapper to render form fields without the Form component, gets additional formId and mapper since
+ * it won't rely on them and needs to be manually declared
+ *
+ * @param {TAsFormFieldBuilderProps} props JSON schema props along with FieldWrapper props and mapper props
+ * @returns {ReactElement}
+ */
+declare const AsFormFieldBuilder: (props: TAsFormFieldBuilderProps) => ReactElement;
 export default AsFormFieldBuilder;

package/src/components/AsFormFieldBuilder/AsFormFieldBuilder.type.d.ts

@@ -0,0 +1,16 @@
+import { IComponentSchema, TMapper } from '@bolttech/form-engine-core';
+import { ElementType, PropsWithChildren } from 'react';
+import { TFieldWrapper } from '../../types';
+/**
+ * AsFormField props, inherits all schema field implementation except the children
+ * property, that will be a ReactNode
+ * also gets the formIndex for form identification and the mapper to build the component
+ * @property {TMapper} mapper element mapper to use
+ * @see {@link TMapper}
+ * @see {@link IComponentSchema}
+ * @see {@link TFieldWrapper}
+ */
+type TAsFormFieldBuilderProps = PropsWithChildren<Omit<IComponentSchema, 'children' | 'component' | 'name'> & Required<TFieldWrapper> & {
+    mapper: TMapper<ElementType>;
+}>;
+export type { TAsFormFieldBuilderProps };

package/src/components/FieldWrapper/FieldWrapper.d.ts

@@ -1,9 +1,11 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { TFormContext } from '../../context/FormGroupContext';
-import { TFieldWrapper } from '../../types';
-declare const FieldWrapper: ({ name, formIndex, children, props, context, }: PropsWithChildren<TFieldWrapper & {
-    name: string;
-    props?: Record<string, unknown> | undefined;
-    context?: TFormContext | null | undefined;
-}>) => ReactElement;
+import { ReactElement } from 'react';
+import { TFieldWrapperProps } from './FieldWrapper.type';
+/**
+ * Base field Wrapper to render the component with the necessary configurations from the schema
+ * and mapper configuration
+ *
+ * @param {TFieldWrapperProps} param FieldWrapper params
+ * @returns {ReactElement}
+ */
+declare const FieldWrapper: ({ name, formIndex, children, props, context, }: TFieldWrapperProps) => ReactElement;
 export default FieldWrapper;

package/src/components/FieldWrapper/FieldWrapper.type.d.ts

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react';
+import { TFieldWrapper } from '../../types';
+import { TFormContext } from '../../context/FormGroupContext';
+import { FormField } from '@bolttech/form-engine-core';
+/**
+ * Represents the props for a field wrapper component, including children.
+ *
+ * @property {Record<string, unknown>} [props] - Additional properties for the field.
+ * @property {TFormContext | null} [context] - The context of the form, which may be null.
+ * @property {React.ReactNode} children - The child elements of the component.
+ * @see {@link TFieldWrapper}
+ */
+type TFieldWrapperProps = PropsWithChildren<TFieldWrapper & {
+    props?: Record<string, unknown>;
+    context?: TFormContext | null;
+}>;
+/**
+ * Represents the props for rendering a field wrapper component, including children.
+ *
+ * @property {Record<string, unknown>} props - Additional properties for the field.
+ * @property {FormField} [fieldInstance] - The instance of the form field, which may be undefined.
+ * @property {React.ReactNode} children - The child elements of the component.
+ */
+type TFieldWrapperComponentRenderProps = PropsWithChildren<{
+    props: Record<string, unknown>;
+    fieldInstance?: FormField;
+}>;
+export type { TFieldWrapperProps, TFieldWrapperComponentRenderProps };

package/src/components/Form/Form.d.ts

@@ -1,5 +1,9 @@
-import { TFormEntry } from '@bolttech/form-engine-core';
-import { PropsWithChildren } from 'react';
-import { TEventsCallbackProps } from '../../types';
-declare const Form: ({ schema, index, initialValues, iVars, action, method, onSubmit, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, children, }: PropsWithChildren<Omit<TFormEntry, 'mappers'> & TEventsCallbackProps>) => import("react/jsx-runtime").JSX.Element;
+import { ReactElement } from 'react';
+import { TFormProps } from './Form.type';
+/**
+ *
+ * @param {TFormProps} param form properties initializor
+ * @returns {ReactElement}
+ */
+declare const Form: ({ schema, index, initialValues, iVars, action, method, onSubmit, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, children, }: TFormProps) => ReactElement;
 export default Form;

package/src/components/Form/Form.type.d.ts

@@ -0,0 +1,11 @@
+import { TFormEntry } from '@bolttech/form-engine-core';
+import { PropsWithChildren } from 'react';
+import { TEventsCallbackProps } from '../../types';
+/**
+ * Form props, inherits the form instance constructor implementation except the mapper
+ * along with all event callback register props shared with other implementations
+ * @see {@link TFormEntry}
+ * @see {@link TEventsCallbackProps}
+ */
+type TFormProps = PropsWithChildren<Omit<TFormEntry, 'mappers'> & TEventsCallbackProps>;
+export type { TFormProps };

package/src/context/FormGroupContext.d.ts

@@ -1,30 +1,19 @@
-import { FormCore, TFormCore, TFormGroup, TFormValues, TMapper } from '@bolttech/form-engine-core';
-import { ElementType, PropsWithChildren, ReactElement } from 'react';
-type TFormContext = {
-    addFormWithIndex: (index: string) => void;
-    addForm: (payload: {
-        key: string;
-        formInstance: TFormCore;
-    }) => void;
-    getForm: (payload: {
-        key: string;
-    }) => FormCore | undefined;
-    removeForm: (payload: {
-        key: string;
-    }) => void;
-    formGroupInstance: TFormGroup;
-    mappers?: TMapper<ElementType>[];
-    printFormGroupInstance: () => void;
-    submitMultipleFormsByIndex: (indexes: string[]) => TFormValues;
-    debugMode: boolean;
-    active: boolean;
-};
-type TFormContextProvider = {
-    mappers?: TMapper<ElementType>[];
-    debugMode?: boolean;
-};
+import { PropsWithChildren, ReactElement } from 'react';
+import { TFormContext, TFormContextProvider } from './FormGroupContext.type';
 declare const FormGroupContext: import("react").Context<TFormContext>;
+/**
+ * context provider to wrap form-engine adapter elements
+ *
+ * @param {PropsWithChildren<TFormContextProvider>} param context parameters
+ * @returns {ReactElement}
+ */
 declare const FormGroupContextProvider: ({ children, mappers, debugMode, }: PropsWithChildren<TFormContextProvider>) => ReactElement;
-declare const useFormGroupContext: (props: TFormContextProvider) => TFormContext;
+/**
+ * FormGroup context hook to handle context or isolated context implementations
+ *
+ * @param {TFormContextProvider} props form group context parameters
+ * @returns {TFormContext}
+ */
+declare const useFormGroupContext: (props?: TFormContextProvider) => TFormContext;
 export { FormGroupContext, FormGroupContextProvider, useFormGroupContext };
 export type { TFormContext };

package/src/context/FormGroupContext.type.d.ts

@@ -0,0 +1,46 @@
+import { FormCore, TFormCore, TFormGroup, TFormValues, TMapper } from '@bolttech/form-engine-core';
+import { ElementType } from 'react';
+/**
+ * Represents the context for managing forms within a form group.
+ *
+ * @property {function(string): void} addFormWithIndex - Adds a form to the form group by its index.
+ * @property {function({ key: string, formInstance: TFormCore }): void} addForm - Adds a form to the form group using a payload containing the key and form instance.
+ * @property {function({ key: string }): (FormCore | undefined)} getForm - Retrieves a form from the form group using a payload containing the key.
+ * @property {function({ key: string }): void} removeForm - Removes a form from the form group using a payload containing the key.
+ * @property {TFormGroup} formGroupInstance - The instance of the form group.
+ * @property {TMapper<ElementType>[]} [mappers] - Optional array of mappers for elements.
+ * @property {function(): void} printFormGroupInstance - Prints the form group instance.
+ * @property {function(string[]): TFormValues} submitMultipleFormsByIndex - Submits multiple forms by their indexes and returns the form values.
+ * @property {boolean} debugMode - Indicates if debug mode is active.
+ * @property {boolean} active - Indicates if the form context is active.
+ */
+type TFormContext = {
+    addFormWithIndex: (index: string) => void;
+    addForm: (payload: {
+        key: string;
+        formInstance: TFormCore;
+    }) => void;
+    getForm: (payload: {
+        key: string;
+    }) => FormCore | undefined;
+    removeForm: (payload: {
+        key: string;
+    }) => void;
+    formGroupInstance: TFormGroup;
+    mappers?: TMapper<ElementType>[];
+    printFormGroupInstance: () => void;
+    submitMultipleFormsByIndex: <T>(indexes: string[]) => TFormValues<T>;
+    debugMode: boolean;
+    active: boolean;
+};
+/**
+ * Represents the props for a form context provider.
+ *
+ * @property {TMapper<ElementType>[]} [mappers] - Optional array of mappers for elements.
+ * @property {boolean} [debugMode] - Optional flag indicating if debug mode should be enabled.
+ */
+type TFormContextProvider = {
+    mappers?: TMapper<ElementType>[];
+    debugMode?: boolean;
+};
+export type { TFormContext, TFormContextProvider };

package/src/generators/formBuilder.d.ts

@@ -1,10 +1,25 @@
 import { ReactNode } from 'react';
 import { IFormField, IComponentSchema } from '@bolttech/form-engine-core';
+/**
+ * recursive function to transform form fields from a form instance into
+ * a react component tree
+ *
+ * @param {Map<string,IFormField>} param.fields form instance field Map
+ * @param {string} param.prevPath previous field path to track the tree branch creation
+ * @param {string} param.formIndex form index to aid field identification onto the FieldWrapper
+ * @returns {ReactNode}
+ */
 declare const BuildTree: ({ fields, prevPath, formIndex, }: {
     fields: Map<string, IFormField>;
     prevPath?: string | undefined;
     formIndex: string;
 }) => ReactNode;
+/**
+ * function to transform AsFormField elements onto a JSON schema
+ *
+ * @param param.children ReactNode children elements
+ * @returns {IComponentSchema[] | null | undefined}
+ */
 declare const BuildAsFormFieldTree: ({ children, }: {
     children?: ReactNode;
 }) => IComponentSchema[] | null | undefined;

package/src/helpers/helpers.d.ts

@@ -1,4 +1,7 @@
 import { TEvents } from '@bolttech/form-engine-core';
-import { eventProps } from '../types';
-declare const eventsMapping: Partial<Record<TEvents, eventProps>>;
+import { TEventProps } from '../types';
+/**
+ * events mapping to aid function callback binding
+ */
+declare const eventsMapping: Partial<Record<TEvents, TEventProps>>;
 export { eventsMapping };

package/src/hooks/useForm.d.ts

@@ -1,6 +1,6 @@
-import { TEventsCallbackProps } from '../types';
-import { TFieldEvent } from '@bolttech/form-engine-core';
-declare const useForm: ({ id, ...rest }: {
-    id: string;
-} & Partial<Record<import("../types").eventProps, ((payload: TFieldEvent) => void) | null | undefined>>) => void;
+import { TUseFormProps } from './useForm.type';
+/**
+ * Hook to register events callback functions
+ */
+declare const useForm: ({ id, ...rest }: TUseFormProps) => void;
 export default useForm;

package/src/hooks/useForm.type.d.ts

@@ -0,0 +1,12 @@
+import { TEventsCallbackProps } from '../types';
+/**
+ * Represents the properties for the useForm hook, including an ID and event callback properties.
+ *
+ * @property {string} id - The unique identifier for the form.
+ *
+ * @see {@link TEventsCallbackProps}
+ */
+type TUseFormProps = {
+    id: string;
+} & TEventsCallbackProps;
+export type { TUseFormProps };

package/src/types/index.d.ts

@@ -1,46 +1,20 @@
 import { TFieldEvent } from '@bolttech/form-engine-core';
 /**
- * @type TFieldWrapper
- * Represents the wrapper for a form field, including the component,
- * event handlers, and other properties related to form management.
+ * Represents a field wrapper containing the name of the field and its index in the form.
  *
- * @property {string} index - The index of the field in the form.
- * @property {ElementType} Component - The component to be rendered.
- * @property {(event: unknown) => unknown} [valueChangeEvent] - Function to handle value change events.
- * @property {string} formKey - The key of the form.
- * @property {string} [onBlur] - Function to handle the blur event.
- * @property {string} [onChange] - Function to handle the change event.
- * @property {string} [onFocus] - Function to handle the focus event.
- * @property {string} [onClick] - Function to handle the click event.
- * @property {string} [onKeyUp] - Function to handle the keyup event.
- * @property {string} [onKeyDown] - Function to handle the keydown event.
- * @property {unknown} [onValue] - The current value of the field.
- * @property {string} [onErrorMessage] - error message prop name to set message string
- *
- * @example
- * ```typescript
- * const fieldWrapper: TFieldWrapper = {
- *   index: '1',
- *   Component: MyComponent,
- *   valueChangeEvent: (event) => {
- *     const newValue = (event as React.ChangeEvent<HTMLInputElement>).target.value;
- *     return newValue;
- *   },
- *   formKey: 'myForm',
- *   onBlur: 'handleBlur',
- *   onChange: 'handleChange',
- *   onFocus: 'handleFocus',
- *   onClick: 'handleClick',
- *   onKeyUp: 'handleKeyUp',
- *   onKeyDown: 'handleKeyDown',
- *   onValue: 'value'
- * };
- * ```
+ * @property {string} name - The name of the field.
+ * @property {string} formIndex - The index of the field within the form.
  */
 type TFieldWrapper = {
     name: string;
     formIndex: string;
 };
-type eventProps = 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onMount' | 'onApiResponse' | 'onClick';
-type TEventsCallbackProps = Partial<Record<eventProps, ((payload: TFieldEvent) => void) | null | undefined>>;
-export { TFieldWrapper, eventProps, TEventsCallbackProps };
+/**
+ * Represents the possible event properties for form fields callbacks.
+ */
+type TEventProps = 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onMount' | 'onApiResponse' | 'onClick' | 'onSubmit';
+/**
+* Represents a mapping of event properties to their corresponding callback functions.
+*/
+type TEventsCallbackProps = Partial<Record<TEventProps, ((payload: TFieldEvent) => void) | null | undefined>>;
+export { TFieldWrapper, TEventProps, TEventsCallbackProps };