@refinedev/core 4.0.0

package/src/contexts/notification/index.tsx

@@ -0,0 +1,20 @@
+import React, { createContext } from "react";
+
+import { INotificationContext } from "./INotificationContext";
+
+/** @deprecated default value for notification context has no use and is an empty object.  */
+export const defaultNotificationProvider: INotificationContext = {};
+
+export const NotificationContext = createContext<INotificationContext>({});
+
+export const NotificationContextProvider: React.FC<
+    INotificationContext & {
+        children?: React.ReactNode;
+    }
+> = ({ open, close, children }) => {
+    return (
+        <NotificationContext.Provider value={{ open, close }}>
+            {children}
+        </NotificationContext.Provider>
+    );
+};

package/src/contexts/refine/IRefineContext.ts

@@ -0,0 +1,116 @@
+import { RefineProps } from "@components/containers";
+import React, { ReactNode } from "react";
+import { QueryClientConfig, QueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+import {
+    MutationMode,
+    TitleProps,
+    LayoutProps,
+    LiveModeProps,
+    RedirectAction,
+} from "../../interfaces";
+
+export interface IRefineOptions {
+    breadcrumb?: ReactNode;
+    mutationMode?: MutationMode;
+    syncWithLocation?: boolean;
+    warnWhenUnsavedChanges?: boolean;
+    undoableTimeout?: number;
+    liveMode?: LiveModeProps["liveMode"];
+    disableTelemetry?: boolean;
+    redirect?: {
+        afterCreate?: RedirectAction;
+        afterClone?: RedirectAction;
+        afterEdit?: RedirectAction;
+    };
+    reactQuery?: {
+        clientConfig?: QueryClientConfig | InstanceType<typeof QueryClient>;
+        devtoolConfig?: React.ComponentProps<typeof ReactQueryDevtools> | false;
+    };
+}
+
+export interface IRefineContextOptions {
+    breadcrumb?: ReactNode;
+    mutationMode: MutationMode;
+    syncWithLocation: boolean;
+    warnWhenUnsavedChanges: boolean;
+    undoableTimeout: number;
+    liveMode: LiveModeProps["liveMode"];
+    redirect: {
+        afterCreate: RedirectAction;
+        afterClone: RedirectAction;
+        afterEdit: RedirectAction;
+    };
+}
+
+export interface IRefineContext {
+    hasDashboard: boolean;
+    mutationMode: MutationMode;
+    /**
+     * @deprecated Please use `UnsavedChangesNotifier` components from router packages instead.
+     */
+    warnWhenUnsavedChanges: boolean;
+    syncWithLocation: boolean;
+    undoableTimeout: number;
+    catchAll?: React.ReactNode;
+    DashboardPage?: RefineProps["DashboardPage"];
+    LoginPage?: React.FC | false;
+    Title?: React.FC<TitleProps>;
+    Layout: React.FC<LayoutProps>;
+    Sider?: React.FC;
+    Header?: React.FC;
+    Footer?: React.FC;
+    OffLayoutArea?: React.FC;
+    liveMode: LiveModeProps["liveMode"];
+    onLiveEvent?: LiveModeProps["onLiveEvent"];
+    options: IRefineContextOptions;
+}
+
+export interface IRefineContextProvider {
+    hasDashboard: boolean;
+    mutationMode: MutationMode;
+    warnWhenUnsavedChanges: boolean;
+    syncWithLocation: boolean;
+    undoableTimeout: number;
+    /**
+     * @deprecated Please use the `catchAll` element in your routes instead.
+     */
+    catchAll?: React.ReactNode;
+    /**
+     * @deprecated Please use the `DashboardPage` component in your routes instead.
+     */
+    DashboardPage?: RefineProps["DashboardPage"];
+    /**
+     * @deprecated Please use the `LoginPage` component in your routes instead.
+     */
+    LoginPage?: React.FC | false;
+    /**
+     * @deprecated Please pass the `Title` component to your `Layout` component.
+     */
+    Title?: React.FC<TitleProps>;
+    /**
+     * @deprecated Please use the `Layout` component as a children instead of a prop.
+     */
+    Layout?: React.FC<LayoutProps>;
+    /**
+     * @deprecated Please pass the `Sider` component to your `Layout` component.
+     */
+    Sider?: React.FC;
+    /**
+     * @deprecated Please pass the `Header` component to your `Layout` component.
+     */
+    Header?: React.FC;
+    /**
+     * @deprecated Please pass the `Footer` component to your `Layout` component.
+     */
+    Footer?: React.FC;
+    /**
+     * @deprecated Please use your `OffLayoutArea` component as a children instead of a prop.
+     */
+    OffLayoutArea?: React.FC;
+    liveMode: LiveModeProps["liveMode"];
+    onLiveEvent?: LiveModeProps["onLiveEvent"];
+    options: IRefineContextOptions;
+    children?: ReactNode;
+}

package/src/contexts/refine/index.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+
+import {
+    IRefineContextOptions,
+    IRefineContext,
+    IRefineContextProvider,
+} from "./IRefineContext";
+import { DefaultLayout } from "@components/layoutWrapper/defaultLayout";
+
+import { LoginPage as DefaultLoginPage } from "@components/pages";
+
+export const defaultRefineOptions: IRefineContextOptions = {
+    mutationMode: "pessimistic",
+    syncWithLocation: false,
+    undoableTimeout: 5000,
+    warnWhenUnsavedChanges: false,
+    liveMode: "off",
+    redirect: {
+        afterCreate: "list",
+        afterClone: "list",
+        afterEdit: "list",
+    },
+};
+
+export const RefineContext = React.createContext<IRefineContext>({
+    hasDashboard: false,
+    mutationMode: "pessimistic",
+    warnWhenUnsavedChanges: false,
+    syncWithLocation: false,
+    undoableTimeout: 5000,
+    Title: undefined,
+    Sider: undefined,
+    Header: undefined,
+    Footer: undefined,
+    Layout: DefaultLayout,
+    OffLayoutArea: undefined,
+    liveMode: "off",
+    onLiveEvent: undefined,
+    options: defaultRefineOptions,
+});
+
+export const RefineContextProvider: React.FC<IRefineContextProvider> = ({
+    hasDashboard,
+    mutationMode,
+    warnWhenUnsavedChanges,
+    syncWithLocation,
+    undoableTimeout,
+    children,
+    DashboardPage,
+    Title,
+    Layout = DefaultLayout,
+    Header,
+    Sider,
+    Footer,
+    OffLayoutArea,
+    LoginPage = DefaultLoginPage,
+    catchAll,
+    liveMode = "off",
+    onLiveEvent,
+    options,
+}) => {
+    return (
+        <RefineContext.Provider
+            value={{
+                hasDashboard,
+                mutationMode,
+                warnWhenUnsavedChanges,
+                syncWithLocation,
+                Title,
+                undoableTimeout,
+                Layout,
+                Header,
+                Sider,
+                Footer,
+                OffLayoutArea,
+                DashboardPage,
+                LoginPage,
+                catchAll,
+                liveMode,
+                onLiveEvent,
+                options,
+            }}
+        >
+            {children}
+        </RefineContext.Provider>
+    );
+};

package/src/contexts/resource/IResourceContext.ts

@@ -0,0 +1,68 @@
+import { ComponentType } from "react";
+import { UseQueryResult } from "@tanstack/react-query";
+import { ILogData } from "../../interfaces";
+import {
+    IResourceItem,
+    ResourceMeta,
+    ResourceProps,
+} from "../../interfaces/bindings/resource";
+const auditLogPermissions = ["create", "update", "delete"] as const;
+
+export type ResourceRouteComponent = ComponentType<
+    IResourceComponentsProps<any, any>
+>;
+
+export type ResourceRoutePath = string;
+
+export type ResourceRouteDefinition = {
+    path: ResourceRoutePath;
+    component: ResourceRouteComponent;
+};
+
+export type ResourceRouteComposition =
+    | ResourceRouteDefinition
+    | ResourceRoutePath
+    | ResourceRouteComponent;
+
+export interface IResourceComponents {
+    list?: ResourceRouteComposition;
+    create?: ResourceRouteComposition;
+    clone?: ResourceRouteComposition;
+    edit?: ResourceRouteComposition;
+    show?: ResourceRouteComposition;
+}
+
+type MetaProps<TExtends = { [key: string]: any }> = ResourceMeta & TExtends;
+
+export interface RouteableProperties {
+    canCreate?: boolean;
+    canEdit?: boolean;
+    canShow?: boolean;
+    canDelete?: boolean;
+    canList?: boolean;
+}
+
+export interface IResourceComponentsProps<
+    TCrudData = any,
+    TMetaPropsExtends = { [key: string]: any },
+    TLogQueryResult = ILogData,
+> {
+    canCreate?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    canShow?: boolean;
+    name?: string;
+    initialData?: TCrudData;
+    /**
+     * @deprecated `options` is deprecated with refine@4, refine will pass `meta` instead, however, we still support `options` for backward compatibility.
+     */
+    options?: MetaProps<TMetaPropsExtends>;
+    meta?: MetaProps<TMetaPropsExtends>;
+    logQueryResult?: UseQueryResult<TLogQueryResult>;
+}
+
+export { IResourceItem, ResourceProps };
+
+export interface IResourceContext {
+    resources: IResourceItem[];
+}

package/src/contexts/resource/index.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { IResourceContext } from "./IResourceContext";
+import {
+    IResourceItem,
+    ResourceProps,
+} from "../../interfaces/bindings/resource";
+import { useDeepMemo } from "@hooks/deepMemo";
+import { legacyResourceTransform } from "@definitions/helpers";
+
+export {
+    IResourceItem,
+    IResourceComponents,
+    IResourceComponentsProps,
+    IResourceContext,
+} from "../../interfaces/bindings/resource";
+
+export const ResourceContext = React.createContext<IResourceContext>({
+    resources: [],
+});
+
+export const ResourceContextProvider: React.FC<
+    React.PropsWithChildren<{ resources: ResourceProps[] }>
+> = ({ resources: providedResources, children }) => {
+    const resources: IResourceItem[] = useDeepMemo(() => {
+        return legacyResourceTransform(providedResources ?? []);
+    }, [providedResources]);
+
+    return (
+        <ResourceContext.Provider value={{ resources }}>
+            {children}
+        </ResourceContext.Provider>
+    );
+};

package/src/contexts/router/index.tsx

@@ -0,0 +1,17 @@
+import React, { createContext, PropsWithChildren } from "react";
+import { RouterBindings } from "src/interfaces";
+
+const defaultBindings = {};
+
+export const RouterBindingsContext =
+    createContext<RouterBindings>(defaultBindings);
+
+export const RouterBindingsProvider: React.FC<
+    PropsWithChildren<{ router?: RouterBindings }>
+> = ({ children, router }) => {
+    return (
+        <RouterBindingsContext.Provider value={router ?? defaultBindings}>
+            {children}
+        </RouterBindingsContext.Provider>
+    );
+};

package/src/contexts/router-picker/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+/**
+ * This context is used to determine which router to use.
+ *
+ * This is a temporary solution until we remove the legacy router.
+ */
+
+export const RouterPickerContext = React.createContext<"legacy" | "new">("new");
+
+export const RouterPickerProvider = RouterPickerContext.Provider;
+
+/**
+ * This is a temporary hook to determine which router to use.
+ * It will be removed once the legacy router is removed.
+ * @internal This is an internal hook.
+ */
+export const useRouterType = () => {
+    const value = React.useContext(RouterPickerContext);
+    return value;
+};

package/src/contexts/translation/ITranslationContext.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+export type Translate = (
+    key: string,
+    options?: any,
+    defaultMessage?: string,
+) => string;
+
+export interface I18nProvider {
+    translate: Translate;
+    changeLocale: (locale: string, options?: any) => Promise<any>;
+    getLocale: () => string;
+}
+
+export interface ITranslationContext {
+    i18nProvider?: I18nProvider;
+}
+
+export type TranslationProvider = Required<ITranslationContext>;

package/src/contexts/translation/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { ITranslationContext } from "../../interfaces";
+
+/** @deprecated default value for translation context has no use and is an empty object.  */
+export const defaultProvider: ITranslationContext = {};
+
+export const TranslationContext = React.createContext<ITranslationContext>({});
+
+export const TranslationContextProvider: React.FC<
+    ITranslationContext & {
+        children?: React.ReactNode;
+    }
+> = ({ children, i18nProvider }) => {
+    return (
+        <TranslationContext.Provider
+            value={{
+                i18nProvider: i18nProvider,
+            }}
+        >
+            {children}
+        </TranslationContext.Provider>
+    );
+};

package/src/contexts/undoableQueue/IUndoableQueueContext.ts

@@ -0,0 +1,6 @@
+import { IUndoableQueue } from "../../interfaces";
+
+export interface IUndoableQueueContext {
+    notifications: IUndoableQueue[];
+    notificationDispatch: React.Dispatch<any>;
+}

package/src/contexts/undoableQueue/actionTypes.ts

@@ -0,0 +1,5 @@
+export enum ActionTypes {
+    ADD = "ADD",
+    REMOVE = "REMOVE",
+    DECREASE_NOTIFICATION_SECOND = "DECREASE_NOTIFICATION_SECOND",
+}

package/src/contexts/undoableQueue/index.ts

@@ -0,0 +1,5 @@
+export { ActionTypes } from "./actionTypes";
+export {
+    UndoableQueueContextProvider,
+    UndoableQueueContext,
+} from "./undoableQueueContext";

package/src/contexts/undoableQueue/undoableQueueContext.tsx

@@ -0,0 +1,83 @@
+import React, { ReactNode, useReducer } from "react";
+import isEqual from "lodash/isEqual";
+
+import { UndoableQueue } from "@components";
+
+import { IUndoableQueue, IUndoableQueueContext } from "../../interfaces";
+import { ActionTypes } from "./actionTypes";
+
+export const UndoableQueueContext = React.createContext<IUndoableQueueContext>({
+    notifications: [],
+    notificationDispatch: () => false,
+});
+
+const initialState: IUndoableQueue[] = [];
+
+export const undoableQueueReducer = (state: IUndoableQueue[], action: any) => {
+    switch (action.type) {
+        case ActionTypes.ADD:
+            const newState = state.filter(
+                (notificationItem: IUndoableQueue) => {
+                    return !(
+                        isEqual(notificationItem.id, action.payload.id) &&
+                        notificationItem.resource == action.payload.resource
+                    );
+                },
+            );
+
+            return [
+                ...newState,
+                {
+                    ...action.payload,
+                    isRunning: true,
+                },
+            ];
+        case ActionTypes.REMOVE:
+            return state.filter(
+                (notificationItem: IUndoableQueue) =>
+                    !(
+                        isEqual(notificationItem.id, action.payload.id) &&
+                        notificationItem.resource == action.payload.resource
+                    ),
+            );
+        case ActionTypes.DECREASE_NOTIFICATION_SECOND:
+            return state.map((notificationItem: IUndoableQueue) => {
+                if (
+                    isEqual(notificationItem.id, action.payload.id) &&
+                    notificationItem.resource == action.payload.resource
+                ) {
+                    return {
+                        ...notificationItem,
+                        seconds: action.payload.seconds - 1000,
+                    };
+                }
+                return notificationItem;
+            });
+        default:
+            return state;
+    }
+};
+
+export const UndoableQueueContextProvider: React.FC<{
+    children: ReactNode;
+}> = ({ children }) => {
+    const [notifications, notificationDispatch] = useReducer(
+        undoableQueueReducer,
+        initialState,
+    );
+
+    const notificationData = { notifications, notificationDispatch };
+
+    return (
+        <UndoableQueueContext.Provider value={notificationData}>
+            {children}
+            {typeof window !== "undefined" &&
+                notifications.map((notification) => (
+                    <UndoableQueue
+                        key={`${notification.id}-${notification.resource}-queue`}
+                        notification={notification}
+                    />
+                ))}
+        </UndoableQueueContext.Provider>
+    );
+};

package/src/contexts/unsavedWarn/IUnsavedWarnContext.ts

@@ -0,0 +1,4 @@
+export interface IUnsavedWarnContext {
+    warnWhen?: boolean;
+    setWarnWhen?: (value: boolean) => void;
+}

package/src/contexts/unsavedWarn/index.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode, useState } from "react";
+
+import { IUnsavedWarnContext } from "./IUnsavedWarnContext";
+
+export const UnsavedWarnContext = React.createContext<IUnsavedWarnContext>({});
+
+export const UnsavedWarnContextProvider: React.FC<{ children: ReactNode }> = ({
+    children,
+}) => {
+    const [warnWhen, setWarnWhen] = useState(false);
+
+    return (
+        <UnsavedWarnContext.Provider value={{ warnWhen, setWarnWhen }}>
+            {children}
+        </UnsavedWarnContext.Provider>
+    );
+};

