@refinedev/core 4.0.0

package/src/components/pages/auth/index.tsx

@@ -0,0 +1,52 @@
+import React, {
+    DetailedHTMLProps,
+    HTMLAttributes,
+    FormHTMLAttributes,
+} from "react";
+
+import {
+    LoginPage,
+    RegisterPage,
+    ForgotPasswordPage,
+    UpdatePasswordPage,
+} from "./components";
+
+import { AuthPageProps } from "../../../interfaces";
+
+export type DivPropsType = DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+>;
+export type FormPropsType = DetailedHTMLProps<
+    FormHTMLAttributes<HTMLFormElement>,
+    HTMLFormElement
+>;
+
+export type AuthProps = AuthPageProps<
+    DivPropsType,
+    DivPropsType,
+    FormPropsType
+>;
+
+/**
+ * **refine** has a default auth page form which is served on `/login` route when the `authProvider` configuration is provided.
+ *
+ * @see {@link https://refine.dev/docs/api-references/components/refine-config#authpage} for more details.
+ */
+export const AuthPage: React.FC<AuthProps> = (props) => {
+    const { type } = props;
+    const renderView = () => {
+        switch (type) {
+            case "register":
+                return <RegisterPage {...props} />;
+            case "forgotPassword":
+                return <ForgotPasswordPage {...props} />;
+            case "updatePassword":
+                return <UpdatePasswordPage {...props} />;
+            default:
+                return <LoginPage {...props} />;
+        }
+    };
+
+    return <>{renderView()}</>;
+};

package/src/components/pages/error/index.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+
+import {
+    useNavigation,
+    useTranslate,
+    useResource,
+    useGo,
+    useRouterType,
+} from "@hooks";
+
+/**
+ * When the app is navigated to a non-existent route, refine shows a default error page.
+ * A custom error component can be used for this error page.
+ *
+ * @see {@link https://refine.dev/docs/api-references/components/refine-config#catchall} for more details.
+ */
+export const ErrorComponent: React.FC = () => {
+    const [errorMessage, setErrorMessage] = useState<string>();
+    const translate = useTranslate();
+    const { push } = useNavigation();
+    const go = useGo();
+    const routerType = useRouterType();
+
+    const { resource, action } = useResource();
+
+    useEffect(() => {
+        if (resource && action) {
+            setErrorMessage(
+                translate(
+                    "pages.error.info",
+                    {
+                        action: action,
+                        resource: resource?.name,
+                    },
+                    `You may have forgotten to add the "${action}" component to "${resource?.name}" resource.`,
+                ),
+            );
+        }
+    }, [resource, action]);
+
+    return (
+        <>
+            <h1>
+                {translate(
+                    "pages.error.404",
+                    undefined,
+                    "Sorry, the page you visited does not exist.",
+                )}
+            </h1>
+            {errorMessage && <p>{errorMessage}</p>}
+            <button
+                onClick={() => {
+                    if (routerType === "legacy") {
+                        push("/");
+                    } else {
+                        go({ to: "/" });
+                    }
+                }}
+            >
+                {translate("pages.error.backHome", undefined, "Back Home")}
+            </button>
+        </>
+    );
+};

package/src/components/pages/index.tsx

@@ -0,0 +1,7 @@
+export { ErrorComponent } from "./error";
+export { LoginPage } from "./login";
+export { AuthPage } from "./auth";
+export { ReadyPage } from "./ready";
+export { WelcomePage } from "./welcome";
+
+export type { AuthProps } from "./auth";

package/src/components/pages/login/index.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+
+import { useLogin, useTranslate } from "@hooks";
+import { useActiveAuthProvider } from "@definitions/helpers";
+export interface ILoginForm {
+    username: string;
+    password: string;
+}
+
+/**
+ * @deprecated LoginPage is deprecated. Use AuthPage instead. @see {@link https://refine.dev/docs/core/components/auth-page} for more details.
+ * **refine** has a default login page form which is served on `/login` route when the `authProvider` configuration is provided.
+ *
+ * @see {@link https://refine.dev/docs/api-references/components/refine-config#loginpage} for more details.
+ */
+export const LoginPage: React.FC = () => {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const translate = useTranslate();
+
+    const authProvider = useActiveAuthProvider();
+    const { mutate: login } = useLogin<ILoginForm>({
+        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+    });
+
+    return (
+        <>
+            <h1>{translate("pages.login.title", "Sign in your account")}</h1>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    login({ username, password });
+                }}
+            >
+                <table>
+                    <tbody>
+                        <tr>
+                            <td>
+                                {translate(
+                                    "pages.login.username",
+                                    undefined,
+                                    "username",
+                                )}
+                                :
+                            </td>
+                            <td>
+                                <input
+                                    type="text"
+                                    size={20}
+                                    autoCorrect="off"
+                                    spellCheck={false}
+                                    autoCapitalize="off"
+                                    autoFocus
+                                    required
+                                    value={username}
+                                    onChange={(e) =>
+                                        setUsername(e.target.value)
+                                    }
+                                />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                {translate(
+                                    "pages.login.password",
+                                    undefined,
+                                    "password",
+                                )}
+                                :
+                            </td>
+                            <td>
+                                <input
+                                    type="password"
+                                    required
+                                    size={20}
+                                    value={password}
+                                    onChange={(e) =>
+                                        setPassword(e.target.value)
+                                    }
+                                />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <br />
+                <input type="submit" value="login" />
+            </form>
+        </>
+    );
+};

