@engagebay/engagebay-form-module 1.0.0-beta.0

package/README.md

@@ -0,0 +1,126 @@
+# Form and FormField Documentation
+
+## `Form` Component
+
+### Description
+
+The `Form` component is a wrapper that handles form submission, validation, and state management using the `react-hook-form` library. It provides context to child components and handles the form's lifecycle, including validation and submission.
+
+### Props
+
+- **`fieldSchema: FormFieldSchema[]`**  
+  An array of objects that define the structure and validation rules of form fields.
+
+- **`formData: any`**  
+  Default values for the form fields.
+
+- **`onError?: (error: any) => void`**  
+  (Optional) Callback function invoked on form validation errors.
+
+- **`onSubmit: (data: FormData) => void`**  
+  Callback function that is triggered on successful form submission.
+
+- **`children: (props: { ... }) => React.ReactNode`**  
+  Function that renders child components, providing various form methods and state as props. These include `submitcb`, `watch`, `setValue`, `getValues`, `reset`, `setError`, `trigger`, and `unregister`.
+
+- **`customClass?: string`**  
+  (Optional) Custom CSS class for the form element.
+
+### Example
+
+```tsx
+<Form
+  fieldSchema={fieldSchema}
+  formData={defaultValues}
+  onSubmit={handleSubmit}
+  onError={handleError}
+  customClass="custom-form-class"
+>
+  {({ submitcb, watch, setValue }) => <>{/* Your form fields go here */}</>}
+</Form>
+```
+
+## `FormField` Component
+
+### Description
+
+The `FormField` component renders individual form fields based on the configuration provided via `fieldConfig`. It uses the form context provided by the `Form` component to handle registration and validation.
+
+### Props
+
+- **`fieldConfig: FormFieldSchema`**  
+  Configuration object that defines the field's properties, such as type, validation, and custom handling functions.
+
+- **`onChange?: (data: any) => void`**  
+  (Optional) Callback function triggered when the field value changes.
+
+### Example
+
+```tsx
+<FormField fieldConfig={yourFieldConfig} onChange={handleFieldChange} />
+```
+
+## `FormFieldSchema`
+
+### Description
+
+Defines the structure, behavior, and validation rules for individual form fields.
+
+### Properties
+
+- **`name: string`**  
+  The name of the field, used as a key for form data.
+
+- **`required: boolean`**  
+  Whether the field is required.
+
+- **`formFieldType: FormFieldType`**  
+  The type of form field, e.g., `INPUT`, `SELECT`, `CHECKBOX`, etc.
+
+- **`label?: string`**  
+  (Optional) Label for the form field.
+
+- **`placeholder?: string`**  
+  (Optional) Placeholder text for the field.
+
+- **`helpText?: string`**  
+  (Optional) Help text displayed alongside the field.
+
+- **`disabled?: boolean`**  
+  (Optional) Disables the field if set to `true`.
+
+- **`options?: FieldOptionsSchema[]`**  
+  (Optional) Array of options for fields like `SELECT` or `RADIO`.
+
+- **`onChange?: (data: any) => void`**  
+  (Optional) Custom handler for the field's `onChange` event.
+
+- **`customClassNames?: { ... }`**  
+  (Optional) Custom CSS classes for different parts of the field.
+
+### Example
+
+```tsx
+const fieldSchema: FormFieldSchema = {
+  name: "email",
+  required: true,
+  formFieldType: FormFieldType.INPUT,
+  label: "Email",
+  placeholder: "Enter your email",
+  formFieldPattern: [FormFieldPatternsImpl.EMAIL],
+};
+```
+
+## Additional Types and Enums
+
+- **`FormFieldType`**  
+  Enum defining various types of form fields (e.g., `INPUT`, `PASSWORD`, `SELECT`, etc.).
+
+- **`FormFieldSubType`**  
+  Enum defining subtypes of fields, like `TEXT` and `EMAIL`.
+
+- **`FieldOptionsSchema`**  
+  Structure defining options for fields like `SELECT` or `RADIO`. Includes `value`, `label`, `isDisabled`, etc.
+
+- **`FormFieldPatternsImpl`**  
+  Class providing validation patterns and messages for fields (e.g., `REQUIRED`, `EMAIL`, `URL`).

package/link.sh

