@refinedev/antd 5.0.0

package/src/components/fields/file/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { UrlField } from "@components";
+import { FileFieldProps } from "../types";
+
+/**
+ * This field is used to display files and uses {@link https://ant.design/components/typography `<Typography.Link>`} from Ant Design.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/file} for more details.
+ */
+export const FileField: React.FC<FileFieldProps> = ({
+    title,
+    src,
+    ...rest
+}) => {
+    return (
+        <UrlField value={src} title={title} {...rest}>
+            {title ?? src}
+        </UrlField>
+    );
+};

package/src/components/fields/image/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Image } from "antd";
+
+import { ImageFieldProps } from "../types";
+
+/**
+ * This field is used to display images and uses {@link https://ant.design/components/image/#header `<Image>`} from Ant Design.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/image} for more details.
+ */
+export const ImageField: React.FC<ImageFieldProps> = ({
+    value,
+    imageTitle,
+    ...rest
+}) => {
+    return <Image {...rest} src={value} title={imageTitle} />;
+};

package/src/components/fields/index.ts

@@ -0,0 +1,11 @@
+export { TextField } from "./text";
+export { TagField } from "./tag";
+export { EmailField } from "./email";
+export { ImageField } from "./image";
+export { BooleanField } from "./boolean";
+export { DateField } from "./date";
+export { FileField } from "./file";
+export { UrlField } from "./url";
+export { NumberField } from "./number";
+export { MarkdownField } from "./markdown";
+export * from "./types";

package/src/components/fields/markdown/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
+
+import { RefineFieldMarkdownProps } from "../types";
+
+/**
+ * This field lets you display markdown content. It supports {@link https://github.github.com/gfm/ GitHub Flavored Markdown}.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/markdown} for more details.
+ */
+export const MarkdownField: React.FC<RefineFieldMarkdownProps> = ({
+    value = "",
+}) => {
+    return <ReactMarkdown plugins={[gfm]}>{value}</ReactMarkdown>;
+};

package/src/components/fields/number/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Typography } from "antd";
+
+const { Text } = Typography;
+
+function toLocaleStringSupportsOptions() {
+    return !!(
+        typeof Intl == "object" &&
+        Intl &&
+        typeof Intl.NumberFormat == "function"
+    );
+}
+
+import { NumberFieldProps } from "../types";
+
+/**
+ * This field is used to display a number formatted according to the browser locale, right aligned. and uses {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl `Intl`} to display date format.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/number} for more details.
+ */
+export const NumberField: React.FC<NumberFieldProps> = ({
+    value,
+    locale,
+    options,
+    ...rest
+}) => {
+    const number = parseFloat(value.toString());
+
+    return (
+        <Text {...rest}>
+            {toLocaleStringSupportsOptions()
+                ? number.toLocaleString(locale, options)
+                : number}
+        </Text>
+    );
+};

package/src/components/fields/tag/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Tag } from "antd";
+
+import { TagFieldProps } from "../types";
+
+/**
+ * This field lets you display a value in a tag. It uses Ant Design's {@link https://ant.design/components/tag/ `<Tag>`} component.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/tag} for more details.
+ */
+export const TagField: React.FC<TagFieldProps> = ({ value, ...rest }) => {
+    return <Tag {...rest}>{value?.toString()}</Tag>;
+};

package/src/components/fields/text/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Typography } from "antd";
+
+const { Text } = Typography;
+
+import { TextFieldProps } from "../types";
+
+/**
+ * This field lets you show basic text. It uses Ant Design's {@link https://ant.design/components/typography/#Typography.Text `<Typography.Text>`} component.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/text} for more details.
+ */
+export const TextField: React.FC<TextFieldProps> = ({ value, ...rest }) => {
+    return <Text {...rest}>{value}</Text>;
+};

package/src/components/fields/types.ts

@@ -0,0 +1,49 @@
+import { ReactChild, ReactNode } from "react";
+import { ConfigType } from "dayjs";
+import {
+    RefineFieldBooleanProps,
+    RefineFieldDateProps,
+    RefineFieldEmailProps,
+    RefineFieldFileProps,
+    RefineFieldImageProps,
+    RefineFieldMarkdownProps as BaseRefineFieldMarkdownProps,
+    RefineFieldNumberProps,
+    RefineFieldTagProps,
+    RefineFieldTextProps,
+    RefineFieldUrlProps,
+} from "@refinedev/ui-types";
+import { ImageProps, TagProps } from "antd";
+import { AbstractTooltipProps } from "antd/lib/tooltip";
+import { TextProps } from "antd/lib/typography/Text";
+import { LinkProps } from "antd/lib/typography/Link";
+
+export type BooleanFieldProps = RefineFieldBooleanProps<
+    unknown,
+    AbstractTooltipProps
+>;
+
+export type DateFieldProps = RefineFieldDateProps<ConfigType, TextProps>;
+
+export type EmailFieldProps = RefineFieldEmailProps<ReactNode, LinkProps>;
+
+export type FileFieldProps = RefineFieldFileProps<LinkProps>;
+
+export type ImageFieldProps = RefineFieldImageProps<
+    string | undefined,
+    ImageProps,
+    {
+        imageTitle?: string;
+    }
+>;
+
+export type RefineFieldMarkdownProps = BaseRefineFieldMarkdownProps<
+    string | undefined
+>;
+
+export type NumberFieldProps = RefineFieldNumberProps<ReactChild, TextProps>;
+
+export type TagFieldProps = RefineFieldTagProps<ReactNode, TagProps>;
+
+export type TextFieldProps = RefineFieldTextProps<ReactNode, TextProps>;
+
+export type UrlFieldProps = RefineFieldUrlProps<string | undefined, LinkProps>;

