refactor: apply eslint airbnb linting

sgratzl · Mar 2, 2021 · c98df55 · c98df55
1 parent da0bc33
commit c98df55
Show file tree

Hide file tree

Showing 120 changed files with 844 additions and 25,982 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -13,14 +13,19 @@ module.exports = {
     'prettier',
   ],
   parserOptions: {
-    project: './tsconfig.eslint.json',
+    project: './tsconfig.json',
   },
   settings: {
     react: {
       version: pkg.devDependencies.react ? 'detect' : '99.99.99',
     },
   },
   rules: {
+    'no-continue': 'off',
+    'react/require-default-props': 'off', // don't use in TypeScript
+    'react/jsx-props-no-spreading': 'off', // shorthand passing of props
+    'react/destructuring-assignment': 'off', // don't force destructuring
+    'no-nested-ternary': 'off',
     // '@typescript-eslint/explicit-module-boundary-types': 'off',
     // '@typescript-eslint/no-explicit-any': 'off',
     // '@typescript-eslint/no-non-null-assertion': 'off',

diff --git a/.yarnrc_patch.yml b/.yarnrc_patch.yml
@@ -18,3 +18,6 @@ packageExtensions:
   '@lineup-lite/table@*':
     peerDependencies:
       'react-refresh': '*'
+  'eslint-module-utils@*':
+    dependencies:
+      eslint-import-resolver-node: '*'
diff --git a/packages/components/.eslintrc.js b/packages/components/.eslintrc.js
@@ -0,0 +1,33 @@
+/* eslint-env node */
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const pkg = require('./package.json');
+
+module.exports = {
+  plugins: ['@typescript-eslint', 'prettier'],
+  extends: [
+    'airbnb-typescript',
+    'react-app',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'prettier',
+  ],
+  parserOptions: {
+    project: './tsconfig.eslint.json',
+  },
+  settings: {
+    react: {
+      version: pkg.devDependencies.react ? 'detect' : '99.99.99',
+    },
+  },
+  rules: {
+    'no-continue': 'off',
+    'react/require-default-props': 'off', // don't use in TypeScript
+    'react/jsx-props-no-spreading': 'off', // shorthand passing of props
+    'react/destructuring-assignment': 'off', // don't force destructuring
+    'no-nested-ternary': 'off',
+    // '@typescript-eslint/explicit-module-boundary-types': 'off',
+    // '@typescript-eslint/no-explicit-any': 'off',
+    // '@typescript-eslint/no-non-null-assertion': 'off',
+  },
+};
diff --git a/packages/components/src/components/BoxPlot.tsx b/packages/components/src/components/BoxPlot.tsx
@@ -12,6 +12,8 @@ import { FilterRangeWrapper, FilterRangeSliderProps } from './FilterRange';
 import type { CommonProps } from './common';
 import { clsx, useI18N } from './utils';
 
+export type { IBoxPlot } from '@sgratzl/boxplots';
+
 export const BOXPLOT_I18N_EN = {
   boxplotMinimum: 'Minimum: {0}',
   boxplot25Quantile: '25% Quantile: {0}',
@@ -69,7 +71,7 @@ function generatePath(
 function generateTitle(
   s: BoxPlotScaled,
   pre: Omit<IBoxPlot, 'items'> | undefined,
-  i18n: Record<keyof typeof BOXPLOT_I18N_EN, (...args: any[]) => string>
+  i18n: Record<keyof typeof BOXPLOT_I18N_EN, (...args: unknown[]) => string>
 ) {
   const p = (v: number) => `/${s.format(v)}`;
   return `${i18n.boxplotMinimum(`${s.format(s.min)}${pre ? p(pre.min) : ''}`)}
@@ -84,9 +86,8 @@ ${i18n.boxplotNrItems(`${s.count.toLocaleString()}${pre ? `/${pre.count.toLocale
 /**
  * renders a boxplot as a SVG chart
  */
-export function BoxPlotChart(props: BoxPlotChartProps) {
-  const s = props.s;
-  const pre = props.preFilter;
+export function BoxPlotChart(props: BoxPlotChartProps): JSX.Element {
+  const { s, preFilter: pre } = props;
   const i18n = useI18N(BOXPLOT_I18N_EN, props.i18n);
   const boxPadding = 2;
   const scale = useCallback((v: number) => Math.round(s.scale(v) * 1000) / 10, [s]);
@@ -154,8 +155,8 @@ export function BoxPlotChart(props: BoxPlotChartProps) {
 /**
  * renders a boxplot as a SVG chart
  */
-export function BoxPlotChartVertical(props: BoxPlotChartProps) {
-  const s = props.s;
+export function BoxPlotChartVertical(props: BoxPlotChartProps): JSX.Element {
+  const { s } = props;
   const pre = props.preFilter;
   const i18n = useI18N(BOXPLOT_I18N_EN, props.i18n);
   const boxPadding = 2;
@@ -242,7 +243,7 @@ export interface BoxPlotProps extends CommonProps {
 /**
  * renders a boxplot
  */
-export function BoxPlot(props: BoxPlotProps) {
+export function BoxPlot(props: BoxPlotProps): JSX.Element {
   return (
     <NumberStatsWrapper
       className={clsx('lt-boxplot', props.className)}
@@ -263,7 +264,7 @@ export type FilterRangeBoxPlotProps = BoxPlotProps &
 /**
  * renders a boxplot along with a range filter
  */
-export function FilterRangeBoxPlot(props: FilterRangeBoxPlotProps) {
+export function FilterRangeBoxPlot(props: FilterRangeBoxPlotProps): JSX.Element {
   return (
     <FilterRangeWrapper summary={props.summary} {...props} className={clsx('lt-boxplot', props.className)}>
       <BoxPlotChart {...props} className={clsx('lt-boxplot-wrapper', props.className)} />

diff --git a/packages/components/src/components/BoxPlotArray.tsx b/packages/components/src/components/BoxPlotArray.tsx
@@ -33,7 +33,7 @@ export interface BoxPlotArrayProps extends CommonProps {
   i18n?: BoxPlotProps['i18n'];
 }
 
-export function BoxPlotArray(props: BoxPlotArrayProps) {
+export function BoxPlotArray(props: BoxPlotArrayProps): JSX.Element {
   const f = props.format;
   const c = props.color;
   const scale = props.scale ?? defaultScale;
@@ -46,10 +46,11 @@ export function BoxPlotArray(props: BoxPlotArrayProps) {
       {(props.value ?? []).map((v, i) => {
         const s: BoxPlotScaled = {
           ...v,
-          format: typeof f !== 'function' ? toLocaleString : (v) => f(v, i),
-          color: typeof c === 'function' ? (v) => c(v, i) : defaultColorScale,
+          format: typeof f !== 'function' ? toLocaleString : (d: number) => f(d, i),
+          color: typeof c === 'function' ? (d: number) => c(d, i) : defaultColorScale,
           scale,
         };
+        // eslint-disable-next-line react/no-array-index-key
         return <BoxPlotChartVertical className="lt-heatmap-1d-cell" key={i} s={s} i18n={props.i18n} />;
       })}
     </div>

diff --git a/packages/components/src/components/CategoricalColor.tsx b/packages/components/src/components/CategoricalColor.tsx
@@ -24,7 +24,7 @@ export interface CategoricalColorProps extends CommonProps {
   format?: string | ((v: string) => string);
 }
 
-export function CategoricalColor(props: CategoricalColorProps) {
+export function CategoricalColor(props: CategoricalColorProps): JSX.Element {
   const title = format(props.value, props.format);
   return (
     <div

diff --git a/packages/components/src/components/DateLabel.tsx b/packages/components/src/components/DateLabel.tsx
@@ -23,7 +23,7 @@ export interface DateLabelProps extends CommonProps {
 /**
  * renders a date
  */
-export function DateLabel(props: DateLabelProps) {
+export function DateLabel(props: DateLabelProps): JSX.Element {
   const label = format(props.value, props.format ?? toLocaleString);
   return (
     <div className={clsx('lt-date', props.className)} style={props.style} title={label}>

diff --git a/packages/components/src/components/FilterRange.tsx b/packages/components/src/components/FilterRange.tsx
@@ -49,7 +49,7 @@ interface FilterRefData {
 function FilterRangeSlider<T>(props: FilterRangeSliderProps<T> & { refData: MutableRefObject<FilterRefData> }) {
   const { setFilter } = props;
   const { invert, scale } = props.s;
-  const filterValue = props.filterValue;
+  const { filterValue } = props;
   const [localFilter, setLocalFilter] = useState(filterValue ?? [null as T | null, null as T | null]);
   const filterRef = useRef(localFilter);
   filterRef.current = localFilter;
@@ -76,16 +76,21 @@ function FilterRangeSlider<T>(props: FilterRangeSliderProps<T> & { refData: Muta
       setFilter(v[0] == null && v[1] == null ? undefined : v);
     };
     const onMinMouseUp = () => {
-      ueber!.removeEventListener('mousemove', onMinMouseMove);
-      ueber!.removeEventListener('mouseleave', onMinMouseUp);
-      ueber!.removeEventListener('mouseup', onMinMouseUp);
+      if (!ueber) {
+        return;
+      }
+      ueber.removeEventListener('mousemove', onMinMouseMove);
+      ueber.removeEventListener('mouseleave', onMinMouseUp);
+      ueber.removeEventListener('mouseup', onMinMouseUp);
       ueber = null;
     };
 
     return (evt: RMouseEvent<HTMLElement>) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const bb = evt.currentTarget.parentElement!.parentElement!.getBoundingClientRect();
       base = bb.x;
       width = bb.width;
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       ueber = evt.currentTarget.closest('body')!;
       ueber.addEventListener('mousemove', onMinMouseMove);
       ueber.addEventListener('mouseleave', onMinMouseUp);
@@ -105,16 +110,21 @@ function FilterRangeSlider<T>(props: FilterRangeSliderProps<T> & { refData: Muta
       setFilter(v[0] == null && v[1] == null ? undefined : v);
     };
     const onMinMouseUp = () => {
-      ueber!.removeEventListener('mousemove', onMinMouseMove);
-      ueber!.removeEventListener('mouseleave', onMinMouseUp);
-      ueber!.removeEventListener('mouseup', onMinMouseUp);
+      if (!ueber) {
+        return;
+      }
+      ueber.removeEventListener('mousemove', onMinMouseMove);
+      ueber.removeEventListener('mouseleave', onMinMouseUp);
+      ueber.removeEventListener('mouseup', onMinMouseUp);
       ueber = null;
     };
 
     return (evt: RMouseEvent<HTMLElement>) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const bb = evt.currentTarget.parentElement!.parentElement!.getBoundingClientRect();
       base = bb.x;
       width = bb.width;
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       ueber = evt.currentTarget.closest('body')!;
       ueber.addEventListener('mousemove', onMinMouseMove);
       ueber.addEventListener('mouseleave', onMinMouseUp);
@@ -151,6 +161,7 @@ function FilterRangeSlider<T>(props: FilterRangeSliderProps<T> & { refData: Muta
     },
     [setFilter, setLocalFilter, filterRef, invert, scale]
   );
+  // eslint-disable-next-line no-param-reassign
   props.refData.current = {
     clearFilter,
     setShortCutFilter,
@@ -162,14 +173,14 @@ function FilterRangeSlider<T>(props: FilterRangeSliderProps<T> & { refData: Muta
         title={localFilter[0] == null ? undefined : i18n.filterRangeMinFilter(props.s.format(localFilter[0]))}
         style={{ width: toPercent(localFilter[0] == null ? 0 : Math.max(0, props.s.scale(localFilter[0]))) }}
       >
-        <div className="lt-filter-range-drag" onMouseDown={onMinMouseDown} />
+        <div className="lt-filter-range-drag" onMouseDown={onMinMouseDown} role="presentation" />
       </div>
       <div
         className="lt-filter-range lt-filter-range-max"
         title={localFilter[1] == null ? undefined : i18n.filterRangeMaxFilter(props.s.format(localFilter[1]))}
         style={{ width: toPercent(localFilter[1] == null ? 0 : Math.max(0, 1 - props.s.scale(localFilter[1]))) }}
       >
-        <div className="lt-filter-range-drag" onMouseDown={onMaxMouseDown} />
+        <div className="lt-filter-range-drag" onMouseDown={onMaxMouseDown} role="presentation" />
       </div>
     </>
   );
@@ -183,7 +194,7 @@ export function FilterRangeWrapper<T>(
     } & FilterRangeSliderProps<T> &
       CommonProps
   >
-) {
+): JSX.Element {
   const refData = useRef({ clearFilter() {}, setShortCutFilter() {} } as FilterRefData);
   const clearFilter = useCallback(() => refData.current.clearFilter(), [refData]);
   const setShortCutFilter = useCallback((evt: RMouseEvent<HTMLElement>) => refData.current.setShortCutFilter(evt), [
@@ -197,6 +208,7 @@ export function FilterRangeWrapper<T>(
       data-max={props.s.max != null && props.summary ? props.s.format(props.s.max) : null}
       onDoubleClick={clearFilter}
       onClick={setShortCutFilter}
+      role="presentation"
       style={props.style}
     >
       {props.children}

diff --git a/packages/components/src/components/HeatMap1D.tsx b/packages/components/src/components/HeatMap1D.tsx
@@ -32,7 +32,7 @@ export interface HeatMap1DProps extends CommonProps {
 /**
  * renders a numeric 1d heatmap
  */
-export function HeatMap1D(props: HeatMap1DProps) {
+export function HeatMap1D(props: HeatMap1DProps): JSX.Element {
   return (
     <div
       className={clsx('lt-heatmap-1d', props.className)}
@@ -44,6 +44,7 @@ export function HeatMap1D(props: HeatMap1DProps) {
         const normalized = typeof props.scale === 'function' && v != null ? props.scale(v) : v;
         const color = typeof props.color === 'string' ? props.color : (props.color ?? defaultColorScale)(normalized, i);
         return (
+          // eslint-disable-next-line react/no-array-index-key
           <div key={i} className="lt-heatmap-1d-cell" title={label} style={{ backgroundColor: color }}>
             <span aria-hidden="false">{label}</span>
           </div>