patternfly · jonkoops · Dec 6, 2024
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1 @@
-import React from 'react';
-
 export const MenuContent = ({ children }) => <div>{children}</div>;
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<SVGIconProps>;
+export declare const ${jsName}: ComponentClass<SVGIconProps>;
 export default ${jsName};
     `.trim();
   const filename = `${fname}.d.ts`;

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "assumeChangesOnlyAffectDirectDependencies": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [
       "es2015",
       "dom"
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		import React from 'react';

		export const MenuContent = ({ children }) => <div>{children}</div>;