From cfe56797f2c989508a5bc625af5d42a96cd33802 Mon Sep 17 00:00:00 2001 From: Aleksandar Date: Mon, 30 Sep 2024 00:01:03 +0300 Subject: [PATCH 1/4] Upgrade: MUI v5 to v6 --- next-env.d.ts | 2 +- package.json | 14 +- src/common/createEmotionCache.ts | 2 +- .../client/campaigns/DonationWishes.tsx | 16 +- .../common/navigation/AdminLayout.tsx | 16 +- src/pages/_app.tsx | 26 +- src/pages/_document.tsx | 100 +- yarn.lock | 2408 +++++++++++++++-- 8 files changed, 2295 insertions(+), 289 deletions(-) diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03dc..a4a7b3f5c 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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. diff --git a/package.json b/package.json index 6059144d7..59ff113c1 100644 --- a/package.json +++ b/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", diff --git a/src/common/createEmotionCache.ts b/src/common/createEmotionCache.ts index 89fc4f66d..b8bf6e5c5 100644 --- a/src/common/createEmotionCache.ts +++ b/src/common/createEmotionCache.ts @@ -1,5 +1,5 @@ import createCache from '@emotion/cache' export default function createEmotionCache() { - return createCache({ key: 'css', prepend: true }) + return createCache({ key: 'css' }) } diff --git a/src/components/client/campaigns/DonationWishes.tsx b/src/components/client/campaigns/DonationWishes.tsx index 8607a6124..4905b8477 100644 --- a/src/components/client/campaigns/DonationWishes.tsx +++ b/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) }}> - + ))} - + {data?.items?.length === 0 && searchValue !== '' && ( {t('campaign.sort.noResults')} )} - + {numOfPages > 1 && ( ({ })) 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 ( - + {/* A11Y TODO: Translate alt text */} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 4b80d4f75..d7d8b8b73 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -9,7 +9,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 +25,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,7 +92,7 @@ function CustomApp({ ) return ( - + Podkrepi.bg @@ -109,9 +100,12 @@ function CustomApp({ {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - + - + - + ) } diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 9202470e3..e1d3a771b 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,87 +1,35 @@ /* eslint-disable @next/next/no-document-import-in-page */ /* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react' -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript, DocumentProps } from 'next/document' import theme from 'common/theme' import FaviconMetadata from 'components/common/brand/FaviconMetadata' -import createEmotionServer from '@emotion/server/create-instance' -import createEmotionCache from 'common/createEmotionCache' -export default class CustomDocument extends Document { - render() { - return ( - - - {/* PWA primary color */} - +import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v14-pagesRouter' - - {/* Inject MUI styles first to match with the prepend: true configuration. */} - {(this.props as any).emotionStyleTags} - - -
- - - - ) - } +interface MyDocumentProps extends DocumentProps { + emotionStyleTags: JSX.Element[] } -// `getInitialProps` belongs to `_document` (instead of `_app`), -// it's compatible with server-side generation (SSG). -CustomDocument.getInitialProps = async (ctx) => { - // Resolution order - // - // On the server: - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. document.getInitialProps - // 4. app.render - // 5. page.render - // 6. document.render - // - // On the server with error: - // 1. document.getInitialProps - // 2. app.render - // 3. page.render - // 4. document.render - // - // On the client - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. app.render - // 4. page.render - - // Render app and page and get the context of the page with collected side effects. - const originalRenderPage = ctx.renderPage - const cache = createEmotionCache() - const { extractCriticalToChunks } = createEmotionServer(cache) - - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App: any) => - function EnhanceApp(props) { - return - }, - }) - - const initialProps = await Document.getInitialProps(ctx) - // This is important. It prevents emotion to render invalid HTML. - // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 - const emotionStyles = extractCriticalToChunks(initialProps.html) - const emotionStyleTags = emotionStyles.styles.map((style) => ( -