@refinedev/antd 5.6.0 → 5.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.6.0",
+  "version": "5.7.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",
@@ -23,7 +23,7 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@refinedev/cli": "^2.1.0",
+    "@refinedev/cli": "^2.5.1",
     "@refinedev/ui-tests": "^1.3.2",
     "@refinedev/core": "^4.8.0",
     "@esbuild-plugins/node-resolve": "^0.1.4",
@@ -49,7 +49,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@ant-design/pro-layout": "7.8.3",
-    "@refinedev/ui-types": "^1.5.0",
+    "@refinedev/ui-types": "^1.8.0",
     "@tanstack/react-query": "^4.10.1",
     "antd": "^5.0.5",
     "dayjs": "^1.10.7",

package/refine.config.js

@@ -560,7 +560,128 @@ module.exports = {
             },
             {
                 group: "Other",
-                label: "Themed Layout",
+                label: "ThemedLayoutV2",
+                message: `
+                **\`Warning:\`**
+                If you want to change the default layout;
+                You should pass layout related components to the **<ThemedLayoutV2 />** component's props.
+
+                \`\`\`
+                // title: App.tsx
+                import { ThemedLayoutV2 } from "components/themedLayout";
+                import { ThemedHeaderV2 } from "components/themedLayout/header";
+                import { ThemedSiderV2 } from "components/themedLayout/sider";
+                import { ThemedTitleV2 } from "components/themedLayout/title";
+
+                const App = () => {
+                    return (
+                        <Refine
+                            /* ... */
+                        >
+                            <ThemedLayoutV2 Header={ThemedHeaderV2} Sider={ThemedSiderV2} Title={ThemedTitleV2}>
+                                /* ... */
+                            </ThemedLayoutV2>
+                        </Refine>
+                    );
+                }
+                \`\`\`
+                `,
+                files: [
+                    {
+                        src: "./src/components/themedLayoutV2/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" ||
+                                    importItem.importPath === "@hooks"
+                                ) {
+                                    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/themedLayoutV2/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/themedLayoutV2/header/index.tsx",
+                        dest: "./components/themedLayout/header.tsx",
+                    },
+                    {
+                        src: "./src/components/themedLayoutV2/title/index.tsx",
+                        dest: "./components/themedLayout/title.tsx",
+                    },
+                    {
+                        src: "./src/components/themedLayoutV2/index.tsx",
+                        dest: "./components/themedLayout/index.tsx",
+                        transform: (content) => {
+                            let newContent = content;
+                            const imports = getImports(content);
+
+                            imports.map((importItem) => {
+                                // handle @components import replacement
+                                if (
+                                    importItem.importPath === "@components" ||
+                                    importItem.importPath === "@contexts" ||
+                                    importItem.importPath === "@hooks"
+                                ) {
+                                    const newStatement = `import ${importItem.namedImports} from "@refinedev/antd";`;
+
+                                    newContent = newContent.replace(
+                                        importItem.statement,
+                                        newStatement,
+                                    );
+                                }
+                            });
+
+                            return newContent;
+                        },
+                    },
+                ],
+            },
+            {
+                group: "Other",
+                label: "Themed Layout (deprecated use ThemedLayoutV2 instead)",
                 message: `
                 **\`Warning:\`**
                 If you want to change the default layout;

package/src/components/index.ts

@@ -11,6 +11,12 @@ export { ThemedSider } from "./themedLayout/sider";
 export { ThemedTitle } from "./themedLayout/title";
 export * from "./themedLayout/types";
 
+export { ThemedLayoutV2 } from "./themedLayoutV2";
+export { ThemedHeaderV2 } from "./themedLayoutV2/header";
+export { ThemedSiderV2 } from "./themedLayoutV2/sider";
+export { ThemedTitleV2 } from "./themedLayoutV2/title";
+export * from "./themedLayoutV2/types";
+
 export * from "./buttons";
 export * from "./crud";
 export * from "./fields";

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

@@ -6,6 +6,9 @@ import { RefineThemedLayoutHeaderProps } from "../types";
 const { Text } = Typography;
 const { useToken } = theme;
 
+/**
+ * @deprecated It is recommended to use the improved `ThemedLayoutV2`. Review migration guidelines. https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#migrate-themedlayout-to-themedlayoutv2
+ */
 export const ThemedHeader: React.FC<RefineThemedLayoutHeaderProps> = () => {
     const { token } = useToken();
 

package/src/components/themedLayout/index.tsx

@@ -5,6 +5,9 @@ import { ThemedSider as DefaultSider } from "./sider";
 import { ThemedHeader as DefaultHeader } from "./header";
 import { RefineThemedLayoutProps } from "./types";
 
+/**
+ * @deprecated It is recommended to use the improved `ThemedLayoutV2`. Review migration guidelines. https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#migrate-themedlayout-to-themedlayoutv2
+ */
 export const ThemedLayout: React.FC<RefineThemedLayoutProps> = ({
     children,
     Header,

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

@@ -32,6 +32,9 @@ import { ThemedTitle } from "@components";
 const { SubMenu } = Menu;
 const { useToken } = theme;
 
+/**
+ * @deprecated It is recommended to use the improved `ThemedLayoutV2`. Review migration guidelines. https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#migrate-themedlayout-to-themedlayoutv2
+ */
 export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     Title: TitleFromProps,
     render,

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

@@ -29,6 +29,9 @@ const defaultIcon = (
     </svg>
 );
 
+/**
+ * @deprecated It is recommended to use the improved `ThemedLayoutV2`. Review migration guidelines. https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#migrate-themedlayout-to-themedlayoutv2
+ */
 export const ThemedTitle: React.FC<RefineLayoutThemedTitleProps> = ({
     collapsed,
     icon = defaultIcon,

package/src/components/themedLayoutV2/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 { RefineThemedLayoutV2HeaderProps } from "../types";
+
+const { Text } = Typography;
+const { useToken } = theme;
+
+export const ThemedHeaderV2: React.FC<RefineThemedLayoutV2HeaderProps> = () => {
+    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/themedLayoutV2/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Grid, Layout as AntdLayout } from "antd";
+
+import { ThemedSiderV2 as DefaultSider } from "./sider";
+import { ThemedHeaderV2 as DefaultHeader } from "./header";
+import { RefineThemedLayoutV2Props } from "./types";
+import { ThemedLayoutContextProvider } from "@contexts";
+
+export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
+    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 (
+        <ThemedLayoutContextProvider>
+            <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>
+        </ThemedLayoutContextProvider>
+    );
+};

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

@@ -0,0 +1,324 @@
+import React 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,
+    useWarnAboutChange,
+} from "@refinedev/core";
+
+import { drawerButtonStyles } from "./styles";
+import { RefineThemedLayoutV2SiderProps } from "../types";
+import { ThemedTitleV2 } from "@components";
+import { useSiderVisible } from "@hooks";
+
+const { SubMenu } = Menu;
+const { useToken } = theme;
+
+export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
+    Title: TitleFromProps,
+    render,
+    meta,
+}) => {
+    const { token } = useToken();
+    const {
+        siderVisible,
+        setSiderVisible,
+        drawerSiderVisible,
+        setDrawerSiderVisible,
+    } = useSiderVisible();
+
+    const isExistAuthentication = useIsExistAuthentication();
+    const routerType = useRouterType();
+    const NewLink = useLink();
+    const { warnWhen, setWarnWhen } = useWarnAboutChange();
+    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 ?? ThemedTitleV2;
+
+    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>
+                        {!drawerSiderVisible && isSelected && (
+                            <div className="ant-menu-tree-arrow" />
+                        )}
+                    </Menu.Item>
+                </CanAccess>
+            );
+        });
+    };
+
+    const handleLogout = () => {
+        if (warnWhen) {
+            const confirm = window.confirm(
+                translate(
+                    "warnWhenUnsavedChanges",
+                    "Are you sure you want to leave? You have unsaved changes.",
+                ),
+            );
+
+            if (confirm) {
+                setWarnWhen(false);
+                mutateLogout();
+            }
+        } else {
+            mutateLogout();
+        }
+    };
+
+    const logout = isExistAuthentication && (
+        <Menu.Item
+            key="logout"
+            onClick={() => handleLogout()}
+            icon={<LogoutOutlined />}
+        >
+            {translate("buttons.logout", "Logout")}
+        </Menu.Item>
+    );
+
+    const dashboard = hasDashboard ? (
+        <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
+            <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
+            {!drawerSiderVisible && 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: drawerSiderVisible,
+            });
+        }
+        return (
+            <>
+                {dashboard}
+                {items}
+                {logout}
+            </>
+        );
+    };
+
+    const renderMenu = () => {
+        return (
+            <>
+                <Menu
+                    selectedKeys={selectedKey ? [selectedKey] : []}
+                    defaultOpenKeys={defaultOpenKeys}
+                    mode="inline"
+                    style={{
+                        marginTop: "8px",
+                        border: "none",
+                    }}
+                    onClick={() => {
+                        setSiderVisible?.(false);
+                        if (!breakpoint.lg) {
+                            setDrawerSiderVisible?.(true);
+                        }
+                    }}
+                >
+                    {renderSider()}
+                </Menu>
+            </>
+        );
+    };
+
+    const renderDrawerSider = () => {
+        return (
+            <>
+                <Drawer
+                    open={siderVisible}
+                    onClose={() => setSiderVisible?.(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={() => setSiderVisible?.(true)}
+                    icon={<BarsOutlined />}
+                ></Button>
+            </>
+        );
+    };
+
+    if (isMobile) {
+        return renderDrawerSider();
+    }
+
+    return (
+        <Layout.Sider
+            style={{
+                backgroundColor: token.colorBgContainer,
+                borderRight: `1px solid ${token.colorBgElevated}`,
+            }}
+            collapsible
+            collapsed={drawerSiderVisible}
+            onCollapse={(collapsed) => setDrawerSiderVisible?.(collapsed)}
+            collapsedWidth={80}
+            breakpoint="lg"
+            trigger={
+                <Button
+                    type="text"
+                    style={{
+                        borderRadius: 0,
+                        height: "100%",
+                        width: "100%",
+                        backgroundColor: token.colorBgElevated,
+                    }}
+                >
+                    {drawerSiderVisible ? (
+                        <RightOutlined
+                            style={{
+                                color: token.colorPrimary,
+                            }}
+                        />
+                    ) : (
+                        <LeftOutlined
+                            style={{
+                                color: token.colorPrimary,
+                            }}
+                        />
+                    )}
+                </Button>
+            }
+        >
+            <div
+                style={{
+                    width: drawerSiderVisible ? "80px" : "200px",
+                    padding: drawerSiderVisible ? "0" : "0 16px",
+                    display: "flex",
+                    justifyContent: drawerSiderVisible
+                        ? "center"
+                        : "flex-start",
+                    alignItems: "center",
+                    height: "64px",
+                    backgroundColor: token.colorBgElevated,
+                    fontSize: "14px",
+                }}
+            >
+                <RenderToTitle collapsed={drawerSiderVisible} />
+            </div>
+            {renderMenu()}
+        </Layout.Sider>
+    );
+};

package/src/components/themedLayoutV2/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,
+};