@refinedev/antd 5.1.1 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "main": "dist/index.js",
@@ -24,8 +24,8 @@
   },
   "devDependencies": {
     "@refinedev/cli": "^2.1.0",
-    "@refinedev/ui-tests": "^1.1.0",
-    "@refinedev/core": "^4.1.3",
+    "@refinedev/ui-tests": "^1.2.0",
+    "@refinedev/core": "^4.4.0",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
@@ -49,7 +49,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@ant-design/pro-layout": "7.8.3",
-    "@refinedev/ui-types": "^1.1.0",
+    "@refinedev/ui-types": "^1.2.0",
     "@tanstack/react-query": "^4.10.1",
     "antd": "^5.0.5",
     "dayjs": "^1.10.7",

package/refine.config.js

@@ -558,6 +558,102 @@ module.exports = {
                     },
                 ],
             },
+            {
+                group: "Other",
+                label: "Themed Layout",
+                message: `
+                **\`Warning:\`**
+                If you want to change the default layout;
+                You should pass layout related components to the **<ThemedLayout/>** component's props.
+
+                \`\`\`
+                // title: App.tsx
+                import { ThemedLayout } from "components/themedLayout";
+                import { ThemedHeader } from "components/themedLayout/header";
+                import { ThemedSider } from "components/themedLayout/sider";
+                import { ThemedTitle } from "components/themedLayout/title";
+
+                const App = () => {
+                    return (
+                        <Refine
+                            /* ... */
+                        >
+                            <ThemedLayout Header={ThemedHeader} Sider={ThemedSider} Title={ThemedTitle} />
+                                /* ... */
+                            </ThemedLayout>
+                        </Refine>
+                    );
+                }
+                \`\`\`
+                `,
+                files: [
+                    {
+                        src: "./src/components/themedLayout/sider/index.tsx",
+                        dest: "./components/themedLayout/sider.tsx",
+                        transform: (content) => {
+                            let newContent = content;
+                            const imports = getImports(content);
+
+                            imports.map((importItem) => {
+                                // handle @components import replacement
+                                if (importItem.importPath === "@components") {
+                                    const newStatement = `import ${importItem.namedImports} from "@refinedev/antd";`;
+
+                                    newContent = newContent.replace(
+                                        importItem.statement,
+                                        newStatement,
+                                    );
+                                }
+
+                                // add content of ./styles.ts and remove import
+                                if (importItem.importPath === "./styles") {
+                                    newContent = newContent.replace(
+                                        importItem.statement,
+                                        "",
+                                    );
+
+                                    let appending = "";
+
+                                    try {
+                                        const stylesContent = getFileContent(
+                                            join(
+                                                dirname(
+                                                    "./src/components/themedLayout/sider/index.tsx",
+                                                ),
+                                                "/styles.ts",
+                                            ),
+                                            "utf-8",
+                                        ).replace("export const", "const");
+
+                                        appending = stylesContent;
+                                    } catch (err) {
+                                        // console.log(err);
+                                    }
+
+                                    newContent = appendAfterImports(
+                                        newContent,
+                                        appending,
+                                    );
+                                }
+                            });
+
+                            return newContent;
+                        },
+                    },
+                    {
+                        src: "./src/components/themedLayout/header/index.tsx",
+                        dest: "./components/themedLayout/header.tsx",
+                    },
+                    {
+                        src: "./src/components/themedLayout/title/index.tsx",
+                        dest: "./components/themedLayout/title.tsx",
+                    },
+                    {
+                        src: "./src/components/themedLayout/index.tsx",
+                        dest: "./components/themedLayout/index.tsx",
+                    },
+                ],
+            },
         ],
         transform: (content) => {
             let newContent = content;

package/src/components/buttons/create/index.tsx

@@ -93,6 +93,7 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
                 disabled={data?.can === false}
                 title={createButtonDisabledTitle()}
                 data-testid={RefineButtonTestIds.CreateButton}
+                type="primary"
                 {...rest}
             >
                 {!hideText &&

package/src/components/crud/show/index.tsx

@@ -93,6 +93,7 @@ export const Show: React.FC<ShowProps> = ({
             {isEditButtonVisible && (
                 <EditButton
                     {...(isLoading ? { disabled: true } : {})}
+                    type="primary"
                     resource={
                         routerType === "legacy"
                             ? resource?.route

package/src/components/index.ts

@@ -5,6 +5,12 @@ export { Sider } from "./layout/sider";
 export { Title } from "./layout/title";
 export * from "./layout/types";
 
+export { ThemedLayout } from "./themedLayout";
+export { ThemedHeader } from "./themedLayout/header";
+export { ThemedSider } from "./themedLayout/sider";
+export { ThemedTitle } from "./themedLayout/title";
+export * from "./themedLayout/types";
+
 export * from "./buttons";
 export * from "./crud";
 export * from "./fields";

package/src/components/pages/auth/components/forgotPassword/index.tsx

@@ -17,6 +17,7 @@ import {
     LayoutProps,
     CardProps,
     FormProps,
+    theme,
 } from "antd";
 import {
     useTranslate,
@@ -24,7 +25,14 @@ import {
     useForgotPassword,
 } from "@refinedev/core";
 
-import { layoutStyles, containerStyles, titleStyles } from "../styles";
+import {
+    layoutStyles,
+    containerStyles,
+    titleStyles,
+    headStyles,
+    bodyStyles,
+} from "../styles";
+import { ThemedTitle } from "@components";
 
 type ResetPassworProps = ForgotPasswordPageProps<
     LayoutProps,
@@ -33,6 +41,7 @@ type ResetPassworProps = ForgotPasswordPageProps<
 >;
 
 const { Text, Title } = Typography;
+const { useToken } = theme;
 
 /**
  * **refine** has forgot password page form which is served on `/forgot-password` route when the `authProvider` configuration is provided.
@@ -45,7 +54,9 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
     contentProps,
     renderContent,
     formProps,
+    title,
 }) => {
+    const { token } = useToken();
     const [form] = Form.useForm<ForgotPasswordFormTypes>();
     const translate = useTranslate();
     const routerType = useRouterType();
@@ -57,16 +68,39 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
     const { mutate: forgotPassword, isLoading } =
         useForgotPassword<ForgotPasswordFormTypes>();
 
+    const PageTitle =
+        title === false ? null : (
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    marginBottom: "32px",
+                }}
+            >
+                {title ?? <ThemedTitle collapsed={false} />}
+            </div>
+        );
+
     const CardTitle = (
-        <Title level={3} style={titleStyles}>
+        <Title
+            level={3}
+            style={{
+                color: token.colorPrimaryTextHover,
+                ...titleStyles,
+            }}
+        >
             {translate("pages.forgotPassword.title", "Forgot your password?")}
         </Title>
     );
     const CardContent = (
         <Card
             title={CardTitle}
-            headStyle={{ borderBottom: 0 }}
-            style={containerStyles}
+            headStyle={headStyles}
+            bodyStyle={bodyStyles}
+            style={{
+                ...containerStyles,
+                backgroundColor: token.colorBgElevated,
+            }}
             {...(contentProps ?? {})}
         >
             <Form<ForgotPasswordFormTypes>
@@ -106,7 +140,6 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
                     style={{
                         display: "flex",
                         justifyContent: "space-between",
-                        marginBottom: "12px",
                     }}
                 >
                     {loginLink ?? (
@@ -123,6 +156,7 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
                             <ActiveLink
                                 style={{
                                     fontWeight: "bold",
+                                    color: token.colorPrimaryTextHover,
                                 }}
                                 to="/login"
                             >
@@ -131,7 +165,12 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
                         </Text>
                     )}
                 </div>
-                <Form.Item>
+                <Form.Item
+                    style={{
+                        marginTop: "24px",
+                        marginBottom: 0,
+                    }}
+                >
                     <Button
                         type="primary"
                         size="large"
@@ -159,7 +198,14 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
                 }}
             >
                 <Col xs={22}>
-                    {renderContent ? renderContent(CardContent) : CardContent}
+                    {renderContent ? (
+                        renderContent(CardContent, PageTitle)
+                    ) : (
+                        <>
+                            {PageTitle}
+                            {CardContent}
+                        </>
+                    )}
                 </Col>
             </Row>
         </Layout>

package/src/components/pages/auth/components/login/index.tsx

@@ -20,15 +20,23 @@ import {
     LayoutProps,
     Divider,
     FormProps,
+    theme,
 } from "antd";
 import { useLogin, useTranslate, useRouterContext } from "@refinedev/core";
 
-import { layoutStyles, containerStyles, titleStyles } from "../styles";
+import {
+    bodyStyles,
+    containerStyles,
+    headStyles,
+    layoutStyles,
+    titleStyles,
+} from "../styles";
+import { ThemedTitle } from "@components";
 
 const { Text, Title } = Typography;
+const { useToken } = theme;
 
 type LoginProps = LoginPageProps<LayoutProps, CardProps, FormProps>;
-
 /**
  * **refine** has a default login page form which is served on `/login` route when the `authProvider` configuration is provided.
  *
@@ -43,7 +51,9 @@ export const LoginPage: React.FC<LoginProps> = ({
     wrapperProps,
     renderContent,
     formProps,
+    title,
 }) => {
+    const { token } = useToken();
     const [form] = Form.useForm<LoginFormTypes>();
     const translate = useTranslate();
     const routerType = useRouterType();
@@ -57,8 +67,27 @@ export const LoginPage: React.FC<LoginProps> = ({
         v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
     });
 
+    const PageTitle =
+        title === false ? null : (
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    marginBottom: "32px",
+                }}
+            >
+                {title ?? <ThemedTitle collapsed={false} />}
+            </div>
+        );
+
     const CardTitle = (
-        <Title level={3} style={titleStyles}>
+        <Title
+            level={3}
+            style={{
+                color: token.colorPrimaryTextHover,
+                ...titleStyles,
+            }}
+        >
             {translate("pages.login.title", "Sign in to your account")}
         </Title>
     );
@@ -91,7 +120,15 @@ export const LoginPage: React.FC<LoginProps> = ({
                             </Button>
                         );
                     })}
-                    <Divider>{translate("pages.login.divider", "or")}</Divider>
+                    <Divider>
+                        <Text
+                            style={{
+                                color: token.colorTextLabel,
+                            }}
+                        >
+                            {translate("pages.login.divider", "or")}
+                        </Text>
+                    </Divider>
                 </>
             );
         }
@@ -101,8 +138,12 @@ export const LoginPage: React.FC<LoginProps> = ({
     const CardContent = (
         <Card
             title={CardTitle}
-            headStyle={{ borderBottom: 0 }}
-            style={containerStyles}
+            headStyle={headStyles}
+            bodyStyle={bodyStyles}
+            style={{
+                ...containerStyles,
+                backgroundColor: token.colorBgElevated,
+            }}
             {...(contentProps ?? {})}
         >
             {renderProviders()}
@@ -142,7 +183,6 @@ export const LoginPage: React.FC<LoginProps> = ({
                     name="password"
                     label={translate("pages.login.fields.password", "Password")}
                     rules={[{ required: true }]}
-                    style={{ marginBottom: "12px" }}
                 >
                     <Input
                         type="password"
@@ -154,7 +194,7 @@ export const LoginPage: React.FC<LoginProps> = ({
                     style={{
                         display: "flex",
                         justifyContent: "space-between",
-                        marginBottom: "12px",
+                        marginBottom: "24px",
                     }}
                 >
                     {rememberMe ?? (
@@ -178,6 +218,7 @@ export const LoginPage: React.FC<LoginProps> = ({
                     {forgotPasswordLink ?? (
                         <ActiveLink
                             style={{
+                                color: token.colorPrimaryTextHover,
                                 fontSize: "12px",
                                 marginLeft: "auto",
                             }}
@@ -211,7 +252,10 @@ export const LoginPage: React.FC<LoginProps> = ({
                         )}{" "}
                         <ActiveLink
                             to="/register"
-                            style={{ fontWeight: "bold" }}
+                            style={{
+                                fontWeight: "bold",
+                                color: token.colorPrimaryTextHover,
+                            }}
                         >
                             {translate("pages.login.signup", "Sign up")}
                         </ActiveLink>
@@ -231,7 +275,14 @@ export const LoginPage: React.FC<LoginProps> = ({
                 }}
             >
                 <Col xs={22}>
-                    {renderContent ? renderContent(CardContent) : CardContent}
+                    {renderContent ? (
+                        renderContent(CardContent, PageTitle)
+                    ) : (
+                        <>
+                            {PageTitle}
+                            {CardContent}
+                        </>
+                    )}
                 </Col>
             </Row>
         </Layout>

package/src/components/pages/auth/components/register/index.tsx

@@ -19,15 +19,23 @@ import {
     CardProps,
     FormProps,
     Divider,
+    theme,
 } from "antd";
 import { useTranslate, useRouterContext, useRegister } from "@refinedev/core";
 
-import { layoutStyles, containerStyles, titleStyles } from "../styles";
+import {
+    layoutStyles,
+    containerStyles,
+    titleStyles,
+    headStyles,
+    bodyStyles,
+} from "../styles";
+import { ThemedTitle } from "@components";
 
 const { Text, Title } = Typography;
+const { useToken } = theme;
 
 type RegisterProps = RegisterPageProps<LayoutProps, CardProps, FormProps>;
-
 /**
  * **refine** has register page form which is served on `/register` route when the `authProvider` configuration is provided.
  *
@@ -40,7 +48,9 @@ export const RegisterPage: React.FC<RegisterProps> = ({
     contentProps,
     renderContent,
     formProps,
+    title,
 }) => {
+    const { token } = useToken();
     const [form] = Form.useForm<RegisterFormTypes>();
     const translate = useTranslate();
     const routerType = useRouterType();
@@ -54,8 +64,27 @@ export const RegisterPage: React.FC<RegisterProps> = ({
         v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
     });
 
+    const PageTitle =
+        title === false ? null : (
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    marginBottom: "32px",
+                }}
+            >
+                {title ?? <ThemedTitle collapsed={false} />}
+            </div>
+        );
+
     const CardTitle = (
-        <Title level={3} style={titleStyles}>
+        <Title
+            level={3}
+            style={{
+                color: token.colorPrimaryTextHover,
+                ...titleStyles,
+            }}
+        >
             {translate("pages.register.title", "Sign up for your account")}
         </Title>
     );
@@ -68,7 +97,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                         return (
                             <Button
                                 key={provider.name}
-                                type="ghost"
+                                type="default"
                                 block
                                 icon={provider.icon}
                                 style={{
@@ -88,7 +117,15 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                             </Button>
                         );
                     })}
-                    <Divider>{translate("pages.login.divider", "or")}</Divider>
+                    <Divider>
+                        <Text
+                            style={{
+                                color: token.colorTextLabel,
+                            }}
+                        >
+                            {translate("pages.login.divider", "or")}
+                        </Text>
+                    </Divider>
                 </>
             );
         }
@@ -98,8 +135,12 @@ export const RegisterPage: React.FC<RegisterProps> = ({
     const CardContent = (
         <Card
             title={CardTitle}
-            headStyle={{ borderBottom: 0 }}
-            style={containerStyles}
+            headStyle={headStyles}
+            bodyStyle={bodyStyles}
+            style={{
+                ...containerStyles,
+                backgroundColor: token.colorBgElevated,
+            }}
             {...(contentProps ?? {})}
         >
             {renderProviders()}
@@ -139,7 +180,6 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                         "Password",
                     )}
                     rules={[{ required: true }]}
-                    style={{ marginBottom: "12px" }}
                 >
                     <Input
                         type="password"
@@ -151,7 +191,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                     style={{
                         display: "flex",
                         justifyContent: "space-between",
-                        marginBottom: "12px",
+                        marginBottom: "24px",
                     }}
                 >
                     {loginLink ?? (
@@ -168,6 +208,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                             <ActiveLink
                                 style={{
                                     fontWeight: "bold",
+                                    color: token.colorPrimaryTextHover,
                                 }}
                                 to="/login"
                             >
@@ -177,7 +218,11 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                     )}
                 </div>
 
-                <Form.Item>
+                <Form.Item
+                    style={{
+                        marginBottom: 0,
+                    }}
+                >
                     <Button
                         type="primary"
                         size="large"
@@ -202,7 +247,14 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                 }}
             >
                 <Col xs={22}>
-                    {renderContent ? renderContent(CardContent) : CardContent}
+                    {renderContent ? (
+                        renderContent(CardContent, PageTitle)
+                    ) : (
+                        <>
+                            {PageTitle}
+                            {CardContent}
+                        </>
+                    )}
                 </Col>
             </Row>
         </Layout>

package/src/components/pages/auth/components/styles.ts

@@ -1,21 +1,28 @@
 import { CSSProperties } from "react";
 
-export const layoutStyles: CSSProperties = {
-    background: `radial-gradient(50% 50% at 50% 50%, #6813CB 0%, #2A2A42 100%)`,
-    backgroundSize: "cover",
-};
+export const layoutStyles: CSSProperties = {};
 
 export const containerStyles: CSSProperties = {
-    maxWidth: "408px",
+    maxWidth: "400px",
     margin: "auto",
+    padding: "32px",
+    boxShadow:
+        "0px 2px 4px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px rgba(0, 0, 0, 0.03)",
+};
+
+export const headStyles: CSSProperties = {
+    borderBottom: 0,
+    padding: 0,
 };
 
+export const bodyStyles: CSSProperties = { padding: 0, marginTop: "32px" };
+
 export const titleStyles: CSSProperties = {
     textAlign: "center",
-    color: "#626262",
     marginBottom: 0,
     fontSize: "24px",
-    letterSpacing: "-0.04em",
+    lineHeight: "32px",
+    fontWeight: 700,
     overflowWrap: "break-word",
     hyphens: "manual",
     textOverflow: "unset",