@refinedev/antd 5.1.1 → 5.2.0

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

@@ -16,12 +16,21 @@ import {
     LayoutProps,
     CardProps,
     FormProps,
+    theme,
 } from "antd";
 import { useTranslate, useUpdatePassword } from "@refinedev/core";
 
-import { layoutStyles, containerStyles, titleStyles } from "../styles";
+import {
+    layoutStyles,
+    containerStyles,
+    titleStyles,
+    headStyles,
+    bodyStyles,
+} from "../styles";
+import { ThemedTitle } from "@components";
 
 const { Title } = Typography;
+const { useToken } = theme;
 
 type UpdatePasswordProps = UpdatePasswordPageProps<
     LayoutProps,
@@ -39,7 +48,9 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
     contentProps,
     renderContent,
     formProps,
+    title,
 }) => {
+    const { token } = useToken();
     const [form] = Form.useForm<UpdatePasswordFormTypes>();
     const translate = useTranslate();
     const authProvider = useActiveAuthProvider();
@@ -48,8 +59,27 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
             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.updatePassword.title", "Set New Password")}
         </Title>
     );
@@ -57,8 +87,12 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
     const CardContent = (
         <Card
             title={CardTitle}
-            headStyle={{ borderBottom: 0 }}
-            style={containerStyles}
+            headStyle={headStyles}
+            bodyStyle={bodyStyles}
+            style={{
+                ...containerStyles,
+                backgroundColor: token.colorBgElevated,
+            }}
             {...(contentProps ?? {})}
         >
             <Form<UpdatePasswordFormTypes>
@@ -114,7 +148,6 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
                             },
                         }),
                     ]}
-                    style={{ marginBottom: "12px" }}
                 >
                     <Input
                         type="password"
@@ -122,7 +155,11 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
                         size="large"
                     />
                 </Form.Item>
-                <Form.Item>
+                <Form.Item
+                    style={{
+                        marginBottom: 0,
+                    }}
+                >
                     <Button
                         type="primary"
                         size="large"
@@ -150,7 +187,14 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
                 }}
             >
                 <Col xs={22}>
-                    {renderContent ? renderContent(CardContent) : CardContent}
+                    {renderContent ? (
+                        renderContent(CardContent, PageTitle)
+                    ) : (
+                        <>
+                            {PageTitle}
+                            {CardContent}
+                        </>
+                    )}
                 </Col>
             </Row>
         </Layout>

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

@@ -9,7 +9,13 @@ import {
     UpdatePasswordPage,
 } from "./components";
 
