@refinedev/antd 5.0.0

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

@@ -0,0 +1,221 @@
+import React from "react";
+
+import { Card, Space, Spin } from "antd";
+import {
+    useMutationMode,
+    useNavigation,
+    useTranslate,
+    userFriendlyResourceName,
+    useRefineContext,
+    useRouterType,
+    useBack,
+    useResource,
+    useGo,
+    useToPath,
+} from "@refinedev/core";
+
+import {
+    DeleteButton,
+    RefreshButton,
+    ListButton,
+    SaveButton,
+    Breadcrumb,
+    PageHeader,
+} from "@components";
+import { EditProps } from "../types";
+
+/**
+ * `<Edit>` provides us a layout for displaying the page.
+ * It does not contain any logic but adds extra functionalities like a refresh button.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/basic-views/edit} for more details.
+ */
+export const Edit: React.FC<EditProps> = ({
+    title,
+    saveButtonProps,
+    mutationMode: mutationModeProp,
+    recordItemId,
+    children,
+    deleteButtonProps,
+    canDelete,
+    resource: resourceFromProps,
+    isLoading = false,
+    dataProviderName,
+    breadcrumb: breadcrumbFromProps,
+    wrapperProps,
+    headerProps,
+    contentProps,
+    headerButtonProps,
+    headerButtons,
+    footerButtonProps,
+    footerButtons,
+    goBack: goBackFromProps,
+}) => {
+    const translate = useTranslate();
+    const { options: { breadcrumb: globalBreadcrumb } = {} } =
+        useRefineContext();
+    const { mutationMode: mutationModeContext } = useMutationMode();
+    const mutationMode = mutationModeProp ?? mutationModeContext;
+
+    const routerType = useRouterType();
+    const back = useBack();
+    const go = useGo();
+    const { goBack, list: legacyGoList } = useNavigation();
+
+    const {
+        resource,
+        action,
+        id: idFromParams,
+    } = useResource(resourceFromProps);
+
+    const goListPath = useToPath({
+        resource,
+        action: "list",
+    });
+
+    const id = recordItemId ?? idFromParams;
+
+    const breadcrumb =
+        typeof breadcrumbFromProps === "undefined"
+            ? globalBreadcrumb
+            : breadcrumbFromProps;
+
+    const isDeleteButtonVisible =
+        canDelete ??
+        ((resource?.meta?.canDelete ?? resource?.canDelete) ||
+            deleteButtonProps);
+
+    const defaultHeaderButtons = (
+        <>
+            {!recordItemId && (
+                <ListButton
+                    {...(isLoading ? { disabled: true } : {})}
+                    resource={
+                        routerType === "legacy"
+                            ? resource?.route
+                            : resource?.identifier ?? resource?.name
+                    }
+                />
+            )}
+            <RefreshButton
+                {...(isLoading ? { disabled: true } : {})}
+                resource={
+                    routerType === "legacy"
+                        ? resource?.route
+                        : resource?.identifier ?? resource?.name
+                }
+                recordItemId={id}
+                dataProviderName={dataProviderName}
+            />
+        </>
+    );
+
+    const defaultFooterButtons = (
+        <>
+            {isDeleteButtonVisible && (
+                <DeleteButton
+                    {...(isLoading ? { disabled: true } : {})}
+                    resource={
+                        routerType === "legacy"
+                            ? resource?.route
+                            : resource?.identifier ?? resource?.name
+                    }
+                    mutationMode={mutationMode}
+                    onSuccess={() => {
+                        if (routerType === "legacy") {
+                            legacyGoList(
+                                resource?.route ?? resource?.name ?? "",
+                            );
+                        } else {
+                            go({ to: goListPath });
+                        }
+                    }}
+                    recordItemId={id}
+                    dataProviderName={dataProviderName}
+                    {...deleteButtonProps}
+                />
+            )}
+            <SaveButton
+                {...(isLoading ? { disabled: true } : {})}
+                {...saveButtonProps}
+            />
+        </>
+    );
+
+    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.edit`,
+                        `Edit ${userFriendlyResourceName(
+                            resource?.meta?.label ??
+                                resource?.options?.label ??
+                                resource?.label ??
+                                resource?.name,
+                            "singular",
+                        )}`,
+                    )
+                }
+                extra={
+                    <Space wrap {...(headerButtonProps ?? {})}>
+                        {headerButtons
+                            ? typeof headerButtons === "function"
+                                ? headerButtons({
+                                      defaultButtons: defaultHeaderButtons,
+                                  })
+                                : headerButtons
+                            : defaultHeaderButtons}
+                    </Space>
+                }
+                breadcrumb={
+                    typeof breadcrumb !== "undefined" ? (
+                        <>{breadcrumb}</> ?? undefined
+                    ) : (
+                        <Breadcrumb />
+                    )
+                }
+                {...(headerProps ?? {})}
+            >
+                <Spin spinning={isLoading}>
+                    <Card
+                        bordered={false}
+                        actions={[
+                            <Space
+                                key="footer-buttons"
+                                wrap
+                                style={{
+                                    float: "right",
+                                    marginRight: 24,
+                                }}
+                                {...(footerButtonProps ?? {})}
+                            >
+                                {footerButtons
+                                    ? typeof footerButtons === "function"
+                                        ? footerButtons({
+                                              defaultButtons:
+                                                  defaultFooterButtons,
+                                          })
+                                        : footerButtons
+                                    : defaultFooterButtons}
+                            </Space>,
+                        ]}
+                        {...(contentProps ?? {})}
+                    >
+                        {children}
+                    </Card>
+                </Spin>
+            </PageHeader>
+        </div>
+    );
+};

package/src/components/crud/index.ts

@@ -0,0 +1,6 @@
+export { List } from "./list";
+export { Create } from "./create";
+export { Edit } from "./edit";
+export { Show } from "./show";
+
+export * from "./types";

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

@@ -0,0 +1,105 @@
+import React from "react";
+import { Space } from "antd";
+import {
+    useTranslate,
+    userFriendlyResourceName,
+    useRefineContext,
+    useRouterType,
+    useResource,
+} from "@refinedev/core";
+
+import { Breadcrumb, CreateButton, PageHeader } from "@components";
+import { ListProps } from "../types";
+
+/**
+ * `<List>` provides us a layout for displaying the page.
+ * It does not contain any logic but adds extra functionalities like a refresh button.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/basic-views/list} for more details.
+ */
+export const List: React.FC<ListProps> = ({
+    canCreate,
+    title,
+    children,
+    createButtonProps,
+    resource: resourceFromProps,
+    wrapperProps,
+    contentProps,
+    headerProps,
+    breadcrumb: breadcrumbFromProps,
+    headerButtonProps,
+    headerButtons,
+}) => {
+    const translate = useTranslate();
+    const { options: { breadcrumb: globalBreadcrumb } = {} } =
+        useRefineContext();
+
+    const routerType = useRouterType();
+
+    const { resource } = useResource(resourceFromProps);
+
+    const isCreateButtonVisible =
+        canCreate ??
+        ((resource?.canCreate ?? !!resource?.create) || createButtonProps);
+
+    const breadcrumb =
+        typeof breadcrumbFromProps === "undefined"
+            ? globalBreadcrumb
+            : breadcrumbFromProps;
+
+    const defaultExtra = isCreateButtonVisible ? (
+        <CreateButton
+            size="middle"
+            resource={
+                routerType === "legacy"
+                    ? resource?.route
+                    : resource?.identifier ?? resource?.name
+            }
+            {...createButtonProps}
+        />
+    ) : null;
+
+    return (
+        <div {...(wrapperProps ?? {})}>
+            <PageHeader
+                ghost={false}
+                title={
+                    title ??
+                    translate(
+                        `${resource?.name}.titles.list`,
+                        userFriendlyResourceName(
+                            resource?.meta?.label ??
+                                resource?.options?.label ??
+                                resource?.label ??
+                                resource?.name,
+                            "plural",
+                        ),
+                    )
+                }
+                extra={
+                    headerButtons ? (
+                        <Space wrap {...headerButtonProps}>
+                            {typeof headerButtons === "function"
+                                ? headerButtons({
+                                      defaultButtons: defaultExtra,
+                                  })
+                                : headerButtons}
+                        </Space>
+                    ) : (
+                        defaultExtra
+                    )
+                }
+                breadcrumb={
+                    typeof breadcrumb !== "undefined" ? (
+                        <>{breadcrumb}</> ?? undefined
+                    ) : (
+                        <Breadcrumb />
+                    )
+                }
+                {...(headerProps ?? {})}
+            >
+                <div {...(contentProps ?? {})}>{children}</div>
+            </PageHeader>
+        </div>
+    );
+};

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

@@ -0,0 +1,215 @@
+import React from "react";
+import { Card, Space, Spin } from "antd";
+import {
+    useNavigation,
+    useTranslate,
+    userFriendlyResourceName,
+    useRefineContext,
+    useResource,
+    useToPath,
+    useRouterType,
+    useBack,
+    useGo,
+} from "@refinedev/core";
+
+import {
+    EditButton,
+    DeleteButton,
+    RefreshButton,
+    ListButton,
+    Breadcrumb,
+    PageHeader,
+} from "@components";
+import { ShowProps } from "../types";
+
+/**
+ * `<Show>` provides us a layout for displaying the page.
+ * It does not contain any logic but adds extra functionalities like a refresh button.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/basic-views/show} for more details.
+ */
+export const Show: React.FC<ShowProps> = ({
+    title,
+    canEdit,
+    canDelete,
+    isLoading = false,
+    children,
+    resource: resourceFromProps,
+    recordItemId,
+    dataProviderName,
+    breadcrumb: breadcrumbFromProps,
+    contentProps,
+    headerProps,
+    wrapperProps,
+    headerButtons,
+    footerButtons,
+    footerButtonProps,
+    headerButtonProps,
+    goBack: goBackFromProps,
+}) => {
+    const translate = useTranslate();
+    const { options: { breadcrumb: globalBreadcrumb } = {} } =
+        useRefineContext();
+
+    const routerType = useRouterType();
+    const back = useBack();
+    const go = useGo();
+    const { goBack, list: legacyGoList } = useNavigation();
+
+    const {
+        resource,
+        action,
+        id: idFromParams,
+    } = useResource(resourceFromProps);
+
+    const goListPath = useToPath({
+        resource,
+        action: "list",
+    });
+
+    const id = recordItemId ?? idFromParams;
+
+    const breadcrumb =
+        typeof breadcrumbFromProps === "undefined"
+            ? globalBreadcrumb
+            : breadcrumbFromProps;
+
+    const isDeleteButtonVisible =
+        canDelete ?? resource?.meta?.canDelete ?? resource?.canDelete;
+    const isEditButtonVisible =
+        canEdit ?? resource?.canEdit ?? !!resource?.edit;
+
+    const defaultHeaderButtons = (
+        <>
+            {!recordItemId && (
+                <ListButton
+                    resource={
+                        routerType === "legacy"
+                            ? resource?.route
+                            : resource?.identifier ?? resource?.name
+                    }
+                />
+            )}
+            {isEditButtonVisible && (
+                <EditButton
+                    {...(isLoading ? { disabled: true } : {})}
+                    resource={
+                        routerType === "legacy"
+                            ? resource?.route
+                            : resource?.identifier ?? resource?.name
+                    }
+                    recordItemId={id}
+                />
+            )}
+            {isDeleteButtonVisible && (
+                <DeleteButton
+                    {...(isLoading ? { disabled: true } : {})}
+                    resource={
+                        routerType === "legacy"
+                            ? resource?.route
+                            : resource?.identifier ?? resource?.name
+                    }
+                    recordItemId={id}
+                    onSuccess={() => {
+                        if (routerType === "legacy") {
+                            legacyGoList(
+                                resource?.route ?? resource?.name ?? "",
+                            );
+                        } else {
+                            go({ to: goListPath });
+                        }
+                    }}
+                    dataProviderName={dataProviderName}
+                />
+            )}
+            <RefreshButton
+                {...(isLoading ? { disabled: true } : {})}
+                resource={
+                    routerType === "legacy"
+                        ? resource?.route
+                        : resource?.identifier ?? resource?.name
+                }
+                recordItemId={id}
+                dataProviderName={dataProviderName}
+            />
+        </>
+    );
+
+    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.show`,
+                        `Show ${userFriendlyResourceName(
+                            resource?.meta?.label ??
+                                resource?.options?.label ??
+                                resource?.label ??
+                                resource?.name,
+                            "singular",
+                        )}`,
+                    )
+                }
+                extra={
+                    <Space
+                        key="extra-buttons"
+                        wrap
+                        {...(headerButtonProps ?? {})}
+                    >
+                        {headerButtons
+                            ? typeof headerButtons === "function"
+                                ? headerButtons({
+                                      defaultButtons: defaultHeaderButtons,
+                                  })
+                                : headerButtons
+                            : defaultHeaderButtons}
+                    </Space>
+                }
+                breadcrumb={
+                    typeof breadcrumb !== "undefined" ? (
+                        <>{breadcrumb}</> ?? undefined
+                    ) : (
+                        <Breadcrumb />
+                    )
+                }
+                {...(headerProps ?? {})}
+            >
+                <Spin spinning={isLoading}>
+                    <Card
+                        bordered={false}
+                        actions={
+                            footerButtons
+                                ? [
+                                      <Space
+                                          key="footer-buttons"
+                                          wrap
+                                          {...footerButtonProps}
+                                      >
+                                          {typeof footerButtons === "function"
+                                              ? footerButtons({
+                                                    defaultButtons: null,
+                                                })
+                                              : footerButtons}
+                                      </Space>,
+                                  ]
+                                : undefined
+                        }
+                        {...(contentProps ?? {})}
+                    >
+                        {children}
+                    </Card>
+                </Spin>
+            </PageHeader>
+        </div>
+    );
+};

