gbs-add-block 0.0.21 → 0.0.23-01-beta

package/index.js

@@ -59,6 +59,12 @@ function copyCommonFiles() {
   fs.copySync(utilsSrc, utilsDest, { overwrite: true });
   console.log(`utils.ts copied successfully to ${utilsDest}`);
 
+  // Copy GlobalStyles
+  const globalStyleSrc = path.join(SOURCE_PATH, "..", "globalStyle.ts");
+  const globalStyleDest = path.join(DEST_PATH, "globalStyle.ts");
+  fs.copySync(globalStyleSrc, globalStyleDest, { overwrite: true });
+  console.log(`utils.ts copied successfully to ${globalStyleDest}`);
+
   // Copy icon folder
   const iconSrc = path.join(SOURCE_PATH, "..", "icon");
   const iconDest = path.join(DEST_PATH, "icon");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.21",
+  "version": "0.0.23-01-beta",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/select/index.tsx

@@ -18,15 +18,14 @@ import React, {
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
 import { getSourceData } from "../utils";
-import type { SelectProps } from "./types";
-
-interface ItemsProps {
-  value: string;
-  label: string;
-}
+import type { ItemsProps, SelectProps } from "./types";
+import { selectStyle } from "./style";
+import { popUp, primary } from "../globalStyle";
 
 const Select = forwardRef<any, SelectProps>((props, ref) => {
   const {
+    id = "",
+    name = "",
     placeholder = "Select an Item...",
     items,
     lazy = false,
@@ -34,6 +33,7 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
     onSelect,
     selectedItem: initialSelectedItem,
     error = undefined,
+    onFiltering,
   } = props;
 
   const [showPopover, setShowPopover] = useState(false);
@@ -146,12 +146,12 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
   }));
 
   return (
-    <div className="relative w-full" ref={selectRef}>
+    <div className="relative w-96" ref={selectRef} id={id}>
       <div className="w-full relative">
         <button
-          className={`flex items-center ${
-            error ? "border border-red-600" : "border"
-          } px-4 py-2 w-full justify-between rounded-lg font-medium text-sm dark:bg-black dark:border-white dark:text-white`}
+          className={`${error ? primary["error-border"] : "border"} ${
+            selectStyle["select-button"]
+          }`}
           onClick={togglePopover}
           type="button"
         >
@@ -163,7 +163,7 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
         </button>
         {selectedDisplay && (
           <button
-            className="absolute right-8 top-0 h-full flex items-center px-2 z-20"
+            className={selectStyle["selectedDisplay-Button"]}
             onClick={clearSelected}
           >
             <Icon
@@ -172,13 +172,13 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
             />
           </button>
         )}
-        <p className="text-xs text-red-500">{error && error}</p>
+        <p className={primary["error-primary"]}>{error && error}</p>
       </div>
 
       {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">
+            <div className={selectStyle["input-parent"]}>
               <Icon
                 elements={search}
                 svgClass="stroke-gray-500 fill-none dark:stroke-white"
@@ -192,7 +192,10 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
                 className="w-full outline-none dark:bg-black"
                 ref={inputRef}
                 value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  if (onFiltering) onFiltering(e.target.value);
+                }}
               />
             </div>
           )}
@@ -200,7 +203,7 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
             filteredItems.map(({ value, label }) => (
               <button
                 key={value}
-                className="flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600"
+                className={selectStyle["filter-button"]}
                 onClick={() => handleSelect(value)}
               >
                 <Icon
@@ -222,4 +225,4 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
 });
 
 const MemoizedSelect = memo(Select);
-export { MemoizedSelect as Select };
+export { MemoizedSelect as Select };

package/source/components/select/style.ts

@@ -0,0 +1,10 @@
+export const selectStyle = {
+  "select-button":
+    "flex items-center px-4 py-2 w-full justify-between rounded-lg font-medium text-sm dark:bg-black dark:border-white dark:text-white",
+  "filter-button":
+    "flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600",
+  "input-parent":
+    "flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black",
+  "selectedDisplay-Button":
+    "absolute right-8 top-0 h-full flex items-center px-2 z-20",
+};

package/source/components/select/types.ts