package/src/components/pages/ready/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+/**
+ * **refine** shows a default ready page on root route when no `resources` is passed to the `<Refine>` component as a property.
+ *
+ * @see {@link https://refine.dev/docs/api-references/components/refine-config#readypage} for more details.
+ * @deprecated `ReadyPage` is deprecated and will be removed in the next major release.
+ */
+export const ReadyPage: React.FC = () => {
+    return (
+        <>
+            <h1>Welcome on board</h1>
+            <p>Your configuration is completed.</p>
+            <p>
+                Now you can get started by adding your resources to the{" "}
+                <code>`resources`</code> property of <code>{"`<Refine>`"}</code>
+            </p>
+            <div style={{ display: "flex", gap: 8 }}>
+                <a href="https://refine.dev" target="_blank" rel="noreferrer">
+                    <button>Documentation</button>
+                </a>
+                <a
+                    href="https://refine.dev/examples"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <button>Examples</button>
+                </a>
+                <a
+                    href="https://discord.gg/refine"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <button>Community</button>
+                </a>
+            </div>
+        </>
+    );
+};

package/src/components/pages/welcome/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+/**
+ * It is a page that welcomes you after the configuration is completed.
+ */
+export const WelcomePage: React.FC = () => {
+    return (
+        <>
+            <h1>Welcome on board</h1>
+            <p>Your configuration is completed.</p>
+            <div style={{ display: "flex", gap: 8 }}>
+                <a href="https://refine.dev" target="_blank" rel="noreferrer">
+                    <button>Documentation</button>
+                </a>
+                <a
+                    href="https://refine.dev/examples"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <button>Examples</button>
+                </a>
+                <a
+                    href="https://discord.gg/refine"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <button>Community</button>
+                </a>
+            </div>
+        </>
+    );
+};

package/src/components/routeChangeHandler/index.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useRouterContext } from "@hooks";
+import { useLegacyAuthContext } from "@contexts/auth";
+
+export const RouteChangeHandler: React.FC = () => {
+    const { useLocation } = useRouterContext();
+
+    const { checkAuth } = useLegacyAuthContext();
+    const location = useLocation();
+
+    useEffect(() => {
+        checkAuth?.().catch(() => false);
+    }, [location?.pathname]);
+
+    return null;
+};

package/src/components/telemetry/index.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+
+import { useTelemetryData } from "@hooks/useTelemetryData";
+
+import { ITelemetryData } from "../../interfaces/telementry";
+
+const encode = (payload: ITelemetryData): string => {
+    const stringifyedPayload = JSON.stringify(payload || {});
+
+    if (typeof btoa !== "undefined") {
+        return btoa(stringifyedPayload);
+    }
+
+    return Buffer.from(stringifyedPayload).toString("base64");
+};
+
+export const Telemetry: React.FC<{}> = () => {
+    const payload = useTelemetryData();
+
+    useEffect(() => {
+        if (typeof window === "undefined" && !Image) {
+            return;
+        }
+
+        const img = new Image();
+        img.src = `https://telemetry.refine.dev/telemetry?payload=${encode(
+            payload,
+        )}`;
+    }, []);
+
+    return null;
+};

package/src/components/undoableQueue/index.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+
+import { ActionTypes } from "@contexts/undoableQueue";
+import { useCancelNotification, useNotification, useTranslate } from "@hooks";
+import { IUndoableQueue } from "../../interfaces";
+
+import { userFriendlySecond } from "@definitions/helpers";
+
+export const UndoableQueue: React.FC<{
+    notification: IUndoableQueue;
+}> = ({ notification }) => {
+    const translate = useTranslate();
+
+    const { notificationDispatch } = useCancelNotification();
+    const { open } = useNotification();
+
+    const [timeoutId, setTimeoutId] = useState<number | undefined>();
+
+    const cancelNotification = () => {
+        if (notification.isRunning === true) {
+            if (notification.seconds === 0) {
+                notification.doMutation();
+            }
+            if (!notification.isSilent) {
+                open?.({
+                    key: `${notification.id}-${notification.resource}-notification`,
+                    type: "progress",
+                    message: translate(
+                        "notifications.undoable",
+                        {
+                            seconds: userFriendlySecond(notification.seconds),
+                        },
+                        `You have ${userFriendlySecond(
+                            notification.seconds,
+                        )} seconds to undo`,
+                    ),
+                    cancelMutation: notification.cancelMutation,
+                    undoableTimeout: userFriendlySecond(notification.seconds),
+                });
+            }
+
+            if (notification.seconds > 0) {
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                }
+
+                const newTimeoutId = setTimeout(() => {
+                    notificationDispatch({
+                        type: ActionTypes.DECREASE_NOTIFICATION_SECOND,
+                        payload: {
+                            id: notification.id,
+                            seconds: notification.seconds,
+                            resource: notification.resource,
+                        },
+                    });
+                }, 1000) as unknown as number;
+
+                setTimeoutId(newTimeoutId);
+            }
+        }
+    };
+
+    useEffect(() => {
+        cancelNotification();
+    }, [notification]);
+
+    return null;
+};

