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

package/src/form/formfields/CheckboxField.tsx

@@ -0,0 +1,118 @@
+import { RegisterOptions } from "react-hook-form";
+import { useContext, useEffect, useState } from "react";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { Checkbox, Field, Input, Label } from "@headlessui/react";
+import React from "react";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+const CheckboxField: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  const formContext = useContext(FormContext);
+  const [selectedOption, setSelectedOption] = useState<string[]>(
+    formContext.getValues(props.fieldConfig.name)
+      ? formContext.getValues(props.fieldConfig.name)
+      : []
+  );
+  const [isChecked, setIsChecked] = useState<boolean>(
+    formContext.getValues(props.fieldConfig.name)
+      ? formContext.getValues(props.fieldConfig.name)
+      : props.fieldConfig.defaultValue
+  );
+  useEffect(() => {
+    if (formContext.getValues(props.fieldConfig.name)) {
+      setSelectedOption(formContext.getValues(props.fieldConfig.name));
+    }
+  }, []);
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+  const handleInput = (option: string) => {
+    let tempData: string[] = selectedOption;
+    if (selectedOption.includes(option)) {
+      tempData = tempData.filter((opt) => opt !== option);
+      setSelectedOption([...tempData]);
+    } else {
+      tempData.push(option);
+      setSelectedOption([...tempData]);
+    }
+    handleChange(tempData, formContext, props.fieldConfig, props.onChange);
+  };
+  function getInput() {
+    return props.fieldConfig.options ? (
+      props.fieldConfig.options.map((option, index) => {
+        return props.fieldConfig.fieldOptionWrapper ? (
+          <props.fieldConfig.fieldOptionWrapper data={option} />
+        ) : (
+          <Field
+              key={option.value + index}
+              className={
+                  props.fieldConfig.customClassNames?.fieldClassName
+                      ? `form-check ${props.fieldConfig.customClassNames.fieldClassName}`
+                      : "form-check"
+              }
+              disabled={option.isDisabled}>
+              <Checkbox
+                  disabled={option.isDisabled}
+                  value={option.value}
+                  id={option.value}
+                  checked={selectedOption.includes(option.value)}
+                  onChange={() => handleInput(option.value)}
+                  >
+                  {({ checked, disabled }) => (
+                       <Input
+                       disabled={disabled}
+                       className="form-checkbox cursor-pointer"
+                       id={option.value}
+                       type="checkbox"
+                       checked={checked}
+                     />
+                  )}
+              </Checkbox>
+              <Label className='form-check-label' htmlFor={option.value}>{option.label}</Label>
+          </Field>
+        )
+      })
+    ) : (
+      <Field
+        className={
+          props.fieldConfig.customClassNames?.fieldClassName
+            ? `form-check ${props.fieldConfig.customClassNames.fieldClassName}`
+            : "form-check"
+        }
+      >
+        <Checkbox
+          disabled={props.fieldConfig.readOnly}
+          {...hookProps}
+          checked={isChecked}
+          onChange={(checked) => {
+            handleChange(
+              checked,
+              formContext,
+              props.fieldConfig,
+              props.onChange
+            );
+            setIsChecked(checked);
+          }}
+        >
+          {({ checked, disabled }) => (
+            <Input
+              disabled={disabled}
+              className="form-checkbox cursor-pointer"
+              id={props.fieldConfig.name}
+              type="checkbox"
+              checked={checked}
+            />
+          )}
+        </Checkbox>
+        <Label className="form-check-label inline-label" htmlFor={props.fieldConfig.name}>
+          {props.fieldConfig.label}
+        </Label>
+      </Field>
+    );
+  }
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};
+export default CheckboxField;

package/src/form/formfields/ColorPickerField.tsx

