feat: implemented generic NavBar in common package (#3654)

* feat: added root tsconfig and common package extends it

* feat: implemented NavbarGeneric in common package;

* fix: common - lint errors

* chore: restore common tsconfig

* Update tsconfig.json

Author: hussmartinez

packages/common/src/assets/gitcoinlogo-black.svg

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+
+export function NavbarActions({ children }: PropsWithChildren) {
+  return (
+    <div className="flex items-center gap-6" data-testid="navbar-actions">
+      {children}
+    </div>
+  );
+}
+
+NavbarActions.displayName = "NavbarActions";
+NavbarActions.navbarSection = "main";

packages/common/src/components/NavbarGeneric/NavbarActions.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { useNavbarContext } from "./NavbarContext";
+
+export function NavbarBanner({ children }: { children: ReactElement }) {
+  const { showBanner } = useNavbarContext();
+  if (!showBanner) return null;
+  return (
+    <div
+      className="bg-white/40 backdrop-blur-sm text-center w-full font-medium flex flex-col items-center justify-center text-black"
+      data-testid="navbar-banner"
+    >
+      {children}
+    </div>
+  );
+}
+
+NavbarBanner.displayName = "NavbarBanner";
+NavbarBanner.navbarSection = "banner";

packages/common/src/components/NavbarGeneric/NavbarBanner.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from "react";
+import { useNavbarContext } from "./NavbarContext";
+
+export function NavbarConnectButton({ children }: PropsWithChildren) {
+  const { showWalletInteraction } = useNavbarContext();
+
+  if (!showWalletInteraction) return null;
+
+  return (
+    <div data-testid="connect-wallet-button" id="connect-wallet-button">
+      {children}
+    </div>
+  );
+}
+
+NavbarConnectButton.displayName = "NavbarConnectButton";
+NavbarConnectButton.navbarSection = "main";

packages/common/src/components/NavbarGeneric/NavbarConnectButton.tsx

@@ -0,0 +1,29 @@
+import { createContext, PropsWithChildren, useContext } from "react";
+
+// Define the type for the context value
+type NavbarContextType = {
+  showWalletInteraction?: boolean;
+  showBanner?: boolean;
+};
+
+const NavbarContext = createContext<NavbarContextType | undefined>(undefined);
+
+type NavbarProviderProps = PropsWithChildren<{
+  value: NavbarContextType;
+}>;
+
+const NavbarProvider: React.FC<NavbarProviderProps> = ({ children, value }) => {
+  return (
+    <NavbarContext.Provider value={value}>{children}</NavbarContext.Provider>
+  );
+};
+
+const useNavbarContext = () => {
+  const context = useContext(NavbarContext);
+  if (!context) {
+    throw new Error("useNavbarContext must be used within a NavbarContext");
+  }
+  return context;
+};
+
+export { NavbarProvider, useNavbarContext };

packages/common/src/components/NavbarGeneric/NavbarContext.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+
+export function NavbarCustomAction({
+  children,
+  testId,
+}: PropsWithChildren<{
+  testId?: string;
+}>) {
+  return (
+    <div
+      className="flex items-center"
+      data-testid={testId || "navbar-custom-action"}
+    >
+      {children}
+    </div>
+  );
+}
+
+NavbarCustomAction.displayName = "NavbarCustomAction";
+NavbarCustomAction.navbarSection = "main";

packages/common/src/components/NavbarGeneric/NavbarCustomAction.tsx

@@ -0,0 +1,88 @@
+import React, { PropsWithChildren, ReactElement } from "react";
+import { NavbarBanner } from "./NavbarBanner";
+import { NavbarCustomAction } from "./NavbarCustomAction";
+import { NavbarConnectButton } from "./NavbarConnectButton";
+import { NavbarActions } from "./NavbarActions";
+import { NavbarLogo } from "./NavbarLogo";
+import { NavbarProvider } from "./NavbarContext";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type NavbarSubComponent = React.ComponentType<any> & {
+  displayName?: string;
+  navbarSection?: "main" | "banner";
+};
+
+function isNavbarSubComponent(
+  child: React.ReactNode
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): child is ReactElement<any, NavbarSubComponent> {
+  return (
+    React.isValidElement(child) &&
+    typeof child.type === "function" &&
+    "displayName" in child.type
+  );
+}
+
+function filterNavbarSubComponentsBySection(
+  children: React.ReactNode,
+  section: "main" | "banner"
+): React.ReactNode {
+  return React.Children.toArray(children).filter(
+    (child) =>
+      isNavbarSubComponent(child) && child.type.navbarSection === section
+  );
+}
+
+type NavbarGenericProps = PropsWithChildren<{
+  className?: string;
+  showWalletInteraction?: boolean;
+  showBanner?: boolean;
+  fixed?: boolean;
+  blurred?: boolean;
+}>;
+
+export function NavbarGeneric({
+  children,
+  fixed = false,
+  blurred = false,
+  className = "",
+  showWalletInteraction = true,
+  showBanner = false,
+}: NavbarGenericProps) {
+  const mainComponents = filterNavbarSubComponentsBySection(children, "main");
+  const bannerComponent = filterNavbarSubComponentsBySection(
+    children,
+    "banner"
+  );
+
+  return (
+    <NavbarProvider value={{ showWalletInteraction, showBanner }}>
+      <header className="w-full mb-3" data-testid="navbar-container">
+        <nav
+          className={`w-full z-20 shadow-md  ${className} ${
+            fixed ? "fixed" : ""
+          } ${blurred ? "blurred" : ""}`}
+          data-testid="navbar"
+        >
+          <div className="h-16 mx-auto py-[10px] px-4 sm:px-6 lg:px-20 flex justify-between items-center">
+            {mainComponents}
+          </div>
+          {bannerComponent}
+        </nav>
+      </header>
+    </NavbarProvider>
+  );
+}
+
+NavbarGeneric.Logo = NavbarLogo;
+
+// Actions component for right-side items
+NavbarGeneric.Actions = NavbarActions;
+
+NavbarGeneric.ConnectButton = NavbarConnectButton;
+
+NavbarGeneric.CustomAction = NavbarCustomAction;
+
+NavbarGeneric.Banner = NavbarBanner;
+
+NavbarGeneric.displayName = "NavbarGeneric";

packages/common/src/components/NavbarGeneric/NavbarGeneric.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from "react";
+import { Link } from "react-router-dom";
+
+import { ReactComponent as GitcoinLogo } from "../../assets/gitcoinlogo-black.svg";
+import { NavbarSeparator } from "./NavbarSeparator";
+export function NavbarLogo({
+  to = "",
+  children,
+}: PropsWithChildren<{
+  to?: string;
+}>) {
+  return (
+    <Link //NavbarLink
+      to={to}
+      className="flex-shrink-0 flex items-center gap-4"
+      data-testid="navbar-logo"
+    >
+      <GitcoinLogo className="h-8 w-auto" />
+      {children ? (
+        <>
+          <NavbarSeparator />
+          {children}
+        </>
+      ) : null}
+    </Link>
+  );
+}
+
+NavbarLogo.displayName = "NavbarLogo";
+NavbarLogo.navbarSection = "main";

packages/common/src/components/NavbarGeneric/NavbarLogo.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export function NavbarSeparator() {
+  return <div className="border-r border-[1.5px] border-grey-400 h-4" />;
+}
+
+NavbarSeparator.displayName = "NavbarSeparator";

packages/common/src/components/NavbarGeneric/NavbarSeparator.tsx

@@ -0,0 +1 @@
+export { NavbarGeneric } from "./NavbarGeneric";