gbs-add-block 0.0.63 → 0.0.65

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.63)
+# GBS Building Blocks 2.0 (v0.0.65)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +6,10 @@ 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.63)
+## What's New 🎉 (Ver 0.0.65)
 
 - Updated for bug fixes.
-- New component "Skeleton" & "Navbar" Added.
+- New component "Skeleton", "Breadcrumb" & "Navbar" Added.
 - Planned Deprecation of Current Grid Component and Adding Beta version for the New Data Grid.
 
 ## Authors

package/index.js

@@ -27,6 +27,7 @@ const CONFIG = {
     "Skeleton",
     "Navbar",
     "DataGrid",
+    "BreadCrumb",
   ],
   // Define component dependencies
   dependencies: {

package/package.json

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

package/source/components/breadcrumb/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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 from "react";
+import { useLocation } from "@grampro/headless-helpers";
+import Icon from "../icon/Icon";
+import { rightArrow } from "../icon/iconPaths";
+import { BreadcrumbsProps } from "./types";
+
+export const Breadcrumb = ({
+  showHome = true,
+  rootPath = "/",
+  homeLabel = "Home",
+  transformLabel,
+  className = "",
+  activeLinkClass = "font-medium text-gray-900 dark:text-white",
+  inactiveLinkClass = "text-gray-500 hover:text-gray-700",
+}: BreadcrumbsProps) => {
+  const { pathSegments } = useLocation({
+    showHome,
+    rootPath,
+    homeLabel,
+    transformLabel,
+  });
+
+  if (pathSegments.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="flex flex-wrap items-center">
+        {pathSegments.map((segment, index) => {
+          const isLast = index === pathSegments.length - 1;
+          return (
+            <li key={index} className="flex items-center">
+              <>
+                <a
+                  href={segment.path}
+                  className={isLast ? activeLinkClass : inactiveLinkClass}
+                >
+                  {segment.label}
+                </a>
+                <span className="mx-2 text-gray-400">
+                  <Icon
+                    elements={rightArrow}
+                    dimensions={{ width: 14, height: 14 }}
+                    svgClass={
+                      "stroke-black fill-none dark:stroke-white cursor-pointer"
+                    }
+                  />
+                </span>
+              </>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

package/source/components/breadcrumb/types.ts

@@ -0,0 +1,10 @@
+export type BreadcrumbsProps = {
+  homeLabel?: string;
+  showHome?: boolean;
+  transformLabel?: (segment: string) => string;
+  rootPath?: string;
+  className?: string;
+  separator?: string | React.ReactNode;
+  activeLinkClass?: string;
+  inactiveLinkClass?: string;
+};

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

@@ -87,7 +87,7 @@ export const GridProvider: React.FC<{
     onSelectRow,
     isFetching,
     tableHeaderStyle = "text-left px-2 py-4 bg-zinc-200 dark:bg-zinc-800",
-    gridContainerClass = "flex flex-col min-w-screen rounded-md overflow-hidden",
+    gridContainerClass = "flex flex-col rounded-md overflow-hidden",
     gridColumnStyleSelectAll = "px-4 text-xs",
     gridColumnStyle = "p-2 text-xs",
     rowChange = () => {},

package/source/components/datagrid/index.tsx

@@ -9,7 +9,7 @@
  */
 
 import { GridMemoised as GridComponent } from "./layout";
-import React, { memo } from "react";
+import { memo } from "react";
 
 const Grid = memo(GridComponent, (prevProps, nextProps) => {
   // Custom comparison function

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

@@ -148,7 +148,14 @@ const GridBody = () => {
                   </td>
                 )}
                 {workingColumns.map((column, colIndex) => (
-                  <td key={colIndex} className={gridColumnStyle}>
+                  <td
+                    key={colIndex}
+                    className={gridColumnStyle}
+                    style={{
+                      width: column.width ? `${column.width}px` : "auto",
+                      maxWidth: column.width ? `${column.width}px` : "auto",
+                    }}
+                  >
                     {renderCell(rowData, column, rowIndex)}
                   </td>
                 ))}

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

@@ -23,7 +23,7 @@ const Pagination = () => {
   } = useGridPagination();
 
   return (
-    <div className="flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-white dark:bg-zinc-900 gap-2 md:gap-4">
+    <div className="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="flex flex-1 space-x-1">
         <button onClick={goToFirstPage} disabled={currentPage === 0}>
           <Icon

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

@@ -27,7 +27,34 @@ const GridToolbar = () => {
   }
 
   return (
-    <div className="flex bg-white dark:bg-zinc-900 justify-end space-x-2 px-2 py-4">
+    <div className="flex bg-zinc-100 dark:bg-zinc-900 justify-end space-x-2 px-2 py-4">
+      {/* Search input */}
+      {enableSearch && (
+        <div className="flex">
+          <input
+            type="search"
+            value={searchParam}
+            onChange={handleSearchInput}
+            placeholder="Search..."
+            className="outline-none p-2 text-xs rounded-lg max-sm:hidden dark:bg-zinc-800 bg-zinc-200"
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              if (event.key === "Enter") {
+                handleSearch(searchParam);
+              }
+            }}
+          />
+          <button
+            className="rounded-lg w-10 flex items-center justify-center cursor-pointer"
+            onClick={() => handleSearch(searchParam)}
+          >
+            <Icon
+              elements={search}
+              svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
+            />{" "}
+          </button>
+        </div>
+      )}
+
       {/* Export buttons */}
       {(enableExcelExport || enablePdfExport) && (
         <div className="flex space-x-2">
@@ -59,33 +86,6 @@ const GridToolbar = () => {
           )}
         </div>
       )}
-
-      {/* Search input */}
-      {enableSearch && (
-        <div className="flex">
-          <input
-            type="search"
-            value={searchParam}
-            onChange={handleSearchInput}
-            placeholder="Search..."
-            className="outline-none p-2 text-xs font-normal  rounded-lg max-sm:hidden dark:bg-zinc-800 bg-zinc-100"
-            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-              if (event.key === "Enter") {
-                handleSearch(searchParam);
-              }
-            }}
-          />
-          <button
-            className="rounded-lg w-10 flex items-center justify-center "
-            onClick={() => handleSearch(searchParam)}
-          >
-            <Icon
-              elements={search}
-              svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
-            />{" "}
-          </button>
-        </div>
-      )}
     </div>
   );
 };