From 4fec4495daaeeaf2185383db92bbe835f6259d19 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Fri, 13 Dec 2024 15:40:39 +0300 Subject: [PATCH] feat: upgrade to mui 6 (#415) --- .../mui-example/src/app/blog-posts/page.tsx | 179 +++++++++--------- .../src/app/blog-posts/show/[id]/page.tsx | 4 +- .../mui-example/src/app/categories/page.tsx | 23 ++- .../src/app/categories/show/[id]/page.tsx | 4 +- refine-nextjs/plugins/mui/extend.js | 4 +- refine-nextjs/plugins/mui/package.json | 10 +- .../mui-example/src/pages/blog-posts/list.tsx | 44 +++-- .../mui-example/src/pages/blog-posts/show.tsx | 4 +- .../mui-example/src/pages/categories/list.tsx | 23 ++- .../mui-example/src/pages/categories/show.tsx | 4 +- refine-vite/plugins/mui/extend.js | 4 +- refine-vite/plugins/mui/package.json | 10 +- 12 files changed, 168 insertions(+), 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 index d1e3bddb..a5aa62b7 100644 --- 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( - () => [ - { - field: "id", - headerName: "ID", - type: "number", - minWidth: 50, +const columns = React.useMemo( + () => [ + { + 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 ( + + {value} + + ); }, - { - 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 ( - - ); - }, + <%_ } 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 ; - }, + headerName: "Created at", + minWidth: 120, + display: "flex", + renderCell: function render({ value }) { + return ; }, - { - field: "actions", - headerName: "Actions", - sortable: false, - renderCell: function render({ row }) { - return ( - <> - - - - - ); - }, - 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 ( + <> + + + + + ); }, - ], - <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%> - [], - <%_ } else { _%> - [categoryData], - <%_ } _%> + }, + ], + <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%> + [], + <%_ } else { _%> + [categoryData, categoryIsLoading], + <%_ } _%> ); return ( - + ); }; 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 index bfe3ce71..ea76a916 100644 --- 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 index d8e74b7d..ffaf1a99 100644 --- 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( () => [ { - 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,9 +65,6 @@ export default function CategoryList() { ); }, - align: "center", - headerAlign: "center", - minWidth: 80, }, ], [], @@ -67,7 +72,7 @@ export default function CategoryList() { return ( - + ); }; 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 index 472803c1..2b8b43d3 100644 --- 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 index f78eb01a..1a07ecf2 100644 --- 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: [ [ "", diff --git a/refine-nextjs/plugins/mui/package.json b/refine-nextjs/plugins/mui/package.json index e9a2b7ae..d1a35f35 100644 --- 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": { diff --git a/refine-vite/plugins/mui-example/src/pages/blog-posts/list.tsx b/refine-vite/plugins/mui-example/src/pages/blog-posts/list.tsx index eabc3a65..925a96b3 100644 --- a/refine-vite/plugins/mui-example/src/pages/blog-posts/list.tsx +++ b/refine-vite/plugins/mui-example/src/pages/blog-posts/list.tsx @@ -5,10 +5,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' @@ -20,7 +20,6 @@ import React from "react"; export const BlogPostList = () => { const { dataGridProps } = useDataGrid({ - syncWithLocation: true, <%_ if (answers["data-provider"] === "data-provider-hasura") { _%> meta: { fields: BLOG_POSTS_QUERY, @@ -60,37 +59,43 @@ export const BlogPostList = () => { headerName: "ID", type: "number", minWidth: 50, + display: "flex", + align: 'left', + headerAlign: 'left', }, { field: "title", - flex: 1, headerName: "Title", minWidth: 200, + display: "flex", }, { field: "content", flex: 1, headerName: "Content", minWidth: 250, + display: "flex", renderCell: function render({ value }) { if (!value) return '-' return ( - + + {value} + ); }, }, { field: <%- blogPostCategoryTableField %>, - flex: 1, headerName: "Category", - minWidth: 300, + minWidth: 160, + display: "flex", <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%> - valueGetter: ({ row }) => { + valueGetter: (_, row) => { const value = row?.<%- blogPostCategoryFieldName %>?.title return value }, <%_ } else { _%> - valueGetter: ({ row }) => { + valueGetter: (_, row) => { const value = row?.<%- blogPostCategoryFieldName %>; return value; }, @@ -105,9 +110,9 @@ export const BlogPostList = () => { }, { field: "status", - flex: 1, headerName: "Status", - minWidth: 200, + minWidth: 80, + display: "flex", }, { <%_ if (answers["data-provider"] === "data-provider-hasura") { _%> @@ -117,17 +122,21 @@ export const BlogPostList = () => { <%_ } else { _%> field: "createdAt", <%_ } _%> - flex: 1, headerName: "Created at", - minWidth: 250, + minWidth: 120, + display: "flex", renderCell: function render({ value }) { return ; }, }, { - field: "actions", - headerName: "Actions", + field: 'actions', + headerName: 'Actions', + align: 'right', + headerAlign: 'right', + minWidth: 120, sortable: false, + display: 'flex', renderCell: function render({ row }) { return ( <> @@ -137,15 +146,12 @@ export const BlogPostList = () => { ); }, - align: "center", - headerAlign: "center", - minWidth: 80, }, ], <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%> [], <%_ } else { _%> - [categoryData], + [categoryData, categoryIsLoading], <%_ } _%> @@ -153,7 +159,7 @@ export const BlogPostList = () => { return ( - + ); }; diff --git a/refine-vite/plugins/mui-example/src/pages/blog-posts/show.tsx b/refine-vite/plugins/mui-example/src/pages/blog-posts/show.tsx index db03637d..8efeb258 100644 --- a/refine-vite/plugins/mui-example/src/pages/blog-posts/show.tsx +++ b/refine-vite/plugins/mui-example/src/pages/blog-posts/show.tsx @@ -15,7 +15,7 @@ import { <%_ } _%> export const BlogPostShow = () => { - const { queryResult } = useShow({ + const { query } = useShow({ <%_ if (answers["data-provider"] === "data-provider-hasura") { _%> meta: { fields: BLOG_POSTS_QUERY, @@ -38,7 +38,7 @@ export const BlogPostShow = () => { <%_ } _%> }); - const { data, isLoading } = queryResult; + const { data, isLoading } = query; const record = data?.data; diff --git a/refine-vite/plugins/mui-example/src/pages/categories/list.tsx b/refine-vite/plugins/mui-example/src/pages/categories/list.tsx index 845b7106..0211d9ac 100644 --- a/refine-vite/plugins/mui-example/src/pages/categories/list.tsx +++ b/refine-vite/plugins/mui-example/src/pages/categories/list.tsx @@ -31,21 +31,29 @@ export const CategoryList = () => { const columns = React.useMemo( () => [ { - 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 ( <> @@ -55,9 +63,6 @@ export const CategoryList = () => { ); }, - align: "center", - headerAlign: "center", - minWidth: 80, }, ], [], @@ -65,7 +70,7 @@ export const CategoryList = () => { return ( - + ); }; diff --git a/refine-vite/plugins/mui-example/src/pages/categories/show.tsx b/refine-vite/plugins/mui-example/src/pages/categories/show.tsx index 28edbb8c..f44854e0 100644 --- a/refine-vite/plugins/mui-example/src/pages/categories/show.tsx +++ b/refine-vite/plugins/mui-example/src/pages/categories/show.tsx @@ -13,7 +13,7 @@ import { <%_ } _%> export const CategoryShow = () => { - const { queryResult } = useShow({ + const { query } = useShow({ <%_ if (answers["data-provider"] === "data-provider-hasura") { _%> meta: { fields: CATEGORIES_QUERY, @@ -25,7 +25,7 @@ export const CategoryShow = () => { }, <%_ } _%> }); - const { data, isLoading } = queryResult; + const { data, isLoading } = query; const record = data?.data; diff --git a/refine-vite/plugins/mui/extend.js b/refine-vite/plugins/mui/extend.js index 7b027add..c440b03b 100644 --- a/refine-vite/plugins/mui/extend.js +++ b/refine-vite/plugins/mui/extend.js @@ -1,12 +1,12 @@ const base = { _app: { - refineProps: ["notificationProvider={notificationProvider}"], + refineProps: ["notificationProvider={useNotificationProvider}"], import: [ `import CssBaseline from "@mui/material/CssBaseline";`, `import GlobalStyles from "@mui/material/GlobalStyles";`, ], refineMuiImports: [ - "notificationProvider", + "useNotificationProvider", "RefineSnackbarProvider", "ThemedLayoutV2", ], diff --git a/refine-vite/plugins/mui/package.json b/refine-vite/plugins/mui/package.json index 564bf4b2..012bb514 100644 --- a/refine-vite/plugins/mui/package.json +++ b/refine-vite/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", "react-hook-form": "^7.30.0" } }