@bolttech/form-engine-core 0.0.1-beta.1 → 0.0.1-beta.3

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subscription, Subject, combineLatest, startWith, groupBy, mergeMap, debounceTime, map } from 'rxjs';
+import { Subscription, Subject, combineLatest, startWith, filter, groupBy, mergeMap, debounceTime, 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';
@@ -2265,6 +2265,7 @@ class FormField {
    *
    * @param {object} options - Configuration options for the form field.
    * @param {IComponentSchema} options.schemaComponent - The schema definition for the form field.
+   * @param {TSchemaFormConfig} options.config - The schema default configuration for debounced actions.
    * @param {string} [options.path] - The path within the form field (used internally during recursion).
    * @param {string[]} options.children - An array of children fields names.
    * @param {Function} options.validateVisibility - A function to validate the visibility of the field.
@@ -2274,6 +2275,7 @@ class FormField {
    */
   constructor({
     schemaComponent,
+    config,
     path,
     children,
     validateVisibility,
@@ -2286,6 +2288,10 @@ class FormField {
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     this.fieldStateSubscription$ = new Subscription();
+    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
+    };
     this.name = schemaComponent.name;
     this.component = schemaComponent.component;
     this.path = path;
@@ -2324,6 +2330,7 @@ class FormField {
         return acc;
       }, {})
     };
+    this._errors = {};
     this._errorsString = '';
     this._valid = false;
     this.initializeObservers();
@@ -2332,6 +2339,7 @@ class FormField {
    * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
    */
   initializeObservers() {
+    var _a;
     if (!this.valueSubject$ || this.valueSubject$.closed) {
       this.valueSubject$ = new Subject();
     }
@@ -2361,7 +2369,7 @@ class FormField {
     });
     !this.apiEventQueueSubject$.observed && this.apiEventQueueSubject$.pipe(this.debounceDistinct(({
       event
-    }) => event, 1000)).subscribe(payload => {
+    }) => event, (_a = this.config) === null || _a === void 0 ? void 0 : _a.defaultAPIdebounceTimeMS), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
       this.apiRequest(payload);
     });
     if (!isNil(this.initialValue)) {
@@ -2659,6 +2667,19 @@ class FormField {
       [this.errorMessagePropName]: this.errorsString
     });
   }
+  /**
+   * WIP expensive function to get updated field validity on each event
+   */
+  updateValidityFlag() {
+    var _a;
+    let valid = true;
+    const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.config;
+    schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
+      const error = validations[validationKey](this.value, schemaValidations);
+      valid = !error && valid;
+    });
+    this._valid = valid;
+  }
   /**
    * Formats the field value using the specified formatters, if available.
    *
@@ -2802,7 +2823,7 @@ class FormField {
    * @returns {void}
    */
   subscribeState(callback) {
-    this.fieldStateSubscription$ = this.fieldState$.pipe(debounceTime(100)).subscribe({
+    this.fieldStateSubscription$ = this.fieldState$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS)).subscribe({
       next: callback
     });
   }
@@ -2845,6 +2866,7 @@ 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.mappers = entry.mappers;
     this.schema && FormCore.checkIndexes(this.schema.components);
     this.templateSubject$ = new Subject();
