@bolttech/form-engine 3.0.0-beta.11 → 3.0.0-beta.3

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { FormGroup, FormCore } from '@bolttech/form-engine-core';
-import { createContext, useRef, useContext, useState, useEffect, useCallback, useMemo, Children, Suspense } from 'react';
+import { FormGroup } from './src/core/index.d.js';
+import { createContext, useRef, useContext } from 'react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1679,264 +1679,4 @@ const useFormGroupContext = () => {
   return context;
 };
 
-const FieldWrapper = ({
-  index,
-  Component,
-  formKey,
-  children,
-  events
-}) => {
-  var _a;
-  const {
-    formGroupInstance,
-    debugMode
-  } = useFormGroupContext();
-  const fieldInstance = ((_a = formGroupInstance.getForm({
-    key: formKey
-  })) === null || _a === void 0 ? void 0 : _a.getField({
-    key: index
-  })) || {};
-  const [valueState, setValueState] = useState(fieldInstance.stateValue);
-  const [state, setState] = useState({
-    visibility: fieldInstance.visibility,
-    props: fieldInstance.props,
-    apiResponse: fieldInstance.api
-  });
-  useEffect(() => {
-    fieldInstance.mountField({
-      valueSubscription: value => {
-        setValueState(value);
-      },
-      propsSubscription: ({
-        errors,
-        visibility,
-        apiResponse,
-        props
-      }) => {
-        setState(prev => Object.assign(Object.assign({}, prev), {
-          errors,
-          visibility,
-          apiResponse,
-          props
-        }));
-      }
-    });
-    return () => {
-      fieldInstance.destroyField();
-    };
-  }, []);
-  const handleChange = useCallback(event => {
-    fieldInstance.emitValue({
-      value: event,
-      event: 'ON_FIELD_CHANGE'
-    });
-  }, []);
-  const handleEvent = useCallback(event => {
-    fieldInstance.emitEvents({
-      event
-    });
-  }, []);
-  const mapProps = useMemo(() => {
-    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;
-    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.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;
-  }, []);
-  const mapValue = useMemo(() => (events === null || events === void 0 ? void 0 : events.setValue) ? {
-    [events.setValue]: valueState
-  } : {}, [valueState]);
-  return (state === null || state === void 0 ? void 0 : state.visibility) ? jsxs(Fragment, {
-    children: [debugMode && jsxs(Fragment, {
-      children: [jsx("b", {
-        style: {
-          padding: '0px',
-          margin: '0px'
-        },
-        children: index
-      }), jsx("br", {}), jsx("hr", {})]
-    }), jsx(Component, Object.assign({}, state === null || state === void 0 ? void 0 : state.props, mapProps, mapValue, {
-      children: children && children
-    }))]
-  }) : jsx(Fragment, {});
-};
-
-const BuildTree = ({
-  fields,
-  prevPath,
-  formKey
-}) => {
-  return Array.from(fields).filter(([, value]) => {
-    return value.path === prevPath;
-  }).map(([, value]) => {
-    var _a;
-    const fieldName = value.name;
-    const mapper = (_a = fields.get(fieldName)) === null || _a === void 0 ? void 0 : _a.mapper;
-    const children = BuildTree({
-      fields,
-      prevPath: `${prevPath ? `${prevPath}.` : ``}${value.name}`,
-      formKey
-    });
-    const lenght = Children.count(children);
-    return mapper && mapper.asynccomponent ? jsx(Suspense, {
-      children: jsx(FieldWrapper, {
-        Component: mapper.asynccomponent,
-        index: fieldName,
-        events: mapper.events,
-        formKey: formKey,
-        children: lenght > 0 ? children : null
-      })
-    }, fieldName) : mapper && mapper.component ? jsx(FieldWrapper, {
-      Component: mapper.component,
-      index: fieldName,
-      events: mapper.events,
-      formKey: formKey,
-      children: lenght > 0 ? children : null
-    }, fieldName) : jsx("div", {
-      children: `failed to render field: ${fieldName} on tree, check mappers.. :(`
-    });
-  });
-};
-const BuildAsFormFieldTree = ({
-  children
-}) => {
-  return Children.map(children, (child, index) => {
-    var _a, _b;
-    if (!((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.name) || child.type.name !== 'AsFormField') {
-      throw new Error('only use AsFormField inside the Form component');
-      // console.log(child.type.name);
-    }
-    const struct = Object.assign({}, child.props);
-    delete struct.children;
-    const childElements = BuildAsFormFieldTree({
-      children: (_b = child.props) === null || _b === void 0 ? void 0 : _b.children
-    });
-    return Object.assign(Object.assign({}, struct), childElements && {
-      children: childElements
-    });
-  });
-};
-
-const Form = ({
-  schema,
-  index,
-  initialValues,
-  iVars,
-  action,
-  method,
-  onSubmit,
-  onData,
-  children
-}) => {
-  const {
-    addForm,
-    removeForm,
-    getForm,
-    mappers,
-    debugMode
-  } = useFormGroupContext();
-  const [tree, setTree] = useState();
-  const schemaIndex = useMemo(() => index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange', [index, schema]);
-  useEffect(() => {
-    if (schemaIndex === 'defaultChange') {
-      console.warn('please, add an unique id to the form, otherwise multiple forms will break');
-    }
-    const formInstance = new FormCore({
-      schema,
-      initialValues: initialValues || (schema === null || schema === void 0 ? void 0 : schema.initialValues),
-      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({
-      key: schemaIndex,
-      formInstance
-    });
-    /*
-      @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
-    });
-  }, []);
-  useEffect(() => {
-    var _a;
-    const schema = BuildAsFormFieldTree({
-      children
-    });
-    schema && getForm({
-      key: index
-    }).refreshFields(schema);
-    const fields = (_a = getForm({
-      key: index
-    })) === null || _a === void 0 ? void 0 : _a.fields;
-    if (fields) {
-      const buildTree = BuildTree({
-        fields,
-        formKey: index
-      });
-      setTree(buildTree);
-    }
-  }, [children]);
-  useEffect(() => {
-    if (iVars) getForm({
-      key: index
-    }).iVars = iVars;
-  }, [iVars]);
-  /*
-    @TODO move this logic inside form-core, add action and method onto form element,
-    might need a ref of the form to collect all the form parameters when there is a
-    normal form submition with redirect
-  */
-  const handleSubmit = event => {
-    const formElement = getForm({
-      key: schemaIndex
-    });
-    if (!(formElement === null || formElement === void 0 ? void 0 : formElement.action) && event) {
-      event.preventDefault();
-    }
-    formElement === null || formElement === void 0 ? void 0 : formElement.submit();
-  };
-  return jsxs(Fragment, {
-    children: [debugMode && jsxs(Fragment, {
-      children: [jsx("b", {
-        style: {
-          padding: '0px',
-          margin: '0px'
-        },
-        children: `form index: ${schemaIndex}`
-      }), jsx("button", {
-        onClick: () => console.log(getForm({
-          key: schemaIndex
-        })),
-        children: "print form instance"
-      }), jsx("button", {
-        onClick: () => {
-          var _a;
-          return (_a = getForm({
-            key: schemaIndex
-          })) === null || _a === void 0 ? void 0 : _a.printValues();
-        },
-        children: "print values"
-      }), jsx("br", {}), jsx("hr", {})]
-    }), jsx("form", {
-      onSubmit: handleSubmit,
-      children: tree && tree
-    })]
-  });
-};
-
-const AsFormField = props => {
-  return jsx(Fragment, {
-    children: props.children
-  });
-};
-
-export { AsFormField, Form, FormGroupContext, FormGroupContextProvider, useFormGroupContext };
+export { FormGroupContext, FormGroupContextProvider, useFormGroupContext };

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.3",
   "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.2",
     "react": "18.2.0"
   },
   "peerDependencies": {}

package/src/components/AsFormField/AsFormField.d.ts

@@ -1,4 +1,4 @@
-import { IComponentSchema } from '@bolttech/form-engine-core';
+import { IComponentSchema } from '../../core/index.d';
 import { PropsWithChildren, ReactElement } from 'react';
 declare const AsFormField: (props: PropsWithChildren<Omit<IComponentSchema, 'children'>>) => ReactElement;
 export default AsFormField;

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

@@ -1,4 +1,4 @@
-import { TFormEntry } from '@bolttech/form-engine-core';
+import { TFormEntry } from '../../core/index.d';
 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;
 export default Form;

package/src/components/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Form } from './Form/Form';
-export { default as AsFormField } from './AsFormField/AsFormField';
+export * from './Form/Form';
+export * from './AsFormField/AsFormField';

package/src/context/FormGroupContext.d.ts

@@ -1,4 +1,4 @@
-import { FormCore, TFormCore, TFormGroup, TFormValues, TMapper } from '@bolttech/form-engine-core';
+import { FormCore, TFormCore, TFormGroup, TFormValues, TMapper } from '../core/index.d';
 import { ElementType, PropsWithChildren, ReactElement } from 'react';
 type TFormContext = {
     addForm: (payload: {