Upgrade MUI to v5; replace material-table and react-swipeable-views

package.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.10.2",
-    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/lab": "^5.0.0-alpha.176",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
     "@sentry/react": "^5.24.2",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.5",
     "@testing-library/user-event": "^7.1.2",
@@ -17,13 +21,17 @@
     "@types/react-dom": "^17.0.26",
     "@types/react-map-gl": "^5.2.7",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-swipeable-views": "^0.13.0",
     "@types/react-window": "^1.8.2",
     "@types/webfontloader": "^1.6.32",
     "airtable": "^0.10.1",
+    "clsx": "^1.1.1",
+    "filefy": "^0.1.10",
+    "history": "^5.0.0",
     "jest-canvas-mock": "^2.2.0",
+    "jspdf": "^2.1.0",
+    "jspdf-autotable": "^3.5.13",
+    "mapbox-gl": "^1.11.1",
     "match-sorter": "^4.2.0",
-    "material-table": "1.68.1",
     "react": "^17.0.2",
     "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.2",
@@ -35,7 +43,6 @@
     "react-query-devtools": "^2.6.3",
     "react-router-dom": "^5.2.0",
     "react-share": "^4.2.1",
-    "react-swipeable-views": "^0.13.9",
     "react-transition-group": "^4.4.1",
     "react-window": "^1.8.5",
     "simple-statistics": "^7.3.2",
@@ -86,15 +93,6 @@
       "last 1 safari version"
     ]
   },
-  "peerDependencies": {
-    "@material-ui/styles": "^4.10.0",
-    "clsx": "^1.1.1",
-    "filefy": "^0.1.10",
-    "history": "^5.0.0",
-    "jspdf": "^2.1.0",
-    "jspdf-autotable": "^3.5.13",
-    "mapbox-gl": "^1.11.1"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

src/components/AppWrap.tsx

@@ -1,7 +1,9 @@
 import React, { FC, useState } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 import { InteractiveMap } from 'react-map-gl'
-import { Hidden } from '@material-ui/core'
+import { Hidden } from '@mui/material'
 
 import { panelWidths } from 'components/panels/config'
 import { PanelWrap, usePanelState, ShowPanelBtn } from 'components/panels'
@@ -45,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) =>
         [theme.breakpoints.up('xl')]: {
           left: (props: Style) => (props.open ? panelWidths.midLarge : 0),
         },
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
           top: PANEL_TITLE_BAR_HT_MOBILE,
           width: '100%',
           bottom: (props: Style) =>

src/components/about/AboutPageView.tsx

@@ -1,6 +1,9 @@
 import React, { FC } from 'react'
 import { useQuery } from 'react-query'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 
 import { LoadingIndicator } from 'components/generic/modals'
 import { AboutPageProps, WpApiPageResponse } from './types'
@@ -19,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) =>
         boxShadow: theme.shadows[8],
         // Prevent screenshots from getting lost in Paper bg if same color:
         // outline: 'solid 1px hsl(0deg 0% 40%)',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
           margin: '0.5rem 0',
         },
       },

src/components/about/FeedbackForm.tsx

@@ -1,5 +1,8 @@
 import React, { FC } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+
+import makeStyles from '@mui/styles/makeStyles'
+import createStyles from '@mui/styles/createStyles'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/components/about/FeedbackModal.tsx

@@ -1,5 +1,8 @@
 import React, { FC } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 
 import { SimpleDialog } from 'components/generic/modals'
 import { FeedbackForm } from 'components/about'

src/components/about/FeedbackToggle.tsx

@@ -1,6 +1,8 @@
 import React, { FC, useState } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Button } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
+import { Button } from '@mui/material'
 
 import { FeedbackModal } from 'components/about'
 import { Explanation, UItextFromAirtable } from 'components/generic'

src/components/about/WaysToHelp.tsx

@@ -1,5 +1,8 @@
 import React, { FC } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+
+import makeStyles from '@mui/styles/makeStyles'
+import createStyles from '@mui/styles/createStyles'
 
 import { BasicExploreIntro } from 'components/explore'
 import { UItextFromAirtable } from 'components/generic'

src/components/about/WelcomeDialog.tsx

@@ -1,12 +1,14 @@
 import React, { FC, useState } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 import {
   Dialog,
   DialogContent,
   DialogTitle,
   Typography,
   Backdrop,
-} from '@material-ui/core'
+} from '@mui/material'
 
 import { MarkdownWithRouteLinks, useUItext, Logo } from 'components/generic'
 import { WelcomeFooter } from './WelcomeFooter'
@@ -20,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       justifyContent: 'center',
       paddingTop: '1rem',
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         padding: '1rem 0.75rem 0.75rem',
       },
     },
@@ -42,7 +44,7 @@ const useStyles = makeStyles((theme: Theme) =>
       fontSize: '1rem',
       paddingTop: '1.5rem',
       paddingBottom: '1.5rem',
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         paddingLeft: '1.25rem',
         paddingRight: '1.25rem',
         '& p': {
@@ -56,10 +58,10 @@ const useStyles = makeStyles((theme: Theme) =>
         marginLeft: theme.spacing(3),
         marginRight: theme.spacing(3),
       },
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         marginBottom: 0,
         marginTop: 0,
-        maxHeight: `calc(100% - ${theme.spacing(4)}px)`,
+        maxHeight: `calc(100% - ${theme.spacing(4)})`,
       },
     },
   })
