gbs-add-block 0.0.39 → 0.0.41

package/source/components/multiselect/index.tsx

@@ -5,20 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {
-  forwardRef,
-  memo,
+import {
   useCallback,
+  forwardRef,
+  useRef,
   useEffect,
+  memo,
   useImperativeHandle,
-  useRef,
-  useState,
 } from "react";
+import { useClickOutside } from "../hooks/SelectionHooks/useClickOutside";
+import type { MultiSelectHandle, MultiSelectProps } from "./types";
+import { useMultiSelectState } from "../hooks/SelectionHooks/useMultiSelectState";
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
-import { getSourceData } from "../utils";
-import type { ItemsProps, MultiSelectHandle, MultiSelectProps } from "./types";
-import { primary } from "../globalStyle";
+import { iconClass, popUp, primary } from "../globalStyle";
 
 const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
   (props, ref) => {
@@ -34,70 +34,32 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       error,
     } = props;
 
-    const [showPopover, setShowPopover] = useState(false);
-    const [workingDataSource, setWorkingDataSource] = useState<ItemsProps[]>(
-      []
-    );
-    const [filteredItems, setFilteredItems] = useState<ItemsProps[]>([]);
-    const [selected, setSelected] = useState<string[]>(selectedItems);
-    const [searchTerm, setSearchTerm] = useState("");
     const inputRef = useRef<HTMLInputElement>(null);
     const selectRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-      inputRef.current?.focus();
-    }, [showPopover]);
+    const {
+      showPopover,
+      setShowPopover,
+      workingDataSource,
+      filteredItems,
+      selected,
+      searchTerm,
+      setSearchTerm,
+      handleSelect,
+      togglePopover,
+      clearSelected,
+      getSelectItems,
+    } = useMultiSelectState(items, selectedItems, lazy, onSelect);
 
-    useEffect(() => {
-      handleDataSource();
-    }, [items]);
+    useClickOutside(selectRef, () => setShowPopover(false));
 
     useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (
-          selectRef.current &&
-          !selectRef.current.contains(event.target as Node)
-        ) {
-          setShowPopover(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () =>
-        document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-
-    const getSelectItems = async (itemsApi: string) => {
-      const itemsData = await getSourceData(itemsApi);
-      setWorkingDataSource(itemsData.sourcedata);
-      setFilteredItems(itemsData.sourcedata);
-    };
-
-    const handleDataSource = async () => {
-      if (Array.isArray(items)) {
-        setWorkingDataSource(items);
-        setFilteredItems(items);
-      } else if (typeof items === "string") {
-        await getSelectItems(items);
+      if (showPopover) {
+        inputRef.current?.focus();
       }
-    };
-
-    const togglePopover = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      setShowPopover(!showPopover);
-    };
-
-    const handleSelect = useCallback(
-      (value: string) => {
-        const newSelected = selected.includes(value)
-          ? selected.filter((item) => item !== value)
-          : [...selected, value];
-        setSelected(newSelected);
-        onSelect?.(newSelected);
-      },
-      [selected, onSelect]
-    );
+    }, [showPopover]);
 
-    const getSelectedDisplay = () => {
+    const getSelectedDisplay = useCallback(() => {
       if (selected.length === 0) return placeholder;
       const displayedItems = selected
         .slice(0, 3)
@@ -110,37 +72,29 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
         display += `, +${selected.length - 3} more`;
       }
       return display;
-    };
-
-    const inputSearchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value.toLowerCase();
-      setSearchTerm(value);
-      if (!lazy) {
-        setFilteredItems(
-          workingDataSource.filter((item) =>
-            Object.values(item).some((val) =>
-              val.toString().toLowerCase().includes(value)
-            )
-          )
-        );
-      }
-    };
-
-    const clearSelected = () => {
-      setSelected([]);
-      setShowPopover(false);
-      if (onSelect) onSelect([]);
-    };
-
-    useImperativeHandle(ref, () => ({
-      workingDataSource,
-      items,
-      clearSelected,
-      togglePopover,
-      getSelectItems,
-      selectedDisplay: getSelectedDisplay(),
-      selected,
-    }));
+    }, [selected, workingDataSource, placeholder, truncate]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        workingDataSource,
+        items,
+        clearSelected,
+        togglePopover,
+        getSelectItems,
+        selectedDisplay: getSelectedDisplay(),
+        selected,
+      }),
+      [
+        workingDataSource,
+        items,
+        clearSelected,
+        togglePopover,
+        getSelectItems,
+        getSelectedDisplay,
+        selected,
+      ]
+    );
 
     return (
       <div className="relative w-full" ref={selectRef}>
@@ -163,23 +117,16 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
                 onClick={clearSelected}
                 type="button"
               >
-                <Icon
-                  elements={x}
-                  svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
-                />
+                <Icon elements={x} svgClass={iconClass["grey-common"]} />
               </button>
             )}
             <button onClick={togglePopover} type="button">
