Migrate to Material UI v7

chitoku-k · chitoku-k · commit d3e2c8be1fb1 · 2025-03-29T19:19:40.000+09:00
diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { FunctionComponent, ReactNode } from 'react'
 import type { Metadata } from 'next'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 
 import Header from '@/components/Header'
 import ApolloWrapper from '@/components/ApolloWrapper'
diff --git a/ui/src/components/AutocompleteContainerBody/index.tsx b/ui/src/components/AutocompleteContainerBody/index.tsx
@@ -10,7 +10,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 import type { SvgIconProps } from '@mui/material/SvgIcon'
 import type { TextFieldVariants } from '@mui/material/TextField'
 import TextField from '@mui/material/TextField'
-import debounce from '@mui/material/utils/debounce'
+import { debounce } from '@mui/material/utils'
 
 import { ObjectKind } from '@/graphql/types.generated'
 import { useObjects, useObjectsSkip } from '@/hooks'
diff --git a/ui/src/components/AutocompleteMetadataBody/index.tsx b/ui/src/components/AutocompleteMetadataBody/index.tsx
@@ -12,7 +12,7 @@ import type { SvgIconProps } from '@mui/material/SvgIcon'
 import type { TextFieldVariants } from '@mui/material/TextField'
 import TextField from '@mui/material/TextField'
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'
-import debounce from '@mui/material/utils/debounce'
+import { debounce } from '@mui/material/utils'
 
 import TagSelectDialog from '@/components/TagSelectDialog'
 import { useMetadataLike, useMetadataLikeSkip, useAllTagTypes } from '@/hooks'
diff --git a/ui/src/components/AutocompleteSourceBody/index.tsx b/ui/src/components/AutocompleteSourceBody/index.tsx
@@ -9,7 +9,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 import type { SvgIconProps } from '@mui/material/SvgIcon'
 import type { TextFieldVariants } from '@mui/material/TextField'
 import TextField from '@mui/material/TextField'
-import debounce from '@mui/material/utils/debounce'
+import { debounce } from '@mui/material/utils'
 
 import type { ExternalMetadataInput } from '@/graphql/types.generated'
 import { useSource, useSourceSkip } from '@/hooks'
diff --git a/ui/src/components/AutocompleteTagBody/index.tsx b/ui/src/components/AutocompleteTagBody/index.tsx
@@ -13,7 +13,7 @@ import type { TextFieldVariants } from '@mui/material/TextField'
 import TextField from '@mui/material/TextField'
 import Tooltip from '@mui/material/Tooltip'
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'
-import debounce from '@mui/material/utils/debounce'
+import { debounce } from '@mui/material/utils'
 
 import TagSelectDialog from '@/components/TagSelectDialog'
 import { useTagsLike, useTagsLikeSkip } from '@/hooks'
diff --git a/ui/src/components/Content/index.tsx b/ui/src/components/Content/index.tsx
@@ -1,6 +1,6 @@
 import type { FunctionComponent, ReactNode } from 'react'
-import type { Grid2Props } from '@mui/material/Grid2'
-import Grid from '@mui/material/Grid2'
+import type { GridProps } from '@mui/material/Grid'
+import Grid from '@mui/material/Grid'
 import Toolbar from '@mui/material/Toolbar'
 
 import styles from './styles.module.scss'
@@ -17,7 +17,7 @@ const Content: FunctionComponent<ContentProps> = ({
   </Grid>
 )
 
-export interface ContentProps extends Grid2Props {
+export interface ContentProps extends GridProps {
   children: ReactNode
 }
 
diff --git a/ui/src/components/Content/styles.module.scss b/ui/src/components/Content/styles.module.scss
@@ -1,5 +1,5 @@
 .content {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     height: 100%;
   }
 }
diff --git a/ui/src/components/ExternalServiceListColumn/index.tsx b/ui/src/components/ExternalServiceListColumn/index.tsx
@@ -3,8 +3,8 @@
 import type { FunctionComponent, ReactNode } from 'react'
 import { Suspense } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import type { Grid2Props } from '@mui/material/Grid2'
-import Grid from '@mui/material/Grid2'
+import type { GridProps } from '@mui/material/Grid'
+import Grid from '@mui/material/Grid'
 
 import ExternalServiceListColumnError from '@/components/ExternalServiceListColumnError'
 import ExternalServiceListColumnLoading from '@/components/ExternalServiceListColumnLoading'
@@ -23,7 +23,7 @@ const ExternalServiceListColumn: FunctionComponent<ExternalServiceListColumnProp
   </Grid>
 )
 
