From c012556dbdfb06d766da19804d8f74dce686c7e4 Mon Sep 17 00:00:00 2001
From: Afonso Jorge Ramos <afonsojorgeramos@gmail.com>
Date: Thu, 13 Jun 2024 16:47:23 +0100
Subject: [PATCH] feat: use `clsx` to merge classNames

---
 package.json                                        |  1 +
 pnpm-lock.yaml                                      |  9 +++++++++
 src/components/Sidebar.tsx                          |  8 +++++---
 src/components/buttons/PillButton.tsx               |  3 ++-
 src/components/fields/Button.tsx                    |  5 +++--
 .../fields/__snapshots__/Button.test.tsx.snap       |  8 ++++----
 src/routes/Login.tsx                                |  4 ++--
 src/routes/LoginWithOAuthApp.tsx                    |  4 ++--
 src/routes/LoginWithPersonalAccessToken.tsx         |  4 ++--
 .../__snapshots__/LoginWithOAuthApp.test.tsx.snap   |  4 ++--
 .../LoginWithPersonalAccessToken.test.tsx.snap      |  4 ++--
 src/utils/cn.test.ts                                | 13 +++++++++++++
 src/utils/cn.ts                                     |  5 +++++
 tsconfig.json                                       |  2 +-
 14 files changed, 53 insertions(+), 21 deletions(-)
 create mode 100644 src/utils/cn.test.ts
 create mode 100644 src/utils/cn.ts

diff --git a/package.json b/package.json
index fa9f1ee9e..069abd69f 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 227ae2df0..82a8543d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       axios:
         specifier: 1.7.2
         version: 1.7.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       date-fns:
         specifier: 3.6.0
         version: 3.6.0
@@ -1103,6 +1106,10 @@ packages:
   clone-response@1.0.3:
     resolution: {integrity: sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -4425,6 +4432,8 @@ snapshots:
     dependencies:
       mimic-response: 1.0.1
 
+  clsx@2.1.1: {}
+
   co@4.6.0: {}
 
   collect-v8-coverage@1.0.2: {}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 0d153ac1e..74632eb2d 100644
--- a/src/components/Sidebar.tsx
+++ b/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`}
         >
diff --git a/src/components/buttons/PillButton.tsx b/src/components/buttons/PillButton.tsx
index 5f92b3d1a..a9207a858 100644
--- a/src/components/buttons/PillButton.tsx
+++ b/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}
diff --git a/src/components/fields/Button.tsx b/src/components/fields/Button.tsx
index 4b54cafb8..3655b553d 100644
--- a/src/components/fields/Button.tsx
+++ b/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) {
diff --git a/src/components/fields/__snapshots__/Button.test.tsx.snap b/src/components/fields/__snapshots__/Button.test.tsx.snap
index 9e8117b3b..48f860f0a 100644
--- a/src/components/fields/__snapshots__/Button.test.tsx.snap
+++ b/src/components/fields/__snapshots__/Button.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`components/fields/Button.tsx should render with icon 1`] = `
     <div>
       <button
         aria-label="button"
-        class="undefined rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+        class="rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
         title="button"
         type="button"
       >
@@ -32,7 +32,7 @@ exports[`components/fields/Button.tsx should render with icon 1`] = `
   "container": <div>
     <button
       aria-label="button"
-      class="undefined rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+      class="rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
       title="button"
       type="button"
     >
@@ -114,7 +114,7 @@ exports[`components/fields/Button.tsx should render without icon 1`] = `
     <div>
       <button
         aria-label="button"
-        class="undefined rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+        class="rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
         title="button"
         type="button"
       >
@@ -125,7 +125,7 @@ exports[`components/fields/Button.tsx should render without icon 1`] = `
   "container": <div>
     <button
       aria-label="button"
-      class="undefined rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+      class="rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
       title="button"
       type="button"
     >
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index f33acab4f..a1f80c232 100644
--- a/src/routes/Login.tsx
+++ b/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>
diff --git a/src/routes/LoginWithOAuthApp.tsx b/src/routes/LoginWithOAuthApp.tsx
index f95c54153..1bf4282d7 100644
--- a/src/routes/LoginWithOAuthApp.tsx
+++ b/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}
diff --git a/src/routes/LoginWithPersonalAccessToken.tsx b/src/routes/LoginWithPersonalAccessToken.tsx
index 26b79cea6..1ce3e446b 100644
--- a/src/routes/LoginWithPersonalAccessToken.tsx
+++ b/src/routes/LoginWithPersonalAccessToken.tsx
@@ -101,7 +101,7 @@ 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}
@@ -109,7 +109,7 @@ export const LoginWithPersonalAccessToken: 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}
diff --git a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index e19339827..2cca26a89 100644
--- a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 >
                   <button
                     aria-label="Create new OAuth App"
-                    class="undefined rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+                    class="rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
                     disabled=""
                     title="Create new OAuth App"
                     type="button"
@@ -283,7 +283,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               >
                 <button
                   aria-label="Create new OAuth App"
-                  class="undefined rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+                  class="rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
                   disabled=""
                   title="Create new OAuth App"
                   type="button"
diff --git a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index c64aeb84a..c0ca85e81 100644
--- a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -107,7 +107,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
                   <div>
                     <button
                       aria-label="Generate a PAT"
-                      class="undefined rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+                      class="rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
                       title="Generate a PAT"
                       type="button"
                     >
@@ -298,7 +298,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
                 <div>
                   <button
                     aria-label="Generate a PAT"
-                    class="undefined rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+                    class="rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
                     title="Generate a PAT"
                     type="button"
                   >
diff --git a/src/utils/cn.test.ts b/src/utils/cn.test.ts
new file mode 100644
index 000000000..31dd4b0ea
--- /dev/null
+++ b/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',
+    );
+  });
+});
diff --git a/src/utils/cn.ts b/src/utils/cn.ts
new file mode 100644
index 000000000..73c46e8f9
--- /dev/null
+++ b/src/utils/cn.ts
@@ -0,0 +1,5 @@
+import { type ClassValue, clsx } from 'clsx/lite';
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(...inputs);
+}
diff --git a/tsconfig.json b/tsconfig.json
index bf9e08b98..99a01a632 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "es6",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "target": "es2022",
     "outDir": "./build/",
     "sourceMap": true,