Replace classnames package with clsx

package-lock.json

@@ -20,7 +20,7 @@
         "@shlinkio/shlink-web-component": "^0.3.5",
         "bootstrap": "5.2.3",
         "bottlejs": "^2.0.1",
-        "classnames": "^2.3.2",
+        "clsx": "^2.0.0",
         "compare-versions": "^6.1.0",
         "csvtojson": "^2.0.10",
         "date-fns": "^2.30.0",
@@ -4664,6 +4664,14 @@
       "version": "2.3.2",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -13732,6 +13740,11 @@
     "classnames": {
       "version": "2.3.2"
     },
+    "clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",

package.json

@@ -36,7 +36,7 @@
     "@shlinkio/shlink-web-component": "^0.3.5",
     "bootstrap": "5.2.3",
     "bottlejs": "^2.0.1",
-    "classnames": "^2.3.2",
+    "clsx": "^2.0.0",
     "compare-versions": "^6.1.0",
     "csvtojson": "^2.0.10",
     "date-fns": "^2.30.0",

src/app/App.tsx

@@ -1,5 +1,5 @@
 import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
@@ -66,7 +66,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
       <MainHeader />
 
       <div className="app">
-        <div className={classNames('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
+        <div className={clsx('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
           <Routes>
             <Route index element={<Home />} />
             <Route path="/settings/*" element={<Settings />} />

src/common/MainHeader.tsx

@@ -1,7 +1,7 @@
 import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
@@ -25,7 +25,7 @@ const MainHeader: FCWithDeps<{}, MainHeaderDeps> = () => {
   useEffect(collapse, [location, collapse]);
 
   const settingsPath = '/settings';
-  const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isNotCollapsed });
+  const toggleClass = clsx('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isNotCollapsed });
 
   return (
     <Navbar color="primary" dark fixed="top" className="main-header" expand="md">

src/common/ShlinkVersionsContainer.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import type { SelectedServer } from '../servers/data';
@@ -15,7 +15,7 @@ export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContai
   const { pathname } = useLocation();
   const withPadding = useMemo(() => SHLINK_CONTAINER_PATH_PATTERN.test(pathname), [pathname]);
 
-  const classes = classNames('text-center', {
+  const classes = clsx('text-center', {
     'shlink-versions-container--with-sidebar': withPadding,
   });
 

src/servers/DeleteServerButton.tsx

@@ -1,7 +1,7 @@
 import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
@@ -26,7 +26,7 @@ const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButton
 
   return (
     <>
-      <button type="button" className={classNames(className, 'p-0 bg-transparent border-0')} onClick={showModal}>
+      <button type="button" className={clsx(className, 'p-0 bg-transparent border-0')} onClick={showModal}>
         {!children && <FontAwesomeIcon fixedWidth icon={deleteIcon} />}
         <span className={textClassName}>{children ?? 'Remove this server'}</span>
       </button>

src/servers/ServersListGroup.tsx

@@ -1,6 +1,6 @@
 import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 import { ListGroup, ListGroupItem } from 'reactstrap';
@@ -26,7 +26,7 @@ export const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children,
       <ListGroup
         data-testid="list"
         tag="div"
-        className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
+        className={clsx('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
       >
         {servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
       </ListGroup>

src/settings/RealTimeUpdatesSettings.tsx

@@ -1,6 +1,6 @@
 import { LabeledFormGroup, SimpleCard, ToggleSwitch, useDomId } from '@shlinkio/shlink-frontend-kit';
 import type { Settings } from '@shlinkio/shlink-web-component';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { FormGroup, Input } from 'reactstrap';
 import { FormText } from '../utils/forms/FormText';
 
@@ -31,7 +31,7 @@ export const RealTimeUpdatesSettings = (
       <LabeledFormGroup
         noMargin
         label="Real-time updates frequency (in minutes):"
-        labelClassName={classNames('form-label', { 'text-muted': !realTimeUpdates.enabled })}
+        labelClassName={clsx('form-label', { 'text-muted': !realTimeUpdates.enabled })}
         id={inputId}
       >
         <Input