@bolttech/form-engine-core 0.0.1-beta.6 → 0.0.1-beta.8

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subscription, Subject, combineLatest, startWith, filter, groupBy, mergeMap, debounceTime, map } from 'rxjs';
+import { Subscription, Subject, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map } from 'rxjs';
 import creditCardType from 'credit-card-type';
 import { isNumber as isNumber$1, isNil, isEqual, get, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
@@ -2256,6 +2256,9 @@ const validations = {
   validDate
 };
 
+const DEFAULT_API_DEBOUNCE_TIME = 1000;
+const DEFAULT_STATE_REFRESH_TIME = 100;
+
 /**
  * Represents a form field with observables for managing form state, validations, and API requests.
  */
@@ -2288,9 +2291,10 @@ class FormField {
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     this.fieldStateSubscription$ = new Subscription();
+    this.originalSchema = schemaComponent;
     this.config = {
-      defaultAPIdebounceTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) : 1000,
-      defaultStateRefreshTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) : 100
+      defaultAPIdebounceTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) : DEFAULT_API_DEBOUNCE_TIME,
+      defaultStateRefreshTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) : DEFAULT_STATE_REFRESH_TIME
     };
     this.name = schemaComponent.name;
     this.component = schemaComponent.component;
@@ -2305,7 +2309,6 @@ class FormField {
     this.masks = schemaComponent.masks;
     if (mapper.valueChangeEvent) this.valueChangeEvent = mapper.valueChangeEvent;
     if ((_a = mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) this.valuePropName = mapper.events.setValue;
-    if ((_b = mapper.events) === null || _b === void 0 ? void 0 : _b.setErrorMessage) this.errorMessagePropName = mapper.events.setErrorMessage;
     this.mapper = mapper;
     this.validateVisibility = validateVisibility;
     this.resetValue = resetValue;
@@ -2314,8 +2317,12 @@ class FormField {
     this.dataSubject$ = dataSubject$;
     this._props = schemaComponent.props || {};
     this._value = '';
-    this._stateValue = '';
+    this._stateValue = ((_b = this.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) ? {
+      [this.mapper.events.setValue]: ''
+    } : {};
     this._metadata = '';
+    this.errorsString = '';
+    this.errorsList = [];
     this.initialValue = initialValue;
     this._visibility = true;
     this._api = {
@@ -2331,7 +2338,6 @@ class FormField {
       }, {})
     };
     this._errors = {};
-    this._errorsString = '';
     this._valid = false;
     this.initializeObservers();
   }
@@ -2362,33 +2368,21 @@ class FormField {
       this.apiEventQueueSubject$ = new Subject();
     }
     this.fieldState$ = combineLatest({
-      errors: this.errorSubject$.pipe(startWith([])),
       visibility: this.visibilitySubject$.pipe(startWith(this._visibility)),
-      apiResponse: this.apiSubject$.pipe(startWith(this._api)),
-      props: this.propsSubject$.pipe(startWith(this._props))
+      props: this.propsSubject$.pipe(startWith(this._props)),
+      errors: this.errorSubject$.pipe(startWith(Object.assign({}, ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setErrorMessage) && {
+        [this.mapper.events.setErrorMessage]: this.errorsString
+      })))
     });
-    !this.apiEventQueueSubject$.observed && this.apiEventQueueSubject$.pipe(this.debounceDistinct(({
+    !this.apiEventQueueSubject$.observed && this.apiEventQueueSubject$.pipe(groupBy(({
       event
-    }) => event, (_a = this.config) === null || _a === void 0 ? void 0 : _a.defaultAPIdebounceTimeMS), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
+    }) => event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultAPIdebounceTimeMS))), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
       this.apiRequest(payload);
     });
     if (!isNil(this.initialValue)) {
       this.value = this.initialValue;
     }
   }
