feat: close dropdown on item click (#111)

* add closeDropdownOnItemClick util function

* use of closeDropdownOnItemClick in every dropdown

* created custom Dropdown component

* created custom ExportDropdownButton component

* add ThemeSelector component in components index

* use of ExportDropdownButton

* use of custom Dropdown

* fix imports to be consistent

* removed unused component

* removed unused global util function

* fix header

* Revert "fix imports to be consistent"

This reverts commit dd2c0b1.

* fix test error

* style fix

* minor fixes

* fix type in Dropdown component

---------

Co-authored-by: sa.cux <sabrina.cuccureddu@green-share.it>

cypress/e2e/darkmode.spec.cy.ts

@@ -2,16 +2,16 @@ describe("DarkMode test", () => {
   beforeEach(() => {
     cy.visit("http://localhost:3000");
     cy.wait(3000);
-    cy.get('[data-testid="themeSelectorButton"]').click();
+    cy.get('data-testid="themeSelectorButton"').click();
   });
 
   it("should select light Mode", () => {
-    cy.get('[data-testid="light-mode-option"]').click();
+    cy.get('data-testid="light-mode-option"').click();
     cy.get("html").should("have.data", "theme", "light");
   });
 
   it("should select dark mode", () => {
-    cy.get('[data-testid="dark-mode-option"]').click();
+    cy.get('data-testid="dark-mode-option"').click();
     cy.get("html").should("have.data", "theme", "custom-dark");
   });
 
@@ -27,8 +27,8 @@ describe("DarkMode test", () => {
       },
     });
     cy.wait(3000);
-    cy.get('[data-testid="themeSelectorButton"]').click();
-    cy.get('[data-testid="system-mode-option"]').click();
+    cy.get('data-testid="themeSelectorButton"').click();
+    cy.get('data-testid="system-mode-option"').click();
     cy.get("html").should("have.data", "theme", "custom-dark");
   });
 });

src/components/Dropdown.tsx

