chore(deps): Update components to use new JSX transform (#11582)

* chore(deps): Update components to use new JSX transform

* rm import react from react in core

* fix tests broken in previous commit

* fix doc build errors

* fix bad merged file

* charts changes

* table changes

* code editor and fix build

* clean up multi import core components

* drag and drop changes

* react templates changes

* react integration and stragglers

* change no restricted imports eslint rule to error

* clean up some double imports

* rebase and review comments

* fix docs for merged chartlegend.md example

Author: mfrances17

eslint.config-md.mjs

@@ -30,7 +30,19 @@ export default [
       'react/jsx-uses-react': 'error',
       'react/jsx-uses-vars': 'error',
       'react/no-unknown-property': 'error',
-      'react/jsx-no-undef': 'error'
+      'react/jsx-no-undef': 'error',
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'react',
+              importNames: ['default'],
+              message: 'Please use named imports when importing from React.'
+            }
+          ]
+        }
+      ]
     }
   }
 ];

eslint.config.mjs

@@ -101,7 +101,7 @@ export default [
       'no-new-wrappers': 'error',
       'no-prototype-builtins': 'off',
       'no-restricted-imports': [
-        'warn',
+        'error',
         {
           paths: [
             {

packages/react-charts/src/victory/components/Chart/Chart.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Chart } from './Chart';
 import { ChartGroup } from '../ChartGroup/ChartGroup';

packages/react-charts/src/victory/components/Chart/Chart.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Children, cloneElement, isValidElement, useEffect } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
 /* eslint-disable camelcase */
@@ -30,7 +30,6 @@ import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } f
 import { getPaddingForSide } from '../ChartUtils/chart-padding';
 import { getPatternDefs, mergePatternData, useDefaultPatternProps } from '../ChartUtils/chart-patterns';
 import { getChartTheme } from '../ChartUtils/chart-theme-types';
-import { useEffect } from 'react';
 import { ChartLabel } from '../ChartLabel/ChartLabel';
 import { ChartPoint } from '../ChartPoint/ChartPoint';
 import { ChartThemeColor } from '../ChartTheme/ChartThemeColor';
@@ -69,7 +68,7 @@ export interface ChartProps extends VictoryChartProps {
    * The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the
    * Chart's style component includes background styles. The new element created from the passed backgroundComponent
    * will be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.
-   * All of these props on Background should take prececence over what VictoryChart is trying to set.
+   * All of these props on Background should take precedence over what VictoryChart is trying to set.
    */
   backgroundComponent?: React.ReactElement<any>;
   /**
@@ -152,7 +151,7 @@ export interface ChartProps extends VictoryChartProps {
    * events. The eventKey may optionally be used to select a single element by index rather than
    * an entire set. The eventHandlers object should be given as an object whose keys are standard
    * event names (i.e. onClick) and whose values are event callbacks. The return value
-   * of an event handler is used to modify elemnts. The return value should be given
+   * of an event handler is used to modify elements. The return value should be given
    * as an object or an array of objects with optional target and eventKey keys,
    * and a mutation key whose value is a function. The target and eventKey keys
    * will default to those corresponding to the element the event handler was attached to.
@@ -513,15 +512,15 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     containerComponent.props.labelComponent &&
     containerComponent.props.labelComponent.type.displayName === 'ChartLegendTooltip'
   ) {
-    labelComponent = React.cloneElement(containerComponent.props.labelComponent, {
+    labelComponent = cloneElement(containerComponent.props.labelComponent, {
       theme,
       ...(defaultPatternScale && { patternScale: defaultPatternScale }),
       ...containerComponent.props.labelComponent.props
     });
   }
 
   // Clone so users can override container props
-  const container = React.cloneElement(containerComponent, {
+  const container = cloneElement(containerComponent, {
     desc: ariaDesc,
     title: ariaTitle,
     theme,
@@ -536,22 +535,22 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     legendXOffset = getLegendMaxTextWidth(legendData, theme);
   }
 
-  const legend = React.cloneElement(legendComponent, {
+  const legend = cloneElement(legendComponent, {
     data: legendData,
     ...(name && { name: `${name}-${(legendComponent as any).type.displayName}` }),
     orientation: legendOrientation,
     theme,
     themeColor,
     ...(legendDirection === 'rtl' && {
       dataComponent: legendComponent.props.dataComponent ? (
-        React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
+        cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
       ) : (
         <ChartPoint transform={`translate(${legendXOffset})`} />
       )
     }),
     ...(legendDirection === 'rtl' && {
       labelComponent: legendComponent.props.labelComponent ? (
-        React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
+        cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
       ) : (
         <ChartLabel direction="rtl" dx={legendXOffset - 30} />
       )
@@ -570,7 +569,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     let legendTitleHeight = legend.props.title ? 10 : 0;
 
     // Adjust for axis label
-    React.Children.toArray(children).map((child: any) => {
+    Children.toArray(children).map((child: any) => {
       if (child.type.role === 'axis' && child.props.label && child.props.fixAxisLabelHeight) {
         xAxisLabelHeight = getLabelTextSize({ text: child.props.label, theme }).height + 10;
         legendTitleHeight = 0;
@@ -608,10 +607,10 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
 
   // Render children
   const renderChildren = () =>
-    React.Children.toArray(children).map((child, index) => {
-      if (React.isValidElement(child)) {
+    Children.toArray(children).map((child, index) => {
+      if (isValidElement(child)) {
         const { ...childProps } = child.props;
-        return React.cloneElement(child, {
+        return cloneElement(child, {
           colorScale,
           ...(defaultPatternScale && { patternScale: defaultPatternScale }),
           ...(name &&

packages/react-charts/src/victory/components/ChartArea/ChartArea.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ChartArea } from '../ChartArea/ChartArea';
 

packages/react-charts/src/victory/components/ChartArea/ChartArea.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { cloneElement } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import {
   AnimatePropTypeInterface,
@@ -129,7 +129,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    * Since ChartArea only renders a single element, the eventKey property is not used.
    * The eventHandlers object should be given as an object whose keys are standard
    * event names (i.e. onClick) and whose values are event callbacks. The return value
-   * of an event handler is used to modify elemnts. The return value should be given
+   * of an event handler is used to modify elements. The return value should be given
    * as an object or an array of objects with optional target and eventKey keys,
    * and a mutation key whose value is a function. The target and eventKey keys
    * will default to those corresponding to the element the event handler was attached to.
@@ -433,7 +433,7 @@ export const ChartArea: React.FunctionComponent<ChartAreaProps> = ({
   ...rest
 }: ChartAreaProps) => {
   // Clone so users can override container props
-  const container = React.cloneElement(containerComponent, {
+  const container = cloneElement(containerComponent, {
     theme,
     ...containerComponent.props
   });

packages/react-charts/src/victory/components/ChartArea/examples/ChartArea.md

@@ -11,7 +11,7 @@ propComponents: [
 ]
 hideDarkMode: true
 ---
-
+import { createRef } from 'react';
 import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts/victory';
 import { getResizeObserver } from '@patternfly/react-core';
 
@@ -23,7 +23,6 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 ## Examples
 ### Basic with right aligned legend
 ```js
-import React from 'react';
 import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
 
@@ -88,7 +87,6 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '
 This demonstrates how to combine cursor and voronoi containers to display tooltips along with a cursor.
 
 ```js
-import React from 'react';
 import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartLegendTooltip, createContainer } from '@patternfly/react-charts/victory';
 // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
 
@@ -172,15 +170,14 @@ class BottomAlignedLegend extends React.Component {
 
 ### Multi-color (unordered) bottom-left aligned legend and responsive container
 ```js
-import React from 'react';
 import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 import { getResizeObserver } from '@patternfly/react-core';
 // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
 
 class MultiColorChart extends React.Component {
   constructor(props) {
     super(props);
-    this.containerRef = React.createRef();
+    this.containerRef = createRef();
     this.observer = () => {};
     this.state = {
       width: 0

packages/react-charts/src/victory/components/ChartAxis/ChartAxis.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Chart } from '../Chart/Chart';
 import { ChartGroup } from '../ChartGroup/ChartGroup';

packages/react-charts/src/victory/components/ChartAxis/ChartAxis.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { cloneElement } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import {
   AnimatePropTypeInterface,
@@ -117,7 +117,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
    * single element by index rather than an entire set. The eventHandlers object
    * should be given as an object whose keys are standard event names (i.e. onClick)
    * and whose values are event callbacks. The return value of an event handler
-   * be used to modify other elemnts. The return value should be given as an object or
+   * be used to modify other elements. The return value should be given as an object or
    * an array of objects with optional target and eventKey keys, and a mutation
    * key whose value is a function. The target and eventKey keys will default to those
    * corresponding to the element the event handler was attached to. The mutation
@@ -458,13 +458,13 @@ export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
   const componentTheme = getComponentTheme(themeColor);
 
   // Clone so users can override container props
-  const container = React.cloneElement(containerComponent, {
+  const container = cloneElement(containerComponent, {
     theme,
     ...containerComponent.props
   });
 
   const getAxisLabelComponent = () =>
-    React.cloneElement(axisLabelComponent, {
+    cloneElement(axisLabelComponent, {
       ...(name && {
         id: () => `${name}-${(axisLabelComponent as any).type.displayName}`
       }),
@@ -473,7 +473,7 @@ export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
     });
 
   const getTickLabelComponent = () =>
-    React.cloneElement(tickLabelComponent, {
+    cloneElement(tickLabelComponent, {
       ...(name && {
         id: (props: any) => `${name}-${(tickLabelComponent as any).type.displayName}-${props.index}`
       }),

packages/react-charts/src/victory/components/ChartBar/ChartBar.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Chart } from '../Chart/Chart';
 import { ChartGroup } from '../ChartGroup/ChartGroup';

packages/react-charts/src/victory/components/ChartBar/ChartBar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { cloneElement } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import {
   AnimatePropTypeInterface,
@@ -169,7 +169,7 @@ export interface ChartBarProps extends VictoryBarProps {
    * The eventKey may optionally be used to select a single element by index rather than an entire
    * set. The eventHandlers object should be given as an object whose keys are standard
    * event names (i.e. onClick) and whose values are event callbacks. The return value
-   * of an event handler is used to modify elemnts. The return value should be given
+   * of an event handler is used to modify elements. The return value should be given
    * as an object or an array of objects with optional target and eventKey keys,
    * and a mutation key whose value is a function. The target and eventKey keys
    * will default to those corresponding to the element the event handler was attached to.
@@ -471,7 +471,7 @@ export const ChartBar: React.FunctionComponent<ChartBarProps> = ({
   ...rest
 }: ChartBarProps) => {
   // Clone so users can override container props
-  const container = React.cloneElement(containerComponent, {
+  const container = cloneElement(containerComponent, {
     theme,
     ...containerComponent.props
   });

packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md

@@ -22,7 +22,6 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 ### Basic with right aligned legend
 
 ```js
-import React from 'react';
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '250px', width: '600px' }}>
@@ -92,7 +91,6 @@ import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@
 This demonstrates an alternate way of applying tooltips using data labels.
 
 ```js
-import React from 'react';
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory';
 
 class EmbeddedLegend extends React.Component {
@@ -170,7 +168,6 @@ class EmbeddedLegend extends React.Component {
 This demonstrates zoom for both the x and y axis.
 
 ```js
-import React from 'react';
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-charts/victory';
 import { VictoryZoomContainer } from 'victory-zoom-container';
 
@@ -236,7 +233,6 @@ import { VictoryZoomContainer } from 'victory-zoom-container';
 ### Single with right aligned legend
 
 ```js
-import React from 'react';
 import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '250px', width: '600px' }}>
@@ -278,7 +274,6 @@ import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts
 A gnatt-like chart using `y` and `y0` data properties for alert start/end dates
 
 ```js
-import React from 'react';
 import {
   Chart,
   ChartAxis,

packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Chart } from '../Chart/Chart';
 import { ChartBoxPlot } from './ChartBoxPlot';

packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { cloneElement } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import {
   AnimatePropTypeInterface,
@@ -157,7 +157,7 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
    * The eventKey may optionally be used to select a single element by index rather than an entire
    * set. The eventHandlers object should be given as an object whose keys are standard
    * event names (i.e. onClick) and whose values are event callbacks. The return value
-   * of an event handler is used to modify elemnts. The return value should be given
+   * of an event handler is used to modify elements. The return value should be given
    * as an object or an array of objects with optional target and eventKey keys,
    * and a mutation key whose value is a function. The target and eventKey keys
    * will default to those corresponding to the element the event handler was attached to.
@@ -685,7 +685,7 @@ export const ChartBoxPlot: React.FunctionComponent<ChartBoxPlotProps> = ({
   ...rest
 }: ChartBoxPlotProps) => {
   // Clone so users can override container props
-  const container = React.cloneElement(containerComponent, {
+  const container = cloneElement(containerComponent, {
     theme,
     ...containerComponent.props
   });

packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md

@@ -25,7 +25,6 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 ## Examples
 ### Basic with right aligned legend
 ```js
-import React from 'react';
 import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '300px', width: '750px' }}>
@@ -67,7 +66,6 @@ import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/rea
 This demonstrates how to display labels.
 
 ```js
-import React from 'react';
 import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '300px', width: '600px' }}>
@@ -114,7 +112,6 @@ import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/rea
 This demonstrates how to embed a legend within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
 
 ```js
-import React from 'react';
 import { Chart, ChartAxis, ChartBoxPlot, ChartLegendTooltip, ChartThemeColor, ChartThreshold, createContainer } from '@patternfly/react-charts/victory';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 
@@ -216,7 +213,6 @@ class EmbeddedLegend extends React.Component {
 This demonstrates how to embed HTML within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
 
 ```js
-import React from 'react';
 import { Chart, ChartAxis, ChartBoxPlot, ChartCursorTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory';
 
 class EmbeddedHtml extends React.Component {

packages/react-charts/src/victory/components/ChartBullet/ChartBullet.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ChartAxis } from '../ChartAxis/ChartAxis';
 import { ChartLabel } from '../ChartLabel/ChartLabel';