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

package/src/form/formfields/DynamicSelect.tsx

@@ -0,0 +1,187 @@
+import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from "react";
+import {
+    FieldOptionsSchema,
+    FormFieldComponentPropSchema,
+    FormFieldType,
+    OutputFormatType,
+    StoreStateSchema,
+} from "../schema/FormFieldSchema";
+import {RegisterOptions} from "react-hook-form";
+import {FormContext} from "../context/FormContext";
+import {Listbox, ListboxButton} from "@headlessui/react";
+import {useDispatch} from "react-redux";
+import {getListOptions} from "../FormFieldUtils";
+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";
+
+const DynamicSelect: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const dynamicSelectRef = useRef<HTMLUListElement>(null);
+
+    const formContext = useContext(FormContext);
+
+    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+    const [loading, setLoading] = useState<boolean>(false);
+
+    useMemo(() => {
+        const {fieldConfig} = props;
+
+        // Initialize dropdownFieldConfig with defaults if not already set
+        fieldConfig.dropdownFieldConfig = {
+            showCreateOption:
+                fieldConfig.dropdownFieldConfig?.showCreateOption ?? false,
+            showDeleteOption:
+                fieldConfig.dropdownFieldConfig?.showDeleteOption ?? true,
+            showSearchBox:
+                fieldConfig.dropdownFieldConfig?.showSearchBox ?? true,
+            showSelectedCount:
+                fieldConfig.dropdownFieldConfig?.showSelectedCount ?? true,
+        };
+        if (
+            !formContext.getValues(props.fieldConfig.name) &&
+            props.fieldConfig.defaultValue
+        ) {
+            formContext.setValue(
+                props.fieldConfig.name,
+                props.fieldConfig.defaultValue
+            );
+        }
+    }, [props.fieldConfig]);
+
+    if (props.fieldConfig.store) {
+        // Get the state from the reducer
+        const {state} = useDymanicReducer<StoreStateSchema<any>>({
+            reducerConfig: props.fieldConfig.store,
+        });
+
+        const dispatch = useDispatch();
+
+        // Memoize the listOptions and loading state derived from state.data
+        const {listOptions, isLoading} = useMemo(() => {
+            const options = state && state.data && Array.isArray(state.data)
+                ? getListOptions(state.data, props.fieldConfig.optionsConfig)
+                : [];
+            const loading = state && state.loading;
+            return {listOptions: options, isLoading: loading};
+        }, [state, props.fieldConfig.optionsConfig]);
+
+        useEffect(() => {
+            // Dispatch the initial fetch action if needed
+            if (props.fieldConfig.store?.initialFetchReducerAction && (!state || !state.data)) {
+                dispatch(props.fieldConfig.store.initialFetchReducerAction(props.fieldConfig.customUrlForRedux ? props.fieldConfig.customUrlForRedux : ''));
+            }
+
+            // Set the listOptions and loading state when the state changes
+            setListOptions(listOptions);
+            setLoading(isLoading);
+        }, [isLoading]);
+    }
+    useEffect(() => {
+        // Fetch data when fetchUrl is present
+        if (props.fieldConfig.fetchUrl) {
+            fetchData();
+        }
+
+        // Set options only when they are available and valid
+        if (Array.isArray(props.fieldConfig.options) && props.fieldConfig.options.length > 0) {
+            let options = props.fieldConfig.options;
+            setListOptions(prevState => [...options, ...prevState]);
+        }
+    }, []);
+
+    const fetchData = useCallback(async () => {
+        if (!props.fieldConfig.fetchUrl) return;
+
+        try {
+            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, props.fieldConfig.optionsConfig);
+                setListOptions(prev => [...prev, ...data]);
+
+                if (props.fieldConfig.fetchCallback) {
+                    props.fieldConfig.fetchCallback(response);
+                }
+            } else {
+                console.error(response.statusText);
+                setLoading(false);
+            }
+        } catch (error) {
+            console.error('Fetch error:', error);
+            setLoading(false);
+        }
+    }, [props.fieldConfig.fetchUrl, props.fieldConfig.optionsConfig, props.fieldConfig.fetchCallback, props.fieldConfig.disableHeaderInFetch]);
+
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+    const hookProps = useMemo(() => formContext.register(props.fieldConfig.name, registerOptions), [formContext, props.fieldConfig.name, registerOptions]);
+
+    function getInput() {
+        return (
+            <Listbox
+                as={"div"}
+                {...hookProps}
+                className={`relative form-listbox flex-1`}
+                value={
+                    formContext.getValues(props.fieldConfig.name)
+                        ? props.fieldConfig.outputFormat ===
+                        OutputFormatType.ARRAY
+                            ? formContext.getValues(props.fieldConfig.name)[0]
+                            : formContext.getValues(props.fieldConfig.name)
+                        : undefined
+                }
+                onChange={(val) => {
+                    const currentValue = formContext.getValues(props.fieldConfig.name);
+
+                    // If the value matches, set it to null, otherwise set it to val
+                    const newValue = currentValue === val ? null : val;
+
+                    handleChange(newValue, formContext, props.fieldConfig, props.onChange);
+                }}
+                defaultValue={props.fieldConfig.defaultValue}
+                name={props.fieldConfig.name}
+                disabled={props.fieldConfig.disabled}>
+                <ListboxButton
+                    className={
+                        props.fieldConfig.customClassNames?.fieldClassName
+                            ? "form-listbox-select " +
+                            props.fieldConfig.customClassNames.fieldClassName
+                            : "form-listbox-select"
+                    }>
+                    {renderListBoxValue(
+                        formContext,
+                        props.fieldConfig,
+                        listOptions,
+                        props.onChange
+                    )}
+                </ListboxButton>
+                <RenderListOptions
+                    formContext={formContext}
+                    onChange={props.onChange}
+                    formField={FormFieldType.DYNAMIC_SELECT}
+                    ref={dynamicSelectRef}
+                    fieldConfig={props.fieldConfig}
+                    listOptions={listOptions}
+                    setListOptions={setListOptions}
+                    loading={loading}
+                    setLoading={setLoading}
+                />
+            </Listbox>
+        );
+    }
+    if(props.fieldConfig.hideWhenNoResults && listOptions.length==0 )
+    {
+        return <></>
+    }
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
+    );
+};
+export default DynamicSelect;