-  /**
-   * Observable function to emit api events debounced and distinct for each event type,
-   * avoiding previous events being cancelled by new events if they occur inside the debounce time interval
-   *
-   * @param {(event: { event: TEvents }) => TEvents} keyExtractor function that will pass the event key to the groupBy operator
-   * @param {number} debounceTimeMs time to wait for each individual event emmited
-   * @returns
-   */
-  debounceDistinct(keyExtractor, debounceTimeMs) {
-    return source$ => source$.pipe(groupBy(keyExtractor), mergeMap(group$ => group$.pipe(debounceTime(debounceTimeMs), map(() => ({
-      event: group$.key
-    })))));
-  }
   /**
    * Retrieves the properties associated with the form field.
    *
@@ -2414,7 +2408,7 @@ class FormField {
   /**
    * Retrieves the current state value of the form field.
    *
-   * @returns {unknown} - The current state value of the form field.
+   * @returns {Record<string,unknown>} - The current state value of the form field.
    */
   get stateValue() {
     return this._stateValue;
@@ -2422,14 +2416,6 @@ class FormField {
   get metadata() {
     return this._metadata;
   }
-  /**
-   * Retrieves the concatenated string of errors associated with the form field.
-   *
-   * @returns {string} - The concatenated string of errors.
-   */
-  get errorsString() {
-    return this._errorsString;
-  }
   /**
    * Retrieves the current value of the form field.
    *
@@ -2444,6 +2430,7 @@ class FormField {
    * @param {unknown} value - The new value to be set.
    */
   set value(value) {
+    var _a, _b, _c;
     /*
       too much unstable, if the valueChangeEvent parses the template event
       value, might occur unexpected results
@@ -2463,22 +2450,19 @@ class FormField {
     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.maskValue(this.formatValue(val['_value']));
+      this._stateValue = ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) ? {
+        [this.mapper.events.setValue]: this.maskValue(this.formatValue(val['_value']))
+      } : {};
       this._metadata = val._metadata;
     } else {
       this._value = this.formatValue(val);
-      this._stateValue = this.maskValue(this.formatValue(val));
+      this._stateValue = ((_b = this.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) ? {
+        [(_c = this.mapper.events) === null || _c === void 0 ? void 0 : _c.setValue]: this.maskValue(this.formatValue(val))
+      } : {};
+      this.maskValue(this.formatValue(val));
       this._metadata = val;
     }
-    /*
-      update prop value attribute to sync with templating
-      currently doesn't need prop Subject emission since it's synced with value
-      to avoid excessive prop subject emissions on each keystroke
-    */
-    if (this.valuePropName) this._props = Object.assign(Object.assign({}, this.props), {
-      [this.valuePropName]: this.value
-    });
-    this.valueSubject$.next(this._stateValue);
+    this.stateValue && this.valueSubject$.next(this.stateValue);
     this.templateSubject$.next({
       key: this.name,
       event: 'ON_VALUE'
@@ -2528,10 +2512,17 @@ class FormField {
    * @param {TErrorMessages} errors - The new error messages to be set.
    */
   set errors(errors) {
+    var _a;
     if (typeof errors === 'undefined' || isEqual(errors, this.errors)) return;
     this._errors = errors;
-    this._errorsString = Object.values(this.errors).join(', ');
-    this.errorSubject$.next(Object.values(this.errors));
+    this.errorsList = Object.values(this.errors);
+    this.errorsString = this.errorsList.join(', ');
+    /**
+     * if any error receieves a list of errors, set a prop for it, currently only supporting a single string
+     */
+    ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setErrorMessage) && this.errorSubject$.next({
+      [this.mapper.events.setErrorMessage]: this.errorsString
+    });
     this.templateSubject$.next({
       key: this.name,
       event: 'ON_PROPS'
@@ -2567,11 +2558,8 @@ class FormField {
    * Mounts the form field by initializing necessary subjects and combining their streams.
    *
    * @param {object} mountOpts - Adapter mount options.
-   * @param {string} prop.valuePropName - Adapter value property name.
-   * @param {(event: unknown) => unknown} prop.valueChangeEvent - Adapter change event handler function
    * @param {(value: unknown) => unknown} prop.valueSubscription - Adapter value change function
    * @param {(payload: Partial<IState>) => unknown} prop.propsSubscription - Adapter prop change function
-   * @param {string} prop.errorMessagePropName - error message property name to set errors onto component
    * @returns {void}
    */
   mountField({
@@ -2667,10 +2655,6 @@ class FormField {
     });
     this._valid = valid;
     this.errors = errors;
-    // remove later
-    if (this.errorMessagePropName) this.props = Object.assign(Object.assign({}, this.props), {
-      [this.errorMessagePropName]: this.errorsString
-    });
   }
   /**
    * WIP expensive function to get updated field validity on each event
@@ -2863,7 +2847,7 @@ class FormCore {
    * @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
    */
   constructor(entry) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     this.schema = entry.schema;
     this.fields = new Map();
     this.initialValues = entry.initialValues || ((_a = entry.schema) === null || _a === void 0 ? void 0 : _a.initialValues);
@@ -2871,7 +2855,10 @@ class FormCore {
     this.method = entry.method || ((_c = entry.schema) === null || _c === void 0 ? void 0 : _c.method);
     this._iVars = entry.iVars || ((_d = entry.schema) === null || _d === void 0 ? void 0 : _d.iVars) || {};
     this.onSubmit = entry.onSubmit;
-    this.config = entry.config;
+    this.config = {
+      defaultAPIdebounceTimeMS: Number((_e = entry.config) === null || _e === void 0 ? void 0 : _e.defaultAPIdebounceTimeMS) ? Number((_f = entry.config) === null || _f === void 0 ? void 0 : _f.defaultAPIdebounceTimeMS) : DEFAULT_API_DEBOUNCE_TIME,
+      defaultStateRefreshTimeMS: Number((_g = entry.config) === null || _g === void 0 ? void 0 : _g.defaultStateRefreshTimeMS) ? Number((_h = entry.config) === null || _h === void 0 ? void 0 : _h.defaultStateRefreshTimeMS) : DEFAULT_STATE_REFRESH_TIME
+    };
     this.mappers = entry.mappers;
     this.schema && FormCore.checkIndexes(this.schema.components);
     this.templateSubject$ = new Subject();
@@ -2887,7 +2874,6 @@ class FormCore {
       key: IVARPROPNAME,
       event: 'ON_IVARS'
     });
-    // this.fieldEventsSubject$.subscribe(this.refreshApi.bind(this));
     entry.onData && this.subscribeData(entry.onData);
     /*
       mount events needs to occur on form level, only when all the fields are instantiated
@@ -2939,20 +2925,18 @@ class FormCore {
    * Subscribes to templates for dynamic updates.
    */
   subscribeTemplates() {
-    /*
-      @TODO fix removal of templates of removed fields, they are kept
-      tried: this.subscribedTemplates = [] and only stores the last one..
-    */
+    this.subscribedTemplates = [];
     this.fields.forEach(({
-      component,
-      props,
-      name,
-      validations,
-      visibilityConditions,
-      resetValues,
-      errorMessages,
-      apiSchema,
-      metadata
+      originalSchema: {
+        component,
+        props,
+        name,
+        validations,
+        visibilityConditions,
+        resetValues,
+        errorMessages,
+        api
+      }
     }, key) => {
       const template = {
         component,
@@ -2962,20 +2946,17 @@ class FormCore {
         visibilityConditions,
         resetValues,
         errorMessages,
-        apiSchema,
-        metadata
+        apiSchema: api
       };
       traverseObject(template, key).forEach(element => this.subscribedTemplates.push(element));
     });
-    // console.log(subscribedProps);
   }
   /**
    *
    * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
    */
   subscribeData(callback) {
-    var _a, _b;
-    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(Number((_a = this.config) === null || _a === void 0 ? void 0 : _a.defaultStateRefreshTimeMS) ? Number((_b = this.config) === null || _b === void 0 ? void 0 : _b.defaultStateRefreshTimeMS) : 100), map(({
+    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS), map(({
       key
     }) => ({
       field: key,
@@ -3002,8 +2983,12 @@ class FormCore {
       const value = get(this.iVars, [property, ...path]);
       return value;
     }
-    if (!this.fields.has(key)) return console.warn(`failed to get value from ${key}`);
-    return path.length > 0 ? get(this.fields.get(key)[property], path) : this.fields.get(key)[property];
+    const field = this.fields.get(key);
+    if (!field) return console.warn(`failed to get value from ${key}`);
+    if (property === 'props' && path[0] === field.valuePropName) {
+      return field.stateValue;
+    }
+    return path.length > 0 ? get(field[property], path) : field[property];
   }
   /**
    * Sets the value of a property in a field.
@@ -3036,7 +3021,6 @@ class FormCore {
         now using key !== originKey, check if any recursion error occurs
       **/
       if (property === 'props' && path[0] === field.valuePropName && key !== originKey) {
-        // field.value = value;
         field.emitValue({
           event: 'ON_FIELD_CHANGE',
           value
@@ -3076,7 +3060,6 @@ class FormCore {
     const operatorRegex = /\s*(\|\||&&|!)\s*/g;
     const splittedString = extractedValues.map(el => el.split(operatorRegex));
     const result = splittedString.map(splittedStringVal => {
-      // console.log(splittedStringVal)
       return splittedStringVal.filter(Boolean).reduce((acc, curr) => {
         if (curr.match(/^\|\||&&|!$/)) {
           return `${acc}${curr}`;
@@ -3120,7 +3103,6 @@ class FormCore {
     });
     return result.map(el => {
       try {
-        // console.log(el);
         return new Function(`return ${el}`)();
       } catch (e) {
         console.log(e);
@@ -3193,34 +3175,6 @@ class FormCore {
       }
     });
   }
-  /**
-   * Refreshes api observed fields.
-   *
-   * @param {object} options - Options for refreshing api.
-   * @param {string} options.key - The key of the field triggering the update.
-   */
-  refreshApi({
-    key
-  }) {
-    /*
-      global api notifications needs to have field dependency array
-      in order to be reliable, disabled for now
-    */
-    return key;
-    // const emmittedFields: string[] = [];
-    // this.subscribedTemplates.forEach((template) => {
-    //   if (
-    //     template.originFieldKeys.includes(key) &&
-    //     template.originPropertyKeys.includes('api') &&
-    //     !emmittedFields.includes(template.destinationKey)
-    //   ) {
-    //     emmittedFields.push(template.destinationKey);
-    //     this.fields
-    //       .get(template.destinationKey)
-    //       ?.emitEvents({ event: 'ON_API_RESPONSE' });
-    //   }
-    // });
-  }
   /**
    * Validates visibility conditions for a given event and updates field visibility accordingly.
    *
@@ -3291,20 +3245,23 @@ class FormCore {
    *
    * @param fieldSchema
    */
-  addField(fieldSchema, mapper) {
-    var _a;
+  addField({
+    fieldSchema,
+    mapperElement
+  }) {
+    var _a, _b, _c;
     if (this.fields.has(fieldSchema.name)) {
       throw new Error(`field name ${fieldSchema.name} already defined`);
     }
-    const mapperConfig = mapper || this.mappers.find(mapEl => mapEl.componentName === fieldSchema.component);
-    if (!mapperConfig) throw new Error(`mapper not found for ${fieldSchema.component}, add it to the mappers configuration`);
+    const mapper = mapperElement || ((_a = this.mappers) === null || _a === void 0 ? void 0 : _a.find(mapEl => mapEl.componentName === fieldSchema.component));
+    if (!mapper) throw new Error(`mapper not found for ${fieldSchema.component}, add it to the mappers configuration`);
     this.fields.set(fieldSchema.name, new FormField({
       schemaComponent: fieldSchema,
-      mapper: mapperConfig,
+      mapper,
       children: fieldSchema.children ? fieldSchema.children.map(el => el.name) : [],
       validateVisibility: this.validateVisibility.bind(this),
       resetValue: this.resetValue.bind(this),
-      initialValue: (_a = this.initialValues) === null || _a === void 0 ? void 0 : _a[fieldSchema.name],
+      initialValue: (_b = this.initialValues) === null || _b === void 0 ? void 0 : _b[fieldSchema.name],
       templateSubject$: this.templateSubject$,
       fieldEventSubject$: this.fieldEventSubject$,
       dataSubject$: this.dataSubject$,
@@ -3315,6 +3272,21 @@ class FormCore {
       event: 'ON_FIELDS',
       key: fieldSchema.name
     });
+    (_c = this.fields.get(fieldSchema.name)) === null || _c === void 0 ? void 0 : _c.emitEvents({
+      event: 'ON_FIELD_MOUNT'
+    });
+  }
+  removeField({
+    key
+  }) {
+    var _a;
+    (_a = this.fields.get(key)) === null || _a === void 0 ? void 0 : _a.destroyField();
+    this.fields.delete(key);
+    this.subscribeTemplates();
+    this.templateSubject$.next({
+      key,
+      event: 'ON_FIELDS'
+    });
   }
   /**
    * Serializes the schema structure to create form fields.
@@ -3325,10 +3297,10 @@ class FormCore {
   serializeStructure(struct, path) {
     if (!struct) return;
     struct.forEach(structElement => {
-      var _a, _b;
+      var _a, _b, _c;
       const currField = this.fields.get(structElement.name);
       if (!currField) {
-        const mapper = this.mappers.find(mapEl => mapEl.componentName === structElement.component);
+        const mapper = (_a = this.mappers) === null || _a === void 0 ? void 0 : _a.find(mapEl => mapEl.componentName === structElement.component);
         if (!mapper) throw new Error(`mapper not found for ${structElement.component}, add it to the mappers configuration`);
         this.fields.set(structElement.name, new FormField({
           schemaComponent: structElement,
@@ -3337,14 +3309,14 @@ class FormCore {
           children: structElement.children ? structElement.children.map(el => el.name) : [],
           validateVisibility: this.validateVisibility.bind(this),
           resetValue: this.resetValue.bind(this),
-          initialValue: (_a = this.initialValues) === null || _a === void 0 ? void 0 : _a[structElement.name],
+          initialValue: (_b = this.initialValues) === null || _b === void 0 ? void 0 : _b[structElement.name],
           templateSubject$: this.templateSubject$,
           fieldEventSubject$: this.fieldEventSubject$,
           dataSubject$: this.dataSubject$,
           config: this.config
         }));
       } else {
-        currField.children = ((_b = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _b === void 0 ? void 0 : _b.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
+        currField.children = ((_c = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _c === void 0 ? void 0 : _c.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
         currField.path = path;
         currField.templateSubject$ = this.templateSubject$;
       }
@@ -3434,10 +3406,9 @@ class FormCore {
     };
   }
   subscribeFieldEvent({
-    event,
     callback
   }) {
-    const sub = this.fieldEventSubject$.pipe(filter(payload => payload.event === event)).subscribe({
+    const sub = this.fieldEventSubject$.pipe(groupBy(payload => payload.event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS)))).subscribe({
       next: callback
     });
     return sub;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/form-engine-core",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.8",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",

package/src/constants/constants.d.ts

@@ -0,0 +1,3 @@
+declare const DEFAULT_API_DEBOUNCE_TIME = 1000;
+declare const DEFAULT_STATE_REFRESH_TIME = 100;
+export { DEFAULT_API_DEBOUNCE_TIME, DEFAULT_STATE_REFRESH_TIME };

package/src/interfaces/state.d.ts

@@ -1,27 +1,22 @@
-import { TApiResponse } from '../types/schema';
 /**
  * @interface IState
  * Represents the state of a form component.
  *
  * @property {string[]} errors - The list of error messages.
  * @property {boolean} visibility - The visibility state of the component.
- * @property {TApiResponse} apiResponse - The API response data.
  * @property {Record<string, unknown>} props - The properties of the component.
  *
  * @example
  * ```typescript
  * const state: IState = {
- *   errors: ['This field is required.'],
  *   visibility: true,
- *   apiResponse: { default: { response: null } },
  *   props: { type: 'text', value: 'John' }
  * };
  * ```
  */
 interface IState {
-    errors: string[];
     visibility: boolean;
-    apiResponse: TApiResponse;
     props: Record<string, unknown>;
+    errors: Record<string, unknown>;
 }
 export { IState };

package/src/managers/field.d.ts

@@ -12,6 +12,7 @@ declare class FormField {
     component: string;
     path?: string;
     children?: string[];
+    originalSchema: IComponentSchema;
     validations?: TEvent<TValidationMethods>;
     visibilityConditions?: TVisibility[];
     resetValues?: TResetValueMethods[];
@@ -20,22 +21,22 @@ declare class FormField {
     formatters?: TFormatters;
     masks?: TMasks;
     valuePropName?: string;
-    errorMessagePropName?: string;
     initialValue?: unknown;
     config: Required<TSchemaFormConfig>;
     mapper: TMapper<unknown>;
+    errorsString: string;
+    errorsList: string[];
     private _props;
     private _value;
     private _stateValue;
     private _metadata;
     private _visibility;
     private _errors;
-    private _errorsString;
     private _api;
     private _valid;
     propsSubject$: Subject<Record<string, unknown>>;
-    errorSubject$: Subject<string[]>;
-    valueSubject$: Subject<unknown>;
+    errorSubject$: Subject<Record<string, unknown>>;
+    valueSubject$: Subject<Record<string, unknown>>;
     visibilitySubject$: Subject<boolean>;
     apiSubject$: Subject<TApiResponse>;
     fieldEventSubject$: Subject<TFieldEvent>;
@@ -103,21 +104,6 @@ declare class FormField {
      * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
      */
     initializeObservers(): void;
-    /**
-     * Observable function to emit api events debounced and distinct for each event type,
-     * avoiding previous events being cancelled by new events if they occur inside the debounce time interval
-     *
-     * @param {(event: { event: TEvents }) => TEvents} keyExtractor function that will pass the event key to the groupBy operator
-     * @param {number} debounceTimeMs time to wait for each individual event emmited
-     * @returns
-     */
-    debounceDistinct(keyExtractor: (event: {
-        event: TEvents;
-    }) => TEvents, debounceTimeMs: number): (source$: Observable<{
-        event: TEvents;
-    }>) => Observable<{
-        event: TEvents;
-    }>;
     /**
      * Retrieves the properties associated with the form field.
      *
@@ -133,16 +119,10 @@ declare class FormField {
     /**
      * Retrieves the current state value of the form field.
      *
-     * @returns {unknown} - The current state value of the form field.
+     * @returns {Record<string,unknown>} - The current state value of the form field.
      */
-    get stateValue(): unknown;
+    get stateValue(): Record<string, unknown>;
     get metadata(): unknown;
-    /**
-     * Retrieves the concatenated string of errors associated with the form field.
-     *
-     * @returns {string} - The concatenated string of errors.
-     */
-    get errorsString(): string;
     /**
      * Retrieves the current value of the form field.
      *
@@ -201,15 +181,12 @@ declare class FormField {
      * Mounts the form field by initializing necessary subjects and combining their streams.
      *
      * @param {object} mountOpts - Adapter mount options.
-     * @param {string} prop.valuePropName - Adapter value property name.
-     * @param {(event: unknown) => unknown} prop.valueChangeEvent - Adapter change event handler function
      * @param {(value: unknown) => unknown} prop.valueSubscription - Adapter value change function
      * @param {(payload: Partial<IState>) => unknown} prop.propsSubscription - Adapter prop change function
-     * @param {string} prop.errorMessagePropName - error message property name to set errors onto component
      * @returns {void}
      */
     mountField({ valueSubscription, propsSubscription, }: {
-        valueSubscription: (value: unknown) => void;
+        valueSubscription: (value: Record<string, unknown>) => void;
         propsSubscription: (payload: Partial<IState>) => void;
     }): void;
     /**
@@ -220,10 +197,7 @@ declare class FormField {
      * @returns {void}
      */
     emitValue(prop: {
-        value: unknown | {
-            _value: unknown;
-            _stateValue: unknown;
-        };
+        value: unknown;
         event: TEvents;
     }): void;
     /**

package/src/managers/form.d.ts

@@ -18,7 +18,7 @@ declare class FormCore {
         key: string;
         event: TMutationEvents;
     }>;
-    submitSubject$: Subject<TFormValues>;
+    submitSubject$: Subject<TFormValues<Record<string, unknown>>>;
     fieldEventSubject$: Subject<TFieldEvent>;
     dataSubject$: Subject<{
         key: string;
@@ -28,9 +28,9 @@ declare class FormCore {
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
     method?: string;
-    config?: TSchemaFormConfig;
-    mappers: TMapper<unknown>[];
-    onSubmit?: (data: TFormValues) => void;
+    config: Required<TSchemaFormConfig>;
+    mappers?: TMapper<unknown>[];
+    onSubmit?: (data: TFormValues<Record<string, unknown>>) => void;
     /**
      * Creates an instance of FormCore.
      *
@@ -72,7 +72,7 @@ declare class FormCore {
      */
     subscribeData(callback: (payload: {
         field: string;
-        data: TFormValues;
+        data: TFormValues<Record<string, unknown>>;
     }) => void): void;
     /**
      * Gets the value of a property from a field.
@@ -140,15 +140,6 @@ declare class FormCore {
         key: string;
         event: TMutationEvents;
     }): void;
-    /**
-     * Refreshes api observed fields.
-     *
-     * @param {object} options - Options for refreshing api.
-     * @param {string} options.key - The key of the field triggering the update.
-     */
-    refreshApi({ key }: {
-        key: string;
-    }): string;
     /**
      * Validates and collects the names of form fields in the provided schema structure.
      *
@@ -186,7 +177,13 @@ declare class FormCore {
      *
      * @param fieldSchema
      */
-    addField(fieldSchema: IComponentSchema, mapper?: TMapper<unknown>): void;
+    addField({ fieldSchema, mapperElement, }: {
+        fieldSchema: IComponentSchema;
+        mapperElement?: TMapper<unknown>;
+    }): void;
+    removeField({ key }: {
+        key: string;
+    }): void;
     /**
      * Serializes the schema structure to create form fields.
      *
@@ -219,9 +216,8 @@ declare class FormCore {
      *
      * @returns {TFormValues} The current form values.
      */
-    getFormValues(): TFormValues;
-    subscribeFieldEvent({ event, callback, }: {
-        event: TEvents;
+    getFormValues(): TFormValues<Record<string, unknown>>;
+    subscribeFieldEvent({ callback, }: {
         callback: (payload: TFieldEvent) => void;
     }): Subscription;
     /**

package/src/managers/formGroup.d.ts

@@ -18,7 +18,7 @@ declare class FormGroup {
      */
     createFormWithIndex({ index, mappers, }: {
         index: string;
-        mappers: TMapper<unknown>[];
+        mappers?: TMapper<unknown>[];
     }): void;
     /**
      * Adds a form instance to the form group.

package/src/types/form.d.ts

@@ -1,10 +1,10 @@
 import { IFormSchema } from '../interfaces/schema';
 import { TMapper } from './mapper';
 /**
- * @type TFormValues
- * Represents the values and state of a form.
+ * @type TFormValues<T>
+ * Represents the values and state of a form. It has a generic type that allows the importer to determine which type values key will return.
  *
- * @property {Record<string, unknown>} values - The current values of the form fields.
+ * @property {Generic Type} values - The current values of the form fields.
  * @property {string[]} erroredFields - A list of field names that have errors.
  * @property {boolean} isValid - Indicates whether the form is valid.
  *
@@ -17,8 +17,8 @@ import { TMapper } from './mapper';
  * };
  * ```
  */
-type TFormValues = {
-    values: Record<string, unknown>;
+type TFormValues<T> = {
+    values: T;
     erroredFields: string[];
     isValid: boolean;
 };
@@ -41,11 +41,11 @@ type TFormValues = {
  */
 type TFormEntry = Omit<IFormSchema, 'components'> & {
     schema?: IFormSchema;
-    onSubmit?: (data: TFormValues) => void;
-    onData?: (payload: {
+    onSubmit?: <T>(data: TFormValues<T>) => void;
+    onData?: <T>(payload: {
         field: string;
-        data: TFormValues;
+        data: TFormValues<T>;
     }) => void;
-    mappers: TMapper<unknown>[];
+    mappers?: TMapper<unknown>[];
 };
 export { TFormValues, TFormEntry };