@refinedev/antd 5.0.0

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

@@ -0,0 +1,105 @@
+import React from "react";
+import { Button } from "antd";
+import { EditOutlined } from "@ant-design/icons";
+import {
+    useCan,
+    useNavigation,
+    useTranslate,
+    useResource,
+    useRouterContext,
+    useRouterType,
+    useLink,
+} from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { EditButtonProps } from "../types";
+
+/**
+ * `<EditButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component.
+ * It uses the {@link https://refine.dev/docs/core/hooks/navigation/useNavigation#edit `edit`} method from {@link https://refine.dev/docs/core/hooks/navigation/useNavigation `useNavigation`} under the hood.
+ * It can be useful when redirecting the app to the edit page with the record id route of resource}.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/edit-button} for more details.
+ */
+export const EditButton: React.FC<EditButtonProps> = ({
+    resource: resourceNameFromProps,
+    resourceNameOrRouteName: propResourceNameOrRouteName,
+    recordItemId,
+    hideText = false,
+    accessControl,
+    meta,
+    children,
+    onClick,
+    ...rest
+}) => {
+    const accessControlEnabled = accessControl?.enabled ?? true;
+    const hideIfUnauthorized = accessControl?.hideIfUnauthorized ?? false;
+    const translate = useTranslate();
+
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    const { editUrl: generateEditUrl } = useNavigation();
+
+    const { id, resource } = useResource(
+        resourceNameFromProps ?? propResourceNameOrRouteName,
+    );
+
+    const { data } = useCan({
+        resource: resource?.name,
+        action: "edit",
+        params: { id: recordItemId ?? id, resource },
+        queryOptions: {
+            enabled: accessControlEnabled,
+        },
+    });
+
+    const createButtonDisabledTitle = () => {
+        if (data?.can) return "";
+        else if (data?.reason) return data.reason;
+        else
+            return translate(
+                "buttons.notAccessTitle",
+                "You don't have permission to access",
+            );
+    };
+
+    const editUrl =
+        resource && (recordItemId ?? id)
+            ? generateEditUrl(resource, recordItemId! ?? id!, meta)
+            : "";
+
+    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
+        return null;
+    }
+
+    return (
+        <ActiveLink
+            to={editUrl}
+            replace={false}
+            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+                if (data?.can === false) {
+                    e.preventDefault();
+                    return;
+                }
+                if (onClick) {
+                    e.preventDefault();
+                    onClick(e);
+                }
+            }}
+        >
+            <Button
+                icon={<EditOutlined />}
+                disabled={data?.can === false}
+                title={createButtonDisabledTitle()}
+                data-testid={RefineButtonTestIds.EditButton}
+                {...rest}
+            >
+                {!hideText && (children ?? translate("buttons.edit", "Edit"))}
+            </Button>
+        </ActiveLink>
+    );
+};

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Button } from "antd";
+import { ExportOutlined } from "@ant-design/icons";
+import { useTranslate } from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { ExportButtonProps } from "../types";
+
+/**
+ * `<ExportButton>` is an Ant Design {@link https://ant.design/components/button/ `<Button>`} with a default export icon and a default text with "Export".
+ * It only has presentational value.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/export-button} for more details.
+ */
+export const ExportButton: React.FC<ExportButtonProps> = ({
+    hideText = false,
+    children,
+    ...rest
+}) => {
+    const translate = useTranslate();
+
+    return (
+        <Button
+            type="default"
+            icon={<ExportOutlined />}
+            data-testid={RefineButtonTestIds.ExportButton}
+            {...rest}
+        >
+            {!hideText && (children ?? translate("buttons.export", "Export"))}
+        </Button>
+    );
+};

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { Button, Upload } from "antd";
+import { ImportOutlined } from "@ant-design/icons";
+import { useTranslate } from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { ImportButtonProps } from "../types";
+
+/**
+ * `<ImportButton>` is compatible with the {@link https://refine.dev/docs/ui-frameworks/antd/hooks/import/useImport `useImport`} hook and is meant to be used as it's upload button.
+ * It uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} and {@link https://ant.design/components/upload/ `<Upload>`} components.
+ * It wraps a `<Button>` component with an `<Upload>` component and accepts properties for `<Button>` and `<Upload>` components separately.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/import-button} for more details.
+ */
+export const ImportButton: React.FC<ImportButtonProps> = ({
+    uploadProps,
+    buttonProps,
+    hideText = false,
+    children,
+}) => {
+    const translate = useTranslate();
+
+    return (
+        <Upload {...uploadProps}>
+            <Button
+                icon={<ImportOutlined />}
+                data-testid={RefineButtonTestIds.ImportButton}
+                {...buttonProps}
+            >
+                {!hideText &&
+                    (children ?? translate("buttons.import", "Import"))}
+            </Button>
+        </Upload>
+    );
+};