@@ -0,0 +1,2 @@
+sudo npm link ../../../reacho-frontend/node_modules/react
+npm link

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@engagebay/engagebay-form-module",
+    "version": "1.0.0-beta.0",
+    "description": "Provide base form components to reacho",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Reacho Dev",
+    "license": "ISC",
+    "dependencies": {
+        "react-phone-input-2": "^2.15.1",
+        "react-phone-number-input": "^3.4.9"
+    },
+    "peerDependencies": {
+        "@headlessui/react": ">=2.1.2",
+        "@heroicons/react": ">=2.1.5",
+        "@reduxjs/toolkit": ">=2.2.7",
+        "@tippyjs/react": ">=4.2.6",
+        "@types/lodash": ">=4.17.7",
+        "@types/react-redux": ">=7.1.33",
+        "axios": ">=1.7.2",
+        "clsx": ">=2.1.1",
+        "moment": ">=2.30.1",
+        "react-hook-form": ">=7.52.1",
+        "react-popper": ">=2.3.0",
+        "react-redux": ">=8.0.4",
+        "react-tailwindcss-datepicker": ">=1.6.6",
+        "redux-saga": ">=1.3.0"
+    }
+}

package/src/api/index.ts

@@ -0,0 +1,25 @@
+import axios, { AxiosRequestConfig } from "axios";
+
+const BASE_API: AxiosRequestConfig = {
+    baseURL:
+        (window as any).REACHO_BASE_URL ||
+        (window as any).parent.REACHO_BASE_URL,
+    timeout: 30000,
+    headers: {
+        "Content-Type": "application/json",
+        Authorization: "Bearer " + localStorage.getItem("__session_token"),
+    },
+};
+
+export const baseReqService = axios;
+
+export const reachoAPI = baseReqService.create(BASE_API);
+
+reachoAPI.interceptors.request.use(
+    (config) => {
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+);

package/src/form/Form.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useRef } from "react";
+import {
+    UseFormWatch,
+    UseFormSetValue,
+    UseFormGetValues,
+    UseFormReset,
+    useForm,
+    UseFormSetError,
+    UseFormTrigger,
+    UseFormUnregister,
+    UseFormResetField,
+} from "react-hook-form";
+import { FormFieldSchema } from "./schema/FormFieldSchema";
+import { FormContext } from "./context/FormContext";
+
+/**
+ * Props for the Form component
+ *
+ * @typedef {Object} FormPropsSchema
+ * @property {FormFieldSchema[]} fieldSchema - An array of form field schema objects defining the structure and validation of the form fields.
+ * @property {any} formData - Default values for the form fields.
+ * @property {(error: any) => void} [onError] - Optional callback function to handle form validation errors.
+ * @property {(data: FormData) => void} onSubmit - Callback function to handle form submission with valid data.
+ * @property {(props: FormChildrenProps) => React.ReactNode} children - Function that renders child components, providing form methods and state as props.
+ * @property {string} [customClass] - Optional custom CSS class for the form element.
+ */
+type FormPropsSchema = {
+    fieldSchema: FormFieldSchema[];
+    formData: any;
+    onError?: (error: any) => void;
+    onSubmit?: (data: FormData) => void;
+    setFormRef?: (ref: HTMLFormElement | null) => void; // Must be called in Modal's and Offcanvas's
+    children: (props: {
+        submitcb: () => void;
+        watch: UseFormWatch<any>;
+        setValue: UseFormSetValue<any>;
+        getValues: UseFormGetValues<any>;
+        reset: UseFormReset<any>;
+        setError: UseFormSetError<any>;
+        trigger: UseFormTrigger<any>;
+        unregister: UseFormUnregister<any>;
+        resetField: UseFormResetField<any>;
+    }) => React.ReactNode;
+    customClass?: string;
+};
+
+/**
+ * Form component to handle form submission, validation, and state management.
+ *
+ * @param {FormPropsSchema} props - The properties for the Form component.
+ * @returns {JSX.Element} The rendered Form component.
+ */
+export default function Form(props: FormPropsSchema): JSX.Element {
+
+
+    const formRef = useRef<HTMLFormElement>(null);
+
+    // Initialize the form using useForm hook from react-hook-form
+    const {
+        register,
+        control,
+        setFocus,
+        watch,
+        setValue,
+        handleSubmit,
+        formState: { errors },
+        getFieldState,
+        getValues,
+        reset,
+        resetField,
+        trigger,
+        setError,
+        unregister,
+    } = useForm({
+        defaultValues: props.formData, // Set default values from props
+        mode: "onChange", // Set validation mode to "onChange"
+    });
+
+    useEffect(() => {
+        console.log("formRef.current: new", formRef.current);
+        if (formRef.current && props.setFormRef) {
+            props.setFormRef(formRef.current);
+        }
+    }, []);
+
+    /**
+     * Function to handle valid form submission
+     *
+     * @param {any} data - The form data.
+     */
+    const onFormvalid = (data: any) => {
+        console.log("Valid Form Data :: ", data);
+        props.onSubmit && props.onSubmit(data);
+    };
+
+    /**
+     * Function to handle invalid form submission
+     *
+     * @param {any} data - The form data.
+     */
+    const onFormInvalid = (data: any) => {
+        console.log("Invalid Form Data :: ", data);
+        props.onError && props.onError(errors);
+    };
+
+    // Handler for form submission
+    const onSubmit = (e?: React.BaseSyntheticEvent) => {
+        console.log("Submitting form...");
+        e?.preventDefault();
+        e?.stopPropagation();
+        handleSubmit(onFormvalid, onFormInvalid)(e); // Properly invoke handleSubmit
+    };
+
+    return (
+        <>
+            {/* Provide form context to child components */}
+            <FormContext.Provider
+                value={{
+                    formFields: props.fieldSchema,
+                    onSubmit,
+                    register,
+                    control,
+                    setValue,
+                    errors,
+                    getFieldState,
+                    getValues,
+                    handleSubmit,
+                    watch,
+                    reset,
+                    trigger,
+                    resetField,
+                    setError,
+                    setFocus,
+                    unregister,
+                }}>
+                {/* Form element */}
+                <form
+                    ref={formRef}
+                    className={props.customClass ? props.customClass : ""}
+                    onSubmit={onSubmit}>
+                    {/* Render children with form methods and state */}
+                    {props.children({
+                        submitcb: onSubmit,
+                        watch,
+                        setValue,
+                        getValues,
+                        reset,
+                        setError,
+                        trigger,
+                        unregister,
+                        resetField,
+                    })}
+                </form>
+            </FormContext.Provider>
+        </>
+    );
+}

