Chore: Replace classnames dep with built-in helper

discretize · Sep 9, 2024 · b145a68 · b145a68
1 parent 429d888
commit b145a68
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -60,7 +60,6 @@
     "@mui/material": "^5.16.7",
     "@reduxjs/toolkit": "^2.2.7",
     "axios": "^1.7.7",
-    "classnames": "^2.5.1",
     "comlink": "^4.4.1",
     "i18next": "^23.14.0",
     "js-yaml": "^4.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/baseComponents/AffixesSelect.jsx b/src/components/baseComponents/AffixesSelect.jsx
@@ -2,7 +2,6 @@ import { CreateItem, Item } from '@discretize/gw2-ui-new';
 import CheckIcon from '@mui/icons-material/Check';
 import { Box, Chip, Divider, TextField, Typography } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
-import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -45,7 +44,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const AffixesSelect = ({ name, multiple, onChange, value: affixes }) => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const { t } = useTranslation();
 
@@ -81,7 +80,7 @@ const AffixesSelect = ({ name, multiple, onChange, value: affixes }) => {
       renderOption={({ className, ...prop }, option) => (
         <li
           {...prop}
-          className={classNames({ [classes.option]: multiple, [className]: true })}
+          className={cx({ [classes.option]: multiple, [className]: true })}
           key={option.label}
         >
           {multiple && (

diff --git a/src/components/baseComponents/ExtrasMultiselect.jsx b/src/components/baseComponents/ExtrasMultiselect.jsx
@@ -3,7 +3,6 @@ import { Item } from '@discretize/gw2-ui-new';
 import CheckIcon from '@mui/icons-material/Check';
 import { Box, Chip, Divider, ListItemText, TextField, Typography } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -37,7 +36,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const ExtrasSelect = ({ type, label, modifierData, modifierDataById: data }) => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const dispatch = useDispatch();
   const { t } = useTranslation();
   // const { language } = useI18next();
@@ -82,7 +81,7 @@ const ExtrasSelect = ({ type, label, modifierData, modifierDataById: data }) =>
         );
       }}
       renderOption={({ className, ...prop }, id) => (
-        <li {...prop} className={classNames(classes.option, className)}>
+        <li {...prop} className={cx(classes.option, className)}>
           <Box sx={{ width: 32 }}>
             {currentIds.includes(id) && <CheckIcon sx={{ fontSize: '1rem' }} />}
           </Box>

diff --git a/src/components/baseComponents/Label.jsx b/src/components/baseComponents/Label.jsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
@@ -18,8 +17,8 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 function Label({ className, children }) {
-  const { classes } = useStyles();
-  return <span className={classNames(classes.root, className)}>{children}</span>;
+  const { classes, cx } = useStyles();
+  return <span className={cx(classes.root, className)}>{children}</span>;
 }
 
 export default Label;
diff --git a/src/components/sections/buffs/Buffs.jsx b/src/components/sections/buffs/Buffs.jsx
@@ -1,7 +1,6 @@
 import { Boon, CommonEffect, Condition, Skill, Trait } from '@discretize/gw2-ui-new';
 import { firstUppercase } from '@discretize/react-discretize-components';
 import { Box, FormControl, FormGroup, FormLabel, Grid, Typography } from '@mui/material';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
@@ -31,7 +30,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const Buffs = () => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -83,7 +82,7 @@ const Buffs = () => {
                       <Typography
                         variant="body2"
                         component="div"
-                        className={classNames(classes.note, subText && classes.hasSubText)}
+                        className={cx(classes.note, subText && classes.hasSubText)}
                       >
                         {
                           // i18next-extract-mark-context-next-line {{buffText}}

diff --git a/src/components/sections/controls/Controls.jsx b/src/components/sections/controls/Controls.jsx
@@ -5,7 +5,6 @@ import EqualizerRoundedIcon from '@mui/icons-material/EqualizerRounded';
 import ErrorIcon from '@mui/icons-material/Error';
 import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
 import { Box, Button, Chip, Typography } from '@mui/material';
-import classNames from 'classnames';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector, useStore } from 'react-redux';
@@ -43,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const ControlsBox = () => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const store = useStore();
@@ -141,7 +140,7 @@ const ControlsBox = () => {
           onClick={onStopCalculate}
           disabled={status !== RUNNING}
         >
-          <Cancel className={classNames(classes.icon)} />
+          <Cancel className={cx(classes.icon)} />
           <Typography style={{ marginLeft: 8 }}>
             <Trans>Stop</Trans>
           </Typography>

diff --git a/src/components/sections/results/table/ResultTable.jsx b/src/components/sections/results/table/ResultTable.jsx
@@ -4,7 +4,6 @@ import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
-import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -76,7 +75,7 @@ const mode = (array) => {
 const emptyArray = [];
 
 const StickyHeadTable = () => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const { t } = useTranslation();
   const selectedCharacter = useSelector(getSelectedCharacter);
@@ -165,15 +164,13 @@ const StickyHeadTable = () => {
     <>
       <Box sx={{ boxShadow: 8, mb: 3 }}>
         <TableContainer
-          className={classNames(
-            classes.container,
-            tallTable ? classes.tallTable : classes.shortTable,
-          )}
+          className={cx(classes.container, tallTable ? classes.tallTable : classes.shortTable)}
         >
           <Table stickyHeader aria-label="sticky table" className={classes.tableCollapse}>
             <TableHead>
               <ResultTableHeaderRow
                 classes={classes}
+                cx={cx}
                 weaponType={weaponType}
                 infusions={infusions}
                 rankBy={rankBy}
@@ -219,10 +216,7 @@ const StickyHeadTable = () => {
           <TextDivider text={t('Saved Results')} />
           <Box sx={{ boxShadow: 8, mb: 3 }}>
             <TableContainer
-              className={classNames(
-                classes.container,
-                tallTable ? classes.tallTable : classes.shortTable,
-              )}
+              className={cx(classes.container, tallTable ? classes.tallTable : classes.shortTable)}
             >
               <Table
                 stickyHeader
@@ -232,6 +226,7 @@ const StickyHeadTable = () => {
                 <TableHead style={{ visibility: 'collapse' }}>
                   <ResultTableHeaderRow
                     classes={classes}
+                    cx={cx}
                     weaponType={weaponType}
                     infusions={infusions}
                     rankBy={rankBy}

diff --git a/src/components/sections/results/table/ResultTableHeaderRow.jsx b/src/components/sections/results/table/ResultTableHeaderRow.jsx
@@ -2,7 +2,6 @@ import { Attribute, ConsumableEffect, Item } from '@discretize/gw2-ui-new';
 import { HelperIcon } from '@discretize/react-discretize-components';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
-import classNames from 'classnames';
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { extrasTypes } from '../../../../state/slices/extras';
@@ -23,6 +22,7 @@ const extrasLabels = {
 
 const ResultTableHeaderRow = ({
   classes,
+  cx,
   weaponType = 'Two-handed',
   infusions = {},
   rankBy = 'Damage',
@@ -31,9 +31,7 @@ const ResultTableHeaderRow = ({
 }) => {
   const { t } = useTranslation();
 
-  const emptyCell = (
-    <TableCell className={classNames(classes.tablehead)} align="center" padding="none" />
-  );
+  const emptyCell = <TableCell className={cx(classes.tablehead)} align="center" padding="none" />;
   const padCellArray = (minLength, array) => {
     const resultArray =
       array.length < minLength
@@ -61,7 +59,7 @@ const ResultTableHeaderRow = ({
         maxSlotsLength,
         Slots[weaponType].map((slot) => (
           <TableCell
-            className={classNames(classes.tablehead, classes.gearColumn)}
+            className={cx(classes.tablehead, classes.gearColumn)}
             align="center"
             padding="none"
           >
@@ -73,7 +71,7 @@ const ResultTableHeaderRow = ({
         2,
         Object.keys(infusions).map((type) => (
           <TableCell
-            className={classNames(classes.tablehead, classes.infusionColumn)}
+            className={cx(classes.tablehead, classes.infusionColumn)}
             align="center"
             padding="none"
           >
@@ -88,7 +86,7 @@ const ResultTableHeaderRow = ({
           .filter((type) => displayExtras[type])
           .map((type) => (
             <TableCell
-              className={classNames(classes.tablehead, classes.extrasColumn)}
+              className={cx(classes.tablehead, classes.extrasColumn)}
               align="center"
               padding="none"
             >
@@ -99,7 +97,7 @@ const ResultTableHeaderRow = ({
 
       {displayAttributes.map((attribute) => (
         <TableCell
-          className={classNames(classes.tablehead, classes.attributesColumn)}
+          className={cx(classes.tablehead, classes.attributesColumn)}
           align="center"
           padding="none"
         >