@refinedev/antd 5.0.0

package/src/assets/styles/reset.css

@@ -0,0 +1,254 @@
+/* stylelint-disable */
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+input::-ms-clear,
+input::-ms-reveal {
+    display: none;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+html {
+    font-family: sans-serif;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    -ms-overflow-style: scrollbar;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+@-ms-viewport {
+    width: device-width;
+}
+body {
+    margin: 0;
+}
+[tabindex="-1"]:focus {
+    outline: none;
+}
+hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    margin-bottom: 0.5em;
+    font-weight: 500;
+}
+p {
+    margin-top: 0;
+    margin-bottom: 1em;
+}
+abbr[title],
+abbr[data-original-title] {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline;
+    text-decoration: underline dotted;
+    border-bottom: 0;
+    cursor: help;
+}
+address {
+    margin-bottom: 1em;
+    font-style: normal;
+    line-height: inherit;
+}
+input[type="text"],
+input[type="password"],
+input[type="number"],
+textarea {
+    -webkit-appearance: none;
+}
+ol,
+ul,
+dl {
+    margin-top: 0;
+    margin-bottom: 1em;
+}
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+    margin-bottom: 0;
+}
+dt {
+    font-weight: 500;
+}
+dd {
+    margin-bottom: 0.5em;
+    margin-left: 0;
+}
+blockquote {
+    margin: 0 0 1em;
+}
+dfn {
+    font-style: italic;
+}
+b,
+strong {
+    font-weight: bolder;
+}
+small {
+    font-size: 80%;
+}
+sub,
+sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+sub {
+    bottom: -0.25em;
+}
+sup {
+    top: -0.5em;
+}
+pre,
+code,
+kbd,
+samp {
+    font-size: 1em;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+        monospace;
+}
+pre {
+    margin-top: 0;
+    margin-bottom: 1em;
+    overflow: auto;
+}
+figure {
+    margin: 0 0 1em;
+}
+img {
+    vertical-align: middle;
+    border-style: none;
+}
+a,
+area,
+button,
+[role="button"],
+input:not([type="range"]),
+label,
+select,
+summary,
+textarea {
+    touch-action: manipulation;
+}
+table {
+    border-collapse: collapse;
+}
+caption {
+    padding-top: 0.75em;
+    padding-bottom: 0.3em;
+    text-align: left;
+    caption-side: bottom;
+}
+input,
+button,
+select,
+optgroup,
+textarea {
+    margin: 0;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+}
+button,
+input {
+    overflow: visible;
+}
+button,
+select {
+    text-transform: none;
+}
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+}
+input[type="radio"],
+input[type="checkbox"] {
+    box-sizing: border-box;
+    padding: 0;
+}
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+    -webkit-appearance: listbox;
+}
+textarea {
+    overflow: auto;
+    resize: vertical;
+}
+fieldset {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+legend {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 0.5em;
+    padding: 0;
+    color: inherit;
+    font-size: 1.5em;
+    line-height: inherit;
+    white-space: normal;
+}
+progress {
+    vertical-align: baseline;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+[type="search"] {
+    outline-offset: -2px;
+    -webkit-appearance: none;
+}
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+    font: inherit;
+    -webkit-appearance: button;
+}
+output {
+    display: inline-block;
+}
+summary {
+    display: list-item;
+}
+template {
+    display: none;
+}
+[hidden] {
+    display: none !important;
+}
+mark {
+    padding: 0.2em;
+    background-color: #feffe6;
+}

package/src/components/breadcrumb/index.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import {
+    useBreadcrumb,
+    useLink,
+    useRefineContext,
+    useRouterContext,
+    useRouterType,
+    useResource,
+    matchResourceFromRoute,
+} from "@refinedev/core";
+import { RefineBreadcrumbProps } from "@refinedev/ui-types";
+
+import {
+    Breadcrumb as AntdBreadcrumb,
+    BreadcrumbProps as AntdBreadcrumbProps,
+} from "antd";
+import { HomeOutlined } from "@ant-design/icons";
+
+export type BreadcrumbProps = RefineBreadcrumbProps<AntdBreadcrumbProps>;
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+    breadcrumbProps,
+    showHome = true,
+    hideIcons = false,
+    meta,
+}) => {
+    const routerType = useRouterType();
+    const { breadcrumbs } = useBreadcrumb({
+        meta,
+    });
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+    const { hasDashboard } = useRefineContext();
+
+    const { resources } = useResource();
+
+    const rootRouteResource = matchResourceFromRoute("/", resources);
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    if (breadcrumbs.length === 1) {
+        return null;
+    }
+
+    return (
+        <AntdBreadcrumb {...breadcrumbProps}>
+            {showHome && (hasDashboard || rootRouteResource.found) && (
+                <AntdBreadcrumb.Item>
+                    <ActiveLink to="/">
+                        {rootRouteResource?.resource?.meta?.icon ?? (
+                            <HomeOutlined />
+                        )}
+                    </ActiveLink>
+                </AntdBreadcrumb.Item>
+            )}
+            {breadcrumbs.map(({ label, icon, href }) => {
+                return (
+                    <AntdBreadcrumb.Item key={label}>
+                        {!hideIcons && icon}
+                        {href ? (
+                            <ActiveLink to={href}>{label}</ActiveLink>
+                        ) : (
+                            <span>{label}</span>
+                        )}
+                    </AntdBreadcrumb.Item>
+                );
+            })}
+        </AntdBreadcrumb>
+    );
+};

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { Button } from "antd";
+import { PlusSquareOutlined } from "@ant-design/icons";
+import {
+    useCan,
+    useNavigation,
+    useTranslate,
+    useResource,
+    useRouterContext,
+    useRouterType,
+    useLink,
+} from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { CloneButtonProps } from "../types";
+
+/**
+ * `<CloneButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button> component`}.
+ * It uses the {@link https://refine.dev/docs/core/hooks/navigation/useNavigation#clone `clone`} 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 create page with the record id route of resource.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/clone-button} for more details.
+ */
+export const CloneButton: React.FC<CloneButtonProps> = ({
+    resourceNameOrRouteName: propResourceNameOrRouteName,
+    resource: resourceNameFromProps,
+    recordItemId,
+    hideText = false,
+    accessControl,
+    meta,
+    children,
+    onClick,
+    ...rest
+}) => {
+    const accessControlEnabled = accessControl?.enabled ?? true;
+    const hideIfUnauthorized = accessControl?.hideIfUnauthorized ?? false;
+    const { cloneUrl: generateCloneUrl } = 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: "create",
+        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 cloneUrl =
+        resource && (recordItemId || id)
+            ? generateCloneUrl(resource, recordItemId! ?? id!, meta)
+            : "";
+
+    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
+        return null;
+    }
+
+    return (
+        <ActiveLink
+            to={cloneUrl}
+            replace={false}
+            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+                if (data?.can === false) {
+                    e.preventDefault();
+                    return;
+                }
+                if (onClick) {
+                    e.preventDefault();
+                    onClick(e);
+                }
+            }}
+        >
+            <Button
+                icon={<PlusSquareOutlined />}
+                disabled={data?.can === false}
+                title={createButtonDisabledTitle()}
+                data-testid={RefineButtonTestIds.CloneButton}
+                {...rest}
+            >
+                {!hideText && (children ?? translate("buttons.clone", "Clone"))}
+            </Button>
+        </ActiveLink>
+    );
+};

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

