stricter types

.eslintignore

@@ -11,7 +11,6 @@ lib/manager-webpack4/prebuilt
 lib/manager-webpack5/prebuilt
 lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__
-lib/components/src/controls/react-editable-json-tree
 scripts/storage
 scripts/repros-generator
 *.bundle.js

addons/docs/package.json

@@ -133,7 +133,6 @@
     "rxjs": "^6.6.3",
     "styled-components": "^5.2.1",
     "sveltedoc-parser": "4.1.0",
-    "terser-webpack-plugin": "^5.0.3",
     "tmp": "^0.2.1",
     "tslib": "^2.1.0",
     "vue": "^2.6.10",

addons/docs/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
+    "skipLibCheck": true,
     "types": [
       "webpack-env",
       "jest",

addons/interactions/src/Tool.tsx

@@ -1,22 +1,22 @@
-import React, { useState } from 'react';
+import React, { ComponentProps, useState } from 'react';
 import { useChannel, useStorybookApi } from '@storybook/api';
 import { Icons, IconButton } from '@storybook/components';
-import { ButtonProps } from '@storybook/components/dist/ts3.9/Button/Button';
 import { FORCE_REMOUNT } from '@storybook/core-events';
 import { styled } from '@storybook/theming';
 import { TOOL_ID } from './constants';
 
-interface AnimatedButtonProps extends ButtonProps {
+interface AnimatedButtonProps {
   animating?: boolean;
 }
-const StyledAnimatedIconButton = styled(IconButton)<AnimatedButtonProps>(
-  ({ theme, animating, disabled }) => ({
-    opacity: disabled ? 0.5 : 1,
-    svg: {
-      animation: animating && `${theme.animation.rotate360} 1000ms ease-out`,
-    },
-  })
-);
+
+const StyledAnimatedIconButton = styled(IconButton)<
+  AnimatedButtonProps & ComponentProps<typeof IconButton>
+>(({ theme, animating, disabled }) => ({
+  opacity: disabled ? 0.5 : 1,
+  svg: {
+    animation: animating && `${theme.animation.rotate360} 1000ms ease-out`,
+  },
+}));
 
 export const Tool = () => {
   const { id: storyId } = useStorybookApi().getCurrentStoryData() || {};

addons/storyshots/storyshots-core/tsconfig.json

@@ -6,6 +6,7 @@
   "compilerOptions": {
     "rootDir": "./src",
     "experimentalDecorators": true,
-    "declaration": true
+    "declaration": true,
+    "skipLibCheck": true
   }
 }

addons/storyshots/storyshots-puppeteer/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
+    "skipLibCheck": true,
     "types": [
       "webpack-env",
       "node"

app/angular/src/builders/utils/run-compodoc.ts

@@ -1,26 +1,18 @@
 import { BuilderContext } from '@angular-devkit/architect';
 import { spawn } from 'child_process';
 import { Observable } from 'rxjs';
-import * as path from 'path';
 
 const hasTsConfigArg = (args: string[]) => args.indexOf('-p') !== -1;
 
-// path.relative is necessary to workaround a compodoc issue with
-// absolute paths on windows machines
-const toRelativePath = (pathToTsConfig: string) => {
-  return path.isAbsolute(pathToTsConfig) ? path.relative('.', pathToTsConfig) : pathToTsConfig;
-};
-
 export const runCompodoc = (
   { compodocArgs, tsconfig }: { compodocArgs: string[]; tsconfig: string },
   context: BuilderContext
 ): Observable<void> => {
   return new Observable<void>((observer) => {
-    const tsConfigPath = toRelativePath(tsconfig);
     const finalCompodocArgs = [
       'compodoc',
       // Default options
-      ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
+      ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsconfig]),
       '-d',
       `${context.workspaceRoot}`,
       ...compodocArgs,

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

@@ -23,9 +23,7 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P
     return baseConfig;
   }
 
-  const angularCliVersion = await import('@angular/core').then((m) =>
-    semver.coerce(m.VERSION.full)
-  );
+  const angularCliVersion = await import('@angular/cli').then((m) => semver.coerce(m.VERSION.full));
 
   /**
    * Ordered array to use the specific  getWebpackConfig according to some condition like angular-cli version

app/angular/standalone.d.ts

@@ -1,17 +1,15 @@
 import { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common';
 import { BuilderContext } from '@angular-devkit/architect';
-import { JsonValue } from '@angular-devkit/core';
-import { JsonSchema } from '@angular-devkit/core/src/json/schema';
 
 export type StandaloneOptions = Partial<
   CLIOptions &
     LoadOptions &
     BuilderOptions & {
       mode?: 'static' | 'dev';
       angularBrowserTarget?: string | null;
-      angularBuilderOptions?: JsonObject & {
-        styles?: ExtraEntryPoint[];
-        stylePreprocessorOptions?: StylePreprocessorOptions;
+      angularBuilderOptions?: Record<string, any> & {
+        styles?: any[];
+        stylePreprocessorOptions?: any;
       };
       angularBuilderContext?: BuilderContext | null;
       tsConfig?: string;

app/angular/tsconfig.json

@@ -8,6 +8,7 @@
       "node"
     ],
     "rootDir": "./src",
+    "skipLibCheck": true,
     "resolveJsonModule": true,
     "allowJs": true
   },

app/vue3/src/typings.d.ts

@@ -1,5 +1,5 @@
 declare module 'global';
 
 declare module 'vue-loader' {
-  export const VueLoaderPlugin
+  export const VueLoaderPlugin: any
 }

app/vue3/tsconfig.json

@@ -6,7 +6,8 @@
       "webpack-env",
       "node"
     ],
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "skipLibCheck": true
   },
   "include": [
     "src/**/*"

lib/api/src/modules/url.ts

@@ -209,7 +209,7 @@ export const init: ModuleFn = ({ store, navigate, state, provider, fullAPI, ...r
       api.setQueryParams({ globals: globalsString });
     });
 
-    fullAPI.on(NAVIGATE_URL, (url: string, options: { [k: string]: any }) => {
+    fullAPI.on(NAVIGATE_URL, (url: string, options: NavigateOptions) => {
       fullAPI.navigateUrl(url, options);
     });
 

lib/builder-webpack4/package.json

@@ -111,7 +111,7 @@
   },
   "devDependencies": {
     "@types/case-sensitive-paths-webpack-plugin": "^2.1.4",
-    "@types/terser-webpack-plugin": "^5.0.2",
+    "@types/terser-webpack-plugin": "^4.2.0",
     "@types/webpack-dev-middleware": "^3.7.3",
     "@types/webpack-hot-middleware": "^2.25.3",
     "@types/webpack-virtual-modules": "^0.1.0"

lib/cli/package.json

@@ -83,7 +83,7 @@
     "@types/shelljs": "^0.8.7",
     "@types/update-notifier": "^5.0.0",
     "strip-json-comments": "^3.1.1",
-    "update-notifier": "^4.1.3"
+    "update-notifier": "^5.0.1"
   },
   "peerDependencies": {
     "jest": "*"

lib/cli/src/window.d.ts

@@ -1,7 +1,8 @@
-import { StoryStore } from '@storybook/client-api';
+import type { AnyFramework } from '@storybook/csf';
+import type { StoryStore } from '@storybook/client-api';
 
 declare global {
   interface Window {
-    __STORYBOOK_STORY_STORE__: StoryStore;
+    __STORYBOOK_STORY_STORE__: StoryStore<AnyFramework>;
   }
 }

lib/components/src/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, FunctionComponent, ComponentProps } from 'react';
+import React, { forwardRef, FunctionComponent, ComponentProps, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
 
@@ -13,7 +13,7 @@ export interface ButtonProps {
   small?: boolean;
   outline?: boolean;
   containsIcon?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
   href?: string;
 }
 

lib/components/src/ScrollArea/OverlayScrollbars.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useRef, useEffect, HTMLAttributes, FC } from 'react';
 import OverlayScrollbars from 'overlayscrollbars';
 
-interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+interface OverlayScrollbarsComponentProps extends HTMLAttributes<HTMLDivElement> {
   children?: any;
   options?: OverlayScrollbars.Options;
   extensions?: OverlayScrollbars.Extensions;
@@ -14,17 +14,17 @@ interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivEl
  * https://github.com/KingSora/OverlayScrollbars/pull/218
  * */
 
-export const OverlayScrollbarsComponent: React.FC<OverlayScrollbarsComponentProps> = ({
+export const OverlayScrollbarsComponent: FC<OverlayScrollbarsComponentProps> = ({
   options = {},
   extensions,
   className,
   children,
   ...rest
 }) => {
-  const osTargetRef = React.useRef<HTMLDivElement>();
-  const osInstance = React.useRef<OverlayScrollbars>();
+  const osTargetRef = useRef<HTMLDivElement>();
+  const osInstance = useRef<OverlayScrollbars>();
 
-  React.useEffect(() => {
+  useEffect(() => {
     osInstance.current = OverlayScrollbars(osTargetRef.current, options, extensions);
     mergeHostClassNames(osInstance.current, className);
     return () => {
@@ -35,13 +35,13 @@ export const OverlayScrollbarsComponent: React.FC<OverlayScrollbarsComponentProp
     };
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (OverlayScrollbars.valid(osInstance.current)) {
       osInstance.current.options(options);
     }
   }, [options]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (OverlayScrollbars.valid(osInstance.current)) {
       mergeHostClassNames(osInstance.current, className);
     }

lib/components/src/ScrollArea/ScrollArea.tsx

@@ -1,8 +1,8 @@
-import React, { FunctionComponent, Suspense } from 'react';
+import React, { FunctionComponent, lazy, Suspense } from 'react';
 import { styled } from '@storybook/theming';
 
-const GlobalScrollAreaStyles = React.lazy(() => import('./GlobalScrollAreaStyles'));
-const OverlayScrollbars = React.lazy(() => import('./OverlayScrollbars'));
+const GlobalScrollAreaStyles = lazy(() => import('./GlobalScrollAreaStyles'));
+const OverlayScrollbars = lazy(() => import('./OverlayScrollbars'));
 
 const Scroller: FunctionComponent<ScrollAreaProps> = ({ horizontal, vertical, ...props }) => (
   <Suspense fallback={<div {...props} />}>

lib/components/src/Zoom/Zoom.tsx

@@ -1,6 +1,6 @@
 import global from 'global';
-import { ZoomElement as Element } from './ZoomElement';
-import { ZoomIFrame as IFrame } from './ZoomIFrame';
+import { ZoomElement } from './ZoomElement';
+import { ZoomIFrame } from './ZoomIFrame';
 
 const { window: globalWindow } = global;
 
@@ -15,6 +15,6 @@ export const browserSupportsCssZoom = (): boolean => {
 };
 
 export const Zoom = {
-  Element,
-  IFrame,
+  Element: ZoomElement,
+  IFrame: ZoomIFrame,
 };

lib/components/src/Zoom/ZoomElement.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { browserSupportsCssZoom } from './browserSupportsCssZoom';
 
@@ -21,7 +21,7 @@ type ZoomProps = {
 };
 
 export function ZoomElement({ scale, children }: ZoomProps) {
-  const componentWrapperRef = React.useRef<HTMLDivElement>(null);
+  const componentWrapperRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState(0);
 
   useEffect(() => {

lib/components/src/Zoom/ZoomIFrame.tsx

@@ -1,10 +1,10 @@
-import { Component, ReactElement } from 'react';
+import { Component, MutableRefObject, ReactElement } from 'react';
 import { browserSupportsCssZoom } from './browserSupportsCssZoom';
 
 export type IZoomIFrameProps = {
   scale: number;
   children: ReactElement<HTMLIFrameElement>;
-  iFrameRef: React.MutableRefObject<HTMLIFrameElement>;
+  iFrameRef: MutableRefObject<HTMLIFrameElement>;
   active?: boolean;
 };
 

lib/components/src/bar/button.tsx

@@ -3,20 +3,20 @@ import { styled, isPropValid } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { auto } from '@popperjs/core';
 
-interface ButtonProps
+interface BarButtonProps
   extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
   href?: void;
 }
-interface LinkProps
+interface BarLinkProps
   extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
   href: string;
 }
 
-const ButtonOrLink = ({ children, ...restProps }: ButtonProps | LinkProps) =>
+const ButtonOrLink = ({ children, ...restProps }: BarButtonProps | BarLinkProps) =>
   restProps.href != null ? (
-    <a {...(restProps as LinkProps)}>{children}</a>
+    <a {...(restProps as BarLinkProps)}>{children}</a>
   ) : (
-    <button type="button" {...(restProps as ButtonProps)}>
+    <button type="button" {...(restProps as BarButtonProps)}>
       {children}
     </button>
   );

lib/components/src/blocks/ArgsTable/ArgJsDoc.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { styled } from '@storybook/theming';
 import { JsDocTags } from './types';
-import { codeCommon } from '../../typography/shared';
+import { codeCommon } from '../../typography/lib/common';
 
 interface ArgJsDocArgs {
   tags: JsDocTags;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { ArgRow } from './ArgRow';
 import { TableWrapper } from './ArgsTable';
-import { ResetWrapper } from '../../typography/DocumentFormatting';
+import { ResetWrapper } from '../../typography/ResetWrapper';
 
 export default {
   component: ArgRow,

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

@@ -6,7 +6,7 @@ import { ArgType, Args, TableAnnotation } from './types';
 import { ArgJsDoc } from './ArgJsDoc';
 import { ArgValue } from './ArgValue';
 import { ArgControl, ArgControlProps } from './ArgControl';
-import { codeCommon } from '../../typography/shared';
+import { codeCommon } from '../../typography/lib/common';
 
 interface ArgRowProps {
   row: ArgType;

lib/components/src/blocks/ArgsTable/ArgValue.tsx

@@ -6,7 +6,7 @@ import { PropSummaryValue } from './types';
 import { WithTooltipPure } from '../../tooltip/lazy-WithTooltip';
 import { Icons } from '../../icon/icon';
 import { SyntaxHighlighter } from '../../syntaxhighlighter/lazy-syntaxhighlighter';
-import { codeCommon } from '../../typography/shared';
+import { codeCommon } from '../../typography/lib/common';
 
 interface ArgValueProps {
   value?: PropSummaryValue;

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

@@ -8,7 +8,7 @@ import { SectionRow } from './SectionRow';
 import { ArgType, ArgTypes, Args } from './types';
 import { EmptyBlock } from '../EmptyBlock';
 import { Link } from '../../typography/link/link';
-import { ResetWrapper } from '../../typography/DocumentFormatting';
+import { ResetWrapper } from '../../typography/ResetWrapper';
 
 export const TableWrapper = styled.table<{
   compact?: boolean;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SectionRow } from './SectionRow';
 import { TableWrapper } from './ArgsTable';
-import { ResetWrapper } from '../../typography/DocumentFormatting';
+import { ResetWrapper } from '../../typography/ResetWrapper';
 
 export default {
   component: SectionRow,