feat: use clsx to merge classNames

package.json

@@ -110,6 +110,7 @@
     "@electron/remote": "2.1.2",
     "@primer/octicons-react": "19.9.0",
     "axios": "1.7.2",
+    "clsx": "2.1.1",
     "date-fns": "3.6.0",
     "electron-updater": "6.2.1",
     "final-form": "4.20.10",

src/components/Sidebar.tsx

@@ -9,6 +9,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
 import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify';
+import { cn } from '../utils/cn';
 import { quitApp } from '../utils/comms';
 import { openGitHubNotifications, openGitifyRepository } from '../utils/links';
 import { getNotificationCount } from '../utils/notifications';
@@ -47,9 +48,10 @@ export const Sidebar: FC = () => {
 
         <button
           type="button"
-          className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${
-            notificationsCount > 0 ? 'text-green-500' : 'text-white'
-          }`}
+          className={cn(
+            'flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer',
+            notificationsCount > 0 ? 'text-green-500' : 'text-white',
+          )}
           onClick={() => openGitHubNotifications()}
           title={`${notificationsCount} Unread Notifications`}
         >

src/components/buttons/PillButton.tsx

@@ -1,6 +1,7 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
 import type { IconColor } from '../../types';
+import { cn } from '../../utils/cn';
 
 export interface IPillButton {
   key?: string;
@@ -19,7 +20,7 @@ export const PillButton: FC<IPillButton> = (props: IPillButton) => {
       >
         <props.icon
           size={12}
-          className={`mr-1 ${props.color}`}
+          className={cn('mr-1', props.color)}
           aria-label={props.title}
         />
         {props.metric}

src/components/fields/Button.tsx

@@ -1,11 +1,12 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
+import { cn } from '../../utils/cn';
 import { openExternalLink } from '../../utils/comms';
 
 export interface IButton {
   name: string;
   label: string;
-  class?: string;
+  className?: string;
   icon?: Icon;
   size?: number;
   url?: string;
@@ -22,7 +23,7 @@ export const Button: FC<IButton> = (props: IButton) => {
       type={props.type ?? 'button'}
       title={props.label}
       aria-label={props.label}
-      className={`${props.class} ${baseClass}`}
+      className={cn(props.className, baseClass)}
       disabled={props.disabled}
       onClick={() => {
         if (props.url) {

src/routes/Login.tsx

@@ -52,14 +52,14 @@ export const LoginRoute: FC = () => {
         name="Personal Access Token"
         icon={KeyIcon}
         label="Login with Personal Access Token"
-        class="py-2 mt-2"
+        className="py-2 mt-2"
         onClick={() => navigate('/login-personal-access-token')}
       />
       <Button
         name="OAuth App"
         icon={PersonIcon}
         label="Login with OAuth App"
-        class="py-2 mt-2"
+        className="py-2 mt-2"
         onClick={() => navigate('/login-oauth-app')}
       />
     </div>

src/routes/LoginWithOAuthApp.tsx

@@ -96,7 +96,7 @@ export const LoginWithOAuthApp: FC = () => {
           <Button
             name="Docs"
             label="GitHub Docs"
-            class="mt-2"
+            className="mt-2"
             icon={BookIcon}
             size={12}
             url={Constants.GITHUB_DOCS.OAUTH_URL}
@@ -105,7 +105,7 @@ export const LoginWithOAuthApp: FC = () => {
           <Button
             name="Login"
             label="Login"
-            class="px-4 py-2 mt-2 !text-sm"
+            className="px-4 py-2 mt-2 !text-sm"
             icon={SignInIcon}
             size={16}
             disabled={submitting || pristine}

src/routes/LoginWithPersonalAccessToken.tsx

@@ -101,15 +101,15 @@ export const LoginWithPersonalAccessToken: FC = () => {
           <Button
             name="Docs"
             label="GitHub Docs"
-            class="mt-2"
+            className="mt-2"
             icon={BookIcon}
             size={12}
             url={Constants.GITHUB_DOCS.PAT_URL}
           />
           <Button
             name="Login"
             label="Login"
-            class="px-4 py-2 mt-2 !text-sm"
+            className="px-4 py-2 mt-2 !text-sm"
             icon={SignInIcon}
             size={16}
             disabled={submitting || pristine}

src/utils/cn.test.ts

@@ -0,0 +1,13 @@
+import { cn } from './cn';
+
+describe('utils/cn.ts', () => {
+  it('should return a string', () => {
+    expect(cn('foo', true && 'bar', false && 'baz')).toBe('foo bar');
+  });
+
+  it('should ignore anything that is not a string', () => {
+    expect(cn('foo', null, undefined, 1, '', ['bar'], { baz: 'qux' })).toBe(
+      'foo',
+    );
+  });
+});

src/utils/cn.ts

@@ -0,0 +1,5 @@
+import { type ClassValue, clsx } from 'clsx/lite';
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(...inputs);
+}

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "es6",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "target": "es2022",
     "outDir": "./build/",
     "sourceMap": true,