@bolttech/form-engine 3.0.1-beta.7 → 3.0.2-beta.10

package/README.md

@@ -24,6 +24,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
 - 6.6 [api](#api)
 - 6.7 [resetValues](#resetvalues)
 - 6.8 [visibilityConditions](#visibilityconditions)
+- 6.9 [resetPropertyValues](#resetpropertyvalues)
 
 7. [templating](#templating)
 
@@ -36,6 +37,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
 10. [AsFormFieldBuilder](#asformfieldbuilder)
 
 <a id="sample"></a>
+
 ## **Sample**
 
 ```typescript
@@ -110,6 +112,7 @@ const Sample = () => {
   );
 };
 ```
+
 <a id="mappers"></a>
 
 ## **Mappers**
@@ -119,7 +122,7 @@ Mappers are the configuration that needs to be provided in order to use componen
 The mapper configuration goes as it follows:
 
 | Prop             | Type                   | Description                                                                                                              |
-| ---------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+|------------------|------------------------|--------------------------------------------------------------------------------------------------------------------------|
 | componentName    | string                 | name to be used onto schema to identify the component to be rendered on a field                                          |
 | events           | TComponentPropsMapping | events mapping that will reference the component prop with the respective form-engine prop that will handle it's content |
 | valueChangeEvent | TValueChangeEvent      | component handle function to define how the value is extracted from the 'onChange' event of the component                |
@@ -128,17 +131,18 @@ The mapper configuration goes as it follows:
 
 `events` are optional and will reference component props that will provide it's dynamic behaviour:
 
-| Prop            | Type   | Description                                                                                 |
-| --------------- | ------ | ------------------------------------------------------------------------------------------- |
-| getValue        | string | component property that will contain the value                                              |
-| setValue        | string | component property that handles onChange events triggered by the component                  |
-| onBlur          | string | component property that handles onBlur events triggered by the component                    |
-| onClick         | string | component property that handles onClick events triggered by the component                   |
-| onFocus         | string | component property that handles onFocus events triggered by the component                   |
-| onKeyUp         | string | component property that handles onKeyUp events triggered by the component                   |
-| onKeyDown       | string | component property that handles onKeyDown events triggered by the component                 |
-| setErrorMessage | string | component property that recieves the errors of the field as string                          |
-| setErrorState   | string | component property that recieves the error status of the field as boolean (not implemented) |
+| Prop            | Type   | Description                                                                                                                                                                                         |
+|-----------------|--------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| getValue        | string | component property that will contain the value                                                                                                                                                      |
+| setValue        | string | component property that handles onChange events triggered by the component                                                                                                                          |
+| onBlur          | string | component property that handles onBlur events triggered by the component                                                                                                                            |
+| onClick         | string | component property that handles onClick events triggered by the component                                                                                                                           |
+| onSubmit        | string | component property that handles form submission event triggered by the component (a way to submit a form using AsFormFieldBuilder, if used with AsFormField and Form will trigger submission twice) |
+| onFocus         | string | component property that handles onFocus events triggered by the component                                                                                                                           |
+| onKeyUp         | string | component property that handles onKeyUp events triggered by the component                                                                                                                           |
+| onKeyDown       | string | component property that handles onKeyDown events triggered by the component                                                                                                                         |
+| setErrorMessage | string | component property that receives the errors of the field as string                                                                                                                                  |
+| setErrorState   | string | component property that receives the error status of the field as boolean (not implemented)                                                                                                         |
 
 ### component and asynccomponent
 
@@ -245,7 +249,7 @@ const mapper = [
 
 <a id="form-group-context"></a>
 
-## **Form Group Context** 
+## **Form Group Context**
 
 <a id="formgroupcontextprovider"></a>
 
@@ -406,6 +410,7 @@ const FormComponent = (): React.ReactElement => {
 
 export default FormComponent;
 ```
+
 <a id="form"></a>
 
 ## **Form**
@@ -449,6 +454,7 @@ A simple example of rendering a basic form
 ```javascript
 <Form schema={schema} />
 ```
+
 <a id="submit-form"></a>
 
 ## **Submit Form**
@@ -621,6 +627,7 @@ Schema components contains the information of the component that will be rendere
   }]
 }
 ```
+
 <a id="formatters"></a>
 
 ## **formatters**
@@ -659,6 +666,7 @@ const formatters = {
   upperCase: true,
 };
 ```
+
 <a id="nametosubmit"></a>
 
 ## **nameToSubmit**
@@ -686,6 +694,7 @@ when calling the `onSubmit` or `onData` the field section of this field will out
   }
 }
 ```
+
 <a id="props"></a>
 
 ## **props**
@@ -813,6 +822,7 @@ Each config you opt to use, needs to be filled with an API configuration, the co
 | url                      | string                            | Request url ex: http://mockapi.org                                                    |
 | body?                    | Record<string, unknown>           | Request body (only POST requests)                                                     |
 | headers?                 | OutgoingHttpHeaders               | Avaliable HTTP headers                                                                |
+| queryParams?             | Record<string,string>             | url query params (to be appended to the already existing ones)                        |
 | resultPath?              | string                            | response dot notation path to the value needed from the response                      |
 | fallbackValue?           | unknown                           | default value to return if the API returns error                                      |
 | preConditions?           | TSchemaValidation                 | validations to occur before the request is made (check validations section)           |
@@ -904,6 +914,7 @@ const resetValues = [
   },
 ];
 ```
+
 <a id="visibilityconditions"></a>
 
 ## **visibilityConditions**
@@ -952,6 +963,46 @@ const visibilityConditions = [
 ];
 ```
 
+<a id="resetpropertyvalues"></a>
+
+## **resetPropertyValues**
+
+resetPropertyValues will change a property value based on validation rules
+
+> WARNING: do not rely on this to make mutations on your properties, templating already is a powerful tool and with this you can destroy some schema configurations accidentaly, this is a last resort schema manipulation tool to solve some edge cases with API requests callbacks handling
+
+| Prop           | Type                                         | Description                                                    |
+| -------------- | -------------------------------------------- | -------------------------------------------------------------- |
+| property       | typeof ALLOWED_RESET_PROPS_MUTATIONS[number] | property to be changed, ex: api, resetValues, etc..            |
+| path           | string                                       | path where the property to be changed is located               |
+| field          | string                                       | field that will recieve the property change                    |
+| resettledValue | unknown                                      | value to be replaced onto the property                         |
+| validations    | TSchemaValidation                            | validations rules to be validated to change the property value |
+| events         | Partial<TEvents>[]                           | events to listen to apply this change                          |
+
+example:
+
+this will change the `api.named.chuck` property onto field `postalCode` when the `ON_FIELD_CHANGE` event occurs,
+will change the content to: `{ status: null, response: ''}`
+
+```typescript
+resetPropertyValues: [
+  {
+    property: 'api',
+    path: 'named.chuck',
+    events: ['ON_FIELD_CHANGE'],
+    field: 'postalCode',
+    resettledValue: {
+      status: null,
+      response: '',
+    },
+    validations: {
+      bool: false,
+    },
+  },
+],
+```
+
 <a id="templating"></a>
 
 ## **templating**
@@ -1057,10 +1108,11 @@ useFormGroup({ ids: ['form1', 'form2'], onData: (payload) => console.log(payload
 
 As `useForm`, `useFormGroup` serves the same purpose, but the difference is that it handles multiple forms and has limited callback functions to set:
 
-| method  | payload                         | description                                                |
-| ------- | ------------------------------- | ---------------------------------------------------------- |
-| onData  | TFormGroupOnDataEventPayload<T> | event occuring when a value is changing via input or logic |
-| onValid | TFormGroupOnValidEventPayload   | event occuring when validation status changes on the form  |
+| method   | payload                           | description                                                 |
+|----------|-----------------------------------|-------------------------------------------------------------|
+| onData   | TFormGroupOnDataEventPayload<T>   | event occurring when a value is changing via input or logic |
+| onValid  | TFormGroupOnValidEventPayload     | event occurring when validation status changes on the form  |
+| onSubmit | TFormGroupOnSubmitEventPayload<T> | event occurring when form submission is trigger             |
 
 <a id="asformfield"></a>
 

package/index.esm.js

@@ -2207,6 +2207,7 @@ const FieldWrapper = ({
     if (events === null || events === void 0 ? void 0 : events.getValue) props[events.getValue] = handleChange;
     if (events === null || events === void 0 ? void 0 : events.onFocus) props[events.onFocus] = () => handleEvent('ON_FIELD_FOCUS');
     if (events === null || events === void 0 ? void 0 : events.onClick) props[events.onClick] = () => handleEvent('ON_FIELD_CLICK');
+    if (events === null || events === void 0 ? void 0 : events.onSubmit) props[events.onSubmit] = () => handleEvent('ON_FORM_SUBMIT');
     if (events === null || events === void 0 ? void 0 : events.onKeyUp) props[events.onKeyUp] = () => handleEvent('ON_FIELD_KEYUP');
     if (events === null || events === void 0 ? void 0 : events.onKeyDown) props[events.onKeyDown] = () => handleEvent('ON_FIELD_KEYDOWN');
     return props;
@@ -2499,6 +2500,7 @@ function Form({
   iVars,
   action,
   method,
+  config,
   onSubmit,
   onFormMount,
   onData,
@@ -2518,7 +2520,8 @@ function Form({
     removeForm,
     getForm,
     mappers,
-    debugMode
+    debugMode,
+    formGroupInstance
   } = useFormGroupContext({});
   const [tree, setTree] = useState();
   const schemaIndex = useMemo(() => index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange', [index, schema]);
@@ -2536,7 +2539,8 @@ function Form({
       action: action || (schema === null || schema === void 0 ? void 0 : schema.action),
       method: method || (schema === null || schema === void 0 ? void 0 : schema.method),
       index: schemaIndex,
-      mappers
+      mappers,
+      config: config || formGroupInstance.config
     });
     addForm({
       key: schemaIndex,
@@ -2594,18 +2598,9 @@ function Form({
    * initialValues setter for async initialValues
    */
   useEffect(() => {
-    const form = getForm({
+    if (initialValues) getForm({
       key: schemaIndex
-    });
-    if (initialValues && form) {
-      Object.keys(initialValues).forEach(fieldName => {
-        var _a;
-        (_a = form.fields.get(fieldName)) === null || _a === void 0 ? void 0 : _a.emitValue({
-          event: 'ON_FIELD_MOUNT',
-          value: initialValues[fieldName]
-        });
-      });
-    }
+    }).setInitialValues(initialValues);
   }, [initialValues]);
   /**
    * hook usage to keep event bindings updated on callback functions passed as props
@@ -2960,27 +2955,27 @@ const AsFormFieldBuilder = props => {
   }) : jsx(Fragment, {});
 };
 
-// @TODO implement onSubmitGroup
-const useFormGroup = ({
+function useFormGroup({
   ids,
   onData,
-  onValid
-}, deps) => {
+  onValid,
+  onSubmit
+}, deps) {
   const {
     formGroupInstance
   } = useFormGroupContext({});
   const onDataCallbackRef = useRef(onData);
   const onValidCallbackRef = useRef(onValid);
-  //   const onSubmitCallbackRef = useRef(onSubmit);
+  const onSubmitCallbackRef = useRef(onSubmit);
   useEffect(() => {
     onDataCallbackRef.current = onData;
   }, [onData]);
   useEffect(() => {
     onValidCallbackRef.current = onValid;
   }, [onValid]);
-  //   useEffect(() => {
-  //     onSubmitCallbackRef.current = onSubmit;
-  //   }, [onSubmit]);
+  useEffect(() => {
+    onSubmitCallbackRef.current = onSubmit;
+  }, [onSubmit]);
   useEffect(() => {
     const onDataCallback = payload => {
       var _a;
@@ -3001,20 +2996,24 @@ const useFormGroup = ({
       ids,
       callback: onValidCallback
     });
-    // const onSubmitCallback = (
-    //   payload: TFormValues<Record<string, unknown>>
-    // ) => {
-    //   if (onSubmitCallbackRef.current) {
-    //     onSubmitCallbackRef.current?.(payload);
-    //   }
-    // };
+    const onSubmitCallback = payload => {
+      var _a;
+      if (onSubmitCallbackRef.current) {
+        (_a = onSubmitCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(onSubmitCallbackRef, payload);
+      }
+    };
+    const onSubmitSub = formGroupInstance.onSubmitSubscription({
+      ids,
+      callback: onSubmitCallback
+    });
     return () => {
       onDataSub.unsubscribe();
       onValidSub.unsubscribe();
+      onSubmitSub.unsubscribe();
     };
   }, [deps]);
   return;
-};
+}
 
 const defaultChangeEvent = event => {
   return event.currentTarget.value;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.1-beta.7",
+  "version": "3.0.2-beta.10",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
-    "@bolttech/form-engine-core": "0.0.2-beta.7",
+    "@bolttech/form-engine-core": "0.0.3-beta.9",
     "react": "18.2.0",
     "rxjs": "7.8.1"
   },

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

@@ -5,5 +5,5 @@ import { TFormProps } from './Form.type';
  * @param {TFormProps} param form properties initializor
  * @returns {ReactElement}
  */
-declare function Form<T>({ schema, index, initialValues, iVars, action, method, onSubmit, onFormMount, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, onValid, children, }: TFormProps<T>): ReactElement;
+declare function Form<T>({ schema, index, initialValues, iVars, action, method, config, onSubmit, onFormMount, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, onValid, children, }: TFormProps<T>): ReactElement;
 export default Form;

package/src/hooks/useFormGroup/useFormGroup.d.ts

@@ -1,7 +1,4 @@
-import { TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload } from '@bolttech/form-engine-core';
-declare const useFormGroup: ({ ids, onData, onValid, }: {
-    ids: string[];
-    onData?: ((payload: TFormGroupOnDataEventPayload<Record<string, unknown>>) => void) | undefined;
-    onValid?: ((payload: TFormGroupOnValidEventPayload) => void) | undefined;
-}, deps?: React.DependencyList) => void;
+/// <reference types="react" />
+import { TUseFormGroup } from './useFormGroup.type';
+declare function useFormGroup<T>({ ids, onData, onValid, onSubmit }: TUseFormGroup<T>, deps?: React.DependencyList): void;
 export default useFormGroup;

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

@@ -0,0 +1,17 @@
+import { TFormGroupOnDataEventPayload, TFormGroupOnSubmitEventPayload, TFormGroupOnValidEventPayload } from '@bolttech/form-engine-core';
+/**
+ * Represents the properties for the useFormGroup hook, including a list of ID's and event callback properties.
+ *
+ * @property {string} ids - The unique identifier for the forms.
+ * @property {payload: TFormGroupOnDataEventPayload<T>} onData - callback event occurring when a value is changing via input or logic.
+ * @property {payload: TFormGroupOnValidEventPayload} onData - callback event occurring when validation status changes on the form.
+ * @property {payload: TFormGroupOnSubmitEventPayload<T>} onData - event occurring when form submission is trigger.
+ *
+ */
+type TUseFormGroup<T> = {
+    ids: string[];
+    onData?: (payload: TFormGroupOnDataEventPayload<T>) => void;
+    onValid?: (payload: TFormGroupOnValidEventPayload) => void;
+    onSubmit?: (payload: TFormGroupOnSubmitEventPayload<T>) => void;
+};
+export type { TUseFormGroup };