From c012556dbdfb06d766da19804d8f74dce686c7e4 Mon Sep 17 00:00:00 2001 From: Afonso Jorge Ramos Date: Thu, 13 Jun 2024 16:47:23 +0100 Subject: [PATCH 1/3] 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 = () => { @@ -222,7 +237,10 @@ export const NotificationRow: FC = ({ notification, account }) => { type="button" className="focus:outline-none h-full hover:text-green-500" title="Mark as Read" - onClick={() => markNotificationRead(notification)} + onClick={() => { + setAnimateExit(true); + markNotificationRead(notification); + }} > diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx index 4021ac27e..04186a61b 100644 --- a/src/components/Repository.tsx +++ b/src/components/Repository.tsx @@ -1,6 +1,5 @@ import { CheckIcon, MarkGithubIcon, ReadIcon } from '@primer/octicons-react'; import { type FC, useCallback, useContext } from 'react'; -import { CSSTransition, TransitionGroup } from 'react-transition-group'; import { AppContext } from '../context/App'; import type { Account } from '../types'; import type { Notification } from '../typesGitHub'; @@ -77,17 +76,9 @@ export const RepositoryNotifications: FC = ({ - - {repoNotifications.map((obj) => ( - - - - ))} - + {repoNotifications.map((obj) => ( + + ))} ); }; diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap index 270ecb255..3efb3ce47 100644 --- a/src/components/__snapshots__/NotificationRow.test.tsx.snap +++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap @@ -6,7 +6,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil "baseElement":
, "container":
, "container":
, "container":
, "container":
, "container":
, "container":
, "container":
, "container":
, "container":
, "container":
, "container":
, "container":
-
- NotificationRow -
-
- NotificationRow -
+ NotificationRow +
+
+ NotificationRow
, @@ -151,12 +149,10 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
-
- NotificationRow -
-
- NotificationRow -
+ NotificationRow +
+
+ NotificationRow
, "debug": [Function], @@ -295,12 +291,10 @@ exports[`components/Repository.tsx should use default repository icon when avata
-
- NotificationRow -
-
- NotificationRow -
+ NotificationRow +
+
+ NotificationRow
, @@ -382,12 +376,10 @@ exports[`components/Repository.tsx should use default repository icon when avata
-
- NotificationRow -
-
- NotificationRow -
+ NotificationRow +
+
+ NotificationRow
, "debug": [Function],