fix: update mui version to v6 (#1544)

* fix: udpate mui version to v6 * fix: upgrade dependencies
graasp · Oct 25, 2024 · d3bd11b · d3bd11b
1 parent 5538034
commit d3bd11b
Show file tree

Hide file tree

Showing 7 changed files with 592 additions and 648 deletions.
diff --git a/package.json b/package.json
@@ -23,41 +23,41 @@
     "@graasp/query-client": "5.0.0",
     "@graasp/sdk": "4.32.1",
     "@graasp/stylis-plugin-rtl": "2.2.0",
-    "@graasp/translations": "1.39.0",
-    "@graasp/ui": "5.3.0",
-    "@mui/icons-material": "5.16.7",
-    "@mui/lab": "5.0.0-alpha.173",
-    "@mui/material": "5.16.7",
-    "@sentry/react": "7.119.1",
+    "@graasp/translations": "1.40.0",
+    "@graasp/ui": "5.4.0",
+    "@mui/icons-material": "6.1.5",
+    "@mui/lab": "6.0.0-beta.13",
+    "@mui/material": "6.1.5",
+    "@sentry/react": "7.119.2",
     "axios": "1.7.7",
     "date-fns": "4.1.0",
     "filesize": "10.1.6",
     "http-status-codes": "2.3.0",
-    "i18next": "23.15.1",
+    "i18next": "23.16.3",
     "katex": "0.16.11",
     "leaflet-geosearch": "4.0.0",
     "lodash.debounce": "4.0.8",
     "lodash.groupby": "4.6.0",
     "lodash.isequal": "4.5.0",
     "lodash.partition": "4.6.0",
     "lodash.truncate": "4.4.2",
-    "lucide-react": "0.451.0",
+    "lucide-react": "0.453.0",
     "papaparse": "5.4.1",
     "react": "18.3.1",
     "react-beautiful-dnd": "13.1.1",
     "react-csv": "2.2.2",
     "react-dom": "18.3.1",
     "react-ga4": "2.1.0",
     "react-helmet-async": "2.0.5",
-    "react-hook-form": "7.53.0",
-    "react-i18next": "15.0.2",
+    "react-hook-form": "7.53.1",
+    "react-i18next": "15.1.0",
     "react-image-crop": "11.0.7",
     "react-qr-code": "2.0.15",
     "react-query": "3.39.3",
     "react-quill": "2.0.0",
-    "react-router": "6.26.2",
-    "react-router-dom": "6.26.2",
-    "react-toastify": "10.0.5",
+    "react-router": "6.27.0",
+    "react-router-dom": "6.27.0",
+    "react-toastify": "10.0.6",
     "stylis": "4.3.4",
     "uuid": "10.0.0",
     "validator": "13.12.0"
@@ -102,46 +102,46 @@
     "@commitlint/cli": "19.5.0",
     "@commitlint/config-conventional": "19.5.0",
     "@cypress/code-coverage": "3.13.4",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/jest": "29.5.13",
+    "@types/jest": "29.5.14",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.groupby": "4.6.9",
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.partition": "4.6.9",
     "@types/lodash.truncate": "4.4.9",
-    "@types/node": "20.16.11",
-    "@types/papaparse": "5.3.14",
-    "@types/react": "18.3.11",
+    "@types/node": "20.17.0",
+    "@types/papaparse": "5.3.15",
+    "@types/react": "18.3.12",
     "@types/react-csv": "1.1.10",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
     "@types/uuid": "10.0.0",
     "@types/validator": "13.12.2",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "@vitejs/plugin-react": "4.3.2",
+    "@typescript-eslint/eslint-plugin": "8.11.0",
+    "@typescript-eslint/parser": "8.11.0",
+    "@vitejs/plugin-react": "4.3.3",
     "concurrently": "9.0.1",
-    "cypress": "13.15.0",
+    "cypress": "13.15.1",
     "cypress-localstorage-commands": "2.2.6",
     "env-cmd": "10.1.0",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.3",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
-    "eslint-plugin-react": "7.37.1",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-jsx-a11y": "6.10.1",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
     "husky": "9.1.6",
     "nyc": "17.1.0",
     "prettier": "3.3.3",
     "typescript": "5.6.3",
-    "vite": "5.4.8",
+    "vite": "5.4.10",
     "vite-plugin-checker": "0.8.0",
     "vite-plugin-istanbul": "6.0.2",
-    "vitest": "2.1.2"
+    "vitest": "2.1.3"
   },
   "packageManager": "[email protected]"
 }
diff --git a/src/components/item/ItemMemberships.tsx b/src/components/item/ItemMemberships.tsx
@@ -1,5 +1,5 @@
 import { Edit, Visibility } from '@mui/icons-material';
-import { AvatarGroup, Badge, Grid, Tooltip } from '@mui/material';
+import { AvatarGroup, Badge, Grid2 as Grid, Tooltip } from '@mui/material';
 
 import { PermissionLevel } from '@graasp/sdk';
 