package/src/components/crud/types.ts

@@ -0,0 +1,63 @@
+import { CardProps, SpaceProps } from "antd";
+import {
+    CreateButtonProps,
+    DeleteButtonProps,
+    SaveButtonProps,
+} from "@components/buttons";
+import {
+    RefineCrudCreateProps,
+    RefineCrudEditProps,
+    RefineCrudListProps,
+    RefineCrudShowProps,
+} from "@refinedev/ui-types";
+import { PageHeaderProps } from "../pageHeader";
+
+export type CreateProps = RefineCrudCreateProps<
+    SaveButtonProps,
+    SpaceProps,
+    SpaceProps,
+    React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >,
+    PageHeaderProps,
+    CardProps
+>;
+
+export type EditProps = RefineCrudEditProps<
+    SaveButtonProps,
+    DeleteButtonProps,
+    SpaceProps,
+    SpaceProps,
+    React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >,
+    PageHeaderProps,
+    CardProps
+>;
+
+export type ListProps = RefineCrudListProps<
+    CreateButtonProps,
+    SpaceProps,
+    React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >,
+    PageHeaderProps,
+    React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >
+>;
+
+export type ShowProps = RefineCrudShowProps<
+    SpaceProps,
+    SpaceProps,
+    React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >,
+    PageHeaderProps,
+    CardProps
+>;

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Tooltip } from "antd";
+
+import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
+
+import { BooleanFieldProps } from "../types";
+
+/**
+ * This field is used to display boolean values. It uses the {@link https://ant.design/components/tooltip/#header `<Tooltip>`} values from Ant Design.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/boolean} for more details.
+ */
+export const BooleanField: React.FC<BooleanFieldProps> = ({
+    value,
+    valueLabelTrue = "true",
+    valueLabelFalse = "false",
+    trueIcon = <CheckOutlined />,
+    falseIcon = <CloseOutlined />,
+    ...rest
+}) => {
+    return (
+        <Tooltip title={value ? valueLabelTrue : valueLabelFalse} {...rest}>
+            {value ? <span>{trueIcon}</span> : <span>{falseIcon}</span>}
+        </Tooltip>
+    );
+};

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