@@ -0,0 +1,59 @@
+import { useContext, useState } from "react";
+import { RegisterOptions } from "react-hook-form";
+import React from "react";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { Field } from "@headlessui/react";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+
+export const ColorPickerField: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const formContext = useContext(FormContext);
+
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+    formContext.register(props.fieldConfig.name, registerOptions);
+
+    const getInput = () => {
+        return (
+            <Field className="flex" disabled={props.fieldConfig.disabled}>
+                <input
+                    type="color"
+                    onChange={(e) =>
+                        handleChange(
+                            e.target.value,
+                            formContext,
+                            props.fieldConfig,
+                            props.onChange
+                        )
+                    }
+                    defaultValue={props.fieldConfig.defaultValue as string}
+                    disabled={props.fieldConfig.readOnly}
+                    value={formContext.getValues(props.fieldConfig.name) ?? ""}
+                    className="inline-flex w-[30%] h-auto rounded-l-md border border-r-0 border-gray-300 px-2  cursor-pointer"></input>
+                <input
+                    type="text"
+                    value={formContext.getValues(props.fieldConfig.name) ?? ""}
+                    disabled={props.fieldConfig.readOnly}
+                    defaultValue={props.fieldConfig.defaultValue as string}
+                    maxLength={7}
+                    onChange={(e) =>
+                        handleChange(
+                            e.target.value,
+                            formContext,
+                            props.fieldConfig,
+                            props.onChange
+                        )
+                    }
+                    className="flex-1 form-input rounded-s-none"
+                />
+            </Field>
+        );
+    };
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    );
+};

package/src/form/formfields/ComboMultiSelect.tsx