@@ -112,14 +114,13 @@ export const WelcomeDialog: FC = () => {
       open={open}
       onClose={handleClose}
       disableEscapeKeyDown
-      disableBackdropClick
       aria-labelledby="welcome-dialog-title"
       aria-describedby="welcome-dialog-description"
       maxWidth="sm"
       BackdropProps={{ classes: { root: backdrop } }}
       PaperProps={{ classes: { root: paper }, elevation: 24 }}
     >
-      <DialogTitle disableTypography className={dialogTitle}>
+      <DialogTitle className={dialogTitle}>
         <WelcomeDialogTitle />
       </DialogTitle>
       <DialogContent dividers className={dialogContent}>

src/components/about/WelcomeFooter.tsx

@@ -1,12 +1,14 @@
 import React, { FC, useState } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 import {
   Button,
   Checkbox,
   DialogActions,
   FormControlLabel,
   Typography,
-} from '@material-ui/core'
+} from '@mui/material'
 
 import { HIDE_WELCOME_LOCAL_STG_KEY } from './config'
 

src/components/config/theme.ts

@@ -1,8 +1,9 @@
 import {
-  createMuiTheme,
+  createTheme,
   responsiveFontSizes,
-  fade,
-} from '@material-ui/core/styles'
+  alpha,
+  adaptV4Theme,
+} from '@mui/material/styles'
 
 // Always have a hard time finding the Typography variant docs for some reason:
 // https://material-ui.com/components/typography/#component
@@ -59,94 +60,80 @@ const headings = {
 // track, "just" need to wire it up w/state and responsive fonts and all the
 // other shtuff: `export function customTheme(type: PaletteType)`
 
-// Easy access to theme properties when used in `createMuiTheme` overrides
-// CRED: https://stackoverflow.com/a/57127040/1048518
-const customTheme = createMuiTheme({
-  palette: {
-    type: 'dark',
-    primary: {
-      light: '#62aca0',
-      main: '#379587',
-      dark: '#286a61',
-      contrastText: '#fff',
+const baseTheme = createTheme(
+  adaptV4Theme({
+    palette: {
+      mode: 'dark',
+      primary: {
+        light: '#62aca0',
+        main: '#379587',
+        dark: '#286a61',
+        contrastText: '#fff',
+      },
+      secondary: {
+        light: '#55a9c1',
+        main: '#207d96',
+        dark: '#2d6777',
+        contrastText: '#fff',
+      },
     },
-    secondary: {
-      light: '#55a9c1',
-      main: '#207d96',
-      dark: '#2d6777',
-      contrastText: '#fff',
+    typography: {
+      fontFamily: BODY_FONTS,
+      fontSize: 16,
+      ...headings,
     },
-  },
-  typography: {
-    fontFamily: BODY_FONTS,
-    fontSize: 16,
-    ...headings,
-  },
-})
-
-// Global overrides of MUI components that need to be re-styled often. More
-// examples available at:
-// https://github.com/Covid-Self-report-Tool/cov-self-report-frontend/blob/4523287b5c2a4f0dea1fe918b985aa6b6ca1efc6/src/theme.ts
+  })
+)
 
-// Global overrides of MUI components that need to be re-styled often
-customTheme.overrides = {
-  MuiFormHelperText: {
-    root: {
-      fontSize: '0.65rem',
-    },
-    contained: {
-      marginLeft: '0.75rem',
-      marginRight: 0,
-    },
-  },
-  MuiInput: {
-    root: {
-      fontSize: customTheme.typography.body2.fontSize, // default inputs: huge
-    },
-    underline: {
-      // Bottom line of focused input boxes, including table column filters
-      '&.Mui-focused:after': {
-        borderBottomColor: customTheme.palette.secondary.main,
+const customTheme = createTheme(baseTheme, {
+  components: {
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: { fontSize: '0.65rem' },
+        contained: { marginLeft: '0.75rem', marginRight: 0 },
       },
     },
-  },
-  MuiInputAdornment: {
-    root: {
-      color: customTheme.palette.text.secondary,
-    },
-  },
-  MuiDialog: {
-    // Outside boundary of all dialogs
-    paper: {
-      margin: 12,
+    MuiInput: {
+      styleOverrides: {
+        root: { fontSize: baseTheme.typography.body2.fontSize },
+        underline: {
+          '&.Mui-focused:after': {
+            borderBottomColor: baseTheme.palette.secondary.main,
+          },
+        },
+      },
     },
-  },
-  MuiButton: {
-    root: {
-      textTransform: 'none',
+    MuiInputAdornment: {
+      styleOverrides: {
+        root: { color: baseTheme.palette.text.secondary },
+      },
     },
-    textSecondary: {
-      color: customTheme.palette.secondary.light,
+    MuiDialog: {
+      styleOverrides: {
+        paper: { margin: 12 },
+      },
     },
-    // Outlined secondary buttons use the default of `palette.secondary.main`,
-    // which is too hard to see against dark paper backgrounds
-    outlinedSecondary: {
-      color: customTheme.palette.secondary.light,
-      border: `1px solid ${fade(customTheme.palette.secondary.light, 0.5)}`,
+    MuiButton: {
+      styleOverrides: {
+        root: { textTransform: 'none' },
+        textSecondary: { color: baseTheme.palette.secondary.light },
+        outlinedSecondary: {
+          color: baseTheme.palette.secondary.light,
+          border: `1px solid ${alpha(baseTheme.palette.secondary.light, 0.5)}`,
+        },
+      },
     },
-  },
-  MuiLink: {
-    root: {
-      color: customTheme.palette.secondary.light,
+    MuiLink: {
+      styleOverrides: {
+        root: { color: baseTheme.palette.secondary.light },
+      },
     },
-  },
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  MuiAutocomplete: {
-    root: {
-      marginBottom: '1rem',
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: { marginBottom: '1rem' },
+      },
     },
   },
-}
+})
 
 export const theme = responsiveFontSizes(customTheme)