@@ -40,7 +40,7 @@ const ItemMemberships = ({ id, maxAvatar = 2 }: Props): JSX.Element | null => {
 
   return (
     <Grid container alignItems="center" id={ITEM_MEMBERSHIPS_CONTENT_ID}>
-      <Grid item>
+      <Grid>
         <Tooltip
           title={translateBuilder(BUILDER.SHARED_MEMBERS_TOOLTIP, {
             count: filteredMemberships.length,

diff --git a/src/components/item/form/AppForm.tsx b/src/components/item/form/AppForm.tsx
@@ -2,8 +2,14 @@ import { ChangeEventHandler, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { ArrowBack } from '@mui/icons-material';
-import { Alert, Box, Stack, TextField, Typography } from '@mui/material';
-import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
+import {
+  Alert,
+  Box,
+  Grid2 as Grid,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
 
 import { DiscriminatedItem, buildAppExtra } from '@graasp/sdk';
 import { Button } from '@graasp/ui';
@@ -173,7 +179,7 @@ const AppForm = ({ onChange }: Props): JSX.Element => {
         onChange={searchAnApp}
       />
       <Box display="flex" flexGrow={1} minHeight="0px" overflow="scroll" p={1}>
-        <Grid2
+        <Grid
           container
           spacing={2}
           height="max-content"
@@ -194,7 +200,7 @@ const AppForm = ({ onChange }: Props): JSX.Element => {
             image={addNewImage}
             onClick={addCustomApp}
           />
-        </Grid2>
+        </Grid>
       </Box>
       <NameForm nameForm={register('name')} autoFocus={false} />
     </Stack>

diff --git a/src/components/item/sharing/membershipTable/GuestItemMembershipTableRow.tsx b/src/components/item/sharing/membershipTable/GuestItemMembershipTableRow.tsx
@@ -38,7 +38,7 @@ const GuestItemMembershipTableRow = ({
       <StyledTableRow data-cy={buildItemMembershipRowId(data.id)} key={data.id}>
         <TableCell>
           <Typography
-            color={{ color: isDisabled ? 'text.disabled' : undefined }}
+            sx={{ color: isDisabled ? 'text.disabled' : undefined }}
             noWrap
             fontWeight="bold"
           >

diff --git a/src/components/main/AppCard.tsx b/src/components/main/AppCard.tsx
@@ -3,11 +3,11 @@ import {
   Card,
   CardActionArea,
   CardContent,
+  Grid2 as Grid,
   Skeleton,
   Typography,
   styled,
 } from '@mui/material';
-import Grid2 from '@mui/material/Unstable_Grid2';
 
 import { buildItemFormAppOptionId } from '@/config/selectors';
 
@@ -48,14 +48,14 @@ const AppCard = ({
     id={buildItemFormAppOptionId(id ?? name)}
   >
     <StyledCardActionArea>
-      <Grid2
+      <Grid
         container
         direction="row"
         alignItems="center"
         width="100%"
         spacing={[0, 1]}
       >
-        <Grid2 xs={2} p={[0, 1.5]}>
+        <Grid size={2} p={[0, 1.5]}>
           <Box
             component="img"
             src={image ?? defaultImage}
@@ -67,8 +67,8 @@ const AppCard = ({
             borderRadius={1}
             overflow="hidden"
           />
-        </Grid2>
-        <Grid2 xs={10}>
+        </Grid>
+        <Grid size={10}>
           <CardContent
             sx={{
               pt: 1,
@@ -98,18 +98,18 @@ const AppCard = ({
               {description ?? <Skeleton height={20} />}
             </Typography>
           </CardContent>
-        </Grid2>
-      </Grid2>
+        </Grid>
+      </Grid>
     </StyledCardActionArea>
   </Card>
 );
 const AppCardWrapper = (props: Props): JSX.Element => (
-  <Grid2 xs={12} display="flex">
+  <Grid size={12} display="flex">
     <AppCard
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
     />
-  </Grid2>
+  </Grid>
 );
 
 export default AppCardWrapper;
diff --git a/src/components/table/ItemCard.tsx b/src/components/table/ItemCard.tsx
@@ -1,5 +1,4 @@
-import { Box, Typography } from '@mui/material';
-import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
+import { Box, Grid2 as Grid, Typography } from '@mui/material';
 
 import {
   DiscriminatedItem,
@@ -55,7 +54,7 @@ const ItemCard = ({
       : buildItemPath(item.id);
 
   const content = (
-    <Grid2
+    <Grid
       container
       height="100%"
       justifyContent="flex-start"
@@ -64,23 +63,35 @@ const ItemCard = ({
     >
       {dense ? (
         <>
-          <Grid2 xs={12} sm={12} md={6}>
+          <Grid
+            size={{
+              xs: 12,
+              sm: 12,
+              md: 6,
+            }}
+          >
             <Typography variant="caption">{item.type}</Typography>
-          </Grid2>
-          <Grid2 xs={12} sm={12} md={6}>
+          </Grid>
+          <Grid
+            size={{
+              xs: 12,
+              sm: 12,
+              md: 6,
+            }}
+          >
             <Typography variant="caption">
               {dateColumnFormatter(item.updatedAt)}
             </Typography>
-          </Grid2>
+          </Grid>
         </>
       ) : (
-        <Grid2 xs={12}>
+        <Grid size={12}>
           <Typography variant="caption">
             <TextDisplay content={item.description ?? ''} />
           </Typography>
-        </Grid2>
+        </Grid>
       )}
-    </Grid2>
+    </Grid>
   );
 
   // show link thumbnail