@bolttech/form-engine 3.0.0-beta.4 → 3.0.0-beta.40

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.40",
   "description": "A react adapter for bolttech form engine",
-  "dependencies": {
-    "rxjs": "^7.8.1",
-    "react": "18.2.0"
-  },
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
+  "dependencies": {
+    "@bolttech/form-engine-core": "0.0.1-beta.28",
+    "react": "18.2.0"
+  },
   "peerDependencies": {}
 }

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

@@ -1,4 +1,13 @@
-import { IComponentSchema } from '../../core/index.d';
-import { PropsWithChildren, ReactElement } from 'react';
-declare const AsFormField: (props: PropsWithChildren<Omit<IComponentSchema, 'children'>>) => ReactElement;
+import { ReactNode } from 'react';
+import { TAsFormFieldProps } from './AsFormField.type';
+/**
+ * Component wrapper to aid building schemas with react without writting a JSON schema
+ * along with BuildAsFormFieldTree inside a Form component, FieldWrapper gets this props
+ * to build the component as it does with a JSON schema, this component only works inside
+ * the Form component
+ *
+ * @param {TAsFormFieldProps} props JSON schema props
+ * @returns {ReactNode}
+ */
+declare const AsFormField: (props: TAsFormFieldProps) => ReactNode;
 export default AsFormField;

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

@@ -0,0 +1,9 @@
+import { IComponentSchemaAsFormField } from '@bolttech/form-engine-core';
+import { ElementType, PropsWithChildren } from 'react';
+/**
+ * AsFormField props, inherits all schema field implementation except the children
+ * property and has mappers property to pass a custom component, that will be a ReactNode
+ * @see {@link IComponentSchemaWithMapper}
+ */
+type TAsFormFieldProps = PropsWithChildren<Omit<IComponentSchemaAsFormField<ElementType>, 'children'>>;
+export type { TAsFormFieldProps };

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

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { TAsFormFieldBuilderProps } from './AsFormFieldBuilder.type';
+/**
+ * Component Wrapper to render form fields without the Form component, gets additional formId and mapper since
+ * it won't rely on them and needs to be manually declared
+ *
+ * @param {TAsFormFieldBuilderProps} props JSON schema props along with FieldWrapper props and mapper props
+ * @returns {ReactElement}
+ */
+declare const AsFormFieldBuilder: (props: TAsFormFieldBuilderProps) => ReactElement;
+export default AsFormFieldBuilder;

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

@@ -0,0 +1,16 @@
+import { IComponentSchema, TMapper } from '@bolttech/form-engine-core';
+import { ElementType, PropsWithChildren } from 'react';
+import { TFieldWrapper } from '../../types';
+/**
+ * AsFormField props, inherits all schema field implementation except the children
+ * property, that will be a ReactNode
+ * also gets the formIndex for form identification and the mapper to build the component
+ * @property {TMapper} mapper element mapper to use
+ * @see {@link TMapper}
+ * @see {@link IComponentSchema}
+ * @see {@link TFieldWrapper}
+ */
+type TAsFormFieldBuilderProps = PropsWithChildren<Omit<IComponentSchema, 'children' | 'component' | 'name'> & Required<TFieldWrapper> & {
+    mapper: TMapper<ElementType>;
+}>;
+export type { TAsFormFieldBuilderProps };

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

