@bolttech/form-engine-core 0.0.1-beta.7 → 0.0.1-beta.9

package/index.esm.js

@@ -174,6 +174,53 @@ function traverseObject(obj, path) {
   }
   return result;
 }
+/**
+ * Recursively creates a nested object structure based on the given parts array,
+ * setting the specified value at the appropriate nested level.
+ *
+ * @param {string[]} parts - Array of strings representing the keys for the nested object.
+ * @param {Record<string, unknown>} subObject - The sub-object to be updated or used for recursion.
+ * @param {unknown} value - The value to be set at the final nested level.
+ * @returns {Record<string, unknown>} - The updated object with the new nested structure and value.
+ */
+const getNewPart = (parts, subObject, value) => {
+  const clonedParts = [...parts];
+  clonedParts.splice(0, 1);
+  const part = parts.length !== 1 ? getNewPart(clonedParts, subObject ? subObject[parts[0]] : {}, value) : value;
+  return Object.assign(Object.assign({}, subObject), {
+    [parts[0]]: part
+  });
+};
+/**
+ * Encapsulates in a given object, at a given path the provided value
+ *
+ * @example
+ * ORIGINAL object
+ *
+ * encapsulateIn({maintain: 'spread_me'}, 'a.b.c','test')
+ *
+ * RESULT
+ *
+ * {
+ *  maintain: 'spread_me',
+ *    c: 'test
+ *  }
+ * }
+ *
+ * @param origin - The original object where the new value will be appended
+ * @param path - The path at which the new value will be placed
+ * @param value - The new value
+ * @returns One new object with the new value at the provided path merged with the given object
+ */
+const encapsulateIn = (origin, path, value) => {
+  const parts = path.split('.');
+  if (parts.length === 1) {
+    return Object.assign(Object.assign({}, origin), {
+      [path]: value
+    });
+  }
+  return getNewPart(parts, origin, value);
+};
 
 /**
  * Splits a string by inserting specified values at given positions.
@@ -681,16 +728,9 @@ const currency = (value, masks) => {
   if (integerPart === '') {
     integerPart = '0';
   }
-  console.log('Before', {
-    convertedValue
-  });
   if (align === 'right' && String(value).endsWith(' ')) {
     convertedValue = convertedValue.slice(0, -1);
   }
-  console.log('After', {
-    value,
-    convertedValue
-  });
   let newRawValue = integerPart;
   let decimalPart = convertedValue.slice(convertedValue.length - precision);
   if (precision > 0) {
@@ -2297,6 +2337,7 @@ class FormField {
       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.nameToSubmit = schemaComponent.nameToSubmit;
     this.component = schemaComponent.component;
     this.path = path;
     this.children = children;
@@ -2309,7 +2350,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;
@@ -2318,8 +2358,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 = {
@@ -2335,7 +2379,6 @@ class FormField {
       }, {})
     };
     this._errors = {};
-    this._errorsString = '';
     this._valid = false;
     this.initializeObservers();
   }
@@ -2343,6 +2386,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();
     }
@@ -2365,10 +2409,11 @@ 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(groupBy(({
       event
@@ -2404,7 +2449,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;
@@ -2412,14 +2457,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.
    *
@@ -2434,6 +2471,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
@@ -2453,14 +2491,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;
     }
-    this.valueSubject$.next(this._stateValue);
+    this.stateValue && this.valueSubject$.next(this.stateValue);
     this.templateSubject$.next({
       key: this.name,
       event: 'ON_VALUE'
@@ -2510,10 +2553,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'
@@ -2549,11 +2599,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({
@@ -2634,14 +2681,19 @@ class FormField {
     const errors = Object.assign({}, this.errors);
     const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.config;
     schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
-      var _a, _b;
+      var _a;
       const error = validations[validationKey](this.value, schemaValidations);
       // setting valid flag
       valid = !error && valid;
       // setting error messages
       if (((_a = this.validations) === null || _a === void 0 ? void 0 : _a.events.includes(event)) || event === 'ON_FORM_SUBMIT') {
-        if (error && ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[validationKey])) {
-          errors[validationKey] = this.errorMessages[validationKey];
+        if (error && this.errorMessages) {
+          if (validationKey in this.errorMessages) {
+            const messages = this.errorMessages;
+            errors[validationKey] = messages[validationKey];
+          } else if ('default' in this.errorMessages) {
+            errors[validationKey] = this.errorMessages.default;
+          }
         } else {
           delete errors[validationKey];
         }
@@ -2649,10 +2701,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
@@ -3387,11 +3435,11 @@ class FormCore {
    * @returns {TFormValues} The current form values.
    */
   getFormValues() {
-    const values = {};
+    let values = {};
     const erroredFields = [];
     this.fields.forEach((val, key) => {
       if (val.value) {
-        values[key] = val.value;
+        values = Object.assign(Object.assign({}, values), encapsulateIn(values, val.nameToSubmit || key, val.value));
       }
       if (!val.valid) {
         erroredFields.push(key);

package/package.json

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

package/src/helpers/helpers.d.ts

@@ -61,4 +61,26 @@ declare function extractFieldKeys(expression: string): {
  * ```
  */
 declare function traverseObject(obj: any, path?: string): TSubscribedTemplates[];
-export { makeRequest, traverseObject, extractFieldKeys };
+/**
+ * Encapsulates in a given object, at a given path the provided value
+ *
+ * @example
+ * ORIGINAL object
+ *
+ * encapsulateIn({maintain: 'spread_me'}, 'a.b.c','test')
+ *
+ * RESULT
+ *
+ * {
+ *  maintain: 'spread_me',
+ *    c: 'test
+ *  }
+ * }
+ *
+ * @param origin - The original object where the new value will be appended
+ * @param path - The path at which the new value will be placed
+ * @param value - The new value
+ * @returns One new object with the new value at the provided path merged with the given object
+ */
+declare const encapsulateIn: (origin: Record<string, unknown>, path: string, value: unknown) => Record<string, unknown>;
+export { makeRequest, traverseObject, extractFieldKeys, encapsulateIn };

package/src/interfaces/schema.d.ts

@@ -6,6 +6,7 @@ import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetV
  * @property {string} component - The type of component (e.g., 'input', 'button').
  * @property {TProps} props - The properties of the component.
  * @property {string} name - The name of the component.
+ * @property {string} nameToSubmit - The name of the field when submit values (optional).
  * @property {TEvent<TValidationMethods>} [validations] - The validation methods for the component.
  * @property {TVisibility[]} [visibilityConditions] - The visibility conditions for the component.
  * @property {TResetValueMethods[]} [resetValues] - The reset value methods for the component.
@@ -21,6 +22,7 @@ import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetV
  *   component: 'input',
  *   props: { type: 'text', placeholder: 'Enter your name' },
  *   name: 'name',
+ *   nameToSubmit: 'applicant.firstName',
  *   validations: { config: { required: true }, events: [{ eventName: 'ON_FIELD_BLUR' }] },
  *   visibilityConditions: [{ conditions: { field: 'age', value: 18 } }],
  *   resetValues: [{ field: 'age', resetTo: '' }],
@@ -36,6 +38,7 @@ interface IComponentSchema {
     component: string;
     props?: TProps;
     name: string;
+    nameToSubmit?: string;
     validations?: TEvent<TValidationMethods>;
     api?: TApiEvent;
     visibilityConditions?: TVisibility[];

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

@@ -9,6 +9,7 @@ import { TMapper } from '../types/mapper';
  */
 declare class FormField {
     name: string;
+    nameToSubmit?: string;
     component: string;
     path?: string;
     children?: string[];
@@ -21,22 +22,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>;
@@ -119,16 +120,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.
      *
@@ -187,15 +182,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;
     /**
@@ -206,10 +198,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;
@@ -30,7 +30,7 @@ declare class FormCore {
     method?: string;
     config: Required<TSchemaFormConfig>;
     mappers?: TMapper<unknown>[];
-    onSubmit?: (data: TFormValues) => void;
+    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.
@@ -216,7 +216,7 @@ declare class FormCore {
      *
      * @returns {TFormValues} The current form values.
      */
-    getFormValues(): TFormValues;
+    getFormValues(): TFormValues<Record<string, unknown>>;
     subscribeFieldEvent({ callback, }: {
         callback: (payload: TFieldEvent) => void;
     }): Subscription;

package/src/managers/formGroup.d.ts

@@ -56,7 +56,7 @@ declare class FormGroup {
      * @param {string} options.formIndex
      * @param {string} options.fieldIndex
      */
-    removeField({ formIndex, fieldIndex }: {
+    removeField({ formIndex, fieldIndex, }: {
         formIndex: string;
         fieldIndex: string;
     }): void;
@@ -79,7 +79,7 @@ declare class FormGroup {
      * @param {string[]} indexes form indexes to be submitted
      * @returns
      */
-    submitMultipleFormsByIndex(indexes: string[]): TFormValues;
+    submitMultipleFormsByIndex<T>(indexes: string[]): TFormValues<T>;
 }
 type TFormGroup = FormGroup;
 export { TFormGroup, FormGroup };

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,10 +41,10 @@ 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>[];
 };

package/src/types/schema.d.ts

@@ -700,10 +700,11 @@ type TResetValues = Partial<Record<TEvents, TResetValueMethods[]>>;
  * const errorMessages: TErrorMessages = {
  *   required: 'This field is required.',
  *   max: 'The value cannot exceed the maximum limit.'
+ *   default: 'Default error message'
  * };
  * ```
  */
-type TErrorMessages = Partial<Record<keyof TValidationMethods, string>>;
+type TErrorMessages = Partial<Record<keyof TValidationMethods & 'default', string>>;
 /**
  * Represents an event configuration with a specific type.
  *