diff --git a/babel.config.js b/babel.config.js index a5caef7249f..48db1c06484 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,4 +1,4 @@ module.exports = { - presets: ['@babel/preset-typescript', '@babel/preset-react'], + presets: ['@babel/preset-typescript', ['@babel/preset-react', { runtime: 'automatic' }]], plugins: ['@babel/plugin-transform-modules-commonjs'] }; diff --git a/eslint.config.mjs b/eslint.config.mjs index 26f0176c175..dce1acb2dcb 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -4,7 +4,7 @@ import patternflyReact from 'eslint-plugin-patternfly-react'; import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'; import reactCompiler from 'eslint-plugin-react-compiler'; import reactHooks from 'eslint-plugin-react-hooks'; -import reactRecommended from 'eslint-plugin-react/configs/recommended.js'; +import react from 'eslint-plugin-react'; import testingLibrary from 'eslint-plugin-testing-library'; import globals from 'globals'; import tseslint from 'typescript-eslint'; @@ -23,7 +23,8 @@ export default [ }, js.configs.recommended, ...tseslint.configs.recommended, - reactRecommended, + react.configs.flat.recommended, + react.configs.flat['jsx-runtime'], eslintPluginPrettierRecommended, { plugins: { @@ -98,6 +99,18 @@ export default [ 'no-eval': 'error', 'no-new-wrappers': 'error', 'no-prototype-builtins': 'off', + 'no-restricted-imports': [ + 'warn', + { + paths: [ + { + name: 'react', + importNames: ['default'], + message: 'Please use named imports when importing from React.' + } + ] + } + ], 'no-shadow': 'off', 'no-throw-literal': 'error', 'no-trailing-spaces': 'off', diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx index c3e58f0b1db..bc9b310b418 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx @@ -1,7 +1,5 @@ /* eslint-disable camelcase */ import chart_container_cursor_line_Fill from '@patternfly/react-tokens/dist/esm/chart_container_cursor_line_Fill'; - -import * as React from 'react'; import { ContainerType, createContainer as victoryCreateContainer } from 'victory-create-container'; import { ChartCursorTooltip } from '../ChartCursorTooltip/ChartCursorTooltip'; import { ChartLabel } from '../ChartLabel/ChartLabel'; diff --git a/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx b/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx index 42c0f343576..a166aceb2c3 100644 --- a/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx +++ b/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Avatar } from '@patternfly/react-core'; import avatarImg from '../../assets/avatarImg.svg'; diff --git a/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx b/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx index bc181e9a192..429589810e2 100644 --- a/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx +++ b/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Avatar } from '@patternfly/react-core'; import avatarImg from '../../assets/avatarImg.svg'; diff --git a/packages/react-core/src/components/Button/__mocks__/Button.tsx b/packages/react-core/src/components/Button/__mocks__/Button.tsx index 5e1a0848557..7c925f96e22 100644 --- a/packages/react-core/src/components/Button/__mocks__/Button.tsx +++ b/packages/react-core/src/components/Button/__mocks__/Button.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { ButtonProps } from '../'; export const Button = ({ children, variant, isInline, onClick, iconPosition, icon, ...props }: ButtonProps) => ( diff --git a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx index 439a575177c..bee9ac5818c 100644 --- a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx +++ b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import { DrawerPanelDescription } from '../DrawerPanelDescription'; import styles from '@patternfly/react-styles/css/components/Drawer/drawer'; diff --git a/packages/react-core/src/components/HelperText/__mocks__/HelperText.tsx b/packages/react-core/src/components/HelperText/__mocks__/HelperText.tsx index 070adc10f9c..8685ccbab9d 100644 --- a/packages/react-core/src/components/HelperText/__mocks__/HelperText.tsx +++ b/packages/react-core/src/components/HelperText/__mocks__/HelperText.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { HelperTextProps } from '../'; export const HelperText = ({ children, isLiveRegion }: HelperTextProps) => ( diff --git a/packages/react-core/src/components/HelperText/__mocks__/HelperTextItem.tsx b/packages/react-core/src/components/HelperText/__mocks__/HelperTextItem.tsx index c431a78864c..3f7e5973f05 100644 --- a/packages/react-core/src/components/HelperText/__mocks__/HelperTextItem.tsx +++ b/packages/react-core/src/components/HelperText/__mocks__/HelperTextItem.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { HelperTextItemProps } from '../'; export const HelperTextItem = ({ children, variant }: HelperTextItemProps) => ( diff --git a/packages/react-core/src/components/Menu/__mocks__/Menu.tsx b/packages/react-core/src/components/Menu/__mocks__/Menu.tsx index 962851bffc9..e1cf16a6fb9 100644 --- a/packages/react-core/src/components/Menu/__mocks__/Menu.tsx +++ b/packages/react-core/src/components/Menu/__mocks__/Menu.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { MenuProps } from '../Menu'; import cssMenuMinWidth from '@patternfly/react-tokens/dist/esm/c_menu_MinWidth'; diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx index bd4229efbae..e31aebf49aa 100644 --- a/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx +++ b/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx @@ -1,3 +1 @@ -import React from 'react'; - export const MenuContent = ({ children }) =>
{children}
; diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx index 98f34af2bca..824d3fa9f5a 100644 --- a/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx +++ b/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { MenuGroupProps } from '../MenuGroup'; export const MenuGroup = ({ className, children, label, labelHeadingLevel }: MenuGroupProps) => ( diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx index bb9c74c8b2d..d535824711c 100644 --- a/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { MenuItemProps } from '../MenuItem'; export const MenuItem = ({ className, children, description, itemId }: MenuItemProps) => ( diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx index 03d5d604621..8a90fe7804d 100644 --- a/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx +++ b/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { MenuListProps } from '../MenuList'; export const MenuList = ({ className, children }: MenuListProps) => ( diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx index b527af5caa7..91f3821de1c 100644 --- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx +++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core'; export const PopoverProgressStep = () => ( diff --git a/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx b/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx index 977bd8809d2..ecb59526b9d 100644 --- a/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx +++ b/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx @@ -1,5 +1,5 @@ import { createFocusTrap, FocusTrap as FocusTrapInstance, Options as FocusTrapOptions } from 'focus-trap'; -import React, { ComponentPropsWithRef, forwardRef, useEffect, useImperativeHandle, useRef } from 'react'; +import { ComponentPropsWithRef, forwardRef, useEffect, useImperativeHandle, useRef } from 'react'; import { useUnmountEffect } from '../useUnmountEffect'; export interface FocusTrapProps extends ComponentPropsWithRef<'div'> { diff --git a/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx b/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx index 7449f0c2660..2ca4673fa6d 100644 --- a/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { PopperProps } from '../Popper'; export const Popper = ({ diff --git a/packages/react-core/tsconfig.json b/packages/react-core/tsconfig.json index 0a6395a44d0..00d99bda048 100644 --- a/packages/react-core/tsconfig.json +++ b/packages/react-core/tsconfig.json @@ -1,7 +1,6 @@ { "extends": "../tsconfig.base.json", "compilerOptions": { - "jsx": "react", "rootDir": "./src", "outDir": "./dist/esm", "tsBuildInfoFile": "dist/esm.tsbuildinfo", diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js index 1a03ff9df71..6d9e6ca6106 100644 --- a/packages/react-docs/patternfly-docs/pages/icons.js +++ b/packages/react-docs/patternfly-docs/pages/icons.js @@ -1,4 +1,3 @@ -import React from 'react'; import { Tooltip, Grid, GridItem, PageSection, Content } from '@patternfly/react-core'; import spacerMd from '@patternfly/react-tokens/dist/esm/t_global_spacer_md'; import labelFontSize from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm'; diff --git a/packages/react-docs/patternfly-docs/pages/index.js b/packages/react-docs/patternfly-docs/pages/index.js index 426faebea86..22930f70338 100644 --- a/packages/react-docs/patternfly-docs/pages/index.js +++ b/packages/react-docs/patternfly-docs/pages/index.js @@ -1,4 +1,3 @@ -import React from 'react'; import { Title, PageSection } from '@patternfly/react-core'; // https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ diff --git a/packages/react-icons/scripts/writeIcons.mjs b/packages/react-icons/scripts/writeIcons.mjs index 16c72ff1e7e..418752a266d 100644 --- a/packages/react-icons/scripts/writeIcons.mjs +++ b/packages/react-icons/scripts/writeIcons.mjs @@ -51,7 +51,7 @@ export default ${jsName}; }; const writeDTSExport = (fname, jsName, icon) => { - const text = `import * as React from 'react'; + const text = `import { ComponentClass } from 'react'; import { SVGIconProps } from '../createIcon'; export declare const ${jsName}Config: { name: '${jsName}', @@ -61,7 +61,7 @@ export declare const ${jsName}Config: { yOffset: ${icon.yOffset || 0}, xOffset: ${icon.xOffset || 0}, }; -export declare const ${jsName}: React.ComponentClass; +export declare const ${jsName}: ComponentClass; export default ${jsName}; `.trim(); const filename = `${fname}.d.ts`; diff --git a/packages/react-integration/tsconfig.json b/packages/react-integration/tsconfig.json index cc6d47d0699..09a9f65dbc2 100644 --- a/packages/react-integration/tsconfig.json +++ b/packages/react-integration/tsconfig.json @@ -4,7 +4,6 @@ "noImplicitAny": true, "module": "es6", "target": "es5", - "jsx": "react", "lib": ["dom", "es6"], "allowJs": true, "types": ["cypress"] diff --git a/packages/react-table/src/components/Table/utils/decorators/draggable.tsx b/packages/react-table/src/components/Table/utils/decorators/draggable.tsx index 8f11ebe83e3..774c1e93e18 100644 --- a/packages/react-table/src/components/Table/utils/decorators/draggable.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/draggable.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes'; import { DraggableCell } from '../../DraggableCell'; diff --git a/packages/react-table/src/components/Table/utils/decorators/editable.tsx b/packages/react-table/src/components/Table/utils/decorators/editable.tsx index da3bbacb1d0..b2505e19274 100644 --- a/packages/react-table/src/components/Table/utils/decorators/editable.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/editable.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { IExtra, IFormatterValueType, ITransform, IRowCell, OnRowEdit, RowErrors, RowEditType } from '../../TableTypes'; import { EditColumn } from '../../EditColumn'; import tableStyles from '@patternfly/react-styles/css/components/Table/table'; diff --git a/packages/react-table/src/test-helpers/MockedTableChanges.js b/packages/react-table/src/test-helpers/MockedTableChanges.js index d21d2738299..4f7cca707ad 100644 --- a/packages/react-table/src/test-helpers/MockedTableChanges.js +++ b/packages/react-table/src/test-helpers/MockedTableChanges.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { TableContext } from '../components/Table/Table'; import { TableHeader } from '../components/Table'; diff --git a/packages/react-table/tsconfig.json b/packages/react-table/tsconfig.json index 8a0c909ae50..bc658c80006 100644 --- a/packages/react-table/tsconfig.json +++ b/packages/react-table/tsconfig.json @@ -1,7 +1,6 @@ { "extends": "../tsconfig.base.json", "compilerOptions": { - "jsx": "react", "rootDir": "./src", "outDir": "./dist/esm", "tsBuildInfoFile": "dist/esm.tsbuildinfo", diff --git a/packages/tsconfig.base.json b/packages/tsconfig.base.json index 70704706ba6..fe6c7d19c4e 100644 --- a/packages/tsconfig.base.json +++ b/packages/tsconfig.base.json @@ -1,7 +1,7 @@ { "compilerOptions": { "assumeChangesOnlyAffectDirectDependencies": true, - "jsx": "react", + "jsx": "react-jsx", "lib": [ "es2015", "dom"