[ESLINT] eslint-deprecation plugin implementation (#6914)

packages/docusaurus-theme/src/theme/Admonition/Type/Danger.tsx

@@ -1,8 +1,8 @@
+import { JSX } from 'react';
 import OriginalDanger from '@theme-init/Admonition/Type/Danger';
 import type WarningType from '@theme-init/Admonition/Type/Danger';
 import type { WrapperProps } from '@docusaurus/types';
 import { CallOut } from '../../../components/call_out';
-
 type Props = WrapperProps<typeof WarningType>;
 
 const Danger = (props: Props): JSX.Element => {

packages/docusaurus-theme/src/theme/Admonition/Type/Info.tsx

@@ -1,8 +1,8 @@
+import { JSX } from 'react';
 import OriginalInfo from '@theme-init/Admonition/Type/Info';
 import type InfoType from '@theme-init/Admonition/Type/Info';
 import type { WrapperProps } from '@docusaurus/types';
 import { CallOut } from '../../../components/call_out';
-
 type Props = WrapperProps<typeof InfoType>;
 
 const Note = (props: Props): JSX.Element => {

packages/docusaurus-theme/src/theme/Admonition/Type/Note.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import OriginalNote from '@theme-init/Admonition/Type/Note';
 import type NoteType from '@theme-init/Admonition/Type/Note';
 import type { WrapperProps } from '@docusaurus/types';

packages/docusaurus-theme/src/theme/Admonition/Type/Tip.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import OriginalTip from '@theme-init/Admonition/Type/Tip';
 import type TipType from '@theme-init/Admonition/Type/Tip';
 import type { WrapperProps } from '@docusaurus/types';

packages/docusaurus-theme/src/theme/Admonition/Type/Warning.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import OriginalWarning from '@theme-init/Admonition/Type/Warning';
 import type WarningType from '@theme-init/Admonition/Type/Warning';
 import type { WrapperProps } from '@docusaurus/types';

packages/docusaurus-theme/src/theme/CodeBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, type ReactNode } from 'react';
+import React, { isValidElement, type ReactNode, JSX } from 'react';
 import { EuiCodeBlock } from '@elastic/eui';
 import type { Props } from '@theme/CodeBlock';
 import { Demo } from '../../components/demo';

packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, JSX } from 'react';
 import { translate } from '@docusaurus/Translate';
 import type { Props } from '@theme-original/ColorModeToggle';
 

packages/docusaurus-theme/src/theme/DocBreadcrumbs/Items/Home/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import { translate } from '@docusaurus/Translate';

packages/docusaurus-theme/src/theme/DocBreadcrumbs/index.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, JSX } from 'react';
 import clsx from 'clsx';
 import { css } from '@emotion/react';
 import { ThemeClassNames } from '@docusaurus/theme-common';

packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import clsx from 'clsx';
 import { css } from '@emotion/react';
 import { ThemeClassNames } from '@docusaurus/theme-common';

packages/docusaurus-theme/src/theme/DocItem/Footer/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import clsx from 'clsx';
 import { ThemeClassNames } from '@docusaurus/theme-common';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';

packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { JSX } from 'react';
 import { EuiHorizontalRule } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useWindowSize } from '@docusaurus/theme-common';

