refactor: adopt primer design system ui components

jest.config.ts

@@ -2,7 +2,10 @@ import type { Config } from 'jest';
 
 const config: Config = {
   preset: 'ts-jest',
-  setupFiles: ['<rootDir>/src/renderer/__helpers__/setupEnvVars.js'],
+  setupFiles: [
+    '<rootDir>/src/renderer/__helpers__/setupEnvVars.js',
+    '<rootDir>/jest.setup.js',
+  ],
   testEnvironment: 'jsdom',
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*', '!**/__snapshots__/**'],

jest.setup.js.js

@@ -0,0 +1,7 @@
+if (typeof CSS === 'undefined') {
+  global.CSS = {};
+}
+
+if (!CSS.supports) {
+  CSS.supports = () => true;
+}

package.json

@@ -140,6 +140,7 @@
     "@discordapp/twemoji": "15.1.0",
     "@electron/notarize": "2.5.0",
     "@primer/octicons-react": "19.11.0",
+    "@primer/react": "36.27.0",
     "@testing-library/react": "16.0.1",
     "@types/jest": "29.5.13",
     "@types/node": "20.16.11",
@@ -148,7 +149,6 @@
     "@types/react-router-dom": "5.3.3",
     "autoprefixer": "10.4.20",
     "axios": "1.7.7",
-    "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "concurrently": "9.0.1",
     "copy-webpack-plugin": "12.0.2",

src/renderer/App.tsx

@@ -16,6 +16,8 @@ import { LoginWithOAuthAppRoute } from './routes/LoginWithOAuthApp';
 import { LoginWithPersonalAccessTokenRoute } from './routes/LoginWithPersonalAccessToken';
 import { NotificationsRoute } from './routes/Notifications';
 import { SettingsRoute } from './routes/Settings';
+
+import { BaseStyles, ThemeProvider } from '@primer/react';
 import './App.css';
 
 function RequireAuth({ children }) {
@@ -31,56 +33,60 @@ function RequireAuth({ children }) {
 
 export const App = () => {
   return (
-    <AppProvider>
-      <Router>
-        <div className="flex h-full overflow-y-auto flex-col pl-14">
-          <Loading />
-          <Sidebar />
-          <Routes>
-            <Route
-              path="/"
-              element={
-                <RequireAuth>
-                  <NotificationsRoute />
-                </RequireAuth>
-              }
-            />
-            <Route
-              path="/filters"
-              element={
-                <RequireAuth>
-                  <FiltersRoute />
-                </RequireAuth>
-              }
-            />
-            <Route
-              path="/settings"
-              element={
-                <RequireAuth>
-                  <SettingsRoute />
-                </RequireAuth>
-              }
-            />
-            <Route
-              path="/accounts"
-              element={
-                <RequireAuth>
-                  <AccountsRoute />
-                </RequireAuth>
-              }
-            />
-            <Route path="/login" element={<LoginRoute />} />
-            <Route
-              path="/login-personal-access-token"
-              element={<LoginWithPersonalAccessTokenRoute />}
-            />
-            <Route
-              path="/login-oauth-app"
-              element={<LoginWithOAuthAppRoute />}
-            />
-          </Routes>
-        </div>
-      </Router>
-    </AppProvider>
+    <ThemeProvider>
+      <BaseStyles>
+        <AppProvider>
+          <Router>
+            <div className="flex h-full overflow-y-auto flex-col pl-14">
+              <Loading />
+              <Sidebar />
+              <Routes>
+                <Route
+                  path="/"
+                  element={
+                    <RequireAuth>
+                      <NotificationsRoute />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/filters"
+                  element={
+                    <RequireAuth>
+                      <FiltersRoute />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/settings"
+                  element={
+                    <RequireAuth>
+                      <SettingsRoute />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/accounts"
+                  element={
+                    <RequireAuth>
+                      <AccountsRoute />
+                    </RequireAuth>
+                  }
+                />
+                <Route path="/login" element={<LoginRoute />} />
+                <Route
+                  path="/login-personal-access-token"
+                  element={<LoginWithPersonalAccessTokenRoute />}
+                />
+                <Route
+                  path="/login-oauth-app"
+                  element={<LoginWithOAuthAppRoute />}
+                />
+              </Routes>
+            </div>
+          </Router>
+        </AppProvider>
+      </BaseStyles>
+    </ThemeProvider>
   );
 };

src/renderer/components/AccountNotifications.tsx

@@ -1,11 +1,17 @@
-import {
-  FeedPersonIcon,
-  GitPullRequestIcon,
-  IssueOpenedIcon,
-} from '@primer/octicons-react';
 import { type FC, type MouseEvent, useContext, useMemo, useState } from 'react';
+
+import { GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react';
+import {
+  Avatar,
+  Button,
+  IconButton,
+  Stack,
+  Text,
+  Tooltip,
+} from '@primer/react';
+
 import { AppContext } from '../context/App';
-import { type Account, type GitifyError, Opacity, Size } from '../types';
+import { type Account, type GitifyError, Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { cn } from '../utils/cn';
 import { getChevronDetails } from '../utils/helpers';
@@ -19,9 +25,6 @@ import { HoverGroup } from './HoverGroup';
 import { NotificationRow } from './NotificationRow';
 import { Oops } from './Oops';
 import { RepositoryNotifications } from './RepositoryNotifications';
-import { InteractionButton } from './buttons/InteractionButton';
-import { AvatarIcon } from './icons/AvatarIcon';
-import { PlatformIcon } from './icons/PlatformIcon';
 
 interface IAccountNotifications {
   account: Account;
@@ -74,61 +77,61 @@ export const AccountNotifications: FC<IAccountNotifications> = (
       {showAccountHeader && (
         <div
           className={cn(
-            'group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white',
+            'group flex items-center justify-between pr-3 py-1.5 text-sm font-semibold dark:text-white',
             props.error
               ? 'bg-red-300 dark:bg-red-500'
               : 'bg-gray-300 dark:bg-gray-darkest',
-            Opacity.LOW,
           )}
           onClick={toggleAccountNotifications}
         >
-          <div className="flex">
-            <button
-              type="button"
-              title="Open Profile"
+          <Tooltip text="Open profile" direction="s">
+            <Button
+              variant="invisible"
+              alignContent="center"
+              count={notifications.length}
               onClick={(event: MouseEvent<HTMLElement>) => {
                 // Don't trigger onClick of parent element.
                 event.stopPropagation();
                 openAccountProfile(account);
               }}
             >
-              <div className="flex">
-                <AvatarIcon
-                  title={account.user.login}
-                  url={account.user.avatar}
-                  size={Size.SMALL}
-                  defaultIcon={FeedPersonIcon}
-                />
-                <span className="ml-2">@{account.user.login}</span>
-              </div>
-            </button>
-          </div>
+              <Stack direction="horizontal" gap="condensed" align="center">
+                <Avatar src={account.user.avatar} size={Size.MEDIUM} />
+                <Text>@{account.user.login}</Text>
+              </Stack>
+            </Button>
+          </Tooltip>
+
           <HoverGroup>
-            <PlatformIcon type={account.platform} size={Size.SMALL} />
-            <InteractionButton
-              title="My Issues"
+            <IconButton
+              aria-label="My Issues"
               icon={IssueOpenedIcon}
-              size={Size.SMALL}
+              size="small"
+              variant="invisible"
               onClick={(event: MouseEvent<HTMLElement>) => {
                 // Don't trigger onClick of parent element.
                 event.stopPropagation();
                 openGitHubIssues(account.hostname);
               }}
             />
-            <InteractionButton
-              title="My Pull Requests"
+
+            <IconButton
+              aria-label="My Pull Requests"
               icon={GitPullRequestIcon}
-              size={Size.SMALL}
+              size="small"
+              variant="invisible"
               onClick={(event: MouseEvent<HTMLElement>) => {
                 // Don't trigger onClick of parent element.
                 event.stopPropagation();
                 openGitHubPulls(account.hostname);
               }}
             />
-            <InteractionButton
-              title={Chevron.label}
+
+            <IconButton
+              aria-label={Chevron.label}
               icon={Chevron.icon}
-              size={Size.SMALL}
+              size="small"
+              variant="invisible"
               onClick={toggleAccountNotifications}
             />
           </HoverGroup>

src/renderer/components/AllRead.tsx

@@ -1,6 +1,10 @@
 import { type FC, useMemo } from 'react';
+
+import { Stack } from '@primer/react';
+
 import { Constants } from '../utils/constants';
 import { EmojiText } from './EmojiText';
+import { Centered } from './primitives/Centered';
 
 export const AllRead: FC = () => {
   const emoji = useMemo(
@@ -12,12 +16,14 @@ export const AllRead: FC = () => {
   );
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
-      <div className="mt-2 mb-5 text-5xl">
-        <EmojiText text={emoji} />
-      </div>
+    <Centered>
+      <Stack direction="vertical" align="center">
+        <div className="mt-2 mb-5 text-5xl">
+          <EmojiText text={emoji} />
+        </div>
 
-      <div className="mb-2 text-xl font-semibold">No new notifications.</div>
-    </div>
+        <div className="mb-2 text-xl font-semibold">No new notifications</div>
+      </Stack>
+    </Centered>
   );
 };

src/renderer/components/EmojiText.tsx

@@ -1,4 +1,5 @@
 import { type FC, useEffect, useRef } from 'react';
+
 import { convertTextToEmojiImgHtml } from '../utils/emojis';
 
 export interface IEmojiText {

src/renderer/components/Header.tsx

@@ -1,9 +1,11 @@
-import { ArrowLeftIcon, type Icon } from '@primer/octicons-react';
 import { type FC, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
+
+import { ArrowLeftIcon, type Icon } from '@primer/octicons-react';
+
+import { Heading, IconButton, Octicon, Stack } from '@primer/react';
 import { AppContext } from '../context/App';
 import { Size } from '../types';
-import { Legend } from './settings/Legend';
 
 interface IHeader {
   icon: Icon;
@@ -17,28 +19,32 @@ export const Header: FC<IHeader> = (props: IHeader) => {
   const { fetchNotifications } = useContext(AppContext);
 
   return (
-    <div className="mx-8 mt-2 flex items-center justify-between py-2">
-      <button
-        type="button"
-        className="focus:outline-none"
-        title="Go Back"
-        onClick={() => {
-          navigate(-1);
-          if (props.fetchOnBack) {
-            fetchNotifications();
-          }
-        }}
-      >
-        <ArrowLeftIcon
-          size={Size.XLARGE}
-          className="hover:text-gray-400"
+    <div className="mx-6 mt-2 py-2">
+      <Stack direction="horizontal" justify="space-between">
+        <IconButton
           aria-label="Go Back"
+          variant="invisible"
+          tooltipDirection="e"
+          icon={ArrowLeftIcon}
+          onClick={() => {
+            navigate(-1);
+            if (props.fetchOnBack) {
+              fetchNotifications();
+            }
+          }}
         />
-      </button>
 
-      <h3 className="text-lg font-semibold flex items-center">
-        <Legend icon={props.icon}>{props.children}</Legend>
-      </h3>
+        <Stack direction="horizontal" align="center" gap="condensed">
+          <Octicon icon={props.icon} size={Size.LARGE} />
+          <Heading
+            sx={{
+              fontSize: 3,
+            }}
+          >
+            {props.children}
+          </Heading>
+        </Stack>
+      </Stack>
     </div>
   );
 };