From daf1592d991cad3b915baefea38c7e892b69d218 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Mon, 27 May 2024 13:45:27 +0300 Subject: [PATCH 01/13] chore(refine-nextjs): use refine options to set title and icon --- refine-nextjs/plugins/_base/extend.js | 15 ++++++++ .../_base/src/components/auth-page/index.tsx | 22 ------------ .../src/app/blog-posts/layout.tsx | 5 +-- .../src/app/categories/layout.tsx | 5 +-- .../src/components/themed-layout/index.tsx | 35 ------------------- .../antd/src/components/header/index.tsx | 2 +- .../src/app/_refine_context.tsx | 1 + .../src/app/_refine_context.tsx | 1 + .../src/app/_refine_context.tsx | 1 + .../mui-example/src/app/blog-posts/layout.tsx | 5 +-- .../mui-example/src/app/categories/layout.tsx | 5 +-- .../src/components/themed-layout/index.tsx | 35 ------------------- 12 files changed, 31 insertions(+), 101 deletions(-) delete mode 100644 refine-nextjs/plugins/antd-example/src/components/themed-layout/index.tsx delete mode 100644 refine-nextjs/plugins/mui-example/src/components/themed-layout/index.tsx diff --git a/refine-nextjs/plugins/_base/extend.js b/refine-nextjs/plugins/_base/extend.js index 1d4ecf78..bce99a71 100644 --- a/refine-nextjs/plugins/_base/extend.js +++ b/refine-nextjs/plugins/_base/extend.js @@ -238,6 +238,21 @@ module.exports = { base.blogPostStatusDefaultValue = `"draft"`; } + // ## Refine options.title + if ( + answers["ui-framework"] !== "no" && + (answers["title"] || answers["svg"]) + ) { + if (!base._app.refineOptions) { + base._app.refineOptions = []; + } + const textLine = answers["title"] ? `text: "${answers["title"]}",` : ""; + const iconLine = answers["svg"] ? `icon: ,` : ""; + const template = `title: { ${textLine} ${iconLine} },`; + + base._app.refineOptions.push(template); + } + return base; }, }; diff --git a/refine-nextjs/plugins/_base/src/components/auth-page/index.tsx b/refine-nextjs/plugins/_base/src/components/auth-page/index.tsx index 7357f33e..3701a6ea 100644 --- a/refine-nextjs/plugins/_base/src/components/auth-page/index.tsx +++ b/refine-nextjs/plugins/_base/src/components/auth-page/index.tsx @@ -2,26 +2,17 @@ <%_ if (answers["ui-framework"] === 'antd') { _%> import { AuthPage as AuthPageBase, - <%_ if (selectedSvg || selectedTitle) { _%> - ThemedTitleV2, - <%_ } _%> } from "@refinedev/antd"; <%_ } _%> <%_ if (answers["ui-framework"] === 'mui') { _%> import { AuthPage as AuthPageBase, - <%_ if (selectedSvg || selectedTitle) { _%> - ThemedTitleV2, - <%_ } _%> } from "@refinedev/mui"; <%_ } _%> <%_ if (answers[`ui-framework`] === "no") { _%> import { AuthPage as AuthPageBase } from "@refinedev/core"; <%_ } _%> import type { AuthPageProps } from '@refinedev/core' - <%_ if (selectedSvg && answers["ui-framework"] !== "no") { _%> - import { AppIcon } from '@components/app-icon' - <%_ } _%> export const AuthPage = (props: AuthPageProps) => { @@ -30,19 +21,6 @@ - <%_ if ((selectedSvg || selectedTitle) && answers["ui-framework"] !== "no") { _%> - title={( - - text="<%= selectedTitle %>" - <%_ } _%> - <%_ if (selectedSvg) { _%> - icon={} - <%_ } _%> - /> - )} - <%_ } _%> /> ); } diff --git a/refine-nextjs/plugins/antd-example/src/app/blog-posts/layout.tsx b/refine-nextjs/plugins/antd-example/src/app/blog-posts/layout.tsx index 8cb7254b..9cf42336 100644 --- a/refine-nextjs/plugins/antd-example/src/app/blog-posts/layout.tsx +++ b/refine-nextjs/plugins/antd-example/src/app/blog-posts/layout.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { ThemedLayout } from "@components/themed-layout"; +import { ThemedLayoutV2 } from "@refinedev/antd"; +import { Header } from "@components/header"; <%_ if (_app.isNextAuthCheck) { _%> import authOptions from "@app/api/auth/[...nextauth]/options"; import { getServerSession } from 'next-auth/next' @@ -28,7 +29,7 @@ export default async function Layout({ children }: React.PropsWithChildren) { <%_ } _%> - return {children}; + return {children}; } diff --git a/refine-nextjs/plugins/antd-example/src/app/categories/layout.tsx b/refine-nextjs/plugins/antd-example/src/app/categories/layout.tsx index 8cb7254b..9cf42336 100644 --- a/refine-nextjs/plugins/antd-example/src/app/categories/layout.tsx +++ b/refine-nextjs/plugins/antd-example/src/app/categories/layout.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { ThemedLayout } from "@components/themed-layout"; +import { ThemedLayoutV2 } from "@refinedev/antd"; +import { Header } from "@components/header"; <%_ if (_app.isNextAuthCheck) { _%> import authOptions from "@app/api/auth/[...nextauth]/options"; import { getServerSession } from 'next-auth/next' @@ -28,7 +29,7 @@ export default async function Layout({ children }: React.PropsWithChildren) { <%_ } _%> - return {children}; + return {children}; } diff --git a/refine-nextjs/plugins/antd-example/src/components/themed-layout/index.tsx b/refine-nextjs/plugins/antd-example/src/components/themed-layout/index.tsx deleted file mode 100644 index 9788deb7..00000000 --- a/refine-nextjs/plugins/antd-example/src/components/themed-layout/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -"use client"; - -import { Header } from "@components/header"; -import { - ThemedLayoutV2, - <%_ if (selectedSvg || selectedTitle) { _%> - ThemedTitleV2 - <%_ } _%> -} from "@refinedev/antd"; -import React from "react"; -<%_ if (selectedSvg) { _%> - import { AppIcon } from "@components/app-icon"; -<%_ } _%> - -export const ThemedLayout = ({ children }: React.PropsWithChildren) => { - return ( -
} - <%_ if (selectedSvg || selectedTitle) { _%> - Title={({ collapsed }) => ( - - text="<%= selectedTitle %>" - <%_ } _%> - <%_ if (selectedSvg) { _%> - icon={} - <%_ } _%> - /> - )} - <%_ } _%> - > - {children} - - ); -}; diff --git a/refine-nextjs/plugins/antd/src/components/header/index.tsx b/refine-nextjs/plugins/antd/src/components/header/index.tsx index 8111be9e..3594577f 100644 --- a/refine-nextjs/plugins/antd/src/components/header/index.tsx +++ b/refine-nextjs/plugins/antd/src/components/header/index.tsx @@ -23,7 +23,7 @@ type IUser = { }; export const Header: React.FC = ({ - sticky, + sticky = true, }) => { const { token } = useToken(); const { data: user } = useGetIdentity(); diff --git a/refine-nextjs/plugins/auth-provider-auth0/src/app/_refine_context.tsx b/refine-nextjs/plugins/auth-provider-auth0/src/app/_refine_context.tsx index 39f8c4bc..97eb1b8c 100644 --- a/refine-nextjs/plugins/auth-provider-auth0/src/app/_refine_context.tsx +++ b/refine-nextjs/plugins/auth-provider-auth0/src/app/_refine_context.tsx @@ -186,6 +186,7 @@ const App = (props: React.PropsWithChildren) => { <%_ if (typeof projectId !== 'undefined' && projectId !== '') { _%> projectId: "<%= projectId %>", <%_ } _%> + <%- (_app.refineOptions || []).join("\n") %> }} > {props.children} diff --git a/refine-nextjs/plugins/auth-provider-google/src/app/_refine_context.tsx b/refine-nextjs/plugins/auth-provider-google/src/app/_refine_context.tsx index 42f584bb..80fac8be 100644 --- a/refine-nextjs/plugins/auth-provider-google/src/app/_refine_context.tsx +++ b/refine-nextjs/plugins/auth-provider-google/src/app/_refine_context.tsx @@ -186,6 +186,7 @@ const App = (props: React.PropsWithChildren) => { <%_ if (typeof projectId !== 'undefined' && projectId !== '') { _%> projectId: "<%= projectId %>", <%_ } _%> + <%- (_app.refineOptions || []).join("\n") %> }} > {props.children} diff --git a/refine-nextjs/plugins/auth-provider-keycloak/src/app/_refine_context.tsx b/refine-nextjs/plugins/auth-provider-keycloak/src/app/_refine_context.tsx index 0661a4d8..da8fa733 100644 --- a/refine-nextjs/plugins/auth-provider-keycloak/src/app/_refine_context.tsx +++ b/refine-nextjs/plugins/auth-provider-keycloak/src/app/_refine_context.tsx @@ -186,6 +186,7 @@ const App = (props: React.PropsWithChildren) => { <%_ if (typeof projectId !== 'undefined' && projectId !== '') { _%> projectId: "<%= projectId %>", <%_ } _%> + <%- (_app.refineOptions || []).join("\n") %> }} > {props.children} diff --git a/refine-nextjs/plugins/mui-example/src/app/blog-posts/layout.tsx b/refine-nextjs/plugins/mui-example/src/app/blog-posts/layout.tsx index 8cb7254b..3c6c010d 100644 --- a/refine-nextjs/plugins/mui-example/src/app/blog-posts/layout.tsx +++ b/refine-nextjs/plugins/mui-example/src/app/blog-posts/layout.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { ThemedLayout } from "@components/themed-layout"; +import { ThemedLayoutV2 } from "@refinedev/mui"; +import { Header } from "@components/header"; <%_ if (_app.isNextAuthCheck) { _%> import authOptions from "@app/api/auth/[...nextauth]/options"; import { getServerSession } from 'next-auth/next' @@ -28,7 +29,7 @@ export default async function Layout({ children }: React.PropsWithChildren) { <%_ } _%> - return {children}; + return {children}; } diff --git a/refine-nextjs/plugins/mui-example/src/app/categories/layout.tsx b/refine-nextjs/plugins/mui-example/src/app/categories/layout.tsx index 8cb7254b..3c6c010d 100644 --- a/refine-nextjs/plugins/mui-example/src/app/categories/layout.tsx +++ b/refine-nextjs/plugins/mui-example/src/app/categories/layout.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { ThemedLayout } from "@components/themed-layout"; +import { ThemedLayoutV2 } from "@refinedev/mui"; +import { Header } from "@components/header"; <%_ if (_app.isNextAuthCheck) { _%> import authOptions from "@app/api/auth/[...nextauth]/options"; import { getServerSession } from 'next-auth/next' @@ -28,7 +29,7 @@ export default async function Layout({ children }: React.PropsWithChildren) { <%_ } _%> - return {children}; + return {children}; } diff --git a/refine-nextjs/plugins/mui-example/src/components/themed-layout/index.tsx b/refine-nextjs/plugins/mui-example/src/components/themed-layout/index.tsx deleted file mode 100644 index eb39dddc..00000000 --- a/refine-nextjs/plugins/mui-example/src/components/themed-layout/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -"use client"; - -import { Header } from "@components/header"; -import { - ThemedLayoutV2, - <%_ if (selectedSvg || selectedTitle) { _%> - ThemedTitleV2 - <%_ } _%> - } from "@refinedev/mui"; -import React from "react"; -<%_ if (selectedSvg) { _%> - import { AppIcon } from "@components/app-icon"; -<%_ } _%> - -export const ThemedLayout = ({ children }: React.PropsWithChildren) => { - return ( -
} - <%_ if (selectedSvg || selectedTitle) { _%> - Title={({ collapsed }) => ( - - text="<%= selectedTitle %>" - <%_ } _%> - <%_ if (selectedSvg) { _%> - icon={} - <%_ } _%> - /> - )} - <%_ } _%> - > - {children} - - ); -}; From 36f1fafeaa9fa6029efbb829c1b06e2bfb91c236 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Mon, 27 May 2024 13:56:25 +0300 Subject: [PATCH 02/13] chore(refine-nextjs): add preset --- presets.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/presets.js b/presets.js index db7e097e..e5641e28 100644 --- a/presets.js +++ b/presets.js @@ -51,6 +51,14 @@ module.exports = { "headless-example": "no", }, }, + { + name: "test-title-option", + type: "refine-nextjs", + answers: { + "title": "Refine Next.js", + "svg": "
", + } + }, { name: "refine-antd-nextjs", type: "refine-nextjs", From 261cbedbb396c5c8f90e57cfce8bae5763bf7756 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Mon, 27 May 2024 14:11:30 +0300 Subject: [PATCH 03/13] chore(refine-vite): use refine options title --- refine-vite/plugins/_base/extend.js | 28 +++++++------ .../antd/src/components/header/index.tsx | 2 +- .../auth-provider-auth0/src/pages/login.tsx | 17 -------- .../src/pages/forgotPassword/index.tsx | 22 ---------- .../src/pages/login/index.tsx | 22 ---------- .../src/pages/register/index.tsx | 22 ---------- .../auth-provider-google/src/pages/login.tsx | 18 +------- .../src/pages/login.tsx | 16 -------- refine-vite/template/src/App.tsx | 41 +------------------ 9 files changed, 18 insertions(+), 170 deletions(-) diff --git a/refine-vite/plugins/_base/extend.js b/refine-vite/plugins/_base/extend.js index 768f58fa..ce734aba 100644 --- a/refine-vite/plugins/_base/extend.js +++ b/refine-vite/plugins/_base/extend.js @@ -160,19 +160,6 @@ module.exports = { base.selectedSvg = svgFromAnswers; } - if ( - answers["ui-framework"] !== "no" && - (answers["title"] || answers["svg"]) - ) { - if (answers["ui-framework"] === "antd") { - base._app.refineAntdImports.push("ThemedTitleV2"); - } - - if (answers["ui-framework"] === "mui") { - base._app.refineMuiImports.push("ThemedTitleV2"); - } - } - if ( answers["ui-framework"] !== "no" && (answers["title"] || answers["svg"]) @@ -264,6 +251,21 @@ module.exports = { base.blogPostStatusDefaultValue = `"draft"`; } + // ## Refine options.title + if ( + answers["ui-framework"] !== "no" && + (answers["title"] || answers["svg"]) + ) { + if (!base._app.refineOptions) { + base._app.refineOptions = []; + } + const textLine = answers["title"] ? `text: "${answers["title"]}",` : ""; + const iconLine = answers["svg"] ? `icon: ,` : ""; + const template = `title: { ${textLine} ${iconLine} },`; + + base._app.refineOptions.push(template); + } + // ## localImport return base; }, diff --git a/refine-vite/plugins/antd/src/components/header/index.tsx b/refine-vite/plugins/antd/src/components/header/index.tsx index 702298b1..0fe166c5 100644 --- a/refine-vite/plugins/antd/src/components/header/index.tsx +++ b/refine-vite/plugins/antd/src/components/header/index.tsx @@ -21,7 +21,7 @@ type IUser = { }; export const Header: React.FC = ({ - sticky, + sticky = true, }) => { const { token } = useToken(); const { data: user } = useGetIdentity(); diff --git a/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx b/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx index c1e7d62f..9c4661c1 100644 --- a/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx +++ b/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx @@ -10,13 +10,8 @@ import Typography from "@mui/material/Typography"; import { ThemedTitleV2 } from "@refinedev/mui"; <%_ } _%> - import { useAuth0 } from "@auth0/auth0-react"; -<%_ if (selectedSvg && answers["ui-framework"] !== "no" ) { _%> -import { AppIcon } from "../components/app-icon"; -<%_ } _%> - export const Login: React.FC = () => { const { loginWithRedirect } = useAuth0(); @@ -36,12 +31,6 @@ export const Login: React.FC = () => { fontSize: "22px", marginBottom: "36px", }} - <%_ if (selectedTitle) { _%> - text="<%= selectedTitle %>" - <%_ } _%> - <%_ if (selectedSvg) { _%> - icon={} - <%_ } _%> /> diff --git a/refine-nextjs/plugins/auth-provider-google/src/app/login/page.tsx b/refine-nextjs/plugins/auth-provider-google/src/app/login/page.tsx index a137ed0d..c2d16e46 100644 --- a/refine-nextjs/plugins/auth-provider-google/src/app/login/page.tsx +++ b/refine-nextjs/plugins/auth-provider-google/src/app/login/page.tsx @@ -12,10 +12,6 @@ import Typography from "@mui/material/Typography"; import { ThemedTitleV2 } from "@refinedev/mui"; <%_ } _%> import { useLogin } from "@refinedev/core"; -<%_ if (selectedSvg && answers["ui-framework"] !== "no" ) { _%> -import { AppIcon } from "@components/app-icon"; -<%_ } _%> - export default function Login() { const { mutate: login } = useLogin(); @@ -35,12 +31,6 @@ export default function Login() { wrapperStyles={{ fontSize: "22px", }} - <%_ if (selectedTitle) { _%> - text="<%= selectedTitle %>" - <%_ } _%> - <%_ if (selectedSvg) { _%> - icon={} - <%_ } _%> /> diff --git a/refine-nextjs/plugins/auth-provider-keycloak/src/app/login/page.tsx b/refine-nextjs/plugins/auth-provider-keycloak/src/app/login/page.tsx index ddd1a2cf..3598fc96 100644 --- a/refine-nextjs/plugins/auth-provider-keycloak/src/app/login/page.tsx +++ b/refine-nextjs/plugins/auth-provider-keycloak/src/app/login/page.tsx @@ -12,10 +12,6 @@ import Typography from "@mui/material/Typography"; import { ThemedTitleV2 } from "@refinedev/mui"; <%_ } _%> import { useLogin } from "@refinedev/core"; - -<%_ if (selectedSvg && answers["ui-framework"] !== "no" ) { _%> -import { AppIcon } from "@components/app-icon"; -<%_ } _%> export default function Login() { const { mutate: login } = useLogin(); @@ -36,12 +32,6 @@ export default function Login() { fontSize: "22px", marginBottom: "36px", }} - <%_ if (selectedTitle) { _%> - text="<%= selectedTitle %>" - <%_ } _%> - <%_ if (selectedSvg) { _%> - icon={} - <%_ } _%> /> From ed5c57aefb3d8c14bd8da862b9b5fd7a56269dae Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Tue, 4 Jun 2024 16:08:01 +0300 Subject: [PATCH 12/13] fix html title tests --- cypress/e2e/build-test.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/build-test.cy.js b/cypress/e2e/build-test.cy.js index c42b2cb6..0550b452 100644 --- a/cypress/e2e/build-test.cy.js +++ b/cypress/e2e/build-test.cy.js @@ -122,7 +122,7 @@ describe("build test", () => { Cypress.env("FRAMEWORK") !== "remix" && Cypress.env("FRAMEWORK") !== "nextjs" ) { - cy.title().should("eq", "Blog posts | refine"); + cy.title().should("eq", "Blog posts | Refine"); } if (Cypress.env("UI_FRAMEWORK") !== "no") { From 56803167a8a8ecb9022917e8061b861e8def20c6 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Tue, 4 Jun 2024 16:34:19 +0300 Subject: [PATCH 13/13] fix: add use client directive to header --- refine-nextjs/plugins/mui/src/components/header/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/refine-nextjs/plugins/mui/src/components/header/index.tsx b/refine-nextjs/plugins/mui/src/components/header/index.tsx index cecce2c6..7e7240e7 100644 --- a/refine-nextjs/plugins/mui/src/components/header/index.tsx +++ b/refine-nextjs/plugins/mui/src/components/header/index.tsx @@ -1,3 +1,5 @@ +'use client' + import { ColorModeContext } from "@contexts/color-mode"; import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined"; import LightModeOutlined from "@mui/icons-material/LightModeOutlined";