chore: Removal of @tsd-ui/core dependency

client/package.json

@@ -29,7 +29,6 @@
     "@peculiar/x509": "1.14.3",
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-query-devtools": "^5.85.0",
-    "@tsd-ui/core": "^0.3.2",
     "@vitest/coverage-v8": "^4.1.9",
     "axios": "^1.18.0",
     "dayjs": "^1.11.7",

client/src/app/components/LoadingWrapper/LoadingWrapper.tsx

@@ -0,0 +1,26 @@
+import type React from "react";
+
+import { Bullseye, Spinner } from "@patternfly/react-core";
+import { ErrorEmptyState } from "../ErrorEmptyState";
+
+export const LoadingWrapper = <TError = unknown,>(props: {
+  isFetching: boolean;
+  fetchError?: TError | null;
+  isFetchingState?: React.ReactNode;
+  fetchErrorState?: (error: TError) => React.ReactNode;
+  children: React.ReactNode;
+}) => {
+  if (props.isFetching) {
+    return (
+      props.isFetchingState ?? (
+        <Bullseye>
+          <Spinner />
+        </Bullseye>
+      )
+    );
+  }
+  if (props.fetchError) {
+    return props.fetchErrorState ? props.fetchErrorState(props.fetchError) : <ErrorEmptyState />;
+  }
+  return props.children;
+};

client/src/app/components/LoadingWrapper/index.ts

@@ -0,0 +1 @@
+export * from "./LoadingWrapper";

client/src/app/components/LocalStorageThemeProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { ThemeProvider, type ThemeMode } from "@tsd-ui/core";
+import { ThemeProvider, type ThemeMode } from "./Theme";
 
 export const STORAGE_KEY = "theme-preference";
 

client/src/app/components/Theme/ThemeContext.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+
+import { THEME_MODES, ThemeContext, getSystemTheme, isThemeModeValid, type ThemeMode } from "./theme-utils";
+
+const DARK_MODE_KEY = "pf-v6-theme-dark";
+
+interface IThemeProviderProps {
+  children: React.ReactNode;
+  mode: ThemeMode;
+  setMode: (value: ThemeMode) => void;
+}
+export const ThemeProvider: React.FC<IThemeProviderProps> = ({ children, mode, setMode }) => {
+  // "mode" sanitized
+  const sanitizedMode: ThemeMode = isThemeModeValid(mode) ? mode : "system";
+
+  // "setMode" sanitizer
+  const setSanitizedMode = React.useCallback(
+    (value: string) => {
+      if (value && isThemeModeValid(value)) {
+        setMode(value);
+      } else {
+        setMode("system");
+      }
+    },
+    [setMode],
+  );
+
+  const [systemTheme, setSystemTheme] = useState<"light" | "dark">(getSystemTheme);
+
+  const isDark = sanitizedMode === THEME_MODES.DARK || (sanitizedMode === THEME_MODES.SYSTEM && systemTheme === "dark");
+
+  React.useEffect(() => {
+    const htmlElement = document.documentElement;
+    const themeMeta = document.querySelector('meta[name="theme-color"]');
+
+    if (isDark) {
+      htmlElement.classList.add(DARK_MODE_KEY);
+      themeMeta?.setAttribute("content", "#000000");
+    } else {
+      htmlElement.classList.remove(DARK_MODE_KEY);
+      themeMeta?.setAttribute("content", "#ffffff");
+    }
+  }, [isDark]);
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      setSystemTheme(getSystemTheme());
+    };
+
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+  }, []);
+
+  return <ThemeContext value={{ isDark, mode: sanitizedMode, setMode: setSanitizedMode }}>{children}</ThemeContext>;
+};

