change imports of types & interfaces to be clearly defined as type

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

@@ -10,8 +10,8 @@ const List = styled.div({
   paddingBottom: 4,
   paddingRight: 4,
   paddingTop: 4,
-  fontWeight: 400,
-});
+  fontWeight: '400',
+} as any);
 
 const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
   const maxWidthBeforeBreak = 407;

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';
 

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

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

app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ArgTypes } from '@storybook/api';
+import type { ArgTypes } from '@storybook/api';
 import { computesTemplateSourceFromComponent } from './ComputesTemplateFromComponent';
 import { ButtonAccent, InputComponent, ISomeInterface } from './__testfixtures__/input.component';
 

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

@@ -1,6 +1,6 @@
-import { Type } from '@angular/core';
-import { ArgType, ArgTypes } from '@storybook/api';
-import { ICollection } from '../types';
+import type { Type } from '@angular/core';
+import type { ArgType, ArgTypes } from '@storybook/api';
+import type { ICollection } from '../types';
 import {
   ComponentInputsOutputs,
   getComponentDecoratorMetadata,

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

@@ -5,11 +5,11 @@ import { FormsModule } from '@angular/forms';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { BrowserModule } from '@angular/platform-browser';
 import { Observable, ReplaySubject, Subscriber } from 'rxjs';
-import { PartialStoryFn } from '@storybook/csf';
+import type { PartialStoryFn } from '@storybook/csf';
 import { AppComponent } from './components/app.component';
 import { STORY } from './app.token';
-import { NgModuleMetadata, StoryFnAngularReturnType } from '../types';
-import { AngularFramework } from '../types-6-0';
+import type { NgModuleMetadata, StoryFnAngularReturnType } from '../types';
+import type { AngularFramework } from '../types-6-0';
 
 const { document } = global;
 

app/angular/src/client/preview/decorateStory.test.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output } from '@angular/core';
-import { DecoratorFunction, StoryContext } from '@storybook/addons';
+import type { DecoratorFunction, StoryContext } from '@storybook/addons';
 import { componentWrapperDecorator } from './decorators';
 
 import decorateStory from './decorateStory';

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

