gbs-add-block 0.0.61 → 0.0.63

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.61)
+# GBS Building Blocks 2.0 (v0.0.63)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ 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.61)
+## What's New 🎉 (Ver 0.0.63)
 
 - Updated for bug fixes.
 - New component "Skeleton" & "Navbar" Added.

package/index.js

@@ -77,7 +77,12 @@ const copyComponent = async (component, destPath) => {
     }
 
     await fs.copy(componentSrc, componentDest, { overwrite: true });
-    console.log(`✓ Component ${component} installed successfully`);
+    console.log(
+      `✓ Component ${component} installed successfully ${
+        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);
     process.exit(1);
@@ -96,10 +101,7 @@ const installComponentWithDependencies = async (component, destPath) => {
 
   if (pendingInstalls.length === 0) {
     console.log(
-      `✓ ${component} and all its dependencies are already installed. ${
-        component === "Grid" &&
-        "This Version of Grid will be deprecated soon. Please Install The New Data Grid Component"
-      }`
+      `✓ ${component} and all its dependencies are already installed.`
     );
     return;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "description": "React Component Library",
   "files": [
     "index.js",

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

@@ -1,152 +1,3 @@
-// import React from "react";
-// import Icon from "../../icon/Icon";
-// import { listFilter } from "../../icon/iconPaths";
-// import FilterPopup from "./FilterPopup";
-// import { Column, GridBodyProps } from "../type";
-
-// const GridBody: React.FC<GridBodyProps> = ({
-//   selectAll,
-//   handleSelectAll,
-//   workingColumns,
-//   tableHeaderStyle,
-//   toggleFilterPopup,
-//   activeFilterArray,
-//   handleFilterAction,
-//   workingDataSource,
-//   isFetching,
-//   currentPage,
-//   pageSettings,
-//   gridColumnStyleSelectAll,
-//   isRowSelected,
-//   handleSelect,
-//   gridColumnStyle,
-//   rowChange,
-// }) => {
-//   const renderCell = (rowData: any, column: Column, rowIndex: number) => {
-//     const cellValue = rowData[column.field];
-
-//     if (column.template) {
-//       return (
-//         <column.template
-//           rowData={rowData}
-//           rowIndex={rowIndex + currentPage * pageSettings.pageNumber}
-//           rowChange={(changes: any) => rowChange?.(changes)}
-//         />
-//       );
-//     }
-
-//     if (column.tooltip) {
-//       return (
-//         <span title={cellValue?.toString()}>
-//           {cellValue && cellValue.length > 10
-//             ? `${cellValue.slice(0, 10)}...`
-//             : cellValue}
-//         </span>
-//       );
-//     }
-
-//     return cellValue;
-//   };
-
-//   return (
-//     <div className="overflow-x-auto">
-//       <table className="min-w-full">
-//         <thead>
-//           <tr>
-//             {selectAll && (
-//               <th className="text-left border-b border-t bg-gray-50 px-4 py-4 dark:bg-gray-700 dark:text-white">
-//                 <input type="checkbox" onChange={handleSelectAll} />
-//               </th>
-//             )}
-//             {workingColumns.map((column, colIndex) => (
-//               <th
-//                 key={colIndex}
-//                 className={tableHeaderStyle}
-//                 style={{ width: column.width ? `${column.width}px` : "auto" }}
-//               >
-//                 <div className="flex items-center relative">
-//                   {column.headerText || column.field}
-//                   {column.filter && !column.template && (
-//                     <>
-//                       <button onClick={() => toggleFilterPopup(colIndex)}>
-//                         <Icon
-//                           dimensions={{ width: "12", height: "12" }}
-//                           elements={listFilter}
-//                           svgClass={`ml-2 fill-none dark:stroke-white ${
-//                             activeFilterArray.some(
-//                               (filter) => filter.filterColumn === column.field
-//                             )
-//                               ? "stroke-red-400"
-//                               : "stroke-black"
-//                           }`}
-//                         />
-//                       </button>
-//                       <FilterPopup
-//                         show={column.showFilterPopup ?? false}
-//                         columnHeader={column.field}
-//                         filterAction={(action: any) =>
-//                           handleFilterAction(action, colIndex)
-//                         }
-//                       />
-//                     </>
-//                   )}
-//                 </div>
-//               </th>
-//             ))}
-//           </tr>
-//         </thead>
-//         <tbody>
-//           {workingDataSource.length > 0 && !isFetching ? (
-//             workingDataSource
-//               .slice(
-//                 currentPage * pageSettings.pageNumber,
-//                 (currentPage + 1) * pageSettings.pageNumber
-//               )
-//               .map((rowData, rowIndex) => (
-//                 <tr
-//                   key={rowIndex}
-//                   className="hover:bg-gray-50 dark:hover:bg-gray-900 cursor-pointer"
-//                 >
-//                   {selectAll && (
-//                     <td className={gridColumnStyleSelectAll}>
-//                       <input
-//                         type="checkbox"
-//                         checked={isRowSelected(rowData)}
-//                         onChange={() => handleSelect(rowData)}
-//                       />
-//                     </td>
-//                   )}
-//                   {workingColumns.map((column, colIndex) => (
-//                     <td
-//                       key={colIndex}
-//                       className={gridColumnStyle}
-//                       style={{
-//                         width: column.width ? `${column.width}px` : "auto",
-//                       }}
-//                     >
-//                       {renderCell(rowData, column, rowIndex)}
-//                     </td>
-//                   ))}
-//                 </tr>
-//               ))
-//           ) : (
-//             <tr>
-//               <td
-//                 colSpan={workingColumns.length}
-//                 className="text-center p-4 border-b text-sm"
-//               >
-//                 {isFetching ? "Fetching Data Please Wait..." : "No Data Found"}
-//               </td>
-//             </tr>
-//           )}
-//         </tbody>
-//       </table>
-//     </div>
-//   );
-// };
-
-// export default GridBody;
-
 import React from "react";
 import { useGridContext } from "../context/GridContext";
 import { useGridFilter, useGridRowSelection } from "../hooks/GridHooks";
@@ -281,8 +132,8 @@ const GridBody = () => {
                   isRowSelected(rowData)
                     ? "bg-blue-100 dark:bg-blue-900"
                     : rowIndex % 2 === 0
-                    ? "bg-gray-50 dark:bg-zinc-800"
-                    : "bg-white dark:bg-zinc-900"
+                    ? "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"
                 }
                 onClick={() => rowChange(rowData)}
               >

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

@@ -1,125 +1,3 @@
-// import React from "react";
-// import Icon from "../../icon/Icon";
-// import {
-//   leftArrow,
-//   leftArrows,
-//   rightArrow,
-//   rightArrows,
-// } from "../../icon/iconPaths";
-// import { PaginationProps } from "../type";
-
-// export default function Pagination({
-//   goToFirstPage,
-//   currentPage,
-//   prevPage,
-//   pageStart,
-//   goToPage,
-//   workingDataSource,
-//   pageEnd,
-//   totalPages,
-//   nextPage,
-//   goToEndPage,
-// }: PaginationProps) {
-//   return (
-//     <div className="flex p-2 justify-between dark:text-white text-xs mt-4">
-//       <div className="flex gap-4">
-//         <button
-//           onClick={goToFirstPage}
-//           className={`${
-//             currentPage === 0
-//               ? "text-gray-200 dark:text-gray-700 cursor-pointer"
-//               : ""
-//           }`}
-//         >
-//           <Icon
-//             elements={leftArrows}
-//             svgClass={`${
-//               currentPage === 0
-//                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-pointer"
-//                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
-//             }`}
-//           />
-//         </button>
-//         <button onClick={prevPage}>
-//           <Icon
-//             elements={leftArrow}
-//             svgClass={`${
-//               currentPage === 0
-//                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-pointer"
-//                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
-//             }`}
-//           />
-//         </button>
-//         <div className="flex flex-row gap-3 items-center">
-//           {pageStart > 0 && (
-//             <button
-//               className="p-1 w-5 h-5 flex items-center justify-center rounded-full cursor-pointer"
-//               onClick={() => goToPage(pageStart - 1)}
-//             >
-//               ...
-//             </button>
-//           )}
-//           {workingDataSource.length > 0 &&
-//             Array.from({ length: pageEnd - pageStart }).map((_, i) => (
-//               <button
-//                 key={i}
-//                 onClick={() => goToPage(pageStart + i)}
-//                 className={`${
-//                   pageStart + i === currentPage
-//                     ? "font-bold text-white p-2 h-6 bg-black flex items-center justify-center rounded-md w-auto dark:bg-white dark:text-black"
-//                     : ""
-//                 }`}
-//               >
-//                 {pageStart + i + 1}
-//               </button>
-//             ))}
-//           {pageEnd < totalPages && (
-//             <button onClick={() => goToPage(pageEnd)}>...</button>
-//           )}
-//         </div>
-//         <button
-//           onClick={nextPage}
-//           className={`${
-//             currentPage === totalPages - 1 || workingDataSource.length <= 0
-//               ? "text-gray-200 dark:text-gray-700 cursor-pointer"
-//               : ""
-//           }`}
-//         >
-//           <Icon
-//             elements={rightArrow}
-//             svgClass={`${
-//               currentPage === totalPages - 1 || workingDataSource.length <= 0
-//                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-pointer"
-//                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
-//             }`}
-//           />
-//         </button>
-//         <button
-//           onClick={goToEndPage}
-//           className={`${
-//             currentPage === totalPages - 1 || workingDataSource.length <= 0
-//               ? "text-gray-200 dark:text-gray-700 cursor-pointer"
-//               : ""
-//           }`}
-//         >
-//           <Icon
-//             elements={rightArrows}
-//             svgClass={`${
-//               currentPage === totalPages - 1 || workingDataSource.length <= 0
-//                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-pointer"
-//                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
-//             }`}
-//           />
-//         </button>
-//       </div>
-//       <div className="flex text-xs">
-//         {currentPage + 1} of {totalPages} pages ({workingDataSource.length})
-//         items
-//       </div>
-//     </div>
-//   );
-// }
-
 import React from "react";
 import { useGridPagination } from "../hooks/GridHooks";
 import Icon from "../../icon/Icon";

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

@@ -1,14 +1,3 @@
-/**
- * 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.
- * Extended Documentation for Grid can be found at
- * https://psychedelic-step-e70.notion.site/Data-GRID-by-GBS-R-D-20ff97c899d24bc590215a6196435fa3
- */
-
-"use client";
-
 import React, { forwardRef, useImperativeHandle } from "react";
 import type { GridProps } from "../type";
 import Pagination from "./GridPagination";