@@ -1,4 +1,11 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { TFieldWrapper } from '../../types';
-declare const FieldWrapper: ({ index, Component, formKey, children, events, }: PropsWithChildren<TFieldWrapper>) => ReactElement;
+import { ReactElement } from 'react';
+import { TFieldWrapperProps } from './FieldWrapper.type';
+/**
+ * Base field Wrapper to render the component with the necessary configurations from the schema
+ * and mapper configuration
+ *
+ * @param {TFieldWrapperProps} param FieldWrapper params
+ * @returns {ReactElement}
+ */
+declare const FieldWrapper: ({ name, formIndex, children, props, context, }: TFieldWrapperProps) => ReactElement;
 export default FieldWrapper;

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

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react';
+import { TFieldWrapper } from '../../types';
+import { TFormContext } from '../../context/FormGroupContext';
+import { FormField } from '@bolttech/form-engine-core';
+/**
+ * Represents the props for a field wrapper component, including children.
+ *
+ * @property {Record<string, unknown>} [props] - Additional properties for the field.
+ * @property {TFormContext | null} [context] - The context of the form, which may be null.
+ * @property {React.ReactNode} children - The child elements of the component.
+ * @see {@link TFieldWrapper}
+ */
+type TFieldWrapperProps = PropsWithChildren<TFieldWrapper & {
+    props?: Record<string, unknown>;
+    context?: TFormContext | null;
+}>;
+/**
+ * Represents the props for rendering a field wrapper component, including children.
+ *
+ * @property {Record<string, unknown>} props - Additional properties for the field.
+ * @property {FormField} [fieldInstance] - The instance of the form field, which may be undefined.
+ * @property {React.ReactNode} children - The child elements of the component.
+ */
+type TFieldWrapperComponentRenderProps = PropsWithChildren<{
+    props: Record<string, unknown>;
+    fieldInstance?: FormField;
+}>;
+export type { TFieldWrapperProps, TFieldWrapperComponentRenderProps };

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

@@ -1,4 +1,9 @@
-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;
+import { ReactElement } from 'react';
+import { TFormProps } from './Form.type';
+/**
+ *
+ * @param {TFormProps} param form properties initializor
+ * @returns {ReactElement}
+ */
+declare const Form: ({ schema, index, initialValues, iVars, action, method, onSubmit, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, children, }: TFormProps) => ReactElement;
 export default Form;

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

@@ -0,0 +1,11 @@
+import { TFormEntry } from '@bolttech/form-engine-core';
+import { PropsWithChildren } from 'react';
+import { TEventsCallbackProps } from '../../types';
+/**
+ * Form props, inherits the form instance constructor implementation except the mapper
+ * along with all event callback register props shared with other implementations
+ * @see {@link TFormEntry}
+ * @see {@link TEventsCallbackProps}
+ */
+type TFormProps = PropsWithChildren<Omit<TFormEntry, 'mappers'> & TEventsCallbackProps>;
+export type { TFormProps };

package/src/components/index.d.ts

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

package/src/context/FormGroupContext.d.ts

@@ -1,27 +1,19 @@
-import { FormCore, TFormCore, TFormGroup, TFormValues, TMapper } from '../core/index.d';
-import { ElementType, PropsWithChildren, ReactElement } from 'react';
-type TFormContext = {
-    addForm: (payload: {
-        key: string;
-        formInstance: TFormCore;
-    }) => void;
-    getForm: (payload: {
-        key: string;
-    }) => FormCore | undefined;
-    removeForm: (payload: {
-        key: string;
-    }) => void;
-    formGroupInstance: TFormGroup;
-    mappers: TMapper<ElementType>[];
-    printFormGroupInstance: () => void;
-    submitMultipleFormsByIndex: (indexes: string[]) => TFormValues;
-    debugMode: boolean;
-};
-type TFormContextProvider = {
-    mappers: TMapper<ElementType>[];
-    debugMode?: boolean;
-};
+import { PropsWithChildren, ReactElement } from 'react';
+import { TFormContext, TFormContextProvider } from './FormGroupContext.type';
 declare const FormGroupContext: import("react").Context<TFormContext>;
+/**
+ * context provider to wrap form-engine adapter elements
+ *
+ * @param {PropsWithChildren<TFormContextProvider>} param context parameters
+ * @returns {ReactElement}
+ */
 declare const FormGroupContextProvider: ({ children, mappers, debugMode, }: PropsWithChildren<TFormContextProvider>) => ReactElement;
-declare const useFormGroupContext: () => TFormContext;
+/**
+ * FormGroup context hook to handle context or isolated context implementations
+ *
+ * @param {TFormContextProvider} props form group context parameters
+ * @returns {TFormContext}
+ */
+declare const useFormGroupContext: (props?: TFormContextProvider) => TFormContext;
 export { FormGroupContext, FormGroupContextProvider, useFormGroupContext };
+export type { TFormContext };

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