@@ -0,0 +1,103 @@
+import React from "react";
+import { Button } from "antd";
+import { PlusSquareOutlined } from "@ant-design/icons";
+import {
+    useNavigation,
+    useTranslate,
+    useCan,
+    useResource,
+    useRouterContext,
+    useRouterType,
+    useLink,
+} from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { CreateButtonProps } from "../types";
+
+/**
+ * <CreateButton> uses Ant Design's {@link https://ant.design/components/button/ `<Button> component`}.
+ * It uses the {@link https://refine.dev/docs/core/hooks/navigation/useNavigation#create `create`} method from {@link https://refine.dev/docs/core/hooks/navigation/useNavigation `useNavigation`} under the hood.
+ * It can be useful to redirect the app to the create page route of resource}.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/create-button} for more details.
+ */
+export const CreateButton: React.FC<CreateButtonProps> = ({
+    resource: resourceNameFromProps,
+    resourceNameOrRouteName: propResourceNameOrRouteName,
+    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 { createUrl: generateCreateUrl } = useNavigation();
+
+    const { resource } = useResource(
+        resourceNameFromProps ?? propResourceNameOrRouteName,
+    );
+
+    const { data } = useCan({
+        resource: resource?.name,
+        action: "create",
+        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 createUrl = resource ? generateCreateUrl(resource, meta) : "";
+
+    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
+        return null;
+    }
+
+    return (
+        <ActiveLink
+            to={createUrl}
+            replace={false}
+            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+                if (data?.can === false) {
+                    e.preventDefault();
+                    return;
+                }
+                if (onClick) {
+                    e.preventDefault();
+                    onClick(e);
+                }
+            }}
+        >
+            <Button
+                icon={<PlusSquareOutlined />}
+                disabled={data?.can === false}
+                title={createButtonDisabledTitle()}
+                data-testid={RefineButtonTestIds.CreateButton}
+                {...rest}
+            >
+                {!hideText &&
+                    (children ?? translate("buttons.create", "Create"))}
+            </Button>
+        </ActiveLink>
+    );
+};

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