package/src/components/fields/url/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Typography } from "antd";
+
+const { Link } = Typography;
+
+import { UrlFieldProps } from "../types";
+
+/**
+ * This field lets you embed a link. It uses Ant Design's {@link https://ant.design/components/typography/ `<Typography.Link>`} component.
+ * You can pass a URL in its `value` property and you can show a text in its place by passing any `children`.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/url} for more details.
+ */
+export const UrlField: React.FC<UrlFieldProps> = ({
+    children,
+    value,
+    ...rest
+}) => {
+    return (
+        <Link href={value} {...rest}>
+            {children ?? value}
+        </Link>
+    );
+};

package/src/components/index.ts

@@ -0,0 +1,14 @@
+// Layout
+export { Layout } from "./layout";
+export { Header } from "./layout/header";
+export { Sider } from "./layout/sider";
+export { Title } from "./layout/title";
+export * from "./layout/types";
+
+export * from "./buttons";
+export * from "./crud";
+export * from "./fields";
+export * from "./table";
+export * from "./pages";
+export * from "./breadcrumb";
+export * from "./pageHeader";

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

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

package/src/components/layout/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Grid, Layout as AntdLayout } from "antd";
+
+import { Sider as DefaultSider } from "./sider";
+import { Header as DefaultHeader } from "./header";
+import { RefineLayoutLayoutProps } from "./types";
+
+export const Layout: React.FC<RefineLayoutLayoutProps> = ({
+    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/layout/sider/index.tsx

@@ -0,0 +1,261 @@
+import React, { useState } from "react";
+import { Layout, Menu, Grid, ConfigProvider, Drawer, Button } from "antd";
+import {
+    DashboardOutlined,
+    LogoutOutlined,
+    UnorderedListOutlined,
+    BarsOutlined,
+} from "@ant-design/icons";
+import {
+    useTranslate,
+    useLogout,
+    useTitle,
+    CanAccess,
+    ITreeMenu,
+    useIsExistAuthentication,
+    useRouterContext,
+    useMenu,
+    useRefineContext,
+    useLink,
+    useRouterType,
+    useActiveAuthProvider,
+    pickNotDeprecated,
+} from "@refinedev/core";
+
+import { Title as DefaultTitle } from "@components";
+
+import { drawerButtonStyles } from "./styles";
+import { RefineLayoutSiderProps } from "../types";
+
+const { SubMenu } = Menu;
+
+export const Sider: React.FC<RefineLayoutSiderProps> = ({
+    Title: TitleFromProps,
+    render,
+    meta,
+}) => {
+    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 ?? DefaultTitle;
+
+    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}
+                        style={{
+                            fontWeight: isSelected ? "bold" : "normal",
+                        }}
+                        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"
+            style={{
+                fontWeight: selectedKey === "/" ? "bold" : "normal",
+            }}
+            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
+                    theme="dark"
+                    selectedKeys={selectedKey ? [selectedKey] : []}
+                    defaultOpenKeys={defaultOpenKeys}
+                    mode="inline"
+                    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" }}
+                        >
+                            <RenderToTitle collapsed={false} />
+                            {renderMenu()}
+                        </Layout.Sider>
+                    </Layout>
+                </Drawer>
+                <Button
+                    style={drawerButtonStyles}
+                    size="large"
+                    onClick={() => setDrawerOpen(true)}
+                    icon={<BarsOutlined />}
+                ></Button>
+            </>
+        );
+    };
+
+    const renderContent = () => {
+        if (isMobile) {
+            return renderDrawerSider();
+        }
+
+        return (
+            <Layout.Sider
+                collapsible
+                collapsed={collapsed}
+                onCollapse={(collapsed: boolean): void =>
+                    setCollapsed(collapsed)
+                }
+                collapsedWidth={80}
+                breakpoint="lg"
+            >
+                <RenderToTitle collapsed={collapsed} />
+                {renderMenu()}
+            </Layout.Sider>
+        );
+    };
+
+    return (
+        <ConfigProvider
+            theme={{
+                components: {
+                    Menu: {
+                        colorItemBg: "transparent",
+                        colorItemText: "#fff",
+                        colorItemTextSelected: "#fff",
+                        colorItemBgSelected: "transparent",
+                        colorItemTextHover: "#fff",
+                    },
+                },
+            }}
+        >
+            {renderContent()}
+        </ConfigProvider>
+    );
+};

package/src/components/layout/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/layout/title/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import {
+    TitleProps,
+    useRouterContext,
+    useRouterType,
+    useLink,
+} from "@refinedev/core";
+
+export const Title: React.FC<TitleProps> = ({ collapsed }) => {
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    return (
+        <ActiveLink to="/">
+            {collapsed ? (
+                <div
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }}
+                >
+                    <img
+                        src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine-mini.svg"
+                        alt="Refine"
+                        style={{
+                            margin: "0 auto",
+                            padding: "12px 0",
+                            maxHeight: "65.5px",
+                        }}
+                    />
+                </div>
+            ) : (
+                <img
+                    src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
+                    alt="Refine"
+                    style={{
+                        width: "200px",
+                        padding: "12px 24px",
+                    }}
+                />
+            )}
+        </ActiveLink>
+    );
+};

package/src/components/layout/types.ts

@@ -0,0 +1,11 @@
+import type {
+    RefineLayoutSiderProps,
+    RefineLayoutHeaderProps,
+    RefineLayoutLayoutProps,
+} from "@refinedev/ui-types";
+
+export type {
+    RefineLayoutSiderProps,
+    RefineLayoutHeaderProps,
+    RefineLayoutLayoutProps,
+};