@@ -2947,7 +2969,8 @@ class FormCore {
    * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
    */
   subscribeData(callback) {
-    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(100), map(({
+    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(({
       key
     }) => ({
       field: key,
@@ -3258,6 +3281,36 @@ class FormCore {
       });
     });
   }
+  /**
+   * Adds a field onto the form instance regardless there is a schema or not
+   *
+   * @param fieldSchema
+   */
+  addField(fieldSchema) {
+    var _a;
+    if (this.fields.has(fieldSchema.name)) {
+      throw new Error(`field name ${fieldSchema.name} already defined`);
+    }
+    const mapper = this.mappers.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,
+      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],
+      templateSubject$: this.templateSubject$,
+      apiResponseSubject$: this.apiResponseSubject$,
+      dataSubject$: this.dataSubject$,
+      config: this.config
+    }));
+    this.subscribeTemplates();
+    this.refreshTemplates({
+      event: 'ON_FIELDS',
+      key: fieldSchema.name
+    });
+  }
   /**
    * Serializes the schema structure to create form fields.
    *
@@ -3282,7 +3335,8 @@ class FormCore {
           initialValue: (_a = this.initialValues) === null || _a === void 0 ? void 0 : _a[structElement.name],
           templateSubject$: this.templateSubject$,
           apiResponseSubject$: this.apiResponseSubject$,
-          dataSubject$: this.dataSubject$
+          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) || [];
@@ -3393,6 +3447,7 @@ class FormCore {
     this.templateSubject$.unsubscribe();
     this.apiResponseSubject$.unsubscribe();
     this.dataSubject$.unsubscribe();
+    this.fields.forEach(field => field.destroyField());
   }
 }
 /**
@@ -3429,6 +3484,25 @@ class FormGroup {
   constructor() {
     this.forms = new Map();
   }
+  /**
+   * Creates an empty form with given index
+   *
+   * @param {string} options.index
+   * @param {TMapper<unknown>} options.mappers
+   */
+  createFormWithIndex({
+    index,
+    mappers
+  }) {
+    const formInstance = new FormCore({
+      index,
+      mappers
+    });
+    this.addForm({
+      key: index,
+      formInstance
+    });
+  }
   /**
    * Adds a form instance to the form group.
    *
@@ -3471,6 +3545,20 @@ class FormGroup {
     (_a = this.forms.get(key)) === null || _a === void 0 ? void 0 : _a.destroy();
     this.forms.delete(key);
   }
+  /**
+   * removes a field given a form and field index
+   *
+   * @param {string} options.formIndex
+   * @param {string} options.fieldIndex
+   */
+  removeField({
+    formIndex,
+    fieldIndex
+  }) {
+    var _a, _b, _c;
+    (_b = (_a = this.forms.get(formIndex)) === null || _a === void 0 ? void 0 : _a.fields.get(fieldIndex)) === null || _b === void 0 ? void 0 : _b.destroyField();
+    (_c = this.forms.get(formIndex)) === null || _c === void 0 ? void 0 : _c.fields.delete(fieldIndex);
+  }
   /**
    * Checks if the specified key already exists in the form group.
    *

package/package.json

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

package/src/interfaces/schema.d.ts

@@ -1,4 +1,4 @@
-import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetValueMethods, TValidationMethods, TVisibility } from '../types/schema';
+import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetValueMethods, TSchemaFormConfig, TValidationMethods, TVisibility } from '../types/schema';
 /**
  * @interface IComponentSchema
  * Represents the schema for a component within a form.
@@ -75,6 +75,7 @@ interface IFormSchema {
     index: string;
     action?: string;
     method?: string;
+    config?: TSchemaFormConfig;
     initialValues?: Record<string, unknown>;
     iVars?: Record<string, unknown>;
     components?: IComponentSchema[];

package/src/managers/field.d.ts

@@ -1,5 +1,5 @@
 import { Observable, Subject, Subscription } from 'rxjs';
-import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TEvent, TFormatters, TMasks, TResetValueMethods, TValidationMethods, TVisibility } from '../types/schema';
+import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TEvent, TFormatters, TMasks, TResetValueMethods, TSchemaFormConfig, TValidationMethods, TVisibility } from '../types/schema';
 import { IComponentSchema } from '../interfaces/schema';
 import { IState } from '../interfaces/state';
 import { TEvents, TMutationEvents, TValueChangeEvent } from '../types/event';
@@ -11,7 +11,7 @@ declare class FormField {
     name: string;
     component: string;
     path?: string;
-    children: string[];
+    children?: string[];
     validations?: TEvent<TValidationMethods>;
     visibilityConditions?: TVisibility[];
     resetValues?: TResetValueMethods[];
@@ -22,6 +22,7 @@ declare class FormField {
     valuePropName?: string;
     errorMessagePropName?: string;
     initialValue?: unknown;
+    config: Required<TSchemaFormConfig>;
     mapper: TMapper<unknown>;
     private _props;
     private _value;
@@ -67,6 +68,7 @@ declare class FormField {
      *
      * @param {object} options - Configuration options for the form field.
      * @param {IComponentSchema} options.schemaComponent - The schema definition for the form field.
+     * @param {TSchemaFormConfig} options.config - The schema default configuration for debounced actions.
      * @param {string} [options.path] - The path within the form field (used internally during recursion).
      * @param {string[]} options.children - An array of children fields names.
      * @param {Function} options.validateVisibility - A function to validate the visibility of the field.
@@ -74,10 +76,11 @@ declare class FormField {
      * @param {unknown} [options.initialValue] - The initial value of the form field.
      * @param {Subject<{ key: string }>} options.templateSubject$ - A subject for template updates.
      */