client/src/app/components/Theme/ThemeSelector.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+
+import { Icon, MenuToggle, Select, SelectGroup, SelectList, SelectOption } from "@patternfly/react-core";
+import { DesktopIcon, OutlinedMoonIcon, OutlinedSunIcon } from "@patternfly/react-icons";
+
+import { ThemeContext, type ThemeMode } from "./theme-utils";
+
+const ColorSchemeGroupLabel = (
+  <div className="pf-v6-c-menu__group-title" id="theme-selector-color-scheme-title">
+    Color scheme
+  </div>
+);
+
+type ThemeMetadataType = {
+  [key in ThemeMode]: {
+    value: ThemeMode;
+    icon: React.ReactNode;
+    displayText: string;
+    description: string;
+  };
+};
+
+const themesMetadata: ThemeMetadataType = {
+  light: {
+    value: "light",
+    icon: <OutlinedSunIcon />,
+    displayText: "Light",
+    description: "Always use light mode",
+  },
+  dark: {
+    value: "dark",
+    icon: <OutlinedMoonIcon />,
+    displayText: "Dark",
+    description: "Always use dark mode",
+  },
+  system: {
+    value: "system",
+    icon: <DesktopIcon />,
+    displayText: "System",
+    description: "Follow system preference",
+  },
+};
+
+export const ThemeSelector: React.FC = () => {
+  const { mode, setMode } = React.use(ThemeContext);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleThemeChange = (_event?: React.MouseEvent, selectedMode?: string) => {
+    setMode((selectedMode as ThemeMode | undefined) ?? "system");
+    setIsOpen(false);
+  };
+
+  return (
+    <Select
+      isOpen={isOpen}
+      selected={mode}
+      onSelect={handleThemeChange}
+      onOpenChange={(open) => setIsOpen(open)}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsOpen(!isOpen)}
+          isExpanded={isOpen}
+          icon={<Icon size="lg">{themesMetadata[mode].icon}</Icon>}
+          aria-label={`Theme selection, current: ${themesMetadata[mode].displayText}`}
+        />
+      )}
+      shouldFocusToggleOnSelect
+      onOpenChangeKeys={["Escape"]}
+      popperProps={{
+        position: "right",
+        enableFlip: true,
+        preventOverflow: true,
+      }}
+    >
+      <SelectGroup label={ColorSchemeGroupLabel}>
+        <SelectList aria-labelledby="theme-selector-color-scheme-title">
+          {Object.entries(themesMetadata).map(([themeName, themeMetadata]) => (
+            <SelectOption
+              key={themeName}
+              value={themeMetadata.value}
+              icon={themeMetadata.icon}
+              description={themeMetadata.description}
+            >
+              {themeMetadata.displayText}
+            </SelectOption>
+          ))}
+        </SelectList>
+      </SelectGroup>
+    </Select>
+  );
+};

client/src/app/components/Theme/index.ts

@@ -0,0 +1,3 @@
+export * from "./ThemeContext";
+export * from "./ThemeSelector";
+export * from "./theme-utils";

client/src/app/components/Theme/theme-utils.ts

