refactor: [M3-7588] - Remove classnames and @types/classnames (li…

…node#10029) * remove `classnames` and `@types/classnames` * Added changeset: Remove `classnames` and `@types/classnames` --------- Co-authored-by: Banks Nussman <banks@nussman.us>
bnussman · Jan 4, 2024 · 98fac84 · 98fac84
1 parent 7246be9
commit 98fac84
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 41 deletions.
diff --git a/packages/manager/.changeset/pr-10029-tech-stories-1704318402385.md b/packages/manager/.changeset/pr-10029-tech-stories-1704318402385.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Remove `classnames` and `@types/classnames` ([#10029](https://github.com/linode/manager/pull/10029))
diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -28,7 +28,6 @@
     "braintree-web": "^3.92.2",
     "chart.js": "~2.9.4",
     "chartjs-adapter-luxon": "^0.2.1",
-    "classnames": "^2.2.5",
     "copy-to-clipboard": "^3.0.8",
     "country-region-data": "^1.4.5",
     "flag-icons": "^6.6.5",
@@ -130,7 +129,6 @@
     "@testing-library/user-event": "^12.1.1",
     "@types/braintree-web": "^3.75.23",
     "@types/chart.js": "^2.9.21",
-    "@types/classnames": "^2.2.3",
     "@types/css-mediaquery": "^0.1.1",
     "@types/enzyme": "^3.9.3",
     "@types/he": "^1.1.0",

diff --git a/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx b/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
-import cx from 'classnames';
 import * as React from 'react';
+import { useStyles } from 'tss-react/mui';
 
 import { Button, ButtonProps } from 'src/components/Button/Button';
 
@@ -33,10 +33,11 @@ export const ActionsPanel = (props: ActionPanelProps) => {
     className,
     primaryButtonProps,
     secondaryButtonProps,
-
     ...rest
   } = props;
 
+  const { cx } = useStyles();
+
   const primaryButtonDataQAProp = `data-qa-${primaryButtonProps?.['data-testid']}`;
   const secondaryButtonDataQAProp = `data-qa-${secondaryButtonProps?.['data-testid']}`;
 

diff --git a/packages/manager/src/components/EnhancedSelect/Select.tsx b/packages/manager/src/components/EnhancedSelect/Select.tsx
@@ -1,5 +1,4 @@
 import { Theme, useTheme } from '@mui/material';
-import classNames from 'classnames';
 import * as React from 'react';
 import ReactSelect, {
   ActionMeta,
@@ -167,7 +166,7 @@ const Select = <
   props: BaseSelectProps<I, IsMulti, Clearable>
 ) => {
   const theme = useTheme<Theme>();
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const {
     blurInputOnSelect,
     className,
@@ -273,7 +272,7 @@ const Select = <
         InputLabelProps: {
           shrink: true,
         },
-        className: classNames(
+        className: cx(
           {
             [classes.inline]: inline,
             [classes.medium]: medium,
@@ -290,7 +289,7 @@ const Select = <
         required,
       }}
       blurInputOnSelect={blurInputOnSelect}
-      className={classNames(classes.root, className)}
+      className={cx(classes.root, className)}
       classNamePrefix="react-select"
       classes={classes}
       components={combinedComponents}

diff --git a/packages/manager/src/components/GravatarByEmail.tsx b/packages/manager/src/components/GravatarByEmail.tsx
@@ -1,6 +1,5 @@
 import Avatar from '@mui/material/Avatar';
 import { styled } from '@mui/material/styles';
-import classNames from 'classnames';
 import * as React from 'react';
 
 import UserIcon from 'src/assets/icons/account.svg';
@@ -20,7 +19,7 @@ export const GravatarByEmail = (props: Props) => {
   return (
     <StyledAvatar
       alt={`Avatar for user ${email}`}
-      className={classNames(className)}
+      className={className}
       src={url}
       sx={{ height, width }}
     >

diff --git a/packages/manager/src/components/GravatarByUsername.tsx b/packages/manager/src/components/GravatarByUsername.tsx
@@ -1,6 +1,5 @@
 import Avatar from '@mui/material/Avatar';
 import { styled } from '@mui/material/styles';
-import classNames from 'classnames';
 import * as React from 'react';
 
 import UserIcon from 'src/assets/icons/account.svg';
@@ -20,10 +19,10 @@ export const GravatarByUsername = (props: Props) => {
   return (
     <StyledAvatar
       alt={`Avatar for user ${username}`}
-      className={classNames(className)}
+      className={className}
       src={url}
     >
-      <UserIcon className={classNames(className)} />
+      <UserIcon className={className} />
     </StyledAvatar>
   );
 };

diff --git a/packages/manager/src/components/PrimaryNav/NavItem.tsx b/packages/manager/src/components/PrimaryNav/NavItem.tsx
@@ -1,6 +1,6 @@
-import classNames from 'classnames';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { useStyles } from 'tss-react/mui';
 
 import { Divider } from 'src/components/Divider';
 import { ListItem } from 'src/components/ListItem';
@@ -39,6 +39,8 @@ export const NavItem = React.memo((props: Props) => {
     onClick,
   } = props;
 
+  const { cx } = useStyles();
+
   if (!onClick && !href) {
     throw new Error('A Primary Link needs either an href or an onClick prop');
   }
@@ -51,17 +53,14 @@ export const NavItem = React.memo((props: Props) => {
     <React.Fragment>
       {href ? (
         <Link
-          className={classNames({
-            [linkClasses(href)]: true,
-            listItemCollapsed: isCollapsed,
-          })}
+          className={linkClasses(href)}
           data-qa-nav-item={QAKey}
           onClick={closeMenu}
           to={href}
         >
           {icon && isCollapsed && <div className="icon">{icon}</div>}
           <ListItemText
-            className={classNames({
+            className={cx({
               hiddenWhenCollapsed: isCollapsed,
               [listItemClasses]: true,
               primaryNavLink: true,

diff --git a/packages/manager/src/features/Help/Panels/SearchItem.tsx b/packages/manager/src/features/Help/Panels/SearchItem.tsx
@@ -1,6 +1,6 @@
-import classNames from 'classnames';
 import * as React from 'react';
 import { OptionProps } from 'react-select';
+import { useStyles } from 'tss-react/mui';
 
 import Arrow from 'src/assets/icons/diagonalArrow.svg';
 import { Option } from 'src/components/EnhancedSelect/components/Option';
@@ -24,6 +24,8 @@ export const SearchItem = (props: Props) => {
     }
   };
 
+  const { cx } = useStyles();
+
   const {
     data,
     isFocused,
@@ -34,7 +36,7 @@ export const SearchItem = (props: Props) => {
 
   return (
     <Option
-      className={classNames({
+      className={cx({
         [classes.algoliaRoot]: true,
         [classes.selectedMenuItem]: isFocused,
       })}

diff --git a/packages/manager/src/features/NotificationCenter/NotificationData/RenderEvent.tsx b/packages/manager/src/features/NotificationCenter/NotificationData/RenderEvent.tsx
@@ -1,5 +1,4 @@
 import { Event } from '@linode/api-v4/lib/account/types';
-import classNames from 'classnames';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
@@ -22,11 +21,11 @@ interface RenderEventProps {
 }
 
 export const RenderEvent = React.memo((props: RenderEventProps) => {
-  const { classes } = useRenderEventStyles();
+  const { classes, cx } = useRenderEventStyles();
   const { event } = props;
   const { message } = useEventInfo(event);
 
-  const unseenEventClass = classNames({ [classes.unseenEvent]: !event.seen });
+  const unseenEventClass = cx({ [classes.unseenEvent]: !event.seen });
 
   if (message === null) {
     return null;

diff --git a/packages/manager/src/features/NotificationCenter/NotificationSection.tsx b/packages/manager/src/features/NotificationCenter/NotificationSection.tsx
@@ -1,6 +1,5 @@
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import { styled } from '@mui/material/styles';
-import classNames from 'classnames';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -55,7 +54,7 @@ interface NotificationSectionProps {
 }
 
 export const NotificationSection = (props: NotificationSectionProps) => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const {
     content,
@@ -79,7 +78,7 @@ export const NotificationSection = (props: NotificationSectionProps) => {
         <>
           <Hidden smDown>
             <StyledRootContainer
-              className={classNames({
+              className={cx({
                 [classes.notificationSpacing]: isActualNotificationContainer,
               })}
             >
@@ -140,7 +139,7 @@ interface BodyProps {
 }
 
 const ContentBody = React.memo((props: BodyProps) => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const { content, count, emptyMessage, header, loading } = props;
 
@@ -181,7 +180,7 @@ const ContentBody = React.memo((props: BodyProps) => {
           >
             {showAll ? 'Collapse' : `${content.length - count} more`}
             <StyledCaret
-              className={classNames({
+              className={cx({
                 [classes.inverted]: showAll,
               })}
             />

diff --git a/yarn.lock b/yarn.lock
@@ -4296,13 +4296,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/classnames@^2.2.3":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.3.1.tgz#3c2467aa0f1a93f1f021e3b9bcf938bd5dfdc0dd"
-  integrity sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==
-  dependencies:
-    classnames "*"
-
 "@types/connect@*":
   version "3.4.35"
   resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
@@ -6428,11 +6421,6 @@ ci-info@^3.2.0, ci-info@^3.7.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
   integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
 
-classnames@*, classnames@^2.2.5:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
-  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"