wip: migrate code away from default imports

Signed-off-by: Jon Koops <[email protected]>

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,5 @@
-import * as React from 'react';
+import { ReactElement, ReactNode, FunctionComponent, cloneElement, Children, isValidElement, useEffect } from 'react';
+
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
 /* eslint-disable camelcase */
@@ -30,7 +31,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';
@@ -71,11 +71,11 @@ export interface ChartProps extends VictoryChartProps {
    * 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.
    */
-  backgroundComponent?: React.ReactElement;
+  backgroundComponent?: ReactElement;
   /**
    * The children to render with the chart
    */
-  children?: React.ReactNode | React.ReactNode[];
+  children?: ReactNode | ReactNode[];
   /**
    * The containerComponent prop takes an entire component which will be used to
    * create a container element for standalone charts.
@@ -91,7 +91,7 @@ export interface ChartProps extends VictoryChartProps {
    *
    * @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
    */
-  containerComponent?: React.ReactElement<any>;
+  containerComponent?: ReactElement<any>;
   /**
    * Note: This prop should not be set manually.
    *
@@ -199,7 +199,7 @@ export interface ChartProps extends VictoryChartProps {
    * create group elements for use within container elements. This prop defaults
    * to a <g> tag on web, and a react-native-svg <G> tag on mobile
    */
-  groupComponent?: React.ReactElement<any>;
+  groupComponent?: ReactElement<any>;
   /**
    * The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.
    * SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected
@@ -255,7 +255,7 @@ export interface ChartProps extends VictoryChartProps {
    * Note: Use legendData so the legend width can be calculated and positioned properly.
    * Default legend properties may be applied
    */
-  legendComponent?: React.ReactElement<any>;
+  legendComponent?: ReactElement<any>;
   /**
    * Specify data via the data prop. ChartLegend expects data as an
    * array of objects with name (required), symbol, and labels properties.
@@ -468,7 +468,7 @@ export interface ChartProps extends VictoryChartProps {
   width?: number;
 }
 
-export const Chart: React.FunctionComponent<ChartProps> = ({
+export const Chart: FunctionComponent<ChartProps> = ({
   ariaDesc,
   ariaTitle,
   children,
@@ -513,15 +513,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 +536,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 +570,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 +608,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 { ReactElement, FunctionComponent, cloneElement } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import {
   AnimatePropTypeInterface,
@@ -67,7 +67,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    *
    * @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows..." />
    */
-  containerComponent?: React.ReactElement<any>;
+  containerComponent?: ReactElement<any>;
   /**
    * The data prop specifies the data to be plotted. Data should be in the form of an array
    * of data points, or an array of arrays of data points for multiple datasets.
@@ -89,7 +89,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    * or modified or ignored within the custom component itself. If a dataComponent is
    * not provided, ChartArea will use its default Area component.
    */
-  dataComponent?: React.ReactElement<any>;
+  dataComponent?: ReactElement<any>;
   /**
    * The domain prop describes the range of values your chart will cover. This prop can be
    * given as a array of the minimum and maximum expected values for your bar chart,
@@ -173,7 +173,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    * create group elements for use within container elements. This prop defaults
    * to a <g> tag on web, and a react-native-svg <G> tag on mobile
    */
-  groupComponent?: React.ReactElement<any>;
+  groupComponent?: ReactElement<any>;
   /**
    * The height props specifies the height the svg viewBox of the chart container.
    * This value should be given as a number of pixels
@@ -205,7 +205,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    * provide a series label for ChartArea. If individual labels are required for each
    * data point, they should be created by composing ChartArea with VictoryScatter
    */
-  labelComponent?: React.ReactElement<any>;
+  labelComponent?: ReactElement<any>;
   /**
    * The labels prop defines labels that will appear above each bar in your chart.
    * This prop should be given as an array of values or as a function of data.
@@ -423,7 +423,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
   y0?: DataGetterPropType;
 }
 
-export const ChartArea: React.FunctionComponent<ChartAreaProps> = ({
+export const ChartArea: FunctionComponent<ChartAreaProps> = ({
   containerComponent = <ChartContainer />,
   themeColor,
 
@@ -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/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 { ReactElement, CSSProperties, FunctionComponent, cloneElement } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import {
   AnimatePropTypeInterface,
@@ -44,7 +44,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
    * or modified or ignored within the custom component itself. If an axisComponent
    * is not supplied, ChartAxis will render its default AxisLine component.
    */
-  axisComponent?: React.ReactElement<any>;
+  axisComponent?: ReactElement<any>;
   /**
    * The axisLabelComponent prop takes in an entire component which will be used
    * to create the axis label. The new element created from the passed axisLabelComponent
@@ -54,7 +54,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
    * the custom component itself. If an axisLabelComponent is not supplied, a new
    * ChartLabel will be created with props described above
    */
-  axisLabelComponent?: React.ReactElement<any>;
+  axisLabelComponent?: ReactElement<any>;
   /**
    * The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when
    * dependent axes should line up with values on the independent axis.
@@ -75,7 +75,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
    *
    * @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
    */
-  containerComponent?: React.ReactElement<any>;
+  containerComponent?: ReactElement<any>;
   /**
    * This prop specifies whether a given axis is intended to cross another axis.
    */
@@ -175,13 +175,13 @@ export interface ChartAxisProps extends VictoryAxisProps {
    * or modified or ignored within the custom component itself. If a gridComponent
    * is not supplied, ChartAxis will render its default GridLine component.
    */
-  gridComponent?: React.ReactElement<any>;
+  gridComponent?: ReactElement<any>;
   /**
    * The groupComponent prop takes an entire component which will be used to
    * create group elements for use within container elements. This prop defaults
    * to a <g> tag on web, and a react-native-svg <G> tag on mobile
    */
-  groupComponent?: React.ReactElement<any>;
+  groupComponent?: ReactElement<any>;
   /**
    * Specifies the height the svg viewBox of the chart container. This value should be given as a
    * number of pixels.
@@ -354,19 +354,19 @@ export interface ChartAxisProps extends VictoryAxisProps {
    */
   style?: {
     parent?: {
-      [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number);
+      [K in keyof CSSProperties]: string | number | ((tick?: any) => string | number);
     };
     axis?: {
-      [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number);
+      [K in keyof CSSProperties]: string | number | ((tick?: any) => string | number);
     };
     axisLabel?: {
-      [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number);
+      [K in keyof CSSProperties]: string | number | ((tick?: any) => string | number);
     };
     grid?: {
-      [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number);
+      [K in keyof CSSProperties]: string | number | ((tick?: any) => string | number);
     };
     ticks?: {
-      [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number);
+      [K in keyof CSSProperties]: string | number | ((tick?: any) => string | number);
     };
     tickLabels?: {
       [K in keyof LabelProps]: string | number | ((tick?: any) => string | number);
@@ -398,7 +398,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
    * or modified or ignored within the custom component itself. If a tickComponent
    * is not supplied, ChartAxis will render its default Tick component.
    */
-  tickComponent?: React.ReactElement<any>;
+  tickComponent?: ReactElement<any>;
   /**
    * The tickCount prop specifies approximately how many ticks should be drawn on the axis if
    * tickValues are not explicitly provided. This value is calculated by d3 scale and
@@ -424,7 +424,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
    * the custom component itself. If an tickLabelComponent is not supplied, a new
    * ChartLabel will be created with props described above
    */
-  tickLabelComponent?: React.ReactElement<any>;
+  tickLabelComponent?: ReactElement<any>;
   /**
    * The tickValues prop explicitly specifies which tick values to draw on the axis.
    *
@@ -444,7 +444,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
   width?: number;
 }
 
-export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
+export const ChartAxis: FunctionComponent<ChartAxisProps> = ({
   axisLabelComponent = <ChartLabel />,
   containerComponent = <ChartContainer />,
   name,
@@ -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 { ReactElement, FunctionComponent, cloneElement } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import {
   AnimatePropTypeInterface,
@@ -89,7 +89,7 @@ export interface ChartBarProps extends VictoryBarProps {
    *
    * @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows..." />
    */
-  containerComponent?: React.ReactElement<any>;
+  containerComponent?: ReactElement<any>;
   /**
    * The cornerRadius prop specifies a radius to apply to each bar.
    * If this prop is given as a single number, the radius will only be applied to the top of each bar.
@@ -129,7 +129,7 @@ export interface ChartBarProps extends VictoryBarProps {
    * or modified or ignored within the custom component itself. If a dataComponent is
    * not provided, ChartBar will use its default Bar component.
    */
-  dataComponent?: React.ReactElement<any>;
+  dataComponent?: ReactElement<any>;
   /**
    * The domain prop describes the range of values your chart will cover. This prop can be
    * given as a array of the minimum and maximum expected values for your bar chart,
@@ -216,7 +216,7 @@ export interface ChartBarProps extends VictoryBarProps {
    * create group elements for use within container elements. This prop defaults
    * to a <g> tag on web, and a react-native-svg <G> tag on mobile
    */
-  groupComponent?: React.ReactElement<any>;
+  groupComponent?: ReactElement<any>;
   /**
    * The height props specifies the height the svg viewBox of the chart container.
    * This value should be given as a number of pixels
@@ -239,7 +239,7 @@ export interface ChartBarProps extends VictoryBarProps {
    * provide a series label for ChartBar. If individual labels are required for each
    * data point, they should be created by composing ChartBar with VictoryScatter
    */
-  labelComponent?: React.ReactElement<any>;
+  labelComponent?: ReactElement<any>;
   /**
    * The labels prop defines labels that will appear above each bar in your chart.
    * This prop should be given as an array of values or as a function of data.
@@ -462,7 +462,7 @@ export interface ChartBarProps extends VictoryBarProps {
   y0?: DataGetterPropType;
 }
 
-export const ChartBar: React.FunctionComponent<ChartBarProps> = ({
+export const ChartBar: FunctionComponent<ChartBarProps> = ({
   containerComponent = <ChartContainer />,
   themeColor,
 
@@ -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
   });