@@ -0,0 +1,33 @@
+import React from "react";
+import dayjs from "dayjs";
+import { Typography } from "antd";
+
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+
+dayjs.extend(LocalizedFormat);
+
+const defaultLocale = dayjs.locale();
+
+import { DateFieldProps } from "../types";
+
+/**
+ * This field is used to display dates. It uses {@link https://day.js.org/docs/en/display/format `Day.js`} to display date format.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/date} for more details.
+ */
+export const DateField: React.FC<DateFieldProps> = ({
+    value,
+    locales,
+    format: dateFormat = "L",
+    ...rest
+}) => {
+    const { Text } = Typography;
+
+    return (
+        <Text {...rest}>
+            {dayjs(value)
+                .locale(locales || defaultLocale)
+                .format(dateFormat)}
+        </Text>
+    );
+};

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { Typography } from "antd";
+
+const { Link } = Typography;
+
+import { EmailFieldProps } from "../types";
+
+/**
+ * This field is used to display email values. It uses the {@link https://ant.design/components/typography/#FAQ `<Link>`} component
+ * of {@link https://ant.design/components/typography `<Typography>`} from Ant Design.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/email} for more details.
+ */
+export const EmailField: React.FC<EmailFieldProps> = ({ value, ...rest }) => {
+    return (
+        <Link href={`mailto:${value}`} {...rest}>
+            {value}
+        </Link>
+    );
+};