@@ -0,0 +1,30 @@
+import React from "react";
+
+export const THEME_MODES = {
+  SYSTEM: "system",
+  LIGHT: "light",
+  DARK: "dark",
+} as const;
+
+export type ThemeMode = (typeof THEME_MODES)[keyof typeof THEME_MODES];
+
+export const isThemeModeValid = (value: string): value is ThemeMode => {
+  return ["system", "light", "dark"].includes(value);
+};
+
+export const getSystemTheme = (): Exclude<ThemeMode, "system"> => {
+  if (typeof window === "undefined" || !window.matchMedia) return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+
+interface ThemeState {
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  isDark: boolean;
+}
+
+export const ThemeContext = React.createContext<ThemeState>({
+  mode: "system",
+  setMode: () => {},
+  isDark: false,
+});

client/src/app/components/ThemeAwareLogo.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
-import { ThemeContext } from "@tsd-ui/core";
+import { ThemeContext } from "./Theme";
 import { ThemeAwareLogo } from "./ThemeAwareLogo";
 
 const mockProps = {

client/src/app/components/ThemeAwareLogo.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { Brand } from "@patternfly/react-core";
 import { use } from "react";
-import { ThemeContext } from "@tsd-ui/core";
+import { ThemeContext } from "./Theme";
 
 interface ThemeAwareLogoProps {
   lightSrc: string;

client/src/app/hooks/TableControls/sorting/getLocalSortDerivedState.ts

@@ -1,5 +1,5 @@
 import type { ISortState } from "./useSortState";
-import { createComparator } from "@tsd-ui/core";
+import { createComparator } from "@app/utils/utils";
 
 /**
  * Args for getLocalSortDerivedState

client/src/app/layout/about.tsx

@@ -5,7 +5,7 @@ import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
 import ENV from "@app/env";
 import useBranding from "@app/hooks/useBranding";
-import { ThemeContext } from "@tsd-ui/core";
+import { ThemeContext } from "@app/components/Theme";
 import { use } from "react";
 
 interface IButtonAboutAppProps {

client/src/app/layout/header.tsx

@@ -34,7 +34,7 @@ import useBranding from "@app/hooks/useBranding";
 import { ThemeAwareLogo } from "@app/components/ThemeAwareLogo";
 
 import { AboutApp } from "./about";
-import { ThemeSelector } from "@tsd-ui/core";
+import { ThemeSelector } from "@app/components/Theme";
 
 export const HeaderApp: React.FC = () => {
   const {

client/src/app/pages/Artifacts/Artifacts.tsx

@@ -4,7 +4,7 @@ import { useFetchArtifactsImageData, useVerifyArtifact } from "@app/queries/arti
 import { ArtifactResults } from "./components/ArtifactResults";
 import { DocumentMetadata } from "@app/components/DocumentMetadata";
 import { SearchForm } from "@app/components/SearchForm";
-import { LoadingWrapper } from "@tsd-ui/core";
+import { LoadingWrapper } from "@app/components/LoadingWrapper";
 
 export const Artifacts = () => {
   const [artifactUri, setArtifactUri] = useState<string | null>();

client/src/app/pages/TrustRoot/TrustRoot.tsx

@@ -10,7 +10,7 @@ import { Overview } from "./components/Overview";
 import { RootDetails } from "./components/RootDetails";
 import { MetadataNotAvailable } from "./components/ErrorStates/MetadataNotAvailable";
 import { DocumentMetadata } from "@app/components/DocumentMetadata";
-import { LoadingWrapper } from "@tsd-ui/core";
+import { LoadingWrapper } from "@app/components/LoadingWrapper";
 
 export const TrustRoots: React.FC = () => {
   const { metadataInfo, isFetching: isFetchingMetadata, fetchError: fetchErrorMetadata } = useFetchTrustMetadataInfo();

client/src/app/pages/TrustRoot/components/Overview.tsx

@@ -7,7 +7,7 @@ import { Card, CardBody, CardTitle } from "@patternfly/react-core";
 
 import type { Error as ApiError, CertificateInfo } from "@app/client";
 import { RepositoryNotInitiated } from "./ErrorStates/RepositoryNotInitialized";
-import { LoadingWrapper } from "@tsd-ui/core";
+import { LoadingWrapper } from "@app/components/LoadingWrapper";
 
 interface IOverviewProps {
   certificates: CertificateInfo[];

client/src/app/pages/TrustRoot/components/RootDetails.tsx

@@ -19,7 +19,7 @@ import {
 import type { MetadataInfo, MetadataInfoResponse } from "@app/client";
 import { CertificateStatusIcon } from "@app/components/CertificateStatusIcon";
 import { capitalizeFirstLetter, formatDate } from "@app/utils/utils";
-import { createComparator } from "@tsd-ui/core";
+import { createComparator } from "@app/utils/utils";
 
 interface IRootDetailsProps {
   metadataInfo: MetadataInfoResponse;