-              <Icon
-                elements={upDown}
-                svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
-              />
+              <Icon elements={upDown} svgClass={iconClass["grey-common"]} />
             </button>
           </div>
         </div>
-        <p className={primary["error-primary"]}>{error && error}</p>
+        {error && <p className={primary["error-primary"]}>{error}</p>}
 
-        {/* Hidden input to integrate with the form */}
         <input
           type="hidden"
           name={name}
@@ -188,13 +135,10 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
         />
 
         {showPopover && (
-          <div className="w-full absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white">
+          <div className={popUp["pop-up-style"]}>
             {showSearch && (
               <div className="flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black">
-                <Icon
-                  elements={search}
-                  svgClass="stroke-gray-500 fill-none dark:stroke-white"
-                />
+                <Icon elements={search} svgClass={iconClass["grey-common"]} />
                 <input
                   autoComplete="off"
                   type="text"
@@ -204,7 +148,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
                   className="w-full outline-none dark:bg-black"
                   ref={inputRef}
                   value={searchTerm}
-                  onChange={inputSearchHandler}
+                  onChange={(e) => setSearchTerm(e.target.value)}
                 />
               </div>
             )}

package/source/components/select/Select.tsx

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import Icon from "../icon/Icon";
+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";
+
+const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
+  const {
+    id = "",
+    name = "",
+    placeholder = "Select an Item...",
+    items,
+    lazy = false,
+    showSearch = true,
+    onSelect,
+    selectedItem: initialSelectedItem,
+    error = undefined,
+    onFiltering,
+  } = props;
+
+  const {
+    showPopover,
+    setShowPopover,
+    workingDataSource,
+    setWorkingDataSource,
+    searchTerm,
+    setSearchTerm,
+    selectedItem,
+    setSelectedItem,
+    togglePopover,
+    clearSelected,
+  } = useSelectState(initialSelectedItem);
+
+  const { getSelectItems, selectedDisplay, filteredItems } = useSelectData(
+    items,
+    setWorkingDataSource,
+    workingDataSource,
+    searchTerm,
+    lazy,
+    selectedItem
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selectRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(selectRef, () => setShowPopover(false));
+
+  useEffect(() => {
+    if (showPopover) {
+      inputRef.current?.focus();
+    }
+  }, [showPopover]);
+
+  useEffect(() => {
+    setSelectedItem(initialSelectedItem);
+  }, [initialSelectedItem, setSelectedItem]);
+
+  const handleSelect = useCallback(
+    (value: string) => {
+      setSelectedItem(value);
+      setShowPopover(false);
+      setSearchTerm("");
+      if (onSelect) onSelect(value);
+    },
+    [onSelect, setSelectedItem, setShowPopover, setSearchTerm]
+  );
+
+  const handleClear = () => {
+    clearSelected();
+    if (onSelect) onSelect(undefined);
+  };
+
+  useImperativeHandle(ref, () => ({
+    workingDataSource,
+    items,
+    clearSelected,
+    togglePopover,
+    getSelectItems,
+    selectedDisplay,
+    selected: selectedItem,
+  }));
+
+  return (
+    <div className="relative w-full" ref={selectRef} id={id}>
+      <div className="w-full relative">
+        <button
+          className={`${error ? primary["error-border"] : "border"} ${
+            selectStyle["select-button"]
+          }`}
+          onClick={togglePopover}
+          type="button"
+        >
+          {selectedDisplay || placeholder}
+          <Icon elements={upDown} svgClass={iconClass["grey-common"]} />
+        </button>
+        {selectedDisplay && (
+          <button
+            className={selectStyle["selectedDisplay-Button"]}
+            onClick={handleClear}
+          >
+            <Icon elements={x} svgClass={iconClass["grey-common"]} />
+          </button>
+        )}
+        {error && <p className={primary["error-primary"]}>{error}</p>}
+      </div>
+
+      <input type="hidden" name={name} value={selectedItem || ""} readOnly />
+
+      {showPopover && (
+        <div className={popUp["pop-up-style"]}>
+          {showSearch && (
+            <div className={selectStyle["input-parent"]}>
+              <Icon elements={search} svgClass={iconClass["grey-common"]} />
+              <input
+                autoComplete="off"
+                type="text"
+                name="search"
+                id="search"
+                placeholder="Search a value"
+                className="w-full outline-none dark:bg-black"
+                ref={inputRef}
+                value={searchTerm}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  if (onFiltering) onFiltering(e.target.value);
+                }}
+              />
+            </div>
+          )}
+          {filteredItems.length > 0 ? (
+            filteredItems.map(({ value, label }) => (
+              <button
+                key={value}
+                className={selectStyle["filter-button"]}
+                onClick={() => handleSelect(value)}
+              >
+                <Icon
+                  elements={check}
+                  svgClass={`h-4 w-4 fill-none ${
+                    selectedItem === value ? "stroke-gray-500" : ""
+                  }`}
+                />
+                {label}
+              </button>
+            ))
+          ) : (
+            <div className="text-sm text-center">No Data Found</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+Select.displayName = "Select";
+
+const MemoizedSelect = memo(Select);
+export { MemoizedSelect as Select };

package/source/components/select/types.ts

@@ -11,7 +11,7 @@ export type SelectProps = {
   items?: ItemsProps[] | string;
   lazy?: boolean;
   showSearch?: boolean;
-  onSelect?: (selectedItem: string) => void;
+  onSelect?: (selectedItem: string | undefined) => void;
   selectedItem?: string;
   onFiltering?: (searchTerm: string) => void;
 };

package/source/components/spinner/index.tsx

@@ -51,4 +51,4 @@ export const Spinner: React.FC<SpinnerProps> = ({
   } else {
     return null;
   }
-};
+};

package/source/components/toast/Toast.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Toast as ToastType } from "./types";
-import { useToastStore } from "./toastAtom";
+import { useToastContext } from "./ToastContext";
 import Icon from "../icon/Icon";
 import { circleCheck, info, x, xCircle } from "../icon/iconPaths";
 
@@ -9,7 +9,7 @@ interface ToastProps {
 }
 
 const Toast: React.FC<ToastProps> = ({ toast }) => {
-  const { dismissToast } = useToastStore();
+  const { dismissToast } = useToastContext();
   const icons = {
     success: (
       <Icon
@@ -33,7 +33,7 @@ const Toast: React.FC<ToastProps> = ({ toast }) => {
 
   return (
     <div
-      className={`bg-white px-2 py-3 rounded-lg text-sm flex justify-between w-80 m-2 border shadow-lg ${
+      className={`bg-white px-2 py-3 rounded-lg text-sm flex justify-between w-full m-2 border shadow-lg ${
         toast.type === "success"
           ? "text-green-500"
           : toast.type === "error"

package/source/components/toast/ToastContext.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useState } from "react";
+import { Toast } from "./types";
+
+interface ToastContextProps {
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, "id">) => void;
+  dismissToast: (id: number) => void;
+}
+
+const ToastContext = createContext<ToastContextProps | undefined>(undefined);
+
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = (toast: Omit<Toast, "id">) => {
+    const id = Math.floor(Math.random() * 10000);
+    const newToast = { ...toast, id };
+    setToasts((prev) => [newToast, ...prev]);
+    if (toast.timeout) {
+      setTimeout(() => dismissToast(id), toast.timeout);
+    }
+  };
+
+  const dismissToast = (id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, dismissToast }}>
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToastContext = (): ToastContextProps => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToastContext must be used within a ToastProvider");
+  }
+  return context;
+};

package/source/components/toast/index.tsx

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-"use client";
 import React from "react";
-import { useToastStore } from "./toastAtom";
+import { useToastContext } from "./ToastContext";
 import Toast from "./Toast";
 import { ToastPosition } from "./types";
 
@@ -23,7 +22,7 @@ const positionClasses: Record<ToastPosition, string> = {
 };
 
 export const Toasts: React.FC<ToastsProps> = ({ position = "top-right" }) => {
-  const { toasts } = useToastStore();
+  const { toasts } = useToastContext();
 
   return (
     <section

package/source/components/toast/useToast.ts

@@ -1,8 +1,8 @@
 import { ToastOptions } from "./types";
-import { useToastStore } from "./toastAtom";
+import { useToastContext } from "./ToastContext";
 
 const useToast = () => {
-  const { addToast, dismissToast } = useToastStore();
+  const { addToast, dismissToast } = useToastContext();
 
   return {
     addToast: ({

package/source/globalStyle.ts

@@ -7,3 +7,7 @@ export const popUp = {
   "pop-up-style":
     "w-full absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
 };
+
+export const iconClass = {
+  "grey-common": "h-4 w-4 stroke-gray-500 fill-none dark:stroke-white",
+};

package/source/hooks/SelectionHooks/type.ts

@@ -0,0 +1,4 @@
+export type ItemsProps = {
+  value: string;
+  label: string;
+};

package/source/hooks/SelectionHooks/useClickOutside.ts

@@ -0,0 +1,22 @@
+import { useCallback, useEffect } from "react";
+
+export const useClickOutside = <T extends HTMLElement>(
+  ref: React.RefObject<T | null>,
+  callback: () => void
+) => {
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    },
+    [callback, ref]
+  );
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleClickOutside]);
+};

package/source/hooks/SelectionHooks/useMultiSelectState.ts

@@ -0,0 +1,64 @@
+import { useState, useCallback } from "react";
+import { useSelectState } from "./useSelectState";
+import { useSelectData } from "./useSelectData";
+import type { ItemsProps } from "./type";
+
+export const useMultiSelectState = (
+  items: ItemsProps[] | string | undefined,
+  selectedItems: string[] = [],
+  lazy = false,
+  onSelect?: (selectedItems: string[]) => void
+) => {
+  const [selected, setSelected] = useState<string[]>(selectedItems);
+
+  const {
+    showPopover,
+    setShowPopover,
+    workingDataSource,
+    setWorkingDataSource,
+    searchTerm,
+    setSearchTerm,
+    togglePopover,
+  } = useSelectState();
+
+  const { filteredItems, getSelectItems } = useSelectData(
+    items,
+    setWorkingDataSource,
+    workingDataSource,
+    searchTerm,
+    lazy,
+    undefined
+  );
+
+  const handleSelect = useCallback(
+    (value: string) => {
+      const newSelected = selected.includes(value)
+        ? selected.filter((item) => item !== value)
+        : [...selected, value];
+      setSelected(newSelected);
+      onSelect?.(newSelected);
+    },
+    [selected, onSelect]
+  );
+
+  const clearSelected = useCallback(() => {
+    setSelected([]);
+    setShowPopover(false);
+    setSearchTerm("");
+    onSelect?.([]);
+  }, [setShowPopover, setSearchTerm, onSelect]);
+
+  return {
+    showPopover,
+    setShowPopover,
+    workingDataSource,
+    filteredItems,
+    selected,
+    searchTerm,
+    setSearchTerm,
+    handleSelect,
+    togglePopover,
+    clearSelected,
+    getSelectItems,
+  };
+};

package/source/hooks/SelectionHooks/useSelectData.ts

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { getSourceData } from "../../utils";
+import type { ItemsProps } from "./type";
+
+export const useSelectData = (
+  items: ItemsProps[] | string | undefined,
+  setWorkingDataSource: (data: ItemsProps[]) => void,
+  workingDataSource: ItemsProps[],
+  searchTerm: string,
+  lazy: boolean,
+  selectedItem?: string
+) => {
+  const getSelectItems = useCallback(
+    async (itemsApi: string) => {
+      const itemsData = await getSourceData(itemsApi);
+      setWorkingDataSource(itemsData.sourcedata);
+    },
+    [setWorkingDataSource]
+  );
+
+  useEffect(() => {
+    if (!items) {
+      setWorkingDataSource([]);
+      return;
+    }
+
+    if (Array.isArray(items)) {
+      setWorkingDataSource(items);
+    } else if (typeof items === "string") {
+      getSelectItems(items);
+    }
+  }, [items, getSelectItems, setWorkingDataSource]);
+
+  const selectedDisplay = useMemo(() => {
+    if (selectedItem && workingDataSource.length > 0) {
+      const selected = workingDataSource.find(
+        (item) => item.value === selectedItem
+      );
+      return selected ? selected.label : "";
+    }
+    return "";
+  }, [selectedItem, workingDataSource]);
+
+  const filteredItems = useMemo(() => {
+    if (!searchTerm || lazy) return workingDataSource;
+    return workingDataSource.filter((item) =>
+      Object.values(item).some((val) =>
+        val.toString().toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    );
+  }, [workingDataSource, searchTerm, lazy]);
+
+  return {
+    getSelectItems,
+    selectedDisplay,
+    filteredItems,
+  };
+};