Modularize MUI imports and bump up MUI version (#1135)

* Add expermental flag to modularize mui imports

* Bump up mui versions and add modularizeImports experimental flag to the `next.config`

* Fix Autocomplete import

next.config.js

@@ -56,6 +56,16 @@ const moduleExports = {
       },
     ]
   },
+  experimental: {
+    modularizeImports: {
+      '@mui/material': {
+        transform: '@mui/material/{{member}}',
+      },
+      '@mui/icons-material/?(((\\w*)?/?)*)': {
+        transform: '@mui/icons-material/{{ matches.[1] }}/{{member}}',
+      },
+    },
+  },
 }
 
 const SentryWebpackPluginOptions = {

package.json

@@ -29,13 +29,12 @@
     "@emotion/react": "^11.8.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.4.2",
+    "@mui/icons-material": "^5.10.14",
     "@mui/lab": "^5.0.0-alpha.69",
-    "@mui/material": "^5.4.2",
-    "@mui/styles": "^5.4.2",
-    "@mui/system": "^5.2.8",
-    "@mui/x-data-grid": "^5.5.1",
-    "@mui/x-date-pickers": "^5.0.0-alpha.1",
+    "@mui/material": "^5.10.14",
+    "@mui/styles": "^5.10.14",
+    "@mui/x-data-grid": "^5.17.2",
+    "@mui/x-date-pickers": "^5.0.8",
     "@next/bundle-analyzer": "^12.1.0",
     "@paypal/react-paypal-js": "^7.8.1",
     "@react-pdf/renderer": "^3.0.1",

src/components/about/AboutPage.styled.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 import { Grid, Link, Typography } from '@mui/material'
 
 import theme from 'common/theme'

src/components/about/sections/AboutTheTeamSection/AboutTheTeamSection.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 import { Typography } from '@mui/material'
 
 import theme from 'common/theme'

src/components/about/sections/ActiveMembersSection/ActiveMembersSection.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 import { Grid } from '@mui/material'
 
 import theme from 'common/theme'

src/components/about/sections/AssociationMembersSection/AssociationMembersSection.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 import { Grid } from '@mui/material'
 
 import theme from 'common/theme'

src/components/about/sections/ManagementBoardSection/ManagementBoardsection.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 import { Grid, Link, Typography } from '@mui/material'
 
 import theme from 'common/theme'

src/components/about/sections/PrinciplesThatUniteUsSection/PrincipleCard.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 import { CardContent, CardHeader, Typography } from '@mui/material'
 
 import theme from 'common/theme'

src/components/about/sections/SupervisoryBoardSection/SupervisoryBoardSection.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 import { Grid, Typography } from '@mui/material'
 
 import theme from 'common/theme'

src/components/auth/profile/DonationAgreementTab.tsx

@@ -1,8 +1,7 @@
 import ProfileTab from './ProfileTab'
 import { ProfileTabs } from './tabs'
 import { styled } from '@mui/material/styles'
-import { Box } from '@mui/system'
-import { Typography } from '@mui/material'
+import { Typography, Box } from '@mui/material'
 
 const PREFIX = 'CertificatesTab'
 

src/components/auth/profile/DonationTable.tsx

@@ -11,8 +11,8 @@ import {
   TableRow,
   Button,
   Link,
+  Box,
 } from '@mui/material'
-import { Box } from '@mui/system'
 import styled from '@emotion/styled'
 import React, { useMemo } from 'react'
 import { bg, enUS } from 'date-fns/locale'

src/components/campaigns/InlineDonation.tsx

@@ -6,15 +6,8 @@ import { baseUrl, routes } from 'common/routes'
 import { moneyPublic } from 'common/util/money'
 import CampaignProgress from './CampaignProgress'
 import DonorsAndDonations from './DonorsAndDonations'
-import {
-  Button,
-  CircularProgress,
-  Grid,
-  IconButton,
-  lighten,
-  Menu,
-  Typography,
-} from '@mui/material'
+import { Button, CircularProgress, Grid, IconButton, Menu, Typography } from '@mui/material'
+import { lighten } from '@mui/material/styles'
 import { AddLinkOutlined, Favorite } from '@mui/icons-material'
 import ShareIcon from '@mui/icons-material/Share'
 import { useCampaignDonationHistory } from 'common/hooks/campaigns'

src/components/common/GridCellExpand.tsx

@@ -1,5 +1,4 @@
-import { Paper, Popper, Typography } from '@mui/material'
-import { Box } from '@mui/system'
+import { Paper, Popper, Typography, Box } from '@mui/material'
 import * as React from 'react'
 
 interface GridCellExpandProps {

src/components/common/form/CircleCheckboxField.tsx

@@ -7,9 +7,9 @@ import {
   FormControlLabelProps,
   FormHelperText,
   Icon,
-  lighten,
   Typography,
 } from '@mui/material'
+import { lighten } from '@mui/material/styles'
 import { TranslatableField, translateError } from 'common/form/validation'
 import React from 'react'
 import CheckIcon from '@mui/icons-material/Check'

src/components/common/form/RadioButton.tsx

@@ -1,6 +1,6 @@
 import { Check } from '@mui/icons-material'
-import { styled } from '@mui/material/styles'
-import { FormControlLabel, Radio, lighten, Typography, RadioProps } from '@mui/material'
+import { styled, lighten } from '@mui/material/styles'
+import { FormControlLabel, Radio, Typography, RadioProps } from '@mui/material'
 import theme from 'common/theme'
 import React from 'react'
 

src/components/donations/grid/RenderEditPersonCell.tsx

@@ -3,9 +3,9 @@ import { AxiosError, AxiosResponse } from 'axios'
 import { useMutation } from 'react-query'
 import { useTranslation } from 'next-i18next'
 import { GridRenderEditCellParams, GridCellModes } from '@mui/x-data-grid'
-import { Autocomplete, createFilterOptions, TextField, Tooltip, Box } from '@mui/material'
+import { TextField, Tooltip, Box } from '@mui/material'
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'
 import { Save } from '@mui/icons-material'
-
 import { PersonResponse } from 'gql/person'
 import { DonationResponse, UserDonationInput } from 'gql/donations'
 import { useEditDonation } from 'service/donation'

src/components/index/IndexPage.styled.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@mui/material'
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 
 import theme from 'common/theme'
 import LinkButton from 'components/common/LinkButton'

src/components/index/sections/CampaignsSection/CampaignsSection.styled.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@mui/material'
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 
 import theme from 'common/theme'
 

src/components/index/sections/FaqSection/FaqSection.styled.tsx

@@ -1,5 +1,5 @@
 import { Grid } from '@mui/material'
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 
 import theme from 'common/theme'
 

src/components/index/sections/HowWeWorkSection/HowWeWorkSection.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 
 import theme from 'common/theme'
 

src/components/index/sections/JoinPodkrepiBgSection/JoinPodkrepiBgSection.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 
 import LinkButton from 'components/common/LinkButton'
 import theme from 'common/theme'

src/components/index/sections/Jumbotron/Jumbotron.styled.tsx

@@ -1,5 +1,5 @@
 import { Grid } from '@mui/material'
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 
 import LinkButton from 'components/common/LinkButton'
 import theme from 'common/theme'

src/components/index/sections/TeamMembersSection/TeamMembersSection.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 
 import theme from 'common/theme'
 

src/components/irregularity/steps/Contacts.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'next-i18next'
 
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 import { Grid, Typography } from '@mui/material'
 
 import { routes } from 'common/routes'

src/components/irregularity/steps/Info.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import { Field } from 'formik'
 import { useTranslation } from 'next-i18next'
 
-import { styled } from '@mui/system'
+import { styled } from '@mui/material/styles'
 import { FormControl, Grid, Typography } from '@mui/material'
 
 import FileUpload from 'components/file-upload/FileUpload'

src/components/layout/Footer/Footer.styled.tsx

@@ -1,5 +1,6 @@
-import { Container, Grid, lighten, Typography } from '@mui/material'
-import { styled } from '@mui/system'
+import { Container, Grid, Typography } from '@mui/material'
+import { lighten } from '@mui/material/styles'
+import { styled } from '@mui/material/styles'
 
 import theme from 'common/theme'
 

src/components/layout/nav/AdminMenu.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { styled } from '@mui/material/styles'
+import { styled, lighten } from '@mui/material/styles'
 import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
-import { Avatar, Grid, IconButton, lighten, Menu, Typography } from '@mui/material'
+import { Avatar, Grid, IconButton, Menu, Typography } from '@mui/material'
 
 import theme from 'common/theme'
 import { routes } from 'common/routes'

src/components/layout/nav/DonationMenu.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { styled } from '@mui/material/styles'
+import { styled, lighten } from '@mui/material/styles'
 import { useRouter } from 'next/router'
-import { Typography, lighten } from '@mui/material'
+import { Typography } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 
 import { routes } from 'common/routes'

src/components/layout/nav/PrivateMenu.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { styled } from '@mui/material/styles'
+import { styled, lighten } from '@mui/material/styles'
 import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
-import { Avatar, Grid, IconButton, lighten, Menu, Typography } from '@mui/material'
+import { Avatar, Grid, IconButton, Menu, Typography } from '@mui/material'
 
 import theme from 'common/theme'
 import { routes } from 'common/routes'

src/components/layout/nav/ProjectMenu.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
 import { useRouter } from 'next/router'
-import { Typography, lighten } from '@mui/material'
+import { Typography } from '@mui/material'
+import { lighten } from '@mui/material/styles'
 import { useTranslation } from 'next-i18next'
 
 import { routes, staticUrls } from 'common/routes'

src/components/layout/nav/PublicMenu.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { styled } from '@mui/material/styles'
+import { styled, lighten } from '@mui/material/styles'
 import { useTranslation } from 'next-i18next'
 import PersonIcon from '@mui/icons-material/Person'
-import { Grid, Button, Menu, Typography, lighten } from '@mui/material'
+import { Grid, Button, Menu, Typography } from '@mui/material'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
 

src/components/person/PersonDialog.tsx

@@ -7,8 +7,8 @@ import {
   Alert,
   AlertTitle,
   IconButton,
+  Box,
 } from '@mui/material'
-import { Box } from '@mui/system'
 import { FormikConfig } from 'formik'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'

src/components/support-form/helpers/HeaderTypography.tsx

@@ -1,4 +1,5 @@
-import { lighten, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
+import { lighten } from '@mui/material/styles'
 import { ReactNode } from 'react'
 
 export default function HeaderTypography({ children }: { children: ReactNode }) {

src/pages/_app.tsx

@@ -5,7 +5,8 @@ import { EmotionCache } from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
 import React, { useEffect, useState } from 'react'
 import { appWithTranslation, useTranslation } from 'next-i18next'
-import { CssBaseline, ThemeProvider, Theme } from '@mui/material'
+import { ThemeProvider, Theme } from '@mui/material/styles'
+import { CssBaseline } from '@mui/material'
 import { Hydrate, QueryClient, QueryClientProvider } from 'react-query'
 
 import theme from 'common/theme'