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

package/src/form/util/RenderFormField.tsx

@@ -0,0 +1,149 @@
+import { Description, Field, Label } from "@headlessui/react";
+import React from "react";
+import { FieldAlignType, FormFieldSchema } from "../schema/FormFieldSchema";
+import ErrorContextHandler from "../formfields/ErrorContextHandler";
+import SVGIcon from "../../util/svg/SVGIcon";
+/**
+ * RenderFormField Component
+ *
+ * This component renders a form field based on the configuration provided in `fieldConfig`.
+ * It supports different layouts (horizontal or vertical) and can be customized with optional
+ * classes, labels, and error handling.
+ *
+ * @param {Object} props - The properties for the RenderFormField component.
+ * @param {FormFieldSchema} props.fieldConfig - The configuration object for the form field. This object can include:
+ *   @param {string} [props.fieldConfig.name] - The name of the form field.
+ *   @param {string} [props.fieldConfig.label] - The label text for the form field.
+ *   @param {boolean} [props.fieldConfig.required] - Whether the field is required.
+ *   @param {boolean} [props.fieldConfig.disabled] - Whether the field is disabled.
+ *   @param {string} [props.fieldConfig.align] - The alignment type of the form field. Can be `FieldAlignType.HORIZONTAL` or `FieldAlignType.VERTICAL`.
+ *   @param {string} [props.fieldConfig.helpText] - The help text for the form field.
+ *   @param {Object} [props.fieldConfig.customClassNames] - An object containing custom class names for different parts of the field:
+ *     @param {string} [props.fieldConfig.customClassNames.wrapperClassName] - Custom class for the wrapper element.
+ *     @param {string} [props.fieldConfig.customClassNames.labelClassName] - Custom class for the label element.
+ *   @param {boolean} [props.fieldConfig.disableDefaultWrapper] - If true, the default wrapper will be disabled.
+ *   @param {React.ElementType} [props.fieldConfig.wrapper] - Custom wrapper component if `disableDefaultWrapper` is true.
+ *   @param {boolean} [props.fieldConfig.submitOnChange] - If true, the form will submit on field change.
+ *
+ * @param {Function} props.getInput - A function that returns the input element to be rendered.
+ *
+ * @returns {JSX.Element} The rendered form field component.
+ *
+ * @example
+ * // Example usage:
+ * const fieldConfig = {
+ *   name: "username",
+ *   label: "Username",
+ *   required: true,
+ *   align: FieldAlignType.HORIZONTAL,
+ *   customClassNames: {
+ *     wrapperClassName: "my-custom-wrapper",
+ *     labelClassName: "my-custom-label"
+ *   },
+ *   helpText: "Please enter your username.",
+ * };
+ *
+ * const getInput = () => <input type="text" name="username" />;
+ *
+ * <RenderFormField fieldConfig={fieldConfig} getInput={getInput} />;
+ */
+const RenderFormField = ({
+    fieldConfig,
+    getInput,
+}: {
+    fieldConfig: FormFieldSchema;
+    getInput: Function;
+}): JSX.Element => {
+    function formTypeHorizontal() {
+        return (
+            <Field
+                className={`${
+                    fieldConfig.customClassNames?.wrapperClassName ??
+                    "form-group flex sm:flex-row flex-col"
+                }`}
+                disabled={fieldConfig.disabled}>
+                {fieldConfig.label && (
+                    <Label
+                        htmlFor={fieldConfig.name}
+                        className={`${
+                            fieldConfig.customClassNames?.labelClassName ??
+                            "form-label sm:w-1/4 sm:ltr:mr-2 rtl:ml-2"
+                        }`}>
+                        {fieldConfig.label}
+                        {fieldConfig.required && (
+                            <span className="field-required">
+                                <SVGIcon name="starIcon" height={6} width={6} />
+                            </span>
+                        )}
+                    </Label>
+                )}
+                {getInput()}
+
+                <ErrorContextHandler fieldConfig={fieldConfig} />
+
+                {fieldConfig && fieldConfig.helpText && (
+                    <Description className="mt-2 text-tiny text-gray-500">
+                        {fieldConfig.helpText}
+                    </Description>
+                )}
+            </Field>
+        );
+    }
+
+    function formTypeVertical() {
+        return (
+            <Field
+                disabled={fieldConfig.disabled}
+                className={`${
+                    fieldConfig.customClassNames?.wrapperClassName ??
+                    "form-group"
+                }`}>
+                {fieldConfig.label && (
+                    <Label
+                        htmlFor={fieldConfig.name}
+                        className={`${
+                            fieldConfig.customClassNames?.labelClassName ??
+                            "form-label"
+                        }`}>
+                        {fieldConfig.label}
+                        {fieldConfig.required && (
+                            <span className="field-required">
+                                <SVGIcon name="starIcon" height={6} width={6} />
+                            </span>
+                        )}
+                    </Label>
+                )}
+
+                {getInput()}
+
+                <ErrorContextHandler fieldConfig={fieldConfig} />
+
+                {fieldConfig && fieldConfig.helpText && (
+                    <Description className="mt-2 text-tiny text-gray-500">
+                        {fieldConfig.helpText}
+                    </Description>
+                )}
+            </Field>
+        );
+    }
+
+    return fieldConfig.disableDefaultWrapper ? (
+        fieldConfig.wrapper ? (
+            <fieldConfig.wrapper>
+                {getInput()}
+                <ErrorContextHandler fieldConfig={fieldConfig} />
+            </fieldConfig.wrapper>
+        ) : (
+            <>
+                {getInput()}
+                <ErrorContextHandler fieldConfig={fieldConfig} />
+            </>
+        )
+    ) : fieldConfig.align === FieldAlignType.HORIZONTAL ? (
+        formTypeHorizontal()
+    ) : (
+        formTypeVertical()
+    );
+};
+
+export default RenderFormField;