packages/docusaurus-theme/src/theme/DocItem/Metadata/index.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import {PageMetadata} from '@docusaurus/theme-common';
+import { JSX } from 'react';
+import { PageMetadata } from '@docusaurus/theme-common';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
 
 export default function DocItemMetadata(): JSX.Element {
-  const {metadata, frontMatter, assets} = useDoc();
+  const { metadata, frontMatter, assets } = useDoc();
   return (
     <PageMetadata
       title={metadata.title}

packages/docusaurus-theme/src/theme/DocItem/Paginator/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
 import DocPaginator from '@theme-original/DocPaginator';
 

packages/docusaurus-theme/src/theme/DocItem/TOC/Desktop/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { ThemeClassNames } from '@docusaurus/theme-common';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
 

packages/docusaurus-theme/src/theme/DocItem/TOC/Mobile/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { css } from '@emotion/react';
 import { ThemeClassNames } from '@docusaurus/theme-common';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';

packages/docusaurus-theme/src/theme/DocItem/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { HtmlClassNameProvider } from '@docusaurus/theme-common';
 import { DocProvider } from '@docusaurus/plugin-content-docs/client';
 import type { Props } from '@theme/DocItem';

packages/docusaurus-theme/src/theme/DocPaginator/index.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { css } from '@emotion/react';
 import Translate, { translate } from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme-original/PaginatorNavLink';

packages/docusaurus-theme/src/theme/DocRoot/Layout/Main/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import clsx from 'clsx';
 import { css } from '@emotion/react';
 import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';

packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode, useState, useCallback } from 'react';
+import React, { type ReactNode, useState, useCallback, JSX } from 'react';
 import clsx from 'clsx';
 import { css } from '@emotion/react';
 import {

packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState, JSX } from 'react';
 import { css } from '@emotion/react';
 import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
 import useIsBrowser from '@docusaurus/useIsBrowser';

packages/docusaurus-theme/src/theme/DocSidebarItem/Category/index.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentProps, useEffect, useMemo } from 'react';
+import { type ComponentProps, useEffect, useMemo, JSX } from 'react';
 import clsx from 'clsx';
 import { css, Interpolation, Theme } from '@emotion/react';
 import {

packages/docusaurus-theme/src/theme/DocSidebarItem/Link/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import clsx from 'clsx';
 import { css } from '@emotion/react';
 import { ThemeClassNames } from '@docusaurus/theme-common';

packages/docusaurus-theme/src/theme/DocSidebarItem/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import type { Props } from '@theme-original/DocSidebarItem';
 import DocSidebarItemHtml from '@theme-original/DocSidebarItem/Html';
 import DocSidebarItemCategory from './Category';

packages/docusaurus-theme/src/theme/DocSidebarItems/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo, JSX } from 'react';
 import {
   DocSidebarItemsExpandedStateProvider,
   useVisibleSidebarItems,

packages/docusaurus-theme/src/theme/EditThisPage/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { css } from '@emotion/react';
 import Translate from '@docusaurus/Translate';
 import type { Props } from '@theme-original/EditThisPage';

packages/docusaurus-theme/src/theme/Logo/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext, JSX } from 'react';
 import { css } from '@emotion/react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';

packages/docusaurus-theme/src/theme/MDXComponents/A.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { JSX } from 'react';
 import type AType from '@theme-init/MDXComponents/A';
 import type { WrapperProps } from '@docusaurus/types';
 import { css } from '@emotion/react';

packages/docusaurus-theme/src/theme/MDXComponents/Code.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { JSX } from 'react';
 import type CodeType from '@theme-init/MDXComponents/Code';
 import CodeBlock from '@theme/CodeBlock';
 import type { WrapperProps } from '@docusaurus/types';
@@ -54,7 +54,7 @@ const Code = ({ children, className, ...rest }: Props): JSX.Element => {
     <CodeBlock className={className} {...rest}>
       {children}
     </CodeBlock>
-  )
+  );
 };
 
 export default Code;

