gbs-add-block 1.2.6 → 1.2.8

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.2.6)
+# GBS Building Blocks 2.0 (v1.2.8)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,9 @@ 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://gramprokit.vercel.app)
 
-## What's New 🎉 (Ver 1.2.6)
+## What's New 🎉 (Ver 1.2.8)
 
-- UI Update (Canditate update for next major change 2.0.0)
+- Canditate update for next major change 2.0.0
 
 ## Authors
 

package/index.cjs

@@ -50,6 +50,7 @@ const copyCommonFiles = async (destPath) => {
   const commonFiles = [
     { src: ["..", "utils.ts"], dest: "utils.ts" },
     { src: ["..", "globalStyle.ts"], dest: "globalStyle.ts" },
+    { src: ["..", "theme.ts"], dest: "theme.ts" },
     { src: ["..", "icon"], dest: "icon" },
   ];
 
@@ -81,7 +82,7 @@ const copyComponent = async (component, destPath) => {
         component === "Grid"
           ? "This Version of Grid will be deprecated soon. Please Install The New Data Grid Component"
           : ""
-      }`
+      }`,
     );
   } catch (error) {
     console.error(`Error installing component ${component}:`, error.message);
@@ -96,12 +97,12 @@ const installComponentWithDependencies = async (component, destPath) => {
 
   // Check which components need to be installed
   const pendingInstalls = Array.from(componentsToInstall).filter(
-    (comp) => !checkComponentExists(comp, destPath)
+    (comp) => !checkComponentExists(comp, destPath),
   );
 
   if (pendingInstalls.length === 0) {
     console.log(
-      `✓ ${component} and all its dependencies are already installed.`
+      `✓ ${component} and all its dependencies are already installed.`,
     );
     return;
   }
@@ -133,12 +134,12 @@ const installMultipleComponents = async (components, destPath) => {
 
   // Filter out already installed components
   const pendingInstalls = Array.from(allComponentsToInstall).filter(
-    (comp) => !checkComponentExists(comp, destPath)
+    (comp) => !checkComponentExists(comp, destPath),
   );
 
   if (pendingInstalls.length === 0) {
     console.log(
-      "✓ All selected components and their dependencies are already installed."
+      "✓ All selected components and their dependencies are already installed.",
     );
     return;
   }
@@ -181,7 +182,7 @@ const interactiveComponentSelector = async () => {
       console.clear();
       console.log("🚀 Component Installer - Interactive Mode");
       console.log(
-        "Use ↑/↓ arrow keys to navigate, SPACE to select/deselect, ENTER to install\n"
+        "Use ↑/↓ arrow keys to navigate, SPACE to select/deselect, ENTER to install\n",
       );
 
       CONFIG.components.forEach((component, index) => {
@@ -215,7 +216,7 @@ const interactiveComponentSelector = async () => {
         case "\u001b[B": // Down arrow
           currentIndex = Math.min(
             CONFIG.components.length - 1,
-            currentIndex + 1
+            currentIndex + 1,
           );
           renderMenu();
           break;
@@ -265,7 +266,7 @@ const parseMultipleComponents = (componentString) => {
 
 const validateComponents = (components) => {
   const invalidComponents = components.filter(
-    (comp) => !CONFIG.components.includes(comp)
+    (comp) => !CONFIG.components.includes(comp),
   );
   if (invalidComponents.length > 0) {
     console.error(`Invalid components: ${invalidComponents.join(", ")}`);
@@ -337,7 +338,7 @@ const main = async () => {
 
   if (!argv.add) {
     console.error(
-      "Please specify a component to install using -a/--add, use -i/--interactive for interactive mode, or -l/--list to see available components"
+      "Please specify a component to install using -a/--add, use -i/--interactive for interactive mode, or -l/--list to see available components",
     );
     process.exit(1);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/button/index.tsx

@@ -7,8 +7,8 @@
 
 import React, { type ButtonHTMLAttributes, type ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
-import { buttonStyles } from "../../globalStyle";
-import type { ComponentSize, ComponentVariant } from "../../theme";
+import { buttonStyles } from "../globalStyle";
+import type { ComponentSize, ComponentVariant } from "../theme";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: ReactNode;

package/source/components/card/index.tsx

@@ -1,6 +1,6 @@
 import React, { type HTMLAttributes, type ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
-import { cardStyles } from "../../globalStyle";
+import { cardStyles } from "../globalStyle";
 
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;

package/source/components/checkbox/index.tsx

@@ -16,7 +16,7 @@ export const Checkbox = ({
     <input
       type="checkbox"
       className={twMerge(
-        "h-5 w-5 cursor-pointer rounded border-slate-300 text-sky-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-55",
+        "h-5 w-5 cursor-pointer rounded border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 text-black dark:text-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-55",
         className
       )}
       {...props}

package/source/components/datagrid/context/GridContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext } from "react";
 import type { GridContextType, GridProps } from "../type";
+import { gridStyles } from "../../globalStyle";
 import {
   useDataSource,
   useColumns,
@@ -18,7 +19,6 @@ export const GridProvider: React.FC<{
   const {
     dataSource,
     columns = [],
-    pageSettings,
     enableSearch = false,
     lazy = false,
     enableExcelExport = false,
@@ -26,18 +26,11 @@ export const GridProvider: React.FC<{
     enablePdfExport = false,
     pdfName = "data",
     pdfOptions = {},
-    gridButtonClass = "px-1 py-2 text-xs rounded bg-zinc-200 dark:bg-zinc-700 cursor-pointer",
     selectAll = false,
     onSelectRow,
     isFetching,
-    tableHeaderStyle = "text-left px-2 py-4 bg-zinc-200 dark:bg-zinc-800",
-    gridContainerClass = "flex flex-col rounded-md overflow-hidden dark:text-white",
     gridColumnStyleSelectAll = "px-4 text-xs",
     gridColumnStyle = "p-2 text-xs",
-    rowChange = () => {},
-    pageStatus = () => {},
-    activeFilterArrayValue,
-    searchParamValue = () => {},
     showTotalPages = false,
     onSearch = () => {},
     onToolbarButtonClick = () => {},
@@ -45,6 +38,29 @@ export const GridProvider: React.FC<{
     initialSearchParam = "",
   } = props;
 
+  // Resolve pageSize with fallbacks
+  const resolvedPageSize = props.pageSize || props.pageSettings?.pageNumber || 10;
+  const resolvedPageSettings = {
+    pageNumber: resolvedPageSize,
+    totalCount: props.pageSettings?.totalCount,
+  };
+
+  // Resolve callback aliases
+  const resolvedRowChange = props.onRowClick || props.rowChange || (() => {});
+  const resolvedPageStatus = props.onPageChange || props.pageStatus || (() => {});
+  const resolvedActiveFilterArrayValue = props.onFilterChange || props.activeFilterArrayValue;
+  const resolvedSearchParamValue = props.onSearchChange || props.searchParamValue || (() => {});
+
+  // Resolve CSS classes using design tokens from theme presets
+  const gridContainerClass = props.gridContainerClass || gridStyles.container;
+  const gridButtonClass = props.gridButtonClass || gridStyles.button;
+  const tableHeaderStyle = props.tableHeaderStyle || gridStyles.tableHeader;
+  const gridToolbarClass = props.gridToolbarClass || gridStyles.toolbar;
+  const gridPaginationClass = props.gridPaginationClass || gridStyles.pagination;
+  const gridRowEvenClass = props.gridRowEvenClass || gridStyles.rowEven;
+  const gridRowOddClass = props.gridRowOddClass || gridStyles.rowOdd;
+  const gridRowSelectedClass = props.gridRowSelectedClass || gridStyles.rowSelected;
+
   // Data source management
   const {
     workingDataSource,
@@ -52,7 +68,7 @@ export const GridProvider: React.FC<{
     fallbackSourceData,
     totalPages,
     setTotalPages,
-  } = useDataSource(dataSource, pageSettings, lazy);
+  } = useDataSource(dataSource, resolvedPageSettings, lazy);
 
   // Column management
   const { workingColumns, setWorkingColumns } = useColumns(
@@ -75,8 +91,7 @@ export const GridProvider: React.FC<{
     totalPages,
     lazy,
     workingDataSource,
-    pageSettings,
-    pageStatus,
+    resolvedPageStatus,
   );
 
   // Search functionality
@@ -86,10 +101,10 @@ export const GridProvider: React.FC<{
     fallbackSourceData,
     dataSource,
     lazy,
-    pageSettings,
+    pageSettings: resolvedPageSettings,
     resetPage,
     setTotalPages,
-    searchParamValue,
+    searchParamValue: resolvedSearchParamValue,
     initialSearchParam,
   });
 
@@ -110,8 +125,8 @@ export const GridProvider: React.FC<{
     fallbackSourceData,
     resetPage,
     setTotalPages,
-    pageSettings,
-    activeFilterArrayValue,
+    pageSettings: resolvedPageSettings,
+    activeFilterArrayValue: resolvedActiveFilterArrayValue,
     lazy,
     initialFilters,
   });
@@ -160,7 +175,8 @@ export const GridProvider: React.FC<{
 
     // Grid settings
     columns,
-    pageSettings,
+    pageSettings: resolvedPageSettings,
+    pageSize: resolvedPageSize,
     enableSearch,
     enableExcelExport,
     enablePdfExport,
@@ -171,9 +187,14 @@ export const GridProvider: React.FC<{
     selectAll,
     tableHeaderStyle,
     gridContainerClass,
+    gridToolbarClass,
+    gridPaginationClass,
+    gridRowEvenClass,
+    gridRowOddClass,
+    gridRowSelectedClass,
     gridColumnStyleSelectAll,
     gridColumnStyle,
-    rowChange,
+    rowChange: resolvedRowChange,
     showTotalPages,
     onSearch,
     onToolbarButtonClick,

package/source/components/datagrid/createTemplate.tsx

@@ -26,7 +26,7 @@ export const createTemplate = (
             type={config.type || "text"}
             className={
               config.className ||
-              "p-1 text-xs outline-none w-full rounded focus:border-b-2 border-blue-600"
+              "p-1 text-xs outline-none w-full rounded focus:border-b-2 border-black dark:border-white dark:bg-zinc-900"
             }
             placeholder={config.placeholder || `Enter ${field}`}
             defaultValue={rowData[field]}
@@ -41,7 +41,7 @@ export const createTemplate = (
             key={`${field}-${rowData.id}`}
             className={
               config.className ||
-              "p-1 w-full text-xs rounded outline-none focus:border-b-2 border-blue-600 dark:bg-zinc-900"
+              "p-1 w-full text-xs rounded outline-none focus:border-b-2 border-black dark:border-white dark:bg-zinc-900"
             }
             defaultValue={rowData[field]}
             onChange={handleSelectChange}

package/source/components/datagrid/hooks/usePagination.ts

@@ -4,13 +4,11 @@ export const usePagination = (
   totalPages: number,
   lazy: boolean,
   dataSource?: any[],
-  pageSettings?: { pageNumber: number },
   pageStatus?: ({ currentPage }: { currentPage: number }) => void
 ) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [pageStart, setPageStart] = useState(0);
   const [pageEnd, setPageEnd] = useState(10);
-  const [prevDataLength, setPrevDataLength] = useState(0);
 
   // Update page range based on current page
   const updatePageRange = useCallback(
@@ -38,12 +36,6 @@ export const usePagination = (
     }
   }, [currentPage, pageStatus]);
 
-  // This will handle the case when dataSource changes
-  // and adjust the current page accordingly in managed workflow
-  useEffect(() => {
-    setPrevDataLength(dataSource?.length || 0);
-  }, [dataSource?.length]);
-
   // Defensive check: if current page is out of bounds due to totalPages shrinking, reset to 0
   useEffect(() => {
     if (totalPages > 0 && currentPage >= totalPages) {

package/source/components/datagrid/hooks/useSearch.ts

@@ -60,9 +60,9 @@ export const useSearch = ({
       if (!lazy) {
         const filteredData = workingDataSource.filter((item: any) =>
           Object.values(item).some((val: any) => {
-            const trimmedVal = val.toString().toLowerCase().trim();
-            const trimmedSearchParam = searchParam.toLowerCase().trim();
-            return trimmedVal.includes(trimmedSearchParam);
+            const trimmedVal = val?.toString()?.toLowerCase()?.trim();
+            const trimmedSearchParam = searchParam?.toLowerCase()?.trim();
+            return trimmedVal?.includes(trimmedSearchParam);
           })
         );
         setWorkingDataSource(filteredData);

package/source/components/datagrid/index.tsx

@@ -17,7 +17,8 @@ const DataGrid = memo(GridComponent, (prevProps, nextProps) => {
   return (
     prevProps.dataSource === nextProps.dataSource &&
     prevProps.columns === nextProps.columns &&
-    prevProps.pageSettings.pageNumber === nextProps.pageSettings.pageNumber &&
+    prevProps.pageSize === nextProps.pageSize &&
+    prevProps.pageSettings?.pageNumber === nextProps.pageSettings?.pageNumber &&
     prevProps.enableSearch === nextProps.enableSearch &&
     prevProps.enablePdfExport === nextProps.enablePdfExport &&
     prevProps.enableExcelExport === nextProps.enableExcelExport

package/source/components/datagrid/layout/GridBody.tsx

@@ -1,4 +1,4 @@
-import React, { act } from "react";
+import React from "react";
 import { useGridContext } from "../context/GridContext";
 import FilterPopup from "./FilterPopup";
 import Icon from "../../icon/Icon";
@@ -24,6 +24,9 @@ const GridBody = () => {
     handleSelectAll,
     handleSelect,
     isRowSelected,
+    gridRowEvenClass,
+    gridRowOddClass,
+    gridRowSelectedClass,
   } = useGridContext();
 
   const renderCell = (rowData: any, column: Column, rowIndex: number) => {
@@ -140,10 +143,10 @@ const GridBody = () => {
                 key={rowIndex}
                 className={
                   isRowSelected(rowData)
-                    ? "bg-blue-100 dark:bg-blue-900"
+                    ? gridRowSelectedClass
                     : rowIndex % 2 === 0
-                    ? "bg-gray-50 dark:bg-zinc-800 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-700"
-                    : "bg-white dark:bg-zinc-900 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-700"
+                    ? gridRowEvenClass
+                    : gridRowOddClass
                 }
                 onClick={() => rowChange(rowData)}
               >

package/source/components/datagrid/layout/GridPagination.tsx

@@ -23,10 +23,11 @@ const Pagination = () => {
     lazy,
     pageSettings,
     showTotalPages,
+    gridPaginationClass,
   } = useGridContext();
 
   return (
-    <div className="w-full flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-zinc-100 dark:bg-zinc-900 gap-2 md:gap-4">
+    <div className={gridPaginationClass}>
       <div className="flex text-xs">
         Showing {currentPage + 1} of {totalPages} pages
         {showTotalPages && (
@@ -76,7 +77,7 @@ const Pagination = () => {
                 className={`hidden md:block px-2 py-1 text-sm rounded-md transition-colors duration-200 ease-in-out ${
                   currentPage === pageStart + i
                     ? "bg-black text-white dark:bg-white dark:text-black"
-                    : "bg-gray-200 dark:bg-zinc-700 hover:bg-gray-300 dark:hover:bg-zinc-600"
+                    : "bg-gray-200 dark:bg-zinc-700 text-black dark:text-white hover:bg-gray-300 dark:hover:bg-zinc-600"
                 }`}
               >
                 {pageStart + i + 1}

package/source/components/datagrid/layout/GridToolbar.tsx

@@ -24,6 +24,7 @@ const GridToolbar = () => {
     gridButtonClass,
     onToolbarButtonClick,
     lazy,
+    gridToolbarClass,
   } = useGridContext();
 
   if (!enableSearch && !enableExcelExport && !enablePdfExport) {
@@ -31,7 +32,7 @@ const GridToolbar = () => {
   }
 
   return (
-    <div className="flex bg-zinc-100 dark:bg-zinc-900 justify-end space-x-2 px-2 py-4">
+    <div className={gridToolbarClass}>
       {/* Search input */}
       {enableSearch && (
         <div className="flex">

package/source/components/datagrid/type.ts

@@ -14,7 +14,8 @@ export interface ActiveFilterArrayValue {
 export type GridProps = {
   dataSource: any[] | string;
   columns?: any[];
-  pageSettings: PageSettingsProps;
+  pageSettings?: PageSettingsProps;
+  pageSize?: number;
   enableSearch?: boolean;
   lazy?: boolean;
   enableExcelExport?: boolean;
@@ -24,6 +25,11 @@ export type GridProps = {
   gridContainerClass?: string;
   gridButtonClass?: string;
   gridHeaderClass?: string;
+  gridToolbarClass?: string;
+  gridPaginationClass?: string;
+  gridRowEvenClass?: string;
+  gridRowOddClass?: string;
+  gridRowSelectedClass?: string;
   gridGlobalSearchButtonClass?: string;
   gridPaginationButtonClass?: string;
   pdfOptions?: any;
@@ -34,10 +40,14 @@ export type GridProps = {
   tableHeaderStyle?: string;
   gridColumnStyleSelectAll?: string;
   gridColumnStyle?: string;
-  rowChange?: any;
+  rowChange?: (rowData: any) => void;
+  onRowClick?: (rowData: any) => void;
   pageStatus?: ({ currentPage }: { currentPage: number }) => void;
+  onPageChange?: ({ currentPage }: { currentPage: number }) => void;
   activeFilterArrayValue?: ActiveFilterArrayValue[] | any;
+  onFilterChange?: (filters: ActiveFilterArrayValue[]) => void;
   searchParamValue?: (value: string) => void;
+  onSearchChange?: (value: string) => void;
   showTotalPages?: boolean;
   onSearch?: (value: string) => void;
   onToolbarButtonClick?: (action: string) => void;
@@ -163,6 +173,7 @@ export interface GridContextType {
   // Grid settings
   columns: any[];
   pageSettings: any;
+  pageSize: number;
   enableSearch: boolean;
   enableExcelExport: boolean;
   enablePdfExport: boolean;
@@ -173,6 +184,11 @@ export interface GridContextType {
   selectAll: boolean;
   tableHeaderStyle: string;
   gridContainerClass: string;
+  gridToolbarClass: string;
+  gridPaginationClass: string;
+  gridRowEvenClass: string;
+  gridRowOddClass: string;
+  gridRowSelectedClass: string;
   gridColumnStyleSelectAll: string;
   gridColumnStyle: string;
   rowChange: (rowData: any) => void;