package/src/definitions/helpers/check-router-prop-misuse/index.ts

@@ -0,0 +1,30 @@
+import { IRouterProvider, RouterBindings } from "src/interfaces";
+
+export const checkRouterPropMisuse = (
+    value: IRouterProvider | RouterBindings,
+) => {
+    // check if `routerProvider` prop is passed with legacy properties.
+    // If yes, console.warn the user to use `legacyRuterProvider` prop instead.
+    const bindings = ["go", "parse", "back", "Link"];
+
+    // check if `value` contains properties other than `bindings`
+    const otherProps = Object.keys(value).filter(
+        (key) => !bindings.includes(key),
+    );
+
+    const hasOtherProps = otherProps.length > 0;
+
+    if (hasOtherProps) {
+        console.warn(
+            `Unsupported properties are found in \`routerProvider\` prop. You provided \`${otherProps.join(
+                ", ",
+            )}\`. Supported properties are \`${bindings.join(
+                ", ",
+            )}\`. You may wanted to use \`legacyRouterProvider\` prop instead.`,
+        );
+
+        return true;
+    }
+
+    return false;
+};

package/src/definitions/helpers/handleMultiple/index.ts

@@ -0,0 +1,7 @@
+export const handleMultiple = async <TData = unknown>(
+    promises: Promise<{ data: TData }>[],
+): Promise<{ data: TData[] }> => {
+    return {
+        data: (await Promise.all(promises)).map((res) => res.data),
+    };
+};

package/src/definitions/helpers/handlePaginationParams/index.ts

@@ -0,0 +1,30 @@
+import { Pagination } from "../../../interfaces";
+import { pickNotDeprecated } from "../pickNotDeprecated";
+
+type HandlePaginationParamsProps = {
+    hasPagination?: boolean;
+    pagination?: Pagination;
+    configPagination?: Pagination;
+};
+
+export const handlePaginationParams = ({
+    hasPagination,
+    pagination,
+    configPagination,
+}: HandlePaginationParamsProps = {}): Required<Pagination> => {
+    const hasPaginationString = hasPagination === false ? "off" : "server";
+    const mode = pagination?.mode ?? hasPaginationString;
+
+    const current =
+        pickNotDeprecated(pagination?.current, configPagination?.current) ?? 1;
+
+    const pageSize =
+        pickNotDeprecated(pagination?.pageSize, configPagination?.pageSize) ??
+        10;
+
+    return {
+        current,
+        pageSize,
+        mode,
+    };
+};