package/src/form/FormField.tsx

@@ -0,0 +1,80 @@
+import { useContext } from "react";
+import React from "react";
+import {
+  FormFieldComponentPropSchema,
+  FormFieldType,
+} from "./schema/FormFieldSchema";
+import { FormContext } from "./context/FormContext";
+import FormFieldComponents from "./FormFieldUtils";
+
+/**
+ * `FormField` Component
+ *
+ * The `FormField` component is responsible for rendering individual form fields
+ * based on the provided `fieldConfig`. It utilizes the form context to manage
+ * the form's state, validation, and other functionalities.
+ *
+ * @param {FormFieldComponentPropSchema} props - The props for the `FormField` component.
+ * @param {FormFieldSchema} props.fieldConfig - Configuration object defining the field's properties, such as type, validation, and custom handling functions.
+ * @param {(data: any) => void} [props.onChange] - Optional callback function triggered when the field value changes.
+ *
+ * @returns {JSX.Element} The rendered `FormField` component.
+ *
+ * @example
+ * ```tsx
+ * const fieldConfig: FormFieldSchema = {
+ *   name: "email",
+ *   required: true,
+ *   formFieldType: FormFieldType.INPUT,
+ *   label: "Email",
+ *   placeholder: "Enter your email",
+ *   formFieldPattern: [FormFieldPatternsImpl.EMAIL],
+ * };
+ *
+ * <FormField fieldConfig={fieldConfig} onChange={handleFieldChange} />
+ * ```
+ */
+const FormField: React.FC<FormFieldComponentPropSchema> = ({
+  fieldConfig,
+  onChange,
+}: FormFieldComponentPropSchema) => {
+  let formContext = useContext(FormContext);
+
+  try {
+    if (!fieldConfig.formFieldType) {
+      return <>Please provide formFieldType</>;
+    }
+
+    // Retrieve the component based on the formFieldType
+    const Component =
+      FormFieldComponents[FormFieldType[fieldConfig.formFieldType]].component;
+
+    return fieldConfig.wrapper ? (
+      <fieldConfig.wrapper>
+        <Component
+          {...{
+            fieldConfig: fieldConfig,
+            control: formContext.control,
+            register: formContext.register,
+            errors: formContext.errors,
+          }}
+          onChange={onChange}
+        />
+      </fieldConfig.wrapper>
+    ) : (
+      <Component
+        {...{
+          fieldConfig: fieldConfig,
+          control: formContext.control,
+          register: formContext.register,
+          errors: formContext.errors,
+        }}
+        onChange={onChange}
+      />
+    );
+  } catch (error) {
+    return <div>Could not find input component</div>;
+  }
+};
+
+export default FormField;