package/src/components/buttons/index.ts

@@ -0,0 +1,11 @@
+export { CreateButton } from "./create";
+export { EditButton } from "./edit";
+export { DeleteButton } from "./delete";
+export { RefreshButton } from "./refresh";
+export { ShowButton } from "./show";
+export { ListButton } from "./list";
+export { ExportButton } from "./export";
+export { SaveButton } from "./save";
+export { CloneButton } from "./clone";
+export { ImportButton } from "./import";
+export * from "./types";

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

@@ -0,0 +1,122 @@
+import React from "react";
+import { Button } from "antd";
+import { BarsOutlined } from "@ant-design/icons";
+import {
+    useCan,
+    useNavigation,
+    useTranslate,
+    userFriendlyResourceName,
+    useResource,
+    useRouterContext,
+    useRouterType,
+    useLink,
+    pickNotDeprecated,
+} from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { ListButtonProps } from "../types";
+
+/**
+ * `<ListButton>` is using Ant Design's {@link https://ant.design/components/button/ `<Button>`} component.
+ * It uses the  {@link https://refine.dev/docs/core/hooks/navigation/useNavigation#list `list`} method from {@link https://refine.dev/docs/core/hooks/navigation/useNavigation `useNavigation`} under the hood.
+ * It can be useful when redirecting the app to the list page route of resource}.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/list-button} for more details.
+ */
+export const ListButton: React.FC<ListButtonProps> = ({
+    resource: resourceNameFromProps,
+    resourceNameOrRouteName: propResourceNameOrRouteName,
+    hideText = false,
+    accessControl,
+    meta,
+    children,
+    onClick,
+    ...rest
+}) => {
+    const accessControlEnabled = accessControl?.enabled ?? true;
+    const hideIfUnauthorized = accessControl?.hideIfUnauthorized ?? false;
+    const { listUrl: generateListUrl } = useNavigation();
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    const translate = useTranslate();
+
+    const { resource } = useResource(
+        resourceNameFromProps ?? propResourceNameOrRouteName,
+    );
+
+    const { data } = useCan({
+        resource: resource?.name,
+        action: "list",
+        queryOptions: {
+            enabled: accessControlEnabled,
+        },
+        params: {
+            resource,
+        },
+    });
+
+    const createButtonDisabledTitle = () => {
+        if (data?.can) return "";
+        else if (data?.reason) return data.reason;
+        else
+            return translate(
+                "buttons.notAccessTitle",
+                "You don't have permission to access",
+            );
+    };
+
+    const listUrl = resource ? generateListUrl(resource, meta) : "";
+
+    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
+        return null;
+    }
+
+    return (
+        <ActiveLink
+            to={listUrl}
+            replace={false}
+            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+                if (data?.can === false) {
+                    e.preventDefault();
+                    return;
+                }
+                if (onClick) {
+                    e.preventDefault();
+                    onClick(e);
+                }
+            }}
+        >
+            <Button
+                icon={<BarsOutlined />}
+                disabled={data?.can === false}
+                title={createButtonDisabledTitle()}
+                data-testid={RefineButtonTestIds.ListButton}
+                {...rest}
+            >
+                {!hideText &&
+                    (children ??
+                        translate(
+                            `${
+                                resource?.name ??
+                                resourceNameFromProps ??
+                                propResourceNameOrRouteName
+                            }.titles.list`,
+                            userFriendlyResourceName(
+                                resource?.meta?.label ??
+                                    resource?.label ??
+                                    resource?.name ??
+                                    pickNotDeprecated(
+                                        resourceNameFromProps,
+                                        propResourceNameOrRouteName,
+                                    ),
+                                "plural",
+                            ),
+                        ))}
+            </Button>
+        </ActiveLink>
+    );
+};

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

