gbs-add-block 0.0.44 → 0.0.46

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.44)
+# GBS Building Blocks 2.0 (v0.0.46)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.44)
+## What's New 🎉 (Ver 0.0.46)
 
-- Refactored Code for Better Readability and removed dependency for Toast
+- Refactored Code for Better Readability
+- Code Reusablity and hook update
 
 ## Authors
 

package/index.js

@@ -70,20 +70,6 @@ const copyCommonFiles = async (destPath) => {
   }
 };
 
-const copySelectionHooks = async (destPath) => {
-  const hooksSrc = path.join(SOURCE_PATH, "..", "hooks", "SelectionHooks");
-  const hooksDest = path.join(destPath, "hooks", "SelectionHooks");
-
-  await fs.ensureDir(path.dirname(hooksDest));
-
-  if (!fs.existsSync(hooksSrc)) {
-    throw new Error(`SelectionHooks not found at ${hooksSrc}`);
-  }
-
-  await fs.copy(hooksSrc, hooksDest, { overwrite: true });
-  console.log(`SelectionHooks copied successfully to ${hooksDest}`);
-};
-
 const copyComponent = async (component, destPath) => {
   try {
     const componentSrc = path.join(SOURCE_PATH, component.toLowerCase());
@@ -103,10 +89,6 @@ const copyComponent = async (component, destPath) => {
       isFirstCopy = false;
     }
 
-    if (["Select", "MultiSelect"].includes(component)) {
-      await copySelectionHooks(destPath);
-    }
-
     console.log(`\nFor Props and Usage Guides Visit: ${CONFIG.docs}\n`);
   } catch (error) {
     console.error(`Error copying component ${component}:`, error.message);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/datepicker/index.tsx

@@ -5,8 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useEffect, useRef } from "react";
-import { generateCalendarHelper, months } from "./DatePickerHelper";
+import React, { useRef } from "react";
+import {
+  useDatePickerState,
+  useYearMonthNavigation,
+  useClickOutside,
+  isAtYearLimit,
+  months,
+  applyScrollbarStyles,
+} from "@grampro/headless-helpers";
 import Icon from "../icon/Icon";
 import { calender, down, leftArrows, rightArrows } from "../icon/iconPaths";
 import type { DatePickerProps } from "./types";
@@ -23,59 +30,51 @@ export const DatePicker = ({
   error,
   placeholder = "Select a date",
 }: DatePickerProps) => {
-  const [showDatepicker, setShowDatepicker] = useState(false);
-  const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
-  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
-  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
-  const [days, setDays] = useState<(Date | null)[][]>([]);
-  const [selectedDate, setSelectedDate] = useState<Date | null>(
-    selectedDateValue || null
-  );
-  const [tempSelectedDate, setTempSelectedDate] = useState<Date | null>(
-    selectedDateValue || new Date()
-  );
-  const [hasMounted, setHasMounted] = useState(false);
+  applyScrollbarStyles();
 
   const dateRef = useRef<HTMLDivElement>(null);
   const today = new Date();
-
   const actualCurrentYear = today.getFullYear();
+
+  const {
+    showDatepicker,
+    setShowDatepicker,
+    showYearMonthPicker,
+    setShowYearMonthPicker,
+    currentMonth,
+    setCurrentMonth,
+    currentYear,
+    setCurrentYear,
+    days,
+    selectedDate,
+    setSelectedDate,
+    tempSelectedDate,
+    setTempSelectedDate,
+    hasMounted,
+  } = useDatePickerState(selectedDateValue || null);
+
+  const { prevMonth, nextMonth } = useYearMonthNavigation(
+    currentMonth,
+    currentYear,
+    yearLimitStart,
+    yearLimitEnd,
+    setCurrentMonth,
+    setCurrentYear
+  );
+  useClickOutside(
+    dateRef as React.RefObject<HTMLElement>,
+    () => {
+      setShowDatepicker(false);
+      setTempSelectedDate(selectedDate || new Date());
+    },
+    [selectedDate]
+  );
+
   const years = Array.from(
     { length: yearLimitStart + yearLimitEnd + 1 },
     (_, i) => actualCurrentYear - yearLimitStart + i
   ).sort((a, b) => b - a);
 
-  useEffect(() => {
-    if (selectedDateValue) {
-      setSelectedDate(selectedDateValue);
-      setTempSelectedDate(selectedDateValue);
-      setCurrentMonth(selectedDateValue.getMonth());
-      setCurrentYear(selectedDateValue.getFullYear());
-    }
-  }, [selectedDateValue]);
-
-  useEffect(() => {
-    setHasMounted(true);
-  }, []);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (dateRef.current && !dateRef.current.contains(event.target as Node)) {
-        setShowDatepicker(false);
-        setTempSelectedDate(selectedDate || new Date());
-      }
-    }
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [selectedDate]);
-
-  useEffect(() => {
-    setDays(generateCalendarHelper(currentYear, currentMonth));
-  }, [currentYear, currentMonth]);
-
   const toggleDatepicker = () => {
     setShowDatepicker(!showDatepicker);
     setShowYearMonthPicker(false);
@@ -102,25 +101,6 @@ export const DatePicker = ({
     setCurrentYear(year);
     setCurrentMonth(month);
     setShowYearMonthPicker(false);
-    setDays(generateCalendarHelper(year, month));
-  };
-
-  const prevMonth = () => {
-    if (currentMonth === 0) {
-      setCurrentMonth(11);
-      setCurrentYear(currentYear - 1);
-    } else {
-      setCurrentMonth(currentMonth - 1);
-    }
-  };
-
-  const nextMonth = () => {
-    if (currentMonth === 11) {
-      setCurrentMonth(0);
-      setCurrentYear(currentYear + 1);
-    } else {
-      setCurrentMonth(currentMonth + 1);
-    }
   };
 
   const goToToday = () => {
@@ -157,7 +137,6 @@ export const DatePicker = ({
       </button>
       {error && <p className={primary["error-primary"]}>{error}</p>}
 
-      {/* Hidden input to integrate with the form */}
       <input
         type="hidden"
         name={name}
@@ -171,11 +150,28 @@ export const DatePicker = ({
             <button
               type="button"
               onClick={prevMonth}
-              className="text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100"
+              disabled={isAtYearLimit(
+                "prev",
+                currentMonth,
+                currentYear,
+                yearLimitStart,
+                yearLimitEnd
+              )}
+              className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
+                isAtYearLimit(
+                  "prev",
+                  currentMonth,
+                  currentYear,
+                  yearLimitStart,
+                  yearLimitEnd
+                )
+                  ? "opacity-50"
+                  : ""
+              }`}
             >
               <Icon
                 elements={leftArrows}
-                svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
+                svgClass={"stroke-black fill-none dark:stroke-white"}
               />
             </button>
             <div className="flex items-center space-x-2">
@@ -199,7 +195,24 @@ export const DatePicker = ({
             <button
               type="button"
               onClick={nextMonth}
-              className="text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100"
+              disabled={isAtYearLimit(
+                "next",
+                currentMonth,
+                currentYear,
+                yearLimitStart,
+                yearLimitEnd
+              )}
+              className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
+                isAtYearLimit(
+                  "next",
+                  currentMonth,
+                  currentYear,
+                  yearLimitStart,
+                  yearLimitEnd
+                )
+                  ? "opacity-50"
+                  : ""
+              }`}
             >
               <Icon
                 elements={rightArrows}
@@ -219,7 +232,7 @@ export const DatePicker = ({
                       onClick={() => selectYearMonth(currentYear, index)}
                       className={`w-full text-left p-2 cursor-pointer rounded hover:bg-gray-200 transition duration-150 ease-in-out ${
                         index === currentMonth
-                          ? "bg-blue-500 text-white hover:bg-blue-600"
+                          ? "bg-black text-white hover:bg-blue-600"
                           : ""
                       }`}
                     >
@@ -238,7 +251,7 @@ export const DatePicker = ({
                       onClick={() => selectYearMonth(year, currentMonth)}
                       className={`w-full text-left p-2 cursor-pointer rounded hover:bg-gray-200 transition duration-150 ease-in-out ${
                         year === currentYear
-                          ? "bg-blue-500 text-white hover:bg-blue-600"
+                          ? "bg-black text-white hover:bg-blue-600"
                           : ""
                       }`}
                     >
@@ -277,7 +290,9 @@ export const DatePicker = ({
                     onClick={() => !isDisabled && selectDate(day)}
                     disabled={isDisabled}
                     className={`text-center p-1 w-8 h-8 cursor-pointer rounded-md hover:bg-gray-200 transition duration-150 ease-in-out ${
-                      isSelected ? "bg-black text-white hover:bg-gray-800 " : ""
+                      isSelected
+                        ? "bg-black text-white hover:bg-gray-800 dark:bg-white"
+                        : ""
                     } ${
                       isDisabled
                         ? "bg-gray-100 text-gray-400 cursor-not-allowed"

package/source/components/formrenderer/{CheckBoxHandles.tsx → componentHandles/CheckBoxHandles.tsx}

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
-import { CheckboxHandlesProps, FormItem } from "./types";
+import { CheckboxHandlesProps } from "../types";
 
 const CheckboxHandles = ({
   item,
   formRef,
   requirementError,
   setRequirementError,
+  onChangeEvent,
+  updateContext,
 }: CheckboxHandlesProps) => {
   const [checked, setChecked] = useState<boolean>(!!item?.value);
 
@@ -47,6 +49,9 @@ const CheckboxHandles = ({
               prevErrors.filter((error) => error !== item.name)
             );
           }
+          onChangeEvent?.(e);
+
+          item?.name && updateContext("checkbox", item.name, newValue);
         }}
         className={`w-5 h-5 cursor-pointer rounded-md border-2 transition-colors duration-200 ${
           item?.name && requirementError.includes(item?.name)

package/source/components/formrenderer/{DatePickerHandles.tsx → componentHandles/DatePickerHandles.tsx}

@@ -1,12 +1,13 @@
 import React from "react";
-import { DatePicker } from "../datepicker";
-import { FormItem } from "./types";
+import { DatePicker } from "../../datepicker";
+import { FormItem } from "../types";
 
 interface DatePickerHandlesProps {
   item?: FormItem;
   requirementError: string[];
   setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
   formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
 }
 
 export default function DatePickerHandles({
@@ -14,6 +15,7 @@ export default function DatePickerHandles({
   requirementError,
   setRequirementError,
   formRef,
+  onChangeEvent,
 }: DatePickerHandlesProps) {
   const handleSelectDate = (value: string[], key: string) => {
     if (formRef && formRef.current) {
@@ -52,6 +54,7 @@ export default function DatePickerHandles({
               prevErrors.filter((errorName) => errorName !== item.name)
             );
           }
+          onChangeEvent?.(value);
         }}
         error={
           item?.name && requirementError.includes(item.name)

package/source/components/formrenderer/componentHandles/InputHandles.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from "react";
+import { validateEmail, validatePhoneNumber } from "../helperFunctions";
+import { Input } from "../../input";
+import { FieldValue, FormContext, FormItem } from "../types";
+import { evaluateExpression } from "@grampro/expression-evaluator";
+import { twMerge } from "tailwind-merge";
+
+interface InputHandlesProps {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  onChangeEvent?: (event: any) => void;
+  formRef: React.RefObject<HTMLFormElement | null>;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
+}
+
+const InputHandles = ({
+  item,
+  requirementError,
+  setRequirementError,
+  onChangeEvent,
+  context,
+  updateContext,
+}: InputHandlesProps) => {
+  const [inputError, setInputError] = useState<string | null>(null);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [isRequired, setIsRequired] = useState<boolean>(false);
+
+  // Initialize context with default values
+  useEffect(() => {
+    if (item?.name && item?.value !== undefined) {
+      updateContext("input", item.name, item.value);
+    }
+  }, [item?.name, item?.value, updateContext]);
+
+  // Handle dynamic disabled/required states expressions
+  useEffect(() => {
+    if (typeof item?.disabled === "string") {
+      setIsDisabled(evaluateExpression(item.disabled, context));
+    } else if (typeof item?.disabled === "boolean") {
+      setIsDisabled(item.disabled);
+    }
+
+    if (typeof item?.required === "string") {
+      setIsRequired(evaluateExpression(item.required, context));
+    } else if (typeof item?.required === "boolean") {
+      setIsRequired(item.required);
+    }
+  }, [item, context]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+
+    if (item?.name) {
+      updateContext("input", item.name, value);
+
+      setRequirementError?.((prevErrors) =>
+        prevErrors.filter((error) => error !== item.name)
+      );
+    }
+
+    // Validation based on input type
+    if (item?.type === "email" && !validateEmail(value)) {
+      setInputError("Invalid email format");
+    } else if (item?.type === "tel" && !validatePhoneNumber(value)) {
+      setInputError("Invalid phone number. Must be 10 digits.");
+    } else {
+      setInputError(null);
+    }
+
+    // Trigger onChange event
+    onChangeEvent?.(event);
+  };
+
+  return (
+    <div className="w-full">
+      {item?.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+          {isRequired && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <Input
+        type={item?.type}
+        name={item?.name}
+        placeholder={item?.placeholder || ""}
+        onChange={handleChange}
+        className={twMerge(
+          `border rounded-md px-4 py-[6px] w-full text-black ${
+            inputError || (item?.name && requirementError.includes(item?.name))
+              ? "border-red-500"
+              : "border-gray-300"
+          }`,
+          item?.stepProperty?.customClass?.inputClass
+        )}
+        defaultValue={item?.value ?? ""}
+        disabled={isDisabled}
+        required={isRequired}
+      />
+      {item?.name && requirementError.includes(item.name) && (
+        <p className="text-red-500 text-xs">{`${item?.name} is required`}</p>
+      )}
+      {inputError && <p className="text-red-500 text-xs">{inputError}</p>}
+    </div>
+  );
+};
+
+export default InputHandles;

package/source/components/formrenderer/{MultiHandles.tsx → componentHandles/MultiHandles.tsx}

@@ -1,12 +1,13 @@
 import React from "react";
-import { FormItem } from "./types";
-import { MultiSelect } from "../multiselect";
+import { FormItem } from "../types";
+import { MultiSelect } from "../../multiselect";
 
 interface MultiSelectHandlesProps {
   item?: FormItem;
   requirementError: string[];
   setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
   formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
 }
 
 export default function MultiHandles({
@@ -14,6 +15,7 @@ export default function MultiHandles({
   requirementError,
   setRequirementError,
   formRef,
+  onChangeEvent,
 }: MultiSelectHandlesProps) {
   const handleSelect = (value: string[], key: string) => {
     if (formRef && formRef.current) {
@@ -53,6 +55,7 @@ export default function MultiHandles({
               prevErrors.filter((errorName) => errorName !== item.name)
             );
           }
+          onChangeEvent?.(value);
         }}
         error={
           item?.name && requirementError.includes(item.name)

package/source/components/formrenderer/componentHandles/SelectHandles.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { Select } from "../../select";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface SelectHandlesProps {
+  item?: {
+    name?: string;
+    label?: string;
+    options?: Option[];
+    value?: string;
+    required?: boolean;
+  };
+  requirementError: string[];
+  setRequirementError: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+}
+
+export default function SelectHandles({
+  item,
+  requirementError,
+  setRequirementError,
+  formRef,
+  onChangeEvent,
+}: SelectHandlesProps) {
+  const [options] = useState<Option[]>(item?.options || []);
+
+  const handleSelect = (value: string | undefined, key: string) => {
+    if (!formRef?.current) return;
+
+    let input = formRef.current.querySelector(
+      `input[name="${key}"]`
+    ) as HTMLInputElement | null;
+
+    if (!input) {
+      input = document.createElement("input");
+      input.type = "hidden";
+      input.name = key;
+      formRef.current.appendChild(input);
+    }
+
+    if (value) {
+      input.value = value;
+    }
+    const event = new Event("change", { bubbles: true });
+    input.dispatchEvent(event);
+  };
+
+  return (
+    <div className="w-full">
+      {item?.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+          {item.required && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <Select
+        name={item?.name}
+        items={options}
+        selectedItem={item?.value ?? ""}
+        onSelect={(value: string | undefined) => {
+          item?.name && handleSelect(value, item.name);
+          setRequirementError((prevErrors) =>
+            prevErrors.filter((errorName) => errorName !== item?.name)
+          );
+          onChangeEvent?.(value);
+        }}
+        error={
+          item?.name && requirementError.includes(item.name)
+            ? `${item.name} is required`
+            : undefined
+        }
+      />
+    </div>
+  );
+}

package/source/components/formrenderer/index.tsx

@@ -6,23 +6,25 @@
  */
 
 import React, { useRef, useState } from "react";
-import InputHandles from "./InputHandles";
-import SelectHandles from "./SelectHandles";
+import { useFormContext } from "@grampro/expression-evaluator";
 import { FormElement, FormItem, FormRendererProps } from "./types";
-import MultiHandles from "./MultiHandles";
-import DatePickerHandles from "./DatePickerHandles";
-import CheckboxHandles from "./CheckBoxHandles";
+import InputHandles from "./componentHandles/InputHandles";
+import SelectHandles from "./componentHandles/SelectHandles";
+import MultiHandles from "./componentHandles/MultiHandles";
+import DatePickerHandles from "./componentHandles/DatePickerHandles";
+import CheckboxHandles from "./componentHandles/CheckBoxHandles";
 
 const FormRenderer = ({
   onSubmit,
   sourceData,
   formFormationClass = "grid grid-cols-1 text-left gap-4",
   formParentClass = "w-96",
-  dependencyConfig,
 }: FormRendererProps) => {
   const formRef = useRef<FormElement>(null);
   const [requirementError, setRequirementError] = useState<string[]>([]);
 
+  const { context, updateContext } = useFormContext();
+
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const requirementErrorItems: string[] = [];
@@ -60,6 +62,10 @@ const FormRenderer = ({
                     item={item}
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
+                    onChangeEvent={item.onChangeEvent}
+                    formRef={formRef}
+                    context={context}
+                    updateContext={updateContext}
                   />
                 );
 
@@ -67,11 +73,17 @@ const FormRenderer = ({
                 return (
                   <SelectHandles
                     key={index}
-                    item={item}
+                    item={{
+                      name: item.name,
+                      label: item.label,
+                      options: item.options,
+                      value: item.value,
+                      required: Boolean(item.required),
+                    }}
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
                     formRef={formRef}
-                    dependencyMap={dependencyConfig}
+                    onChangeEvent={item.onChangeEvent}
                   />
                 );
 
@@ -83,6 +95,7 @@ const FormRenderer = ({
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
                     formRef={formRef}
+                    onChangeEvent={item.onChangeEvent}
                   />
                 );
 
@@ -94,6 +107,7 @@ const FormRenderer = ({
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
                     formRef={formRef}
+                    onChangeEvent={item.onChangeEvent}
                   />
                 );
 
@@ -105,6 +119,10 @@ const FormRenderer = ({
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
                     formRef={formRef}
+                    onChangeEvent={item.onChangeEvent}
+                    sourceData={sourceData}
+                    context={context}
+                    updateContext={updateContext}
                   />
                 );
 

package/source/components/formrenderer/types.ts

@@ -7,7 +7,7 @@ export type FormItem = {
   name?: string;
   component?: string;
   type?: string;
-  required?: boolean;
+  required?: boolean | string;
   placeholder?: string;
   options?: { value: string; label: string }[];
   value?: string;
@@ -17,6 +17,13 @@ export type FormItem = {
   dependency?: string;
   hasDependents?: boolean;
   isReady?: boolean;
+  disabled?: string | boolean;
+  onChangeEvent?: (event: any) => void;
+  stepProperty?: {
+    customClass?: {
+      inputClass?: string;
+    };
+  };
 };
 
 interface DependencyConfig {
@@ -58,4 +65,22 @@ export type CheckboxHandlesProps = {
   requirementError: string[];
   setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
   formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+  changeTrigger?: number;
+  setChangeTrigger?: React.Dispatch<React.SetStateAction<number>>;
+  sourceData?: FormItem[];
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
 };
+
+export type FieldValue = string | boolean | number | null;
+
+export interface FormContext {
+  [componentName: string]: {
+    [fieldName: string]: FieldValue;
+  };
+}

package/source/components/multiselect/index.tsx

@@ -13,9 +13,11 @@ import {
   memo,
   useImperativeHandle,
 } from "react";
-import { useClickOutside } from "../hooks/SelectionHooks/useClickOutside";
 import type { MultiSelectHandle, MultiSelectProps } from "./types";
-import { useMultiSelectState } from "../hooks/SelectionHooks/useMultiSelectState";
+import {
+  useMultiSelectState,
+  useClickOutside,
+} from "@grampro/headless-helpers";
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
 import { iconClass, popUp, primary } from "../globalStyle";
@@ -51,7 +53,9 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       getSelectItems,
     } = useMultiSelectState(items, selectedItems, lazy, onSelect);
 
-    useClickOutside(selectRef, () => setShowPopover(false));
+    useClickOutside(selectRef as React.RefObject<HTMLElement>, () =>
+      setShowPopover(false)
+    );
 
     useEffect(() => {
       if (showPopover) {

package/source/components/select/{Select.tsx → index.tsx}

@@ -18,9 +18,11 @@ import { check, search, upDown, x } from "../icon/iconPaths";
 import type { SelectHandle, SelectProps } from "./types";
 import { selectStyle } from "./style";
 import { iconClass, popUp, primary } from "../globalStyle";
-import { useSelectState } from "../hooks/SelectionHooks/useSelectState";
-import { useSelectData } from "../hooks/SelectionHooks/useSelectData";
-import { useClickOutside } from "../hooks/SelectionHooks/useClickOutside";
+import {
+  useSelectState,
+  useSelectData,
+  useClickOutside,
+} from "@grampro/headless-helpers";
 
 const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   const {
@@ -61,7 +63,9 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const selectRef = useRef<HTMLDivElement>(null);
 
-  useClickOutside(selectRef, () => setShowPopover(false));
+  useClickOutside(selectRef as React.RefObject<HTMLElement>, () =>
+    setShowPopover(false)
+  );
 
   useEffect(() => {
     if (showPopover) {
@@ -70,7 +74,9 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   }, [showPopover]);
 
   useEffect(() => {
-    setSelectedItem(initialSelectedItem);
+    if (initialSelectedItem) {
+      setSelectedItem(initialSelectedItem);
+    }
   }, [initialSelectedItem, setSelectedItem]);
 
   const handleSelect = useCallback(

package/source/components/datepicker/DatePickerHelper.ts

@@ -1,42 +0,0 @@
-const getDaysInMonth = (year: number, month: number) => {
-	return new Date(year, month + 1, 0).getDate();
-};
-
-export const generateCalendarHelper = (year: number, month: number) => {
-	const daysInMonth = getDaysInMonth(year, month);
-	const firstDay = new Date(year, month, 1).getDay();
-	const weeks = [];
-	let day = 1;
-
-	for (let i = 0; i < 6; i++) {
-		const week = [];
-		for (let j = 0; j < 7; j++) {
-			if (i === 0 && j < firstDay) {
-				week.push(null);
-			} else if (day > daysInMonth) {
-				week.push(null);
-			} else {
-				const date = new Date(year, month, day);
-				week.push(date);
-				day++;
-			}
-		}
-		weeks.push(week);
-	}
-	return weeks;
-};
-
-export const months = [
-	'January',
-	'February',
-	'March',
-	'April',
-	'May',
-	'June',
-	'July',
-	'August',
-	'September',
-	'October',
-	'November',
-	'December'
-];

package/source/components/formrenderer/InputHandles.tsx

@@ -1,71 +0,0 @@
-import React, { useState } from "react";
-import { validateEmail, validatePhoneNumber } from "./helperFunctions";
-import { Input } from "../input";
-import { FormItem } from "./types";
-
-interface InputHandlesProps {
-  item?: FormItem;
-  requirementError: string[];
-  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
-}
-
-const InputHandles = ({
-  item,
-  requirementError,
-  setRequirementError,
-}: InputHandlesProps) => {
-  const [inputError, setInputError] = useState<string | null>(null);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
-
-    setRequirementError &&
-      setRequirementError((prevErrors: string[]) =>
-        prevErrors.filter((error) => error !== item?.name)
-      );
-
-    // Validation based on input type
-    if (item?.type === "email") {
-      if (!validateEmail(value)) {
-        setInputError("Invalid email format");
-      } else {
-        setInputError(null);
-      }
-    } else if (item?.type === "tel") {
-      if (!validatePhoneNumber(value)) {
-        setInputError("Invalid phone number. Must be 10 digits.");
-      } else {
-        setInputError(null);
-      }
-    }
-  };
-
-  return (
-    <div className="w-full">
-      {item?.label && (
-        <label htmlFor={item.name} className="font-medium text-sm">
-          {item.label}
-          {item.required && <span className="text-red-500">*</span>}
-        </label>
-      )}
-      <Input
-        type={item?.type}
-        name={item?.name}
-        placeholder={item?.placeholder || ""}
-        onChange={handleChange}
-        className={`border rounded-md px-4 py-[6px] w-full text-black ${
-          inputError || (item?.name && requirementError.includes(item?.name))
-            ? "border-red-500"
-            : "border-gray-300"
-        }`}
-        defaultValue={item?.value ?? ""}
-      />
-      {item?.name && requirementError.includes(item.name) && (
-        <p className="text-red-500 text-xs">{`${item?.name} is required`}</p>
-      )}
-      {inputError && <p className="text-red-500 text-xs">{inputError}</p>}
-    </div>
-  );
-};
-
-export default InputHandles;

package/source/components/formrenderer/SelectHandles.tsx

@@ -1,143 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Select } from "../select";
-import { Option, SelectHandlesProps } from "./types";
-
-export default function SelectHandles({
-  item,
-  requirementError,
-  setRequirementError,
-  formRef,
-  dependencyMap = {},
-}: SelectHandlesProps) {
-  const [options, setOptions] = useState<Option[]>(item?.options || []);
-
-  const getFieldValue = (fieldName: string): string => {
-    if (!formRef?.current) return "";
-    const field = formRef.current.querySelector(
-      `input[name="${fieldName}"]`
-    ) as HTMLInputElement;
-    return field?.value || "";
-  };
-
-  const getDependentOptions = (fieldName: string): Option[] => {
-    const fieldConfig = dependencyMap[fieldName];
-    if (!fieldConfig) return [];
-
-    let currentData = fieldConfig.dataStructure;
-
-    if (fieldConfig.parent) {
-      const parentValue = getFieldValue(fieldConfig.parent);
-      if (!parentValue) return [];
-
-      const getNestedValue = (data: any, path: string[]): any => {
-        return path.reduce((acc, key) => acc?.[key], data);
-      };
-
-      const parentChain: string[] = [];
-      let currentField = fieldName;
-      while (dependencyMap[currentField]?.parent) {
-        const parent = dependencyMap[currentField].parent!;
-        parentChain.unshift(getFieldValue(parent));
-        currentField = parent;
-      }
-
-      currentData = getNestedValue(currentData, parentChain);
-    }
-
-    if (Array.isArray(currentData)) {
-      return currentData.map((value) => ({ value, label: value }));
-    } else if (typeof currentData === "object" && currentData !== null) {
-      return Object.keys(currentData).map((key) => ({
-        value: key,
-        label: key,
-      }));
-    }
-
-    return [];
-  };
-
-  useEffect(() => {
-    if (!item?.name || !dependencyMap[item.name]) {
-      return;
-    }
-
-    const updateOptions = () => {
-      const newOptions = getDependentOptions(item.name!);
-      setOptions(newOptions);
-    };
-
-    updateOptions();
-
-    const parentField = dependencyMap[item.name]?.parent;
-    if (parentField && formRef?.current) {
-      const parentInput = formRef.current.querySelector(
-        `input[name="${parentField}"]`
-      );
-
-      const handleParentChange = () => {
-        if (formRef.current) {
-          const currentField = formRef.current.querySelector(
-            `input[name="${item.name}"]`
-          ) as HTMLInputElement;
-          if (currentField) {
-            currentField.value = "";
-          }
-        }
-        updateOptions();
-      };
-
-      parentInput?.addEventListener("change", handleParentChange);
-      return () =>
-        parentInput?.removeEventListener("change", handleParentChange);
-    }
-  }, [item?.name, dependencyMap, formRef]);
-
-  const handleSelect = (value: string | undefined, key: string) => {
-    if (!formRef?.current) return;
-
-    let input = formRef.current.querySelector(
-      `input[name="${key}"]`
-    ) as HTMLInputElement;
-
-    if (!input) {
-      input = document.createElement("input");
-      input.type = "hidden";
-      input.name = key;
-      formRef.current.appendChild(input);
-    }
-
-    if (value) {
-      input.value = value;
-    }
-    const event = new Event("change", { bubbles: true });
-    input.dispatchEvent(event);
-  };
-
-  return (
-    <div className="w-full">
-      {item?.label && (
-        <label htmlFor={item.name} className="font-medium text-sm">
-          {item.label}
-          {item.required && <span className="text-red-500">*</span>}
-        </label>
-      )}
-      <Select
-        name={item?.name}
-        items={options}
-        selectedItem={item?.value ?? ""}
-        onSelect={(value: string | undefined) => {
-          item?.name && handleSelect(value, item.name);
-          setRequirementError &&
-            setRequirementError((prevErrors) =>
-              prevErrors.filter((errorName) => errorName !== item?.name)
-            );
-        }}
-        error={
-          item?.name && requirementError.includes(item.name)
-            ? `${item.name} is required`
-            : undefined
-        }
-      />
-    </div>
-  );
-}