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

package/src/form/formfields/MultipleSelectField.tsx

@@ -0,0 +1,98 @@
+import React, {
+    Fragment,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+import { RegisterOptions } from "react-hook-form";
+import { Listbox, ListboxButton, Transition } from "@headlessui/react";
+
+import {
+    FieldOptionsSchema,
+    FormFieldComponentPropSchema,
+    FormFieldType,
+} from "../schema/FormFieldSchema";
+import { FormContext } from "../context/FormContext";
+import RenderFormField from "../util/RenderFormField";
+import RenderListOptions, {
+    renderListBoxValue,
+} from "../util/RenderListOptions";
+import { handleChange, registerFormField } from "../util";
+
+const MultipleSelectField: React.FC<FormFieldComponentPropSchema> = ({
+    fieldConfig,
+    onChange,
+}: FormFieldComponentPropSchema) => {
+    const multiSelectRef = useRef<HTMLUListElement>(null);
+    const formContext = useContext(FormContext);
+    let registerOptions: RegisterOptions = registerFormField(fieldConfig, true);
+    let hookProps = formContext.register(fieldConfig.name, registerOptions);
+
+    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>(
+        fieldConfig.options ? fieldConfig.options : []
+    );
+
+    const validSelectedValues = (formContext.getValues(fieldConfig.name) ||[])
+      .filter((selectedValue:any) =>
+        fieldConfig.options && fieldConfig.options.some(option => option.value === selectedValue)
+      );
+
+    useEffect(() => {
+        if (
+            !formContext.getValues(fieldConfig.name) &&
+            fieldConfig.defaultValue
+        )
+            formContext.setValue(fieldConfig.name, fieldConfig.defaultValue);
+
+        if (fieldConfig.options && fieldConfig.options.length > 0) {
+            setListOptions(fieldConfig.options);
+            return;
+        }
+    }, [fieldConfig.options]);
+
+    function getInput() {
+        return (
+            <Listbox
+                as={"div"}
+                {...hookProps}
+                value={validSelectedValues}
+                defaultValue={fieldConfig.defaultValue}
+                onChange={(val) =>
+                    handleChange(val, formContext, fieldConfig, onChange)
+                }
+                disabled={fieldConfig.disabled}
+                multiple
+                className={"relative form-listbox flex-1"}>
+                <ListboxButton
+                    className={
+                        fieldConfig.customClassNames?.fieldClassName
+                            ? "form-listbox-select " +
+                              fieldConfig.customClassNames?.fieldClassName
+                            : "form-listbox-select"
+                    }>
+                    {renderListBoxValue(
+                        formContext,
+                        fieldConfig,
+                        listOptions,
+                        onChange
+                    )
+                    }
+                </ListboxButton>
+                <RenderListOptions
+                    formContext={formContext}
+                    onChange={onChange}
+                    formField={FormFieldType.MULTI_SELECT}
+                    ref={multiSelectRef}
+                    fieldConfig={fieldConfig}
+                    listOptions={listOptions}
+                    setListOptions={setListOptions}
+                />
+            </Listbox>
+        );
+    }
+
+    return <RenderFormField fieldConfig={fieldConfig} getInput={getInput} />;
+};
+export default MultipleSelectField;

package/src/form/formfields/NumberField.tsx

@@ -0,0 +1,61 @@
+import React, {useContext} from "react";
+import {RegisterOptions} from "react-hook-form";
+import {FormContext} from "../context/FormContext";
+import {FormFieldComponentPropSchema} from "../schema/FormFieldSchema";
+import {handleChange, registerFormField} from "../util";
+import RenderFormField from "../util/RenderFormField";
+
+const NumberField: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const formContext = useContext(FormContext);
+
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+    let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+    function getInput() {
+        return (
+            <input
+                type="number"
+                {...hookProps}
+                placeholder={props.fieldConfig?.placeholder}
+                readOnly={props.fieldConfig?.readOnly}
+                disabled={props.fieldConfig?.disabled}
+                autoComplete={props.fieldConfig?.autoComplete}
+                min={props.fieldConfig?.min}
+                max={props.fieldConfig?.max}
+                step={props.fieldConfig.decimalAllowed ? 0.01 : 1}
+                defaultValue={props.fieldConfig.defaultValue as string}
+                className={`form-input ${
+                    props.fieldConfig.customClassNames?.fieldClassName || "flex-1 !w-60"
+                }`}
+                onKeyDown={(e) => {
+                    props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);
+                }}
+                onChange={(e) => {
+                    let value = e.target.value;
+                    let numericValue = parseFloat(value);
+                    if (props.fieldConfig.max !== undefined && numericValue > props.fieldConfig.max) {
+                        numericValue = props.fieldConfig.max;
+                    }
+                    if (props.fieldConfig.min !== undefined && numericValue < props.fieldConfig.min) {
+                        numericValue = props.fieldConfig.min;
+                    }
+                    value = numericValue.toString();
+                    handleChange(
+                        value,
+                        formContext,
+                        props.fieldConfig,
+                        props.onChange
+                    );
+                }}
+            />
+        );
+    }
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
+    );
+};
+export default NumberField;

