Upgrades for Next 12 / MUI 5

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    jest: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 13,
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    'no-unused-vars': ['error', { ignoreRestSiblings: true }],
+    'react/display-name': 'off',
+    'react/prop-types': [2, { ignore: ['children'] }],
+    indent: ['error', 2, { offsetTernaryExpressions: true }],
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single', { avoidEscape: true }],
+    semi: ['error', 'never'],
+  },
+}

.nvmrc

@@ -1 +1 @@
-v12.14.0
+v14.14.0

components/Header.js

@@ -1,43 +1,57 @@
-import React, { useState, useCallback, useContext } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import AppBar from 'react-storefront-amp/AmpAppBar'
+import React, { useState, useCallback } from 'react'
+import { styled } from '@mui/material/styles'
+import AppBar from 'react-storefront/AppBar'
 import CartButton from 'react-storefront/CartButton'
 import Search from './search/Search'
 import Logo from '../components/assets/react-storefront-logo.svg'
-import { Container } from '@material-ui/core'
-import Menu from 'react-storefront-amp/menu/AmpMenu'
+import { Container } from '@mui/material'
+import Menu from 'react-storefront/menu/Menu'
 import MenuButton from 'react-storefront/menu/MenuButton'
 import Link from 'react-storefront/link/Link'
-import SessionContext from 'react-storefront/session/SessionContext'
 import useCartTotal from 'react-storefront/hooks/useCartTotal'
 import LazyHydrate from 'react-storefront/LazyHydrate'
+import PropTypes from 'prop-types'
 
-const useStyles = makeStyles(theme => ({
-  title: {},
-  logo: {
+const PREFIX = 'Header'
+
+const classes = {
+  title: `${PREFIX}-title`,
+  logo: `${PREFIX}-logo`,
+  toolbar: `${PREFIX}-toolbar`,
+  container: `${PREFIX}-container`,
+  accountLink: `${PREFIX}-accountLink`,
+}
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')(({ theme }) => ({
+  [`& .${classes.title}`]: {},
+
+  [`& .${classes.logo}`]: {
     position: 'absolute',
     left: 10,
     top: 0,
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down('sm')]: {
       left: '50%',
       top: 6,
       marginLeft: -60,
     },
   },
-  toolbar: {
+
+  [`& .${classes.toolbar}`]: {
     padding: 0,
     margin: 0,
   },
-  container: {
+
+  [`& .${classes.container}`]: {
     display: 'flex',
     alignItems: 'center',
     position: 'relative',
 
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down('sm')]: {
       padding: 5,
     },
   },
-  accountLink: {
+  [`& .${classes.accountLink}`]: {
     display: 'block',
     color: '#000',
     textTransform: 'uppercase',
@@ -46,19 +60,17 @@ const useStyles = makeStyles(theme => ({
 }))
 
 export default function Header({ menu }) {
-  const classes = useStyles()
   const [menuOpen, setMenuOpen] = useState(false)
   const [hydrateMenu, setHydrateMenu] = useState(false)
   const handleMenuClose = useCallback(() => setMenuOpen(false), [])
   const handleMenuButtonClick = useCallback(() => {
     setMenuOpen(menuOpen => !menuOpen)
     setHydrateMenu(true)
   }, [])
-  const { session } = useContext(SessionContext)
   const cartTotal = useCartTotal()
 
   return (
-    <>
+    <Root>
       <AppBar>
         <Container maxWidth="lg" className={classes.container}>
           <Link href="/">
@@ -96,6 +108,10 @@ export default function Header({ menu }) {
           // renderFooter={item => <div>{item.text} footer</div>}
         />
       </LazyHydrate>
-    </>
+    </Root>
   )
 }
+
+Header.propTypes = {
+  menu: PropTypes.object,
+}

components/LandingCmsSlots.js

@@ -1,9 +1,17 @@
 import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
+import { styled } from '@mui/material/styles'
 import CmsSlot from 'react-storefront/CmsSlot'
+import PropTypes from 'prop-types'
 
-const useStyles = makeStyles((/* theme */) => ({
-  cmsBlock: {
+const PREFIX = 'LandingCmsSlots'
+
+const classes = {
+  cmsBlock: `${PREFIX}-cmsBlock`,
+}
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((/* theme */) => ({
+  [`& .${classes.cmsBlock}`]: {
     '& img': {
       maxWidth: '100vw',
     },
@@ -110,17 +118,19 @@ const useStyles = makeStyles((/* theme */) => ({
 }))
 
 const LandingCmsSlots = ({ cmsBlocks }) => {
-  const classes = useStyles()
-
   return (
-    <>
+    <Root>
       {cmsBlocks.map(cmsBlock => (
         <CmsSlot key={cmsBlock.identifier} className={classes.cmsBlock}>
           {cmsBlock.content}
         </CmsSlot>
       ))}
-    </>
+    </Root>
   )
 }
 
+LandingCmsSlots.propTypes = {
+  cmsBlocks: PropTypes.array,
+}
+
 export default LandingCmsSlots