REMOVE tslint, and use eslint for everything

.eslintrc.js

@@ -1,6 +1,7 @@
 const error = 2;
 const warn = 1;
 const ignore = 0;
+
 module.exports = {
   root: true,
   extends: [
@@ -34,7 +35,7 @@ module.exports = {
   settings: {
     'import/core-modules': ['enzyme'],
     'import/ignore': ['node_modules\\/(?!@storybook)'],
-    'import/resolver': { node: { extensions: ['.js', '.ts'] } },
+    'import/resolver': { node: { extensions: ['.js', '.ts', '.tsx', '.mjs'] } },
     'html/html-extensions': ['.html'],
   },
   rules: {
@@ -47,6 +48,7 @@ module.exports = {
       {
         js: 'never',
         ts: 'never',
+        tsx: 'never',
         mjs: 'never',
       },
     ],
@@ -59,11 +61,11 @@ module.exports = {
           '**/example/**',
           '*.js',
           '**/*.test.js',
-          '**/*.stories.js',
+          '**/*.stories.*',
           '**/scripts/*.js',
           '**/stories/**/*.js',
           '**/__tests__/**/*.js',
-          '**/.storybook/**/*.js',
+          '**/.storybook/**/*.*',
         ],
         peerDependencies: true,
       },
@@ -111,13 +113,21 @@ module.exports = {
       error,
       { allow: ['__STORYBOOK_CLIENT_API__', '__STORYBOOK_ADDONS_CHANNEL__'] },
     ],
+    '@typescript-eslint/no-var-requires': ignore,
+    '@typescript-eslint/camelcase': ignore,
+    '@typescript-eslint/no-unused-vars': ignore,
+    '@typescript-eslint/explicit-member-accessibility': ignore,
+    '@typescript-eslint/explicit-function-return-type': ignore,
+    '@typescript-eslint/no-explicit-any': ignore, // would prefer to enable this
+    '@typescript-eslint/no-use-before-define': ignore, // this is duplicated
+    '@typescript-eslint/interface-name-prefix': ignore, // I don't agree
   },
   overrides: [
     {
       files: [
         '**/__tests__/**',
-        '**/*.test.js',
-        '**/*.stories.js',
+        '**/*.test.*',
+        '**/*.stories.*',
         '**/storyshots/**/stories/**',
         'docs/src/new-components/lib/StoryLinkWrapper.js',
         'docs/src/stories/**',
@@ -127,5 +137,18 @@ module.exports = {
       },
     },
     { files: '**/.storybook/config.js', rules: { 'global-require': ignore } },
+    {
+      files: ['**/*.stories.*'],
+      rules: {
+        'no-console': ignore,
+      },
+    },
+    {
+      files: ['**/*.tsx', '**/*.ts'],
+      rules: {
+        'react/prop-types': ignore, // we should use types
+        'no-dupe-class-members': ignore, // this is called overloads in typescript
+      },
+    },
   ],
 };

addons/a11y/src/components/A11YPanel.test.js

@@ -5,7 +5,7 @@ import { ThemeProvider, themes, convert } from '@storybook/theming';
 import { STORY_RENDERED } from '@storybook/core-events';
 import { ScrollArea } from '@storybook/components';
 
-import { A11YPanel } from './A11YPanel.tsx';
+import { A11YPanel } from './A11YPanel';
 import { EVENTS } from '../constants';
 
 function createApi() {

addons/a11y/src/components/A11YPanel.tsx

@@ -6,12 +6,12 @@ import { STORY_RENDERED } from '@storybook/core-events';
 import { ActionBar, Icons, ScrollArea } from '@storybook/components';
 
 import { AxeResults, Result } from 'axe-core';
+import { API } from '@storybook/api';
+import { Provider } from 'react-redux';
 import { Report } from './Report';
 import { Tabs } from './Tabs';
 import { EVENTS } from '../constants';
-import { API } from '@storybook/api';
 
-import { Provider } from 'react-redux';
 import store, { clearElements } from '../redux-config';
 
 export enum RuleType {

addons/a11y/src/components/ColorBlindness.tsx

@@ -34,7 +34,7 @@ const ColorIcon = styled.span(
   })
 );
 
-// tslint:disable-next-line:no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface ColorBlindnessProps {}
 
 interface ColorBlindnessState {
@@ -63,7 +63,8 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
   };
 
   onVisibilityChange = (s: boolean) => {
-    if (this.state.expanded !== s) {
+    const { expanded } = this.state;
+    if (expanded !== s) {
       this.setState({ expanded: s });
     }
   };

addons/a11y/src/components/Report/Elements.tsx

@@ -64,6 +64,7 @@ interface ElementsProps {
 export const Elements: FunctionComponent<ElementsProps> = ({ elements, type }) => (
   <ol>
     {elements.map((element, index) => (
+      // eslint-disable-next-line react/no-array-index-key
       <Element element={element} key={index} type={type} />
     ))}
   </ol>

addons/a11y/src/components/Report/HighlightToggle.test.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { ThemeProvider, themes, convert } from '@storybook/theming';
-import HighlightToggle from './HighlightToggle.tsx';
-import store from '../../redux-config.tsx';
+import HighlightToggle from './HighlightToggle';
+import store from '../../redux-config';
 
 function ThemedHighlightToggle(props) {
   return (

addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -1,3 +1,4 @@
+import { document } from 'global';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { styled, themes, convert } from '@storybook/theming';
@@ -10,6 +11,7 @@ import { IFRAME } from '../../constants';
 
 export class HighlightedElementData {
   originalOutline: string;
+
   isHighlighted: boolean;
 }
 
@@ -50,6 +52,7 @@ function getElementBySelectorPath(elementPath: string): HTMLElement {
 }
 
 function setElementOutlineStyle(targetElement: HTMLElement, outlineStyle: string): void {
+  // eslint-disable-next-line no-param-reassign
   targetElement.style.outline = outlineStyle;
 }
 
@@ -65,6 +68,7 @@ function areAllRequiredElementsHighlighted(
     );
   }).length;
 
+  // eslint-disable-next-line no-nested-ternary
   return highlightedCount === 0
     ? CheckBoxStates.UNCHECKED
     : highlightedCount === elementsToHighlight.length
@@ -99,34 +103,55 @@ class HighlightToggle extends Component<ToggleProps> {
   private checkBoxRef = React.createRef<HTMLInputElement>();
 
   componentDidMount() {
-    this.props.elementsToHighlight.forEach(element => {
+    const { elementsToHighlight, highlightedElementsMap } = this.props;
+    elementsToHighlight.forEach(element => {
       const targetElement = getElementBySelectorPath(element.target[0]);
-      if (targetElement && !this.props.highlightedElementsMap.has(targetElement)) {
+      if (targetElement && !highlightedElementsMap.has(targetElement)) {
         this.saveElementDataToMap(targetElement, false, targetElement.style.outline);
       }
     });
   }
 
   componentDidUpdate(prevProps: Readonly<ToggleProps>): void {
+    const { indeterminate } = this.props;
     if (this.checkBoxRef.current) {
-      this.checkBoxRef.current.indeterminate = this.props.indeterminate;
+      this.checkBoxRef.current.indeterminate = indeterminate;
     }
   }
 
+  onToggle = (): void => {
+    const { elementsToHighlight, highlightedElementsMap } = this.props;
+    elementsToHighlight.forEach(element => {
+      const targetElement = getElementBySelectorPath(element.target[0]);
+      if (!highlightedElementsMap.has(targetElement)) {
+        return;
+      }
+      const { originalOutline } = highlightedElementsMap.get(targetElement);
+      const { isHighlighted } = highlightedElementsMap.get(targetElement);
+      const { isToggledOn } = this.props;
+      if ((isToggledOn && isHighlighted) || (!isToggledOn && !isHighlighted)) {
+        const addHighlight = !isToggledOn && !isHighlighted;
+        this.highlightRuleLocation(targetElement, addHighlight);
+        this.saveElementDataToMap(targetElement, addHighlight, originalOutline);
+      }
+    });
+  };
+
   highlightRuleLocation(targetElement: HTMLElement, addHighlight: boolean): void {
+    const { highlightedElementsMap, type } = this.props;
     if (!targetElement) {
       return;
     }
 
     if (addHighlight) {
-      setElementOutlineStyle(targetElement, `${colorsByType[this.props.type]} dotted 1px`);
+      setElementOutlineStyle(targetElement, `${colorsByType[type]} dotted 1px`);
       return;
     }
 
-    if (this.props.highlightedElementsMap.has(targetElement)) {
+    if (highlightedElementsMap.has(targetElement)) {
       setElementOutlineStyle(
         targetElement,
-        this.props.highlightedElementsMap.get(targetElement).originalOutline
+        highlightedElementsMap.get(targetElement).originalOutline
       );
     }
   }
@@ -136,40 +161,25 @@ class HighlightToggle extends Component<ToggleProps> {
     isHighlighted: boolean,
     originalOutline: string
   ): void {
+    const { addElement: localAddElement } = this.props;
     const data: HighlightedElementData = new HighlightedElementData();
     data.isHighlighted = isHighlighted;
     data.originalOutline = originalOutline;
     const payload = { element: targetElement, highlightedElementData: data };
-    this.props.addElement(payload);
+    localAddElement(payload);
   }
 
-  onToggle = (): void => {
-    this.props.elementsToHighlight.forEach(element => {
-      const targetElement = getElementBySelectorPath(element.target[0]);
-      if (!this.props.highlightedElementsMap.has(targetElement)) {
-        return;
-      }
-      const originalOutline = this.props.highlightedElementsMap.get(targetElement).originalOutline;
-      const { isHighlighted } = this.props.highlightedElementsMap.get(targetElement);
-      const { isToggledOn } = this.props;
-      if ((isToggledOn && isHighlighted) || (!isToggledOn && !isHighlighted)) {
-        const addHighlight = !isToggledOn && !isHighlighted;
-        this.highlightRuleLocation(targetElement, addHighlight);
-        this.saveElementDataToMap(targetElement, addHighlight, originalOutline);
-      }
-    });
-  };
-
   render() {
+    const { toggleId, elementsToHighlight, isToggledOn } = this.props;
     return (
       <Checkbox
         ref={this.checkBoxRef}
-        id={this.props.toggleId}
+        id={toggleId}
         type="checkbox"
         aria-label="Highlight result"
-        disabled={!this.props.elementsToHighlight.length}
+        disabled={!elementsToHighlight.length}
         onChange={this.onToggle}
-        checked={this.props.isToggledOn}
+        checked={isToggledOn}
       />
     );
   }

addons/a11y/src/components/Report/Rules.tsx

@@ -2,8 +2,8 @@ import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 import { Badge, Icons } from '@storybook/components';
 import { CheckResult } from 'axe-core';
-import { RuleType } from '../A11YPanel';
 import { SizeMe } from 'react-sizeme';
+import { RuleType } from '../A11YPanel';
 
 const impactColors = {
   minor: '#f1c40f',
@@ -112,6 +112,7 @@ export const Rules: FunctionComponent<RulesProps> = ({ rules }) => {
   return (
     <List>
       {rules.map((rule, index) => (
+        // eslint-disable-next-line react/no-array-index-key
         <Rule rule={rule} key={index} />
       ))}
     </List>

addons/a11y/src/components/Tabs.tsx

@@ -1,11 +1,11 @@
 import React, { Component, SyntheticEvent } from 'react';
 
 import { styled, themes } from '@storybook/theming';
+import { NodeResult, Result } from 'axe-core';
+import { SizeMe } from 'react-sizeme';
 import store, { clearElements } from '../redux-config';
 import HighlightToggle from './Report/HighlightToggle';
-import { NodeResult, Result } from 'axe-core';
 import { RuleType } from './A11YPanel';
-import { SizeMe } from 'react-sizeme';
 
 // TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality
 
@@ -86,12 +86,12 @@ const List = styled.div(({ theme }) => ({
 }));
 
 interface TabsProps {
-  tabs: Array<{
+  tabs: {
     label: JSX.Element;
     panel: JSX.Element;
     items: Result[];
     type: RuleType;
-  }>;
+  }[];
 }
 
 interface TabsState {
@@ -128,6 +128,7 @@ export class Tabs extends Component<TabsProps, TabsState> {
               <TabsWrapper>
                 {tabs.map((tab, index) => (
                   <Item
+                    /* eslint-disable-next-line react/no-array-index-key */
                     key={index}
                     data-index={index}
                     active={active === index}

addons/a11y/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
 import { document } from 'global';
 import axe, { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core';
 import deprecate from 'util-deprecate';
@@ -35,7 +36,6 @@ const run = (element: ElementContext, config: Spec, options: RunOptions) => {
       .run(
         element || getElement(),
         options ||
-          // tslint:disable-next-line:no-object-literal-type-assertion
           ({
             restoreScroll: true,
           } as RunOptions) // cast to RunOptions is necessary because axe types are not up to date

addons/a11y/src/redux-config.tsx

@@ -28,8 +28,10 @@ function rootReducer(state = initialState, action: any) {
         action.payload.highlightedElementData
       ),
     };
-  } else if (action.type === CLEAR_ELEMENTS) {
-    for (let key of Array.from(state.highlightedElementsMap.keys())) {
+  }
+  if (action.type === CLEAR_ELEMENTS) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const key of Array.from(state.highlightedElementsMap.keys())) {
       key.style.outline = state.highlightedElementsMap.get(key).originalOutline;
       state.highlightedElementsMap.delete(key);
     }

addons/a11y/src/register.tsx

@@ -1,10 +1,10 @@
 import React, { Fragment, FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 
+import { addons, types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID } from './constants';
 import { ColorBlindness } from './components/ColorBlindness';
 import { A11YPanel } from './components/A11YPanel';
-import { addons, types } from '@storybook/addons';
 
 const Hidden = styled.div(() => ({
   '&, & svg': {

addons/actions/src/containers/ActionLogger/index.tsx

@@ -26,8 +26,6 @@ const safeDeepEqual = (a: any, b: any): boolean => {
 };
 
 export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
-  private mounted: boolean;
-
   constructor(props: ActionLoggerProps) {
     super(props);
 
@@ -75,6 +73,8 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
     this.setState({ actions: [] });
   };
 
+  private mounted: boolean;
+
   render() {
     const { actions = [] } = this.state;
     const { active } = this.props;