gbs-add-block 0.0.58 → 0.0.60

package/README.md

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

package/index.js

@@ -25,6 +25,7 @@ const CONFIG = {
     "MaterialInput",
     "ContextMenu",
     "Skeleton",
+    "Navbar",
   ],
   // Define component dependencies
   dependencies: {

package/package.json

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

package/source/components/grid/Grid.tsx

@@ -421,6 +421,11 @@ export const GridMemoised = forwardRef((props: GridProps, ref) => {
                   onChange={handleSearchInput}
                   placeholder="search"
                   className="outline-none p-2 text-sm font-normal bg-gray-50 rounded-lg max-sm:hidden dark:bg-black dark:border dark:text-white"
+                  onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+                    if (event.key === "Enter") {
+                      handleSearch(searchParam);
+                    }
+                  }}
                 />
                 <button
                   className="bg-white border rounded-lg text-black w-10 flex items-center justify-center dark:bg-black dark:text-white"

package/source/components/navbar/AuthSection.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { AuthSectionProps } from "./types";
+
+const AuthSection: React.FC<AuthSectionProps> = ({
+  showAuthButtons,
+  authState,
+  userProfile,
+  variant,
+  onLogin,
+  onSignup,
+  onLogout,
+  onProfileClick,
+}) => {
+  if (!showAuthButtons) return null;
+
+  if (authState === "loggedIn" && userProfile) {
+    return (
+      <div className="ml-4 relative">
+        <button
+          onClick={onProfileClick}
+          className="flex items-center text-sm focus:outline-none"
+        >
+          {userProfile.avatar ? (
+            <img
+              className="h-8 w-8 rounded-full"
+              src={userProfile.avatar}
+              alt={userProfile.name}
+            />
+          ) : (
+            <div className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
+              {userProfile.name.charAt(0).toUpperCase()}
+            </div>
+          )}
+          <span className="ml-2 hidden md:block">{userProfile.name}</span>
+          <svg
+            className="ml-1 h-4 w-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </button>
+        <div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 hidden">
+          <a
+            href="/profile"
+            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+          >
+            Your Profile
+          </a>
+          <a
+            href="/settings"
+            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+          >
+            Settings
+          </a>
+          <button
+            onClick={onLogout}
+            className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+          >
+            Sign out
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="md:ml-4 mt-4 md:mt-0 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
+      <button
+        onClick={onLogin}
+        className={`
+          px-4 py-2 text-sm font-medium rounded-md
+          ${
+            variant === "dark"
+              ? "text-white hover:bg-gray-700"
+              : "text-blue-600 hover:bg-blue-50"
+          }
+        `}
+      >
+        Log in
+      </button>
+      <button
+        onClick={onSignup}
+        className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
+      >
+        Sign up
+      </button>
+    </div>
+  );
+};
+
+export default AuthSection;

package/source/components/navbar/MobileToggle.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { MobileToggleProps } from "./types";
+
+const MobileToggle: React.FC<MobileToggleProps> = ({ isOpen, toggleMenu }) => {
+  return (
+    <div className="block md:hidden">
+      <button
+        className="navbar-toggle flex items-center px-3 py-2 border rounded"
+        onClick={toggleMenu}
+      >
+        <svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
+          {isOpen ? (
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          ) : (
+            <path
+              fillRule="evenodd"
+              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+              clipRule="evenodd"
+            />
+          )}
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+export default MobileToggle;

package/source/components/navbar/NavItemComponent.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { NavItem, NavItemComponentProps } from "./types";
+
+const NavItemComponent: React.FC<NavItemComponentProps> = ({
+  items,
+  isMobile,
+  activeSubmenu,
+  toggleSubmenu,
+  variant,
+}) => {
+  const renderNavItems = (navItems: NavItem[], isSubmenu: boolean = false) => {
+    return navItems.map((item) => {
+      const hasChildren = item.children && item.children.length > 0;
+
+      if (item.customComponent) {
+        return (
+          <li
+            key={item.id}
+            className={`${isMobile ? "block w-full" : "relative"} ${
+              isSubmenu ? "w-full" : ""
+            }`}
+          >
+            {item.customComponent}
+          </li>
+        );
+      }
+
+      return (
+        <li
+          key={item.id}
+          className={`${isMobile ? "block w-full" : "relative"} ${
+            isSubmenu ? "w-full" : ""
+          }`}
+        >
+          {hasChildren ? (
+            <>
+              <button
+                onClick={(e) => toggleSubmenu(item.id, e)}
+                className={`
+                  flex items-center justify-between px-3 py-2 rounded-md
+                  ${item.highlight ? "font-medium text-blue-600" : ""}
+                  ${
+                    isMobile
+                      ? "w-full text-left"
+                      : "hover:bg-opacity-10 hover:bg-gray-200"
+                  }
+                `}
+              >
+                <span className="flex items-center">
+                  {item.icon && <span className="mr-2">{item.icon}</span>}
+                  {item.label}
+                </span>
+                <svg
+                  className={`ml-1 h-4 w-4 transition-transform ${
+                    activeSubmenu === item.id ? "rotate-180" : ""
+                  }`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+              <div
+                className={`
+                  ${
+                    isMobile
+                      ? "pl-4 border-l border-gray-200"
+                      : "absolute left-0 min-w-max shadow-lg rounded-md py-2 bg-white z-50"
+                  }
+                  ${
+                    variant === "dark" && !isMobile
+                      ? "bg-gray-800 text-white"
+                      : ""
+                  }
+                  ${activeSubmenu === item.id ? "block" : "hidden"}
+                  ${!isMobile ? "mt-1" : ""}
+                `}
+              >
+                <ul className="w-full">
+                  {renderNavItems(item.children || [], true)}
+                </ul>
+              </div>
+            </>
+          ) : (
+            <a
+              href={item.href}
+              className={`
+                flex items-center px-3 py-2 rounded-md
+                ${item.highlight ? "font-medium text-blue-600" : ""}
+                ${
+                  isMobile
+                    ? "block w-full"
+                    : "hover:bg-opacity-10 hover:bg-gray-200"
+                }
+              `}
+            >
+              {item.icon && <span className="mr-2">{item.icon}</span>}
+              {item.label}
+            </a>
+          )}
+        </li>
+      );
+    });
+  };
+
+  return (
+    <ul className="md:flex md:space-x-1 flex-col md:flex-row">
+      {renderNavItems(items)}
+    </ul>
+  );
+};
+
+export default NavItemComponent;

package/source/components/navbar/SearchBar.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback } from "react";
+import { SearchBarProps } from "./types";
+
+const SearchBar: React.FC<SearchBarProps> = ({
+  variant,
+  searchQuery,
+  setSearchQuery,
+  onSearch,
+}) => {
+  const handleSearch = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      if (onSearch) {
+        onSearch(searchQuery);
+      }
+    },
+    [searchQuery, onSearch]
+  );
+
+  return (
+    <form onSubmit={handleSearch} className="relative md:ml-4 mt-3 md:mt-0">
+      <input
+        type="search"
+        placeholder="Search..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className={`
+          w-full md:w-auto pl-10 pr-4 py-2 rounded-md text-sm focus:outline-none
+          ${
+            variant === "dark"
+              ? "bg-gray-800 text-white"
+              : "bg-gray-100 text-gray-800"
+          }
+        `}
+      />
+      <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
+        <svg
+          className="h-4 w-4 text-gray-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </div>
+    </form>
+  );
+};
+
+export default SearchBar;

package/source/components/navbar/helperFunctions.ts

@@ -0,0 +1,27 @@
+const getThemeClasses = (variant: string) => {
+  switch (variant) {
+    case "dark":
+      return "bg-gray-900 text-white shadow-md";
+    case "colored":
+      return "bg-blue-600 text-white shadow-md";
+    default:
+      return "bg-white text-gray-800 shadow-md";
+  }
+};
+
+const getPositionClasses = (position: string) => {
+  switch (position) {
+    case "fixed":
+      return "fixed top-0 left-0 right-0 z-50";
+    case "sticky":
+      return "sticky top-0 z-40";
+    default:
+      return "";
+  }
+};
+
+const getContainerClasses = (containerType: string) => {
+  return containerType === "contained" ? "max-w-6xl mx-auto px-4" : "px-4";
+};
+
+export { getContainerClasses, getPositionClasses, getThemeClasses };

package/source/components/navbar/index.tsx

@@ -0,0 +1,156 @@
+/**
+ * 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, { useState, useEffect, useCallback, memo } from "react";
+import NavItemComponent from "./NavItemComponent";
+import SearchBar from "./SearchBar";
+import AuthSection from "./AuthSection";
+import MobileToggle from "./MobileToggle";
+import { NavbarProps } from "./types";
+import {
+  getContainerClasses,
+  getPositionClasses,
+  getThemeClasses,
+} from "./helperFunctions";
+
+const Navbar: React.FC<NavbarProps> = memo(
+  ({
+    brand,
+    items,
+    variant = "light",
+    position = "sticky",
+    containerType = "contained",
+    showSearchBar = false,
+    showAuthButtons = false,
+    authState = "loggedOut",
+    userProfile,
+    rightSection,
+    leftSection,
+    centerSection,
+    onSearch,
+    onLogin,
+    onSignup,
+    onLogout,
+    onProfileClick,
+  }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [scrolled, setScrolled] = useState(false);
+    const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
+
+    useEffect(() => {
+      if (position !== "static") {
+        const handleScroll = () => {
+          setScrolled(window.scrollY > 20);
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+      }
+    }, [position]);
+
+    useEffect(() => {
+      if (isOpen) {
+        const handleClickOutside = (e: MouseEvent) => {
+          const target = e.target as HTMLElement;
+          if (
+            !target.closest(".navbar-menu") &&
+            !target.closest(".navbar-toggle")
+          ) {
+            setIsOpen(false);
+          }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () =>
+          document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, [isOpen]);
+
+    const toggleMenu = useCallback(() => {
+      setIsOpen((prev) => !prev);
+    }, []);
+
+    const toggleSubmenu = useCallback((id: string, e: React.MouseEvent) => {
+      e.preventDefault();
+      setActiveSubmenu((prev) => (prev === id ? null : id));
+    }, []);
+
+    return (
+      <nav
+        className={`${getThemeClasses(variant)} ${getPositionClasses(
+          position
+        )} ${scrolled ? "shadow-md" : ""} transition-shadow duration-300`}
+      >
+        <div
+          className={`${getContainerClasses(
+            containerType
+          )} flex flex-wrap items-center justify-between py-3`}
+        >
+          <div className="flex items-center flex-shrink-0 mr-6">
+            {leftSection || (
+              <a href={brand.href} className="flex items-center">
+                {brand.logo && <div className="mr-2">{brand.logo}</div>}
+                <span className="text-lg font-semibold">{brand.name}</span>
+              </a>
+            )}
+          </div>
+
+          <MobileToggle isOpen={isOpen} toggleMenu={toggleMenu} />
+
+          {centerSection && (
+            <div className="hidden md:block flex-grow-0 order-3 md:order-2">
+              {centerSection}
+            </div>
+          )}
+
+          <div
+            className={`navbar-menu w-full md:flex md:items-center md:w-auto order-last md:order-3 ${
+              isOpen ? "block" : "hidden"
+            } md:block`}
+          >
+            <div className="text-sm md:flex-grow mt-4 md:mt-0">
+              <NavItemComponent
+                items={items}
+                isMobile={!isOpen ? false : true}
+                activeSubmenu={activeSubmenu}
+                toggleSubmenu={toggleSubmenu}
+                variant={variant}
+              />
+            </div>
+
+            <div className="flex flex-col md:flex-row md:items-center">
+              {rightSection || (
+                <>
+                  {showSearchBar && (
+                    <SearchBar
+                      variant={variant}
+                      searchQuery={searchQuery}
+                      setSearchQuery={setSearchQuery}
+                      onSearch={onSearch}
+                    />
+                  )}
+                  <AuthSection
+                    showAuthButtons={showAuthButtons}
+                    authState={authState}
+                    userProfile={userProfile}
+                    variant={variant}
+                    onLogin={onLogin}
+                    onSignup={onSignup}
+                    onLogout={onLogout}
+                    onProfileClick={onProfileClick}
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </nav>
+    );
+  }
+);
+
+Navbar.displayName = "Navbar";
+export default Navbar;

package/source/components/navbar/types.ts

@@ -0,0 +1,69 @@
+interface AuthSectionProps {
+  showAuthButtons: boolean;
+  authState: "loggedIn" | "loggedOut";
+  userProfile?: { name: string; avatar?: string };
+  variant: "light" | "dark" | "colored";
+  onLogin?: () => void;
+  onSignup?: () => void;
+  onLogout?: () => void;
+  onProfileClick?: () => void;
+}
+
+interface MobileToggleProps {
+  isOpen: boolean;
+  toggleMenu: () => void;
+}
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+  icon?: React.ReactNode;
+  children?: NavItem[];
+  highlight?: boolean;
+  customComponent?: React.ReactNode;
+}
+
+interface NavbarProps {
+  brand: { name: string; logo?: React.ReactNode; href: string };
+  items: NavItem[];
+  variant?: "light" | "dark" | "colored";
+  position?: "fixed" | "sticky" | "static";
+  containerType?: "full" | "contained";
+  showSearchBar?: boolean;
+  showAuthButtons?: boolean;
+  authState?: "loggedIn" | "loggedOut";
+  userProfile?: { name: string; avatar?: string };
+  rightSection?: React.ReactNode;
+  leftSection?: React.ReactNode;
+  centerSection?: React.ReactNode;
+  onSearch?: (query: string) => void;
+  onLogin?: () => void;
+  onSignup?: () => void;
+  onLogout?: () => void;
+  onProfileClick?: () => void;
+}
+
+interface NavItemComponentProps {
+  items: NavItem[];
+  isMobile: boolean;
+  activeSubmenu: string | null;
+  toggleSubmenu: (id: string, e: React.MouseEvent) => void;
+  variant: "light" | "dark" | "colored";
+}
+
+interface SearchBarProps {
+  variant: "light" | "dark" | "colored";
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  onSearch?: (query: string) => void;
+}
+
+export type {
+  SearchBarProps,
+  NavItemComponentProps,
+  NavItem,
+  MobileToggleProps,
+  AuthSectionProps,
+  NavbarProps,
+};

package/source/components/skeleton/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * 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, { useMemo, memo } from "react";
 
 type SkeletonType = "text" | "circle" | "rectangle";

package/source/components/grid/RenderCell.tsx

@@ -1,32 +0,0 @@
-const renderCell = (
-  rowData: any,
-  column: any,
-  rowIndex: number,
-  currentPage: number,
-  pageSettings: any,
-  rowChange?: any
-) => {
-  const cellValue = rowData[column.field];
-
-  if (column.template) {
-    return (
-      <column.template
-        rowData={rowData}
-        rowIndex={rowIndex + currentPage * pageSettings.pageNumber}
-        rowChange={(changes: any) => {
-          if (rowChange) rowChange(changes);
-        }}
-      />
-    );
-  }
-
-  if (column.tooltip) {
-    return (
-      <span title={cellValue?.toString()}>
-        {column.tooltip ? cellValue.slice(0, 10) : cellValue}
-      </span>
-    );
-  }
-
-  return cellValue;
-};