Merge pull request #17627 from storybookjs/tech/cleanup-typed-imports

change imports of types to be prefixed

addons/a11y/src/index.ts

@@ -1,4 +1,4 @@
-import { AnyFramework, DecoratorFunction } from '@storybook/csf';
+import type { AnyFramework, DecoratorFunction } from '@storybook/csf';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 

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

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme } from '@storybook/theming';
+import type { Theme } from '@storybook/theming';
 
 import Inspector from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';

addons/actions/src/preset/addArgsHelpers.test.ts

@@ -1,4 +1,4 @@
-import { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
 import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';
 
 describe('actions parameter enhancers', () => {

addons/backgrounds/src/decorators/withBackground.ts

@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {

addons/backgrounds/src/decorators/withGrid.ts

@@ -1,7 +1,7 @@
 import dedent from 'ts-dedent';
 import deprecate from 'util-deprecate';
 import { useMemo, useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

addons/docs/src/blocks/DocsContext.ts

@@ -1,8 +1,8 @@
 import { Context, createContext } from 'react';
 import { window as globalWindow } from 'global';
 
-import { DocsContextProps } from '@storybook/preview-web';
-import { AnyFramework } from '@storybook/csf';
+import type { DocsContextProps } from '@storybook/preview-web';
+import type { AnyFramework } from '@storybook/csf';
 
 export type { DocsContextProps };
 

addons/docs/src/blocks/enhanceSource.test.ts

@@ -1,4 +1,4 @@
-import { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
 import { enhanceSource } from './enhanceSource';
 
 const emptyContext: StoryContext = {

addons/docs/src/blocks/enhanceSource.ts

@@ -1,5 +1,6 @@
-import { Parameters } from '@storybook/addons';
-import { Story, combineParameters } from '@storybook/store';
+import type { Parameters } from '@storybook/addons';
+import type { Story } from '@storybook/store';
+import { combineParameters } from '@storybook/store';
 
 // ============================================================
 // START @storybook/source-loader/extract-source

addons/docs/src/blocks/useStory.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import { StoryId, AnyFramework } from '@storybook/csf';
-import { Story } from '@storybook/store';
+import type { StoryId, AnyFramework } from '@storybook/csf';
+import type { Story } from '@storybook/store';
 
 import { DocsContextProps } from './DocsContext';
 

addons/docs/src/frameworks/angular/compodoc.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-underscore-dangle */
 /* global window */
 
-import { ArgType, ArgTypes } from '@storybook/api';
+import type { ArgType, ArgTypes } from '@storybook/api';
 import { logger } from '@storybook/client-logger';
-import {
+import type {
   Argument,
   Class,
   CompodocJson,

addons/docs/src/frameworks/angular/sourceDecorator.ts

@@ -1,6 +1,6 @@
 import { addons, useEffect } from '@storybook/addons';
-import { PartialStoryFn } from '@storybook/csf';
-import { StoryContext, AngularFramework } from '@storybook/angular';
+import type { PartialStoryFn } from '@storybook/csf';
+import type { StoryContext, AngularFramework } from '@storybook/angular';
 import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer';
 import { SNIPPET_RENDERED, SourceType } from '../../shared';
 

addons/docs/src/frameworks/common/enhanceArgTypes.test.ts

@@ -1,5 +1,5 @@
-import { ArgTypes } from '@storybook/api';
-import { StrictInputType } from '@storybook/csf';
+import type { ArgTypes } from '@storybook/api';
+import type { StrictInputType } from '@storybook/csf';
 import { enhanceArgTypes } from './enhanceArgTypes';
 
 expect.addSnapshotSerializer({

addons/docs/src/frameworks/html/sourceDecorator.test.ts

@@ -1,4 +1,5 @@
-import { addons, StoryContext, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
 import { sourceDecorator } from './sourceDecorator';
 import { SNIPPET_RENDERED } from '../../shared';
 

addons/docs/src/frameworks/html/sourceDecorator.ts

@@ -1,8 +1,8 @@
 /* global window */
 import { addons, useEffect } from '@storybook/addons';
-import { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
 import dedent from 'ts-dedent';
-import { HtmlFramework } from '@storybook/html';
+import type { HtmlFramework } from '@storybook/html';
 
 import { SNIPPET_RENDERED, SourceType } from '../../shared';
 

addons/docs/src/frameworks/react/config.ts

@@ -1,5 +1,5 @@
-import { PartialStoryFn } from '@storybook/csf';
-import { ReactFramework } from '@storybook/react';
+import type { PartialStoryFn } from '@storybook/csf';
+import type { ReactFramework } from '@storybook/react';
 
 import { extractArgTypes } from './extractArgTypes';
 import { extractComponentDescription } from '../../lib/docgen';

addons/docs/src/frameworks/react/extractArgTypes.ts

@@ -1,5 +1,5 @@
-import { StrictArgTypes } from '@storybook/csf';
-import { PropDef, ArgTypesExtractor } from '../../lib/docgen';
+import type { StrictArgTypes } from '@storybook/csf';
+import type { PropDef, ArgTypesExtractor } from '../../lib/docgen';
 import { extractProps } from './extractProps';
 
 export const extractArgTypes: ArgTypesExtractor = (component) => {

addons/docs/src/frameworks/react/react-properties.test.ts

@@ -4,8 +4,8 @@ import fs from 'fs';
 
 import { transformFileSync, transformSync } from '@babel/core';
 import { inferControls } from '@storybook/store';
-import { StoryContext } from '@storybook/react';
-import { AnyFramework } from '@storybook/csf';
+import type { StoryContext } from '@storybook/react';
+import type { AnyFramework } from '@storybook/csf';
 import requireFromString from 'require-from-string';
 
 import { extractProps } from './extractProps';

addons/docs/src/frameworks/svelte/extractArgTypes.ts

@@ -1,4 +1,4 @@
-import { SBScalarType, StrictArgTypes } from '@storybook/csf';
+import type { SBScalarType, StrictArgTypes } from '@storybook/csf';
 import { logger } from '@storybook/client-logger';
 import type {
   SvelteComponentDoc,
@@ -7,7 +7,7 @@ import type {
   JSDocTypeConst,
 } from 'sveltedoc-parser/typings';
 
-import { ArgTypesExtractor } from '../../lib/docgen';
+import type { ArgTypesExtractor } from '../../lib/docgen';
 
 type ComponentWithDocgen = {
   __docgen: SvelteComponentDoc;

addons/docs/src/frameworks/svelte/sourceDecorator.test.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/api';
+import type { Args } from '@storybook/api';
 import { generateSvelteSource } from './sourceDecorator';
 
 expect.addSnapshotSerializer({

addons/docs/src/frameworks/svelte/sourceDecorator.ts

@@ -1,5 +1,5 @@
 import { addons, useEffect } from '@storybook/addons';
-import { ArgTypes, Args, StoryContext, AnyFramework } from '@storybook/csf';
+import type { ArgTypes, Args, StoryContext, AnyFramework } from '@storybook/csf';
 
 import { SourceType, SNIPPET_RENDERED } from '../../shared';
 

addons/docs/src/frameworks/vue/extractArgTypes.ts

@@ -1,11 +1,6 @@
-import { StrictArgTypes } from '@storybook/csf';
-import {
-  ArgTypesExtractor,
-  hasDocgen,
-  extractComponentProps,
-  DocgenInfo,
-  PropDef,
-} from '../../lib/docgen';
+import type { StrictArgTypes } from '@storybook/csf';
+import { hasDocgen, extractComponentProps } from '../../lib/docgen';
+import type { ArgTypesExtractor, DocgenInfo, PropDef } from '../../lib/docgen';
 import { convert } from '../../lib/convert';
 
 const SECTIONS = ['props', 'events', 'slots', 'methods'];

addons/docs/src/frameworks/vue/prepareForInline.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import Vue from 'vue';
-import { StoryContext, PartialStoryFn } from '@storybook/csf';
-import { VueFramework } from '@storybook/vue';
+import type { StoryContext, PartialStoryFn } from '@storybook/csf';
+import type { VueFramework } from '@storybook/vue';
 
 // Inspired by https://github.com/egoist/vue-to-react,
 // modified to store args as props in the root store

addons/docs/src/frameworks/vue/sourceDecorator.ts

@@ -1,10 +1,10 @@
 /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
 
-import { StoryContext } from '@storybook/csf';
+import type { StoryContext } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
 import type Vue from 'vue';
-import { VueFramework } from '@storybook/vue';
+import type { VueFramework } from '@storybook/vue';
 
 import { SourceType, SNIPPET_RENDERED } from '../../shared';
 

addons/docs/src/frameworks/vue3/extractArgTypes.ts

@@ -1,5 +1,6 @@
-import { StrictArgTypes } from '@storybook/csf';
-import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
+import type { StrictArgTypes } from '@storybook/csf';
+import { hasDocgen, extractComponentProps } from '../../lib/docgen';
+import type { ArgTypesExtractor } from '../../lib/docgen';
 import { convert } from '../../lib/convert';
 
 const SECTIONS = ['props', 'events', 'slots'];

addons/docs/src/frameworks/vue3/prepareForInline.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import * as Vue from 'vue';
-import { StoryContext, PartialStoryFn } from '@storybook/csf';
-import { app, VueFramework } from '@storybook/vue3';
+import { app } from '@storybook/vue3';
+import type { StoryContext, PartialStoryFn } from '@storybook/csf';
+import type { VueFramework } from '@storybook/vue3';
 
 // This is cast as `any` to workaround type errors caused by Vue 2 types
 const { render, h } = Vue as any;

addons/docs/src/frameworks/web-components/custom-elements.ts

@@ -1,5 +1,5 @@
 import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
-import { ArgType, ArgTypes } from '@storybook/api';
+import type { ArgType, ArgTypes } from '@storybook/api';
 import { logger } from '@storybook/client-logger';
 
 interface TagItem {

addons/docs/src/frameworks/web-components/sourceDecorator.test.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit-html';
 import { styleMap } from 'lit-html/directives/style-map';
-import { addons, StoryContext, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
 import { sourceDecorator } from './sourceDecorator';
 import { SNIPPET_RENDERED } from '../../shared';
 

addons/docs/src/frameworks/web-components/sourceDecorator.ts

@@ -1,8 +1,8 @@
 /* global window */
 import { render } from 'lit-html';
-import { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
 import { addons, useEffect } from '@storybook/addons';
-import { WebComponentsFramework } from '@storybook/web-components';
+import type { WebComponentsFramework } from '@storybook/web-components';
 
 import { SNIPPET_RENDERED, SourceType } from '../../shared';
 

addons/docs/src/lib/convert/flow/convert.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-case-declarations */
-import { SBType } from '@storybook/csf';
-import { FlowType, FlowSigType, FlowLiteralType } from './types';
+import type { SBType } from '@storybook/csf';
+import type { FlowType, FlowSigType, FlowLiteralType } from './types';
 
 const isLiteral = (type: FlowType) => type.name === 'literal';
 const toEnumOption = (element: FlowLiteralType) => element.value.replace(/['|"]/g, '');

addons/docs/src/lib/convert/proptypes/convert.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-case-declarations */
 import mapValues from 'lodash/mapValues';
-import { SBType } from '@storybook/csf';
-import { PTType } from './types';
+import type { SBType } from '@storybook/csf';
+import type { PTType } from './types';
 import { includesQuotes, trimQuotes } from '../utils';
 
 const SIGNATURE_REGEXP = /^\(.*\) => /;

addons/docs/src/lib/convert/typescript/convert.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-case-declarations */
-import { SBType } from '@storybook/csf';
-import { TSType, TSSigType } from './types';
+import type { SBType } from '@storybook/csf';
+import type { TSType, TSSigType } from './types';
 
 const convertSig = (type: TSSigType) => {
   switch (type.type) {

addons/docs/src/lib/docgen/types.ts

@@ -1,6 +1,6 @@
-import { StrictArgTypes } from '@storybook/csf';
-import { PropDef } from './PropDef';
-import { Component } from '../../blocks/types';
+import type { StrictArgTypes } from '@storybook/csf';
+import type { PropDef } from './PropDef';
+import type { Component } from '../../blocks/types';
 
 export type PropsExtractor = (component: Component) => { rows?: PropDef[] } | null;
 

addons/interactions/src/preset/argsEnhancers.ts

@@ -1,12 +1,11 @@
 import { addons } from '@storybook/addons';
 import type { Args } from '@storybook/addons';
-import { window as globalWindow } from 'global';
 import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
-import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
+import type { AnyFramework, ArgsEnhancer } from '@storybook/csf';
 import { instrument } from '@storybook/instrumenter';
 import { ModuleMocker } from 'jest-mock';
 
-const JestMock = new ModuleMocker(globalWindow);
+const JestMock = new ModuleMocker(global);
 const fn = JestMock.fn.bind(JestMock);
 
 // Aliasing `fn` to `action` here, so we get a more descriptive label in the UI.

addons/links/src/preview.ts

@@ -2,7 +2,8 @@ import global from 'global';
 import qs from 'qs';
 import { addons, makeDecorator } from '@storybook/addons';
 import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
-import { toId, StoryId, StoryName, ComponentTitle } from '@storybook/csf';
+import type { StoryId, StoryName, ComponentTitle } from '@storybook/csf';
+import { toId } from '@storybook/csf';
 import { PARAM_KEY } from './constants';
 
 const { document, HTMLElement } = global;

addons/measure/src/withMeasure.ts

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import { useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 import { drawSelectedElement } from './box-model/visualizer';
 import { init, rescale, destroy } from './box-model/canvas';
 import { deepElementFromPoint } from './util';

addons/outline/src/withOutline.ts

@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { clearStyles, addOutlineStyles } from './helpers';
 import { PARAM_KEY } from './constants';

addons/storyshots/storyshots-core/src/frameworks/Loader.ts

@@ -1,8 +1,8 @@
-import { AnyFramework } from '@storybook/csf';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { AnyFramework } from '@storybook/csf';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 import { ClientApi as ClientApiClass } from '@storybook/client-api';
-import { StoryshotsOptions } from '../api/StoryshotsOptions';
-import { SupportedFramework } from './SupportedFramework';
+import type { StoryshotsOptions } from '../api/StoryshotsOptions';
+import type { SupportedFramework } from './SupportedFramework';
 
 export type RenderTree = (story: any, context?: any, options?: any) => any;
 

addons/storyshots/storyshots-core/src/frameworks/configure.ts

@@ -1,17 +1,18 @@
 import fs from 'fs';
 import path from 'path';
-import {
-  toRequireContext,
-  StoriesEntry,
-  normalizeStoriesEntry,
-  NormalizedStoriesSpecifier,
-} from '@storybook/core-common';
+import type { NormalizedStoriesSpecifier, StoriesEntry } from '@storybook/core-common';
+import { toRequireContext, normalizeStoriesEntry } from '@storybook/core-common';
 import registerRequireContextHook from '@storybook/babel-plugin-require-context-hook/register';
 import global from 'global';
-import { AnyFramework, ArgsEnhancer, ArgTypesEnhancer, DecoratorFunction } from '@storybook/csf';
+import type {
+  AnyFramework,
+  ArgsEnhancer,
+  ArgTypesEnhancer,
+  DecoratorFunction,
+} from '@storybook/csf';
 
 import { ClientApi } from './Loader';
-import { StoryshotsOptions } from '../api/StoryshotsOptions';
+import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 
 registerRequireContextHook();
 

addons/toolbars/src/types.ts

@@ -1,5 +1,5 @@
-import { IconsProps } from '@storybook/components';
-import { ArgType } from '@storybook/api';
+import type { IconsProps } from '@storybook/components';
+import type { ArgType } from '@storybook/api';
 
 export type ToolbarShortcutType = 'next' | 'previous' | 'reset';
 

addons/viewport/src/shortcuts.ts

@@ -1,4 +1,4 @@
-import { API } from '@storybook/api';
+import type { API } from '@storybook/api';
 import { ADDON_ID } from './constants';
 
 const getCurrentViewportIndex = (viewportsKeys: string[], current: string): number =>

app/angular/src/builders/build-storybook/index.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import { from, Observable, of, throwError } from 'rxjs';
-import { CLIOptions } from '@storybook/core-common';
+import type { CLIOptions } from '@storybook/core-common';
 import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 import { sync as findUpSync } from 'find-up';