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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.0-beta.2",
+    "version": "1.0.0-beta.3-1",
     "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

@@ -25,9 +25,15 @@ reachoAPI.interceptors.request.use(
     }
 );
 
-export const getAxiosInstance = (fieldConfig: FormFieldSchema): AxiosInstance => {
-    if (fieldConfig.axiosInstance) {
+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

@@ -97,9 +97,10 @@ 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(props.fieldConfig);
+        const axiosInstance = getAxiosInstance(formContext.axiosInstance, props.fieldConfig);
         let response = await axiosInstance.get(props.fieldConfig.fetchUrl);
 
         if (response.data) {

package/src/form/formfields/DynamicSelect.tsx

@@ -96,7 +96,7 @@ const DynamicSelect: React.FC<FormFieldComponentPropSchema> = (
     const fetchData = useCallback(async () => {
         if (!props.fieldConfig.fetchUrl) return;
 
-        const axiosInstance = getAxiosInstance(props.fieldConfig);
+        const axiosInstance = getAxiosInstance(formContext.axiosInstance, props.fieldConfig);
 
         try {
             let response = await axiosInstance.get(props.fieldConfig.fetchUrl);

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/util/LoaderWithText.tsx

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