package/src/contexts/accessControl/IAccessControlContext.ts

@@ -0,0 +1,32 @@
+import { BaseKey, IResourceItem, ITreeMenu } from "../../interfaces";
+
+export type CanParams = {
+    /**
+     * Resource name for API data interactions
+     */
+    resource?: string;
+    /**
+     * Intended action on resource
+     */
+    action: string;
+    /**
+     * Parameters associated with the resource
+     * @type { resource?: [IResourceItem](https://refine.dev/docs/api-reference/core/interfaceReferences/#canparams), id?: [BaseKey](https://refine.dev/docs/api-reference/core/interfaceReferences/#basekey), [key: string]: any }
+     */
+    params?: {
+        resource?: IResourceItem & { children?: ITreeMenu[] };
+        id?: BaseKey;
+        [key: string]: any;
+    };
+};
+
+export type CanReturnType = {
+    can: boolean;
+    reason?: string;
+};
+
+export interface IAccessControlContext {
+    can?: ({ resource, action, params }: CanParams) => Promise<CanReturnType>;
+}
+
+export type AccessControlProvider = Required<IAccessControlContext>;

package/src/contexts/accessControl/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { IAccessControlContext } from "./IAccessControlContext";
+
+/** @deprecated default value for access control context has no use and is an empty object. */
+export const defaultAccessControlContext: IAccessControlContext = {};
+
+export const AccessControlContext = React.createContext<IAccessControlContext>(
+    {},
+);
+
+export const AccessControlContextProvider: React.FC<
+    IAccessControlContext & {
+        children?: React.ReactNode;
+    }
+> = ({ can, children }) => {
+    return (
+        <AccessControlContext.Provider value={{ can }}>
+            {children}
+        </AccessControlContext.Provider>
+    );
+};

package/src/contexts/auditLog/IAuditLogContext.ts

@@ -0,0 +1,31 @@
+import { BaseKey, MetaDataQuery } from "../../interfaces";
+
+export type LogParams = {
+    resource: string;
+    action: string;
+    data?: any;
+    author?: {
+        name?: string;
+        [key: string]: any;
+    };
+    previousData?: any;
+    meta: Record<number | string, any>;
+};
+
+export type IAuditLogContext = {
+    create?: (params: LogParams) => Promise<any>;
+    get?: (params: {
+        resource: string;
+        action?: string;
+        meta?: Record<number | string, any>;
+        author?: Record<number | string, any>;
+        metaData?: MetaDataQuery;
+    }) => Promise<any>;
+    update?: (params: {
+        id: BaseKey;
+        name: string;
+        [key: string]: any;
+    }) => Promise<any>;
+};
+
+export type AuditLogProvider = Required<IAuditLogContext>;

package/src/contexts/auditLog/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { IAuditLogContext } from "./IAuditLogContext";
+
+export const AuditLogContext = React.createContext<IAuditLogContext>({});
+
+export const AuditLogContextProvider: React.FC<
+    IAuditLogContext & {
+        children: React.ReactNode;
+    }
+> = ({ create, get, update, children }) => {
+    return (
+        <AuditLogContext.Provider value={{ create, get, update }}>
+            {children}
+        </AuditLogContext.Provider>
+    );
+};

package/src/contexts/auth/IAuthContext.ts

@@ -0,0 +1,27 @@
+export type TLogoutData = void | false | string;
+export type TLoginData = void | false | string | object;
+export type TRegisterData = void | false | string;
+export type TForgotPasswordData = void | false | string;
+export type TUpdatePasswordData = void | false | string;
+
+/**
+ * @deprecated `LegacyAuthProvider` is deprecated with refine@4, use `AuthBindings` instead, however, we still support `LegacyAuthProvider` for backward compatibility.
+ */
+export interface LegacyAuthProvider {
+    login: (params: any) => Promise<TLoginData>;
+    register?: (params: any) => Promise<TRegisterData>;
+    forgotPassword?: (params: any) => Promise<TForgotPasswordData>;
+    updatePassword?: (params: any) => Promise<TUpdatePasswordData>;
+    logout: (params: any) => Promise<TLogoutData>;
+    checkAuth: (params?: any) => Promise<any>;
+    checkError: (error: any) => Promise<void>;
+    getPermissions?: (params?: any) => Promise<any>;
+    getUserIdentity?: (params?: any) => Promise<any>;
+}
+
+/**
+ * @deprecated `IAuthContext` is deprecated with refine@4, use `AuthBindingsContext` instead, however, we still support `IAuthContext` for backward compatibility.
+ */
+export interface ILegacyAuthContext extends Partial<LegacyAuthProvider> {
+    isProvided?: boolean;
+}