package/src/form/formfields/Error.tsx

@@ -0,0 +1,15 @@
+import React, { useContext, useEffect } from 'react';
+
+const Error = ({ type, patternMessage }: { type: any; patternMessage?: string | undefined }) => {
+    return (
+        <>
+            {type === 'required' && <span className="field-error">This field is required</span>}
+            {type === 'minLength' && <span className="field-error">This is invalid field</span>}
+            {type === 'maxLength' && <span className="field-error">This field cannot exceed characters</span>}
+            {type === 'min' && <span className="field-error">This is invalid field</span>}
+            {type === 'pattern' && <span className="field-error">{patternMessage}</span>}
+            {type === 'validate' && <span className="field-error">{patternMessage}</span>}
+        </>
+    );
+};
+export default Error;

package/src/form/formfields/ErrorContextHandler.tsx

@@ -0,0 +1,77 @@
+import React, { ContextType, useContext } from "react";
+import Error from "./Error";
+import { FormFieldSchema } from "../schema/FormFieldSchema";
+import { FormContext } from "../context/FormContext";
+
+export interface ErrorContextProps {
+  fieldConfig: FormFieldSchema;
+}
+
+export default function ErrorContextHandler({
+  fieldConfig,
+}: ErrorContextProps) {
+  const formContext = useContext(FormContext);
+
+  const getPatternMessage = () => {
+    try {
+      if (
+        formContext.getFieldState &&
+        formContext.getFieldState(fieldConfig.name) &&
+        formContext.getFieldState(fieldConfig.name).error?.type === "validate"
+      ) {
+        return formContext.getFieldState(fieldConfig.name).error?.message;
+      }
+      return (
+          fieldConfig &&
+          fieldConfig.formFieldPattern &&
+          (fieldConfig.errorMessage ||
+              fieldConfig.formFieldPattern[0].getMessage())
+      );
+    } catch (error) {}
+    return;
+  };
+
+  // for object fields
+  function getError() {
+    const errorMessage: JSX.Element[] = [];
+    fieldConfig.children?.map((field) => {
+      if (formContext.errors && formContext.errors[field.name]) {
+        errorMessage.push(<ErrorContextHandler fieldConfig={field} />);
+      }
+    });
+
+    return <>{errorMessage.length > 0 && errorMessage[0]}</>;
+  }
+
+  const checkError = () => {
+    let error: JSX.Element | null = null;
+
+    formContext.errors &&
+      formContext.errors[fieldConfig.name] &&
+      formContext.errors[fieldConfig.name]?.type &&
+      (error = (
+        <Error
+          type={formContext.errors[fieldConfig.name]?.type}
+          patternMessage={getPatternMessage()}
+        ></Error>
+      ));
+
+    /**
+     * Checks for Nested Oject Array
+     */
+    if (error === null) {
+      formContext.getFieldState &&
+        formContext.getFieldState(fieldConfig.name).error &&
+        (error = (
+          <Error
+            type={formContext.getFieldState(fieldConfig.name).error?.type}
+            patternMessage={getPatternMessage()}
+          ></Error>
+        ));
+    }
+
+    return error;
+  };
+
+  return <>{checkError()}</>;
+}