-export type AuthProps = AuthPageProps<LayoutProps, CardProps, FormProps>;
+export type AuthProps = AuthPageProps<LayoutProps, CardProps, FormProps> & {
+    renderContent?: (
+        content: React.ReactNode,
+        title: React.ReactNode,
+    ) => React.ReactNode;
+    title?: React.ReactNode;
+};
 
 /**
  * **refine** has a default auth page form served on the `/login` route when the `authProvider` configuration is provided.

package/src/components/themedLayout/header/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Layout as AntdLayout, Typography, Avatar, Space, theme } from "antd";
+import { useActiveAuthProvider, useGetIdentity } from "@refinedev/core";
+import { RefineThemedLayoutHeaderProps } from "../types";
+
+const { Text } = Typography;
+const { useToken } = theme;
+
+export const ThemedHeader: React.FC<RefineThemedLayoutHeaderProps> = () => {
+    const { token } = useToken();
+
+    const authProvider = useActiveAuthProvider();
+    const { data: user } = useGetIdentity({
+        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+    });
+
+    const shouldRenderHeader = user && (user.name || user.avatar);
+
+    if (!shouldRenderHeader) {
+        return null;
+    }
+
+    return (
+        <AntdLayout.Header
+            style={{
+                backgroundColor: token.colorBgElevated,
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+                padding: "0px 24px",
+                height: "64px",
+            }}
+        >
+            <Space>
+                <Space size="middle">
+                    {user?.name && <Text strong>{user.name}</Text>}
+                    {user?.avatar && (
+                        <Avatar src={user?.avatar} alt={user?.name} />
+                    )}
+                </Space>
+            </Space>
+        </AntdLayout.Header>
+    );
+};

package/src/components/themedLayout/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Grid, Layout as AntdLayout } from "antd";
+
+import { ThemedSider as DefaultSider } from "./sider";
+import { ThemedHeader as DefaultHeader } from "./header";
+import { RefineThemedLayoutProps } from "./types";
+
+export const ThemedLayout: React.FC<RefineThemedLayoutProps> = ({
+    children,
+    Header,
+    Sider,
+    Title,
+    Footer,
+    OffLayoutArea,
+}) => {
+    const breakpoint = Grid.useBreakpoint();
+    const SiderToRender = Sider ?? DefaultSider;
+    const HeaderToRender = Header ?? DefaultHeader;
+    const isSmall = typeof breakpoint.sm === "undefined" ? true : breakpoint.sm;
+
+    return (
+        <AntdLayout style={{ minHeight: "100vh" }}>
+            <SiderToRender Title={Title} />
+            <AntdLayout>
+                <HeaderToRender />
+                <AntdLayout.Content>
+                    <div
+                        style={{
+                            minHeight: 360,
+                            padding: isSmall ? 24 : 12,
+                        }}
+                    >
+                        {children}
+                    </div>
+                    {OffLayoutArea && <OffLayoutArea />}
+                </AntdLayout.Content>
+                {Footer && <Footer />}
+            </AntdLayout>
+        </AntdLayout>
+    );
+};

package/src/components/themedLayout/sider/index.tsx

@@ -0,0 +1,296 @@
+import React, { useState } from "react";
+import { Layout, Menu, Grid, Drawer, Button, theme } from "antd";
+import {
+    DashboardOutlined,
+    LogoutOutlined,
+    UnorderedListOutlined,
+    BarsOutlined,
+    LeftOutlined,
+    RightOutlined,
+} from "@ant-design/icons";
+import {
+    useTranslate,
+    useLogout,
+    useTitle,
+    CanAccess,
+    ITreeMenu,
+    useIsExistAuthentication,
+    useRouterContext,
+    useMenu,
+    useRefineContext,
+    useLink,
+    useRouterType,
+    useActiveAuthProvider,
+    pickNotDeprecated,
+} from "@refinedev/core";
+
+import { drawerButtonStyles } from "./styles";
+import { RefineThemedLayoutSiderProps } from "../types";
+import { ThemedTitle } from "@components";
+
+const { SubMenu } = Menu;
+const { useToken } = theme;
+
+export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
+    Title: TitleFromProps,
+    render,
+    meta,
+}) => {
+    const { token } = useToken();
+
+    const [collapsed, setCollapsed] = useState<boolean>(false);
+    const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
+    const isExistAuthentication = useIsExistAuthentication();
+    const routerType = useRouterType();
+    const NewLink = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+    const Link = routerType === "legacy" ? LegacyLink : NewLink;
+    const TitleFromContext = useTitle();
+    const translate = useTranslate();
+    const { menuItems, selectedKey, defaultOpenKeys } = useMenu({ meta });
+    const breakpoint = Grid.useBreakpoint();
+    const { hasDashboard } = useRefineContext();
+    const authProvider = useActiveAuthProvider();
+    const { mutate: mutateLogout } = useLogout({
+        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+    });
+
+    const isMobile =
+        typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
+
+    const RenderToTitle = TitleFromProps ?? TitleFromContext ?? ThemedTitle;
+
+    const renderTreeView = (tree: ITreeMenu[], selectedKey?: string) => {
+        return tree.map((item: ITreeMenu) => {
+            const {
+                icon,
+                label,
+                route,
+                key,
+                name,
+                children,
+                parentName,
+                meta,
+                options,
+            } = item;
+
+            if (children.length > 0) {
+                return (
+                    <CanAccess
+                        key={item.key}
+                        resource={name.toLowerCase()}
+                        action="list"
+                        params={{
+                            resource: item,
+                        }}
+                    >
+                        <SubMenu
+                            key={item.key}
+                            icon={icon ?? <UnorderedListOutlined />}
+                            title={label}
+                        >
+                            {renderTreeView(children, selectedKey)}
+                        </SubMenu>
+                    </CanAccess>
+                );
+            }
+            const isSelected = key === selectedKey;
+            const isRoute = !(
+                pickNotDeprecated(meta?.parent, options?.parent, parentName) !==
+                    undefined && children.length === 0
+            );
+
+            return (
+                <CanAccess
+                    key={item.key}
+                    resource={name.toLowerCase()}
+                    action="list"
+                    params={{
+                        resource: item,
+                    }}
+                >
+                    <Menu.Item
+                        key={item.key}
+                        icon={icon ?? (isRoute && <UnorderedListOutlined />)}
+                    >
+                        <Link to={route ?? ""}>{label}</Link>
+                        {!collapsed && isSelected && (
+                            <div className="ant-menu-tree-arrow" />
+                        )}
+                    </Menu.Item>
+                </CanAccess>
+            );
+        });
+    };
+
+    const logout = isExistAuthentication && (
+        <Menu.Item
+            key="logout"
+            onClick={() => mutateLogout()}
+            icon={<LogoutOutlined />}
+        >
+            {translate("buttons.logout", "Logout")}
+        </Menu.Item>
+    );
+
+    const dashboard = hasDashboard ? (
+        <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
+            <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
+            {!collapsed && selectedKey === "/" && (
+                <div className="ant-menu-tree-arrow" />
+            )}
+        </Menu.Item>
+    ) : null;
+
+    const items = renderTreeView(menuItems, selectedKey);
+
+    const renderSider = () => {
+        if (render) {
+            return render({
+                dashboard,
+                items,
+                logout,
+                collapsed,
+            });
+        }
+        return (
+            <>
+                {dashboard}
+                {items}
+                {logout}
+            </>
+        );
+    };
+
+    const renderMenu = () => {
+        return (
+            <>
+                <Menu
+                    selectedKeys={selectedKey ? [selectedKey] : []}
+                    defaultOpenKeys={defaultOpenKeys}
+                    mode="inline"
+                    style={{
+                        marginTop: "8px",
+                        border: "none",
+                    }}
+                    onClick={() => {
+                        setDrawerOpen(false);
+                        if (!breakpoint.lg) {
+                            setCollapsed(true);
+                        }
+                    }}
+                >
+                    {renderSider()}
+                </Menu>
+            </>
+        );
+    };
+
+    const renderDrawerSider = () => {
+        return (
+            <>
+                <Drawer
+                    open={drawerOpen}
+                    onClose={() => setDrawerOpen(false)}
+                    placement="left"
+                    closable={false}
+                    width={200}
+                    bodyStyle={{
+                        padding: 0,
+                    }}
+                    maskClosable={true}
+                >
+                    <Layout>
+                        <Layout.Sider
+                            style={{
+                                height: "100vh",
+                                overflow: "hidden",
+                                backgroundColor: token.colorBgContainer,
+                                borderRight: `1px solid ${token.colorBgElevated}`,
+                            }}
+                        >
+                            <div
+                                style={{
+                                    width: "200px",
+                                    padding: "0 16px",
+                                    display: "flex",
+                                    justifyContent: "flex-start",
+                                    alignItems: "center",
+                                    height: "64px",
+                                    backgroundColor: token.colorBgElevated,
+                                }}
+                            >
+                                <RenderToTitle collapsed={false} />
+                            </div>
+                            {renderMenu()}
+                        </Layout.Sider>
+                    </Layout>
+                </Drawer>
+                <Button
+                    style={drawerButtonStyles}
+                    size="large"
+                    onClick={() => setDrawerOpen(true)}
+                    icon={<BarsOutlined />}
+                ></Button>
+            </>
+        );
+    };
+
+    if (isMobile) {
+        return renderDrawerSider();
+    }
+
+    return (
+        <Layout.Sider
+            style={{
+                backgroundColor: token.colorBgContainer,
+                borderRight: `1px solid ${token.colorBgElevated}`,
+            }}
+            collapsible
+            collapsed={collapsed}
+            onCollapse={(collapsed) => setCollapsed(collapsed)}
+            collapsedWidth={80}
+            breakpoint="lg"
+            trigger={
+                <Button
+                    type="text"
+                    style={{
+                        borderRadius: 0,
+                        height: "100%",
+                        width: "100%",
+                        backgroundColor: token.colorBgElevated,
+                    }}
+                >
+                    {collapsed ? (
+                        <RightOutlined
+                            style={{
+                                color: token.colorPrimary,
+                            }}
+                        />
+                    ) : (
+                        <LeftOutlined
+                            style={{
+                                color: token.colorPrimary,
+                            }}
+                        />
+                    )}
+                </Button>
+            }
+        >
+            <div
+                style={{
+                    width: collapsed ? "80px" : "200px",
+                    padding: collapsed ? "0" : "0 16px",
+                    display: "flex",
+                    justifyContent: collapsed ? "center" : "flex-start",
+                    alignItems: "center",
+                    height: "64px",
+                    backgroundColor: token.colorBgElevated,
+                }}
+            >
+                <RenderToTitle collapsed={collapsed} />
+            </div>
+            {renderMenu()}
+        </Layout.Sider>
+    );
+};

package/src/components/themedLayout/sider/styles.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export const drawerButtonStyles: CSSProperties = {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    position: "fixed",
+    top: 64,
+    zIndex: 999,
+};

package/src/components/themedLayout/title/index.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { useRouterContext, useRouterType, useLink } from "@refinedev/core";
+import { Typography, theme, Space } from "antd";
+import { RefineLayoutThemedTitleProps } from "../types";
+
+const { useToken } = theme;
+
+const defaultText = "refine Project";
+
+const defaultIcon = (
+    <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        data-testid="refine-logo"
+    >
+        <path
+            d="M12 9C13.6569 9 15 7.65685 15 6C15 4.34315 13.6569 3 12 3C10.3431 3 9 4.34315 9 6C9 7.65685 10.3431 9 12 9Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM8 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V18C16 20.2091 14.2091 22 12 22C9.79086 22 8 20.2091 8 18V6Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+
+export const ThemedTitle: React.FC<RefineLayoutThemedTitleProps> = ({
+    collapsed,
+    icon = defaultIcon,
+    text = defaultText,
+}) => {
+    const { token } = useToken();
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    return (
+        <ActiveLink
+            to="/"
+            style={{
+                display: "inline-block",
+            }}
+        >
+            <Space
+                style={{
+                    display: "flex",
+                    alignItems: "center",
+                }}
+            >
+                <div
+                    style={{
+                        height: "24px",
+                        width: "24px",
+                        color: token.colorPrimary,
+                    }}
+                >
+                    {icon}
+                </div>
+
+                {!collapsed && (
+                    <Typography.Title
+                        style={{
+                            fontSize: "14px",
+                            marginBottom: 0,
+                            fontWeight: 700,
+                        }}
+                    >
+                        {text}
+                    </Typography.Title>
+                )}
+            </Space>
+        </ActiveLink>
+    );
+};

package/src/components/themedLayout/types.ts

@@ -0,0 +1,13 @@
+import type {
+    RefineThemedLayoutSiderProps,
+    RefineThemedLayoutHeaderProps,
+    RefineThemedLayoutProps,
+    RefineLayoutThemedTitleProps,
+} from "@refinedev/ui-types";
+
+export type {
+    RefineLayoutThemedTitleProps,
+    RefineThemedLayoutSiderProps,
+    RefineThemedLayoutHeaderProps,
+    RefineThemedLayoutProps,
+};

package/src/definitions/index.ts

@@ -1,2 +1,3 @@
 export * from "./table";
 export * from "./upload";
+export * from "./themes";

package/src/definitions/themes/index.ts

@@ -0,0 +1,50 @@
+import { ThemeConfig } from "antd";
+
+type ThemeNames =
+    | "Blue"
+    | "Purple"
+    | "Magenta"
+    | "Red"
+    | "Orange"
+    | "Yellow"
+    | "Green";
+
+type RefineThemes = Record<ThemeNames, ThemeConfig>;
+
+export const RefineThemes: RefineThemes = {
+    Blue: {
+        token: {
+            colorPrimary: "#1677FF",
+        },
+    },
+    Purple: {
+        token: {
+            colorPrimary: "#722ED1",
+        },
+    },
+    Magenta: {
+        token: {
+            colorPrimary: "#EB2F96",
+        },
+    },
+    Red: {
+        token: {
+            colorPrimary: "#F5222D",
+        },
+    },
+    Orange: {
+        token: {
+            colorPrimary: "#FA541C",
+        },
+    },
+    Yellow: {
+        token: {
+            colorPrimary: "#FAAD14",
+        },
+    },
+    Green: {
+        token: {
+            colorPrimary: "#52C41A",
+        },
+    },
+};

package/src/index.tsx

@@ -9,3 +9,5 @@ export {
     mapAntdFilterToCrudFilter,
 } from "./definitions/table";
 export { getValueFromEvent } from "./definitions/upload";
+
+export * from "./definitions/themes";