@@ -0,0 +1,46 @@
+import { FormCore, TFormCore, TFormGroup, TMapper } from '@bolttech/form-engine-core';
+import { ElementType } from 'react';
+/**
+ * Represents the context for managing forms within a form group.
+ *
+ * @property {function(string): void} addFormWithIndex - Adds a form to the form group by its index.
+ * @property {function({ key: string, formInstance: TFormCore }): void} addForm - Adds a form to the form group using a payload containing the key and form instance.
+ * @property {function({ key: string }): (FormCore | undefined)} getForm - Retrieves a form from the form group using a payload containing the key.
+ * @property {function({ key: string }): void} removeForm - Removes a form from the form group using a payload containing the key.
+ * @property {TFormGroup} formGroupInstance - The instance of the form group.
+ * @property {TMapper<ElementType>[]} [mappers] - Optional array of mappers for elements.
+ * @property {function(): void} printFormGroupInstance - Prints the form group instance.
+ * @property {function(string[]): TFormValues} submitMultipleFormsByIndex - Submits multiple forms by their indexes and returns the form values.
+ * @property {boolean} debugMode - Indicates if debug mode is active.
+ * @property {boolean} active - Indicates if the form context is active.
+ */
+type TFormContext = {
+    addFormWithIndex: (index: string) => void;
+    addForm: (payload: {
+        key: string;
+        formInstance: TFormCore;
+    }) => void;
+    getForm: (payload: {
+        key: string;
+    }) => FormCore | undefined;
+    removeForm: (payload: {
+        key: string;
+    }) => void;
+    formGroupInstance: TFormGroup;
+    mappers?: TMapper<ElementType>[];
+    printFormGroupInstance: () => void;
+    submitMultipleFormsByIndex: <T>(indexes: string[]) => void;
+    debugMode: boolean;
+    active: boolean;
+};
+/**
+ * Represents the props for a form context provider.
+ *
+ * @property {TMapper<ElementType>[]} [mappers] - Optional array of mappers for elements.
+ * @property {boolean} [debugMode] - Optional flag indicating if debug mode should be enabled.
+ */
+type TFormContextProvider = {
+    mappers?: TMapper<ElementType>[];
+    debugMode?: boolean;
+};
+export type { TFormContext, TFormContextProvider };

package/src/generators/formBuilder.d.ts

@@ -1,11 +1,26 @@
-import { ReactNode } from 'react';
-import { IFormField, IComponentSchema } from '../core/index.d';
-declare const BuildTree: ({ fields, prevPath, formKey, }: {
+import { ElementType, ReactNode } from 'react';
+import { IFormField, IComponentSchemaAsFormField } from '@bolttech/form-engine-core';
+/**
+ * recursive function to transform form fields from a form instance into
+ * a react component tree
+ *
+ * @param {Map<string,IFormField>} param.fields form instance field Map
+ * @param {string} param.prevPath previous field path to track the tree branch creation
+ * @param {string} param.formIndex form index to aid field identification onto the FieldWrapper
+ * @returns {ReactNode}
+ */
+declare const BuildTree: ({ fields, prevPath, formIndex, }: {
     fields: Map<string, IFormField>;
     prevPath?: string | undefined;
-    formKey: string;
+    formIndex: string;
 }) => ReactNode;
+/**
+ * function to transform AsFormField elements onto a JSON schema
+ *
+ * @param param.children ReactNode children elements
+ * @returns {IComponentSchema[] | null | undefined}
+ */
 declare const BuildAsFormFieldTree: ({ children, }: {
     children?: ReactNode;
-}) => IComponentSchema[] | null | undefined;
+}) => IComponentSchemaAsFormField<ElementType>[] | null | undefined;
 export { BuildTree, BuildAsFormFieldTree };

package/src/helpers/helpers.d.ts

@@ -0,0 +1,7 @@
+import { TEvents } from '@bolttech/form-engine-core';
+import { TEventProps } from '../types';
+/**
+ * events mapping to aid function callback binding
+ */
+declare const eventsMapping: Partial<Record<TEvents, TEventProps>>;
+export { eventsMapping };

package/src/helpers/mapper.d.ts