package/src/form/formfields/PasswordField.tsx

@@ -0,0 +1,93 @@
+import React, { useContext, useState } 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 Tippy from '@tippyjs/react';
+
+const PasswordField: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  const formContext = useContext(FormContext);
+
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
+
+  function getInput() {
+    return (
+      <div className="relative">
+        <input
+          type={`${isPasswordVisible ? "text" : "password"}`}
+          {...hookProps}
+          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) => {
+            props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);
+          }}
+          onChange={(e) => {
+            handleChange(
+              e.target.value,
+              formContext,
+              props.fieldConfig,
+              props.onChange
+            );
+          }}
+        />
+        <div
+          className="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer"
+          onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+        >
+          <div
+            className="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer"
+            onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+          >
+            {isPasswordVisible ? (
+              <Tippy
+                content={
+                  <>
+                    <h4 className="text-sm capitalize text-center truncate">Hide Password</h4>
+                  </>
+                }
+              >
+                <span className="mark-as-read-btn">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#121212a1" className="bi bi-eye-slash-fill" viewBox="0 0 16 16">
+                    <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7 7 0 0 0 2.79-.588M5.21 3.088A7 7 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474z" />
+                    <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12z" />
+                  </svg>
+                </span>
+              </Tippy>
+            ) : (
+              <Tippy
+                content={
+                  <>
+                    <h4 className="text-sm capitalize text-center truncate">Show Password</h4>
+                  </>
+                }
+              >
+                <span className="mark-as-read-btn">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#121212a1" className="bi bi-eye-fill" viewBox="0 0 16 16">
+                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0" />
+                    <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7" />
+                  </svg>
+                </span>
+              </Tippy>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};
+export default PasswordField;

package/src/form/formfields/PhoneNumberField.tsx

@@ -0,0 +1,163 @@
+import React, { useContext, useCallback, useState } from "react";
+import { RegisterOptions } from "react-hook-form";
+import 'react-phone-number-input/style.css';
+import PhoneInput, { isValidPhoneNumber, Country } from 'react-phone-number-input';
+import { Input, InputProps, Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+
+import flags from "react-phone-number-input/flags";
+import * as RPNInput from "react-phone-number-input";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema, FormFieldType } from "../schema/FormFieldSchema";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import InputField from "./InputField";
+import clsx from "clsx";
+// Phone Number Field Component
+const PhoneNumberField: React.FC<FormFieldComponentPropSchema> = ({
+    fieldConfig,
+    onChange
+}: FormFieldComponentPropSchema) => {
+    const formContext = useContext(FormContext);
+    const registerOptions: RegisterOptions = {
+        ...registerFormField(fieldConfig),
+        validate: (value) => isValidPhoneNumber(value || '') || "Please enter a valid mobile number."
+    };
+
+    const hookprops = formContext.register(fieldConfig.name, registerOptions);
+
+    const getInput = () => (
+        <>
+            {/* Phone Input */}
+            <RPNInput.default
+                {...hookprops}
+                className={clsx("flex")}
+                flagComponent={FlagComponent}
+                countrySelectComponent={CountrySelect}
+                inputComponent={InputComponent}
+                onChange={(value: any) => {
+                    if (!value) return;
+
+                    handleChange(value, formContext, fieldConfig, onChange);
+                }}
+                defaultCountry={fieldConfig.defaultValue as Country}
+                international
+                value={formContext.getValues(fieldConfig.name)}
+                disabled={fieldConfig.disabled}
+                // limitMaxLength={true}
+                placeholder={fieldConfig.placeholder}
+                withCountryCallingCode
+                addInternationalOption={false}
+                readOnly={fieldConfig.readOnly}
+            />
+        </>
+    );
+
+    return <RenderFormField fieldConfig={fieldConfig} getInput={getInput} />;
+};
+export default PhoneNumberField;
+
+// Country Select Component
+const CountrySelect: React.FC<{
+    disabled: boolean;
+    value: Country;
+    onChange: (value: Country) => void;
+    options: { value: Country; label: string }[];
+}> = ({ disabled, value, onChange, options }) => {
+    const [searchTerm, setSearchTerm] = useState<string>("");
+
+    const handleSelect = useCallback(
+        (country: Country) => {
+            onChange(country);
+        },
+        [onChange]
+    );
+
+    // Filter options based on the search term
+    const filteredOptions = options.filter((option) =>
+        option.label.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    return (
+        <Popover className={''}>
+            <PopoverButton
+                type="button"
+                className={`form-listbox-select rounded-e-none flex ${disabled ? 'opacity-50' : ''}`}
+                disabled={disabled}
+            >
+                <FlagComponent
+                    country={value as Country}
+                    countryName={value}
+                />
+                {/* <ChevronUpDownIcon className="h-5 w-5 text-gray-400" /> */}
+            </PopoverButton>
+            <PopoverPanel className="w-[300px] absolute z-50 p-0 bg-white shadow-lg rounded-md">
+                <div className="p-2">
+                    <input
+                        className="form-input pr-9"
+                        placeholder="Search country..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                    />
+                </div>
+                <div className="phone-num-dropdown">
+                    {filteredOptions.length > 0 ? (
+                        filteredOptions.map((option) => (
+                            <div
+                                key={option.value}
+                                className="flex items-center justify-between px-3 py-2 hover:bg-gray-100 cursor-pointer"
+                                onClick={() => handleSelect(option.value)}
+                            >
+                                {/* Country flag */}
+                                <div className="flex items-center">
+                                    <FlagComponent
+                                        country={option.value}
+                                        countryName={option.label}
+                                    />
+                                    <span className="ml-3">{option.label}</span>
+                                </div>
+
+                                {/* Country code and check icon */}
+                                <div className="flex items-center space-x-3">
+                                    {option.value && (
+                                        <span className="text-foreground/50 text-sm">
+                                            {`+${RPNInput.getCountryCallingCode(option.value)}`}
+                                        </span>
+                                    )}
+                                    <CheckIcon
+                                        className={`h-4 w-4 ${option.value === value ? 'opacity-100' : 'opacity-0'}`}
+                                    />
+                                </div>
+                            </div>
+                        ))
+                    ) : (
+                        <div className="px-3 py-2 text-gray-500 text-center">No country found</div>
+                    )}
+                </div>
+            </PopoverPanel>
+        </Popover>
+    );
+};
+
+// Flag Component
+const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
+    const Flag = flags[country];
+
+    return (
+        <span className="bg-foreground/20 flex h-5 w-6 overflow-hidden rounded-sm">
+            {Flag && <Flag title={countryName} />}
+        </span>
+    );
+};
+
+// Input Component for the phone input
+const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, ...props }, ref) => (
+        <Input
+            className={clsx("rounded-s-none form-input", className)}
+            {...props}
+            ref={ref}
+        />
+    ),
+);
+InputComponent.displayName = "InputComponent";

