chore: add clsx and replace class name building

Author: jescalada

package-lock.json

@@ -46,7 +46,7 @@
     "axios": "^1.6.0",
     "bcryptjs": "^3.0.2",
     "bit-mask": "^1.0.2",
-    "classnames": "2.5.1",
+    "clsx": "^2.1.1",
     "concurrently": "^9.0.0",
     "connect-mongo": "^5.1.0",
     "cors": "^2.8.5",

package.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardStyle';
 
@@ -23,7 +23,7 @@ const Card: React.FC<CardProps> = ({
 }) => {
   const classes = useStyles();
 
-  const cardClasses = classNames({
+  const cardClasses = clsx({
     [classes.card]: true,
     [classes.cardPlain]: plain,
     [classes.cardProfile]: profile,

src/ui/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardAvatarStyle';
 
@@ -21,7 +21,7 @@ const CardAvatar: React.FC<CardAvatarProps> = ({
 }) => {
   const classes = useStyles();
 
-  const cardAvatarClasses = classNames({
+  const cardAvatarClasses = clsx({
     [classes.cardAvatar]: true,
     [classes.cardAvatarProfile]: profile,
     [classes.cardAvatarPlain]: plain,

src/ui/components/Card/CardAvatar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardBodyStyle';
 
@@ -21,7 +21,7 @@ const CardBody: React.FC<CardBodyProps> = ({
 }) => {
   const classes = useStyles();
 
-  const cardBodyClasses = classNames({
+  const cardBodyClasses = clsx({
     [classes.cardBody]: true,
     [classes.cardBodyPlain]: plain,
     [classes.cardBodyProfile]: profile,

src/ui/components/Card/CardBody.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardFooterStyle';
 
@@ -25,7 +25,7 @@ const CardFooter: React.FC<CardFooterProps> = ({
 }) => {
   const classes = useStyles();
 
-  const cardFooterClasses = classNames({
+  const cardFooterClasses = clsx({
     [classes.cardFooter]: true,
     [classes.cardFooterPlain]: plain,
     [classes.cardFooterProfile]: profile,

src/ui/components/Card/CardFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardHeaderStyle';
 
@@ -20,7 +20,7 @@ const CardHeader: React.FC<CardHeaderProps> = (props) => {
   const classes = useStyles();
   const { className, children, color, plain, stats, icon, ...rest } = props;
 
-  const cardHeaderClasses = classNames({
+  const cardHeaderClasses = clsx({
     [classes.cardHeader]: true,
     [color ? classes[`${color}CardHeader`] : '']: color,
     [classes.cardHeaderPlain]: plain,

src/ui/components/Card/CardHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardIconStyle';
 
@@ -18,7 +18,7 @@ const CardIcon: React.FC<CardIconProps> = (props) => {
   const classes = useStyles();
   const { className, children, color, ...rest } = props;
 
-  const cardIconClasses = classNames({
+  const cardIconClasses = clsx({
     [classes.cardIcon]: true,
     [color ? classes[`${color}CardHeader`] : '']: color,
     [className || '']: className !== undefined,

src/ui/components/Card/CardIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import styles from '../../assets/jss/material-dashboard-react/components/buttonStyle';
@@ -48,7 +48,7 @@ export default function RegularButton(props: RegularButtonProps) {
     ...rest
   } = props;
 
-  const btnClasses = classNames({
+  const btnClasses = clsx({
     [classes.button]: true,
     [classes[size as Size]]: size,
     [classes[color as Color]]: color,

src/ui/components/CustomButtons/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import FormControl from '@material-ui/core/FormControl';
@@ -15,33 +15,33 @@ export default function CustomInput(props) {
   const classes = useStyles();
   const { formControlProps, labelText, id, labelProps, inputProps, error, success } = props;
 
-  const labelClasses = classNames({
-    [' ' + classes.labelRootError]: error,
-    [' ' + classes.labelRootSuccess]: success && !error,
+  const labelClasses = clsx({
+    [classes.labelRootError]: error,
+    [classes.labelRootSuccess]: success && !error,
   });
-  const underlineClasses = classNames({
+  const underlineClasses = clsx({
     [classes.underlineError]: error,
     [classes.underlineSuccess]: success && !error,
     [classes.underline]: true,
   });
-  const marginTop = classNames({
+  const marginTop = clsx({
     [classes.marginTop]: labelText === undefined,
   });
 
   const generateIcon = () => {
     if (error) {
-      return <Clear className={classes.feedback + ' ' + classes.labelRootError} />;
+      return <Clear className={clsx(classes.feedback, classes.labelRootError)} />;
     }
     if (success) {
-      return <Check className={classes.feedback + ' ' + classes.labelRootSuccess} />;
+      return <Check className={clsx(classes.feedback, classes.labelRootSuccess)} />;
     }
     return null;
   };
 
   return (
     <FormControl
       {...formControlProps}
-      className={formControlProps.className + ' ' + classes.formControl}
+      className={clsx(formControlProps.className, classes.formControl)}
     >
       {labelText !== undefined ? (
         <InputLabel className={classes.labelRoot + labelClasses} htmlFor={id} {...labelProps}>