JSS style migration with codemod

package.json

@@ -14,7 +14,6 @@
     "@fontsource/roboto": "^5.0.5",
     "@mui/icons-material": "^5.14.0",
     "@mui/material": "^5.14.0",
-    "@mui/styles": "^5.14.4",
     "@mui/x-data-grid": "^6.10.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",

src/components/BuildList/index.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from "react";
-import { makeStyles, createStyles } from "@mui/styles";
+import { styled } from "@mui/material/styles";
 import {
   List,
   ListItemButton,
@@ -34,26 +34,34 @@ import { useNavigate } from "react-router";
 import { buildTestRunLocation } from "../../_helpers/route.helpers";
 import { Tooltip } from "../Tooltip";
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    listContainer: {
-      height: "100%",
-      overflow: "auto",
-    },
-    listItemSecondaryAction: {
-      visibility: "hidden",
-    },
-    listItem: {
-      paddingRight: 48,
-      "&:hover $listItemSecondaryAction": {
-        visibility: "inherit",
-      },
+const PREFIX = "index";
+
+const classes = {
+  listContainer: `${PREFIX}-listContainer`,
+  listItemSecondaryAction: `${PREFIX}-listItemSecondaryAction`,
+  listItem: `${PREFIX}-listItem`,
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")(() => ({
+  [`& .${classes.listContainer}`]: {
+    height: "100%",
+    overflow: "auto",
+  },
+
+  [`& .${classes.listItemSecondaryAction}`]: {
+    visibility: "hidden",
+  },
+
+  [`& .${classes.listItem}`]: {
+    paddingRight: 48,
+    "&:hover $listItemSecondaryAction": {
+      visibility: "inherit",
     },
-  }),
-);
+  },
+}));
 
 const BuildList: FunctionComponent = () => {
-  const classes = useStyles();
   const navigate = useNavigate();
   const { buildList, selectedBuild, loading, total, take } = useBuildState();
   const buildDispatch = useBuildDispatch();
@@ -117,7 +125,7 @@ const BuildList: FunctionComponent = () => {
   }, [handlePaginationChange]);
 
   return (
-    <>
+    <Root>
       <Box height="91%" overflow="auto">
         <List>
           {loading ? (
@@ -203,7 +211,6 @@ const BuildList: FunctionComponent = () => {
           </Grid>
         </Grid>
       </Box>
-
       {menuBuild && (
         <Menu anchorEl={anchorEl} open={!!menuBuild} onClose={handleMenuClose}>
           {menuBuild.isRunning && (
@@ -315,7 +322,7 @@ const BuildList: FunctionComponent = () => {
           }}
         />
       )}
-    </>
+    </Root>
   );
 };
 

src/components/CommentsPopper.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@mui/styles";
+import { styled } from "@mui/material/styles";
 import {
   Button,
   Popper,
@@ -15,11 +15,20 @@ import {
   bindPopper,
 } from "material-ui-popup-state/hooks";
 
-const useStyles = makeStyles((theme: Theme) => ({
-  popperContainer: {
+const PREFIX = "CommentsPopper";
+
+const classes = {
+  popperContainer: `${PREFIX}-popperContainer`,
+  contentContainer: `${PREFIX}-contentContainer`,
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")(({ theme: Theme }) => ({
+  [`& .${classes.popperContainer}`]: {
     zIndex: 1400,
   },
-  contentContainer: {
+
+  [`& .${classes.contentContainer}`]: {
     padding: theme.spacing(2),
   },
 }));
@@ -33,7 +42,6 @@ export const CommentsPopper: React.FunctionComponent<IProps> = ({
   text,
   onSave,
 }) => {
-  const classes = useStyles();
   const popupState = usePopupState({
     variant: "popper",
     popupId: "commentPopper",
@@ -44,7 +52,7 @@ export const CommentsPopper: React.FunctionComponent<IProps> = ({
   React.useEffect(() => setComment(text || ""), [text]);
 
   return (
-    <>
+    <Root>
       <Badge
         color="secondary"
         variant="dot"
@@ -97,6 +105,6 @@ export const CommentsPopper: React.FunctionComponent<IProps> = ({
           </Fade>
         )}
       </Popper>
-    </>
+    </Root>
   );
 };

src/components/ProjectSelect.tsx

@@ -1,11 +1,9 @@
 import React, { FunctionComponent } from "react";
-import { makeStyles, createStyles } from "@mui/styles";
 import {
   FormControl,
   InputLabel,
   MenuItem,
   Select,
-  type Theme,
   type SelectChangeEvent,
 } from "@mui/material";
 import {
@@ -14,22 +12,10 @@ import {
   selectProject,
 } from "../contexts";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    formControl: {
-      width: "100%",
-    },
-    input: {
-      margin: theme.spacing(1),
-    },
-  }),
-);
-
 const ProjectSelect: FunctionComponent<{
   projectId?: string;
   onProjectSelect: (id: string) => void;
 }> = ({ projectId, onProjectSelect }) => {
-  const classes = useStyles();
   const { projectList, selectedProjectId } = useProjectState();
   const projectDispatch = useProjectDispatch();
 
@@ -42,16 +28,16 @@ const ProjectSelect: FunctionComponent<{
   return (
     <>
       {projectList.length > 0 && (
-        <FormControl variant="standard" className={classes.formControl}>
+        <FormControl variant="standard" sx={{width: "100%"}}>
           <InputLabel id="projectSelect" shrink>
             Project
           </InputLabel>
           <Select
             variant="standard"
             id="project-select"
             labelId="projectSelect"
-            className={classes.input}
             displayEmpty
+            sx={{m: "16px"}}
             value={selectedProjectId ?? ""}
             onChange={(event: SelectChangeEvent<HTMLInputElement>) =>
               onProjectSelect(event.target.value as string)

src/components/TestDetailsDialog/ApproveRejectButtons.tsx

@@ -1,14 +1,20 @@
 import { Chip, Button } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { useSnackbar } from "notistack";
 import { useHotkeys } from "react-hotkeys-hook";
 import React from "react";
 import { testRunService } from "../../services";
 import { TestRun } from "../../types";
 import { Tooltip } from "../Tooltip";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "ApproveRejectButtons";
 
-const useStyles = makeStyles(() => ({
-  actionButton: {
+const classes = {
+  actionButton: `${PREFIX}-actionButton`,
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")(() => ({
+  [`& .${classes.actionButton}`]: {
     width: 120,
     marginLeft: 4,
     marginRight: 4,
@@ -21,7 +27,6 @@ export const ApproveRejectButtons: React.FunctionComponent<{
   afterReject?: () => void;
 }> = ({ testRun, afterApprove, afterReject }) => {
   const { enqueueSnackbar } = useSnackbar();
-  const classes = useStyles();
 
   const approve = () => {
     testRunService
@@ -59,7 +64,7 @@ export const ApproveRejectButtons: React.FunctionComponent<{
   useHotkeys("x", reject, [testRun]);
 
   return (
-    <>
+    <Root>
       {testRun.merge && (
         <Tooltip title="Will replace target branch baseline if accepted">
           <Chip
@@ -87,6 +92,6 @@ export const ApproveRejectButtons: React.FunctionComponent<{
           Reject
         </Button>
       </Tooltip>
-    </>
+    </Root>
   );
 };

src/components/TestDetailsDialog/ArrowButtons.tsx

@@ -1,21 +1,29 @@
 import { IconButton } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { NavigateNext, NavigateBefore } from "@mui/icons-material";
 import React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { TestRun } from "../../types";
 import { Tooltip } from "../Tooltip";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "ArrowButtons";
 
-const useStyles = makeStyles(() => ({
-  button: {
+const classes = {
+  button: `${PREFIX}-button`,
+  icon: `${PREFIX}-icon`,
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")(() => ({
+  [`& .${classes.button}`]: {
     width: 64,
     height: 64,
     padding: 0,
     position: "fixed",
     top: "50%",
     zIndex: 4000,
   },
-  icon: {
+
+  [`& .${classes.icon}`]: {
     width: 64,
     height: 64,
   },
@@ -26,8 +34,6 @@ export const ArrowButtons: React.FunctionComponent<{
   selectedTestRunIndex: number;
   handleNavigation: (testRunId: string) => void;
 }> = ({ testRuns, selectedTestRunIndex, handleNavigation }) => {
-  const classes = useStyles();
-
   const navigateNext = () => {
     if (testRuns.length > selectedTestRunIndex + 1) {
       const next = testRuns[selectedTestRunIndex + 1];
@@ -46,7 +52,7 @@ export const ArrowButtons: React.FunctionComponent<{
   useHotkeys("left", navigateBefore, [selectedTestRunIndex, handleNavigation]);
 
   return (
-    <>
+    <Root>
       {testRuns.length > selectedTestRunIndex + 1 && (
         <Tooltip title={"Hotkey: ArrowRight"}>
           <IconButton
@@ -77,6 +83,6 @@ export const ArrowButtons: React.FunctionComponent<{
           </IconButton>
         </Tooltip>
       )}
-    </>
+    </Root>
   );
 };

src/components/TestDetailsDialog/DrawArea.tsx

@@ -1,26 +1,36 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { FunctionComponent, useCallback } from "react";
+import { styled } from "@mui/material/styles";
 import { Stage, Layer, Image } from "react-konva";
 import Rectangle, { MIN_RECT_SIDE_PIXEL } from "../Rectangle";
 import { IgnoreArea } from "../../types/ignoreArea";
 import { Grid, CircularProgress, type Theme } from "@mui/material";
 import { NoImagePlaceholder } from "./NoImageAvailable";
 import Konva from "konva";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "DrawArea";
 
-const useStyles = makeStyles((theme: Theme) => ({
-  canvasContainer: {
+const classes = {
+  canvasContainer: `${PREFIX}-canvasContainer`,
+  imageDetailsContainer: `${PREFIX}-imageDetailsContainer`,
+  progressContainer: `${PREFIX}-progressContainer`,
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")(({ theme: Theme }) => ({
+  [`& .${classes.canvasContainer}`]: {
     overflow: "auto",
     backgroundColor: "white",
   },
-  imageDetailsContainer: {
+
+  [`& .${classes.imageDetailsContainer}`]: {
     position: "absolute",
     backgroundColor: "white",
     zIndex: 1,
     padding: theme.spacing(1),
     height: "48px",
   },
-  progressContainer: {
+
+  [`& .${classes.progressContainer}`]: {
     minHeight: "300px",
   },
 }));
@@ -72,7 +82,6 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
   stageScrollPosState,
   drawModeState,
 }) => {
-  const classes = useStyles();
   const [stageInitPos, setStageInitPos] = stageInitPosState;
   const [stageOffset, setStageOffset] = stageOffsetState;
   const [stagePos, setStagePos] = stagePosState;
@@ -339,5 +348,5 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
   );
 
   // TODO: Separate SVG with reason...
-  return <>{imageName ? imageCanvas() : <NoImagePlaceholder />}</>;
+  return <Root>{imageName ? imageCanvas() : <NoImagePlaceholder />}</Root>;
 };