package/src/form/formfields/RadioField.tsx

@@ -0,0 +1,104 @@
+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, Radio, RadioGroup } from "@headlessui/react";
+import clsx from "clsx";
+
+const RadioField: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const formContext = useContext(FormContext);
+
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+    let hookProps = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+
+    function getInput() {
+        return (
+            props.fieldConfig.options && (
+                <RadioGroup
+                    {...hookProps}
+                    value={formContext.getValues(props.fieldConfig.name) ?? props.fieldConfig.defaultValue}
+                    className={
+                        props.fieldConfig.customClassNames
+                            ?.fieldClassName ||
+                        "form-check-container"
+                    }
+                    onChange={(value) => {
+                        handleChange(
+                            value,
+                            formContext,
+                            props.fieldConfig,
+                            props.onChange
+                        );
+                    }}>
+                    {props.fieldConfig.options.map((option) => {
+                        return (
+                            <Radio
+                                value={option.value}
+                                key={option.value}
+                                disabled={option.isDisabled}
+                                className={
+                                    props.fieldConfig.customClassNames
+                                        ?.optionClassName ||
+                                    "form-check-container"
+                                }
+                                >
+                                {({ checked }) => {
+                                    return props.fieldConfig
+                                        .fieldOptionWrapper ? (
+                                        <props.fieldConfig.fieldOptionWrapper
+                                            data={option}
+                                            selected={
+                                                checked
+                                            }></props.fieldConfig.fieldOptionWrapper>
+                                    ) : (
+                                        <>
+                                            <span
+                                                className={"form-check-radio flex items-center"}>
+                                                <span
+                                                    className={clsx("form-radio ")}
+                                                >
+                                                    {checked &&
+                                                    <span className="checked"></span>
+                                                }
+                                                </span>
+                                                <label htmlFor={option.value} className="cursor-pointer">
+                                                    {option.label}
+                                                    {option.icon && (
+                                                        <span
+                                                            className={
+                                                                "listbox-svg ml-2 cursor-pointer"
+                                                            }>
+                                                            {option.icon}
+                                                        </span>
+                                                    )}
+                                                </label>
+                                            </span>
+                                            {option.helpText && (
+                                                <p className="ms-6 text-tiny text-gray-500">
+                                                    {option.helpText}
+                                                </p>
+                                            )}
+                                        </>
+                                    );
+                                }}
+                            </Radio>
+                        );
+                    })}
+                </RadioGroup>
+            )
+        );
+    }
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    );
+};
+export default RadioField;