package/src/form/util/RenderListOptions.tsx

@@ -0,0 +1,424 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+import { ListboxOption, ListboxOptions } from "@headlessui/react";
+import { handleChange } from ".";
+import { LoaderWithText } from "../../util/LoaderWithText";
+import SVGIcon from "../../util/svg/SVGIcon";
+import { FormContextType } from "../context/FormContext";
+import {
+  FieldOptionsSchema,
+  FormFieldSchema,
+  FormFieldType,
+  OutputFormatType,
+} from "../schema/FormFieldSchema";
+
+type RenderListOptionsProps = {
+  formContext: FormContextType;
+  fieldConfig: FormFieldSchema;
+  onChange?: (value: any) => void;
+  listOptions: FieldOptionsSchema[];
+  setListOptions: (value: any) => void;
+  loading?: boolean;
+  formField: FormFieldType;
+  setLoading?: React.Dispatch<React.SetStateAction<boolean>>;
+  createCallback?: (value: any) => void;
+  queryCallback?: (value: any) => void;
+};
+
+const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
+  (
+    {
+      formContext,
+      fieldConfig,
+      listOptions,
+      setListOptions,
+      setLoading,
+      loading,
+      formField,
+      onChange,
+      queryCallback,
+      createCallback,
+    },
+    ref
+  ) => {
+    const [query, setQuery] = useState<string>("");
+    const [createdListItems, setCreatedListItems] = useState<
+      FieldOptionsSchema[]
+    >([]);
+    // const inputRef = useRef<HTMLInputElement>(null);
+    const createItem = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      if (fieldConfig.onCreateTrigger && createCallback) {
+        e.preventDefault();
+        e.stopPropagation();
+        fieldConfig.onCreateTrigger(query, createCallback);
+        return;
+      }
+
+      setLoading && setLoading(true);
+      try {
+        if (!fieldConfig.postUrl) {
+          const data: FieldOptionsSchema = {
+            label: query,
+            value: query,
+          };
+          setCreatedListItems((prevList) => [...prevList, data]);
+        }
+      } catch (e: any) {
+        console.error("Error in Creating the object ", e);
+      } finally {
+        resetToDefault();
+        setLoading && setLoading(false);
+      }
+    };
+    const resetToDefault = () => {
+      if (query != "") {
+        setQuery("");
+        if (isTypeahead) {
+          queryCallback && queryCallback("");
+        }
+      }
+    };
+    let resultList = [...createdListItems, ...listOptions];
+    resultList = [...resultList.filter((result) => result.label).filter((option, index, self) => index === self.findIndex((obj) => obj.value === option.value))]; // removing duplicate values
+
+    const caseSensitive =
+      query && fieldConfig.dropdownFieldConfig?.isCaseSensitive
+        ? query
+        : query?.toLowerCase();
+
+    const filteredList = query
+      ? resultList.filter((item) => {
+          const normalizedLabel = fieldConfig.dropdownFieldConfig
+            ?.isCaseSensitive
+            ? item.label
+            : item.label.toLowerCase();
+
+          return normalizedLabel
+            .replace(/\s+/g, "")
+            .includes(caseSensitive.replace(/\s+/g, ""));
+        })
+      : resultList;
+
+    let nullGroupOptions: any[] = [];
+    let groupedOptions: any = filteredList.reduce((acc: any, option: any) => {
+      if (!option.groupName) {
+        nullGroupOptions.push(option);
+      } else {
+        if (!acc[option.groupName]) {
+          acc[option.groupName] = [];
+        }
+        acc[option.groupName].push(option);
+      }
+      return acc;
+    }, {});
+
+    const handleQueryCallback = useCallback(() => {
+      if (filteredList.length == 0 && isTypeahead) {
+        queryCallback && queryCallback(query);
+      }
+    }, [filteredList]);
+
+    useEffect(() => {
+      handleQueryCallback();
+    }, [query]);
+
+    let enableCreateFlag =
+      formField != FormFieldType.SELECT &&
+      formField != FormFieldType.MULTI_SELECT &&
+      fieldConfig.dropdownFieldConfig?.showCreateOption;
+
+    let validTypeaheadFields = [
+      FormFieldType.TYPEAHEAD,
+      FormFieldType.TYPEAHEAD_MULTI_SELECT,
+    ];
+    let isTypeahead: boolean = validTypeaheadFields.indexOf(formField) > -1;
+    let isNotMatched: boolean =
+      query != "" && filteredList.findIndex((v) => v.label === query) === -1;
+
+    const renderOption = (option: FieldOptionsSchema) => {
+      let selected = false;
+      if (Array.isArray(formContext.getValues(fieldConfig.name))) {
+        selected = formContext
+          .getValues(fieldConfig.name)
+          .includes(option.value);
+      } else {
+        const formValue = formContext.getValues(fieldConfig.name);
+        // const defaultValue = fieldConfig.defaultValue;
+        // selected = formValue ? option.value == formValue : defaultValue == option.value;
+        selected = option.value == formValue;
+      }
+      return (
+        <ListboxOption
+          key={option.value}
+          disabled={option.isDisabled}
+          onClick={() => setTimeout(resetToDefault, 300)}
+          className={`form-listbox-option ${
+            selected ? " bg-gray-100 text-gray-900" : "bg-white text-gray-700"
+          }`}
+          value={option.value}
+        >
+          {fieldConfig.fieldOptionWrapper ? (
+            <fieldConfig.fieldOptionWrapper data={option} selected={selected} />
+          ) : (
+            <>
+              <div className="flex items-center justify-between gap-x-1.5">
+                <span
+                  className={`block truncate w-full !max-w-[150px] space-x-2 ${
+                    selected ? "font-medium" : "font-normal"
+                  }`}
+                >
+                  {option.icon && (
+                    <span className="listbox-svg">{option.icon}</span>
+                  )}
+                  {option.label}
+                </span>
+                {isTypeahead ? (
+                  <input
+                    type="checkbox"
+                    className="form-checkbox"
+                    checked={selected}
+                  />
+                ) : (
+                  selected && (
+                    <SVGIcon
+                      name="checkIcon"
+                      className="h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  )
+                )}
+              </div>
+              {option.helpText && (
+                <div className="mt-0 text-sm text-gray-500 font-normal truncate w-full !max-w-[150px]">
+                  {option.helpText}
+                </div>
+              )}
+            </>
+          )}
+        </ListboxOption>
+      );
+    };
+
+    const renderList = useMemo(() => {
+      if (filteredList.length === 0 && (!enableCreateFlag || query === ""))
+        return (
+          <div className="form-listbox-option text-center">
+            <span className="empty-content text-gray-600 font-normal">
+              No Data Available
+            </span>
+          </div>
+        );
+
+      return (
+        <>
+          {nullGroupOptions.length > 0 && nullGroupOptions.map(renderOption)}
+
+          {query !== "" && enableCreateFlag && isNotMatched && (
+            <ListboxOption
+              key="create_new"
+              className="form-combobox-option"
+              value={query}
+              onClick={createItem}
+            >
+              <div className="flex items-center justify-between">
+                <span className="truncate overflow-x-auto">{query}</span>
+                <span className="text-primary flex items-center gap-x-1 cursor-pointer">
+                  <SVGIcon name="plus" className="h-3 w-3" />
+                  {fieldConfig.dropdownFieldConfig?.createLabelText || "Select"}
+                </span>
+              </div>
+            </ListboxOption>
+          )}
+        </>
+      );
+    }, [filteredList, nullGroupOptions]);
+
+    return (
+      <ListboxOptions
+        anchor="bottom start"
+        transition
+        portal={false}
+        modal={false}
+        onBlur={() => setTimeout(resetToDefault, 300)}
+        className={`form-listbox-options ${fieldConfig?.customClassNames?.optionsWrapperClassName}`}
+      >
+        {fieldConfig.dropdownFieldConfig?.showSearchBox && (
+          <div className="relative">
+            <input
+              onKeyDown={(e: any) => e.stopPropagation()}
+              onChange={(event) => {
+                setQuery(event.target.value);
+                if (event.target.value == "" && isTypeahead) {
+                  queryCallback && queryCallback("");
+                }
+              }}
+              className="form-input !pr-[36px] Search-field"
+              placeholder="Search"
+              value={query}
+              autoFocus
+              type="text"
+            />
+            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center mr-3">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+                aria-hidden="true"
+                data-slot="icon"
+                className="h-5 w-5 text-gray-400"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+            </div>
+          </div>
+        )}
+
+<div className="form-listbox-options-container">
+        {loading ? (
+            <div className="form-listbox-option">
+              <div className="flex items-center justify-center p-3">
+                <LoaderWithText />
+              </div>
+            </div>
+        ) : (
+            renderList
+        )}
+
+        {Object.keys(groupedOptions).length > 0 &&
+          Object.keys(groupedOptions).map((groupName) => (
+            <div key={groupName}>
+              <h2 className="pb-1 pt-2 font-bold">{groupName}</h2>
+              {groupedOptions[groupName].map(renderOption)}
+            </div>
+          ))}
+        </div>
+
+        
+      </ListboxOptions>
+    );
+  }
+);
+
+export default RenderListOptions;
+export function renderListBoxValue(
+  formContext: FormContextType,
+  fieldConfig: FormFieldSchema,
+  listOptions: FieldOptionsSchema[],
+  onChange?: (value: any) => void
+): JSX.Element {
+  let value = formContext.getValues(fieldConfig.name);
+  const renderAsString = () => {
+    // if (!listOptions) {
+    //     return value;
+    // }
+    let icon = listOptions.find((option) => option.value == value)?.icon,
+      label = listOptions.find((option) => option.value == value)?.label;
+    return icon ? (
+      <span className="flex items-center fs-8  whitespace-nowrap text-gray-500">
+        <span>{icon}</span>
+        <span>{label} </span>
+      </span>
+    ) : (
+      label || getPlaceholder()
+    );
+  };
+  const renderAsArray = () => {
+    if (value.length == 0 || (value.length == 1 && value[0] == "")) {
+      return getPlaceholder();
+    }
+    // if (!listOptions) {
+    //     return value;
+    // }
+    const values = value;
+    return fieldConfig.dropdownFieldConfig?.showSelectedCount ? (
+      <span className="form-selected-badge">
+        <span className="form-selected-badge-name">
+          {values.length > 1
+            ? `${values.length} selected`
+            : listOptions.find((option) => option.value == value[0])?.label ||
+              values[0]}
+        </span>
+        {getDeleteButton()}
+      </span>
+    ) : (
+      Array.isArray(values) &&
+        values.map((opt: any) => {
+          const option = listOptions.find((option) => option.value == opt);
+          if (!option && values.length == 0) return getPlaceholder();
+
+          return (
+            <span key={option?.value} className="form-selected-badge">
+              <span className="form-selected-badge-name">{option?.label}</span>
+              {getDeleteButton(opt)}
+            </span>
+          );
+        })
+    );
+  };
+  const getDeleteButton = (option?: string) => {
+    return (
+      fieldConfig.dropdownFieldConfig?.showDeleteOption && (
+        <button
+          type="button"
+          className="group relative -mr-1 h-3.5 w-3.5 rounded-sm hover:bg-gray-500/20"
+          onClick={(e) => {
+            e.preventDefault();
+            if (fieldConfig.dropdownFieldConfig?.showSelectedCount) {
+              handleChange(null, formContext, fieldConfig, onChange);
+            } else {
+              let options: string[] = value as string[];
+              options = options.filter((i) => i != option);
+              handleChange(options, formContext, fieldConfig, onChange);
+            }
+          }}
+        >
+          <span className="sr-only">Remove</span>
+          <svg
+            viewBox="0 0 14 14"
+            className="h-3.5 w-3.5 stroke-gray-600/50 group-hover:stroke-gray-600/75"
+          >
+            <path d="M4 4l6 6m0-6l-6 6" />
+          </svg>
+          <span className="absolute -inset-1" />
+        </button>
+      )
+    );
+  };
+  let outputFormat = fieldConfig.outputFormat
+    ? fieldConfig.outputFormat === OutputFormatType.ARRAY
+    : false;
+  const getPlaceholder = () => (
+    <span className="form-placeholder">
+      {fieldConfig.placeholder || "Select any option"}
+    </span>
+  );
+  const renderValue = () => {
+    if (!value && !listOptions) {
+      return getPlaceholder();
+    }
+    if (!outputFormat && Array.isArray(value)) {
+      return renderAsArray();
+    }
+    return renderAsString();
+  };
+  return (
+    <>
+      <span className="form-selected-option w-full">{renderValue()}</span>
+      <SVGIcon
+        name="chevronDown"
+        className="h-5 w-5 text-gray-400"
+        aria-hidden="true"
+      />
+    </>
+  );
+}