feat: add dark mode switcher (#89)

fixes #30

Author: kantord

src/components/Header.tsx

@@ -2,36 +2,7 @@ import { Link } from "react-router-dom";
 import { SidebarTrigger } from "./ui/sidebar";
 import { Separator } from "./ui/separator";
 import { HoverPopover } from "./HoverPopover";
-
-// function HeaderMenuItem({ children }: { children: React.ReactNode }) {
-//   return (
-//     <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-brand-50 transition-colors">
-//       {children}
-//     </div>
-//   );
-// }
-
-// function DropdownMenu({ children }: { children: React.ReactNode }) {
-//   return (
-//     <div className="absolute right-0 top-full mt-2 w-56 bg-base rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
-//       <div className="py-1">{children}</div>
-//     </div>
-//   );
-// }
-
-// function DropdownMenuItem({
-//   children,
-//   to,
-// }: {
-//   to: string;
-//   children: React.ReactNode;
-// }) {
-//   return (
-//     <Link to={to} className="block px-5 py-3 text-gray-700 hover:bg-brand-50">
-//       {children}
-//     </Link>
-//   );
-// }
+import { ButtonDarkMode } from "@stacklok/ui-kit";
 
 export function Header({ hasError }: { hasError?: boolean }) {
   return (
@@ -97,6 +68,8 @@ export function Header({ hasError }: { hasError?: boolean }) {
             </a>
           </div>
         </div>
+
+        <ButtonDarkMode />
       </div>
     </header>
   );

src/components/__tests__/ErrorBoundary.test.tsx

@@ -1,8 +1,8 @@
-import { render } from "@/lib/test-utils";
 import { screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import ErrorBoundary from "../ErrorBoundary";
 import { Error } from "../Error";
+import { render } from "@/lib/test-utils";
 
 const ErrorComponent = () => {
   throw Error();

src/lib/test-utils.tsx

@@ -1,4 +1,5 @@
 import { SidebarProvider } from "@/components/ui/sidebar";
+import { DarkModeProvider } from "@stacklok/ui-kit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RenderOptions, render } from "@testing-library/react";
 import React from "react";
@@ -31,14 +32,16 @@ const renderWithProviders = (
         })
       }
     >
-      <MemoryRouter {...options?.routeConfig}>
-        <Routes>
-          <Route
-            path={options?.pathConfig ?? "*"}
-            element={<SidebarProvider>{children}</SidebarProvider>}
-          />
-        </Routes>
-      </MemoryRouter>
+      <DarkModeProvider>
+        <MemoryRouter {...options?.routeConfig}>
+          <Routes>
+            <Route
+              path={options?.pathConfig ?? "*"}
+              element={<SidebarProvider>{children}</SidebarProvider>}
+            />
+          </Routes>
+        </MemoryRouter>
+      </DarkModeProvider>
     </QueryClientProvider>,
   );
 

src/main.tsx

@@ -1,24 +1,27 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import '@stacklok/ui-kit/style'
+import "@stacklok/ui-kit/style";
 import App from "./App.tsx";
 import { BrowserRouter } from "react-router-dom";
 import { SidebarProvider } from "./components/ui/sidebar.tsx";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import ErrorBoundary from "./components/ErrorBoundary.tsx";
 import { Error } from "./components/Error.tsx";
+import { DarkModeProvider } from "@stacklok/ui-kit";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
-      <SidebarProvider>
-        <ErrorBoundary fallback={<Error />}>
-          <QueryClientProvider client={new QueryClient()}>
-            <App />
-          </QueryClientProvider>
-        </ErrorBoundary>
-      </SidebarProvider>
+      <DarkModeProvider>
+        <SidebarProvider>
+          <ErrorBoundary fallback={<Error />}>
+            <QueryClientProvider client={new QueryClient()}>
+              <App />
+            </QueryClientProvider>
+          </ErrorBoundary>
+        </SidebarProvider>
+      </DarkModeProvider>
     </BrowserRouter>
   </StrictMode>
 );