chore(deps): Use new JSX transform (#11524)

* original work from jon

* index and icons pages are not processed by jsx transform changes

* disable lint rules on doc index and icons pages

* syntax err on disable lint rules

* fix issue with lint error disable

Author: mfrances17

Diff for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx

@@ -1,3 +1 @@
-import React from 'react';
-
 export const MenuContent = ({ children }) => <div>{children}</div>;

Diff for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: packages/react-docs/patternfly-docs/pages/icons.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Content } from '@patternfly/react-core/dist/esm/components/Content';
 import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid';

Diff for: packages/react-docs/patternfly-docs/pages/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { PageSection } from '@patternfly/react-core/dist/esm/components/Page/PageSection';
 import { Title } from '@patternfly/react-core/dist/esm/components/Title';

Diff for: 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 for: 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 for: 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 for: 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 for: 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 for: packages/tsconfig.base.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "assumeChangesOnlyAffectDirectDependencies": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [
       "es2015",
       "dom"