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
patternfly · Aug 8, 2023 · 9ad092d · 9ad092d
1 parent c797be9
commit 9ad092d
Show file tree

Hide file tree

Showing 263 changed files with 974 additions and 797 deletions.
diff --git a/.eslintrc.json b/.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"

diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/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,

diff --git a/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx b/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,

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx b/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.

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx b/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,

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx b/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';
 

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx b/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.

diff --git a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts b/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

diff --git a/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx b/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';
 
 /**

diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/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';
 

diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx b/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';
 

diff --git a/packages/react-charts/src/components/ChartPie/ChartPie.tsx b/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,

diff --git a/packages/react-charts/src/components/ChartPoint/path-helpers.ts b/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}`;

diff --git a/packages/react-charts/src/components/ChartTheme/themes/color-theme.ts b/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

diff --git a/packages/react-charts/src/components/ChartUtils/chart-domain.ts b/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,

diff --git a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts b/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);
       }

diff --git a/packages/react-charts/src/components/ChartUtils/chart-legend.ts b/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;
     }

diff --git a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx b/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;
 };
 

diff --git a/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts b/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';
 

diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/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)

diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/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 };
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
@@ -4,16 +4,16 @@ 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', () => {

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx b/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);
   };

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx b/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);
   };

diff --git a/...ges/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/...ges/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>

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx b/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);
   };

diff --git a/packages/react-core/src/components/AboutModal/AboutModal.tsx b/packages/react-core/src/components/AboutModal/AboutModal.tsx
@@ -90,7 +90,7 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
           <AboutModalBox
             style={
               backgroundImageSrc
-                ? { [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties
+                ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties)
                 : {}
             }
             className={css(className)}
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,7 +67,6 @@ interface ChartBulletSizeInterface { @@
       width: number; // The chart width -- not SVG width
     }
     /**
      * Scale size per the given size properties
      * @private
@@ Expand Down @@