Ugrades/eslint

code/.eslintrc.js

@@ -5,14 +5,51 @@ const scriptPath = path.join(__dirname, '..', 'scripts');
 module.exports = {
   root: true,
   extends: [path.join(scriptPath, '.eslintrc.js')],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  rules: {
+    'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
+    'react-hooks/rules-of-hooks': 'off',
+    'jest/no-done-callback': 'off',
+  },
   overrides: [
+    {
+      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
+      files: ['**/frameworks/angular/template/**/*'],
+      rules: {
+        '@typescript-eslint/no-useless-constructor': 'off',
+      },
+    },
     {
       // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
       files: ['**/addons/docs/**/*'],
       rules: {
         'import/no-extraneous-dependencies': 'off',
       },
     },
+    {
+      files: [
+        '*.js',
+        '*.jsx',
+        '*.json',
+        '*.html',
+        '**/.storybook/*.ts',
+        '**/.storybook/*.tsx',
+        'setup-jest.ts',
+      ],
+      parserOptions: {
+        project: null,
+      },
+      rules: {
+        // '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/dot-notation': 'off',
+        '@typescript-eslint/no-implied-eval': 'off',
+        '@typescript-eslint/no-throw-literal': 'off',
+        '@typescript-eslint/return-await': 'off',
+      },
+    },
     {
       // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
       files: ['**/*.ts', '**/*.tsx'],

code/__mocks__/fs-extra.js

@@ -5,7 +5,7 @@ const fs = jest.createMockFromModule('fs-extra');
 // `fs` APIs are used.
 let mockFiles = Object.create(null);
 
-// eslint-disable-next-line no-underscore-dangle
+// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
 function __setMockFiles(newMockFiles) {
   mockFiles = newMockFiles;
 }

code/__mocks__/fs.js

@@ -5,7 +5,7 @@ const fs = jest.createMockFromModule('fs');
 // `fs` APIs are used.
 let mockFiles = Object.create(null);
 
-// eslint-disable-next-line no-underscore-dangle
+// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
 function __setMockFiles(newMockFiles) {
   mockFiles = newMockFiles;
 }

code/addons/a11y/src/components/A11YPanel.tsx

@@ -6,7 +6,9 @@ import { ActionBar, Icons, ScrollArea } from '@storybook/components';
 
 import { AxeResults } from 'axe-core';
 import { useChannel, useParameter, useStorybookState } from '@storybook/api';
+// eslint-disable-next-line import/no-cycle
 import { Report } from './Report';
+// eslint-disable-next-line import/no-cycle
 import { Tabs } from './Tabs';
 
 import { useA11yContext } from './A11yContext';

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

@@ -4,6 +4,7 @@ import { styled } from '@storybook/theming';
 
 import { NodeResult } from 'axe-core';
 import { Rules } from './Rules';
+// eslint-disable-next-line import/no-cycle
 import { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
 

code/addons/a11y/src/components/Report/Item.tsx

@@ -5,8 +5,10 @@ import { Icons } from '@storybook/components';
 
 import { Result } from 'axe-core';
 import { Info } from './Info';
+// eslint-disable-next-line import/no-cycle
 import { Elements } from './Elements';
 import { Tags } from './Tags';
+// eslint-disable-next-line import/no-cycle
 import { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
 

code/addons/a11y/src/components/Report/index.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment, FC } from 'react';
 import { Placeholder } from '@storybook/components';
 import { Result } from 'axe-core';
+// eslint-disable-next-line import/no-cycle
 import { Item } from './Item';
+// eslint-disable-next-line import/no-cycle
 import { RuleType } from '../A11YPanel';
 
 export interface ReportProps {

code/addons/a11y/src/components/Tabs.tsx

@@ -4,6 +4,7 @@ import { styled } from '@storybook/theming';
 import { NodeResult, Result } from 'axe-core';
 import { SizeMe } from 'react-sizeme';
 import HighlightToggle from './Report/HighlightToggle';
+// eslint-disable-next-line import/no-cycle
 import { RuleType } from './A11YPanel';
 import { useA11yContext } from './A11yContext';
 

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

@@ -64,9 +64,11 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
       const actions = [...prevState.actions];
       const previous = actions.length && actions[0];
       if (previous && safeDeepEqual(previous.data, action.data)) {
-        previous.count++; // eslint-disable-line
+        // eslint-disable-next-line no-plusplus
+        previous.count++;
       } else {
-        action.count = 1; // eslint-disable-line
+        // eslint-disable-next-line no-param-reassign
+        action.count = 1;
         actions.unshift(action);
       }
       return { actions: actions.slice(0, action.options.limit) };

code/addons/actions/src/runtime/withActions.ts

@@ -29,6 +29,7 @@ const hasMatchInAncestry = (element: any, selector: any): boolean => {
 const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[]) => {
   const actionsObject = actionsFn(...handles);
   return Object.entries(actionsObject).map(([key, action]) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     const [_, eventName, selector] = key.match(delegateEventSplitter) || [];
     return {
       eventName,

code/addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -71,7 +71,7 @@ const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
   values: [],
 };
 
-export const BackgroundSelector: FC = memo(() => {
+export const BackgroundSelector: FC = memo(function BackgroundSelector() {
   const backgroundsConfig = useParameter<BackgroundsParameter>(
     BACKGROUNDS_PARAM_KEY,
     DEFAULT_BACKGROUNDS_CONFIG

code/addons/backgrounds/src/containers/GridSelector.tsx

@@ -5,7 +5,7 @@ import { Icons, IconButton } from '@storybook/components';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
-export const GridSelector: FC = memo(() => {
+export const GridSelector: FC = memo(function GridSelector() {
   const [globals, updateGlobals] = useGlobals();
 
   const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, {

code/addons/interactions/src/components/Interaction.tsx

@@ -7,6 +7,7 @@ import { transparentize } from 'polished';
 import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
+// eslint-disable-next-line import/no-cycle
 import { Controls } from './InteractionsPanel';
 
 const MethodCallWrapper = styled.div(() => ({

code/addons/interactions/src/components/InteractionsPanel.tsx

@@ -4,7 +4,9 @@ import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 
+// eslint-disable-next-line import/no-cycle
 import { Subnav } from './Subnav';
+// eslint-disable-next-line import/no-cycle
 import { Interaction } from './Interaction';
 
 export interface Controls {
@@ -78,7 +80,7 @@ const CaughtExceptionStack = styled.pre(({ theme }) => ({
 }));
 
 export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
-  ({
+  function InteractionsPanel({
     calls,
     controls,
     controlStates,
@@ -93,67 +95,69 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
     isRerunAnimating,
     setIsRerunAnimating,
     ...panelProps
-  }) => (
-    <AddonPanel {...panelProps}>
-      <Container withException={!!caughtException}>
-        {controlStates.debugger && (interactions.length > 0 || hasException || isRerunAnimating) && (
-          <Subnav
-            controls={controls}
-            controlStates={controlStates}
-            status={
-              // eslint-disable-next-line no-nested-ternary
-              isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
-            }
-            storyFileName={fileName}
-            onScrollToEnd={onScrollToEnd}
-            isRerunAnimating={isRerunAnimating}
-            setIsRerunAnimating={setIsRerunAnimating}
-          />
-        )}
-        <div>
-          {interactions.map((call) => (
-            <Interaction
-              key={call.id}
-              call={call}
-              callsById={calls}
+  }) {
+    return (
+      <AddonPanel {...panelProps}>
+        <Container withException={!!caughtException}>
+          {controlStates.debugger && (interactions.length > 0 || hasException || isRerunAnimating) && (
+            <Subnav
               controls={controls}
               controlStates={controlStates}
-              childCallIds={call.childCallIds}
-              isHidden={call.isHidden}
-              isCollapsed={call.isCollapsed}
-              toggleCollapsed={call.toggleCollapsed}
-              pausedAt={pausedAt}
+              status={
+                // eslint-disable-next-line no-nested-ternary
+                isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
+              }
+              storyFileName={fileName}
+              onScrollToEnd={onScrollToEnd}
+              isRerunAnimating={isRerunAnimating}
+              setIsRerunAnimating={setIsRerunAnimating}
             />
-          ))}
-        </div>
-        {caughtException && !caughtException.message?.startsWith('ignoredException') && (
-          <CaughtException>
-            <CaughtExceptionTitle>
-              Caught exception in <CaughtExceptionCode>play</CaughtExceptionCode> function
-            </CaughtExceptionTitle>
-            <CaughtExceptionDescription>
-              This story threw an error after it finished rendering which means your interactions
-              couldn&apos;t be run. Go to this story&apos;s play function in {fileName} to fix.
-            </CaughtExceptionDescription>
-            <CaughtExceptionStack data-chromatic="ignore">
-              {caughtException.stack || `${caughtException.name}: ${caughtException.message}`}
-            </CaughtExceptionStack>
-          </CaughtException>
-        )}
-        <div ref={endRef} />
-        {!isPlaying && !caughtException && interactions.length === 0 && (
-          <Placeholder>
-            No interactions found
-            <Link
-              href="https://storybook.js.org/docs/react/writing-stories/play-function"
-              target="_blank"
-              withArrow
-            >
-              Learn how to add interactions to your story
-            </Link>
-          </Placeholder>
-        )}
-      </Container>
-    </AddonPanel>
-  )
+          )}
+          <div>
+            {interactions.map((call) => (
+              <Interaction
+                key={call.id}
+                call={call}
+                callsById={calls}
+                controls={controls}
+                controlStates={controlStates}
+                childCallIds={call.childCallIds}
+                isHidden={call.isHidden}
+                isCollapsed={call.isCollapsed}
+                toggleCollapsed={call.toggleCollapsed}
+                pausedAt={pausedAt}
+              />
+            ))}
+          </div>
+          {caughtException && !caughtException.message?.startsWith('ignoredException') && (
+            <CaughtException>
+              <CaughtExceptionTitle>
+                Caught exception in <CaughtExceptionCode>play</CaughtExceptionCode> function
+              </CaughtExceptionTitle>
+              <CaughtExceptionDescription>
+                This story threw an error after it finished rendering which means your interactions
+                couldn&apos; t be run.Go to this story&apos; s play function in {fileName} to fix.
+              </CaughtExceptionDescription>
+              <CaughtExceptionStack data-chromatic="ignore">
+                {caughtException.stack || `${caughtException.name}: ${caughtException.message}`}
+              </CaughtExceptionStack>
+            </CaughtException>
+          )}
+          <div ref={endRef} />
+          {!isPlaying && !caughtException && interactions.length === 0 && (
+            <Placeholder>
+              No interactions found
+              <Link
+                href="https://storybook.js.org/docs/react/writing-stories/play-function"
+                target="_blank"
+                withArrow
+              >
+                Learn how to add interactions to your story
+              </Link>
+            </Placeholder>
+          )}
+        </Container>
+      </AddonPanel>
+    );
+  }
 );

code/addons/interactions/src/components/Subnav.tsx

@@ -13,6 +13,7 @@ import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
 import { StatusBadge } from './StatusBadge';
+// eslint-disable-next-line import/no-cycle
 import { Controls } from './InteractionsPanel';
 
 const SubnavWrapper = styled.div(({ theme }) => ({

code/addons/links/src/utils.ts

@@ -49,6 +49,7 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string>
   });
 };
 
+// eslint-disable-next-line @typescript-eslint/no-shadow
 const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) =>
   typeof value === 'function' ? value(...args) : value;
 

code/addons/outline/src/OutlineSelector.tsx

@@ -3,7 +3,7 @@ import { useGlobals, useStorybookApi } from '@storybook/api';
 import { Icons, IconButton } from '@storybook/components';
 import { ADDON_ID, PARAM_KEY } from './constants';
 
-export const OutlineSelector = memo(() => {
+export const OutlineSelector = memo(function OutlineSelector() {
   const [globals, updateGlobals] = useGlobals();
   const api = useStorybookApi();
 

code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts

@@ -6,6 +6,7 @@ describe('getSnapshotFileName', () => {
   it('fileName is provided - snapshot is stored in __snapshots__ dir', () => {
     const context = { fileName: 'foo.js' };
 
+    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
@@ -15,6 +16,7 @@ describe('getSnapshotFileName', () => {
   it('fileName with multiple extensions is provided - only the last extension is replaced', () => {
     const context = { fileName: 'foo.web.stories.js' };
 
+    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
@@ -24,6 +26,7 @@ describe('getSnapshotFileName', () => {
   it('fileName with dir is provided - __snapshots__ dir is created inside another dir', () => {
     const context = { fileName: 'test/foo.js' };
 
+    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 

code/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts

@@ -11,7 +11,7 @@ function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams
 
   if (asyncJest === true) {
     it(
-      name,
+      `${name}`,
       () =>
         new Promise<void>((resolve, reject) =>
           testMethod({
@@ -25,7 +25,7 @@ function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams
     );
   } else {
     it(
-      name,
+      `${name}`,
       () =>
         testMethod({
           story: item,
@@ -39,8 +39,8 @@ function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams
 
 function snapshotTestSuite({ item, suite, ...restParams }: any) {
   const { kind, children } = item;
-  describe(suite, () => {
-    describe(kind, () => {
+  describe(`${suite}`, () => {
+    describe(`${kind}`, () => {
       children.forEach((c: any) => {
         snapshotTest({ item: c, ...restParams });
       });