feat: upgrade to mui 6 (#415)

pankod · Dec 13, 2024 · 4fec449 · 4fec449
1 parent a657832
commit 4fec449
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 145 deletions.
diff --git a/refine-nextjs/plugins/mui-example/src/app/blog-posts/page.tsx b/refine-nextjs/plugins/mui-example/src/app/blog-posts/page.tsx
@@ -7,10 +7,10 @@ import {
     DeleteButton,
     EditButton,
     List,
-    MarkdownField,
     ShowButton,
     useDataGrid,
 } from "@refinedev/mui";
+import { Typography } from '@mui/material'
 import React from "react";
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>
 import { BLOG_POSTS_QUERY } from  "@queries/blog-posts";
@@ -54,105 +54,112 @@ export default function BlogPostList() {
     });
 <%_ } _%>
 
-    const columns = React.useMemo<GridColDef[]>(
-        () => [
-            {
-                field: "id",
-                headerName: "ID",
-                type: "number",
-                minWidth: 50,
+const columns = React.useMemo<GridColDef[]>(
+    () => [
+        {
+            field: "id",
+            headerName: "ID",
+            type: "number",
+            minWidth: 50,
+            display: "flex",
+            align: 'left',
+            headerAlign: 'left',
+        },
+        {
+            field: "title",
+            headerName: "Title",
+            minWidth: 200,
+            display: "flex",
+        },
+        {
+            field: "content",
+            flex: 1,
+            headerName: "Content",
+            minWidth: 250,
+            display: "flex",
+            renderCell: function render({ value }) {
+                if (!value) return '-'
+                return (
+                    <Typography component='p' whiteSpace='pre' overflow='hidden' textOverflow='ellipsis'>
+                        {value}
+                    </Typography>
+                );
             },
-            {
-                field: "title",
-                flex: 1,
-                headerName: "Title",
-                minWidth: 200,
+        },
+        {
+            field:  <%- blogPostCategoryTableField %>,
+            headerName: "Category",
+            minWidth: 160,
+            display: "flex",
+            <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%>
+            valueGetter: (_, row) => {
+                  const value = row?.<%- blogPostCategoryFieldName %>?.title
+                   return value
             },
-            {
-                field: "content",
-                flex: 1,
-                headerName: "Content",
-                minWidth: 250,
-                renderCell: function render({ value }) {
-                    if (!value) return '-'
-                    return (
-                        <MarkdownField value={value?.slice(0, 80) + "..." || ""} />
-                    );
-                },
+            <%_ } else { _%>
+            valueGetter: (_, row) => {
+                const value = row?.<%- blogPostCategoryFieldName %>;
+                return value;
             },
-            {
-                field:  <%- blogPostCategoryTableField %>,
-                flex: 1,
-                headerName: "Category",
-                minWidth: 300,
-                <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%>
-                valueGetter: ({ row }) => {
-                      const value = row?.<%- blogPostCategoryFieldName %>?.title
-                       return value
-                },
-                <%_ } else { _%>
-                valueGetter: ({ row }) => {
-                    const value = row?.<%- blogPostCategoryFieldName %>;
-                    return value;
+            renderCell: function render({ value }) {
+                return categoryIsLoading ? (
+                    <>Loading...</>
+                ) : (
+                    categoryData?.data?.find((item) => item.id === value?.id)?.title
+                    );
                 },
-                renderCell: function render({ value }) {
-                    return categoryIsLoading ? (
-                        <>Loading...</>
-                    ) : (
-                        categoryData?.data?.find((item) => item.id === value?.id)?.title
-                        );
-                    },
-                <%_ } _%>
-            },
-            {
-                field: "status",
-                flex: 1,
-                headerName: "Status",
-                minWidth: 200,
-            },
-            {
+            <%_ } _%>
+        },
+        {
+            field: "status",
+            headerName: "Status",
+            minWidth: 80,
+            display: "flex",
+        },
+        {
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>  
-                    field: "created_at",   
+                field: "created_at",   
 <%_ } else if (answers["data-provider"] === "data-provider-appwrite") { _%>  
-                    field: "$createdAt",   
+                field: "$createdAt",   
 <%_ } else { _%>
-                    field: "createdAt",
+                field: "createdAt",
 <%_ } _%>        
-                flex: 1,
-                headerName: "Created at",
-                minWidth: 250,
-                renderCell: function render({ value }) {
-                    return <DateField value={value} />;
-                },
+            headerName: "Created at",
+            minWidth: 120,
+            display: "flex",
+            renderCell: function render({ value }) {
+                return <DateField value={value} />;
             },
-            {
-                field: "actions",
-                headerName: "Actions",
-                sortable: false,
-                renderCell: function render({ row }) {
-                    return (
-                        <>
-                            <EditButton hideText recordItemId={row.id} />
-                            <ShowButton hideText recordItemId={row.id} />
-                            <DeleteButton hideText recordItemId={row.id} />
-                        </>
-                    );
-                },
-                align: "center",
-                headerAlign: "center",
-                minWidth: 80,
+        },
+        {
+            field: 'actions',
+            headerName: 'Actions',
+            align: 'right',
+            headerAlign: 'right',
+            minWidth: 120,
+            sortable: false,
+            display: 'flex',
+            renderCell: function render({ row }) {
+                return (
+                    <>
+                        <EditButton hideText recordItemId={row.id} />
+                        <ShowButton hideText recordItemId={row.id} />
+                        <DeleteButton hideText recordItemId={row.id} />
+                    </>
+                );
             },
-        ],
-        <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%>
-            [],
-        <%_ } else { _%>
-            [categoryData],
-        <%_ } _%>
+        },
+    ],
+    <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%>
+        [],
+    <%_ } else { _%>
+        [categoryData, categoryIsLoading],
+    <%_ } _%>
     );
 
     return (
         <List>
-            <DataGrid {...dataGridProps} columns={columns} autoHeight />
+            <DataGrid {...dataGridProps} columns={columns} />
         </List>
     );
 };

diff --git a/refine-nextjs/plugins/mui-example/src/app/blog-posts/show/[id]/page.tsx b/refine-nextjs/plugins/mui-example/src/app/blog-posts/show/[id]/page.tsx
@@ -19,7 +19,7 @@ import { BLOG_POSTS_QUERY } from "@queries/blog-posts";
 
 
 export default function BlogPostShow() {
-    const { queryResult } = useShow({
+    const { query } = useShow({
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>
         meta: {
             fields: BLOG_POSTS_QUERY,
@@ -42,7 +42,7 @@ export default function BlogPostShow() {
 <%_ } _%>
     });
 
-    const { data, isLoading } = queryResult;
+    const { data, isLoading } = query;
 
     const record = data?.data;
 

diff --git a/refine-nextjs/plugins/mui-example/src/app/categories/page.tsx b/refine-nextjs/plugins/mui-example/src/app/categories/page.tsx
@@ -33,21 +33,29 @@ export default function CategoryList() {
     const columns = React.useMemo<GridColDef[]>(
         () => [
             {
-                field: "id",
-                headerName: "ID",
-                type: "number",
+                field: 'id',
+                headerName: 'ID',
+                type: 'number',
                 minWidth: 50,
+                display: 'flex',
+                align: 'left',
+                headerAlign: 'left',
             },
             {
                 field: "title",
                 flex: 1,
                 headerName: "Title",
                 minWidth: 200,
+                display: "flex",
             },
             {
-                field: "actions",
-                headerName: "Actions",
+                field: 'actions',
+                headerName: 'Actions',
+                align: 'right',
+                headerAlign: 'right',
+                minWidth: 120,
                 sortable: false,
+                display: 'flex',
                 renderCell: function render({ row }) {
                     return (
                         <>
@@ -57,17 +65,14 @@ export default function CategoryList() {
                         </>
                     );
                 },
-                align: "center",
-                headerAlign: "center",
-                minWidth: 80,
             },
         ],
         [],
     );
 
     return (
         <List>
-            <DataGrid {...dataGridProps} columns={columns} autoHeight />
+            <DataGrid {...dataGridProps} columns={columns} />
         </List>
     );
 };
diff --git a/refine-nextjs/plugins/mui-example/src/app/categories/show/[id]/page.tsx b/refine-nextjs/plugins/mui-example/src/app/categories/show/[id]/page.tsx
@@ -15,7 +15,7 @@ import {
 <%_ } _%>
 
 export default function CategoryShow() {
-    const { queryResult } = useShow({
+    const { query } = useShow({
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>
             meta: {
                 fields: CATEGORIES_QUERY,
@@ -27,7 +27,7 @@ export default function CategoryShow() {
             },
 <%_ } _%>
     });
-    const { data, isLoading } = queryResult;
+    const { data, isLoading } = query;
 
     const record = data?.data;
 

diff --git a/refine-nextjs/plugins/mui/extend.js b/refine-nextjs/plugins/mui/extend.js
@@ -1,7 +1,7 @@
 const base = {
     _app: {
-        refineProps: ["notificationProvider={notificationProvider}"],
-        refineMuiImports: ["notificationProvider", "RefineSnackbarProvider"],
+        refineProps: ["notificationProvider={useNotificationProvider}"],
+        refineMuiImports: ["useNotificationProvider", "RefineSnackbarProvider"],
         wrapper: [
             [
                 "<ColorModeContextProvider defaultMode={defaultMode}>",

diff --git a/refine-nextjs/plugins/mui/package.json b/refine-nextjs/plugins/mui/package.json
@@ -1,13 +1,13 @@
 {
   "dependencies": {
-    "@refinedev/mui": "^5.14.4",
+    "@refinedev/mui": "^6.0.0",
     "@refinedev/react-hook-form": "^4.8.14",
-    "@mui/icons-material": "^5.8.3",
+    "@mui/icons-material": "^6.1.6",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
-    "@mui/lab": "^5.0.0-alpha.85",
-    "@mui/material": "^5.8.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/lab": "^6.0.0-beta.14",
+    "@mui/material": "^6.1.7",
+    "@mui/x-data-grid": "^7.22.2",
     "js-cookie": "^3.0.5"
   },
   "devDependencies": {