gbs-add-block 0.0.64 → 0.0.66

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.64)
+# 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.64)
+## 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,25 +27,17 @@ const CONFIG = {
     "Skeleton",
     "Navbar",
     "DataGrid",
+    "BreadCrumb",
   ],
   // Define component dependencies
   dependencies: {
     FormRenderer: ["Select", "MultiSelect", "Input", "DatePicker"],
   },
-  frameworks: {
-    next: {
-      name: "Next.js",
-      path: ["app", "component-lib"],
-    },
-    vite: {
-      name: "Vite",
-      path: ["src", "component-lib"],
-    },
-  },
   docs: "https://blackmax-designs.gitbook.io/building-block-v2.0",
 };
 
 const SOURCE_PATH = path.join(__dirname, "source", "components");
+const DEFAULT_DEST_PATH = path.join(process.cwd(), "component-lib");
 
 const copyCommonFiles = async (destPath) => {
   const commonFiles = [
@@ -79,8 +71,9 @@ const copyComponent = async (component, destPath) => {
     await fs.copy(componentSrc, componentDest, { overwrite: true });
     console.log(
       `✓ Component ${component} installed successfully ${
-        component === "Grid" &&
-        "This Version of Grid will be deprecated soon. Please Install The New Data Grid Component"
+        component === "Grid"
+          ? "This Version of Grid will be deprecated soon. Please Install The New Data Grid Component"
+          : ""
       }`
     );
   } catch (error) {
@@ -121,24 +114,6 @@ const installComponentWithDependencies = async (component, destPath) => {
   console.log(`\nFor documentation visit: ${CONFIG.docs}`);
 };
 
-const detectFramework = () => {
-  // Check for Next.js
-  if (
-    fs.existsSync(path.join(process.cwd(), "next.config.ts")) ||
-    fs.existsSync(path.join(process.cwd(), "next.config.js"))
-  ) {
-    return "next";
-  }
-  // Check for Vite
-  if (
-    fs.existsSync(path.join(process.cwd(), "vite.config.js")) ||
-    fs.existsSync(path.join(process.cwd(), "vite.config.ts"))
-  ) {
-    return "vite";
-  }
-  return null;
-};
-
 const main = async () => {
   const argv = yargs(hideBin(process.argv))
     .option("add", {
@@ -146,11 +121,6 @@ const main = async () => {
       describe: "Component to install",
       type: "string",
     })
-    .option("framework", {
-      alias: "f",
-      describe: "Framework to use (next or vite)",
-      type: "string",
-    })
     .option("list", {
       alias: "l",
       describe: "List available components",
@@ -184,28 +154,8 @@ const main = async () => {
     process.exit(1);
   }
 
-  // Detect or get framework
-  let framework = argv.framework;
-  if (!framework) {
-    framework = detectFramework();
-    if (!framework) {
-      console.error(
-        "Could not detect framework. Please specify using -f or --framework"
-      );
-      process.exit(1);
-    }
-  }
-
-  if (!CONFIG.frameworks[framework]) {
-    console.error(`Unsupported framework: ${framework}`);
-    process.exit(1);
-  }
-
-  // Create destination directory
-  const destPath = path.join(
-    process.cwd(),
-    ...CONFIG.frameworks[framework].path
-  );
+  // Create destination directory in project root
+  const destPath = DEFAULT_DEST_PATH;
   await fs.ensureDir(destPath);
 
   // Copy common files if they don't exist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "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;
+};