@bolttech/form-engine 3.0.0-beta.25 → 3.0.0-beta.27

package/README.md

@@ -310,7 +310,6 @@ And this will give you the following properties in addition to the native ones o
 | masks                | TSchemaMasks                | Allows you to display the value of the masked component by events                                                                                                                                                                                                                                           |
 | clearFields          | TSchemaClearFields          | Will clear target fields in case they do not pass with the specified validations                                                                                                                                                                                                                            |
 | api                  | TSchemaApi                  | Allows you to make api calls using events emitted by the component.                                                                                                                                                                                                                                         |
-| errorMessages        | TErrorMessages              | Field error messages in case any validation fails                                                                                                                                                                                                                                                           |
 | filter               | TSchemaValidation           | Filters the component value based on a validation.                                                                                                                                                                                                                                                          |
 | formatters           | TSchemaFormatters           | Allows you to format the value that the field will receive for each event issuance                                                                                                                                                                                                                          |
 | visibilityConditions | TSchemaVisibilityConditions | Allows you to specify the conditions a given field will be visible what will run when this field meets the specified life-cycle                                                                                                                                                                             |
@@ -355,16 +354,14 @@ In the following example `asFormField` hooks are used to create `Component` fiel
         ]
       }
       validations={{
-        config: {
+        methods: { 
           callback: (data) => {
-            return {
-              fail: data === '10/10/1000',
-            };
-          },
+            return data === '10/10/1000';
+          } 
         },
-        events: ['ON_FIELD_BLUR']
+        eventMessages: { ON_FIELD_BLUR: [ 'callback' ] },
+        messages: { callback: 'ERRRO' }
       }}
-      errorMessages={{ callback: 'ERRRO' }}
     />
   </FormGroupContextProvider>;
 }

package/index.esm.js