package/src/form/FormFieldUtils.ts

@@ -0,0 +1,241 @@
+import React from "react";
+import ArrayField from "./formfields/ArrayField";
+import { BusinessHoursField } from "./formfields/BusinessHoursField";
+import CheckboxButtonField from "./formfields/CheckboxButtonsField";
+import CheckboxField from "./formfields/CheckboxField";
+import { ColorPickerField } from "./formfields/ColorPickerField";
+import ComboMultiSelect from "./formfields/ComboMultiSelect";
+import ComboSelect from "./formfields/ComboSelect";
+import DatePicker from "./formfields/DatePickerField";
+import DateRangePicker from "./formfields/DateRangePickerField";
+import DynamicMultiSelect from "./formfields/DynamicMultiSelect";
+import DynamicSelect from "./formfields/DynamicSelect";
+import FileUploadField from "./formfields/FileUploadField";
+import IframeField from "./formfields/IframeField";
+import InputField from "./formfields/InputField";
+import InputGroupField from "./formfields/InputGroupField";
+import MultipleSelectField from "./formfields/MultipleSelectField";
+import NumberField from "./formfields/NumberField";
+import PasswordField from "./formfields/PasswordField";
+import PhoneNumberField from "./formfields/PhoneNumberField";
+import RadioField from "./formfields/RadioField";
+import RadioGroupComponent from "./formfields/RadioGroupComponent";
+import { RangeField } from "./formfields/RangeField";
+import SelectField from "./formfields/SelectField";
+import SwitchField from "./formfields/SwitchField";
+import TextAreaField from "./formfields/TextAreaField";
+import TimeField from "./formfields/TimeField";
+import Typeahead from "./formfields/Typeahead";
+import TypeaheadMultiSelect from "./formfields/TypeaheadMultiSelect";
+import UrlField from "./formfields/UrlField";
+import {
+    FieldOptionsSchema,
+    FormFieldComponentPropSchema,
+    FormFieldType,
+    OptionMappingConfig,
+} from "./schema/FormFieldSchema";
+
+/**
+ * @property {React.FC<FormFieldComponentPropSchema>} component - React component for a form field.
+ */
+interface FormComponentSchema {
+    [key: string]: {
+        component: React.FC<FormFieldComponentPropSchema>;
+    };
+}
+
+/**
+ * An object mapping form field types to their respective components.
+ * @type {FormComponentSchema}
+ */
+const formFieldComponents: FormComponentSchema = {
+    [FormFieldType[FormFieldType.INPUT]]: {
+        component: InputField,
+    },
+
+    [FormFieldType[FormFieldType.URL]]: {
+        component: UrlField,
+    },
+
+    [FormFieldType[FormFieldType.NUMBER]]: {
+        component: NumberField,
+    },
+
+    [FormFieldType[FormFieldType.PASSWORD]]: {
+        component: PasswordField,
+    },
+
+    [FormFieldType[FormFieldType.TIME]]: {
+        component: TimeField,
+    },
+
+    [FormFieldType[FormFieldType.TEXTAREA]]: {
+        component: TextAreaField,
+    },
+
+    [FormFieldType[FormFieldType.RADIO]]: {
+        component: RadioField,
+    },
+
+    [FormFieldType[FormFieldType.RADIO_GROUP]]: {
+        component: RadioGroupComponent,
+    },
+
+    [FormFieldType[FormFieldType.CHECKBOX]]: {
+        component: CheckboxField,
+    },
+
+    [FormFieldType[FormFieldType.CHECKBOXBUTTONS]]: {
+        component: CheckboxButtonField,
+    },
+
+    [FormFieldType[FormFieldType.ARRAY]]: {
+        component: ArrayField,
+    },
+
+    [FormFieldType[FormFieldType.INPUT_GROUP]]: {
+        component: InputGroupField,
+    },
+
+    [FormFieldType[FormFieldType.RANGE]]: {
+        component: RangeField,
+    },
+
+    [FormFieldType[FormFieldType.COLOR_PICKER]]: {
+        component: ColorPickerField,
+    },
+
+    [FormFieldType[FormFieldType.FILE_UPLOAD]]: {
+        component: FileUploadField,
+    },
+
+    [FormFieldType[FormFieldType.DATE_PICKER]]: {
+        component: DatePicker,
+    },
+
+    [FormFieldType[FormFieldType.DATE_RANGE_PICKER]]: {
+        component: DateRangePicker,
+    },
+
+    [FormFieldType[FormFieldType.SWITCH]]: {
+        component: SwitchField,
+    },
+
+    [FormFieldType[FormFieldType.SELECT]]: {
+        component: SelectField,
+    },
+    [FormFieldType[FormFieldType.MULTI_SELECT]]: {
+        component: MultipleSelectField,
+    },
+    [FormFieldType[FormFieldType.DYNAMIC_SELECT]]: {
+        component: DynamicSelect,
+    },
+    [FormFieldType[FormFieldType.DYNAMIC_MULTI_SELECT]]: {
+        component: DynamicMultiSelect,
+    },
+    [FormFieldType[FormFieldType.TYPEAHEAD]]: {
+        component: Typeahead,
+    },
+    [FormFieldType[FormFieldType.TYPEAHEAD_MULTI_SELECT]]: {
+        component: TypeaheadMultiSelect,
+    },
+    [FormFieldType[FormFieldType.COMBO_SELECT]]: {
+        component: ComboSelect,
+    },
+    [FormFieldType[FormFieldType.COMBO_MULTI_SELECT]]: {
+        component: ComboMultiSelect,
+    },
+    [FormFieldType[FormFieldType.BUSINESS_HOURS]]: {
+        component: BusinessHoursField,
+    },
+    [FormFieldType[FormFieldType.PHONE_NUMBER_INPUT]]: {
+        component: PhoneNumberField,
+    },
+    [FormFieldType[FormFieldType.IFRAME]]: {
+        component: IframeField,
+    },
+};
+
+export default { ...formFieldComponents };
+
+/**
+ * Retrieves a nested value from an object based on a dot-separated path.
+ * @param {Object} obj - The object to retrieve the value from.
+ * @param {string} [path] - Dot-separated path of the property.
+ * @returns {*} - The value at the specified path, or undefined if not found.
+ */
+const getNestedValue = (obj: any, path: string | undefined): any => {
+    if (!path) return undefined;
+    return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+};
+
+/**
+ * Maps data to a list of options based on the fieldOptionConfig.
+ * @param {Object} data - The data to be mapped to options.
+ * @param {OptionMappingConfig} [fieldOptionConfig] - Configuration for mapping options.
+ * @returns {FieldOptionsSchema[]} - A list of field options.
+ */
+export const getListOptions = (
+    data: any,
+    fieldOptionConfig?: OptionMappingConfig
+): FieldOptionsSchema[] => {
+    let keys: any = fieldOptionConfig && fieldOptionConfig.listItemKey;
+    if (keys && keys.indexOf(".") > -1) {
+        keys = keys.split(".");
+    }
+    if (keys) {
+        if (Array.isArray(keys)) {
+            for (const key of keys) {
+                data = data[key];
+            }
+        } else {
+            data = data[keys];
+        }
+    }
+    let output;
+    if (fieldOptionConfig) {
+        output = data.map((item: { [x: string]: any }) => {
+            return {
+                label: getNestedValue(item, fieldOptionConfig.labelKey),
+                value: getNestedValue(item, fieldOptionConfig.valueKey),
+                groupName:
+                    fieldOptionConfig?.groupKey &&
+                    item[fieldOptionConfig?.groupKey],
+                isDisabled:
+                    fieldOptionConfig?.disabledKey &&
+                    item[fieldOptionConfig?.disabledKey],
+            };
+        });
+    } else {
+        output = data.map((item: any) => {
+            return {
+                label: item,
+                value: item,
+            };
+        });
+    }
+    return output;
+};
+
+export const getListOption = (
+    data: any,
+    fieldOptionConfig?: OptionMappingConfig
+): FieldOptionsSchema => {
+    if (fieldOptionConfig) {
+        return {
+            label: getNestedValue(data, fieldOptionConfig.labelKey),
+            value: getNestedValue(data, fieldOptionConfig.valueKey),
+            groupName:
+                fieldOptionConfig?.groupKey &&
+                data[fieldOptionConfig?.groupKey],
+            isDisabled:
+                fieldOptionConfig?.disabledKey &&
+                data[fieldOptionConfig?.disabledKey],
+        };
+    } else {
+        return {
+            label: data,
+            value: data,
+        };
+    }
+};