@bolttech/form-engine-core 0.0.2-beta.5 → 0.0.2-beta.6

package/README.md

@@ -1,1620 +1,458 @@
 # Form Engine Core
 
-Achieve form logic re-usage with forms expressed in json format.
-
----
-
-1. [Basic setup](#markdown-header-basic-setup)
-2. [Step by step](#markdown-header-step-by-step)
-3. [Form Features](#markdown-header-available-features)
-
-- 3.1. [Validations - Allow form to run validations in the field](#markdown-header-validations)
-  - 3.1.1. [Named Validations](#markdown-header-validations)
-  - 3.1.2. [Error Messages](#markdown-header-validations)
-  - 3.1.3. [Available Validations](#markdown-header-validations)
-- 3.2. [Filters - Allow only what you want in the field](#markdown-header-filters)
-  - 3.2.1. [Available formatters](#markdown-header-formatters)
-- 3.3. [Formatters - Style your field value with formatters](#markdown-header-formatters)
-- 3.4. [Masks - Modify the field value, while maintaining the original with masks](#markdown-header-masks)
-  - 3.4.1. [Available Masks](#markdown-header-formatters)
-- 3.5. [Visibility conditions - Configure when to show hide/components](#markdown-header-visibility-conditions)
-- 3.6. [Clear fields](#markdown-header-clear-fields)
-- 3.7. [Api - Make api calls on certain form events](#markdown-header-api)
-- 3.8. [Data binding - Allow to have dynamic data in the form, binding and subscribing to form changes](#markdown-header-data-binding)
-  - 3.8.1. [Scopes](#markdown-header-scope)
-  - 3.8.2. [Templates](#markdown-header-templates)
-  - 3.8.3. [varOps](#markdown-header-varops)
-  - 3.8.4. [Direct Fields Binding](#markdown-header-direct-fields-binding)
-- 3.9. [State - Define component state](#markdown-header-state)
-- 3.10. [Group](#markdown-header-group)
-- 3.11. [Steps](#markdown-header-form-step)
-
-## **Basic setup**
-
-Serve your forms in JSON to your frontend, and allow it to be agnostic of your forms logic.
-
-3 simple steps
-
-1. Map your components to the form (Section - Build your mappers)
-2. Build json schema
-3. Use it
-
-**1. BUILD MAPPERS**
+Development maintenance documentation
 
-```javascript
-import Input from 'Components/Input';
-import Other from 'Components/Other';
-
-const Mappings = {
-  input: { component: Input },
-  other: { component: Other },
-};
-
-const formBuilderPropsMapping = {
-  //default prop names
-  __default__: {
-    getValue: 'onChange',
-    setValue: 'value',
-  },
-  //component specific prop names
-  other: {
-    getValue: 'onChangeCallback',
-    setValue: 'data',
-    setErrorMessage: 'errorMessageArray',
-    setErrorState: 'isErrored',
-    onBlur: 'onBlurCallback',
-    onFocus: 'onFocusCallback',
-    onKeyUp: 'onKeyUpCallback',
-    onKeyDown: 'onKeyDownCallback',
-  },
-};
-
-export { Mappings, formBuilderPropsMapping };
-```
-
-**2. BUILD SCHEMA**
-
-```json
-{
-  "components": [
-    {
-      "component": "",
-      "name": "",
-      "children": [
-        {
-          "component": "${componentName}",
-          "name": "${componentFormName}",
-          "props": {
-            "fullWidth": true
-          }
-        }
-      ]
-    }
-  ]
-}
-```
-
-**USE IT (React version)**
-
-```javascript
-import { Mappings, formBuilderPropsMapping } from './my-component-mappings';
-import { getFormSchema } from './my-api-wrapper';
-...
-const schema = useMemo(() => getFormSchema('myInstanceContext'), []);
-
-...
-<Form mappings={Mappings} propsMappings={formBuilderPropsMapping} schema={schema}>
-```
-
-Nexts steps ? Checkout what you can do in the storybook with `npm run storybook` or see the best effort readme :(
-
-## **Step by step**
-
-### Build your mappers
-
-The form uses mappings to connect to UI components so that its easy to connect to any set of components.
-
-You can build your own mappings file or you can use the `bolttech` and if you want extend it with your set of components.
-
-In the mappings file you need to specify the component definition and a name to refer in the JSON's latter, and how the form will connect to component props.
-
-See this example
-
-```javascript
-import Input from '@bit/bolttech.components.ui.input';
-import Checkbox from '@bit/bolttech.components.ui.checkbox';
-import FormGroup from '@bit/bolttech.components.common.form-group';
-
-const Mappings = {
-  input: { component: Input },
-  checkbox: { component: Checkbox },
-  formGroup: { component: FormGroup },
-};
-
-const formBuilderPropsMapping = {
-  input: {
-    getValue: 'onChange',
-    setValue: 'value',
-    setErrorMessage: 'errorMessage',
-    setErrorState: 'isErrored',
-    onBlur: 'onBlur',
-    onFocus: 'onFocus',
-    onKeyUp: 'onKeyUp',
-    onKeyDown: 'onKeyDown',
-  },
-  checkbox: {
-    getValue: 'onChange',
-    setValue: 'checked',
-  },
-};
-
-export { Mappings, formBuilderPropsMapping };
-```
+1. [Arquitecture Overview](#arquitecture-overview)
 
-Here you say to the form that you can use in your JSON the names `input`, `checkbox` and `formGroup` and you tell the form how to get the props it needs from them.
+- 1.1 [FormGroup responsability](#formgroup-responsability)
+- 1.2 [FormCore responsability](#formcore-responsability)
+- 1.3 [FormField responsability](#formfield-responsability)
 
-If you have lots of components with the same prop names, you can, and should use `__default__` key. This key allows to reuse prop names.
+2. [Changing private field class properties implementation](#changing-private-field-class-properties-implementation)
+3. [Value change Rules](#value-change-rules)
+4. [Props change and visibility rules](#props-change-and-visibility-rules)
+5. [Error messages display](#error-messages-display)
+6. [subject dependencies](#subject-dependencies)
 
-Lets say 10 components use to `value` prop name to set the component value, and `onChange` prop name to expose value. You van set your mapper the following way
+- 6.1 [field](#field)
+- 6.1.1 [templateSubject$](#templatesubject)
+- 6.1.2 [fieldEventSubject$](#fieldeventsubject)
+- 6.1.3 [dataSubject$](#datasubject)
+- 6.1.4 [formValidNotification$](#formvalidnotification)
 
-```javascript
-import Input from '@bit/bolttech.components.ui.input';
-import Checkbox from '@bit/bolttech.components.ui.checkbox';
+7. [build fields with a schema](#build-fields-with-a-schema)
 
-const Mappings = {
-  input: { component: Input },
-  checkbox: { component: Checkbox },
-};
+- 7.1 [fields](#fields)
+- 7.2 [templates](#templates)
 
-const formBuilderPropsMapping = {
-  __default____: {
-    getValue: 'onChange',
-    setValue: 'value',
-  },
-  checkbox: {
-    getValue: 'onChange',
-    setValue: 'checked',
-  },
-};
+8. [build fields without schema](#build-fields-without-schema)
+9. [form group event callback register](#form-group-event-callback-register)
 
-export { Mappings, formBuilderPropsMapping };
-```
+- 9.1 [form group onData](#form-group-ondata)
+- 9.2 [form group onValid](#form-group-onvalid)
 
-### Setup Form provider
+<a id="arquitecture-overview"></a>
 
-After setting your own mappings you encapsulate your app of your form with the provider
+## Arquitecture Overview
 
-```javascript
-<FormProvider mapper={Mappings} propsMapping={formBuilderPropsMapping}>
-  {children}
-</FormProvider>
-```
+![form-engine general arquitecture](./devdocs/assets/generic_arquitecture.png)
 
-**DONE. NOW build your forms**
+Form-engine basic arquitecture is class based, composed by FormGroup, Form and Field classes and the communication is Observable Based in order to feed the adapters that will be the responsible to emit and recieve the reactive manipulations configured on the schema.
 
-## **Form Features**
+Each class is independent from bottom to top, meaning that you can instanciate a Field independently, but a Form relies on Fields to work, because a Form class manages Fields that interact with each others, same as FormGroup that relies on Forms in order to work.
 
-Inside the schema you can specify several actions for a field alone or that correlate and have side-effects between them.
+FormGroup manages forms stored as a Map of key/value, same with Form that stores fields as a Map of key/value.
 
-Those actions support multiple lifecycle and this must be on an action item basis:
+<a id="formgroup-responsability"></a>
 
-- ON_FIELD_MOUNT
-- ON_FIELD_CHANGE
-- ON_FIELD_BLUR
-- ON_FIELD_FOCUS
-- ON_FIELD_KEYUP
-- ON_FIELD_KEYDOWN
-- ON_FIELD_CLICK
-- ON_FIELD_CLEARED
-- ON_FIELD_BINDED
-- AFTER_FIELD_API_CALL
+### FormGroup responsability
 
-All the actions are typed, so you will have help here seeing which lifecycles you have available
+- manage the add and removal of forms by it's key
+- manage data inserted by user onto forms to provide callbacks to the adapter
+- manage validity of forms to provide callbacks to the adapter
+- work is in progress to check which functionalities it needs
 
-Per action, you will be able to combine multiple lifecycle methods
+<a id="formcore-responsability"></a>
 
-All the following features can be inserted in the same location on the schema
+### FormCore responsability
 
-```json
-{
-  "component": "input",
-  "name": "fieldName",
-  "props": {
-    "label": "My field"
-  }
-  //...your feature goes here
-}
-```
+- manage the add and removal of fields by it's key
+- manage visibility of fields based on schema configuration
+- manage resetValues based on schema configuration
+- manage templating properties change emitted across fields
+- manage component configuration based on mapper list config
+- manage callback subscription on events emmited by fields (adapter external actions trigger)
+- manage form values submission and validity check
 
-## **Validations**
+<a id="formfield-responsability"></a>
 
-Like the name say, this feature lets you validate the form in the several lifecycle events of the form.
+### FormField responsability
 
-```json
-{
-  "validations": {
-    "ON_FIELD_BLUR": {
-      "email": true
-    },
-    "ON_FIELD_CHANGE": {
-      "required": true
-    }
-  }
-}
-```
+- manage storage and emission of properties such as validations, value, error messages
+- manage api schema configurations for requests
+- manage initialization of adapters external configuration binding generalization
 
-The above example will let form know that in each change the field must have something in it, and that on blur, the value must be a email.
+<a id="changing-private-field-class-properties-implementation"></a>
 
-### Named validations
+## Changing private field class properties implementation
 
-There are cases where you want to build your own validation, agregating several of giving it a specific name that you can refer later
+On the process of implementation, it's crucial to understand that the reactivity of the form relies on **RXJS**, the way this properties change can cause side effects on other properties and all are managed by **RXJS** subjects, so for all this class properties, each time they change, they need to emit to the corresponding subject, so all this properties have a subject emmited on the end.
 
-```json
-{
-  "validations": {
-    "ON_FIELD_BLUR": {
-      "blurRequire": {
-        "require": true
-      }
-    },
-    "ON_FIELD_CHANGE": {
-      "email": true,
-      "changeRequire": {
-        "require": true
-      },
-      "changeRestOfValidations": {
-        "length": 50
-        //...
-      }
-    }
-  }
-}
-```
+If you work in any maintenance involving this properties:
 
-### Error Messages
-
-You can also specify the error messages you want.
-
-```json
-{
-  "validations": {
-    "methods": {
-      "require": true,
-      "email": true
-    },
-    "eventMessages": {
-      "ON_FIELD_BLUR": ["required"],
-      "ON_FIELD_CHANGE": ["email"]
-    },
-    "messages": {
-      "default": "Default error message",
-      "email": "Invalid e-mail"
-    }
-  }
-}
-```
-
-This schema part, will add messages to validations error.
-
-- Each time the field has an e-mail error it will send the "Invalid e-mail" message to the component
-- If there is and field error, but no message is specified, it will send what you have in `default` key. In this example, `required` error does not have message and will send "Default error message"
-
-**With named validations**
-
-If you have a named validation, you can use its name in the error messages, having better granularity on it.
-
-```json
-{
-  "validations": {
-    "methods": {
-      "blurRequire": {
-        "require": true
-      },
-      "email": true,
-      "changeRequire": {
-        "require": true
-      },
-      "changeRestOfValidations": {
-        "length": 50
-      }
-    },
-    "eventMessages": {
-      "ON_FIELD_BLUR": ["blurRequire"],
-      "ON_FIELD_CHANGE": ["email", "changeRequire", "changeRestOfValidations"]
-    },
-    "messages": {
-      "default": "Default error message",
-      "email": "Invalid e-mail",
-      "blurRequire": "When you blur, this component is required",
-      "changeRequire": "You should not leave the field blank",
-      "changeRestOfValidations": "You are changing into an incorrect state"
-    }
-  }
-}
-```
-
-### Available validations (TBD)
-
-Refer to the `TAvailableValidations` types here:
-
-````typescript
-{
-  /**
-   * The bool function is a validation function that checks if a given value indicating whether the validation has failed or not.
-   *
-   * @example - in a test environment
-   * ```
-   * const result = bool({
-   *   validationValue: false,
-   * });
-   * console.log(result); // { fail: false }
-   * ```
-   *
-   * @example - real json usage with field value
-   * ```
-   * {
-   *   validations: {
-   *      bool: '${fields.input.value}'
-   *   },
-   * },
-   * ```
-   *
-   * @example - real json usage with iVar value
-   * ```
-   * {
-   *   validations: {
-   *      bool: '${global.validation}'
-   *   },
-   * },
-   * ```
-   */
-  bool?: string | boolean;
-  /**
-   * Validation based on conditions
-   *
-   * @example - Compare own field to two. Origin and target default to field value
-   * ```
-   * conditions: {
-   *   rule: 'and',
-   *   set: [
-   *     {
-   *       condition: '===',
-   *       target: '2',
-   *     },
-   *     {
-   *       origin: '2',
-   *       condition: '===',
-   *     },
-   *   ],
-   * },
-   * ```
-   * @example - Binded to Postcode field value. Must be greater than or equal two
-   * ```
-   * conditions: {
-   *   rule: 'or',
-   *   set: [
-   *     {
-   *       origin: '${fields.postcode.value}',
-   *       condition: '>',
-   *       target: '2',
-   *     },
-   *     {
-   *       origin: '${fields.postcode.value}',
-   *       condition: '===',
-   *       target: '2',
-   *     },
-   *   ],
-   * },
-   * ```
-   * @example - Binded to Postcode field value. Must be equal to two
-   * ```
-   * conditions: {
-   *   rule: 'or',
-   *   set: [
-   *     {
-   *       origin: '${fields.postcode.value}',
-   *       condition: '===',
-   *       target: '2',
-   *     },
-   *   ],
-   * },
-   * ```
-   */
-  conditions?: TVAvailableValidationConditions;
-  /**
-   * Applies multiple validations on the given value based on the specified truth table rule.
-   *
-   * @param {Object} TVAvailableValidationMultipleValidations - The multiple validations object param.
-   * @param {'AND' | 'OR' | 'NOT'} TVAvailableValidationMultipleValidations.rule - The rule to be applied based of truth table ('AND', 'OR', or 'NOT').
-   * @param {Object} TVAvailableValidationMultipleValidations.validations - Object containing validation rules.
-   *
-   * @example - Validating with the expression AND where current field must have a value of 'yes' and input 2 must have a value of 'no'
-   * ```
-   * multipleValidations: {
-   *   rule: 'AND',
-   *   validations: {
-   *      value: 'yes',
-   *      conditions: {
-   *        rule: 'and',
-   *        set: [
-   *          {
-   *            origin: '${fields.input2.value}',
-   *            condition: '===',
-   *            target: 'no'
-   *          },
-   *        ],
-   *      },
-   *   },
-   * },
-   * ```
-   * @example - Validating with the expression OR where current field must have a value of '1995-12-12' or be a valid date with regex
-   * ```
-   * multipleValidations: {
-   *   rule: 'OR',
-   *   validations: {
-   *      value: '1995-12-12',
-   *      regex: '^\d{4}-\d{2}-\d{2}$',
-   *   },
-   * },
-   * ```
-   * @example - Validating with the expression NOT where current field doesn't have a value of '1995-12-12' and not be a valid date with regex
-   * ```
-   * multipleValidations: {
-   *   rule: 'NOT',
-   *   validations: {
-   *      value: '1995-12-12',
-   *      regex: '^\d{4}-\d{2}-\d{2}$',
-   *   },
-   * },
-   * ```
-   */
-  multipleValidations?: TVAvailableValidationMultipleValidations;
-  /**
-   * Between validations
-   *
-   * @example - Between ages
-   * ```    type teste = Pick<TVAvailableValidations, 'date'>
-   * between: {
-   *   dates: [
-   *     {
-   *       operator: '>=',
-   *       origin: {
-   *         format: 'YYYYMMDD',
-   *         intervals: {
-   *           years: 18,
-   *         },
-   *       },
-   *     },
-   *     {
-   *       operator: '<=',
-   *       origin: {
-   *         format: 'YYYYMMDD',
-   *         intervals: {
-   *           years: 75,
-   *         },
-   *       },
-   *     }
-   *   ]
-   * }
-   * ```
-   *
-   * @example - Between numbers
-   * ```
-   *  between: {
-   *    start: '3',
-   *    end: '4',
-   *    isIncludedBoundaries: true
-   *  },
-   *  ```
-   *
-   */
-  between?: {
-    /**
-     * Array of date validations. To make it possible, ensure that the conditions is > and < in both date validations.
-     */
-    dates?: TVAvailableValidations['date'][];
-    /**
-     * The first number of the validation. If the current value is grater than this number, the validation will pass.
-     */
-    start?: number;
-    /**
-     * The second number of the validation. If the current value is lower than this number, the validation will pass.
-     */
-    end?: number;
-    /**
-     * If it's true, the comparision is transformed to >= and <=. So, the numbers that were passed are included in the validation.
-     */
-    isIncludedBoundaries?: boolean;
-  };
-  /**
-   * Dates validations
-   *
-   * @example - Dates should be different
-   * ```
-   * date: {
-   *   operator: '!==',
-   *   origin: {
-   *     format: 'DDMMYYYY',
-   *   },
-   *   target: {
-   *     format: 'DDMMYYYY',
-   *     value: '10/10/2001',
-   *   },
-   * },*
-   * ```
-   *
-   * @example - Compare only valid dates using intervals
-   * ```
-   *  date: {
-   *    onlyValidDate: true,
-   *    operator: '<',
-   *    origin: {
-   *      format: 'DD/MM/YYYY',
-   *      intervals: {
-   *        years: 1,
-   *      },
-   *    },
-   *  },
-   *  ```
-   *
-   * @example - Should have at max 85 years
-   * ```
-   * {
-   *    operator: '>',
-   *    origin: {
-   *      format: 'DDMMYYYY',
-   *      value: eightyFiveYearsDate,
-   *      intervals: {
-   *        years: 85,
-   *      },
-   *    },
-   *  }
-   * }
-   *
-   * ```
-   */
-  date?: {
-    /**
-     * Flag to force only valid dates. Valid dates must be of min length of 8
-     */
-    onlyValidDate?: boolean;
-    /**
-     * List of operations you can do
-     * - between origin and target dates
-     * - between origin and intervals
-     */
-    operator: TValidationDateOperators;
-    /**
-     *  The origin configurations
-     */
-    origin: {
-      /**
-       * Origin date value
-       */
-      value?: string | number;
-      /**
-       * The available date formats
-       */
-      format: TValidationDateFormats;
-      /**
-       * Intervals to compare with the original date.
-       *
-       * It will use todays date for comparison.
-       *
-       * @example
-       *
-       * origin date = 10/10/2022
-       * interval.year = 1
-       * operator = '==='
-       *
-       * It will compare (10/10/2022 + 1) with the current date and check if they are the same
-       */
-      intervals?: {
-        years?: number;
-        months?: number;
-        days?: number;
-      };
-    };
-    target?: {
-      value: string | number;
-      format: TValidationDateFormats;
-    };
-  };
-  /**
-   * Allow to validate if the input string is a valid date format
-   */
-  validDate?: TValidationDateFormats;
-  /**
-   * Allow to define a maximum length for the input to have no error
-   */
-  length?: number;
-
-  /**
-   * Specifies a regular expression pattern that the value should match.
-   */
-  regex?: string;
-
-  /**
-   * Specifies the maximum length of the value (if it's a string).
-   */
-  maxLength?: number;
-
-  /**
-   * Specifies the minimum length of the value (if it's a string).
-   */
-  minLength?: number;
-
-  /**
-   * Specifies whether the field is required.
-   */
-  required?: boolean;
-
-  /**
-   * Specifies that the value should contain only letters.
-   */
-  onlyLetters?: boolean;
-
-  /**
-   * Specifies a value that the field should match.
-   */
-  value?: string | number | boolean;
-
-  /**
-   * Specifies that the field should not be empty.
-   */
-  notEmpty?: boolean;
-
-  /**
-   * A callback function that performs custom validation on the value.
-   * @param value - The value to be validated.
-   * @returns An object with validation results.
-   */
-  callback?(value: string | number): boolean;
-
-  /**
-   * Specifies a numeric range for the value.
-   */
-  numericRange?: { start: number | string; end: number | string };
-
-  /**
-   * Specifies whether the value should be a number.
-   */
-  isNumber?: boolean;
-
-  /**
-   * Specifies that the field should not have extra spaces.
-   */
-  hasNoExtraSpaces?: boolean;
-
-  /**
-   * Specifies that the value should be an email address.
-   */
-  email?: boolean;
-
-  /**
-   * Specifies that the value should be less than a given number or string.
-   */
-  lessThan?: number | string;
-
-  /**
-   * Specifies that the value should be a sequential number.
-   */
-  sequentialNumber?: boolean;
-
-  /**
-   * Specifies that the value should not contain repeated numbers.
-   */
-  repeatedNumbers?: boolean;
-
-  /**
-   * Specifies that the value should be a URL.
-   */
-  url?: boolean;
-
-  /**
-   * Specifies a path error type.
-   */
-  path?: TPathError;
-
-  /**
-   * Specifies that the value should be a valid credit card number.
-   */
-  isCreditCard?: string[];
-
-  /**
-   * Specifies that the value should be a valid credit card number with a specific length.
-   */
-  isCreditCardAndLength?: string[];
-
-  /**
-   * Specifies that the value should match a credit card code with available options.
-   */
-  isCreditCodeMatch?: { numberCard: string; availableOptions: string[] };
-
-  /**
-   * Specifies custom validation options for the field.
-   */
-  customValidation?: ICustomValidationValue[];
-
-  /**
-   * Specifies that spaces are not allowed in the field.
-   */
-  notAllowSpaces?: true;
-
-  /**
-   * Specifies that the value should be in a predefined list of values.
-   */
-  isInTheList?: string[] | number[] | string;
-
-  /**
-   * Specifies field validation rules for nested fields.
-   */
-  fields?: {
-    /**
-     * The rule for validating nested fields (e.g., 'every').
-     */
-    rule: 'every';
-
-    /**
-     * An array of nested field validation configurations.
-     */
-    set: {
-      /**
-       * The binding for the nested field.
-       */
-      bind: string;
-
-      /**
-       * The field name for the nested field.
-       */
-      fieldName: string;
-
-      /**
-       * Validation options for the nested field, excluding the 'fields' property.
-       */
-      validations: Omit<TVAvailableValidations, 'fields'>;
-    }[];
-  };
-
-  /**
-   * Specifies that the value should be existed.
-   */
-  exists?: string | number ;
-}
-````
-
-## **Formatters**
-
-Formatting a field means mutating the field value to a given... format.
-
-This options will allow you to force a give field to have the format you whant while the user is performing some action on the form.
-
-**NOTE** - When receiving the values of the form, you will have the value with the specified format, not the raw value the user entered
-
-You have several formatters. THe following example shows splitter that is a more generic one, allowing you to split the input text
-
-**BIG NOTE** - Formatters won't execute when a value is deleting (eg. user pressed backspace to delete a character), to execute on every
-value change, use masks instead
-
-```json
-{
-  "formatters": {
-    "ON_FIELD_MOUNT": {
-      "splitter": [
-        {
-          "position": 2,
-          "value": "/"
-        },
-        {
-          "position": 5,
-          "value": "/"
-        }
-      ]
-    }
-  }
-}
-```
-
-The above example will split your word in position 2 and 5, adding there the `/`. This will give you a date format like `10/10/1987` (you would have to limit the input length. More on that on FILTERS)
-
-### Available Formatters (TBD)
-
-Refer to the types on `TSchema`
-
-#### Regex
-
-Specifies a regular expression pattern that the value should match to be replaced.
-
-```json
-{
-  "formatters": {
-    "ON_FIELD_MOUNT": {
-      "regex": "[0-9]"
-    }
-  }
-}
+```typescript
+private _props: Record<string, unknown>;
+private _value: unknown;
+private _stateValue: Record<string, unknown>;
+private _metadata: unknown;
+private _visibility: boolean;
+private _errors: TErrorMessages;
+private _api: TApiResponse;
+private _valid: boolean;
+private _mounted: boolean;
 ```
 
-#### Callback
+they all have a `get` and `set` method constructors
 
-Specifies a function that will format the field
+The `get` constructor is responsible to deliver the value
 
-```typescript
-const removeDots = (value: string | number): string | number => {
-  return value.split('.').join('');
-};
+The `set` constructor is responsible to set the value on this private properties along with emitting to the corresponding subject and the form template subject
 
-const formatterInstance = {
-  formatters: {
-    ON_FIELD_CHANGE: {
-      callback: removeDots,
-    },
-  },
-};
+```javascript
+private _stateValue: unknown;
+private _metadata: unknown;
+errorsString: string;
+errorsList: string[];
 ```
 
-## Masks
+This properties are computed based on other private properties,
 
-Mask has the same functionality of formatter, but keed the original value for your program. Think of it like the password mask. You input something into your text input, mask that something with `*` but you need to read the original value. FOr Eg.
+`_stateValue` has the mask applied to the `_value` when `set value` method is called
 
-```json
-{
-  "masks": {
-    "ON_FIELD_BLUR": {
-      "replaceAll": "*"
-    },
-    "ON_FIELD_FOCUS": {
-      "cleanMask": true
-    }
-  }
-}
-```
+`_metadata` has the metadata sent by the **valueChangeEvent** mapper function when `set value` is called
 
-In this example, you will
+when `set errors` method is called, `errorsString` is the errors message list concatenated in a string, separated by commas `,` and `errorsList` is the list of the errors message
 
-- Mask a given text input from for example `123345` to `******`
-- On Focus , you tell form to clean the mask with `cleanMask` directive.
+**If you try to change this values directly without using it's constructors, it can cause serious problems on the form reactivity, even in a last resort scenario, evaluate cautiously if you should change this values directly on any maintenance or feature implementation**
 
-### Available Masks (TBD)
+<a id="value-change-rules"></a>
 
-Refer to the types on `TSchema`
+## Value change Rules
 
-#### Callback
+If you manage to work on value change, take in consideration that the value change is treated as a special property on the configuration, let's take in consideration what happens on a component in react:
 
-Specifies a function that will format the field
+```javascript
+const [value, setValue] = useState('');
 
-```typescript
-const removeDots = (value: string | number): string | number => {
-  return value.split('.').join('');
+const handleChange = (e) => {
+  const val = e.currentTarget.value;
+  val ? (setValue = val) : '';
 };
 
-const formatterInstance = {
-  formatters: {
-    ON_FIELD_CHANGE: {
-      callback: removeDots,
-    },
-  },
-};
+<input onChange={handleChange} value={value} />;
 ```
 
-## **Filters**
-
-Filters very predictable and work like the word says, they filter a given word to a given patter/directive.
+The value prop is binded to the value state and the onChange prop is binded to the function that will change this value.
 
-Lets say you want a field to accept only numbers and with a max length o X.
+In form-engine, the property that holds the value and the property that changes this value are:
 
-```json
-{
-  "filter": {
-    "ON_FIELD_CHANGE": {
-      "length": 4,
-      "isNumber": true
-    }
+```javascript
+class FormField
+  private _value: unknown;
+  (...)
+  get value(): unknown {
+    return this._value;
   }
-}
-```
 
-This example will let you do just that. Only numbers and max length of 4
-
-### Available filters (TBS)
-
-Refer to the types on `TSchema`
-
-## Visibility conditions
-
-### Field level
-
-Sometimes you want to hide other fields based on certain conditions.
-
-That is what this feature does.
-
-Eg: You want to hide another field, when a given field `originalField` has a given value on it.
-
-```json
-[
-  {
-    "name": "originalField",
-    "component": "checkbox",
-    "visibilityConditions": {
-      "ON_FIELD_MOUNT": [
-        {
-          "validations": {
-            "value": "Yes"
-          },
-          "fieldName": "targetField"
-        }
-      ],
-      "ON_FIELD_CHANGE": [
-        {
-          "validations": {
-            "value": "Yes"
-          },
-          "fieldName": "targetField"
-        }
-      ]
-    },
-    "props": {
-      //...
+  set value(value: unknown) {
+    /*
+      too much unstable, if the valueChangeEvent parses the template event
+      value, might occur unexpected results
+    */
+    let val;
+    if (this.valueChangeEvent) {
+      try {
+        val = this.valueChangeEvent(value, { props: this.props });
+      } catch (e) {
+        val = value;
+      }
+    } else {
+      val = value;
     }
-  },
-  {
-    "name": "targetField",
-    "component": "input",
-    "props": {
-      //...
+    if (typeof val === 'undefined' || val === null) return;
+    if (typeof val === 'object' && '_value' in val && '_metadata' in val) {
+      this._value = this.formatValue(val['_value']);
+      this._stateValue = this.mapper.events?.setValue
+        ? {
+            [this.mapper.events.setValue]: this.maskValue(
+              this.formatValue(val['_value'])
+            ),
+          }
+        : {};
+      this._metadata = val._metadata;
+    } else {
+      this._value = this.formatValue(val);
+      this._stateValue = this.mapper.events?.setValue
+        ? {
+            [this.mapper.events?.setValue]: this.maskValue(
+              this.formatValue(val)
+            ),
+          }
+        : {};
+      this.maskValue(this.formatValue(val));
+      this._metadata = val;
     }
+    this.stateValue && this.valueSubject$.next(this.stateValue);
+    this.templateSubject$.next({ key: this.name, event: 'ON_VALUE' });
   }
-]
 ```
 
-This example tells form to
+In this case, the value passed to this setter method can have multiple formats (it's the **valueChangeEvent** mapper function that is responsible to pass the value on each of this formats):
 
-- On mount check if `originalField` has the value `Yes`
-- If it put the `targetField` visible
-- Otherwise, make it invisible
-
-You can also for each visibility condition, apply it to multiple field names with `fieldNames` key that will accept an array.
-
-```json
-{
-  "visibilityConditions": {
-    "ON_FIELD_MOUNT": [
-      {
-        "validations": {
-          "value": "Yes"
-        },
-        "fieldNames": ["targetFieldOne", "targetFieldTwo"]
-      }
-    ]
-  }
-}
+```javascript
+value: unknown;
 ```
 
-**NOTE** - When the field is hidden using this feature, the form will not try to validate it and will not be accounted to the general form state
-
-### Form Level
-
-You can also use those in form level.
+The value is formatted and stored onto `fieldinstance._value` and the value prop name with the value into `fieldinstance._stateValue`
 
 ```javascript
-<Form
-  iVars={{ roofUpdated: state }}
-  initialValues={{ roofUpdatedYear: 'diogos' }}
-  schema={{
-    visibilityConditions: {
-      ON_FORM_MOUNT: [
-        {
-          validations: {
-            value: '${global.roofUpdated}',
-          },
-          fieldName: 'roofUpdatedYear',
-        },
-      ],
-      ON_FIELD_CHANGE: [
-        {
-          validations: {
-            value: 'abc',
-          },
-          fieldName: 'roofUpdatedYear',
-        },
-      ],
-    },
-    components: [{...}],
-  }}
-/>
+{ _value: unknown, _metadata: unknown }
 ```
 
-in the above example we are applying the rule:
-
-- in form mount we will hide the value when the `roofUpdatedYear` equals to the iVar `roofUpdated`
-- in each field change we will hide the value when the `roofUpdatedYear` equals to `abc`
-- also you can use the prop `rule` to decide what type of validations rules to execute (and == every | or == some)
-- if you want to show an field only if all or at least one validation is true, use `showOnlyIfTrue` property.
+The `_value` key is formatted and stored onto `fieldinstance._value` and the value prop name with the value into `fieldinstance._stateValue`
 
-## Clear Fields
+The `_metadata` key is stored at `fieldinstance._metadata` as it is, and can be retrieved using `fieldinstance.metadata` readonly property
 
-Guess what... THis will clear one or more form fields :)
+But, this change can have sideEffects defined on the Schema, like validations, visibilityConditions and so on, so proper way to change this value and trigger all side effects in order to update the component that is using this instance is using the `fieldinstance.emitValue` class function:
 
-Uses the same mechanism of VISIBILITY CONDITIONS.
-
-Let's say you want to clear a given field when `originalField` has a given value.
-
-```json
-{
-  "clearFields": {
-    "ON_FIELD_CHANGE": [
-      {
-        "validations": {
-          "value": "Yes"
-        },
-        "field": "targetValue",
-        "clearedValue": false
-      }
-    ]
-  }
-}
+```javascript
+fieldinstance.emitValue({ event: 'ON_FIELD_CHANGE', value: 'hello' });
 ```
 
-When form fires ON_CHANGE this will have the effect of having the field `targetValue` with the value `false` if `originalField` has value `Yes`.
-
-Just like before, you can specify multiple fields with `fields` key for the same rule.
+This function will set the value along with triggering all the side effects and triggers the onData callbacks defined:
 
-```json
-{
-  "clearFields": {
-    "ON_FIELD_CHANGE": [
-      {
-        "validations": {
-          "value": "Yes"
-        },
-        "fields": ["targetValue"],
-        "clearedValue": false
-      }
-    ]
+```javascript
+  emitValue(prop: {
+    value: unknown | { _value: unknown; _stateValue: unknown };
+    event: TEvents;
+  }): void {
+    this.value = prop.value;
+    this.emitEvents({ event: prop.event });
+    this.dataSubject$.next({ key: this.name, event: prop.event });
   }
-}
-```
-
-Additionally, you can specify multiple props to be changed or cleared from the fields that you specified before using `clearedProps`.
-Each prop will be changed using the respective field. For example, if I have `fields['input', 'checkbox']` then I need to change the input label
-I can send it as `clearedProps: [{ label: 'value' }]` or `clearedProps: { label: 'value' }`. And only input props will be changed.
-It's useful when we have some API calls whose response will be used as a prop value in the component.
-
-```json
-{
-  "clearFields": {
-    "ON_FIELD_CHANGE": [
-      {
-        "validations": {
-          "value": "Yes"
-        },
-        "field": "targetValue",
-        "clearedValue": false,
-        "defaultClearedValue": true,
-        "defaultClearedProps": {
-          "disabled": false
-        }
-      }
-    ]
+  emitEvents({ event }: { event: TEvents }): void {
+    this.setFieldValidity({ event });
+    this.validateVisibility({ event, key: this.name });
+    this.resetValue({ event, key: this.name });
+    this.apiEventQueueSubject$.next({ event });
+    this.fieldEventSubject$.next({
+      event,
+      fieldName: this.name,
+      fieldInstance: this,
+    });
   }
-}
 ```
 
-If you want to set a value when the validation passes you can set `defaultClearedValue` prop on the event to set a value on the cleared field.
-Useful after an API call to set a default response value or a value stored earlier.
-You can also set a `defaultClearedProps` attribute to change the props of the component if the validation passes.
-
-For definition clearValues runs validations on the target field and not on the field it is declaring.
-Therefore, you can set `useCurrentFieldValidation` prop with true if you want validations to be performed on the current field.
+To emit a capture of this value change, value setter emits on the end, setting the value on the configured property on the `mapper -> events -> setValue` when the value is being retrieved, an object is created with the correspondent key configured to be passed as props on the component.
 
-> Remember, clearValues only performs `rehydration` on the target field, that is, if your target field has an api call, for example,
-> you must listen to the `ON_FIELD_CLEARED` event to execute such a call on the target field.
+Also, there is an helper function to help register this callback function that is responsible to change this value on the adapter called `subscribeValue`.
 
-## Api
+So, to compare the basic react implementation from a simple binded state along with a change handler to a form-engine controlled input handler, the implementation goes like this:
 
-This one will let you instruct form to call a give API at a given lifecycle method
-
-```json
-{
-  "api": {
-    "ON_FIELD_CHANGE": [
-      {
-        "blockRequestWhenInvalid": true,
-        "method": "GET",
-        "url": "https://api.chucknorris.io/jokes/random",
-        "scope": "chuck"
-      }
-    ]
-  }
-}
-```
+```javascript
+const [valueState, setValueState] = useState<Record<string, unknown>>(fieldinstance.stateValue || {});
 
-The above example will make form to call the API specified when the field where we gave the directory changes.
-
-### Keys
-
-| key                     | type             | Description                                                                                                                                                                                                         |
-| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| blockRequestWhenInvalid | boolean          | Specify if this call should be blocked when the field is invalid (due to validations)                                                                                                                               |
-| method                  | string           | HTTP verb. Get, Post, Put or delete                                                                                                                                                                                 |
-| url                     | string           | The api url                                                                                                                                                                                                         |
-| scope                   | string           | This lets you put the api result inside the form scope in the given key. THis will allow to use the call result latter on on some field                                                                             |
-| body                    | object           | Body to send to the API                                                                                                                                                                                             |
-| headers                 | object           | Api headers                                                                                                                                                                                                         |
-| fieldValueAsParams      | object           | An object with key (name of the field in the form) and value (name that I want to be in the query, which if nothing is passed, uses the name of the field as the key) and then it transforms it into a query string |
-| fieldValueAsPathParams  | array of strings | an array of field names where he uses it as a key to capture the value and transforms it into path param                                                                                                            |
-| debounceTime            | number           | Allow you to debounce the api call by X seconds                                                                                                                                                                     |
-| preConditions           | TValidations     | Allow you to specify validations that should not fail in order to call the API                                                                                                                                      |
-
-### PreConditions
-
-You can specify the pre-conditions that need to be met, in order for the request to start.
-
-```json
-{
-  "api": {
-    "ON_FIELD_CHANGE": [
-      {
-        "method": "GET",
-        "url": "https://api.chucknorris.io/jokes/random",
-        "scope": "chuck",
-        "preConditions": {
-          "required": true,
-          "value": "run"
-        }
-      }
-    ]
+fieldInstance = new FormField(
+  (...)
+  mapper: {
+    events: {
+      setValue: 'value'
+    }
   }
-}
-```
-
-In the above example, the api specified will only be called
+  (...)
+)
 
-1. When field has changes
-2. When field has values (required validation)
-3. When the field value is "run"
-
-### FieldValueAsParams
+useEffect(() => {
+    fieldInstance.subscribeValue((value) => setValueState(value));
+    return () => {
+      fieldInstance?.destroyField();
+    };
+  }, []);
 
-You can add as many query parameters as you want, but remember that it will search for a field that exists, otherwise it will not be included in the call.
+  const handleChange = useCallback((event: unknown) => {
+    fieldInstance?.emitValue({ value: event, event: 'ON_FIELD_CHANGE' });
+  }, []);
 
-```json
-{
-  "api": {
-    "ON_FIELD_CHANGE": [
-      {
-        "method": "GET",
-        "url": "https://api.chucknorris.io/jokes",
-        "scope": "chuck",
-        "fieldValueAsParams": {
-          "input": "name",
-          "date": ""
-        }
-      }
-    ]
-  }
-}
+return <input onChange={handleChange} {...valueState}>
 ```
 
-From the example above, the call will have the following structure:
+The listener is registered when the field mounts calling `subscribeValue` on the field instance that will update the state.
 
-```bash
-# GET https://api.chucknorris.io/jokes?name=random&date=2013-20-01
-```
+The handleChange calls the field instance `emitValue`
 
-When one of the parameters has a key but no value, the key will be reused in the query string.
+The rest of the process to manage the validation, visibility and so on occurs internally on form-engine-core, the only thing that the adapter needs to do is inform the value that is set as input, the output is handled and delivered on the callback function defined on the effect.
 
-### FieldValueAsPathParams
+**Note:** _this is for demonstration purposes, the final implementation of the adapter only resembles to this_
 
-With this parameter, it is possible to use the value of any form field as path param for the http call, as follows:
+<a id="props-change-and-visibility-rules"></a>
 
-```json
-{
-  "api": {
-    "ON_FIELD_CHANGE": [
-      {
-        "method": "GET",
-        "url": "https://api.chucknorris.io/jokes",
-        "scope": "chuck",
-        "fieldValueAsPathParams": ["input", "date"]
-      }
-    ]
-  }
-}
-```
+## Props change and visibility rules
 
-From the example above, the call will have the following structure:
+Props change can be defined on the schema or can be changed with templating, let's take into consideration what happens in react:
 
-```bash
-# GET https://api.chucknorris.io/jokes/random/2013-20-01
+```javascript
+return <input label={props.label} placeholder={props.placeholder}>
 ```
 
-So far he only puts one after the other, he still doesn't have the intelligence to choose where to put each.
+React will rerender this component each time props are changed, in the case of form-engine, this props are passed on the schema and can have templating that will change based on any field side effect, what manages the props change is an RXJS subject, to properly register the props and let the form-engine manage the side effects, this is needed to be done:
 
-## Data binding
+```javascript
+const [state, setState] = useState<Partial<IState>>({
+    visibility: fieldInstance?.visibility || true,
+    props: fieldInstance?.props || props,
+  });
 
-Form has a functionality to allow you to build your logic inside the schema via templating.
+useEffect(() => {
+    fieldInstance.subscribeState((props) => {
+        setState((prev) => ({
+          ...prev,
+          ...props,
+        }))
+    })
 
-You can emit and register to data between fields. For example, in the following example field `one` will register to changes on field `two` and its label will have the field `two` value. This is accomplished with [scopes](#scope).
+    return () => {
+      fieldInstance?.destroyField();
+    };
+},[])
 
-```json
-[
-  {
-    "name": "one",
-    "component": "input",
-    "props": {
-      "label": "${fields.two.value}"
-    }
-  },
-  {
-    "name": "one",
-    "component": "input",
-    "props": {
-      //...
-    }
-  }
-]
+return {state.visibility && <input {...props}>}
 ```
 
-The subscription is done using the template first keys. In this case `fields` and `two`. Telling the engine that anytime the namespace `fields` and key `two` changes it should fire a notification to anyone interested. In this case, field `one` is interested
+Field instance has an helper function to register the callback function `subscribeState` to be called each time props change internally on form-engine, and on this callback function, you need to change the state of the props in order to occur onto the adapter, also the visibility control is made by the `visibility` prop given by the callback function, so the condition to show or hide the component is made onto the adapter depending on this prop value.
 
-### Scope
+**NOTE: trying to pass the value sending the value prop will not work except if this value is a template, also, templates that will change based on the same field will not work either**
 
-For templating to work, form relies on scope. The definition of scope is just a datastructures that has multiple keys each one with their context. The following table explain the namespaces
+**Note:** _this is for demonstration purposes, the final implementation of the adapter only resembles to this_
 
-| namespace | description                                                                                                                                                                                  |
-| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| global    | This namespace contains all the data that comes from the client implementing the Form and is injected in iVars                                                                               |
-| fields    | Automatically generated scope. This namespace contains all the fields with everything that is done in them per field. Eg: value, errors, visible, mask etc. Refer to the types for more info |
-| api       | This scope is where you can store the api responses with the api scope key.                                                                                                                  |
-| hooks     | This one is retrieved by the hooks configured on the client                                                                                                                                  |
-| configs   | All the configs that the client gave to the form, will be stored here                                                                                                                        |
-
-Templating basically allows a given component to subscribe to any scope change, be notified and changed according to that. In the following example, the component named `make` is subscribed to `api` namespace on `data` key.
-
-```json
-{
-  "name": "make",
-  "component": "dropdown",
-  "props": {
-    "id": "make",
-    "name": "make",
-    "label": "Make",
-    "placeholder": "",
-    "options": "${api.makes.data||[]}"
-  }
-}
-```
+<a id="error-messages-display"></a>
 
-This means that, anytime that `api.makes.data` changes (done by api action with scope = data), this component will be injected with its value on the `options` key. It also has a default value of empty array `...data||[]}`.
+## Error messages display
 
-If you want you can even nest templating also. Next example we will access to `global` namespace on `name` key. But we will access the prop dynamically from the field named `myfield` value
+For error message display, based on validation logic occuring in the field configured onto the schema, the component need to have a property configured onto the mappers configuration onto `mappers -> events -> setErrorMessage`, then, each time an error occurs, the field will automatically have an error displayed on the corresponding prop.
 
-```json
-{
-  "component": "input",
-  "name": "destination",
-  "props": {
-    "name": "destination",
-    "label": "Dynamic -> ${global.name.${fields.myfield.value||test}}"
-  }
-}
-```
+Example of a basic component in react:
 
-This will result in the following. Assume we have scope like
+```javascript
+const [errorMessage, setErrorMessage] = useState('')
 
-```json
-{
-  "global": {
-    "name": {
-      "test": "test",
-      "other": "other"
-    }
-  }
-}
+return <Input errorMessage={errorMessage}>
 ```
 
-It will access `global.name.test` since we have the default value as test and there is no data in fields scope. The end result would be _"Dynamic -> test"_
+In form-engine, the error message will be passed onto the subscribedState on `errors` with the prop name passed onto the mapper config and all the error messages that were triggered
 
-But right after input on the form field named `myfield`, its scope will be populated
+Example:
 
-```json
-{
-  "global": {
-    "name": {
-      "test": "test",
-      "other": "other"
-    }
-  },
-  "fields": {
-    "myfield": {
-      "value": "other"
-      //...
+```javascript
+fieldInstance = new FormField(
+  (...)
+  mapper: {
+    events: {
+      setErrorMessage: 'errorMessage'
     }
   }
-}
-```
-
-In this case would access `global.name.other` and the final result would be _"Dynamic -> other"_
-
-### Templates
-
-We talked about templates, but let's go a step further. THe definition of template, is a just a string that has a given prefix and suffix like `${...}`.
-
-Whatever comes inside the delimiters will be later extracted by the engine and mapped with the current scope in order to find a replacement value.
-
-The only limitation is that the template must be a string representing an object path. That object path will be looked for in the [scope](#scope) like `#{api.myapicall.response.data.value}`.
-
-**Default values**
-
-You can set template default values with `||` like `${fields.foo.value||default-value}`. This will lead to, if the scope has value in `fields.foo` set the value in template value, otherwise set the string `default-value`.
-You can also use as many values as you want as defaults. Only what is valid and has a value will go into the field, otherwise it will be undefined.
-
-**Template nesting**
-
-You can also nest multiple templates reaching extreme situations. For example
+  (...)
+)
 
-`${fields.${gloval.fieldname||foo}.value||novalue}`
-
-This example will give you the following possible replacements:
-
-- If `global.fieldname` exists and has value `bar` for example, and form `bar` field contains value lets say value 2 - Output will be 2
-- If `global.fieldname` exists and has value `bar` for example, and form `bar` field does not contain value - Output will be non value
-- If `global.fieldname` does not exists , and form `foo` field does not contain value - Output will be non value
-- If `global.fieldname` does not exists , and form `foo` field contains value lets say value 3 - Output will be 3
+const [state, setState] = useState<Partial<IState>>({
+    visibility: fieldInstance?.visibility || true,
+    props: fieldInstance?.props || props,
+  });
 
-### VarOps
+useEffect(() => {
+    fieldInstance.subscribeState((props) => {
+        setState((prev) => ({
+          ...prev,
+          ...props,
+        }))
+    })
 
-Templates are already a great power of form-engine, but we can go further allowing operations to be specified in the schema. Those operations are all under `varOps` (variable operations).
+    return () => {
+      fieldInstance?.destroyField();
+    };
+},[])
 
-```json
-{
-  "component": "input",
-  "name": "password",
-  "validations": {
-    "methods": {
-      "required": true,
-      "value": "varOps.concatenate(${fields.email.value||0},${fields.email2.value||0})"
-    },
-    "eventMessages": {
-      "ON_FIELD_CHANGE": ["required", "value" ]
-    },
-    "messages": {
-      "required": "Password is required",
-      "value": "Error value must be varOps.concatenate(${fields.email.value||0},${fields.email2.value||0})"
-    }
-  },
-  "props": {
-    "variants": "default_border",
-    "placeholder": "Please enter your password",
-    "label": "Password"
-  }
-}
+return <Input {...state.errors}>
 ```
 
-In the example the validation value comes from a `varOps`. This example uses the `concatenate` operations exposed by the engine.
+The error will contain an object with a key named `errorMessage` with all the errors that occured separated with a comma, the key configured onto the mapper varies based on the component props, if another component sets error messages on another prop, needs to be configured onto the mapper config onto setErrorMessage inside events.
 
-Here this field (`password`) will register with [templating](#templates) to field `email` and `email2`. Meaning, each time they change this field schema will be recomputed with what changed to replace the needed values.
+**Note:** _this is for demonstration purposes, the final implementation of the adapter only resembles to this_
 
-When this happens, lets say `email` has value foo and `email2` value bar. The `varOp` concatenate will be called with the correct field replaced values
+<a id="subject-dependencies"></a>
 
-```javascript
-varOps.concatenate('foo', 'bar');
-```
-
-This will map to an operation function and the function return value will be replaced by the varOps like
+## subject dependencies
 
-```json
-{
-  "validations": {
-    "ON_FIELD_CHANGE": {
-      "required": true,
-      "value": "foo_bar"
-    }
-  }
-}
-```
+<a id="field"></a>
 
-Since we are already using [templates](#templates) to run our varOps and subscribe to changes, also the error message string subscribed to the operation result. In this example we would endue with the following messages.
+### field
 
-```json
-{
-  "validations": {
-    ...,
-    "messages": {
-      "required": "Password is required",
-      "value": "Error value must be foo_bar"
-    }
-  }
-}
+```typescript
+templateSubject$: Subject<TTemplateEvent>;
+fieldEventSubject$: Subject<TFieldEvent>;
+dataSubject$: Subject<{ key: string; event: TEvents }>;
+formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
 ```
 
-PS: Don't's forget that we still have the default values provided with [templates](#templates) and the rules are the same
-
-#### Available VarOps
-
-- concatenate(arg1,arg2)
-- add(arg1,arg2)
-- subtract(arg1,arg2)
-
-### Direct fields binding
-
-You can change multiple field values and properties with `bindFields` using the form ref in the react adapter, example:
-
-```js
-{
-  const ref = useRef < TFormRefActions > null;
-
-  return (
-    <>
-      <Form id="form" ref={ref} schema={foo} />
-    </>
-  );
-}
-
-const handleFields = (input1: string, input2: number) =>
-  ref.current?.bindFields({
-    input1: {
-      value: input1,
-      props: {
-        disabled: false,
-      },
-    },
-    input2: {
-      value: input2,
-      props: {
-        disabled: true,
-      },
-    },
-  });
-```
+this subjects needs to be passed as a field constructor parameters, and the field invoker needs to instanciate them, they are part of the form instance
+implementation
 
-All schema fields that has the same name as the passed keys will have his values/properties changed and validations executed
+<a id="templatesubject"></a>
 
-> Also, you can listen to the `ON_FIELD_BINDED` event to execute any handler on the target field.
+#### templateSubject$
 
-## State
+This subject needs to be invoked on any field mutation, this will notify the form that a field changed and any other field that has a template dependency needs to be recomputed,
 
-This key will allow you to set up some initial state on the field.
+Ex: `field1` label props depends on `field2` value, so: `field1.props.label` has a template `${field2.props.value}`, each time `field2` value changes,
+the `templateSubject$` emits, the form gets the notification and checks that `field2` has a `field1` dependency and updates the `label` with the value
+of `field2`
 
-### hidden
+<a id="fieldeventsubject"></a>
 
-Hidden prop on state, will turn your field visible or invisible
+#### fieldEventSubject$
 
-```json
-{
-  "state": {
-    "hidden": true
-  }
-}
-```
+Each time a basic event mapped from a component occurs like `onChange` or `onBlur` the field emits this subject with it's event type and field name,
+on form, if adapter invokes `subscribeFieldEvent` on an instanciated form with a callback function, this function is called, each time the field `emitEvents` is invoked, otherwise it's ignored
 
-This will be reflected on the field scope.
+<a id="datasubject"></a>
 
-### ignoreValue
+#### dataSubject$
 
-Ignore component value prop on state, will control whether the property with the formatted value will be created.
+This subject triggers each time `emitValue` is called, this subject handles field value changes on any event type, if the adapter invokes `subscribeData` on an instanciated form and passes a callback function, this functions will be executed each time a field `emitValue` is invoked
 
-```json
-{
-  "state": {
-    "ignoreValue": true
-  }
-}
-```
+<a id="formvalidnotification"></a>
 
-Very useful when using group ownership, to limit who will actually send the value.
+#### formValidNotification$
 
-## Rehydrate
+This subject triggers each time a field validation status change, if the adapter invokes `subscribeFormValidation` with a callback function on an instanciated form, this function will execute, each time a field validity changes, giving the form validity status
 
-**DEPRECATED, you can accomplish it with templating (previous section)**
+<a id="build-fields-with-a-schema"></a>
 
-It lets you rehydrate a given field
+## build fields with a schema
 
-```json
-{
-  "rehydrate": {
-    "ON_FIELD_CHANGE": [
-      {
-        "validations": {
-          "required": true
-        },
-        "fields": ["destination"]
-      }
-    ]
-  },
-  "component": "dropdown",
-  "name": "originalField"
-}
-```
+this is a brief explanation of how building fields with a schema works, the constructor method of the form takes care of the process if a schema is passed as a parameter
 
-The api is pretty much like visibility conditions. The above example will rehydrate the `destination` field when field with the directive (_originalField_) meets the validations configured
+<a id="fields"></a>
 
-## Group
+### fields
 
-In form, we can correlate fields into a single field name. This is called the group functionality.
+every schema is parsed with the form instance `serializeStructure` method, this will pick all fields, instanciates all form fields on a map and they are ready to interact with the form with the subjects passed on the constructors, it's the responsability of the adapter to pick this fields map and build the component tree, you can check the react adapter `BuildTree` method
 
-Say you have two checkboxes and want the selected value. You can use `group` for that
+<a id="templates"></a>
 
-```json
-[
-  {
-    "name": "checkOne",
-    "group": "checkedGroup",
-    "component": "checkbox",
-    "props": {
-      //...
-    }
-  },
-  {
-    "name": "checkTwo",
-    "group": "checkedGroup",
-    "component": "checkbox",
-    "props": {
-      //...
-    }
-  }
-]
-```
+### templates
 
-This example will store the selected value of the checkbox in the `checkedGroup` and will then be sent to the client.
+to register the templates, the form instance `subscribeTemplates` needs to be invoked, this will create a list of dependencies to be checked each time a `templateSubject$` is triggered, note that this needs to be called when all fields are instantiated, otherwise all templates might not be registered accordingly
 
-## Form Step
+<a id="build-fields-without-schema"></a>
 
-In the form it is possible to use it as steps. With this it is possible to have more than one form in just one schema.
+## build fields without schema
 
-For example, if you implement something like:
+if you want to add a field without a schema, the form instance has `addField` method, this will add a field onto the form instance and handles a couple of pre requisites, like checking if the name doesn't exists and regists the templates, it's the responsability of the adapter to figure out how to render this field on
 
-```js
-{
-  components: [
-    { component: '', name: 'step1', children: [] },
-    { component: '', name: 'step2', children: [] },
-    { component: '', name: 'step3', children: [] },
-  ];
-}
-```
-
-You can control the go back and forth event from the [onClick](#props) event of a button inside one of the forms using the form reference.
-Or Simply using the form reference in a button outside the form, for example:
+<a id="form-group-event-callback-register"></a>
 
-```js
-{
-  const ref = useRef < TFormRefActions > null;
+## form group event callback register
 
-  return <Form id="form" ref={ref} onClick={() => ref.current?.stepForward()} />;
-}
+`FormGroup` instance provides methods to add and remove form instances, also they let you regist `onData` and `onValid` events on form groups, the focus will be this two events that can be used by the adapters:
 
-// --------------------- OR --------------------- //
+<a id="form-group-ondata"></a>
 
-{
-  const ref = useRef < TFormRefActions > null;
+### form group onData
 
-  return (
-    <>
-      <Form id="form" ref={ref} />
-      <button onClick={ref.current?.stepBack()} />
-    </>
-  );
-}
-```
+formGroup `onDataSubscription` instance method let's you pass a list of indexes along with a callback function to be evoked each time any form instance emits `onData`, this is useful to handle groups of forms
 
-However, it is possible to choose which step you want to go or go back, using the numerical index or simply the name of the step you want, for example:
+<a id="form-group-onvalid"></a>
 
-```js
-() => ref.current?.stepForward(2);
-// --------------- OR -------------- //
-() => ref.current?.stepForward('step3');
-
-() => ref.current?.stepBack(0);
-// --------------- OR -------------- //
-() => ref.current?.stepBack('step1');
-```
-
-Additionally, you can use a `step` method provided by form reference to easily set a desired step using the `onFormMount` event. For example:
-
-```js
-<Form ref={ref} schema={schema} onFormMount={() => ref.current?.step(1)} />
-```
+### form group onValid
 
-Remembering that this method has a mandatory index parameter, which can either be the step index number in the array or simply its defined string name in the schema.
+formGroup `onValidSubscription` instance method let's you pass a list of indexes along with a callback function to be evoked each time any form changes it's validity status, this is useful to handle groups of forms, it will returns the form group validity status and each individual form validity status and it's triggered each time a form validity status changes