@refinedev/core 4.48.0 → 4.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "4.48.0",
+  "version": "4.49.0",
   "private": false,
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "repository": {
@@ -11,24 +11,39 @@
   "license": "MIT",
   "author": "refine",
   "sideEffects": false,
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
   "typings": "dist/index.d.ts",
   "scripts": {
-    "build": "tsup --format esm,cjs,iife --minify --legacy-output",
-    "dev": "tsup --watch --format esm,cjs,iife --legacy-output",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "prepare": "npm run build",
-    "test": "jest --passWithNoTests --runInBand"
+    "publint": "publint --strict=true --level=suggestion",
+    "test": "jest --passWithNoTests --runInBand",
+    "test:dev": "jest --silent --noStackTrace",
+    "types": "node ../shared/generate-declarations.js"
   },
   "dependencies": {
-    "@refinedev/devtools-internal": "1.1.6",
+    "@refinedev/devtools-internal": "1.1.7",
     "@tanstack/react-query": "^4.10.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "papaparse": "^5.3.0",
     "pluralize": "^8.0.0",
     "qs": "^6.10.1",
-    "tslib": "^2.3.1",
+    "tslib": "^2.6.2",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
@@ -50,9 +65,9 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "ts-jest": "^29.0.3",
+    "ts-jest": "^29.1.2",
     "tsup": "^6.7.0",
-    "typescript": "^4.7.4"
+    "typescript": "^5.4.2"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^4.10.1",

package/refine.config.js

@@ -90,9 +90,7 @@ module.exports = {
 
       imports.map((importItem) => {
         if (
-          importItem.importPath === "../../../../../interfaces" ||
-          importItem.importPath === "../../../interfaces" ||
-          importItem.importPath === "../../interfaces" ||
+          importItem.importPath.includes("/types") ||
           importItem.importPath === "@hooks" ||
           importItem.importPath === "@hooks/translate" ||
           importItem.importPath === "@definitions/index" ||

package/src/components/authenticated/index.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 
+import { useActiveAuthProvider } from "@definitions/index";
 import {
   useGo,
+  useIsAuthenticated,
   useNavigation,
   useParsed,
   useRouterContext,
   useRouterType,
-  useIsAuthenticated,
 } from "@hooks";
-import { useActiveAuthProvider } from "@definitions/index";
-import { GoConfig } from "src/interfaces";
+import { GoConfig } from "../../contexts/router/types";
 
 export type AuthenticatedCommonProps = {
   /**

package/src/components/autoSaveIndicator/index.tsx

@@ -1,6 +1,33 @@
 import React from "react";
-import { AutoSaveIndicatorProps } from "../../interfaces";
-import { useTranslate } from "@hooks/translate";
+
+import { useTranslate } from "@hooks/i18n";
+
+import { BaseRecord, HttpError } from "../../contexts/data/types";
+import { AutoSaveIndicatorElements } from "../../hooks/form/types";
+import { UseUpdateReturnType } from "../../hooks/data/useUpdate";
+
+export type AutoSaveIndicatorProps<
+  TData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TVariables = {},
+> = {
+  /**
+   * The data returned by the update request.
+   */
+  data?: UseUpdateReturnType<TData, TError, TVariables>["data"];
+  /**
+   * The error returned by the update request.
+   */
+  error?: UseUpdateReturnType<TData, TError, TVariables>["error"];
+  /**
+   * The status of the update request.
+   */
+  status: UseUpdateReturnType<TData, TError, TVariables>["status"];
+  /**
+   * The elements to display for each status.
+   */
+  elements?: AutoSaveIndicatorElements;
+};
 
 export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
   status,

package/src/components/canAccess/index.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect } from "react";
-
-import { useCan, useResource } from "@hooks";
-import { BaseKey, IResourceItem, ITreeMenu } from "../../interfaces";
 import { UseQueryOptions } from "@tanstack/react-query";
 
-import { CanReturnType } from "../../interfaces";
+import { useCan, useResourceParams } from "@hooks";
+
+import { CanReturnType } from "../../contexts/accessControl/types";
+import { BaseKey } from "../../contexts/data/types";
+import { IResourceItem, ITreeMenu } from "../../contexts/resource/types";
 
 type CanParams = {
   resource?: IResourceItem & { children?: ITreeMenu[] };
@@ -67,32 +68,23 @@ export const CanAccess: React.FC<CanAccessProps> = ({
   ...rest
 }) => {
   const {
+    id,
     resource,
-    id: idFromRoute,
-    action: actionFromRoute,
-  } = useResource(resourceFromProp);
-  const { identifier } = useResource();
-
-  const getDefaultId = () => {
-    const idFromPropsOrRoute = paramsFromProp?.id ?? idFromRoute;
-
-    if (resourceFromProp && resourceFromProp !== identifier) {
-      return paramsFromProp?.id;
-    }
+    action: fallbackAction = "",
+  } = useResourceParams({
+    resource: resourceFromProp,
+    id: paramsFromProp?.id,
+  });
 
-    return idFromPropsOrRoute;
-  };
-  const defaultId = getDefaultId();
+  const action = actionFromProp ?? fallbackAction;
 
-  const resourceName = resourceFromProp ?? resource?.name;
-  const action = actionFromProp ?? actionFromRoute ?? "";
   const params = paramsFromProp ?? {
-    id: defaultId,
-    resource: resource,
+    id,
+    resource,
   };
 
   const { data } = useCan({
-    resource: resourceName,
+    resource: resource?.name,
     action,
     params,
     queryOptions: componentQueryOptions,
@@ -101,7 +93,7 @@ export const CanAccess: React.FC<CanAccessProps> = ({
   useEffect(() => {
     if (onUnauthorized && data?.can === false) {
       onUnauthorized({
-        resource: resourceName,
+        resource: resource?.name,
         action,
         reason: data?.reason,
         params,

package/src/components/containers/index.ts

@@ -1 +1 @@
-export { Refine, RefineProps } from "./refine";
+export { Refine } from "./refine";

package/src/components/containers/refine/index.tsx

@@ -1,182 +1,33 @@
 import React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import { useQuerySubscription } from "@refinedev/devtools-internal";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { ReadyPage as DefaultReadyPage, RouteChangeHandler } from "@components";
 import { Telemetry } from "@components/telemetry";
-import { AccessControlContextProvider } from "@contexts/accessControl";
-import { AuditLogContextProvider } from "@contexts/auditLog";
-import {
-  AuthBindingsContextProvider,
-  LegacyAuthContextProvider,
-} from "@contexts/auth";
-import { DataContextProvider } from "@contexts/data";
-import { LegacyRouterContextProvider } from "@contexts/legacy-router";
-import { LiveContextProvider } from "@contexts/live";
-import { NotificationContextProvider } from "@contexts/notification";
-import { RefineContextProvider } from "@contexts/refine";
-import { ResourceContextProvider } from "@contexts/resource";
-import { TranslationContextProvider } from "@contexts/translation";
-import { UndoableQueueContextProvider } from "@contexts/undoableQueue";
-import { UnsavedWarnContextProvider } from "@contexts/unsavedWarn";
 import { handleRefineOptions } from "@definitions";
 import { useDeepMemo } from "@hooks/deepMemo";
-import { RouterBindings } from "src/interfaces/bindings";
 
-import { RouterPickerProvider } from "@contexts/router-picker";
-import { RouterBindingsProvider } from "../../../contexts/router";
-import { useRouterMisuseWarning } from "../../../hooks/router/use-router-misuse-warning/index";
+import { AccessControlContextProvider } from "../../../contexts/accessControl";
+import { AuditLogContextProvider } from "../../../contexts/auditLog";
 import {
-  AccessControlProvider,
-  AuditLogProvider,
-  AuthProvider,
-  DashboardPageProps,
-  I18nProvider,
-  IDataContextProvider,
-  IDataMultipleContextProvider,
-  ILiveContext,
-  INotificationContext,
-  IRefineOptions,
-  IRouterProvider,
-  LayoutProps,
-  LegacyAuthProvider,
-  LiveModeProps,
-  NotificationProvider,
-  TitleProps,
-} from "../../../interfaces";
-import { ResourceProps } from "../../../interfaces/bindings/resource";
+  AuthBindingsContextProvider,
+  LegacyAuthContextProvider,
+} from "../../../contexts/auth";
+import { DataContextProvider } from "../../../contexts/data";
+import { I18nContextProvider } from "../../../contexts/i18n";
+import { LiveContextProvider } from "../../../contexts/live";
+import { NotificationContextProvider } from "../../../contexts/notification";
+import { RefineContextProvider } from "../../../contexts/refine";
+import { ResourceContextProvider } from "../../../contexts/resource";
+import { RouterContextProvider } from "../../../contexts/router";
+import { LegacyRouterContextProvider } from "../../../contexts/router/legacy";
+import { RouterPickerProvider } from "../../../contexts/router/picker";
+import { UndoableQueueContextProvider } from "../../../contexts/undoableQueue";
+import { UnsavedWarnContextProvider } from "../../../contexts/unsavedWarn";
 
-export interface RefineProps {
-  children?: React.ReactNode;
-  /**
-   * `resources` is the predefined interaction points for a refine app. A resource represents an entity in an endpoint in the API.
-   * While this is not a required property, it is used in resource detection and creation of routes for the app.
-   * @type [`ResourceProps[]`](https://refine.dev/docs/api-reference/core/components/refine-config/#resources)
-   */
-  resources?: ResourceProps[];
-  /**
-   * **refine** needs some router functions to create resource pages, handle navigation, etc. This provider allows you to use the router library you want
-   * @type [`IRouterProvider`](https://refine.dev/docs/api-reference/core/providers/router-provider/)
-   * @deprecated This property is deprecated and was the legacy way of routing. Please use `routerProvider` with new router bindings instead.
-   */
-  legacyRouterProvider?: IRouterProvider;
-  /**
-   * Router bindings for **refine**. A simple interface for **refine** to interact with your router in a flexible way.
-   * @type [`RouterBindings`](https://refine.dev/docs/api-reference/core/bindings/router/)
-   */
-  routerProvider?: RouterBindings;
-  /**
-   * A `dataProvider` is the place where a refine app communicates with an API. Data providers also act as adapters for refine, making it possible for it to consume different API's and data services.
-   * @type [`IDataContextProvider` | `IDataMultipleContextProvider`](https://refine.dev/docs/api-reference/core/providers/data-provider/)
-   */
-  dataProvider?: IDataContextProvider | IDataMultipleContextProvider;
-  /**
-   * `authProvider` handles authentication logic like login, logout flow and checking user credentials. It is an object with methods that refine uses when necessary.
-   * @type [`AuthProvider`](https://refine.dev/docs/api-reference/core/providers/auth-provider/)
-   */
-  authProvider?: AuthProvider;
-  /**
-   * `legacyAuthProvider` handles authentication logic like login, logout flow and checking user credentials. It is an object with methods that refine uses when necessary.
-   * @type [`AuthProvider`](https://refine.dev/docs/api-reference/core/providers/auth-provider/)
-   * @deprecated `legacyAuthProvider` is deprecated with refine@4, use `authProvider` instead.
-   */
-  legacyAuthProvider?: LegacyAuthProvider;
-  /**
-   * **refine** lets you add Realtime support to your app via `liveProvider`. It can be used to update and show data in Realtime throughout your app.
-   * @type [`ILiveContext`](https://refine.dev/docs/api-reference/core/providers/live-provider/)
-   */
-  liveProvider?: ILiveContext;
-  /**
-   * `notificationProvider` handles notification logics. It is an object with methods that refine uses when necessary.
-   * @type [`NotificationProvider` | `(() => NotificationProvider)`](https://refine.dev/docs/api-reference/core/providers/notification-provider/)
-   */
-  notificationProvider?: NotificationProvider | (() => NotificationProvider);
-  /**
-   * `accessControlProvider` is the entry point for implementing access control for refine apps.
-   * @type [`AccessControlProvider`](https://refine.dev/docs/api-reference/core/providers/accessControl-provider/)
-   */
-  accessControlProvider?: AccessControlProvider;
-  /**
-   * **refine** allows you to track changes in your data and keep track of who made the changes.
-   * @type [`AuditLogProvider`](https://refine.dev/docs/api-reference/core/providers/audit-log-provider#overview)
-   */
-  auditLogProvider?: AuditLogProvider;
-  /**
-   * `i18nProvider` property lets you add i18n support to your app. Making you able to use any i18n framework.
-   * @type [`i18nProvider`](https://refine.dev/docs/api-reference/core/providers/i18n-provider/)
-   */
-  i18nProvider?: I18nProvider;
-  /**
-   * A custom error component.
-   * @type [`ReactNode`](https://refine.dev/docs/api-reference/core/components/refine-config/#catchall)
-   * @deprecated Please use the `catchAll` element in your routes instead.
-   */
-  catchAll?: React.ReactNode;
-  /**
-   * Custom login component can be passed to the `LoginPage` property.
-   * @type [`React.FC`](https://refine.dev/docs/api-reference/core/components/refine-config/#loginpage)
-   * @deprecated Please use the `LoginPage` component in your routes instead.
-   */
-  LoginPage?: React.FC;
-  /**
-   * A custom dashboard page can be passed to the `DashboardPage` prop which is accessible on root route.
-   * @type [`React.FC<DashboardPageProps>`](https://refine.dev/docs/api-reference/core/components/refine-config/#dashboardpage)
-   * @deprecated Please use the `DashboardPage` component in your routes instead.
-   */
-  DashboardPage?: React.FC<DashboardPageProps>;
-  /**
-   * Custom ready page component can be set by passing to `ReadyPage` property.
-   * @type [`React.FC`](https://refine.dev/docs/api-reference/core/components/refine-config/#readypage)
-   * @deprecated This component is only used with the legacy router and will be removed in the future.
-   */
-  ReadyPage?: React.FC;
-  /**
-   * Default layout can be customized by passing the `Layout` property.
-   * @type [`React.FC<LayoutProps>`](https://refine.dev/docs/api-reference/core/components/refine-config/#layout)
-   * @deprecated Please use the `Layout` component as a children instead of a prop.
-   */
-  Layout?: React.FC<LayoutProps>;
-  /**
-   * The default sidebar can be customized by using refine hooks and passing custom components to `Sider` property.
-   * @type [`React.FC`](https://refine.dev/docs/api-reference/core/components/refine-config/#sider)
-   * @deprecated Please pass the `Sider` component to your `Layout` component.
-   */
-  Sider?: React.FC;
-  /**
-   * The default app header can be customized by passing the `Header` property.
-   * @type [`React.FC`](https://refine.dev/docs/api-reference/core/components/refine-config/#header)
-   * @deprecated Please pass the `Header` component to your `Layout` component.
-   */
-  Header?: React.FC;
-  /**
-   *The default app footer can be customized by passing the `Footer` property.
-   * @type [`React.FC`](https://refine.dev/docs/api-reference/core/components/refine-config/#footer)
-   * @deprecated Please pass the `Footer` component to your `Layout` component.
-   */
-  Footer?: React.FC;
-  /**
-   * The component wanted to be placed out of app layout structure can be set by passing to `OffLayoutArea` prop.
-   * @type [`React.FC`](https://refine.dev/docs/api-reference/core/components/refine-config/#offlayoutarea)
-   * @deprecated Please use your `OffLayoutArea` component as a children instead of a prop.
-   */
-  OffLayoutArea?: React.FC;
-  /**
-   * TThe app title can be set by passing the `Title` property.
-   * @type [`React.FC<TitleProps>`](https://refine.dev/docs/api-reference/core/components/refine-config/#title)
-   * @deprecated Please pass the `Title` component to your `Layout` component.
-   */
-  Title?: React.FC<TitleProps>;
-  /**
-   * Callback to handle all live events.
-   * @type [`(event: LiveEvent) => void`](https://refine.dev/docs/api-reference/core/providers/live-provider/#onliveevent)
-   */
-  onLiveEvent?: LiveModeProps["onLiveEvent"];
-  /**
-   * `options` is used to configure the app.
-   * @type [`IRefineOptions`](https://refine.dev/docs/api-reference/core/components/refine-config/#options)
-   * */
-  options?: IRefineOptions;
-}
+import { RefineProps } from "../../../contexts/refine/types";
+import { useRouterMisuseWarning } from "../../../hooks/router/use-router-misuse-warning/index";
 
 /**
  * {@link https://refine.dev/docs/api-reference/core/components/refine-config `<Refine> component`} is the entry point of a refine app.
@@ -242,7 +93,7 @@ export const Refine: React.FC<RefineProps> = ({
   const useNotificationProviderValues = React.useMemo(() => {
     return typeof notificationProvider === "function"
       ? notificationProvider
-      : () => notificationProvider ?? ({} as INotificationContext);
+      : () => notificationProvider;
   }, [notificationProvider]);
 
   const notificationProviderContextValues = useNotificationProviderValues();
@@ -268,10 +119,10 @@ export const Refine: React.FC<RefineProps> = ({
 
   /** Router
    *
-   * Handle routing from `RouterBindingsProvider` and `router` prop for the brand new way
+   * Handle routing from `RouterContextProvider` and `router` prop for the brand new way
    * If `router` is not provided, then we'r checking for `routerProvider` prop
    * If `routerProvider` is provided, then `RouterContextProvider` is used
-   * If none of them is provided, then `RouterBindingsProvider` is used because it supports undefined router
+   * If none of them is provided, then `RouterContextProvider` is used because it supports undefined router
    *
    * `RouterContextProvider` is skipped whenever possible and by this way,
    * we can achieve backward compability only when its provided by user
@@ -293,17 +144,17 @@ export const Refine: React.FC<RefineProps> = ({
             {...(authProvider ?? {})}
             isProvided={Boolean(authProvider)}
           >
-            <DataContextProvider {...dataProvider}>
+            <DataContextProvider dataProvider={dataProvider}>
               <LiveContextProvider liveProvider={liveProvider}>
                 <RouterPickerProvider
                   value={
                     legacyRouterProvider && !routerProvider ? "legacy" : "new"
                   }
                 >
-                  <RouterBindingsProvider router={routerProvider}>
+                  <RouterContextProvider router={routerProvider}>
                     <LegacyRouterContextProvider {...legacyRouterProvider}>
                       <ResourceContextProvider resources={resources ?? []}>
-                        <TranslationContextProvider i18nProvider={i18nProvider}>
+                        <I18nContextProvider i18nProvider={i18nProvider}>
                           <AccessControlContextProvider
                             {...(accessControlProvider ?? {})}
                           >
@@ -351,10 +202,10 @@ export const Refine: React.FC<RefineProps> = ({
                               </UndoableQueueContextProvider>
                             </AuditLogContextProvider>
                           </AccessControlContextProvider>
-                        </TranslationContextProvider>
+                        </I18nContextProvider>
                       </ResourceContextProvider>
                     </LegacyRouterContextProvider>
-                  </RouterBindingsProvider>
+                  </RouterContextProvider>
                 </RouterPickerProvider>
               </LiveContextProvider>
             </DataContextProvider>

package/src/components/index.ts

@@ -7,4 +7,4 @@ export { Authenticated } from "./authenticated";
 export { RouteChangeHandler } from "./routeChangeHandler";
 export { CanAccess, CanAccessProps } from "./canAccess";
 export { GitHubBanner } from "./gh-banner";
-export { AutoSaveIndicator } from "./autoSaveIndicator";
+export { AutoSaveIndicator, AutoSaveIndicatorProps } from "./autoSaveIndicator";

package/src/components/layoutWrapper/defaultLayout/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { LayoutProps } from "../../../interfaces";
+import { LayoutProps } from "../../../contexts/refine/types";
 
 export const DefaultLayout: React.FC<LayoutProps> = ({ children }) => {
   return <div>{children}</div>;

package/src/components/layoutWrapper/index.tsx

@@ -6,7 +6,8 @@ import {
   useTranslate,
   useWarnAboutChange,
 } from "@hooks";
-import { LayoutProps, TitleProps } from "../../interfaces";
+
+import { LayoutProps, TitleProps } from "../../contexts/refine/types";
 
 export interface LayoutWrapperProps {
   /**

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

@@ -1,18 +1,15 @@
 import React, { useState } from "react";
 
 import {
-  useTranslate,
-  useRouterContext,
+  useForgotPassword,
   useLink,
+  useRouterContext,
   useRouterType,
-  useForgotPassword,
+  useTranslate,
 } from "@hooks";
 
 import { DivPropsType, FormPropsType } from "../..";
-import {
-  ForgotPasswordFormTypes,
-  ForgotPasswordPageProps,
-} from "../../../../../interfaces";
+import { ForgotPasswordFormTypes, ForgotPasswordPageProps } from "../../types";
 
 type ForgotPasswordProps = ForgotPasswordPageProps<
   DivPropsType,

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

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
-import { LoginPageProps, LoginFormTypes } from "../../../../../interfaces";
 
-import { useRouterContext, useLink, useRouterType, useLogin } from "@hooks";
-import { useTranslate } from "@hooks/translate";
+import { useActiveAuthProvider } from "@definitions/helpers";
+import { useLink, useLogin, useRouterContext, useRouterType } from "@hooks";
+import { useTranslate } from "@hooks/i18n";
 
 import { DivPropsType, FormPropsType } from "../..";
-import { useActiveAuthProvider } from "@definitions/helpers";
+import { LoginFormTypes, LoginPageProps } from "../../types";
 
 type LoginProps = LoginPageProps<DivPropsType, DivPropsType, FormPropsType>;
 

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

@@ -1,17 +1,18 @@
 import React, { useState } from "react";
-import { RegisterPageProps } from "../../../../../interfaces";
 
 import {
-  useTranslate,
-  useRouterContext,
   useLink,
-  useRouterType,
   useRegister,
+  useRouterContext,
+  useRouterType,
+  useTranslate,
 } from "@hooks";
 
-import { DivPropsType, FormPropsType } from "../..";
 import { useActiveAuthProvider } from "@definitions/helpers";
 
+import { DivPropsType, FormPropsType } from "../..";
+import { RegisterPageProps } from "../../types";
+
 type RegisterProps = RegisterPageProps<
   DivPropsType,
   DivPropsType,

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

@@ -1,13 +1,10 @@
 import React, { useState } from "react";
-import {
-  UpdatePasswordFormTypes,
-  UpdatePasswordPageProps,
-} from "../../../../../interfaces";
 
+import { useActiveAuthProvider } from "@definitions/helpers";
 import { useTranslate, useUpdatePassword } from "@hooks";
 
 import { DivPropsType, FormPropsType } from "../..";
-import { useActiveAuthProvider } from "@definitions/helpers";
+import { UpdatePasswordFormTypes, UpdatePasswordPageProps } from "../../types";
 
 type UpdatePasswordProps = UpdatePasswordPageProps<
   DivPropsType,

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

@@ -5,13 +5,13 @@ import React, {
 } from "react";
 
 import {
+  ForgotPasswordPage,
   LoginPage,
   RegisterPage,
-  ForgotPasswordPage,
   UpdatePasswordPage,
 } from "./components";
 
-import { AuthPageProps } from "../../../interfaces";
+import { AuthPageProps } from "./types";
 
 export type DivPropsType = DetailedHTMLProps<
   HTMLAttributes<HTMLDivElement>,

package/src/components/telemetry/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { useTelemetryData } from "@hooks/useTelemetryData";
 
-import { ITelemetryData } from "../../interfaces/telemetry";
+import { ITelemetryData } from "./types";
 
 const encode = (payload: ITelemetryData): string | undefined => {
   try {

package/src/components/undoableQueue/index.tsx

@@ -1,10 +1,12 @@
 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";
+import {
+  ActionTypes,
+  IUndoableQueue,
+} from "../../contexts/undoableQueue/types";
 
 export const UndoableQueue: React.FC<{
   notification: IUndoableQueue;

package/src/contexts/accessControl/index.tsx

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