package/src/form/formfields/RadioGroupComponent.tsx

@@ -0,0 +1,94 @@
+import React, { useContext } from "react";
+import { RegisterOptions } from "react-hook-form";
+import { FormContext } from "../context/FormContext";
+import { Label, Radio, RadioGroup } from "@headlessui/react";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+
+const RadioGroupComponent: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  const formContext = useContext(FormContext);
+
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+  function getInput() {
+    return (
+      <>
+        <div className="w-full">
+          {/*<div className="mx-auto w-full max-w-md">*/}
+            {props.fieldConfig.options && (
+              <RadioGroup
+                {...hookProps}
+                onChange={(value) => {
+                  handleChange(
+                    value,
+                    formContext,
+                    props.fieldConfig,
+                    props.onChange
+                  );
+                }}
+              >
+                <Label className="sr-only">Server size</Label>
+                <div className="space-x-2 flex items-stretch">
+                  {props.fieldConfig.options.map((option) => (
+                    <Radio
+                      key={option.label}
+                      value={option.value}
+                      disabled={option.isDisabled}
+                      className={({ checked }) =>
+                        `${
+                          checked ? "bg-blue-50" : "bg-white"
+                        } flex w-full flex-col gap-2 rounded-lg border border-gray-200 p-4 shadow-sm cursor-pointer`
+                      }
+                    >
+                      {({ checked }) => (
+                        <>
+                          <div className="flex w-full items-center justify-between">
+                            <div className="flex items-center justify-center">
+                              <span className={"listbox-svg"}>
+                                {option.icon}
+                              </span>
+                              <div className="text-sm ">
+                                <Label
+                                  as="p"
+                                  className={`font-medium  ${
+                                    checked ? "text-gray-900" : "text-gray-900"
+                                  }`}
+                                >
+                                  {option.label}
+                                </Label>
+                              </div>
+                            </div>
+                          </div>
+                          {option.helpText ? (
+                            <p
+                              className="mt-2 text-tiny text-gray-500"
+                              id="email-description"
+                            >
+                              {option.helpText}
+                            </p>
+                          ) : (
+                            <></>
+                          )}
+                        </>
+                      )}
+                    </Radio>
+                  ))}
+                </div>
+              </RadioGroup>
+            )}
+          {/*</div>*/}
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};
+export default RadioGroupComponent;

package/src/form/formfields/RangeField.tsx

@@ -0,0 +1,53 @@
+import { useContext } from "react";
+import { RegisterOptions } from "react-hook-form";
+import React from "react";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { Input } from "@headlessui/react";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+
+export const RangeField: 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
+        type="range"
+        {...hookProps}
+        placeholder={props.fieldConfig?.placeholder}
+        readOnly={props.fieldConfig?.readOnly}
+        disabled={props.fieldConfig?.disabled}
+        autoComplete={props.fieldConfig?.autoComplete}
+        defaultValue={props.fieldConfig.defaultValue as string}
+        className={`form-range ${
+          props.fieldConfig.customClassNames?.fieldClassName || ""
+        }`}
+        onChange={(e) => {
+          handleChange(
+            e.target.value,
+            formContext,
+            props.fieldConfig,
+            props.onChange
+          );
+        }}
+        onClick={(event) => {
+          event.currentTarget.showPicker();
+        }}
+      />
+    );
+  };
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};