-export interface ExternalServiceListColumnProps extends Grid2Props {
+export interface ExternalServiceListColumnProps extends GridProps {
   className?: string
   children?: ReactNode
 }
diff --git a/ui/src/components/ExternalServiceListView/index.tsx b/ui/src/components/ExternalServiceListView/index.tsx
@@ -4,7 +4,7 @@ import type { FunctionComponent } from 'react'
 import { useCallback, useState } from 'react'
 import clsx from 'clsx'
 import Card from '@mui/material/Card'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 
 import type { ExternalServiceColumn } from '@/components/ExternalServiceListColumn'
 import ExternalServiceDeleteDialog from '@/components/ExternalServiceDeleteDialog'
diff --git a/ui/src/components/ExternalServiceListView/styles.module.scss b/ui/src/components/ExternalServiceListView/styles.module.scss
@@ -8,23 +8,23 @@
 }
 
 .wrapper {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     flex-wrap: nowrap;
     height: inherit;
     overflow: hidden visible;
   }
 }
 
 .column {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     position: relative;
     flex-shrink: 0;
     height: inherit;
   }
 }
 
 .listColumn {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     border-right: 1px solid rgba(0, 0, 0, 0.12);
   }
 }
diff --git a/ui/src/components/MediumCreateView/index.tsx b/ui/src/components/MediumCreateView/index.tsx
@@ -4,7 +4,7 @@ import type { FunctionComponent } from 'react'
 import { useCallback, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Divider from '@mui/material/Divider'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import Portal from '@mui/material/Portal'
 import Snackbar from '@mui/material/Snackbar'
 import Stack from '@mui/material/Stack'
diff --git a/ui/src/components/MediumCreateView/styles.module.scss b/ui/src/components/MediumCreateView/styles.module.scss
@@ -1,5 +1,5 @@
 .container {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     margin: 0;
   }
 }
@@ -10,7 +10,7 @@
 }
 
 .metadataContainer {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     position: sticky;
     top: 64px;
     height: calc(100vh - 64px);
diff --git a/ui/src/components/MediumItemViewBody/index.tsx b/ui/src/components/MediumItemViewBody/index.tsx
@@ -5,7 +5,7 @@ import { useCallback, useState } from 'react'
 import * as uuid from 'uuid'
 import { useRouter } from 'next/navigation'
 import Divider from '@mui/material/Divider'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import Portal from '@mui/material/Portal'
 import Snackbar from '@mui/material/Snackbar'
 import Stack from '@mui/material/Stack'
diff --git a/ui/src/components/MediumItemViewBody/styles.module.scss b/ui/src/components/MediumItemViewBody/styles.module.scss
@@ -1,5 +1,5 @@
 .container {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     margin: 0;
   }
 }
@@ -10,7 +10,7 @@
 }
 
 .metadataContainer {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     position: sticky;
     top: 64px;
     height: calc(100vh - 64px);
diff --git a/ui/src/components/TagListColumn/index.tsx b/ui/src/components/TagListColumn/index.tsx
@@ -3,8 +3,8 @@
 import type { FunctionComponent, ReactNode } from 'react'
 import { Suspense, useCallback } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import type { Grid2Props } from '@mui/material/Grid2'
-import Grid from '@mui/material/Grid2'
+import type { GridProps } from '@mui/material/Grid'
+import Grid from '@mui/material/Grid'
 
 import TagListColumnError from '@/components/TagListColumnError'
 import TagListColumnLoading from '@/components/TagListColumnLoading'
@@ -53,7 +53,7 @@ const TagListColumn: FunctionComponent<TagListColumnProps> = ({
   )
 }
 
-export interface TagListColumnProps extends Grid2Props {
+export interface TagListColumnProps extends GridProps {
   className?: string
   focus?: boolean
   children?: ReactNode
diff --git a/ui/src/components/TagListViewBody/index.tsx b/ui/src/components/TagListViewBody/index.tsx
@@ -3,7 +3,7 @@
 import type { FunctionComponent } from 'react'
 import { useCallback, useState } from 'react'
 import clsx from 'clsx'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 
 import TagDeleteDialog from '@/components/TagDeleteDialog'
 import type { TagColumn, TagColumnSelectable } from '@/components/TagListColumn'
diff --git a/ui/src/components/TagListViewBody/styles.module.scss b/ui/src/components/TagListViewBody/styles.module.scss
@@ -1,21 +1,21 @@
 .wrapper {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     flex-wrap: nowrap;
     height: inherit;
     overflow: hidden visible;
   }
 }
 
 .column {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     position: relative;
     flex-shrink: 0;
     height: inherit;
   }
 }
 
 .listColumn {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     border-right: 1px solid rgba(0, 0, 0, 0.12);
   }
 }