packages/docusaurus-theme/src/theme/MDXComponents/Heading.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { JSX } from 'react';
 import Heading, { Props as HeadingProps } from '@theme/Heading';
 
 const MDXHeading = (props: HeadingProps): JSX.Element => (

packages/docusaurus-theme/src/theme/MDXContent/index.tsx

@@ -12,7 +12,7 @@ import type { WrapperProps } from '@docusaurus/types';
 
 type Props = WrapperProps<typeof MDXContentType>;
 
-const MDXContent = (props: Props): JSX.Element => (
+const MDXContent = (props: Props): React.JSX.Element => (
   <div data-search-children={true}>
     <OriginalMDXContent {...props} />
   </div>

packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { type ReactNode, JSX } from 'react';
 import { css, Global } from '@emotion/react';
 import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common';
 import {

packages/docusaurus-theme/src/theme/Navbar/Layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentProps } from 'react';
+import { type ComponentProps, JSX } from 'react';
 import clsx from 'clsx';
 import { css } from '@emotion/react';
 import { useThemeConfig } from '@docusaurus/theme-common';

packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import { translate } from '@docusaurus/Translate';
 import NavbarColorModeToggle from '@theme-original/Navbar/ColorModeToggle';

packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Layout/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { css } from '@emotion/react';
 import Layout from '@theme-init/Navbar/MobileSidebar/Layout';
 import type LayoutType from '@theme-init/Navbar/MobileSidebar/Layout';

packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, JSX } from 'react';
 import clsx from 'clsx';
 import { css } from '@emotion/react';
 import {

packages/docusaurus-theme/src/theme/NavbarItem/NavbarNavLink.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent, JSX } from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';

packages/docusaurus-theme/src/theme/PaginatorNavLink/index.tsx

@@ -37,7 +37,7 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => {
   };
 };
 
-export default function PaginatorNavLink(props: Props): JSX.Element {
+export default function PaginatorNavLink(props: Props): React.JSX.Element {
   const { permalink, title, subLabel, isNext } = props;
   const isPrev = !isNext;
   const styles = useEuiMemoizedStyles(getStyles);

packages/docusaurus-theme/src/theme/TOCCollapsible/CollapseButton/index.tsx

@@ -23,7 +23,7 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => {
 export default function TOCCollapsibleCollapseButton({
   collapsed,
   ...props
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
   const styles = useEuiMemoizedStyles(getStyles);
 
   return (

packages/docusaurus-theme/src/theme/TOCItems/Tree.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { css } from '@emotion/react';
 import Link from '@docusaurus/Link';
 import type { Props } from '@theme-original/TOCItems/Tree';

packages/eui/.eslintrc.js

@@ -35,6 +35,7 @@ module.exports = {
   },
   extends: [
     'plugin:@typescript-eslint/recommended',
+    'plugin:deprecation/recommended',
     'plugin:storybook/recommended',
     // Prettier options need to come last, in order to override other style rules
     'plugin:prettier/recommended',
@@ -47,8 +48,10 @@ module.exports = {
     'react',
     'react-hooks',
     '@emotion',
+    'deprecation'
   ],
   rules: {
+    'deprecation/deprecation': 'warn',
     'block-scoped-var': 'error',
     camelcase: 'off',
     'dot-notation': ['error', { allowKeywords: true }],

packages/eui/changelogs/upcoming/6914.md

@@ -0,0 +1,34 @@
+## [Unreleased]
+
+### Added
+- **eslint-plugin-deprecation v2.0.0:**
+  - Integrated the `eslint-plugin-deprecation` to handle deprecation warnings.
+  - Updated `.eslintrc.js` to include the new rule and plugin.
+
+### Updated
+- **Code Replacements for Deprecated Aliases:**
+  - `toBeCalled` -> `toHaveBeenCalled`
+  - `toBeCalledTimes` -> `toHaveBeenCalledTimes`
+  - `toBeCalledWith` -> `toHaveBeenCalledWith`
+
+- **CSS Style Declarations:**
+  - `clip` -> `clipPath`
+  - `webkitUserSelect` -> `userSelect`
+
+- **Type Declarations:**
+  - `HTMLTableHeaderCellElement` -> `HTMLTableCellElement`
+  - `ClientRect` -> `DOMRect` (maintains compatibility but improves specificity).
+
+- **React-Specific Updates:**
+  - Replaced `createStore` with `legacy_createStore`.
+  - Updated type declarations to use `JSX` from React instead of global `JSX`.
+  - Added `ReactChild` type declaration in `src/components/common.js` to handle deprecation.
+---
+
+## Notes for Developers
+
+- **Plugin Compatibility:**
+  - Used `eslint-plugin-deprecation` v2.0.0 as v3.0.0 appears to be incompatible with the current project setup.
+
+- **Pending Analysis:**
+  - Some deprecations lack straightforward replacements and will need detailed investigation and follow-up issues.

packages/eui/package.json

@@ -182,6 +182,7 @@
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-plugin-deprecation": "2.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",

packages/eui/scripts/tests/update-changelog.test.js

@@ -103,7 +103,7 @@ describe('collateChangelogFiles', () => {
 
   it('throws an error when the upcoming changelogs directory is empty', () => {
     glob.sync.mockReturnValueOnce([]);
-    expect(() => collateChangelogFiles()).toThrowError(
+    expect(() => collateChangelogFiles()).toThrow(
       /No upcoming changelog files/
     );
   });

packages/eui/src-docs/src/store/configure_store.js

@@ -1,4 +1,4 @@
-import { applyMiddleware, createStore, compose } from 'redux';
+import { applyMiddleware, legacy_createStore, compose } from 'redux';
 import thunk from 'redux-thunk';
 
 import Routes from '../routes';
@@ -19,7 +19,7 @@ export default function configureStore(initialState) {
     };
   }
 
-  return compose(applyMiddleware(thunk))(createStore)(
+  return compose(applyMiddleware(thunk))(legacy_createStore)(
     rootReducer,
     initialState
   );

packages/eui/src/components/accordion/accordion.test.tsx

@@ -223,8 +223,8 @@ describe('EuiAccordion', () => {
         );
 
         fireEvent.click(getAllByRole('button')[0]);
-        expect(onToggleHandler).toBeCalled();
-        expect(onToggleHandler).toBeCalledWith(true);
+        expect(onToggleHandler).toHaveBeenCalled();
+        expect(onToggleHandler).toHaveBeenCalledWith(true);
       });
     });
 
@@ -330,12 +330,12 @@ describe('EuiAccordion', () => {
       );
 
       fireEvent.click(getAllByRole('button')[0]);
-      expect(onToggleHandler).toBeCalled();
-      expect(onToggleHandler).toBeCalledWith(true);
+      expect(onToggleHandler).toHaveBeenCalled();
+      expect(onToggleHandler).toHaveBeenCalledWith(true);
 
       fireEvent.click(getAllByRole('button')[0]);
-      expect(onToggleHandler).toBeCalled();
-      expect(onToggleHandler).toBeCalledWith(false);
+      expect(onToggleHandler).toHaveBeenCalled();
+      expect(onToggleHandler).toHaveBeenCalledWith(false);
     });
   });
 });