@@ -0,0 +1,7 @@
+import { TValueChangeEvent } from '@bolttech/form-engine-core';
+declare const defaultChangeEvent: TValueChangeEvent;
+declare const checkedChangeEvent: TValueChangeEvent;
+declare const valueChangeEvent: TValueChangeEvent;
+declare const datepickerChangeEvent: TValueChangeEvent;
+declare const dropdownChangeEvent: TValueChangeEvent;
+export { defaultChangeEvent, checkedChangeEvent, valueChangeEvent, datepickerChangeEvent, dropdownChangeEvent, };

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/useForm.d.ts

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

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

@@ -0,0 +1,12 @@
+import { TEventsCallbackProps } from '../../types';
+/**
+ * Represents the properties for the useForm hook, including an ID and event callback properties.
+ *
+ * @property {string} id - The unique identifier for the form.
+ *
+ * @see {@link TEventsCallbackProps}
+ */
+type TUseFormProps = {
+    id: string;
+} & TEventsCallbackProps;
+export type { TUseFormProps };

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,5 @@
 export * from './components';
+export * from './hooks';
 export * from './context/FormGroupContext';
 export * from './types';
+export * from './helpers/mapper';

package/src/types/index.d.ts

@@ -1,47 +1,30 @@
-import { TComponentPropsMapping } from '../core/index.d';
-import { ElementType } from 'react';
+import { TFieldEvent, TFormValues } from '@bolttech/form-engine-core';
 /**
- * @type TFieldWrapper
- * Represents the wrapper for a form field, including the component,
- * event handlers, and other properties related to form management.
+ * Represents a field wrapper containing the name of the field and its index in the form.
  *
- * @property {string} index - The index of the field in the form.
- * @property {ElementType} Component - The component to be rendered.
- * @property {(event: unknown) => unknown} [valueChangeEvent] - Function to handle value change events.
- * @property {string} formKey - The key of the form.
- * @property {string} [onBlur] - Function to handle the blur event.
- * @property {string} [onChange] - Function to handle the change event.
- * @property {string} [onFocus] - Function to handle the focus event.
- * @property {string} [onClick] - Function to handle the click event.
- * @property {string} [onKeyUp] - Function to handle the keyup event.
- * @property {string} [onKeyDown] - Function to handle the keydown event.
- * @property {unknown} [onValue] - The current value of the field.
- * @property {string} [onErrorMessage] - error message prop name to set message string
- *
- * @example
- * ```typescript
- * const fieldWrapper: TFieldWrapper = {
- *   index: '1',
- *   Component: MyComponent,
- *   valueChangeEvent: (event) => {
- *     const newValue = (event as React.ChangeEvent<HTMLInputElement>).target.value;
- *     return newValue;
- *   },
- *   formKey: 'myForm',
- *   onBlur: 'handleBlur',
- *   onChange: 'handleChange',
- *   onFocus: 'handleFocus',
- *   onClick: 'handleClick',
- *   onKeyUp: 'handleKeyUp',
- *   onKeyDown: 'handleKeyDown',
- *   onValue: 'value'
- * };
- * ```
+ * @property {string} name - The name of the field.
+ * @property {string} formIndex - The index of the field within the form.
  */
 type TFieldWrapper = {
-    index: string;
-    Component: ElementType;
-    formKey: string;
-    events?: TComponentPropsMapping;
+    name: string;
+    formIndex: string;
+};
+/**
+ * Represents the possible event properties for form fields callbacks.
+ */
+type TEventProps = 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onMount' | 'onApiResponse' | 'onClick';
+/**
+ * Represents the content inside onData payload action.
+ */
+type TFormData<T> = {
+    field: string;
+    data: TFormValues<T>;
+};
+/**
+ * Represents a mapping of event properties to their corresponding callback functions.
+ */
+type TEventsCallbackProps = Partial<Record<TEventProps, ((payload: TFieldEvent) => void) | null | undefined>> & {
+    onData?: <T>(payload: TFormData<T>) => void;
+    onSubmit?: <T>(payload: TFormValues<T>) => void;
 };
-export { TFieldWrapper };
+export { TFieldWrapper, TEventProps, TEventsCallbackProps, TFormData };