chore(refine): use options.title for app name and app icon

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") {

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: <AppIcon />,` : "";
+            const template = `title: { ${textLine} ${iconLine} },`;
+
+            base._app.refineOptions.push(template);
+        }
+
         return base;
     },
 };

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 @@
           <AuthPageBase
               {...props}
               <%- (_app.authPageProps || []).join("\n") %>
-              <%_ if ((selectedSvg || selectedTitle) && answers["ui-framework"] !== "no") { _%>
-              title={(
-                  <ThemedTitleV2
-                      collapsed={false}
-                      <%_ if (selectedTitle) { _%>
-                          text="<%= selectedTitle %>"
-                      <%_ } _%>
-                      <%_ if (selectedSvg) { _%>
-                          icon={<AppIcon />}
-                      <%_ } _%>
-                  />
-              )}
-              <%_ } _%>
           />
       );
   }

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 <ThemedLayout>{children}</ThemedLayout>;
+    return <ThemedLayoutV2 Header={Header}>{children}</ThemedLayoutV2>;
 }
 
 

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 <ThemedLayout>{children}</ThemedLayout>;
+    return <ThemedLayoutV2 Header={Header}>{children}</ThemedLayoutV2>;
 }
 
 

refine-nextjs/plugins/antd/src/components/header/index.tsx

@@ -23,7 +23,7 @@ type IUser = {
 };
 
 export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
-    sticky,
+    sticky = true,
 }) => {
     const { token } = useToken();
     const { data: user } = useGetIdentity<IUser>();

refine-nextjs/plugins/auth-provider-auth0/src/app/_refine_context.tsx

@@ -186,6 +186,7 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
                     <%_ if (typeof projectId !== 'undefined' && projectId !== '') { _%>
                         projectId: "<%= projectId %>",
                     <%_ } _%>
+                    <%- (_app.refineOptions || []).join("\n") %>
                 }}
             >
                 {props.children}

refine-nextjs/plugins/auth-provider-auth0/src/app/login/page.tsx

@@ -14,12 +14,6 @@ import Typography from "@mui/material/Typography";
 import { ThemedTitleV2 } from "@refinedev/mui";
 <%_ } _%>
 
-<%_ if (selectedSvg && answers["ui-framework"] !== "no" ) { _%>
-import { AppIcon } from "@components/app-icon";
-<%_ } _%>
-
-
-
 export default function Login() {
     const { mutate: login } = useLogin();
 
@@ -39,12 +33,6 @@ export default function Login() {
                     fontSize: "22px",
                     marginBottom: "36px",
                 }}
-                <%_ if (selectedTitle) { _%>
-                    text="<%= selectedTitle %>"
-                <%_ } _%>
-                <%_ if (selectedSvg) { _%>
-                    icon={<AppIcon />}
-                <%_ } _%>
                 />
                 <Button
                     style={{ width: "240px",  marginBottom: "32px" }}
@@ -90,14 +78,7 @@ export default function Login() {
                     fontSize: "22px",
                     justifyContent: "center",
                 }}
-                <%_ if (selectedTitle) { _%>
-                    text="<%= selectedTitle %>"
-                <%_ } _%>
-                <%_ if (selectedSvg) { _%>
-                    icon={<AppIcon />}
-                <%_ } _%>
                 />
-
                 <Button style={{ width: "240px" }} variant="contained" size="large" onClick={() => login({})}>
                     Sign in
                 </Button>

refine-nextjs/plugins/auth-provider-google/src/app/_refine_context.tsx

@@ -186,6 +186,7 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
                     <%_ if (typeof projectId !== 'undefined' && projectId !== '') { _%>
                         projectId: "<%= projectId %>",
                     <%_ } _%>
+                    <%- (_app.refineOptions || []).join("\n") %>
                 }}
             >
                 {props.children}

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={<AppIcon />}
-                <%_ } _%>
                 />
                 <Button
                     style={{ width: "240px", marginBottom: "32px" }}
@@ -86,14 +76,7 @@ export default function Login() {
                     fontSize: "22px",
                     justifyContent: "center",
                 }}
-                <%_ if (selectedTitle) { _%>
-                    text="<%= selectedTitle %>"
-                <%_ } _%>
-                <%_ if (selectedSvg) { _%>
-                    icon={<AppIcon />}
-                <%_ } _%>
                 />
-
                 <Button style={{ width: "240px" }} variant="contained" size="large" onClick={() => login({})}>
                       Sign in
                 </Button>

refine-nextjs/plugins/auth-provider-keycloak/src/app/_refine_context.tsx

@@ -186,6 +186,7 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
                     <%_ if (typeof projectId !== 'undefined' && projectId !== '') { _%>
                         projectId: "<%= projectId %>",
                     <%_ } _%>
+                    <%- (_app.refineOptions || []).join("\n") %>
                 }}
             >
                 {props.children}

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={<AppIcon />}
-                <%_ } _%>
                 />
                 <Button
                     style={{ width: "240px" }}
@@ -87,14 +77,7 @@ export default function Login() {
                     fontSize: "22px",
                     justifyContent: "center",
                 }}
-                <%_ if (selectedTitle) { _%>
-                    text="<%= selectedTitle %>"
-                <%_ } _%>
-                <%_ if (selectedSvg) { _%>
-                    icon={<AppIcon />}
-                <%_ } _%>
                 />
-
                 <Button style={{ width: "240px" }} size="large" variant="contained" onClick={() => login({})}>
                     Sign in
                 </Button>

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 <ThemedLayout>{children}</ThemedLayout>;
+    return <ThemedLayoutV2 Header={Header}>{children}</ThemedLayoutV2>;
 }
 
 

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 <ThemedLayout>{children}</ThemedLayout>;
+    return <ThemedLayoutV2 Header={Header}>{children}</ThemedLayoutV2>;
 }
 
 

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";