chore(build): address linting rule violations (patternfly#9396)

* WIP ESlint errors

fix styling

test errors

disable rule

enable rule

try moving export

update class component exports

fix table export

fix test

fix linting errors

PR feedback from Eric

* revert remove displayName and fix lint issues

* fix lint error in test

.eslintrc.json

@@ -106,9 +106,9 @@
             "never"
         ],
         "patternfly-react/import-tokens-icons": "error",
-        "patternfly-react/no-anonymous-functions": "off",
+        "patternfly-react/no-anonymous-functions": "error",
         "prefer-const": "error",
-        "prettier/prettier": "off",
+        "prettier/prettier": "error",
         "radix": [
             "error",
             "as-needed"

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

@@ -24,13 +24,13 @@ import { ChartContainer } from '../ChartContainer/ChartContainer';
 import { ChartLegend } from '../ChartLegend/ChartLegend';
 import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
-import { getClassName } from "../ChartUtils/chart-helpers";
-import { getLabelTextSize } from "../ChartUtils/chart-label";
-import { getComputedLegend, getLegendItemsExtraHeight } from "../ChartUtils/chart-legend";
-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 { getClassName } from '../ChartUtils/chart-helpers';
+import { getLabelTextSize } from '../ChartUtils/chart-label';
+import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend';
+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';
 
 /**
  * Chart is a wrapper component that reconciles the domain for all its children, controls the layout of the chart,

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

@@ -16,7 +16,8 @@ import {
   SortOrderPropType,
   StringOrNumberOrCallback,
   StringOrNumberOrList,
-  VictoryStyleInterface, OrientationTypes
+  VictoryStyleInterface,
+  OrientationTypes
 } from 'victory-core';
 import {
   VictoryBoxPlot,

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

@@ -17,7 +17,7 @@ import { ChartLegend } from '../ChartLegend/ChartLegend';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
 import { ChartBulletStyles } from '../ChartTheme/ChartStyles';
-import { getComputedLegend, getLegendItemsExtraHeight } from "../ChartUtils/chart-legend";
+import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend';
 import { ChartBulletComparativeErrorMeasure } from './ChartBulletComparativeErrorMeasure';
 import { ChartBulletComparativeMeasure } from './ChartBulletComparativeMeasure';
 import { ChartBulletComparativeWarningMeasure } from './ChartBulletComparativeWarningMeasure';
@@ -27,8 +27,8 @@ import { ChartBulletPrimarySegmentedMeasure } from './ChartBulletPrimarySegmente
 import { ChartBulletQualitativeRange } from './ChartBulletQualitativeRange';
 import { getBulletDomain } from './utils/chart-bullet-domain';
 import { getBulletThemeWithLegendColorScale } from './utils/chart-bullet-theme';
-import { getPaddingForSide } from "../ChartUtils/chart-padding";
-import { useEffect } from "react";
+import { getPaddingForSide } from '../ChartUtils/chart-padding';
+import { useEffect } from 'react';
 
 /**
  * ChartBullet renders a dataset as a bullet chart.

packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx

@@ -163,7 +163,9 @@ export interface ChartBulletComparativeWarningMeasureProps {
   y?: DataGetterPropType;
 }
 
-export const ChartBulletComparativeWarningMeasure: React.FunctionComponent<ChartBulletComparativeWarningMeasureProps> = ({
+export const ChartBulletComparativeWarningMeasure: React.FunctionComponent<
+  ChartBulletComparativeWarningMeasureProps
+> = ({
   allowTooltip = true,
   ariaDesc,
   ariaTitle,

packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx

@@ -4,11 +4,7 @@ import { ChartContainer } from '../ChartContainer/ChartContainer';
 import { ChartLabel } from '../ChartLabel/ChartLabel';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { ChartBulletStyles } from '../ChartTheme/ChartStyles';
-import {
-  getLabelTextSize,
-  getBulletLabelX,
-  getBulletLabelY
-} from '../ChartUtils/chart-label';
+import { getLabelTextSize, getBulletLabelX, getBulletLabelY } from '../ChartUtils/chart-label';
 import { getPaddingForSide } from '../ChartUtils/chart-padding';
 import { getBulletGroupTitleTheme } from '../ChartUtils/chart-theme-types';
 

packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx

@@ -8,7 +8,10 @@ import { ChartContainer } from '../ChartContainer/ChartContainer';
 import { ChartBulletStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
-import { getBulletPrimaryNegativeMeasureTheme, getBulletPrimarySegmentedMeasureTheme } from '../ChartUtils/chart-theme-types';
+import {
+  getBulletPrimaryNegativeMeasureTheme,
+  getBulletPrimarySegmentedMeasureTheme
+} from '../ChartUtils/chart-theme-types';
 
 /**
  * ChartBulletPrimarySegmentedMeasure renders a dataset as the primary segmented measure.

packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts

@@ -67,7 +67,6 @@ interface ChartBulletSizeInterface {
   width: number; // The chart width -- not SVG width
 }
 
-
 /**
  * Scale size per the given size properties
  * @private

packages/react-charts/src/components/ChartGroup/ChartGroup.tsx

@@ -22,11 +22,7 @@ import { VictoryGroup, VictoryGroupProps, VictoryGroupTTargetType } from 'victor
 import { ChartContainer } from '../ChartContainer/ChartContainer';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { getClassName } from '../ChartUtils/chart-helpers';
-import {
-  useDefaultPatternProps,
-  getPatternDefs,
-  renderChildrenWithPatterns
-} from '../ChartUtils/chart-patterns';
+import { useDefaultPatternProps, getPatternDefs, renderChildrenWithPatterns } from '../ChartUtils/chart-patterns';
 import { getTheme } from '../ChartUtils/chart-theme';
 
 /**

packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx

@@ -18,7 +18,7 @@ import {
   getLegendTooltipDataProps,
   getLegendTooltipSize,
   getLegendTooltipVisibleData,
-  getLegendTooltipVisibleText,
+  getLegendTooltipVisibleText
 } from '../ChartUtils/chart-tooltip';
 import { getTheme } from '../ChartUtils/chart-theme';
 

packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx

@@ -11,7 +11,7 @@ import {
   getLegendTooltipDataProps,
   getLegendTooltipSize,
   getLegendTooltipVisibleData,
-  getLegendTooltipVisibleText,
+  getLegendTooltipVisibleText
 } from '../ChartUtils/chart-tooltip';
 import { getTheme } from '../ChartUtils/chart-theme';
 

packages/react-charts/src/components/ChartPie/ChartPie.tsx

@@ -28,10 +28,10 @@ import { ChartLegend } from '../ChartLegend/ChartLegend';
 import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
-import { getComputedLegend, getLegendItemsExtraHeight } from "../ChartUtils/chart-legend";
-import { getPaddingForSide } from "../ChartUtils/chart-padding";
-import { getPatternDefs, useDefaultPatternProps, } from "../ChartUtils/chart-patterns";
-import { getTheme } from "../ChartUtils/chart-theme";
+import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend';
+import { getPaddingForSide } from '../ChartUtils/chart-padding';
+import { getPatternDefs, useDefaultPatternProps } from '../ChartUtils/chart-patterns';
+import { getTheme } from '../ChartUtils/chart-theme';
 import { useEffect } from 'react';
 
 /**
@@ -512,9 +512,7 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
   theme = getTheme(themeColor),
   labelComponent = allowTooltip ? (
     <ChartTooltip constrainToVisibleArea={constrainToVisibleArea} theme={theme} />
-  ) : (
-    undefined
-  ),
+  ) : undefined,
   legendOrientation = theme.legend.orientation as any,
   height = theme.pie.height,
   width = theme.pie.width,

packages/react-charts/src/components/ChartPoint/path-helpers.ts

@@ -104,7 +104,7 @@ export const PathHelpers: PathHelpersInterface = {
   star: (x: number, y: number, size: number) => {
     const baseSize = 1.35 * size;
     const angle = Math.PI / 5;
-    const starCoords = [...Array(10).keys()].map(index => {
+    const starCoords = [...Array(10).keys()].map((index) => {
       const length = index % 2 === 0 ? baseSize : baseSize / 2;
       return `${length * Math.sin(angle * (index + 1)) + x},
         ${length * Math.cos(angle * (index + 1)) + y}`;

packages/react-charts/src/components/ChartTheme/themes/color-theme.ts

@@ -33,12 +33,12 @@ export const ColorTheme = (props: ColorThemeInterface) => {
       colorScale: COLOR_SCALE,
       style: {
         q1: {
-          fill: COLOR_SCALE[0],
+          fill: COLOR_SCALE[0]
         },
         q3: {
-          fill: COLOR_SCALE[0],
-        },
-      },
+          fill: COLOR_SCALE[0]
+        }
+      }
     },
     candlestick: {
       colorScale: COLOR_SCALE

packages/react-charts/src/components/ChartUtils/chart-domain.ts

@@ -105,7 +105,7 @@ export const getDomain = ({ data, maxDomain, minDomain, x, y }: DomainInterface)
  */
 export const getDomains = ({ maxDomain, minDomain, sources }: SourcesInterface): ChartDomain => {
   const domains: ChartDomain[] = [];
-  sources.forEach(source => {
+  sources.forEach((source) => {
     const { data: compData = source.data } = source.component ? source.component.props : undefined;
     const domain = getDomain({
       data: compData,

packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts

@@ -29,7 +29,7 @@ const getChildNames = ({ chartNames, omitIndex }: ChartInteractiveLegendExtInter
   chartNames.forEach((chartName: any, index: number) => {
     if (index !== omitIndex) {
       if (Array.isArray(chartName)) {
-        chartName.forEach(name => result.push(name));
+        chartName.forEach((name) => result.push(name));
       } else {
         result.push(chartName);
       }

packages/react-charts/src/components/ChartUtils/chart-legend.ts

@@ -492,7 +492,7 @@ const getMaxLegendTextSize = ({ legendData, theme }: ChartLegendTextMaxSizeInter
   }
 
   let result = '';
-  legendData.forEach(data => {
+  legendData.forEach((data) => {
     if (data.name && data.name.length > result.length) {
       result = data.name;
     }

packages/react-charts/src/components/ChartUtils/chart-patterns.tsx

@@ -250,9 +250,13 @@ export const getPatternDefs = ({
     <React.Fragment key={`defs`}>
       <defs>
         {colorScale.map((color: string, index: number) => {
-          const { d, fill, stroke = color, strokeWidth, ...rest } = defaultPatterns[
-            (index + offset) % defaultPatterns.length
-          ];
+          const {
+            d,
+            fill,
+            stroke = color,
+            strokeWidth,
+            ...rest
+          } = defaultPatterns[(index + offset) % defaultPatterns.length];
           const id = getPatternDefsId(patternId, index);
           return (
             <pattern id={id} key={id} {...rest}>
@@ -281,7 +285,7 @@ const getDefaultColorScale = (colorScale: string[], themeColorScale: string[]) =
   const result: string[] = [];
   const colors = colorScale ? colorScale : themeColorScale;
 
-  colors.forEach(val => result.push(val));
+  colors.forEach((val) => result.push(val));
   return result;
 };
 

packages/react-charts/src/components/ChartUtils/chart-theme-types.ts

@@ -17,7 +17,7 @@ import {
   ChartDonutUtilizationStaticTheme,
   ChartDonutThresholdDynamicTheme,
   ChartDonutThresholdStaticTheme,
-  ChartThresholdTheme,
+  ChartThresholdTheme
 } from '../ChartTheme/ChartThemeTypes';
 import { getTheme, getCustomTheme } from './chart-theme';
 

packages/react-charts/src/components/ChartUtils/chart-tooltip.ts

@@ -184,7 +184,7 @@ export const getLegendTooltipSize = ({
   });
 
   // Replace whitespace with spacer char for consistency in width
-  const formattedData = data.map(val => ({
+  const formattedData = data.map((val) => ({
     name: val.name.replace(/ /g, spacer)
   }));
 
@@ -231,7 +231,7 @@ export const getLegendTooltipVisibleData = ({
     let index = -1;
     for (let i = 0; i < legendData.length; i++) {
       const data = legendData[i];
-      const activePoint = activePoints ? activePoints.find(item => item.childName === data.childName) : '';
+      const activePoint = activePoints ? activePoints.find((item) => item.childName === data.childName) : '';
       if (
         !activePoint ||
         (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var)
@@ -273,7 +273,7 @@ export const getLegendTooltipVisibleText = ({
   if (legendData) {
     let index = -1;
     for (const data of legendData) {
-      const activePoint = activePoints ? activePoints.find(item => item.childName === data.childName) : '';
+      const activePoint = activePoints ? activePoints.find((item) => item.childName === data.childName) : '';
       if (
         !activePoint ||
         (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var)

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -230,7 +230,7 @@ interface CodeEditorState {
   copied: boolean;
 }
 
-export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
+class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
   static displayName = 'CodeEditor';
   private editor: editor.IStandaloneCodeEditor | null = null;
   private wrapperRef = React.createRef<HTMLDivElement>();
@@ -668,3 +668,5 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
     );
   }
 }
+
+export { CodeEditor };

packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx

@@ -4,21 +4,21 @@ import { CodeEditor, Language } from '../CodeEditor';
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation(query => ({
+  value: jest.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
     onchange: null,
     addListener: jest.fn(), // Deprecated
     removeListener: jest.fn(), // Deprecated
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
+    dispatchEvent: jest.fn()
+  }))
 });
 
 describe('CodeEditor', () => {
   beforeAll(() => {
-    window.HTMLCanvasElement.prototype.getContext = () => ({} as any);
+    window.HTMLCanvasElement.prototype.getContext = () => ({}) as any;
   });
 
   test('matches snapshot without props', () => {

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx

@@ -8,17 +8,17 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
   const [isReadOnly, setIsReadOnly] = React.useState(false);
   const [isMinimapVisible, setIsMinimapVisible] = React.useState(false);
 
-  const toggleDarkTheme = checked => {
+  const toggleDarkTheme = (checked) => {
     setIsDarkTheme(checked);
   };
 
-  const toggleLineNumbers = checked => {
+  const toggleLineNumbers = (checked) => {
     setIsLineNumbersVisible(checked);
   };
-  const toggleReadOnly = checked => {
+  const toggleReadOnly = (checked) => {
     setIsReadOnly(checked);
   };
-  const toggleMinimap = checked => {
+  const toggleMinimap = (checked) => {
     setIsMinimapVisible(checked);
   };
 
@@ -30,7 +30,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
   };
 
-  const onChange = value => {
+  const onChange = (value) => {
     // eslint-disable-next-line no-console
     console.log(value);
   };

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx

@@ -5,11 +5,11 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 export const CodeEditorCustomControl: React.FunctionComponent = () => {
   const [code, setCode] = React.useState('');
 
-  const onChange = code => {
+  const onChange = (code) => {
     setCode(code);
   };
 
-  const onExecuteCode = code => {
+  const onExecuteCode = (code) => {
     // eslint-disable-next-line no-console
     console.log(code);
   };

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx

@@ -11,7 +11,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
   };
 
-  const onChange = value => {
+  const onChange = (value) => {
     // eslint-disable-next-line no-console
     console.log(value);
   };
@@ -41,7 +41,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
           <React.Fragment key={index}>
             <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
               {shortcut.keys
-                .map(key => (
+                .map((key) => (
                   <Chip key={key} isReadOnly>
                     {key}
                   </Chip>

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx

@@ -10,7 +10,7 @@ export const CodeEditorSizeToFit: React.FunctionComponent = () => {
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
   };
 
-  const onChange = value => {
+  const onChange = (value) => {
     // eslint-disable-next-line no-console
     console.log(value);
   };