@@ -1,13 +1,17 @@
-interface ItemsProps {
+export type ItemsProps = {
   value: string;
   label: string;
-}
+};
 
 export type SelectProps = {
+  id?: string;
+  name?: string;
+  error?: undefined | string;
   placeholder?: string;
   items?: ItemsProps[] | string;
   lazy?: boolean;
   showSearch?: boolean;
   onSelect?: any;
   selectedItem?: string;
+  onFiltering?: any;
 };

package/source/globalStyle.ts

@@ -0,0 +1,9 @@
+export const primary = {
+  "error-border": "border border-red-600",
+  "error-primary": "text-xs text-red-500",
+};
+
+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",
+};

package/source/index.ts

@@ -1,15 +0,0 @@
-// Re-Export Components here
-export * from "./components/grid/Grid";
-export * from "./components/datepicker";
-export * from "./components/dialog";
-export * from "./components/darkmode";
-export * from "./components/select";
-export * from "./components/input";
-export * from "./components/button";
-export * from "./components/multiselect";
-export * from "./components/spinner";
-export * from "./components/dialog";
-export * from "./components/modal";
-export * from "./components/toast";
-export * from "./components/checkbox";
-export { default as useToast } from "./components/toast/useToast";

package/source/types.ts

@@ -1,108 +0,0 @@
-import { InputHTMLAttributes } from "react";
-
-// Sepecify types for components here
-interface PageSettingsProps {
-  pageNumber: number;
-}
-
-export type GridProps = {
-  dataSource: any[] | string;
-  columns?: any[];
-  pageSettings: PageSettingsProps;
-  enableSearch?: boolean;
-  lazy?: boolean;
-  enableExcelExport?: boolean;
-  excelName?: string;
-  enablePdfExport?: boolean;
-  pdfName?: string;
-  gridContainerClass?: string;
-  gridButtonClass?: string;
-  gridHeaderClass?: string;
-  gridGlobalSearchButtonClass?: string;
-  gridPaginationButtonClass?: string;
-  pdfOptions?: any;
-  isFetching?: boolean;
-  showPagination?: boolean;
-  selectAll?: boolean;
-  onSelectRow?: (value: any) => void;
-  tableHeaderStyle?: string;
-  gridColumnStyleSelectAll?: string;
-  gridColumnStyle?: string;
-};
-
-export type DatePickerProps = {
-  placeholder?: string | undefined;
-  selectedDate?: Date;
-  minDate?: Date | null;
-  maxDate?: Date | null;
-  yearLimitStart?: number;
-  yearLimitEnd?: number;
-  onDateChange?: any;
-};
-
-interface ItemsProps {
-  value: string;
-  label: string;
-}
-
-export type SelectProps = {
-  placeholder?: string;
-  items?: ItemsProps[] | string;
-  lazy?: boolean;
-  showSearch?: boolean;
-  onSelect?: any;
-  selectedItem?: string;
-};
-
-export type InputProps = {
-  OTPField?: boolean;
-  OTPValue?: string;
-  OTPLength?: number;
-  OTPClass?: string;
-  onOTPValueChange?: (value: string) => void;
-} & InputHTMLAttributes<HTMLInputElement>;
-
-export type MultiSelectProps = {
-  placeholder?: string;
-  items?: ItemsProps[] | string;
-  lazy?: boolean;
-  showSearch?: boolean;
-  onSelect?: any;
-  truncate?: boolean;
-  selectedItems?: string[];
-};
-
-export type SpinnerProps = {
-  size?: string;
-  color?: string;
-  fullCircleColor?: string;
-  dotColor?: string;
-  duration?: string;
-  type?: "circle" | "circle-bg" | "dot" | "stroke";
-  strokeColor?: string;
-};
-
-export type ModalProps = {
-  showModal?: boolean;
-  modalTitle?: string;
-  autoclose?: boolean;
-  modalClass?: string;
-  modalContentClass?: string;
-  classModalContent?: string;
-  modalTitleClass?: string;
-  classModalTitle?: string;
-  children?: React.ReactNode;
-};
-
-export type DialogProps = {
-  showDialog?: boolean;
-  dialogMessage?: string;
-  dialogActionOne?: string;
-  dialogActionTwo?: string;
-  onDialogActionOneClick?: () => void;
-  onDialogActionTwoClick?: () => void;
-  dialogClass?: string;
-  dialogContentClass?: string;
-  dialogActionOneStyle?: string;
-  dialogActionTwoStyle?: string;
-};