@@ -0,0 +1,290 @@
+// import { Combobox, Listbox, Transition } from '@headlessui/react';
+// import { ChevronDownIcon, CheckIcon } from '@heroicons/react/20/solid';
+// import React, { Fragment, useContext, useEffect, useState } from 'react';
+// import { RegisterOptions } from 'react-hook-form';
+// import { useDispatch } from 'react-redux';
+// import { reachoAPI } from '../../../../api';
+// import useDymanicReducer from '../../../hooks/useDymamicReducer';
+// import { StoreStateSchema } from '../../../schema/StorageSchemas';
+// import { LoaderWithText } from '../../Loader';
+// import { getListOptions } from '../FormFieldUtils';
+// import { FormContext } from '../context/FormContext';
+// import { FormFieldComponentPropSchema, FieldOptionsSchema, FormFieldPatternsImpl, FieldAlignType } from '../schema/FormFieldSchema';
+// import ErrorContextHandler from './ErrorContextHandler';
+// import { ChevronUpDownIcon, PlusIcon } from '@heroicons/react/16/solid';
+// import { CancelTokenSource } from 'axios';
+// import { usePopper } from 'react-popper';
+
+import React from "react";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+
+const ComboMultiSelect: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  // const formContext = useContext(FormContext);
+
+  // const [selectedOption, setSelectedOption] = useState<string[]>(formContext.getValues(props.fieldConfig.name) ? formContext.getValues(props.fieldConfig.name) : []);
+  // const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+  // const [loading, setLoading] = useState<boolean>(false);
+  // const [query, setQuery] = useState<string>('');
+  // const [cancelToken, setCancelToken] = useState<CancelTokenSource | undefined>(undefined);
+
+  // let [referenceElement, setReferenceElement] = useState<any>();
+  // let [popperElement, setPopperElement] = useState<any>();
+  // let { styles, attributes } = usePopper(referenceElement, popperElement, {
+  //     placement: 'auto-start',
+  // });
+
+  // if (props.fieldConfig.fetchUrl) {
+  //     useEffect(() => {
+  //         fetchData();
+  //     }, []);
+  // }
+
+  // const fetchData = async () => {
+  //     try {
+  //         if (!props.fieldConfig.fetchUrl) return;
+
+  //         let response = await reachoAPI.get(props.fieldConfig.fetchUrl);
+  //         if (response.data) {
+  //             const data: FieldOptionsSchema[] = getListOptions(response.data.products, props.fieldConfig.optionsConfig);
+  //             setListOptions([...data]);
+  //         }
+  //     } catch (err) {
+  //     } finally {
+  //         setLoading(false);
+  //     }
+  // };
+
+  // const createItem = async () => {
+  //     setLoading(true);
+  //     try {
+  //         if (!props.fieldConfig.postUrl) {
+  //             const data: FieldOptionsSchema = {
+  //                 label: query,
+  //                 value: query,
+  //             };
+  //             setListOptions([...listOptions, data]);
+  //             handleSelect(query);
+  //             return;
+  //         }
+  //     } catch (e: any) {
+  //         console.error('Error in Creating the object ', e);
+  //     } finally {
+  //         setQuery('');
+  //         setLoading(false);
+  //     }
+  // };
+
+  // const getSelectedOption = () => {
+  //     let value: string | undefined = formContext.getValues(props.fieldConfig.name) + '';
+  //     if (value == '' || value === undefined) {
+  //         value = props.fieldConfig.defaultValue ? props.fieldConfig.defaultValue : undefined;
+  //     }
+  //     return listOptions.find((option) => option.value == value)?.label as string;
+  // };
+  // const handleSelect = (option: string) => {
+  //     let tempData: string[] = selectedOption;
+  //     if (selectedOption.includes(option)) {
+  //         tempData = tempData.filter((opt) => opt != option);
+  //         setSelectedOption([...tempData]);
+  //     } else {
+  //         tempData.push(option);
+  //         setSelectedOption([...tempData]);
+  //     }
+  //     formContext.setValue(props.fieldConfig.name, tempData, {
+  //         shouldValidate: true,
+  //         shouldDirty: formContext.getFieldState(props.fieldConfig.name).isDirty,
+  //         shouldTouch: formContext.getFieldState(props.fieldConfig.name).isTouched,
+  //     });
+
+  //     if (props.onChange) props.onChange(tempData);
+  // };
+
+  // let registerOptions: RegisterOptions = { required: props.fieldConfig.required ? FormFieldPatternsImpl.REQUIRED.getMessage() : false };
+  // if (props.fieldConfig?.formFieldPattern) {
+  //     registerOptions.pattern = props.fieldConfig?.formFieldPattern[0].getPattern();
+  // }
+  // formContext.register(props.fieldConfig.name, registerOptions);
+
+  // const filteredPeople = query && query != '' ? listOptions.filter((item) => item.label.toLowerCase().replace(/\s+/g, '').includes(query.toLowerCase().replace(/\s+/g, ''))) : listOptions;
+
+  // const allTheOptions = () => {
+  //     return selectedOption.length > 0 ? (
+  //         selectedOption.length === 1 ? (
+  //             <span className="form-selected-badge">
+  //                 <span className="form-selected-badge-name">{listOptions.find((option) => option.value === selectedOption[0])?.label}</span>
+  //                 <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();
+  //                         setSelectedOption(selectedOption.filter((option) => option !== selectedOption[0]));
+  //                     }}
+  //                 >
+  //                     <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>
+  //             </span>
+  //         ) : (
+  //             <span className="form-selected-badge">
+  //                 <span className="form-selected-badge-name">{`${selectedOption.length} selected`}</span>
+  //                 <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();
+  //                         setSelectedOption([]);
+  //                     }}
+  //                 >
+  //                     <span className="sr-only">Remove all</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>
+  //             </span>
+  //         )
+  //     ) : null;
+  // };
+
+  // function getInput() {
+  //     return (
+  //         <Combobox
+  //             value={formContext.getValues(props.fieldConfig.name) == '' ? undefined : formContext.getValues(props.fieldConfig.name)}
+  //             name={props.fieldConfig.name}
+  //             defaultValue={props.fieldConfig.defaultValue}
+  //             multiple
+  //         >
+  //             <div className="relative form-combobox flex-1" ref={setReferenceElement}>
+  //                 <Combobox.Button className={props.fieldConfig.customClassName ? 'form-combobox-select ' + props.fieldConfig.customClassName : 'form-combobox-select w-full justify-between'}>
+  //                     <Combobox.Input
+  //                         className="form-input"
+  //                         placeholder={selectedOption.length <= 0 ? props.fieldConfig.placeholder || 'Select an option' : undefined}
+  //                         onChange={(event) => setQuery(event.target.value)}
+  //                     />
+  //                     {allTheOptions() && <div className="absolute ml-3">{allTheOptions()}</div>}
+  //                     <ChevronDownIcon className="h-5 w-5 text-gray-400 form-combobox-svg" aria-hidden="true" />
+  //                 </Combobox.Button>
+  //                 <Transition as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0" afterLeave={() => setQuery('')}>
+  //                     <Combobox.Options ref={setPopperElement} style={styles.popper} {...attributes.popper} className="form-combobox-options">
+  //                         {filteredPeople.length === 0 && query !== ''
+  //                             ? props.fieldConfig.enableCreateOption && (
+  //                                   <Combobox.Option
+  //                                       key={'create_new'}
+  //                                       className={({ active }) => `form-combobox-option ${active ? 'bg-[#f6f6f6] text-primary' : 'text-gray-900'}`}
+  //                                       value={'create'}
+  //                                       onClick={() => createItem()}
+  //                                   >
+  //                                       {({ selected }) => (
+  //                                           <>
+  //                                               <div className="flex items-center justify-between">
+  //                                                   <span>{query}</span>
+  //                                                   <span className="text-success flex items-center gap-x-1">
+  //                                                       <PlusIcon className="h-3 w-3" />
+  //                                                       Create & select
+  //                                                   </span>
+  //                                               </div>
+  //                                           </>
+  //                                       )}
+  //                                   </Combobox.Option>
+  //                               )
+  //                             : filteredPeople.map((option) => (
+  //                                   <Combobox.Option
+  //                                       key={option.value}
+  //                                       onClick={() => handleSelect(option.value)}
+  //                                       disabled={option.isDisabled}
+  //                                       className={({ active }) => `form-combobox-option ${active ? 'bg-[#f6f6f6] text-primary' : 'text-gray-900'}`}
+  //                                       value={option.value}
+  //                                   >
+  //                                       {({ selected, active }) => (
+  //                                           <>
+  //                                               <span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>{option.label}</span>
+  //                                               {selected ? (
+  //                                                   <span className="icon">
+  //                                                       <CheckIcon className="h-5 w-5" aria-hidden="true" />
+  //                                                   </span>
+  //                                               ) : null}
+  //                                               <p className="form-listbox-helptext">{option.helpText}</p>
+  //                                           </>
+  //                                       )}
+  //                                   </Combobox.Option>
+  //                               ))}
+  //                     </Combobox.Options>
+  //                 </Transition>
+  //             </div>
+  //         </Combobox>
+  //     );
+  // }
+
+  // function formTypeHorizontal() {
+  //     return (
+  //         <div className="form-group flex sm:flex-row flex-col">
+  //             {props.fieldConfig.label ? (
+  //                 <label htmlFor="email" className="form-label sm:w-1/4 sm:ltr:mr-2 rtl:ml-2">
+  //                     {props.fieldConfig.label}
+  //                 </label>
+  //             ) : (
+  //                 <></>
+  //             )}
+  //             <div className="flex-1">
+  //                 {getInput()}
+
+  //                 <ErrorContextHandler fieldConfig={props.fieldConfig} />
+
+  //                 {props.fieldConfig && props.fieldConfig.helpText ? (
+  //                     <p className="mt-2 text-sm text-gray-500" id="email-description">
+  //                         {props.fieldConfig.helpText}
+  //                     </p>
+  //                 ) : (
+  //                     <></>
+  //                 )}
+  //             </div>
+  //         </div>
+  //     );
+  // }
+
+  // function formTypeVertical() {
+  //     return (
+  //         <div className="form-group">
+  //             {props.fieldConfig.label ? (
+  //                 <label htmlFor="email" className="form-label">
+  //                     {props.fieldConfig.label}
+  //                 </label>
+  //             ) : (
+  //                 <></>
+  //             )}
+
+  //             <div className="flex-1">
+  //                 {getInput()}
+
+  //                 <ErrorContextHandler fieldConfig={props.fieldConfig} />
+
+  //                 {props.fieldConfig && props.fieldConfig.helpText ? (
+  //                     <p className="mt-2 text-sm text-gray-500" id="email-description">
+  //                         {props.fieldConfig.helpText}
+  //                     </p>
+  //                 ) : (
+  //                     <></>
+  //                 )}
+  //             </div>
+  //         </div>
+  //     );
+  // }
+
+  // return (
+  //     <>
+  //         {props.fieldConfig && props.fieldConfig.disableDefaultWrapper ? (
+  //             <>{getInput()}</>
+  //         ) : (
+  //             <>{props.fieldConfig.align === FieldAlignType.HORIZONTAL ? <>{formTypeHorizontal()}</> : <>{formTypeVertical()}</>}</>
+  //         )}
+  //     </>
+  // );
+  return <></>;
+};
+
+export default ComboMultiSelect;