@@ -0,0 +1,61 @@
+import React from "react";
+import { Button } from "antd";
+import { RedoOutlined } from "@ant-design/icons";
+import {
+    useOne,
+    useTranslate,
+    useResource,
+    pickNotDeprecated,
+} from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { RefreshButtonProps } from "../types";
+
+/**
+ * `<RefreshButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component
+ * to update the data shown on the page via the {@link https://refine.dev/docs/core/hooks/data/useOne `useOne`} method provided by your dataProvider.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/refresh-button} for more details.
+ */
+export const RefreshButton: React.FC<RefreshButtonProps> = ({
+    resource: resourceNameFromProps,
+    resourceNameOrRouteName: propResourceNameOrRouteName,
+    recordItemId,
+    hideText = false,
+    meta,
+    metaData,
+    dataProviderName,
+    children,
+    onClick,
+    ...rest
+}) => {
+    const translate = useTranslate();
+
+    const { resource, id } = useResource(
+        resourceNameFromProps ?? propResourceNameOrRouteName,
+    );
+
+    const { refetch, isFetching } = useOne({
+        resource: resource?.name,
+        id: recordItemId ?? id,
+        queryOptions: {
+            enabled: false,
+        },
+        meta: pickNotDeprecated(meta, metaData),
+        metaData: pickNotDeprecated(meta, metaData),
+        liveMode: "off",
+        dataProviderName,
+    });
+
+    return (
+        <Button
+            // TODO: fix any type
+            onClick={(e) => (onClick ? onClick(e as any) : refetch())}
+            icon={<RedoOutlined spin={isFetching} />}
+            data-testid={RefineButtonTestIds.RefreshButton}
+            {...rest}
+        >
+            {!hideText && (children ?? translate("buttons.refresh", "Refresh"))}
+        </Button>
+    );
+};

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Button } from "antd";
+import { SaveOutlined } from "@ant-design/icons";
+import { useTranslate } from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { SaveButtonProps } from "../types";
+
+/**
+ * `<SaveButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component.
+ * It uses it for presantation purposes only. Some of the hooks that refine has adds features to this button.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/save-button} for more details.
+ */
+export const SaveButton: React.FC<SaveButtonProps> = ({
+    hideText = false,
+    children,
+    ...rest
+}) => {
+    const translate = useTranslate();
+
+    return (
+        <Button
+            type="primary"
+            icon={<SaveOutlined />}
+            data-testid={RefineButtonTestIds.SaveButton}
+            {...rest}
+        >
+            {!hideText && (children ?? translate("buttons.save", "Save"))}
+        </Button>
+    );
+};

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { Button } from "antd";
+import { EyeOutlined } from "@ant-design/icons";
+import {
+    useCan,
+    useNavigation,
+    useTranslate,
+    useResource,
+    useRouterContext,
+    useRouterType,
+    useLink,
+} from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { ShowButtonProps } from "../types";
+
+/**
+ * `<ShowButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component.
+ * It uses the {@link https://refine.dev/docs/core/hooks/navigation/useNavigation#show `show`} method from {@link https://refine.dev/docs/core/hooks/navigation/useNavigation `useNavigation`} under the hood.
+ * It can be useful when redirecting the app to the show page with the record id route of resource.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/show-button} for more details.
+ */
+export const ShowButton: React.FC<ShowButtonProps> = ({
+    resource: resourceNameFromProps,
+    resourceNameOrRouteName: propResourceNameOrRouteName,
+    recordItemId,
+    hideText = false,
+    accessControl,
+    meta,
+    children,
+    onClick,
+    ...rest
+}) => {
+    const accessControlEnabled = accessControl?.enabled ?? true;
+    const hideIfUnauthorized = accessControl?.hideIfUnauthorized ?? false;
+    const { showUrl: generateShowUrl } = useNavigation();
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    const translate = useTranslate();
+
+    const { id, resource } = useResource(
+        resourceNameFromProps ?? propResourceNameOrRouteName,
+    );
+
+    const { data } = useCan({
+        resource: resource?.name,
+        action: "show",
+        params: { id: recordItemId ?? id, resource },
+        queryOptions: {
+            enabled: accessControlEnabled,
+        },
+    });
+
+    const createButtonDisabledTitle = () => {
+        if (data?.can) return "";
+        else if (data?.reason) return data.reason;
+        else
+            return translate(
+                "buttons.notAccessTitle",
+                "You don't have permission to access",
+            );
+    };
+
+    const showUrl =
+        resource && (recordItemId || id)
+            ? generateShowUrl(resource, recordItemId! ?? id!, meta)
+            : "";
+
+    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
+        return null;
+    }
+
+    return (
+        <ActiveLink
+            to={showUrl}
+            replace={false}
+            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+                if (data?.can === false) {
+                    e.preventDefault();
+                    return;
+                }
+                if (onClick) {
+                    e.preventDefault();
+                    onClick(e);
+                }
+            }}
+        >
+            <Button
+                icon={<EyeOutlined />}
+                disabled={data?.can === false}
+                title={createButtonDisabledTitle()}
+                data-testid={RefineButtonTestIds.ShowButton}
+                {...rest}
+            >
+                {!hideText && (children ?? translate("buttons.show", "Show"))}
+            </Button>
+        </ActiveLink>
+    );
+};

package/src/components/buttons/types.ts