@@ -0,0 +1,61 @@
+import { FC, HTMLProps, ReactElement, ReactNode } from "react";
+
+export type DropdownProps = {
+  position?:
+    | "dropdown-top"
+    | "dropdown-bottom"
+    | "dropdown-left"
+    | "dropdown-right";
+  align?: "dropdown-end";
+  renderButton: ReactElement;
+  items: (HTMLProps<HTMLLIElement> & {
+    "data-testid"?: string;
+    onClick?: () => void;
+    renderItem: ReactNode;
+  })[];
+};
+
+export const closeDropdownOnItemClick = (): void => {
+  const activeElement = document.activeElement as HTMLElement | null;
+  if (activeElement && activeElement instanceof HTMLElement) {
+    activeElement.blur();
+  }
+};
+
+export const Dropdown: FC<DropdownProps> = ({
+  renderButton,
+  items,
+  position = "dropdown-bottom",
+  align,
+}) => {
+  return (
+    <div className={`dropdown ${position} ${align ?? ""}`}>
+      <div
+        tabIndex={0}
+        role="button"
+        className="btn border-0 p-0 bg-transparent hover:bg-transparent"
+      >
+        {renderButton}
+      </div>
+      <ul
+        tabIndex={0}
+        className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+      >
+        {items.map(({ onClick, renderItem, ...liProps }, index) => {
+          return (
+            <li
+              {...liProps}
+              key={index}
+              onClick={() => {
+                onClick?.();
+                closeDropdownOnItemClick();
+              }}
+            >
+              <p>{renderItem}</p>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

src/components/ExportDropdownButton.tsx

@@ -0,0 +1,37 @@
+import { FC } from "react";
+import { Dropdown } from "@/components";
+import { exportAsImage } from "@/utils";
+
+type ExportDropdownButtonProps = {
+  selector: string;
+  filename?: string;
+};
+
+export const ExportDropdownButton: FC<ExportDropdownButtonProps> = ({
+  selector,
+  filename,
+}) => {
+  return (
+    <Dropdown
+      renderButton={
+        <button className="btn btn-primary rounded cursor-pointer">
+          Export as image
+        </button>
+      }
+      items={[
+        {
+          renderItem: "Download as PNG",
+          onClick: () => {
+            exportAsImage(selector, "download", filename);
+          },
+        },
+        {
+          renderItem: "Copy to Clipboard",
+          onClick: () => {
+            exportAsImage(selector, "clipboard", filename);
+          },
+        },
+      ]}
+    />
+  );
+};

src/components/FormatStatsRender.tsx

@@ -1,7 +1,9 @@
 import { FC } from "react";
 import { useMemo } from "react";
-import { RepositoryContributionsCard } from "./RepositoryContributionsCard";
-import { ExportDropdown } from "./ExportDropdown";
+import {
+  ExportDropdownButton,
+  RepositoryContributionsCard,
+} from "@/components";
 import {
   PullRequestContributionsByRepository,
   RepositoryRenderFormat,
@@ -37,7 +39,7 @@ export const FormatStatsRender: FC<FormatStatsRenderProps> = ({
       case "cards":
         return (
           <>
-            <ExportDropdown />
+            <ExportDropdownButton selector=".grid" filename="stats" />
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-4">
               {repositories?.map(({ repository, contributions }, i) => (
                 <RepositoryContributionsCard

src/components/Header.tsx

@@ -1,52 +1,23 @@
 import { MAIN_LOGIN_PROVIDER } from "@/pages/api/auth/[...nextauth]";
 import { signIn, signOut, useSession } from "next-auth/react";
+import { ThemeSelector, Dropdown } from "@/components";
 import Image from "next/image";
 import Link from "next/link";
-import { ThemeSelector } from "./ThemeSelector";
+import { useRouter } from "next/router";
 
 export const Header = () => {
   const { data: session, status } = useSession();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    await signOut();
+  };
 
   return (
     <>
       <header>
         <div className="navbar bg-base-100">
           <div className="navbar-start">
-            <div className="dropdown">
-              <label
-                htmlFor="menu"
-                tabIndex={0}
-                className="btn btn-ghost lg:hidden"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M4 6h16M4 12h8m-8 6h16"
-                  />
-                </svg>
-              </label>
-              <ul
-                tabIndex={0}
-                className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
-              >
-                <li>
-                  <Link href="/">Home</Link>
-                </li>
-                {status === "authenticated" && (
-                  <li>
-                    <Link href={`/stats/${session.user.login}`}>Stats</Link>
-                  </li>
-                )}
-              </ul>
-            </div>
             <Link href="/" className="btn btn-ghost normal-case text-xl">
               GitHub Stats
             </Link>
@@ -66,35 +37,44 @@ export const Header = () => {
           <div className="navbar-end">
             <ThemeSelector />
             {status === "authenticated" ? (
-              <div className="dropdown dropdown-end">
-                <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-                  <div className="w-10 rounded-full">
-                    <Image
-                      src={session.user.image ?? ""}
-                      alt={session.user.name ?? ""}
-                      width={40}
-                      height={40}
-                    />
-                  </div>
-                </label>
-                <ul
-                  tabIndex={0}
-                  className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
-                >
-                  <li>
-                    <a>
-                      Settings
-                      <span className="badge">Soon</span>
-                    </a>
-                  </li>
-                  <li>
-                    <Link href={`/profile`}>Profile</Link>
-                  </li>
-                  <li>
-                    <a onClick={() => signOut()}>Logout</a>
-                  </li>
-                </ul>
-              </div>
+              <Dropdown
+                align="dropdown-end"
+                renderButton={
+                  <label className="btn btn-ghost btn-circle avatar">
+                    <div className="w-10 rounded-full">
+                      <Image
+                        src={session.user.image ?? ""}
+                        alt={session.user.name ?? ""}
+                        width={40}
+                        height={40}
+                        priority
+                      />
+                    </div>
+                  </label>
+                }
+                items={[
+                  {
+                    renderItem: (
+                      <span>
+                        Settings
+                        <span className="badge">Soon</span>
+                      </span>
+                    ),
+                  },
+                  {
+                    onClick: () => {
+                      router.push("/profile");
+                    },
+                    renderItem: "Profile",
+                  },
+                  {
+                    onClick: () => {
+                      handleLogout();
+                    },
+                    renderItem: "Logout",
+                  },
+                ]}
+              />
             ) : (
               <button
                 onClick={() => signIn(MAIN_LOGIN_PROVIDER)}

src/components/ThemeSelector.test.tsx

@@ -1,7 +1,11 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, test, expect } from "vitest";
+import { describe, test, expect, vi } from "vitest";
 import { ThemeSelector } from "./ThemeSelector";
 
+vi.mock("next/font/google", () => ({
+  Inter: () => <div>GoogleFont</div>,
+}));
+
 describe("ThemeSelector", () => {
   test("should change light Icon if click Dark mode", () => {
     render(<ThemeSelector />);