@engagebay/engagebay-form-module 1.0.0-beta.1 → 1.0.0-beta.3-0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.0-beta.1",
+    "version": "1.0.0-beta.3-0",
     "description": "Provide base form components to reacho",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
@@ -26,5 +26,21 @@
         "react-redux": ">=8.0.4",
         "react-tailwindcss-datepicker": ">=1.6.6",
         "redux-saga": ">=1.3.0"
+    },
+    "devDependencies": {
+        "@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/AxiosConfigProvider.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { AxiosInstance } from 'axios';
+
+interface AxiosConfigContextType {
+  axiosInstance: AxiosInstance;
+  baseURL?: string;
+  timeout?: number;
+  headers?: Record<string, string>;
+}
+
+const AxiosConfigContext = createContext<AxiosConfigContextType | null>(null);
+
+interface AxiosConfigProviderProps {
+  children: ReactNode;
+  axiosInstance: AxiosInstance;
+  baseURL?: string;
+  timeout?: number;
+  headers?: Record<string, string>;
+}
+
+export const AxiosConfigProvider: React.FC<AxiosConfigProviderProps> = ({
+  children,
+  axiosInstance,
+  baseURL,
+  timeout,
+  headers,
+}) => {
+  const config: AxiosConfigContextType = {
+    axiosInstance,
+    baseURL,
+    timeout,
+    headers,
+  };
+
+  return (
+    <AxiosConfigContext.Provider value={config}>
+      {children}
+    </AxiosConfigContext.Provider>
+  );
+};
+
+export const useAxiosConfig = (): AxiosConfigContextType => {
+  const context = useContext(AxiosConfigContext);
+  if (!context) {
+    throw new Error('useAxiosConfig must be used within an AxiosConfigProvider');
+  }
+  return context;
+};
+
+// Hook for optional usage (doesn't throw error if not provided)
+export const useAxiosConfigOptional = (): AxiosConfigContextType | null => {
+  return useContext(AxiosConfigContext);
+};

package/src/api/index.ts

@@ -1,4 +1,5 @@
-import axios, { AxiosRequestConfig } from "axios";
+import axios, {AxiosInstance, AxiosRequestConfig} from "axios";
+import {FormFieldSchema} from "../form/schema/FormFieldSchema";
 
 const BASE_API: AxiosRequestConfig = {
     baseURL:
@@ -23,3 +24,16 @@ reachoAPI.interceptors.request.use(
         return Promise.reject(error);
     }
 );
+
+export const getAxiosInstance = (axiosInstance: AxiosInstance | undefined, fieldConfig: FormFieldSchema): AxiosInstance => {
+    
+    if (fieldConfig && fieldConfig.axiosInstance) {
+        return fieldConfig.axiosInstance;
+    }
+
+    if (axiosInstance) {
+        return axiosInstance;
+    }
+
+    return fieldConfig.disableHeaderInFetch ? axios : reachoAPI;
+};

package/src/form/Form.tsx

@@ -12,6 +12,7 @@ import {
 } from "react-hook-form";
 import { FormFieldSchema } from "./schema/FormFieldSchema";
 import { FormContext } from "./context/FormContext";
+import { AxiosInstance } from 'axios';
 
 /**
  * Props for the Form component
@@ -26,6 +27,7 @@ import { FormContext } from "./context/FormContext";
  */
 type FormPropsSchema = {
     fieldSchema: FormFieldSchema[];
+    axiosInstance?: AxiosInstance
     formData: any;
     onError?: (error: any) => void;
     onSubmit?: (data: FormData) => void;
@@ -132,6 +134,7 @@ export default function Form(props: FormPropsSchema): JSX.Element {
                     setError,
                     setFocus,
                     unregister,
+                    axiosInstance: props.axiosInstance,
                 }}>
                 {/* Form element */}
                 <form

package/src/form/context/FormContext.tsx

@@ -17,6 +17,7 @@ import {
   UseFormWatch,
 } from "react-hook-form";
 import { FormFieldSchema } from "../schema/FormFieldSchema";
+import { AxiosInstance } from "axios";
 
 export interface FormContextType {
   formFields: FormFieldSchema[];
@@ -43,6 +44,7 @@ export interface FormContextType {
   // control: Control<TFieldValues, TContext>;
   // register: UseFormRegister<TFieldValues>;
   setFocus: UseFormSetFocus<any>;
+  axiosInstance?: AxiosInstance;
 }
 
 export const FormContext = createContext({

package/src/form/formfields/BusinessHoursField.tsx

@@ -10,7 +10,6 @@ import {FormContext} from "../context/FormContext";
 import {RegisterOptions} from "react-hook-form";
 import {convertToTitleCase, registerFormField} from "../util";
 import axios from "axios";
-import {reachoAPI} from "../../api";
 import SwitchField from "./SwitchField";
 import FormField from "../FormField";
 import RenderFormField from "../util/RenderFormField";
@@ -138,9 +137,9 @@ export const BusinessHoursField: React.FC<FormFieldComponentPropSchema> = (props
             try {
                 let response = await (props.fieldConfig.disableHeaderInFetch
                     ? axios.get(url)
-                    : reachoAPI.get(url));
+                    : formContext.axiosInstance?.get(url));
 
-                if (response.data) {
+                if (response?.data) {
                     const data: FieldOptionsSchema[] = response.data;
                     setListOptions(data);
                     setLoading(false);
@@ -149,7 +148,7 @@ export const BusinessHoursField: React.FC<FormFieldComponentPropSchema> = (props
                         props.fieldConfig.fetchCallback(response);
                     }
                 } else {
-                    console.error(response.statusText);
+                    console.error(response?.statusText);
                     setLoading(false);
                 }
             } catch (error) {

package/src/form/formfields/ColorPickerField.tsx

@@ -7,7 +7,7 @@ import { Field } from "@headlessui/react";
 import RenderFormField from "../util/RenderFormField";
 import { handleChange, registerFormField } from "../util";
 
-export const ColorPickerField: React.FC<FormFieldComponentPropSchema> = (
+const ColorPickerField: React.FC<FormFieldComponentPropSchema> = (
     props: FormFieldComponentPropSchema
 ) => {
     const formContext = useContext(FormContext);
@@ -57,3 +57,5 @@ export const ColorPickerField: React.FC<FormFieldComponentPropSchema> = (
         <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
     );
 };
+
+export default ColorPickerField;

package/src/form/formfields/DynamicMultiSelect.tsx

@@ -10,13 +10,12 @@ import {Listbox, ListboxButton} from "@headlessui/react";
 
 import {FormContext} from "../context/FormContext";
 import {getListOptions} from "../FormFieldUtils";
-import axios from "axios";
 import useDymanicReducer from "../hooks/useDynamicReducer";
 import {useDispatch} from "react-redux";
 import RenderFormField from "../util/RenderFormField";
 import {handleChange, registerFormField} from "../util";
 import RenderListOptions, {renderListBoxValue,} from "../util/RenderListOptions";
-import {reachoAPI} from "../../api";
+import {getAxiosInstance} from "../../api";
 
 const DynamicMultiSelect: React.FC<FormFieldComponentPropSchema> = (
     props: FormFieldComponentPropSchema
@@ -98,12 +97,12 @@ const DynamicMultiSelect: React.FC<FormFieldComponentPropSchema> = (
         let options = props.fieldConfig.options;
         setListOptions(prevState => [...options, ...prevState]);
     }
+
     const fetchData = async () => {
         if (!props.fieldConfig.fetchUrl) return;
+        const axiosInstance = getAxiosInstance(formContext.axiosInstance, props.fieldConfig);
+        let response = await axiosInstance.get(props.fieldConfig.fetchUrl);
 
-        let response = await (props.fieldConfig.disableHeaderInFetch
-            ? axios.get(props.fieldConfig.fetchUrl)
-            : reachoAPI.get(props.fieldConfig.fetchUrl));
         if (response.data) {
             const data: FieldOptionsSchema[] = getListOptions(
                 response.data,

package/src/form/formfields/DynamicSelect.tsx

@@ -15,8 +15,7 @@ import useDymanicReducer from "../hooks/useDynamicReducer";
 import RenderFormField from "../util/RenderFormField";
 import RenderListOptions, {renderListBoxValue,} from "../util/RenderListOptions";
 import {handleChange, registerFormField} from "../util";
-import {reachoAPI} from "../../api/index";
-import axios from "axios";
+import {getAxiosInstance} from "../../api";
 
 const DynamicSelect: React.FC<FormFieldComponentPropSchema> = (
     props: FormFieldComponentPropSchema
@@ -97,10 +96,10 @@ const DynamicSelect: React.FC<FormFieldComponentPropSchema> = (
     const fetchData = useCallback(async () => {
         if (!props.fieldConfig.fetchUrl) return;
 
+        const axiosInstance = getAxiosInstance(formContext.axiosInstance, props.fieldConfig);
+
         try {
-            let response = await (props.fieldConfig.disableHeaderInFetch
-                ? axios.get(props.fieldConfig.fetchUrl)
-                : reachoAPI.get(props.fieldConfig.fetchUrl));
+            let response = await axiosInstance.get(props.fieldConfig.fetchUrl);
 
             if (response.data) {
                 const data: FieldOptionsSchema[] = getListOptions(response.data, props.fieldConfig.optionsConfig);

package/src/form/formfields/RangeField.tsx

@@ -7,7 +7,7 @@ import { Input } from "@headlessui/react";
 import RenderFormField from "../util/RenderFormField";
 import { handleChange, registerFormField } from "../util";
 
-export const RangeField: React.FC<FormFieldComponentPropSchema> = (
+const RangeField: React.FC<FormFieldComponentPropSchema> = (
   props: FormFieldComponentPropSchema
 ) => {
   const formContext = useContext(FormContext);
@@ -51,3 +51,5 @@ export const RangeField: React.FC<FormFieldComponentPropSchema> = (
     <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
   );
 };
+
+export default RangeField;

package/src/form/formfields/Typeahead.tsx

@@ -9,7 +9,6 @@ import React, {
 import { Listbox, ListboxButton } from "@headlessui/react";
 import axios from "axios";
 import { RegisterOptions } from "react-hook-form";
-import { reachoAPI } from "../../api";
 import { FormContext } from "../context/FormContext";
 import { getListOption, getListOptions } from "../FormFieldUtils";
 import {
@@ -68,8 +67,8 @@ const Typeahead: React.FC<FormFieldComponentPropSchema> = (
 
                 let response = await (props.fieldConfig.disableHeaderInFetch
                     ? axios.get(url)
-                    : reachoAPI.get(url));
-                if (response.data) {
+                    : formContext.axiosInstance?.get(url));
+                if (response?.data) {
                     const data: FieldOptionsSchema[] = getListOptions(
                         response.data,
                         props.fieldConfig.optionsConfig
@@ -87,7 +86,7 @@ const Typeahead: React.FC<FormFieldComponentPropSchema> = (
                         props.fieldConfig.fetchCallback(response);
                     }
                 } else {
-                    console.error(response.statusText);
+                    console.error(response?.statusText);
                 }
             } catch (err) {
             } finally {
@@ -116,11 +115,11 @@ const Typeahead: React.FC<FormFieldComponentPropSchema> = (
             let response = await (
                 props.fieldConfig.disableHeaderInFetch
                     ? axios.get(url)
-                    : reachoAPI.get(url)
+                    : formContext.axiosInstance?.get(url)
             );
-            if (response.data) {
+            if (response?.data) {
                 const data: FieldOptionsSchema[] = getListOptions(
-                    response.data,
+                    response?.data,
                     props.fieldConfig.optionsConfig
                 );
                 setSelectedValues([...data]);

package/src/form/formfields/TypeaheadMultiSelect.tsx

@@ -23,7 +23,6 @@ import RenderListOptions, {
 } from "../util/RenderListOptions";
 // import _ from "lodash";
 import axios from "axios";
-import { reachoAPI } from "../../api";
 
 const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
     props: FormFieldComponentPropSchema
@@ -69,10 +68,10 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
 
                 let response = await (props.fieldConfig.disableHeaderInFetch
                     ? axios.get(url)
-                    : reachoAPI.get(url));
-                if (response.data) {
+                    : formContext.axiosInstance?.get(url));
+                if (response?.data) {
                     const data: FieldOptionsSchema[] = getListOptions(
-                        response.data,
+                        response?.data,
                         props.fieldConfig.optionsConfig
                     );
                     setListOptions([...data]);
@@ -91,7 +90,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
                         props.fieldConfig.fetchCallback(response);
                     }
                 } else {
-                    console.error(response.statusText);
+                    console.error(response?.statusText);
                 }
             } catch (err) {
             } finally {
@@ -118,10 +117,10 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
 
             let response = await (props.fieldConfig.disableHeaderInFetch
                 ? axios.get(url)
-                : reachoAPI.get(url));
-            if (response.data) {
+                : formContext.axiosInstance?.get(url));
+            if (response?.data) {
                 const data: FieldOptionsSchema[] = getListOptions(
-                    response.data,
+                    response?.data,
                     props.fieldConfig.optionsConfig
                 );
                 setSelectedValues([...data]);

package/src/form/schema/FormFieldSchema.ts

@@ -10,6 +10,7 @@ import {
 } from "react-hook-form";
 import { Saga } from "redux-saga";
 import { emailIdsValidator, queryValidator } from "./CustomValidators";
+import { AxiosInstance } from 'axios';
 
 export enum FormFieldType {
     INPUT = "INPUT",
@@ -136,6 +137,7 @@ export type FormFieldSchema = {
     forceUpdate?: boolean;
     disableHeaderInFetch?: boolean;
     dropdownFieldConfig?: DropdownFieldConfig;
+    axiosInstance?: AxiosInstance
 
     /**
      * Redux configuration attribute

package/src/index.ts

@@ -0,0 +1,58 @@
+// Main exports for EngageBay Form Module
+
+// Core components
+export { default as Form } from './form/Form';
+export { default as FormField } from './form/FormField';
+
+// Axios configuration
+export { AxiosConfigProvider, useAxiosConfig, useAxiosConfigOptional } from './api/AxiosConfigProvider';
+
+// Form context
+export { FormContext } from './form/context/FormContext';
+
+// Schema and types
+export * from './form/schema/FormFieldSchema';
+
+// Utilities
+export * from './form/util';
+
+// Form field components
+export { default as ArrayField } from './form/formfields/ArrayField';
+export { BusinessHoursField } from './form/formfields/BusinessHoursField';
+export { default as CheckboxButtonsField } from './form/formfields/CheckboxButtonsField';
+export { default as CheckboxField } from './form/formfields/CheckboxField';
+export { default as ColorPickerField } from './form/formfields/ColorPickerField';
+export { default as ComboMultiSelect } from './form/formfields/ComboMultiSelect';
+export { default as ComboSelect } from './form/formfields/ComboSelect';
+export { default as DatePickerField } from './form/formfields/DatePickerField';
+export { default as DateRangePickerField } from './form/formfields/DateRangePickerField';
+export { default as DynamicMultiSelect } from './form/formfields/DynamicMultiSelect';
+export { default as DynamicSelect } from './form/formfields/DynamicSelect';
+export { default as Error } from './form/formfields/Error';
+export { default as ErrorContextHandler } from './form/formfields/ErrorContextHandler';
+export { default as FileUploadField } from './form/formfields/FileUploadField';
+export { default as IframeField } from './form/formfields/IframeField';
+export { default as InputField } from './form/formfields/InputField';
+export { default as InputGroupField } from './form/formfields/InputGroupField';
+export { default as MultipleSelectField } from './form/formfields/MultipleSelectField';
+export { default as NumberField } from './form/formfields/NumberField';
+export { default as PasswordField } from './form/formfields/PasswordField';
+export { default as PhoneNumberField } from './form/formfields/PhoneNumberField';
+export { default as RadioField } from './form/formfields/RadioField';
+export { default as RadioGroupComponent } from './form/formfields/RadioGroupComponent';
+export { default as RangeField } from './form/formfields/RangeField';
+export { default as SelectField } from './form/formfields/SelectField';
+export { default as SwitchField } from './form/formfields/SwitchField';
+export { default as TextAreaField } from './form/formfields/TextAreaField';
+export { default as TimeField } from './form/formfields/TimeField';
+export { default as Typeahead } from './form/formfields/Typeahead';
+export { default as TypeaheadMultiSelect } from './form/formfields/TypeaheadMultiSelect';
+export { default as UrlField } from './form/formfields/UrlField';
+
+// Hooks
+export { default as useDynamicReducer } from './form/hooks/useDynamicReducer';
+
+// Utilities
+export { default as LoaderWithText } from './util/LoaderWithText';
+export { default as SVGIcon } from './util/svg/SVGIcon';
+export * from './util/svg/HELPER_ICONS';

package/src/util/LoaderWithText.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export function LoaderWithText() {
+export default function LoaderWithText() {
   return (
     <div
       id="loader-with-text"