@@ -0,0 +1,44 @@
+import { ButtonProps, UploadProps } from "antd";
+import {
+    RefineCloneButtonProps,
+    RefineCreateButtonProps,
+    RefineDeleteButtonProps,
+    RefineEditButtonProps,
+    RefineExportButtonProps,
+    RefineImportButtonProps,
+    RefineListButtonProps,
+    RefineRefreshButtonProps,
+    RefineSaveButtonProps,
+    RefineShowButtonProps,
+} from "@refinedev/ui-types";
+
+export type ShowButtonProps = RefineShowButtonProps<ButtonProps>;
+
+export type CloneButtonProps = RefineCloneButtonProps<ButtonProps>;
+
+export type CreateButtonProps = RefineCreateButtonProps<ButtonProps>;
+
+export type DeleteButtonProps = RefineDeleteButtonProps<ButtonProps>;
+
+export type EditButtonProps = RefineEditButtonProps<ButtonProps>;
+
+export type ExportButtonProps = RefineExportButtonProps<ButtonProps>;
+
+export type ImportButtonProps = RefineImportButtonProps & {
+    /**
+     * Sets the button type
+     * @type [UploadProps](https://ant.design/components/upload/#API)
+     */
+    uploadProps: UploadProps;
+    /**
+     * Sets props of the button
+     * @type [ButtonProps](https://ant.design/components/button/#API)
+     */
+    buttonProps: ButtonProps;
+};
+
+export type ListButtonProps = RefineListButtonProps<ButtonProps>;
+
+export type RefreshButtonProps = RefineRefreshButtonProps<ButtonProps>;
+
+export type SaveButtonProps = RefineSaveButtonProps<ButtonProps>;

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

@@ -0,0 +1,135 @@
+import React from "react";
+import { Card, Space, Spin } from "antd";
+import {
+    useNavigation,
+    useTranslate,
+    userFriendlyResourceName,
+    useRefineContext,
+    useRouterType,
+    useResource,
+    useBack,
+} from "@refinedev/core";
+
+import { Breadcrumb, SaveButton, PageHeader } from "@components";
+import { CreateProps } from "../types";
+
+/**
+ * `<Create>` provides us a layout to display the page.
+ * It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/basic-views/create} for more details.
+ */
+export const Create: React.FC<CreateProps> = ({
+    title,
+    saveButtonProps,
+    children,
+    resource: resourceFromProps,
+    isLoading = false,
+    breadcrumb: breadcrumbFromProps,
+    wrapperProps,
+    headerProps,
+    contentProps,
+    headerButtonProps,
+    headerButtons,
+    footerButtonProps,
+    footerButtons,
+    goBack: goBackFromProps,
+}) => {
+    const translate = useTranslate();
+    const { options: { breadcrumb: globalBreadcrumb } = {} } =
+        useRefineContext();
+
+    const routerType = useRouterType();
+    const back = useBack();
+    const { goBack } = useNavigation();
+
+    const { resource, action } = useResource(resourceFromProps);
+
+    const breadcrumb =
+        typeof breadcrumbFromProps === "undefined"
+            ? globalBreadcrumb
+            : breadcrumbFromProps;
+
+    const defaultFooterButtons = (
+        <>
+            <SaveButton
+                {...(isLoading ? { disabled: true } : {})}
+                {...saveButtonProps}
+                htmlType="submit"
+            />
+        </>
+    );
+
+    return (
+        <div {...(wrapperProps ?? {})}>
+            <PageHeader
+                ghost={false}
+                backIcon={goBackFromProps}
+                onBack={
+                    action !== "list" || typeof action !== "undefined"
+                        ? routerType === "legacy"
+                            ? goBack
+                            : back
+                        : undefined
+                }
+                title={
+                    title ??
+                    translate(
+                        `${resource?.name}.titles.create`,
+                        `Create ${userFriendlyResourceName(
+                            resource?.meta?.label ??
+                                resource?.options?.label ??
+                                resource?.label ??
+                                resource?.name,
+                            "singular",
+                        )}`,
+                    )
+                }
+                breadcrumb={
+                    typeof breadcrumb !== "undefined" ? (
+                        <>{breadcrumb}</> ?? undefined
+                    ) : (
+                        <Breadcrumb />
+                    )
+                }
+                extra={
+                    <Space wrap {...(headerButtonProps ?? {})}>
+                        {headerButtons
+                            ? typeof headerButtons === "function"
+                                ? headerButtons({
+                                      defaultButtons: null,
+                                  })
+                                : headerButtons
+                            : null}
+                    </Space>
+                }
+                {...(headerProps ?? {})}
+            >
+                <Spin spinning={isLoading}>
+                    <Card
+                        bordered={false}
+                        actions={[
+                            <Space
+                                key="action-buttons"
+                                style={{ float: "right", marginRight: 24 }}
+                                {...(footerButtonProps ?? {})}
+                            >
+                                {footerButtons
+                                    ? typeof footerButtons === "function"
+                                        ? footerButtons({
+                                              defaultButtons:
+                                                  defaultFooterButtons,
+                                          })
+                                        : footerButtons
+                                    : defaultFooterButtons}
+                            </Space>,
+                        ]}
+                        {...(contentProps ?? {})}
+                    >
+                        {children}
+                    </Card>
+                </Spin>
+            </PageHeader>
+        </div>
+    );
+};