@@ -2387,9 +2387,11 @@ const eventsMapping = {
  */
 const useForm = _a => {
   var {
-      id
+      id,
+      onData,
+      onSubmit
     } = _a,
-    rest = __rest(_a, ["id"]);
+    rest = __rest(_a, ["id", "onData", "onSubmit"]);
   const {
     formGroupInstance
   } = useFormGroupContext({});
@@ -2400,6 +2402,16 @@ const useForm = _a => {
   useEffect(() => {
     callbackRefs.current = rest;
   }, [rest]);
+  const formValuesCallbackRefs = useRef({
+    onData,
+    onSubmit
+  });
+  useEffect(() => {
+    formValuesCallbackRefs.current = {
+      onData,
+      onSubmit
+    };
+  }, [onData, onSubmit]);
   /**
    * handle function call after the debounce occurs on the form instance field event
    * subject in order to call the most updated function with the updated function
@@ -2421,6 +2433,31 @@ const useForm = _a => {
     });
     return () => sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
   }, []);
+  useEffect(() => {
+    var _a, _b;
+    const dataCallback = payload => {
+      var _a, _b;
+      if (formValuesCallbackRefs.current.onData) {
+        (_b = (_a = formValuesCallbackRefs.current).onData) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
+      }
+    };
+    const dataSub = (_a = formGroupInstance.getForm({
+      key: id
+    })) === null || _a === void 0 ? void 0 : _a.subscribeData(dataCallback);
+    const submitCallback = payload => {
+      var _a, _b;
+      if (formValuesCallbackRefs.current.onSubmit) {
+        (_b = (_a = formValuesCallbackRefs.current).onSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
+      }
+    };
+    const submitSub = (_b = formGroupInstance.getForm({
+      key: id
+    })) === null || _b === void 0 ? void 0 : _b.subscribeOnSubmit(submitCallback);
+    return () => {
+      dataSub === null || dataSub === void 0 ? void 0 : dataSub.unsubscribe();
+      submitSub === null || submitSub === void 0 ? void 0 : submitSub.unsubscribe();
+    };
+  }, []);
   return;
 };
 
@@ -2471,8 +2508,6 @@ const 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,
-      onSubmit,
-      onData,
       mappers
     });
     addForm({
@@ -2550,7 +2585,9 @@ const Form = ({
     onFocus,
     onKeyDown,
     onKeyUp,
-    onMount
+    onMount,
+    onSubmit,
+    onData
   });
   /*
     @TODO move this logic inside form-core, add action and method onto form element,
@@ -2865,4 +2902,46 @@ const AsFormFieldBuilder = props => {
   }) : jsx(Fragment, {});
 };
 
-export { AsFormField, AsFormFieldBuilder, Form, FormGroupContext, FormGroupContextProvider, useFormGroupContext };
+// @TODO implement onSubmitGroup
+const useFormGroup = ({
+  ids,
+  onData
+  //   onSubmit,
+}) => {
+  const {
+    formGroupInstance
+  } = useFormGroupContext({});
+  const onDataCallbackRef = useRef(onData);
+  //   const onSubmitCallbackRef = useRef(onSubmit);
+  useEffect(() => {
+    onDataCallbackRef.current = onData;
+  }, [onData]);
+  //   useEffect(() => {
+  //     onSubmitCallbackRef.current = onSubmit;
+  //   }, [onSubmit]);
+  useEffect(() => {
+    const onDataCallback = payload => {
+      var _a;
+      if (onDataCallbackRef.current) {
+        (_a = onDataCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(onDataCallbackRef, payload);
+      }
+    };
+    const onDataSub = formGroupInstance.onDataSubscription({
+      ids,
+      callback: onDataCallback
+    });
+    // const onSubmitCallback = (
+    //   payload: TFormValues<Record<string, unknown>>
+    // ) => {
+    //   if (onSubmitCallbackRef.current) {
+    //     onSubmitCallbackRef.current?.(payload);
+    //   }
+    // };
+    return () => {
+      onDataSub.unsubscribe();
+    };
+  }, []);
+  return;
+};
+
+export { AsFormField, AsFormFieldBuilder, Form, FormGroupContext, FormGroupContextProvider, useForm, useFormGroup, useFormGroupContext };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.0-beta.25",
+  "version": "3.0.0-beta.27",
   "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.1-beta.16",
+    "@bolttech/form-engine-core": "0.0.1-beta.18",
     "react": "18.2.0"
   },
   "peerDependencies": {}

package/src/context/FormGroupContext.type.d.ts

@@ -1,4 +1,4 @@
-import { FormCore, TFormCore, TFormGroup, TFormValues, TMapper } from '@bolttech/form-engine-core';
+import { FormCore, TFormCore, TFormGroup, TMapper } from '@bolttech/form-engine-core';
 import { ElementType } from 'react';
 /**
  * Represents the context for managing forms within a form group.
@@ -29,7 +29,7 @@ type TFormContext = {
     formGroupInstance: TFormGroup;
     mappers?: TMapper<ElementType>[];
     printFormGroupInstance: () => void;
-    submitMultipleFormsByIndex: <T>(indexes: string[]) => TFormValues<T>;
+    submitMultipleFormsByIndex: <T>(indexes: string[]) => void;
     debugMode: boolean;
     active: boolean;
 };

package/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useForm } from './useForm/useForm';
+export { default as useFormGroup } from './useFormGroup/useFormGroup';

package/src/hooks/{useForm.d.ts → useForm/useForm.d.ts}

@@ -2,5 +2,5 @@ import { TUseFormProps } from './useForm.type';
 /**
  * Hook to register events callback functions
  */
-declare const useForm: ({ id, ...rest }: TUseFormProps) => void;
+declare const useForm: ({ id, onData, onSubmit, ...rest }: TUseFormProps) => void;
 export default useForm;

package/src/hooks/{useForm.type.d.ts → useForm/useForm.type.d.ts}

@@ -1,4 +1,4 @@
-import { TEventsCallbackProps } from '../types';
+import { TEventsCallbackProps } from '../../types';
 /**
  * Represents the properties for the useForm hook, including an ID and event callback properties.
  *

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

@@ -0,0 +1,10 @@
+import { TFormValues } from '@bolttech/form-engine-core';
+declare const useFormGroup: ({ ids, onData, }: {
+    ids: string[];
+    onData: (payload: Record<string, {
+        formId: string;
+        formField: string;
+        values?: TFormValues<Record<string, unknown>>;
+    }>) => void;
+}) => void;
+export default useFormGroup;

package/src/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './hooks';
 export * from './context/FormGroupContext';
 export * from './types';

package/src/types/index.d.ts

@@ -1,4 +1,4 @@
-import { TFieldEvent } from '@bolttech/form-engine-core';
+import { TFieldEvent, TFormValues } from '@bolttech/form-engine-core';
 /**
  * Represents a field wrapper containing the name of the field and its index in the form.
  *
@@ -12,9 +12,15 @@ type TFieldWrapper = {
 /**
  * Represents the possible event properties for form fields callbacks.
  */
-type TEventProps = 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onMount' | 'onApiResponse' | 'onClick' | 'onSubmit';
+type TEventProps = 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onMount' | 'onApiResponse' | 'onClick';
 /**
-* Represents a mapping of event properties to their corresponding callback functions.
-*/
-type TEventsCallbackProps = Partial<Record<TEventProps, ((payload: TFieldEvent) => void) | null | undefined>>;
+ * Represents a mapping of event properties to their corresponding callback functions.
+ */
+type TEventsCallbackProps = Partial<Record<TEventProps, ((payload: TFieldEvent) => void) | null | undefined>> & {
+    onData?: (payload: {
+        field: string;
+        data: TFormValues<Record<string, unknown>>;
+    }) => void;
+    onSubmit?: (payload: TFormValues<Record<string, unknown>>) => void;
+};
 export { TFieldWrapper, TEventProps, TEventsCallbackProps };