@bolttech/form-engine 3.0.0-beta.13 → 3.0.0-beta.15

package/index.esm.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FormGroup, FormCore } from '@bolttech/form-engine-core';
 import { createContext, useRef, useContext, useState, useEffect, useCallback, useMemo, Suspense, Children } from 'react';
+import { isNil } from 'lodash';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1684,8 +1685,36 @@ const FormGroupContextProvider = ({
 };
 const useFormGroupContext = () => {
   context = useContext(FormGroupContext);
-  if (typeof context === 'undefined') {
-    throw new Error(`useFormContext must be used within a FormContextProvider`);
+  if (Object.keys(context).length === 0) {
+    return {
+      addFormWithIndex: () => {
+        //simulate context purpose
+      },
+      addForm: () => {
+        //simulate context purpose
+      },
+      getForm: () => new FormCore({
+        index: 'empty',
+        mappers: []
+      }),
+      removeForm: () => {
+        //simulate context purpose
+      },
+      removeField: () => {
+        //simulate context purpose
+      },
+      mappers: [],
+      formGroupInstance: new FormGroup(),
+      printFormGroupInstance: () => {
+        //simulate context purpose
+      },
+      submitMultipleFormsByIndex: () => ({
+        erroredFields: [],
+        isValid: false,
+        values: {}
+      }),
+      debugMode: false
+    };
   }
   return context;
 };
@@ -1693,10 +1722,12 @@ const useFormGroupContext = () => {
 const FieldWrapperComponentRender = ({
   props,
   fieldInstance,
-  children
+  children,
+  mapper
 }) => {
-  const Component = fieldInstance.mapper.component;
-  const Asynccomponent = fieldInstance.mapper.asynccomponent;
+  var _a, _b, _c;
+  const Component = (mapper === null || mapper === void 0 ? void 0 : mapper.component) || ((_a = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _a === void 0 ? void 0 : _a.component);
+  const Asynccomponent = (mapper === null || mapper === void 0 ? void 0 : mapper.asynccomponent) || ((_b = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _b === void 0 ? void 0 : _b.asynccomponent);
   if (Component) return jsx(Component, Object.assign({}, props, {
     children: children && children
   }));
@@ -1706,32 +1737,34 @@ const FieldWrapperComponentRender = ({
     }))
   });
   return jsx("div", {
-    children: `failed to render field ${fieldInstance.name} with ${fieldInstance.mapper.componentName}, please check mappers`
+    children: `failed to render field ${fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.name} with ${(_c = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _c === void 0 ? void 0 : _c.componentName}, please check mappers`
   });
 };
 const FieldWrapper = ({
-  index,
-  formKey,
-  children
+  name,
+  formIndex,
+  children,
+  mapper,
+  defaultProps
 }) => {
   var _a;
   const {
     formGroupInstance,
     debugMode
   } = useFormGroupContext();
-  const fieldInstance = ((_a = formGroupInstance.getForm({
-    key: formKey
+  const fieldInstance = (_a = formGroupInstance.getForm({
+    key: formIndex
   })) === null || _a === void 0 ? void 0 : _a.getField({
-    key: index
-  })) || {};
-  const [valueState, setValueState] = useState(fieldInstance.stateValue);
+    key: name
+  });
+  const [valueState, setValueState] = useState(fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.stateValue);
   const [state, setState] = useState({
-    visibility: fieldInstance.visibility,
-    props: fieldInstance.props,
-    apiResponse: fieldInstance.api
+    visibility: (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.visibility) || true,
+    props: (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.props) || defaultProps,
+    apiResponse: fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.api
   });
   useEffect(() => {
-    fieldInstance.mountField({
+    fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mountField({
       valueSubscription: value => {
         setValueState(value);
       },
@@ -1750,22 +1783,23 @@ const FieldWrapper = ({
       }
     });
     return () => {
-      fieldInstance.destroyField();
+      fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.destroyField();
     };
   }, []);
   const handleChange = useCallback(event => {
-    fieldInstance.emitValue({
+    fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.emitValue({
       value: event,
       event: 'ON_FIELD_CHANGE'
     });
   }, []);
   const handleEvent = useCallback(event => {
-    fieldInstance.emitEvents({
+    fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.emitEvents({
       event
     });
   }, []);
   const mapProps = useMemo(() => {
-    const events = fieldInstance.mapper.events;
+    var _a;
+    const events = (_a = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _a === void 0 ? void 0 : _a.events;
     const props = {};
     if (events === null || events === void 0 ? void 0 : events.onBlur) props[events.onBlur] = () => handleEvent('ON_FIELD_BLUR');
     if (events === null || events === void 0 ? void 0 : events.getValue) props[events.getValue] = handleChange;
@@ -1776,7 +1810,8 @@ const FieldWrapper = ({
     return props;
   }, []);
   const mapValue = useMemo(() => {
-    const events = fieldInstance.mapper.events;
+    var _a;
+    const events = (_a = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _a === void 0 ? void 0 : _a.events;
     return (events === null || events === void 0 ? void 0 : events.setValue) ? {
       [events.setValue]: valueState
     } : {};
@@ -1788,11 +1823,12 @@ const FieldWrapper = ({
           padding: '0px',
           margin: '0px'
         },
-        children: index
+        children: name
       }), jsx("br", {}), jsx("hr", {})]
     }), jsx(FieldWrapperComponentRender, {
       props: Object.assign(Object.assign(Object.assign({}, state.props), mapProps), mapValue),
       fieldInstance: fieldInstance,
+      mapper: mapper,
       children: children && children
     })]
   }) : jsx(Fragment, {});
@@ -1801,7 +1837,7 @@ const FieldWrapper = ({
 const BuildTree = ({
   fields,
   prevPath,
-  formKey
+  formIndex
 }) => {
   return Array.from(fields).filter(([, value]) => {
     return value.path === prevPath;
@@ -1810,14 +1846,14 @@ const BuildTree = ({
     const children = BuildTree({
       fields,
       prevPath: `${prevPath ? `${prevPath}.` : ``}${value.name}`,
-      formKey
+      formIndex
     });
     const lenght = Children.count(children);
     return jsx(FieldWrapper, {
-      index: fieldName,
-      formKey: formKey,
+      name: fieldName,
+      formIndex: formIndex,
       children: lenght > 0 ? children : null
-    });
+    }, fieldName);
   });
 };
 const BuildAsFormFieldTree = ({
@@ -1840,6 +1876,75 @@ const BuildAsFormFieldTree = ({
   });
 };
 
+const eventsMapping = {
+  onChange: 'ON_FIELD_CHANGE',
+  onBlur: 'ON_FIELD_BLUR',
+  onFocus: 'ON_FIELD_FOCUS',
+  onKeyDown: 'ON_FIELD_KEYDOWN',
+  onKeyUp: 'ON_FIELD_KEYUP',
+  onMount: 'ON_FIELD_MOUNT',
+  onApiResponse: 'ON_API_FIELD_RESPONSE',
+  onClick: 'ON_FIELD_CLICK'
+};
+const subscribeEvents = ({
+  eventsCallbackMappings,
+  formInstance
+}) => {
+  const subscriptions = [];
+  Object.keys(eventsCallbackMappings).forEach(key => {
+    if (!isNil(eventsCallbackMappings[key])) {
+      const sub = formInstance.subscribeFieldEvent({
+        event: eventsMapping[key],
+        // need to make this assertion even when it's not undefined or null on push ts verification
+        callback: eventsCallbackMappings[key]
+      });
+      subscriptions.push(sub);
+    }
+  });
+  return subscriptions;
+};
+
+const useForm = ({
+  id,
+  onApiResponse,
+  onBlur,
+  onChange,
+  onClick,
+  onFocus,
+  onKeyDown,
+  onKeyUp,
+  onMount
+}) => {
+  const {
+    formGroupInstance
+  } = useFormGroupContext();
+  const subscriptions = useRef([]);
+  useEffect(() => {
+    const formInstance = formGroupInstance.getForm({
+      key: id
+    });
+    if (formInstance) {
+      subscriptions.current = subscribeEvents({
+        eventsCallbackMappings: {
+          onApiResponse,
+          onBlur,
+          onChange,
+          onClick,
+          onFocus,
+          onKeyDown,
+          onKeyUp,
+          onMount
+        },
+        formInstance
+      });
+    }
+    return () => {
+      subscriptions.current.forEach(sub => sub.unsubscribe());
+    };
+  }, [id, onApiResponse, onBlur, onChange, onClick, onFocus, onKeyDown, onKeyUp, onMount]);
+  return;
+};
+
 const Form = ({
   schema,
   index,
@@ -1849,6 +1954,14 @@ const Form = ({
   method,
   onSubmit,
   onData,
+  onBlur,
+  onChange,
+  onApiResponse,
+  onClick,
+  onFocus,
+  onKeyDown,
+  onKeyUp,
+  onMount,
   children
 }) => {
   const {
@@ -1860,6 +1973,17 @@ const Form = ({
   } = useFormGroupContext();
   const [tree, setTree] = useState();
   const schemaIndex = useMemo(() => index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange', [index, schema]);
+  useForm({
+    id: index,
+    onApiResponse,
+    onBlur,
+    onChange,
+    onClick,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onMount
+  });
   useEffect(() => {
     if (schemaIndex === 'defaultChange') {
       console.warn('please, add an unique id to the form, otherwise multiple forms will break');
@@ -1882,9 +2006,11 @@ const Form = ({
       @TODO check if form instance is killed each time it is unmounted
       the management of multiple forms needs to be planned
     */
-    return () => removeForm({
-      key: index
-    });
+    return () => {
+      removeForm({
+        key: index
+      });
+    };
   }, []);
   useEffect(() => {
     var _a;
@@ -1900,7 +2026,7 @@ const Form = ({
     if (fields) {
       const buildTree = BuildTree({
         fields,
-        formKey: index
+        formIndex: index
       });
       setTree(buildTree);
     }
@@ -1967,17 +2093,38 @@ const AsFormFieldBuilder = props => {
   } = useFormGroupContext();
   const [field, setField] = useState(jsx(Fragment, {}));
   useEffect(() => {
-    var _a;
-    if (!formGroupInstance.forms.has(props.formIndex)) {
+    if (!(formGroupInstance === null || formGroupInstance === void 0 ? void 0 : formGroupInstance.forms.has(props.formIndex))) {
       addFormWithIndex(props.formIndex);
     }
     const fieldInstanceProps = Object.assign(Object.assign({}, props), {
+      component: props.mapper.componentName,
       children: undefined
     });
-    (_a = formGroupInstance.forms.get(props.formIndex)) === null || _a === void 0 ? void 0 : _a.addField(fieldInstanceProps);
+    const formInstance = formGroupInstance.forms.get(props.formIndex);
+    formInstance === null || formInstance === void 0 ? void 0 : formInstance.addField(fieldInstanceProps, props.mapper);
+    /*
+    some magic happens using this setTimeout and i don't know why...
+    this is executed right before the FieldWrapper mounts as expected
+    but has the blinking problem allowing people to see the template
+    format instead of the prop value
+    */
+    setTimeout(() => {
+      var _a;
+      (_a = formInstance === null || formInstance === void 0 ? void 0 : formInstance.getField({
+        key: props.name
+      })) === null || _a === void 0 ? void 0 : _a.emitEvents({
+        event: 'ON_FIELD_MOUNT'
+      });
+      formInstance === null || formInstance === void 0 ? void 0 : formInstance.refreshTemplates({
+        key: props.name,
+        event: 'ON_FIELDS'
+      });
+    }, 0);
     const field = jsx(FieldWrapper, {
-      formKey: props.formIndex,
-      index: props.name,
+      mapper: props.mapper,
+      formIndex: props.formIndex,
+      name: props.name,
+      defaultProps: props.props,
       children: props.children && props.children
     });
     setField(field);

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.0-beta.13",
+  "version": "3.0.0-beta.15",
   "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.4",
-    "react": "18.2.0"
+    "@bolttech/form-engine-core": "0.0.1-beta.6",
+    "lodash": "4.17.21",
+    "react": "18.2.0",
+    "rxjs": "7.8.1"
   },
   "peerDependencies": {}
 }

package/src/components/AsFormFieldBuilder/AsFormFieldBuilder.d.ts

@@ -1,6 +1,5 @@
 import { IComponentSchema } from '@bolttech/form-engine-core';
 import { PropsWithChildren, ReactElement } from 'react';
-declare const AsFormFieldBuilder: (props: PropsWithChildren<Omit<IComponentSchema, 'children'> & {
-    formIndex: string;
-}>) => ReactElement;
+import { TFieldWrapper } from '../../types';
+declare const AsFormFieldBuilder: (props: PropsWithChildren<Omit<IComponentSchema, 'children' | 'component'> & Required<TFieldWrapper>>) => ReactElement;
 export default AsFormFieldBuilder;

package/src/components/FieldWrapper/FieldWrapper.d.ts

@@ -1,4 +1,7 @@
 import { PropsWithChildren, ReactElement } from 'react';
 import { TFieldWrapper } from '../../types';
-declare const FieldWrapper: ({ index, formKey, children, }: PropsWithChildren<TFieldWrapper>) => ReactElement;
+declare const FieldWrapper: ({ name, formIndex, children, mapper, defaultProps, }: PropsWithChildren<TFieldWrapper & {
+    name: string;
+    defaultProps?: Record<string, unknown> | undefined;
+}>) => ReactElement;
 export default FieldWrapper;

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

@@ -1,4 +1,5 @@
 import { TFormEntry } from '@bolttech/form-engine-core';
 import { PropsWithChildren } from 'react';
-declare const Form: ({ schema, index, initialValues, iVars, action, method, onSubmit, onData, children, }: PropsWithChildren<Omit<TFormEntry, 'mappers'>>) => import("react/jsx-runtime").JSX.Element;
+import { TEventsCallbackProps } from '../../types';
+declare const Form: ({ schema, index, initialValues, iVars, action, method, onSubmit, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, children, }: PropsWithChildren<Omit<TFormEntry, 'mappers'> & TEventsCallbackProps>) => import("react/jsx-runtime").JSX.Element;
 export default Form;

package/src/generators/formBuilder.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 import { IFormField, IComponentSchema } from '@bolttech/form-engine-core';
-declare const BuildTree: ({ fields, prevPath, formKey, }: {
+declare const BuildTree: ({ fields, prevPath, formIndex, }: {
     fields: Map<string, IFormField>;
     prevPath?: string | undefined;
-    formKey: string;
+    formIndex: string;
 }) => ReactNode;
 declare const BuildAsFormFieldTree: ({ children, }: {
     children?: ReactNode;

package/src/helpers/helpers.d.ts

@@ -0,0 +1,8 @@
+import { TFormCore } from '@bolttech/form-engine-core';
+import { Subscription } from 'rxjs';
+import { TEventsCallbackProps } from '../types';
+declare const subscribeEvents: ({ eventsCallbackMappings, formInstance, }: {
+    eventsCallbackMappings: TEventsCallbackProps;
+    formInstance: TFormCore;
+}) => Subscription[];
+export { subscribeEvents };

package/src/hooks/useForm.d.ts

@@ -0,0 +1,5 @@
+import { TEventsCallbackProps } from '../types';
+declare const useForm: ({ id, onApiResponse, onBlur, onChange, onClick, onFocus, onKeyDown, onKeyUp, onMount, }: {
+    id: string;
+} & Partial<Record<import("../types").eventProps, ((payload: import("dist/libs/form-engine-core/src/types/event").TFieldEvent) => void) | null | undefined>>) => void;
+export default useForm;

package/src/types/index.d.ts

@@ -1,3 +1,5 @@
+import { TFieldEvent, TMapper } from '@bolttech/form-engine-core';
+import { ElementType } from 'react';
 /**
  * @type TFieldWrapper
  * Represents the wrapper for a form field, including the component,
@@ -37,7 +39,10 @@
  * ```
  */
 type TFieldWrapper = {
-    index: string;
-    formKey: string;
+    name: string;
+    formIndex: string;
+    mapper?: TMapper<ElementType>;
 };
-export { TFieldWrapper };
+type eventProps = 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onMount' | 'onApiResponse' | 'onClick';
+type TEventsCallbackProps = Partial<Record<eventProps, ((payload: TFieldEvent) => void) | null | undefined>>;
+export { TFieldWrapper, eventProps, TEventsCallbackProps };