@@ -1,8 +1,8 @@
-import { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/csf';
+import type { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
 
-import { AngularFramework } from './types-6-0';
+import type { AngularFramework } from './types-6-0';
 
 export default function decorateStory(
   mainStoryFn: LegacyStoryFn<AngularFramework>,

app/angular/src/client/preview/decorators.test.ts

@@ -1,4 +1,5 @@
-import { addons, mockChannel, StoryContext } from '@storybook/addons';
+import { addons, mockChannel } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
 
 import { Component } from '@angular/core';
 import { moduleMetadata } from './decorators';

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

@@ -1,10 +1,10 @@
 /* eslint-disable no-param-reassign */
-import { Type } from '@angular/core';
-import { DecoratorFunction, StoryContext } from '@storybook/csf';
+import type { Type } from '@angular/core';
+import type { DecoratorFunction, StoryContext } from '@storybook/csf';
 import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
 import { isComponent } from './angular-beta/utils/NgComponentAnalyzer';
-import { ICollection, NgModuleMetadata } from './types';
-import { AngularFramework } from './types-6-0';
+import type { ICollection, NgModuleMetadata } from './types';
+import type { AngularFramework } from './types-6-0';
 
 // We use `any` here as the default type rather than `Args` because we need something that is
 // castable to any component-specific args type when the user is being careful.

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

@@ -1,11 +1,11 @@
 /* eslint-disable prefer-destructuring */
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 import { start } from '@storybook/core/client';
 import './globals';
 import { renderToDOM, render } from './render';
 import decorateStory from './decorateStory';
-import { IStorybookSection } from './types';
-import { AngularFramework } from './types-6-0';
+import type { IStorybookSection } from './types';
+import type { AngularFramework } from './types-6-0';
 
 const framework = 'angular';
 

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

@@ -1,8 +1,8 @@
-import { RenderContext } from '@storybook/store';
-import { ArgsStoryFn } from '@storybook/csf';
+import type { RenderContext } from '@storybook/store';
+import type { ArgsStoryFn } from '@storybook/csf';
 
 import { renderNgApp } from './angular/helpers';
-import { AngularFramework } from './types-6-0';
+import type { AngularFramework } from './types-6-0';
 
 import { RendererFactory } from './angular-beta/RendererFactory';
 

app/angular/src/client/preview/types-6-0.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   Args,
   Parameters as DefaultParameters,
   StoryContext as DefaultStoryContext,
@@ -7,7 +7,7 @@ import {
   AnnotatedStoryFn,
 } from '@storybook/csf';
 
-import { StoryFnAngularReturnType } from './types';
+import type { StoryFnAngularReturnType } from './types';
 
 export type { Args, ArgTypes } from '@storybook/csf';
 

app/angular/src/client/preview/types-7-0.ts

@@ -1,5 +1,4 @@
-import { Args } from '@storybook/csf';
-
+import type { Args } from '@storybook/csf';
 import type { StoryObj } from './types-6-0';
 
 export type { StoryFn, StoryObj, Meta } from './types-6-0';

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

@@ -1,5 +1,5 @@
 import path from 'path';
-import { Configuration } from 'webpack';
+import type { Configuration } from 'webpack';
 import { logger } from '@storybook/node-logger';
 import { normalize, getSystemPath } from '@angular-devkit/core';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

app/angular/src/server/options.ts

@@ -1,5 +1,5 @@
 import { sync } from 'read-pkg-up';
-import { LoadOptions, Options as CoreOptions } from '@storybook/core-common';
+import type { LoadOptions, Options as CoreOptions } from '@storybook/core-common';
 
 import { BuilderContext } from '@angular-devkit/architect';
 import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';

app/angular/src/types/index.ts

@@ -1,4 +1,4 @@
-import { StorybookConfig as BaseConfig } from '@storybook/core-common';
+import type { StorybookConfig as BaseConfig } from '@storybook/core-common';
 
 export interface StorybookConfig extends BaseConfig {
   angularOptions?: {

app/angular/standalone.d.ts

@@ -1,5 +1,5 @@
-import { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common';
-import { BuilderContext } from '@angular-devkit/architect';
+import type { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common';
+import type { BuilderContext } from '@angular-devkit/architect';
 
 export type StandaloneOptions = Partial<
   CLIOptions &

app/ember/src/server/framework-preset-babel-ember.ts

@@ -1,6 +1,7 @@
-import { TransformOptions } from '@babel/core';
+import type { TransformOptions } from '@babel/core';
 import { precompile } from 'ember-source/dist/ember-template-compiler';
-import { findDistEsm, StorybookConfig, Options } from '@storybook/core-common';
+import { findDistEsm } from '@storybook/core-common';
+import type { StorybookConfig, Options } from '@storybook/core-common';
 
 let emberOptions: any;
 

app/ember/src/server/options.ts

@@ -1,5 +1,5 @@
 import { sync } from 'read-pkg-up';
-import { LoadOptions } from '@storybook/core-common';
+import type { LoadOptions } from '@storybook/core-common';
 
 export default {
   packageJson: sync({ cwd: __dirname }).packageJson,

app/html/src/client/preview/index.ts

@@ -1,11 +1,11 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 import { HtmlFramework } from './types-6-0';
 
 import './globals';
 import { renderToDOM } from './render';
-import { IStorybookSection } from './types';
+import type { IStorybookSection } from './types';
 
 const framework = 'html';
 

app/html/src/client/preview/types-6-0.ts

@@ -1,6 +1,11 @@
-import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
+import type {
+  Args,
+  ComponentAnnotations,
+  StoryAnnotations,
+  AnnotatedStoryFn,
+} from '@storybook/csf';
 
-import { StoryFnHtmlReturnType } from './types';
+import type { StoryFnHtmlReturnType } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
 

app/html/src/client/preview/types-7-0.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 
 import type { StoryObj } from './types-6-0';
 

app/html/src/server/framework-preset-html.ts

@@ -1,6 +1,6 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { Configuration } from 'webpack';
-import { findDistEsm, StorybookConfig } from '@storybook/core-common';
+import { findDistEsm } from '@storybook/core-common';
+import type { Configuration } from 'webpack';
+import type { StorybookConfig } from '@storybook/core-common';
 
 export function webpack(config: Configuration) {
   config.module.rules.push({

app/html/src/server/options.ts

@@ -1,5 +1,5 @@
 import { sync } from 'read-pkg-up';
-import { LoadOptions } from '@storybook/core-common';
+import type { LoadOptions } from '@storybook/core-common';
 
 export default {
   packageJson: sync({ cwd: __dirname }).packageJson,

app/preact/src/client/preview/index.ts

@@ -1,11 +1,11 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
 import { renderToDOM } from './render';
-import { IStorybookSection } from './types';
-import { PreactFramework } from './types-6-0';
+import type { IStorybookSection } from './types';
+import type { PreactFramework } from './types-6-0';
 
 export interface ClientApi extends ClientStoryApi<PreactFramework['storyResult']> {
   setAddon(addon: any): void;

app/preact/src/client/preview/types-6-0.ts

@@ -1,6 +1,11 @@
-import { AnyComponent } from 'preact';
-import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
-import { StoryFnPreactReturnType } from './types';
+import type { AnyComponent } from 'preact';
+import type {
+  Args,
+  ComponentAnnotations,
+  StoryAnnotations,
+  AnnotatedStoryFn,
+} from '@storybook/csf';
+import type { StoryFnPreactReturnType } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 

app/preact/src/client/preview/types-7-0.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 
 import type { StoryObj } from './types-6-0';
 

app/preact/src/server/framework-preset-preact.ts

@@ -1,7 +1,8 @@
 import path from 'path';
-import { TransformOptions } from '@babel/core';
-import { Configuration } from 'webpack';
-import { findDistEsm, StorybookConfig } from '@storybook/core-common';
+import type { TransformOptions } from '@babel/core';
+import type { Configuration } from 'webpack';
+import { findDistEsm } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/core-common';
 
 export function babelDefault(config: TransformOptions): TransformOptions {
   return {

app/preact/src/server/options.ts

@@ -1,5 +1,5 @@
 import { sync } from 'read-pkg-up';
-import { LoadOptions } from '@storybook/core-common';
+import type { LoadOptions } from '@storybook/core-common';
 
 export default {
   packageJson: sync({ cwd: __dirname }).packageJson,

app/react/src/client/preview/types-6-0.ts

@@ -1,6 +1,11 @@
-import { ComponentType } from 'react';
-import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
-import { StoryFnReactReturnType } from './types';
+import type { ComponentType } from 'react';
+import type {
+  Args,
+  ComponentAnnotations,
+  StoryAnnotations,
+  AnnotatedStoryFn,
+} from '@storybook/csf';
+import type { StoryFnReactReturnType } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 

app/react/src/client/preview/types-7-0.ts

@@ -1,5 +1,5 @@
-import { JSXElementConstructor } from 'react';
-import { Args } from '@storybook/csf';
+import type { JSXElementConstructor } from 'react';
+import type { Args } from '@storybook/csf';
 
 import type { StoryObj } from './types-6-0';
 import type { ComponentStoryObj } from './types-6-3';

app/react/src/server/options.ts

@@ -1,5 +1,5 @@
 import { sync } from 'read-pkg-up';
-import { LoadOptions } from '@storybook/core-common';
+import type { LoadOptions } from '@storybook/core-common';
 
 export default {
   packageJson: sync({ cwd: __dirname }).packageJson,

app/react/src/server/preset.ts

@@ -1,4 +1,5 @@
-import { findDistEsm, StorybookConfig } from '@storybook/core-common';
+import { findDistEsm } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/core-common';
 
 export const config: StorybookConfig['config'] = (entries = []) => [
   ...entries,

app/react/types/index.ts

@@ -1,4 +1,4 @@
-import { StorybookConfig as BaseConfig } from '@storybook/core-common';
+import type { StorybookConfig as BaseConfig } from '@storybook/core-common';
 
 /**
  * The interface for Storybook configuration in `main.ts` files.

app/server/src/client/preview/index.ts

@@ -1,9 +1,9 @@
 import { start } from '@storybook/core/client';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
 import { renderToDOM, render } from './render';
-import { IStorybookSection, ServerFramework } from './types';
+import type { IStorybookSection, ServerFramework } from './types';
 
 const framework = 'server';
 

app/server/src/client/preview/render.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-param-reassign */
 import global from 'global';
 import dedent from 'ts-dedent';
-import { RenderContext } from '@storybook/store';
+import type { RenderContext } from '@storybook/store';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
-import { StoryFn, Args, ArgTypes } from '@storybook/csf';
-import { FetchStoryHtmlType, ServerFramework } from './types';
+import type { StoryFn, Args, ArgTypes } from '@storybook/csf';
+import type { FetchStoryHtmlType, ServerFramework } from './types';
 
 const { fetch, Node } = global;
 

app/server/src/client/preview/types.ts

@@ -1,4 +1,4 @@
-import { StoryContext } from '@storybook/csf';
+import type { StoryContext } from '@storybook/csf';
 
 export type { RenderContext } from '@storybook/core';
 

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

@@ -1,7 +1,7 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { Configuration } from 'webpack';
 import path from 'path';
-import { findDistEsm, StorybookConfig } from '@storybook/core-common';
+import { findDistEsm } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/core-common';
+import type { Configuration } from 'webpack';
 
 export function webpack(config: Configuration) {
   config.module.rules.push({

app/server/src/server/options.ts

@@ -1,5 +1,5 @@
 import { sync } from 'read-pkg-up';
-import { LoadOptions } from '@storybook/core-common';
+import type { LoadOptions } from '@storybook/core-common';
 
 export default {
   packageJson: sync({ cwd: __dirname }).packageJson,

app/svelte/src/client/preview/decorators.ts

@@ -1,4 +1,4 @@
-import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
+import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import SlotDecorator from '@storybook/svelte/templates/SlotDecorator.svelte';

app/svelte/src/client/preview/render.ts

@@ -1,5 +1,5 @@
 import global from 'global';
-import { ArgsStoryFn } from '@storybook/csf';
+import type { ArgsStoryFn } from '@storybook/csf';
 import type { RenderContext } from '@storybook/store';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';

app/svelte/src/server/framework-preset-svelte.ts

@@ -1,6 +1,6 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { Configuration } from 'webpack';
-import { findDistEsm, Options, StorybookConfig } from '@storybook/core-common';
+import { findDistEsm } from '@storybook/core-common';
+import type { Options, StorybookConfig } from '@storybook/core-common';
+import type { Configuration } from 'webpack';
 
 export async function webpack(config: Configuration, options: Options): Promise<Configuration> {
   const { preprocess = undefined, loader = {} } = await options.presets.apply(

app/vue/src/client/preview/decorateStory.ts

@@ -1,9 +1,9 @@
 import Vue, { VueConstructor, ComponentOptions } from 'vue';
-import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
+import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import { StoryFnVueReturnType } from './types';
-import { VueFramework } from './types-6-0';
+import type { StoryFnVueReturnType } from './types';
+import type { VueFramework } from './types-6-0';
 import { extractProps } from './util';
 import { VALUES } from './render';
 

app/vue/src/client/preview/index.ts

@@ -1,10 +1,10 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
-import { IStorybookSection } from './types';
-import { VueFramework } from './types-6-0';
+import type { IStorybookSection } from './types';
+import type { VueFramework } from './types-6-0';
 import { renderToDOM, render } from './render';
 import { decorateStory } from './decorateStory';
 

app/vue/src/client/preview/render.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-underscore-dangle */
 import dedent from 'ts-dedent';
 import Vue from 'vue';
-import { RenderContext } from '@storybook/store';
-import { ArgsStoryFn } from '@storybook/csf';
-import { VueFramework } from './types-6-0';
+import type { RenderContext } from '@storybook/store';
+import type { ArgsStoryFn } from '@storybook/csf';
+import type { VueFramework } from './types-6-0';
 
 export const COMPONENT = 'STORYBOOK_COMPONENT';
 export const VALUES = 'STORYBOOK_VALUES';

app/vue/src/client/preview/types-6-0.ts

@@ -1,6 +1,11 @@
-import { Component, AsyncComponent } from 'vue';
-import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
-import { StoryFnVueReturnType } from './types';
+import type { Component, AsyncComponent } from 'vue';
+import type {
+  Args,
+  ComponentAnnotations,
+  StoryAnnotations,
+  AnnotatedStoryFn,
+} from '@storybook/csf';
+import type { StoryFnVueReturnType } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 

app/vue/src/client/preview/types-7-0.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 
 import type { StoryObj } from './types-6-0';
 

app/vue/src/server/framework-preset-vue.ts

@@ -1,8 +1,9 @@
 /* eslint-disable no-param-reassign */
 import { VueLoaderPlugin } from 'vue-loader';
-import type { Configuration } from 'webpack';
+import { findDistEsm } from '@storybook/core-common';
 
-import { findDistEsm, Options, TypescriptConfig, StorybookConfig } from '@storybook/core-common';
+import type { Configuration } from 'webpack';
+import type { Options, TypescriptConfig, StorybookConfig } from '@storybook/core-common';
 
 export async function webpack(config: Configuration, { presets }: Options) {
   const typescriptOptions = await presets.apply<TypescriptConfig>('typescript', {} as any);

app/vue3/src/client/preview/decorateStory.ts

@@ -1,9 +1,9 @@
 import type { ConcreteComponent, Component, ComponentOptions } from 'vue';
 import { h } from 'vue';
-import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
+import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import { VueFramework } from './types-6-0';
+import type { VueFramework } from './types-6-0';
 
 /*
   This normalizes a functional component into a render method in ComponentOptions.

app/vue3/src/client/preview/index.ts

@@ -1,10 +1,10 @@
 import type { App } from 'vue';
 import { start } from '@storybook/core/client';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
-import { IStorybookSection } from './types';
-import { VueFramework } from './types-6-0';
+import type { IStorybookSection } from './types';
+import type { VueFramework } from './types-6-0';
 import { decorateStory } from './decorateStory';
 
 import { render, renderToDOM, storybookApp } from './render';

app/vue3/src/client/preview/render.ts

@@ -1,7 +1,7 @@
 import dedent from 'ts-dedent';
 import { createApp, h, shallowRef, ComponentPublicInstance } from 'vue';
-import { RenderContext } from '@storybook/store';
-import { ArgsStoryFn } from '@storybook/csf';
+import type { RenderContext } from '@storybook/store';
+import type { ArgsStoryFn } from '@storybook/csf';
 
 import { StoryFnVueReturnType } from './types';
 import { VueFramework } from './types-6-0';

app/vue3/src/client/preview/types-6-0.ts

@@ -1,6 +1,11 @@
-import { ConcreteComponent } from 'vue';
-import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
-import { StoryFnVueReturnType } from './types';
+import type { ConcreteComponent } from 'vue';
+import type {
+  Args,
+  ComponentAnnotations,
+  StoryAnnotations,
+  AnnotatedStoryFn,
+} from '@storybook/csf';
+import type { StoryFnVueReturnType } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 

app/vue3/src/client/preview/types-7-0.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 
 import type { StoryObj } from './types-6-0';
 

app/vue3/src/server/framework-preset-vue3.ts

@@ -1,6 +1,7 @@
 import { VueLoaderPlugin } from 'vue-loader';
 import { Configuration, DefinePlugin } from 'webpack';
-import { findDistEsm, StorybookConfig } from '@storybook/core-common';
+import { findDistEsm } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/core-common';
 
 export function webpack(config: Configuration): Configuration {
   return {

app/vue3/src/server/options.ts

@@ -1,5 +1,5 @@
 import { sync } from 'read-pkg-up';
-import { LoadOptions } from '@storybook/core-common';
+import type { LoadOptions } from '@storybook/core-common';
 
 export default {
   packageJson: sync({ cwd: __dirname }).packageJson,

app/web-components/src/client/preview/index.ts

@@ -1,11 +1,11 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
 import { renderToDOM } from './render';
-import { IStorybookSection } from './types';
-import { WebComponentsFramework } from './types-6-0';
+import type { IStorybookSection } from './types';
+import type { WebComponentsFramework } from './types-6-0';
 
 const framework = 'web-components';
 

app/web-components/src/client/preview/types-6-0.ts

@@ -1,5 +1,10 @@
-import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
-import { StoryFnHtmlReturnType } from './types';
+import type {
+  Args,
+  ComponentAnnotations,
+  StoryAnnotations,
+  AnnotatedStoryFn,
+} from '@storybook/csf';
+import type { StoryFnHtmlReturnType } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 

app/web-components/src/client/preview/types-7-0.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 
 import type { StoryObj } from './types-6-0';
 

app/web-components/src/client/preview/types.ts

@@ -1,4 +1,4 @@
-import { TemplateResult, SVGTemplateResult } from 'lit-html';
+import type { TemplateResult, SVGTemplateResult } from 'lit-html';
 
 export type { RenderContext } from '@storybook/core';
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';