fixing linting

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
       'error',
       { additionalTestBlockFunctions: ['it.skipWindows', 'it.onWindows'] },
     ],
+    'no-use-before-define': 'off',
   },
   overrides: [
     {
@@ -16,6 +17,14 @@ module.exports = {
         'import/no-extraneous-dependencies': 'off',
       },
     },
+    {
+      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        'no-shadow': 'off',
+        '@typescript-eslint/ban-types': 'warn', // should become error, in the future
+      },
+    },
     {
       // this package uses pre-bundling, dependencies will be bundled, and will be in devDepenencies
       files: [

addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import global from 'global';
 import { set_current_component } from 'svelte/internal';
 

app/angular/src/client/preview/angular-beta/AbstractRenderer.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import { enableProdMode, NgModule, PlatformRef } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

app/angular/src/client/preview/angular/helpers.ts

@@ -179,7 +179,6 @@ const insertDynamicRoot = () => {
 const draw = (newModule: DynamicComponentType): void => {
   if (!platform) {
     insertDynamicRoot();
-    // eslint-disable-next-line no-undef
     if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
       try {
         enableProdMode();

app/angular/src/server/framework-preset-angular-cli.ts

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import webpack from 'webpack';
 import { logger } from '@storybook/node-logger';
 import { targetFromTargetString, BuilderContext, Target } from '@angular-devkit/architect';

examples/angular-cli/jest-config/globalMocks.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-return-assign */
-/* eslint-disable no-undef */
 const mock = () => {
   let storage = {};
   return {

examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts

@@ -33,9 +33,7 @@ class NgComponentOutletWrapperComponent implements OnInit {
   componentInjector: Injector;
 
   componentContent = [
-    // eslint-disable-next-line no-undef
     [document.createTextNode('Ng-content : Inspired by ')],
-    // eslint-disable-next-line no-undef
     [document.createTextNode('https://angular.io/api/common/NgComponentOutlet')],
   ];
 

examples/cra-ts-essentials/src/App.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 /* eslint-disable jest/expect-expect */
 import React from 'react';
 import ReactDOM from 'react-dom';

examples/cra-ts-kitchen-sink/src/index.tsx

@@ -3,5 +3,4 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-// eslint-disable-next-line no-undef
 ReactDOM.render(<App />, document.getElementById('root'));

examples/external-docs/src/blocks.tsx

@@ -103,10 +103,8 @@ export const DocsProvider: React.FC = ({ children }) => {
     if (!previewPromise) {
       previewPromise = (async () => {
         // @ts-ignore
-        // eslint-disable-next-line no-undef
         if (window.preview) {
           // @ts-ignore
-          // eslint-disable-next-line no-undef
           (window.preview as PreviewWeb<AnyFramework>).onStoriesChanged({
             importFn,
             storyIndex,
@@ -119,12 +117,10 @@ export const DocsProvider: React.FC = ({ children }) => {
             getProjectAnnotations: () => projectAnnotations,
           });
           // @ts-ignore
-          // eslint-disable-next-line no-undef
           window.preview = preview;
         }
 
         // @ts-ignore
-        // eslint-disable-next-line no-undef
         return window.preview;
       })();
     }

examples/official-storybook/components/FlowTypeButton.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable react/require-default-props, react/no-unused-prop-types */
 // @flow
 import React from 'react';

lib/api/src/modules/layout.ts

@@ -12,9 +12,9 @@ const { DOCS_MODE, document } = global;
 export type PanelPositions = 'bottom' | 'right';
 export type ActiveTabsType = 'sidebar' | 'canvas' | 'addons';
 export const ActiveTabs = {
-  SIDEBAR: 'sidebar' as 'sidebar',
-  CANVAS: 'canvas' as 'canvas',
-  ADDONS: 'addons' as 'addons',
+  SIDEBAR: 'sidebar' as const,
+  CANVAS: 'canvas' as const,
+  ADDONS: 'addons' as const,
 };
 
 export interface Layout {

lib/builder-webpack5/src/preview/base-webpack.config.ts

@@ -46,9 +46,7 @@ export async function createDefaultWebpackConfig(
 
   const coreOptions = await options.presets.apply<CoreConfig>('core');
   const builderOptions = (coreOptions.builder as Webpack5BuilderConfig).options;
-  const cacheConfig = builderOptions?.fsCache
-    ? { cache: { type: 'filesystem' as 'filesystem' } }
-    : {};
+  const cacheConfig = builderOptions?.fsCache ? { cache: { type: 'filesystem' as const } } : {};
   const lazyCompilationConfig =
     builderOptions?.lazyCompilation && !isProd ? { lazyCompilation: { entries: false } } : {};
   return {

lib/cli/src/extract.ts

@@ -19,7 +19,6 @@ const read = async (url: string) => {
   `);
   const data = JSON.parse(
     await page.evaluate(async () => {
-      // eslint-disable-next-line no-undef
       return JSON.stringify(window.__STORYBOOK_STORY_STORE__.getStoriesJsonData(), null, 2);
     })
   );

lib/cli/src/repro-generators/configs.ts

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import type { StorybookConfig } from '@storybook/core-common';
 import type { SupportedFrameworks } from '../project_types';
 

lib/cli/src/repro-generators/scripts.ts

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import path from 'path';
 import { readJSON, writeJSON } from 'fs-extra';
 import shell, { ExecOptions } from 'shelljs';

lib/client-api/src/ClientApi.ts

@@ -149,6 +149,7 @@ export class ClientApi<TFramework extends AnyFramework> {
 
     this.storyStore = storyStore;
 
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     singleton = this;
   }
 

lib/client-api/src/StoryStoreFacade.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import global from 'global';
 import dedent from 'ts-dedent';
 import { SynchronousPromise } from 'synchronous-promise';

lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { ArgRow } from './ArgRow';

lib/components/src/controls/react-editable-json-tree/JsonNodes.tsx

@@ -2,7 +2,6 @@
 /* eslint-disable react/sort-comp */
 /* eslint-disable react/no-array-index-key */
 
-/* eslint-disable no-undef */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/button-has-type */
 

lib/components/src/controls/react-editable-json-tree/utils/objectTypes.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /**
  * Get Object type.
  * @param obj {*} object to get type

lib/core-common/src/types.ts

@@ -91,6 +91,7 @@ export interface Presets {
     config: {},
     args: Options & { babelOptions?: TransformOptions } & ManagerWebpackOptions
   ): Promise<Configuration>;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
   apply<T extends unknown>(extension: string, config?: T, args?: unknown): Promise<T>;
 }
 

lib/instrumenter/src/instrumenter.test.ts

@@ -165,7 +165,7 @@ describe('Instrumenter', () => {
       fn1(true),
       fn1('foo'),
       fn1(1),
-      fn1(BigInt(1)), // eslint-disable-line no-undef
+      fn1(BigInt(1)),
       fn1({}),
       fn1([]),
       fn1(() => {}),
@@ -181,7 +181,7 @@ describe('Instrumenter', () => {
           /* call 2 */ true,
           /* call 3 */ 'foo',
           /* call 4 */ 1,
-          /* call 5 */ BigInt(1), // eslint-disable-line no-undef
+          /* call 5 */ BigInt(1),
           { __callId__: callSpy.mock.calls[6][0].id, retain: false },
           { __callId__: callSpy.mock.calls[7][0].id, retain: false },
           { __callId__: callSpy.mock.calls[8][0].id, retain: false },

lib/theming/src/emotion10types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 /*
  * We added these types so we can be fairly confident that we introduce no breaking changes
  * We should remove this file in 7.0

lib/ui/src/components/preview/preview.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import React, { Fragment, useMemo, useEffect, useRef } from 'react';
 import { Helmet } from 'react-helmet-async';
 

presets/svelte-webpack/src/svelte-docgen-loader.ts

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import svelteDoc from 'sveltedoc-parser';
 import dedent from 'ts-dedent';
 import * as path from 'path';

renderers/html/src/docs/sourceDecorator.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 /* global window */
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { addons, useEffect } from '@storybook/addons';
@@ -43,9 +44,7 @@ export function sourceDecorator(
   if (!skipSourceRender(context)) {
     if (typeof story === 'string') {
       source = story;
-    }
-    // eslint-disable-next-line no-undef
-    else if (story instanceof Element) {
+    } else if (story instanceof Element) {
       source = story.outerHTML;
     }
 

renderers/react/src/docs/jsxDecorator.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import React, { createElement, ReactElement } from 'react';
 import reactElementToJSXString, { Options } from 'react-element-to-jsx-string';
 import dedent from 'ts-dedent';

renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import isPlainObject from 'lodash/isPlainObject';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';

renderers/react/src/docs/lib/defaultValues/prettyIdentifier.ts

@@ -4,6 +4,14 @@ import {
   InspectionType,
 } from '../inspection';
 
+export function getPrettyFuncIdentifier(identifier: string, hasArguments: boolean): string {
+  return hasArguments ? `${identifier}( ... )` : `${identifier}()`;
+}
+
+export function getPrettyElementIdentifier(identifier: string) {
+  return `<${identifier} />`;
+}
+
 export function getPrettyIdentifier(inferredType: InspectionIdentifiableInferedType): string {
   const { type, identifier } = inferredType;
 
@@ -16,11 +24,3 @@ export function getPrettyIdentifier(inferredType: InspectionIdentifiableInferedT
       return identifier;
   }
 }
-
-export function getPrettyFuncIdentifier(identifier: string, hasArguments: boolean): string {
-  return hasArguments ? `${identifier}( ... )` : `${identifier}()`;
-}
-
-export function getPrettyElementIdentifier(identifier: string) {
-  return `<${identifier} />`;
-}

renderers/svelte/src/docs/sourceDecorator.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import { addons, useEffect } from '@storybook/addons';
 import { once } from '@storybook/client-logger';
 import type { ArgTypes, Args, StoryContext, AnyFramework } from '@storybook/csf';

renderers/vue/src/docs/sourceDecorator.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
 
 import type { StoryContext } from '@storybook/csf';

renderers/vue/src/preview/util.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import { VueConstructor } from 'vue';
 
 function getType(fn: Function) {

renderers/web-components/src/docs/custom-elements.ts

@@ -46,30 +46,6 @@ interface Sections {
   cssShadowParts?: any;
 }
 
-function mapData(data: TagItem[], category: string) {
-  return (
-    data &&
-    data
-      .filter((item) => item && item.name)
-      .reduce((acc, item) => {
-        if (item.kind === 'method') return acc;
-
-        switch (category) {
-          case 'events':
-            mapEvent(item).forEach((argType) => {
-              acc[argType.name] = argType;
-            });
-            break;
-          default:
-            acc[item.name] = mapItem(item, category);
-            break;
-        }
-
-        return acc;
-      }, {} as ArgTypes)
-  );
-}
-
 function mapItem(item: TagItem, category: string): ArgType {
   const type =
     category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };
@@ -101,6 +77,30 @@ function mapEvent(item: TagItem): ArgType[] {
   return [{ name, action: { name: item.name }, table: { disable: true } }, mapItem(item, 'events')];
 }
 
+function mapData(data: TagItem[], category: string) {
+  return (
+    data &&
+    data
+      .filter((item) => item && item.name)
+      .reduce((acc, item) => {
+        if (item.kind === 'method') return acc;
+
+        switch (category) {
+          case 'events':
+            mapEvent(item).forEach((argType) => {
+              acc[argType.name] = argType;
+            });
+            break;
+          default:
+            acc[item.name] = mapItem(item, category);
+            break;
+        }
+
+        return acc;
+      }, {} as ArgTypes)
+  );
+}
+
 const getMetaDataExperimental = (tagName: string, customElements: CustomElements) => {
   if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;
@@ -134,6 +134,13 @@ const getMetaDataV1 = (tagName: string, customElements: CustomElements) => {
   return metadata;
 };
 
+const getMetaData = (tagName: string, manifest: any) => {
+  if (manifest?.version === 'experimental') {
+    return getMetaDataExperimental(tagName, manifest);
+  }
+  return getMetaDataV1(tagName, manifest);
+};
+
 export const extractArgTypesFromElements = (tagName: string, customElements: CustomElements) => {
   const metaData = getMetaData(tagName, customElements);
   return (
@@ -149,13 +156,6 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
   );
 };
 
-const getMetaData = (tagName: string, manifest: any) => {
-  if (manifest?.version === 'experimental') {
-    return getMetaDataExperimental(tagName, manifest);
-  }
-  return getMetaDataV1(tagName, manifest);
-};
-
 export const extractArgTypes = (tagName: string) => {
   const cem = getCustomElements();
   return extractArgTypesFromElements(tagName, cem);

renderers/web-components/src/docs/prepareForInline.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import type { PartialStoryFn } from '@storybook/csf';
 import React from 'react';
 import { render } from 'lit-html';

renderers/web-components/src/docs/sourceDecorator.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 /* global window */
 import { render } from 'lit-html';
 import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';

scripts/bootstrap.js

@@ -2,8 +2,6 @@
 
 /* eslint-disable global-require */
 
-const { lstatSync, readdirSync } = require('fs');
-const { join } = require('path');
 const { maxConcurrentTasks } = require('./utils/concurrency');
 const { checkDependenciesAndRun, spawn } = require('./utils/cli-utils');