switch from classnames to clsx

package.json

@@ -16,7 +16,7 @@
     "@tabler/icons-react": "^2.1.2",
     "@tippyjs/react": "^4.2.5",
     "axios": "^1.2.1",
-    "classnames": "^2.3.2",
+    "clsx": "^2.0.0",
     "date-fns": "^2.29.3",
     "dinero.js": "^2.0.0-alpha.11",
     "framer-motion": "^10.9.1",

src/components/AlertBanner.jsx

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import { IconAlertCircle } from '@tabler/icons-react'
-import classNames from 'classnames'
+import clsx from 'clsx'
 
 const AlertBanner = (props) => {
   return (
-    <div className={classNames('bg-yellow-600 p-4 rounded flex items-center space-x-4', props.className)} data-testid='alert-banner'>
+    <div className={clsx('bg-yellow-600 p-4 rounded flex items-center space-x-4', props.className)} data-testid='alert-banner'>
       <props.icon size={24} className='shrink-0' />
       <span>{props.text}</span>
     </div>

src/components/Button.jsx

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types'
 import { focusStyle } from '../styles/theme'
 import Loading from './Loading'
-import classNames from 'classnames'
+import clsx from 'clsx'
 
 const Button = (props) => {
   const colourVariants = ['grey', 'red', 'green', 'black']
 
-  const className = classNames(`
+  const className = clsx(`
     disabled:opacity-40
     disabled:cursor-not-allowed
     transition-colors

src/components/Checkbox.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import { IconCheck } from '@tabler/icons-react'
 import { focusStyle } from '../styles/theme'
 
@@ -10,7 +10,7 @@ export default function Checkbox({ id, checked, onChange, labelContent, inputRef
         <input
           id={id}
           ref={inputRef}
-          className={classNames(focusStyle, 'peer appearance-none align-text-top h-[20px] w-[20px] rounded-sm border border-gray-500 checked:border-indigo-400 bg-gray-600 checked:bg-indigo-500')}
+          className={clsx(focusStyle, 'peer appearance-none align-text-top h-[20px] w-[20px] rounded-sm border border-gray-500 checked:border-indigo-400 bg-gray-600 checked:bg-indigo-500')}
           type='checkbox'
           checked={checked}
           onChange={(e) => onChange(e.target.checked)}

src/components/ColourfulCheckbox.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import { IconCheck } from '@tabler/icons-react'
 import { hiddenInputStyle, labelFocusStyle } from '../styles/theme'
 
@@ -20,7 +20,7 @@ const ColourfulCheckbox = (props) => {
 
       <label
         htmlFor={props.id}
-        className={classNames('px-2 py-1 rounded block mb-2 bg-gray-900 border-r-8 cursor-pointer hover:bg-gray-800 transition-all', { [labelFocusStyle]: focus })}
+        className={clsx('px-2 py-1 rounded block mb-2 bg-gray-900 border-r-8 cursor-pointer hover:bg-gray-800 transition-all', { [labelFocusStyle]: focus })}
         style={{ borderColor: props.colour }}
       >
         <span className='inline-block rounded w-4 h-4 bg-white align-text-bottom text-black active:bg-gray-300 transition-colors'>

src/components/DevDataStatus.jsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import clsx from 'clsx'
 import { useRecoilValue } from 'recoil'
 import devDataState from '../state/devDataState'
 import SecondaryTitle from './SecondaryTitle'
@@ -10,7 +10,7 @@ function DevDataStatus() {
   return (
     <div className='space-y-4'>
       <SecondaryTitle className='mt-4 md:mt-0'>Dev data is currently
-        <span className={classNames('font-semibold', { 'text-orange-500': includeDevData })}>
+        <span className={clsx('font-semibold', { 'text-orange-500': includeDevData })}>
           {' '}{includeDevData ? 'enabled' : 'not enabled'}
         </span>
       </SecondaryTitle>

src/components/GameSwitcher.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { IconChevronDown, IconPlus } from '@tabler/icons-react'
 import Button from './Button'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import NewGame from '../modals/NewGame'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import gamesState from '../state/gamesState'
@@ -53,7 +53,7 @@ const GameSwitcher = () => {
                 const disabled = activeGame.id === game.id
 
                 return (
-                  <li key={game.name} className={classNames('border-b border-gray-300', dropdownButtonStyle, { ['!bg-transparent']: disabled })}>
+                  <li key={game.name} className={clsx('border-b border-gray-300', dropdownButtonStyle, { ['!bg-transparent']: disabled })}>
                     <Button
                       variant='bare'
                       disabled={disabled}
@@ -77,7 +77,7 @@ const GameSwitcher = () => {
             </motion.ul>
           )}
         >
-          <div className={classNames('bg-indigo-300 rounded p-2 flex items-center justify-between w-60 lg:w-80', { 'rounded-b-none': isOpen })}>
+          <div className={clsx('bg-indigo-300 rounded p-2 flex items-center justify-between w-60 lg:w-80', { 'rounded-b-none': isOpen })}>
             <div className='flex items-center'>
               <span
                 style={{ backgroundColor: randomColor({ seed: activeGame.name, luminosity: 'dark' }) }}
@@ -90,7 +90,7 @@ const GameSwitcher = () => {
 
             <div className='ml-2 md:ml-8 flex items-center'>
               <Button variant='icon' onClick={() => setOpen(!isOpen)} extra={{ 'aria-label': 'Switch games or create a new one' }}>
-                <div className={classNames('transform transition-transform', { 'rotate-180': isOpen })}>
+                <div className={clsx('transform transition-transform', { 'rotate-180': isOpen })}>
                   <IconChevronDown size={24} />
                 </div>
               </Button>

src/components/Link.jsx

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import { Link as RouterLink } from 'react-router-dom'
 import { focusStyle, linkStyle } from '../styles/theme'
-import classNames from 'classnames'
+import clsx from 'clsx'
 
 function Link({ to, state, className, children }) {
-  const linkClass = classNames(linkStyle, focusStyle, className ?? '')
+  const linkClass = clsx(linkStyle, focusStyle, className ?? '')
 
   if (to.startsWith('http')) {
     return (

src/components/MobileMenu.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import { IconArrowLeft } from '@tabler/icons-react'
 import Button from './Button'
 import { useLocation } from 'react-router-dom'
@@ -20,7 +20,7 @@ const MobileMenu = (props) => {
   }, [location.pathname, pathname, props.visible])
 
   return (
-    <div data-testid='mobile-menu' className={classNames(
+    <div data-testid='mobile-menu' className={clsx(
       'fixed transition-transform transform top-0 left-0 bg-gray-900 p-4 w-full h-full z-[999] md:hidden overflow-y-scroll',
       {
         'translate-x-0': props.visible,

src/components/Modal.jsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { IconX } from '@tabler/icons-react'
 import Button from './Button'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import usePortal from '../utils/usePortal'
 import { createPortal } from 'react-dom'
 import FocusLock from 'react-focus-lock'
@@ -28,7 +28,7 @@ const Modal = (props) => {
     <FocusLock>
       <div className='fixed w-screen md:p-4 bg-gray-900 bg-opacity-60 flex items-start md:items-center justify-center inset-0 z-50 text-black transition-colors'>
         <dialog
-          className={classNames('block w-full h-full md:h-auto md:w-[640px] bg-white md:rounded p-0', {
+          className={clsx('block w-full h-full md:h-auto md:w-[640px] bg-white md:rounded p-0', {
             'overflow-y-scroll': props.scroll,
             'overflow-y-visible': !props.scroll
           })}
@@ -38,7 +38,7 @@ const Modal = (props) => {
           <div className='p-4 border-b border-gray-200 flex items-center justify-between'>
             <h2
               id={`modal-${props.id}-label`}
-              className={classNames('text-xl font-semibold', { 'hidden': props.hideTitle })}
+              className={clsx('text-xl font-semibold', { 'hidden': props.hideTitle })}
             >
               {props.title}
             </h2>

src/components/Page.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import Title from './Title'
 import Loading from './Loading'
 import GlobalBanners from './GlobalBanners'
@@ -11,7 +11,7 @@ function Page({ title, showBackButton, isLoading, containerClassName, extraTitle
 
       <GlobalBanners />
 
-      <div className={classNames('space-y-8', containerClassName)}>
+      <div className={clsx('space-y-8', containerClassName)}>
         <div className='flex items-center'>
           <Title showBackButton={showBackButton}>{title}</Title>
 

src/components/Pagination.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import Button from './Button'
 
 const Pagination = ({ count, pageState, itemsPerPage }) => {
@@ -17,10 +17,11 @@ const Pagination = ({ count, pageState, itemsPerPage }) => {
           <li key={val}>
             <Button
               variant='bare'
-              className={classNames(
+              className={clsx(
                 'py-2 w-8 ml-1 text-black text-center rounded-sm',
                 { 'bg-white': page !== idx },
-                { 'bg-indigo-500 !text-white': page === idx
+                {
+                  'bg-indigo-500 !text-white': page === idx
                 })}
               onClick={() => setPage(idx)}
             >

src/components/PropsEditor.jsx

@@ -7,7 +7,7 @@ import ErrorMessage from './ErrorMessage'
 import buildError from '../utils/buildError'
 import TableCell from './tables/TableCell'
 import TableBody from './tables/TableBody'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import Table from './tables/Table'
 import SecondaryTitle from './SecondaryTitle'
 import { isMetaProp, metaPropKeyMap } from '../constants/metaProps'
@@ -103,7 +103,7 @@ export default function PropsEditor({ startingProps, onSave, noPropsMessage }) {
           <Table columns={['Property', 'Value', '']}>
             <TableBody
               iterator={metaProps}
-              configureClassNames={(prop, idx) => ({
+              configureClassnames={(prop, idx) => ({
                 'bg-orange-600': prop.key === 'META_DEV_BUILD' && idx % 2 !== 0,
                 'bg-orange-500': prop.key === 'META_DEV_BUILD' && idx % 2 === 0
               })}
@@ -131,7 +131,7 @@ export default function PropsEditor({ startingProps, onSave, noPropsMessage }) {
             <TableBody iterator={existingProps}>
               {(prop) => (
                 <>
-                  <TableCell className={classNames('min-w-80', { '!rounded-bl-none': newProps.length > 0 })}>{prop.key}</TableCell>
+                  <TableCell className={clsx('min-w-80', { '!rounded-bl-none': newProps.length > 0 })}>{prop.key}</TableCell>
                   <TableCell className='min-w-80'>
                     <TextInput
                       id={`edit-${prop.key}`}
@@ -141,7 +141,7 @@ export default function PropsEditor({ startingProps, onSave, noPropsMessage }) {
                       value={prop.value}
                     />
                   </TableCell>
-                  <TableCell className={classNames({ '!rounded-br-none': newProps.length > 0 })}>
+                  <TableCell className={clsx({ '!rounded-br-none': newProps.length > 0 })}>
                     <Button
                       variant='icon'
                       className='p-1 rounded-full bg-indigo-900 ml-auto'

src/components/RadioGroup.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import { hiddenInputStyle, labelFocusStyle } from '../styles/theme'
 
 function RadioGroup({ label, name, options, onChange, value, info }) {
@@ -30,19 +30,19 @@ function RadioGroup({ label, name, options, onChange, value, info }) {
 
               <label
                 htmlFor={`${name}${idx}`}
-                className={classNames(
+                className={clsx(
                   'block font-semibold border border-gray-300 p-2 rounded cursor-pointer transition-colors hover:bg-gray-100',
                   { 'bg-indigo-500 hover:!bg-indigo-500 border-indigo-500': selected },
                   { [labelFocusStyle]: option.value === focusedValue }
                 )}
               >
-                <span className={classNames('inline-block relative rounded-full w-4 h-4 bg-white align-text-bottom border border-gray-300', { 'border-indigo-500': selected })}>
+                <span className={clsx('inline-block relative rounded-full w-4 h-4 bg-white align-text-bottom border border-gray-300', { 'border-indigo-500': selected })}>
                   {selected &&
                     <span className='absolute inset-0 rounded-full bg-indigo-300 m-0.5' />
                   }
                 </span>
 
-                <span className={classNames('ml-1', { 'text-white': selected })}>{option.label}</span>
+                <span className={clsx('ml-1', { 'text-white': selected })}>{option.label}</span>
               </label>
             </div>
           )

src/components/SecondaryNav.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import Link from './Link'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import { useLocation } from 'react-router-dom'
 import canViewPage from '../utils/canViewPage'
 import userState from '../state/userState'
@@ -21,14 +21,14 @@ function SecondaryNav({ routes }) {
 
           return <li
             key={to}
-            className={classNames('shrink-0 relative after:content-[""] after:absolute after:top-[38px] after:left-0 after:h-0.5 after:w-full', {
+            className={clsx('shrink-0 relative after:content-[""] after:absolute after:top-[38px] after:left-0 after:h-0.5 after:w-full', {
               'after:bg-white': active,
               'hover:after:bg-indigo-300': !active
             })}
           >
             <Link
               to={to}
-              className={classNames('!no-underline', { '!text-white': active, '!text-indigo-300': !active })}
+              className={clsx('!no-underline', { '!text-white': active, '!text-indigo-300': !active })}
             >
               {title}
             </Link>

src/components/SecondaryTitle.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import clsx from 'clsx'
 
 export default function SecondaryTitle({ className, children }) {
-  return <h2 className={classNames('text-2xl', className)}>{children}</h2>
+  return <h2 className={clsx('text-2xl', className)}>{children}</h2>
 }
 
 SecondaryTitle.propTypes = {

src/components/ServicesLink.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import { Link as RouterLink, useLocation } from 'react-router-dom'
 import { focusStyle } from '../styles/theme'
 import canViewPage from '../utils/canViewPage'
@@ -100,7 +100,7 @@ function ServicesLink() {
             {services.filter(({ route }) => canViewPage(user, route)).map(({ name, desc, icon: Icon, route }) => (
               <li key={name}>
                 {showServicesMenu &&
-                  <RouterLink to={route} className={classNames('group block p-4 rounded transition-colors hover:bg-gray-700 focus:bg-gray-700 space-y-2', focusStyle)}>
+                  <RouterLink to={route} className={clsx('group block p-4 rounded transition-colors hover:bg-gray-700 focus:bg-gray-700 space-y-2', focusStyle)}>
                     <p className='font-bold text-white group-hover:text-indigo-300 group-focus:text-indigo-300 text-sm md:text-base'>
                       <Icon size={16} className='inline-block mb-1 mr-1' />
                       {name}
@@ -117,7 +117,7 @@ function ServicesLink() {
           <LinkButton onClick={() => setShowServicesMenu(!showServicesMenu)}>
             <div className='flex sm:flex-row-reverse items-center'>
               Services
-              <IconCaretDown size={20} className={classNames('ml-1 sm:ml-0 sm:mr-1 fill-current transform transition-transform', { 'rotate-180': showServicesMenu })} />
+              <IconCaretDown size={20} className={clsx('ml-1 sm:ml-0 sm:mr-1 fill-current transform transition-transform', { 'rotate-180': showServicesMenu })} />
             </div>
           </LinkButton>
         </div>

src/components/TextInput.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import PropTypes from 'prop-types'
 import { focusStyle } from '../styles/theme'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import { IconAlertCircle } from '@tabler/icons-react'
 import requiredIf from 'react-required-if'
 
@@ -11,7 +11,7 @@ function TextInput(props) {
   const errors = props.errors?.filter((err) => err !== null && err !== undefined) ?? []
   const showErrorHighlight = !hasFocus && errors.length > 0
 
-  const inputClassName = classNames(`
+  const inputClassName = clsx(`
     block
     p-2
     w-full
@@ -28,7 +28,7 @@ function TextInput(props) {
 
   return (
     <div>
-      <div className={classNames('w-full inline-block', props.containerClassName)}>
+      <div className={clsx('w-full inline-block', props.containerClassName)}>
         {props.label &&
           <label htmlFor={props.id} className='flex justify-between items-end font-semibold mb-2'>
             {props.label}
@@ -62,7 +62,7 @@ function TextInput(props) {
 
       {errors.filter((err) => {
         // filter out empty string errors so they dont render and create dead space
-        return  Boolean(err)
+        return Boolean(err)
       }).map((error, idx) => (
         <p role='alert' key={idx} className='text-red-500 font-medium mt-2'>{error}</p>
       ))}