Upgrade: MUI v5 to v6 (#1947)

* Upgrade: MUI v5 to v6

* delete createEmotionCache fn

* fix migration build errors

* remove unused imports

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

package.json

@@ -26,14 +26,15 @@
     "sitemap": "next-sitemap"
   },
   "dependencies": {
-    "@emotion/cache": "^11.7.1",
-    "@emotion/react": "^11.11.4",
+    "@emotion/cache": "^11.13.1",
+    "@emotion/react": "^11.13.3",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/styled": "^11.13.0",
     "@mdxeditor/editor": "^0.14.2",
-    "@mui/icons-material": "^5.15.19",
+    "@mui/icons-material": "^6.1.1",
     "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.19",
+    "@mui/material": "^6.1.1",
+    "@mui/material-nextjs": "^6.1.1",
     "@mui/styles": "^5.15.19",
     "@mui/x-data-grid": "^6.16.1",
     "@mui/x-date-pickers": "^6.16.1",
@@ -55,10 +56,11 @@
     "formik": "2.2.9",
     "i18next": "^23.5.1",
     "jwt-decode": "^3.1.2",
+    "latest": "^0.2.0",
     "lodash": "^4.17.21",
     "mobx": "6.3.2",
     "mobx-react": "7.2.0",
-    "next": "14.2.10",
+    "next": "^14.2.13",
     "next-auth": "^4.24.5",
     "next-i18next": "^14.0.3",
     "nookies": "^2.5.2",

src/components/client/blog/BlogIndexPage.tsx

@@ -2,13 +2,7 @@ import React from 'react'
 import NextLink from 'next/link'
 import { useTranslation } from 'next-i18next'
 import { PostsOrPages, Pagination as GhostPagination } from '@tryghost/content-api'
-import {
-  Container,
-  Stack,
-  Typography,
-  Unstable_Grid2 as Grid2,
-  PaginationItem,
-} from '@mui/material'
+import { Container, Stack, Typography, Grid2, PaginationItem } from '@mui/material'
 import Pagination from '@mui/material/Pagination'
 
 import theme from 'common/theme'
@@ -38,9 +32,9 @@ export default function BlogIndexPage({ posts, pagination }: Props) {
       <Container maxWidth="lg">
         <Grid2 container rowSpacing={2} columnSpacing={2}>
           {posts.map((post) => (
-            <Grid2 key={post.id} xs={12} sm={6} md={4}>
+            <Grid2 key={post.id} size={{ xs: 12, sm: 6, md: 4 }}>
               <Grid2 container direction="column" spacing={2}>
-                <Grid2 xs={12}>
+                <Grid2 size={{ xs: 12 }}>
                   <NextLink href={routes.blog.postBySlug(post.slug)}>
                     <FeaturedImage
                       height="18rem"
@@ -53,7 +47,7 @@ export default function BlogIndexPage({ posts, pagination }: Props) {
                     />
                   </NextLink>
                 </Grid2>
-                <Grid2 xs={12}>
+                <Grid2 size={{ xs: 12 }}>
                   <Stack direction="column" spacing={2}>
                     <Link href={routes.blog.postBySlug(post.slug)}>
                       <Typography
@@ -74,7 +68,7 @@ export default function BlogIndexPage({ posts, pagination }: Props) {
             </Grid2>
           ))}
         </Grid2>
-        <Grid2 xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           {pages > 1 && (
             <Pagination
               count={pages}

src/components/client/blog/BlogPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { PostOrPage } from '@tryghost/content-api'
-import { Container, Typography, Unstable_Grid2 as Grid2 } from '@mui/material'
+import { Container, Typography, Grid2 } from '@mui/material'
 
 import { baseUrl, routes } from 'common/routes'
 import Layout from 'components/client/layout/Layout'
@@ -23,19 +23,19 @@ export default function BlogPage({ page }: Props) {
       ogImage={page.og_image ?? undefined}>
       <Container maxWidth="lg">
         <Grid2 container spacing={2}>
-          <Grid2 xs={12} xsOffset={0} sx={{ pl: 4 }}>
+          <Grid2 sx={{ pl: 4 }} size={{ xs: 12 }} offset={{ xs: 0 }}>
             <BackButton href={routes.blog.index} />
           </Grid2>
-          <Grid2 xs={12}>
+          <Grid2 size={{ xs: 12 }}>
             <Typography paragraph variant="h3" component="h1" align="center">
               {page.title}
             </Typography>
           </Grid2>
-          <Grid2 xs={10} xsOffset={1} textAlign="center">
+          <Grid2 textAlign="center" size={{ xs: 10 }} offset={{ xs: 1 }}>
             <DateCreated showLabel createdAt={page.published_at as string} />
             <ReadingTime showLabel readingTime={page.reading_time} />
           </Grid2>
-          <Grid2 xs={10} xsOffset={1}>
+          <Grid2 size={{ xs: 10 }} offset={{ xs: 1 }}>
             <FeaturedImage
               priority
               sizes="33vw"
@@ -45,10 +45,10 @@ export default function BlogPage({ page }: Props) {
               title={page.feature_image_caption ?? page.title}
             />
           </Grid2>
-          <Grid2 xs={12} sm={10} xsOffset={1}>
+          <Grid2 size={{ xs: 12 }} offset={{ xs: 1 }}>
             <RenderContent html={page.html} />
           </Grid2>
-          <Grid2 xs={12} textAlign="center">
+          <Grid2 textAlign="center" size={{ xs: 12 }}>
             <BackButton href={routes.index} />
           </Grid2>
         </Grid2>

src/components/client/blog/BlogPostPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { PostOrPage } from '@tryghost/content-api'
-import { Container, Typography, Unstable_Grid2 as Grid2 } from '@mui/material'
+import { Container, Typography, Grid2 } from '@mui/material'
 
 import { baseUrl, routes } from 'common/routes'
 import Layout from 'components/client/layout/Layout'
@@ -24,19 +24,19 @@ export default function BlogPostPage({ post, referer }: Props) {
       ogImage={post.og_image ?? undefined}>
       <Container maxWidth="lg">
         <Grid2 container spacing={2}>
-          <Grid2 xs={12} xsOffset={0}>
+          <Grid2 size={{ xs: 12 }} offset={{ xs: 0 }}>
             <BackButton href={referer ?? routes.blog.index} />
           </Grid2>
-          <Grid2 xs={12}>
+          <Grid2 size={{ xs: 12 }}>
             <Typography paragraph variant="h3" component="h1" align="center">
               {post.title}
             </Typography>
           </Grid2>
-          <Grid2 xs={10} xsOffset={1} textAlign="center">
+          <Grid2 size={{ xs: 10 }} offset={{ xs: 1 }} textAlign="center">
             <DateCreated showLabel createdAt={post.published_at as string} />
             <ReadingTime showLabel readingTime={post.reading_time} />
           </Grid2>
-          <Grid2 xs={10} xsOffset={1}>
+          <Grid2 size={{ xs: 10 }} offset={{ xs: 1 }}>
             <FeaturedImage
               priority
               sizes="33vw"
@@ -46,10 +46,10 @@ export default function BlogPostPage({ post, referer }: Props) {
               title={post.feature_image_caption ?? post.title}
             />
           </Grid2>
-          <Grid2 xs={12} sm={10} smOffset={1}>
+          <Grid2 size={{ xs: 12, sm: 10 }} offset={{ xs: 0, sm: 1 }}>
             <RenderContent html={post.html} />
           </Grid2>
-          <Grid2 xs={12} textAlign="center">
+          <Grid2 size={{ xs: 12 }} textAlign="center">
             <BackButton href={referer ?? routes.blog.index} />
           </Grid2>
         </Grid2>

src/components/client/campaigns/DonationWishes.tsx

@@ -2,15 +2,7 @@ import React, { useMemo, useRef, useState } from 'react'
 
 import { useTranslation } from 'next-i18next'
 
-import {
-  Unstable_Grid2 as Grid2,
-  Stack,
-  Typography,
-  Grid,
-  Button,
-  TextField,
-  InputAdornment,
-} from '@mui/material'
+import { Grid2, Stack, Typography, Grid, Button, TextField, InputAdornment } from '@mui/material'
 import SearchIcon from '@mui/icons-material/Search'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
@@ -156,7 +148,7 @@ export default function DonationWishes({ campaignId, pageSize = 5 }: Props) {
               key={id}
               direction="row"
               sx={{ p: 2, bgcolor: 'grey.100', borderRadius: theme.spacing(2) }}>
-              <Grid2 xs={12}>
+              <Grid2 size={{ xs: 12 }}>
                 <Stack direction="row" spacing={2}>
                   <Grid pt={0.7}>
                     <AccountCircleIcon
@@ -250,12 +242,12 @@ export default function DonationWishes({ campaignId, pageSize = 5 }: Props) {
               </Grid2>
             </Grid2>
           ))}
-        <Grid2 xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           {data?.items?.length === 0 && searchValue !== '' && (
             <Typography align="center"> {t('campaign.sort.noResults')}</Typography>
           )}
         </Grid2>
-        <Grid2 xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           {numOfPages > 1 && (
             <Pagination
               count={numOfPages}

src/components/client/donation-flow/common/RadioCardGroup.tsx

@@ -8,7 +8,7 @@ import {
   RadioGroup,
   RadioGroupProps,
   Stack,
-  Unstable_Grid2 as Grid2,
+  Grid2,
 } from '@mui/material'
 import { styled, lighten } from '@mui/material/styles'
 import theme from 'common/theme'
@@ -87,7 +87,7 @@ function RadioCardGroup({ options, defaultValue }: RadioCardGroupProps) {
         onChange={handleChange}>
         <Grid2 spacing={2} container>
           {options.map((option) => (
-            <Grid2 xs={4} key={option.value}>
+            <Grid2 size={{ xs: 4 }} key={option.value}>
               <RadioCardItem
                 onClick={() => setValue(option.value)}
                 control={

src/components/common/navigation/AdminLayout.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useMemo } from 'react'
-import { useTheme } from '@mui/styles'
+import { useTheme } from '@mui/material/styles'
 import MuiDrawer from '@mui/material/Drawer'
 import { styled, Theme, CSSObject } from '@mui/material/styles'
 import { IconButton, List, Box, Button, Typography } from '@mui/material'
@@ -79,18 +79,18 @@ const DrawerHeader = styled('div')(({ theme }) => ({
 }))
 
 const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop: string) => prop !== 'open' })(
-  ({ theme, open }: { theme: Theme; open: boolean }) => ({
+  ({ theme, open }: { theme?: Theme; open: boolean }) => ({
     width: drawerWidth,
     flexShrink: 0,
     whiteSpace: 'nowrap',
     boxSizing: 'border-box',
     ...(open && {
-      ...openedMixin(theme),
-      '& .MuiDrawer-paper': openedMixin(theme),
+      ...openedMixin(theme as Theme),
+      '& .MuiDrawer-paper': openedMixin(theme as Theme),
     }),
     ...(!open && {
-      ...closedMixin(theme),
-      '& .MuiDrawer-paper': closedMixin(theme),
+      ...closedMixin(theme as Theme),
+      '& .MuiDrawer-paper': closedMixin(theme as Theme),
     }),
   }),
 )
@@ -124,14 +124,14 @@ export default function AdminLayout({ children }: Props) {
   const toggleMenu = useCallback(() => setOpen((open) => !open), [])
   return (
     <StyledBox className={classes.wrapper}>
-      <Drawer variant="permanent" open={open} theme={theme}>
+      <Drawer variant="permanent" open={open}>
         <Box
           sx={{
             display: 'flex',
             position: 'absolute',
             left: 5,
             top: 9,
-            padding: theme.spacing(0, 1),
+            // padding: theme.spacing(0, 1),
           }}>
           <Link href={routes.admin.index} passHref>
             {/* A11Y TODO: Translate alt text */}

src/components/common/navigation/NestedMenu.tsx

@@ -5,7 +5,7 @@ import AccountBoxIcon from '@mui/icons-material/AccountBox'
 import { DrawerStore } from 'stores/dashboard/DrawerStore'
 import Accordion from '@mui/material/Accordion'
 import ListItemIcon from '@mui/material/ListItemIcon'
-import { Button, ListItem } from '@mui/material'
+import { Button, ListItem, ListItemButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import theme from 'common/theme'
@@ -30,9 +30,8 @@ export default observer(function NestedMenu() {
         sx={{ p: 0, height: '60px' }}
         aria-controls="panel1a-content"
         id="panel1a-header">
-        <ListItem
+        <ListItemButton
           onClick={() => toggleAccordion()}
-          button
           sx={{
             display: 'flex',
             justifyContent: { xs: 'center', sm: 'left' },
@@ -46,7 +45,7 @@ export default observer(function NestedMenu() {
             Профил
           </Button>
           <ExpandMoreIcon fontSize="small" sx={{ display: { xs: 'none', sm: 'block' } }} />
-        </ListItem>
+        </ListItemButton>
       </AccordionSummary>
       <AccordionDetails sx={{ padding: '0' }}>
         <div>

src/pages/_app.tsx

@@ -1,5 +1,3 @@
-import { EmotionCache } from '@emotion/cache'
-import { CacheProvider } from '@emotion/react'
 import { CssBaseline } from '@mui/material'
 import { Theme, ThemeProvider } from '@mui/material/styles'
 import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -9,7 +7,6 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 
-import createEmotionCache from 'common/createEmotionCache'
 import theme from 'common/theme'
 import useGTM from 'common/util/useGTM'
 
@@ -26,27 +23,19 @@ import {
 } from 'components/client/layout/NotificationSnackBar/props/global'
 import { getCookieConsentValue, Cookies } from 'react-cookie-consent'
 import CookieConsentPopup from 'components/common/CookieConsentPopup'
-
+import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter'
 // Client-side cache, shared for the whole session of the user in the browser.
-const clientSideEmotionCache = createEmotionCache()
 
 declare module '@mui/styles/defaultTheme' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
 }
 
-interface CustomAppProps extends AppProps {
-  emotionCache?: EmotionCache
-}
-
-function CustomApp({
-  Component,
-  emotionCache = clientSideEmotionCache,
-  pageProps: { session, dehydratedState, ...pageProps },
-}: CustomAppProps) {
+function CustomApp(props: AppProps) {
   const router = useRouter()
   const { i18n } = useTranslation()
   const { initialize, trackEvent } = useGTM()
+  const { Component, pageProps } = props
 
   const handleAcceptCookie = () => {
     initialize({
@@ -101,17 +90,20 @@ function CustomApp({
   )
 
   return (
-    <CacheProvider value={emotionCache}>
+    <AppCacheProvider {...props}>
       <Head>
         <title>Podkrepi.bg</title>
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
       </Head>
       <ThemeProvider theme={theme}>
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <CssBaseline />
-        <SessionProvider session={session} refetchInterval={60} refetchOnWindowFocus={true}>
+        <SessionProvider
+          session={pageProps.session}
+          refetchInterval={60}
+          refetchOnWindowFocus={true}>
           <QueryClientProvider client={queryClient}>
-            <Hydrate state={dehydratedState}>
+            <Hydrate state={pageProps.dehydratedState}>
               <Provider {...stores}>
                 <Component {...pageProps} />
                 <NotificationSnackBar
@@ -127,7 +119,7 @@ function CustomApp({
         handleAcceptCookie={handleAcceptCookie}
         handleDeclineCookie={handleDeclineCookie}
       />
-    </CacheProvider>
+    </AppCacheProvider>
   )
 }