gbs-add-block 0.0.45 → 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.45",
+  "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,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { CheckboxHandlesProps } from "./types";
+import { CheckboxHandlesProps } from "../types";
 
 const CheckboxHandles = ({
   item,

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { DatePicker } from "../datepicker";
-import { FormItem } from "./types";
+import { DatePicker } from "../../datepicker";
+import { FormItem } from "../types";
 
 interface DatePickerHandlesProps {
   item?: FormItem;

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { validateEmail, validatePhoneNumber } from "./helperFunctions";
-import { Input } from "../input";
-import { FieldValue, FormContext, FormItem } from "./types";
+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";
 

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { FormItem } from "./types";
-import { MultiSelect } from "../multiselect";
+import { FormItem } from "../types";
+import { MultiSelect } from "../../multiselect";
 
 interface MultiSelectHandlesProps {
   item?: FormItem;

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Select } from "../refactoredSelect/Select";
+import { Select } from "../../select";
 
 interface Option {
   value: string;

package/source/components/formrenderer/index.tsx

@@ -6,13 +6,13 @@
  */
 
 import React, { useRef, useState } from "react";
-import InputHandles from "./InputHandles";
-import SelectHandles from "./SelectHandles";
-import { FormElement, FormItem, FormRendererProps } from "./types";
-import MultiHandles from "./MultiHandles";
-import DatePickerHandles from "./DatePickerHandles";
-import CheckboxHandles from "./CheckBoxHandles";
 import { useFormContext } from "@grampro/expression-evaluator";
+import { FormElement, FormItem, FormRendererProps } from "./types";
+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,

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'
-];