package/src/form/formfields/FileUploadField.tsx

@@ -0,0 +1,196 @@
+import { useContext, useState } from "react";
+import { RegisterOptions } from "react-hook-form";
+import { FormContext } from "../context/FormContext";
+import {
+    FormFieldComponentPropSchema,
+    FormFieldPatternsImpl,
+} from "../schema/FormFieldSchema";
+import { Description } from "@headlessui/react";
+import React from "react";
+import RenderFormField from "../util/RenderFormField";
+import clsx from "clsx";
+const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const formContext = useContext(FormContext);
+    const [file, setFile] = useState<File | null>(
+        formContext.getValues(props.fieldConfig.name)
+            ? formContext.getValues(props.fieldConfig.name)
+            : null
+    );
+    const [loading, setLoading] = useState<boolean>(false);
+    const [isDragging, setIsDragging] = useState<boolean>(false);
+
+    let registerOptions: RegisterOptions = {
+        required: props.fieldConfig.required
+            ? FormFieldPatternsImpl.REQUIRED.getMessage()
+            : false,
+    };
+
+    if (props.fieldConfig?.formFieldPattern) {
+        registerOptions.pattern =
+            props.fieldConfig?.formFieldPattern[0].getPattern();
+    }
+
+    let hookprops = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+
+    const handleDragOver = (e: React.DragEvent<HTMLLabelElement>) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = () => {
+        setIsDragging(false);
+    };
+
+    const handleDrop = (e: React.DragEvent<HTMLLabelElement>) => {
+        e.preventDefault();
+        setIsDragging(false);
+        const files = e.dataTransfer.files;
+        if (files && files.length > 0) {
+            handleChange(files);
+        }
+    };
+
+    const handleChange = async (_fileList: FileList | null) => {
+        setLoading(true);
+        if (_fileList && _fileList.length) {
+            const _file: File = _fileList[0];
+            setFile(_file);
+            formContext.setValue(props.fieldConfig.name, _file, {
+                shouldValidate: true,
+                shouldDirty: formContext.getFieldState(props.fieldConfig.name)
+                    .isDirty,
+                shouldTouch: formContext.getFieldState(props.fieldConfig.name)
+                    .isTouched,
+            });
+            setTimeout(() => {
+                setLoading(false);
+            }, 1000);
+            if (props.fieldConfig.submitOnChange && formContext.onSubmit)
+                formContext.onSubmit();
+            if (props.onChange) props.onChange(_file);
+            if (props.fieldConfig.onChange) props.fieldConfig.onChange(_file);
+        }
+    };
+
+    const isImageFile = (file: any) => {
+        if (!file) return false;
+        const validImageTypes = ["image/jpeg", "image/jpg", "image/png"];
+        return validImageTypes.includes(file.type);
+    };
+
+    const getInput = () => {
+        return (
+            <label
+                htmlFor="dropzone-file"
+                className={clsx(
+                  props.fieldConfig.customClassNames?.wrapperClassName ||
+                  "flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer",
+                  isDragging
+                    ? "border-blue-500 bg-blue-100"
+                    : "border-gray-300 bg-gray-50 hover:bg-gray-100"
+                )}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+            >
+
+                {loading ? (
+                    <Description>Loading...</Description>
+                ) : (
+                    props.fieldConfig.fieldContainer ? <props.fieldConfig.fieldContainer /> :
+                        <div className={"flex flex-col items-center justify-center pt-5 pb-6"}>
+                            {file ? (
+                                <>
+                                    {isImageFile(file) ? (
+                                        <div className="flex">
+                                            <img
+                                                src={URL.createObjectURL(
+                                                    file
+                                                )}
+                                                alt="Preview"
+                                                className="m-2"
+                                                style={{
+                                                    maxWidth: "50px",
+                                                    maxHeight: "50px",
+                                                }}
+                                            />
+                                            <span className="m-2 ml-2">
+                                                {file?.name}
+                                            </span>
+                                        </div>
+                                    ) : (
+                                        <div className="flex">
+                                            <span className="m-2">
+                                                {file?.name}
+                                            </span>{" "}
+                                            <button
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    formContext.setValue(
+                                                        props.fieldConfig.name,cnull
+                                                    );
+                                                    setFile(null);
+                                                }}
+                                                className="btn btn-outline-dark btn-sm ">
+                                                X
+                                            </button>
+                                        </div>
+                                    )}
+                                </>
+                            ) : (
+                                <>
+                                    <svg
+                                        className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
+                                        aria-hidden="true"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 20 16">
+                                        <path
+                                            stroke="currentColor"
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth="2"
+                                            d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+                                        />
+                                    </svg>
+                                    <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                                        <span className="font-semibold">
+                                            Click to upload or drag and drop
+                                        </span>
+                                    </p>
+                                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                                        {props.fieldConfig.placeholder
+                                            ? props.fieldConfig.placeholder
+                                            : "-- placeholder --"}
+                                    </p>
+                                </>
+                            )}
+                        </div>
+                )}
+                <input
+                    id="dropzone-file"
+                    type="file"
+                    className="hidden"
+                    accept={
+                        props.fieldConfig.fileAccept
+                            ? props.fieldConfig.fileAccept
+                            : ""
+                    }
+                    onChange={(e) => handleChange(e.target.files)}
+                    disabled={props.fieldConfig.readOnly}
+                />
+            </label>
+        );
+    };
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    );
+};
+
+export default FileUploadField;