@@ -0,0 +1,122 @@
+import React from "react";
+import { Button, Popconfirm } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
+import {
+    useDelete,
+    useTranslate,
+    useMutationMode,
+    useCan,
+    useResource,
+    pickNotDeprecated,
+} from "@refinedev/core";
+import { RefineButtonTestIds } from "@refinedev/ui-types";
+
+import { DeleteButtonProps } from "../types";
+
+/**
+ * `<DeleteButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} and {@link https://ant.design/components/button/ `<Popconfirm>`} components.
+ * When you try to delete something, a pop-up shows up and asks for confirmation. When confirmed it executes the `useDelete` method provided by your `dataProvider`.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/buttons/delete-button} for more details.
+ */
+export const DeleteButton: React.FC<DeleteButtonProps> = ({
+    resource: resourceNameFromProps,
+    resourceNameOrRouteName: propResourceNameOrRouteName,
+    recordItemId,
+    onSuccess,
+    mutationMode: mutationModeProp,
+    children,
+    successNotification,
+    errorNotification,
+    hideText = false,
+    accessControl,
+    metaData,
+    meta,
+    dataProviderName,
+    confirmTitle,
+    confirmOkText,
+    confirmCancelText,
+    invalidates,
+    ...rest
+}) => {
+    const accessControlEnabled = accessControl?.enabled ?? true;
+    const hideIfUnauthorized = accessControl?.hideIfUnauthorized ?? false;
+    const translate = useTranslate();
+
+    const { id, resource } = useResource(
+        resourceNameFromProps ?? propResourceNameOrRouteName,
+    );
+
+    const { mutationMode: mutationModeContext } = useMutationMode();
+
+    const mutationMode = mutationModeProp ?? mutationModeContext;
+
+    const { mutate, isLoading, variables } = useDelete();
+
+    const { data } = useCan({
+        resource: resource?.name,
+        action: "delete",
+        params: { id: recordItemId ?? id, resource },
+        queryOptions: {
+            enabled: accessControlEnabled,
+        },
+    });
+
+    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
+        return null;
+    }
+
+    return (
+        <Popconfirm
+            key="delete"
+            okText={confirmOkText ?? translate("buttons.delete", "Delete")}
+            cancelText={
+                confirmCancelText ?? translate("buttons.cancel", "Cancel")
+            }
+            okType="danger"
+            title={
+                confirmTitle ?? translate("buttons.confirm", "Are you sure?")
+            }
+            okButtonProps={{ disabled: isLoading }}
+            onConfirm={(): void => {
+                if ((recordItemId ?? id) && resource?.name) {
+                    mutate(
+                        {
+                            id: recordItemId ?? id ?? "",
+                            resource: resource?.name,
+                            mutationMode,
+                            successNotification,
+                            errorNotification,
+                            meta: pickNotDeprecated(meta, metaData),
+                            metaData: pickNotDeprecated(meta, metaData),
+                            dataProviderName,
+                            invalidates,
+                        },
+                        {
+                            onSuccess: (value) => {
+                                onSuccess && onSuccess(value);
+                            },
+                        },
+                    );
+                }
+            }}
+            disabled={
+                typeof rest?.disabled !== "undefined"
+                    ? rest.disabled
+                    : data?.can === false
+            }
+        >
+            <Button
+                danger
+                loading={(recordItemId ?? id) === variables?.id && isLoading}
+                icon={<DeleteOutlined />}
+                disabled={data?.can === false}
+                data-testid={RefineButtonTestIds.DeleteButton}
+                {...rest}
+            >
+                {!hideText &&
+                    (children ?? translate("buttons.delete", "Delete"))}
+            </Button>
+        </Popconfirm>
+    );
+};