diff --git a/ui/src/components/TagTypeListColumn/index.tsx b/ui/src/components/TagTypeListColumn/index.tsx
@@ -3,8 +3,8 @@
 import type { FunctionComponent, ReactNode } from 'react'
 import { Suspense } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import type { Grid2Props } from '@mui/material/Grid2'
-import Grid from '@mui/material/Grid2'
+import type { GridProps } from '@mui/material/Grid'
+import Grid from '@mui/material/Grid'
 
 import TagTypeListColumnError from '@/components/TagTypeListColumnError'
 import TagTypeListColumnLoading from '@/components/TagTypeListColumnLoading'
@@ -23,7 +23,7 @@ const TagTypeListColumn: FunctionComponent<TagTypeListColumnProps> = ({
   </Grid>
 )
 
-export interface TagTypeListColumnProps extends Grid2Props {
+export interface TagTypeListColumnProps extends GridProps {
   className?: string
   children?: ReactNode
 }
diff --git a/ui/src/components/TagTypeListView/index.tsx b/ui/src/components/TagTypeListView/index.tsx
@@ -4,7 +4,7 @@ import type { FunctionComponent } from 'react'
 import { useCallback, useState } from 'react'
 import clsx from 'clsx'
 import Card from '@mui/material/Card'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 
 import type { TagTypeColumn } from '@/components/TagTypeListColumn'
 import TagTypeDeleteDialog from '@/components/TagTypeDeleteDialog'
diff --git a/ui/src/components/TagTypeListView/styles.module.scss b/ui/src/components/TagTypeListView/styles.module.scss
@@ -8,23 +8,23 @@
 }
 
 .wrapper {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     flex-wrap: nowrap;
     height: inherit;
     overflow: hidden visible;
   }
 }
 
 .column {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     position: relative;
     flex-shrink: 0;
     height: inherit;
   }
 }
 
 .listColumn {
-  &:global(.MuiGrid2-root) {
+  &:global(.MuiGrid-root) {
     border-right: 1px solid rgba(0, 0, 0, 0.12);
   }
 }
diff --git a/ui/src/components/ThemeRegistry/theme.ts b/ui/src/components/ThemeRegistry/theme.ts
@@ -1,5 +1,5 @@
 import { createTheme } from '@mui/material'
-import cyan from '@mui/material/colors/cyan'
+import { cyan } from '@mui/material/colors'
 import { jaJP } from '@mui/material/locale'
 
 const theme = createTheme(

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import type { FunctionComponent, ReactNode } from 'react'`
`2`		`-import type { Grid2Props } from '@mui/material/Grid2'`
`3`		`-import Grid from '@mui/material/Grid2'`
	`2`	`+import type { GridProps } from '@mui/material/Grid'`
	`3`	`+import Grid from '@mui/material/Grid'`
`4`	`4`	`import Toolbar from '@mui/material/Toolbar'`
`5`	`5`
`6`	`6`	`import styles from './styles.module.scss'`
`@@ -17,7 +17,7 @@ const Content: FunctionComponent<ContentProps> = ({`
`17`	`17`	`</Grid>`
`18`	`18`	`)`
`19`	`19`
`20`		`-export interface ContentProps extends Grid2Props {`
	`20`	`+export interface ContentProps extends GridProps {`
`21`	`21`	`children: ReactNode`
`22`	`22`	`}`
`23`	`23`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.content {`
`2`		`- &:global(.MuiGrid2-root) {`
	`2`	`+ &:global(.MuiGrid-root) {`
`3`	`3`	`height: 100%;`
`4`	`4`	`}`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,23 +8,23 @@`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.wrapper {`
`11`		`- &:global(.MuiGrid2-root) {`
	`11`	`+ &:global(.MuiGrid-root) {`
`12`	`12`	`flex-wrap: nowrap;`
`13`	`13`	`height: inherit;`
`14`	`14`	`overflow: hidden visible;`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.column {`
`19`		`- &:global(.MuiGrid2-root) {`
	`19`	`+ &:global(.MuiGrid-root) {`
`20`	`20`	`position: relative;`
`21`	`21`	`flex-shrink: 0;`
`22`	`22`	`height: inherit;`
`23`	`23`	`}`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`.listColumn {`
`27`		`- &:global(.MuiGrid2-root) {`
	`27`	`+ &:global(.MuiGrid-root) {`
`28`	`28`	`border-right: 1px solid rgba(0, 0, 0, 0.12);`
`29`	`29`	`}`
`30`	`30`	`}`