gbs-add-block 1.2.5 → 1.2.7

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.2.5)
+# GBS Building Blocks 2.0 (v1.2.7)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +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.5)
+## What's New 🎉 (Ver 1.2.7)
 
-- Bar Chart Improvement
-- Data Grid Style Update
+- UI Update (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" },
   ];
 

package/package.json

@@ -1,30 +1,36 @@
-{
-  "name": "gbs-add-block",
-  "version": "1.2.5",
-  "description": "React Component Library",
-  "type": "module",
-  "files": [
-    "index.cjs",
-    "source"
-  ],
-  "engines": {
-    "node": ">=17"
-  },
-  "bin": {
-    "gbs-add-block": "index.cjs"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "Anandhu Remanan",
-  "license": "ISC",
-  "dependencies": {
-    "fs-extra": "^11.0.4",
-    "path": "^0.12.7",
-    "yargs": "^17.7.2"
-  },
-  "devDependencies": {
-    "@types/fs-extra": "^11.0.4"
-  }
-}
+{
+  "name": "gbs-add-block",
+  "version": "1.2.7",
+  "description": "React Component Library",
+  "type": "module",
+  "files": [
+    "index.cjs",
+    "source"
+  ],
+  "engines": {
+    "node": ">=17"
+  },
+  "bin": {
+    "gbs-add-block": "index.cjs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Anandhu Remanan",
+  "license": "ISC",
+  "dependencies": {
+    "fs-extra": "^11.0.4",
+    "path": "^0.12.7",
+    "yargs": "^17.7.2",
+    "@grampro/headless-helpers": "^1.0.21",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/source/components/button/index.tsx

@@ -1,25 +1,42 @@
-/**
- * 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, { type ButtonHTMLAttributes, type ReactNode } from "react";
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children?: ReactNode;
-  buttonClass?: string;
-}
-
-export const Button = ({
-  children,
-  buttonClass = "px-2 py-1 bg-black text-white rounded-md hover:bg-gray-700",
-  ...props
-}: ButtonProps) => {
-  return (
-    <button className={buttonClass} {...props}>
-      {children}
-    </button>
-  );
+/**
+ * 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, { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import { buttonStyles } from "../globalStyle";
+import type { ComponentSize, ComponentVariant } from "../theme";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+  variant?: ComponentVariant;
+  size?: ComponentSize;
+  buttonClass?: string;
+}
+
+export const Button = ({
+  children,
+  variant = "primary",
+  size = "md",
+  buttonClass,
+  className,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={twMerge(
+        buttonStyles.base,
+        buttonStyles.sizes[size],
+        buttonStyles.variants[variant],
+        className,
+        buttonClass
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
 };

package/source/components/card/index.tsx

@@ -1,10 +1,31 @@
-import React, { type ReactNode } from "react";
-
-interface CardProps {
-  children?: ReactNode;
-  cardClass?: string;
-}
-
-export function Card({ children, cardClass = "shadow-md rounded-xl p-4" }: CardProps) {
-  return <div className={cardClass}>{children}</div>;
+import React, { type HTMLAttributes, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import { cardStyles } from "../globalStyle";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  cardClass?: string;
+  interactive?: boolean;
+}
+
+export function Card({
+  children,
+  cardClass,
+  className,
+  interactive = false,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={twMerge(
+        cardStyles.base,
+        interactive ? cardStyles.interactive : "",
+        className,
+        cardClass
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
 }

package/source/components/checkbox/index.tsx

@@ -1,16 +1,25 @@
-/**
- * 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, { type InputHTMLAttributes } from "react";
-
-export const Checkbox = ({
-  ...props
-}: InputHTMLAttributes<HTMLInputElement>) => {
-  return (
-    <input type="checkbox" className="w-5 h-5 cursor-pointer" {...props} />
-  );
+/**
+ * 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, { type InputHTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export const Checkbox = ({
+  className,
+  ...props
+}: InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <input
+      type="checkbox"
+      className={twMerge(
+        "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;

package/source/components/datepicker/index.tsx

@@ -325,14 +325,14 @@ export const DatePicker = ({
                     key={index}
                     onClick={() => !isDisabled && selectDate(day)}
                     disabled={isDisabled}
-                    className={`text-center text-xs p-1 w-8 h-8 cursor-pointer rounded-md hover:bg-gray-200 transition duration-150 ease-in-out ${
+                    className={`text-center text-xs p-1 w-8 h-8 cursor-pointer rounded-md transition duration-150 ease-in-out ${
                       isSelected
-                        ? "bg-black text-white hover:bg-gray-800 dark:bg-zinc-500"
-                        : ""
+                        ? "bg-black text-white hover:bg-zinc-900 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
+                        : "hover:bg-gray-200 dark:hover:bg-zinc-800"
                     } ${
                       isDisabled
-                        ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                        : "hover:bg-gray-200"
+                        ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-zinc-900 dark:text-zinc-600"
+                        : ""
                     }`}
                   >
                     {day.getDate()}
@@ -345,7 +345,7 @@ export const DatePicker = ({
             <button
               type="button"
               onClick={goToToday}
-              className="text-black hover:text-blue-600 transition duration-150 ease-in-out dark:text-gray-500"
+              className="text-black hover:text-zinc-650 transition duration-150 ease-in-out dark:text-zinc-400 dark:hover:text-zinc-200 font-semibold"
             >
               Today
             </button>
@@ -362,3 +362,4 @@ export const DatePicker = ({
     </div>
   );
 };
+