-    constructor({ schemaComponent, path, children, validateVisibility, resetValue, initialValue, templateSubject$, apiResponseSubject$, dataSubject$, mapper, }: {
+    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, initialValue, templateSubject$, apiResponseSubject$, dataSubject$, mapper, }: {
         schemaComponent: IComponentSchema;
+        config?: TSchemaFormConfig;
         path?: string;
-        children: string[];
+        children?: string[];
         validateVisibility: (payload: {
             event: TEvents;
             key: string;
@@ -245,6 +248,10 @@ declare class FormField {
     setFieldValidity({ event }: {
         event: TEvents;
     }): void;
+    /**
+     * WIP expensive function to get updated field validity on each event
+     */
+    updateValidityFlag(): void;
     /**
      * Formats the field value using the specified formatters, if available.
      *

package/src/managers/form.d.ts

@@ -1,6 +1,7 @@
 import { IFormField } from './field';
 import { Subject, Subscription } from 'rxjs';
 import { IComponentSchema, IFormSchema } from '../interfaces/schema';
+import { TSchemaFormConfig } from '../types/schema';
 import { TSubscribedTemplates } from '../types/template';
 import { TEvents, TMutationEvents } from '../types/event';
 import { TFormEntry, TFormValues } from '../types/form';
@@ -29,6 +30,7 @@ declare class FormCore {
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
     method?: string;
+    config?: TSchemaFormConfig;
     mappers: TMapper<unknown>[];
     onSubmit?: (data: TFormValues) => void;
     /**
@@ -181,6 +183,12 @@ declare class FormCore {
         event: TEvents;
         key: string;
     }): void;
+    /**
+     * Adds a field onto the form instance regardless there is a schema or not
+     *
+     * @param fieldSchema
+     */
+    addField(fieldSchema: IComponentSchema): void;
     /**
      * Serializes the schema structure to create form fields.
      *

package/src/managers/formGroup.d.ts

@@ -1,5 +1,6 @@
 import { TFormValues } from '../types/form';
-import { TFormCore } from './form';
+import { TMapper } from '../types/mapper';
+import { FormCore, TFormCore } from './form';
 /**
  * Represents a group that manages multiple forms.
  */
@@ -9,6 +10,16 @@ declare class FormGroup {
      * Creates an instance of FormGroup.
      */
     constructor();
+    /**
+     * Creates an empty form with given index
+     *
+     * @param {string} options.index
+     * @param {TMapper<unknown>} options.mappers
+     */
+    createFormWithIndex({ index, mappers, }: {
+        index: string;
+        mappers: TMapper<unknown>[];
+    }): void;
     /**
      * Adds a form instance to the form group.
      *
@@ -29,7 +40,7 @@ declare class FormGroup {
      */
     getForm({ key }: {
         key: string;
-    }): import("./form").FormCore | undefined;
+    }): FormCore | undefined;
     /**
      * Removes a form instance from the form group.
      *
@@ -39,6 +50,16 @@ declare class FormGroup {
     removeForm({ key }: {
         key: string;
     }): void;
+    /**
+     * removes a field given a form and field index
+     *
+     * @param {string} options.formIndex
+     * @param {string} options.fieldIndex
+     */
+    removeField({ formIndex, fieldIndex }: {
+        formIndex: string;
+        fieldIndex: string;
+    }): void;
     /**
      * Checks if the specified key already exists in the form group.
      *

package/src/managers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './form';
+export * from './field';
+export * from './formGroup';

package/src/types/schema.d.ts

@@ -739,4 +739,14 @@ type TApiResponse = {
         response: unknown;
     }>;
 };
-export { TApiConfig, TErrorMessages, TResetValues, TVisibilityConditions, TValidations, TMasks, TProps, TResetValueMethods, TFormatters, TValidationMethods, TEvent, TVisibility, TApiEvent, TApiResponse, TLengthValidation, TCreditCardMatch, TDocumentValidation, TCallbackValidation, TBetweenValidation, TMaskGeneric, TSplitterFormatterValue, TCurrencyMask, TDateOperatorsValidation, TConditionsValidationSet, TConditionsValidation, TMultipleValidation, TAvailableValidations, TDateValidation, TBetweenDatesValidation, TDateFormatsValidation, TDateInterval, };
+/**
+ * Represents the schema config structure
+ *
+ * @property {number} defaultAPIdebounceTimeMS - default API debounce time between request events.
+ * @property {number} [defaultStateRefreshTimeMS] - default state refresh between events side effects.
+ */
+type TSchemaFormConfig = {
+    defaultAPIdebounceTimeMS?: number;
+    defaultStateRefreshTimeMS?: number;
+};
+export { TApiConfig, TErrorMessages, TResetValues, TVisibilityConditions, TValidations, TMasks, TProps, TResetValueMethods, TFormatters, TValidationMethods, TEvent, TVisibility, TApiEvent, TApiResponse, TSchemaFormConfig, TLengthValidation, TCreditCardMatch, TDocumentValidation, TCallbackValidation, TBetweenValidation, TMaskGeneric, TSplitterFormatterValue, TCurrencyMask, TDateOperatorsValidation, TConditionsValidationSet, TConditionsValidation, TMultipleValidation, TAvailableValidations, TDateValidation, TBetweenDatesValidation, TDateFormatsValidation, TDateInterval, };