package/src/form/formfields/IframeField.tsx

@@ -0,0 +1,65 @@
+import { RegisterOptions } from "react-hook-form";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { useContext, useEffect, useRef } from "react";
+import { FormContext } from "../context/FormContext";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+
+const IframeField: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  const formContext = useContext(FormContext);
+
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+  const iframe = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    if (iframe.current) {
+      const iframeDocument =
+        iframe.current.contentDocument ||
+        iframe.current.contentWindow?.document;
+      if (iframeDocument) {
+        iframeDocument.open();
+        iframeDocument.write(
+          "<!DOCTYPE html><html><head></head><body></body></html>"
+        );
+        iframeDocument.close();
+
+        const div = iframeDocument.createElement("div");
+        div.className = "iframe-content";
+        div.innerHTML = formContext.getValues(props.fieldConfig.name) || "";
+
+        div.setAttribute(
+          "contenteditable",
+          props.fieldConfig.readOnly ? "false" : "true"
+        );
+
+        div.oninput = (e: Event) => {
+          const value = (e.target as HTMLDivElement).innerHTML;
+          handleChange(value, formContext, props.fieldConfig, props.onChange);
+        };
+
+        iframeDocument.body.appendChild(div);
+      }
+    }
+  }, [props.fieldConfig.name, props.fieldConfig.readOnly, props.onChange]);
+
+  const getInput = () => {
+    return (
+      <iframe
+        ref={iframe}
+        className={`form-input ${
+          props.fieldConfig.customClassNames?.fieldClassName || "flex-1"
+        }`}
+      ></iframe>
+    );
+  };
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};
+export default IframeField;

package/src/form/formfields/InputField.tsx

@@ -0,0 +1,67 @@
+import React, { useContext } from "react";
+import { RegisterOptions } from "react-hook-form";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+import { Input } from "@headlessui/react";
+
+const InputField: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const formContext = useContext(FormContext);
+
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+    let hookProps = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+
+    /**
+     * Raw Form Field
+     */
+    const getInput = () => {
+        return (
+            <Input
+                {...hookProps}
+                // ref={props.fieldConfig.ref}
+                type="text"
+                maxLength={props.fieldConfig?.maxLength}
+                minLength={props.fieldConfig?.minLength}
+                placeholder={props.fieldConfig?.placeholder}
+                readOnly={props.fieldConfig?.readOnly}
+                disabled={props.fieldConfig?.disabled}
+                autoComplete={props.fieldConfig?.autoComplete}
+                defaultValue={props.fieldConfig.defaultValue as string}
+                className={`form-input ${
+                    props.fieldConfig.customClassNames?.fieldClassName ||
+                    "flex-1"
+                }`}
+                onKeyDown={(e) => {
+                    const inputElement = e.target as HTMLInputElement;
+                    const { selectionStart, value } = inputElement;
+                    
+                    if (e.key === " " && selectionStart === 0) {
+                        e.preventDefault();
+                    }
+                    props.fieldConfig.onKeyDown &&
+                        props.fieldConfig.onKeyDown(e);
+                }}
+                onChange={(e) => {
+                    handleChange(
+                        e.target.value,
+                        formContext,
+                        props.fieldConfig,
+                        props.onChange
+                    );
+                }}
+            />
+        );
+    };
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    );
+};
+export default InputField;

package/src/form/formfields/InputGroupField.tsx

@@ -0,0 +1,44 @@
+import React, { useContext } from "react";
+import FormField from "../FormField";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import RenderFormField from "../util/RenderFormField";
+
+const InputGroupField: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  function getInput() {
+    return (
+      <>
+        {props.fieldConfig.children?.map((child, index: number) => {
+          child.disableDefaultWrapper = true;
+          if (
+            !child.customClassNames ||
+            child.customClassNames?.fieldClassName === undefined ||
+            child.customClassNames?.fieldClassName === null ||
+            child.customClassNames?.fieldClassName === ""
+          ) {
+            child.customClassNames = {};
+            if (props.fieldConfig.children) {
+              if (index === 0) {
+                child.customClassNames.fieldClassName =
+                  "input-group-first-field";
+              } else if (index === props.fieldConfig.children?.length - 1) {
+                child.customClassNames.fieldClassName = "input-group-end-field";
+              } else {
+                child.customClassNames.fieldClassName =
+                  "input-group-middle-field";
+              }
+            }
+          }
+          return <FormField fieldConfig={child}></FormField>;
+        })}
+      </>
+    );
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};
+export default InputGroupField;