Merge branch 'next' into shilman/version-check-telemetry

.circleci/config.yml

@@ -223,7 +223,7 @@ jobs:
             yarn lint
   check:
     executor:
-      class: large
+      class: xlarge
       name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:

code/addons/a11y/src/a11yRunner.ts

@@ -1,7 +1,7 @@
 import global from 'global';
 import { addons } from '@storybook/addons';
 import { EVENTS } from './constants';
-import { A11yParameters } from './params';
+import type { A11yParameters } from './params';
 
 const { document, window: globalWindow } = global;
 

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

@@ -4,16 +4,16 @@ import { styled } from '@storybook/theming';
 
 import { ActionBar, Icons, ScrollArea } from '@storybook/components';
 
-import { AxeResults } from 'axe-core';
+import type { AxeResults } from 'axe-core';
 import { useChannel, useParameter, useStorybookState } from '@storybook/api';
-// eslint-disable-next-line import/no-cycle
+
 import { Report } from './Report';
-// eslint-disable-next-line import/no-cycle
+
 import { Tabs } from './Tabs';
 
 import { useA11yContext } from './A11yContext';
 import { EVENTS } from '../constants';
-import { A11yParameters } from '../params';
+import type { A11yParameters } from '../params';
 
 export enum RuleType {
   VIOLATION,

code/addons/a11y/src/components/A11yContext.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AxeResults } from 'axe-core';
+import type { AxeResults } from 'axe-core';
 import { render, act } from '@testing-library/react';
 import * as api from '@storybook/api';
 import { STORY_CHANGED } from '@storybook/core-events';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { themes, convert } from '@storybook/theming';
-import { Result } from 'axe-core';
+import type { Result } from 'axe-core';
 import { useChannel, useAddonState, useStorybookApi } from '@storybook/api';
 import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
 import { HIGHLIGHT } from '@storybook/addon-highlight';

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

@@ -1,11 +1,12 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { styled } from '@storybook/theming';
 
-import { NodeResult } from 'axe-core';
+import type { NodeResult } from 'axe-core';
 import { Rules } from './Rules';
-// eslint-disable-next-line import/no-cycle
-import { RuleType } from '../A11YPanel';
+
+import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
 
 const Item = styled.li({

code/addons/a11y/src/components/Report/HighlightToggle.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { NodeResult } from 'axe-core';
+import type { NodeResult } from 'axe-core';
 import HighlightToggle from './HighlightToggle';
 import { A11yContext } from '../A11yContext';
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from '@storybook/theming';
 
-import { NodeResult } from 'axe-core';
+import type { NodeResult } from 'axe-core';
 import { useA11yContext } from '../A11yContext';
 
 interface ToggleProps {

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

@@ -1,7 +1,8 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { styled } from '@storybook/theming';
-import { Result } from 'axe-core';
+import type { Result } from 'axe-core';
 
 const Wrapper = styled.div({
   padding: 12,

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

@@ -3,13 +3,13 @@ import React, { Fragment, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { Icons } from '@storybook/components';
 
-import { Result } from 'axe-core';
+import type { Result } from 'axe-core';
 import { Info } from './Info';
-// eslint-disable-next-line import/no-cycle
+
 import { Elements } from './Elements';
 import { Tags } from './Tags';
-// eslint-disable-next-line import/no-cycle
-import { RuleType } from '../A11YPanel';
+
+import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
 
 const Wrapper = styled.div(({ theme }) => ({

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

@@ -1,7 +1,8 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
 import { Badge } from '@storybook/components';
-import { CheckResult } from 'axe-core';
+import type { CheckResult } from 'axe-core';
 import { SizeMe } from 'react-sizeme';
 
 const List = styled.div({

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

@@ -1,7 +1,8 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { styled } from '@storybook/theming';
-import { TagValue } from 'axe-core';
+import type { TagValue } from 'axe-core';
 
 const Wrapper = styled.div({
   display: 'flex',

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

@@ -1,10 +1,11 @@
-import React, { Fragment, FC } from 'react';
+import type { FC } from 'react';
+import React, { Fragment } from 'react';
 import { Placeholder } from '@storybook/components';
-import { Result } from 'axe-core';
-// eslint-disable-next-line import/no-cycle
+import type { Result } from 'axe-core';
+
 import { Item } from './Item';
-// eslint-disable-next-line import/no-cycle
-import { RuleType } from '../A11YPanel';
+
+import type { RuleType } from '../A11YPanel';
 
 export interface ReportProps {
   items: Result[];

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
 import { styled } from '@storybook/theming';
-import { NodeResult, Result } from 'axe-core';
+import type { NodeResult, Result } from 'axe-core';
 import { SizeMe } from 'react-sizeme';
 import HighlightToggle from './Report/HighlightToggle';
-// eslint-disable-next-line import/no-cycle
-import { RuleType } from './A11YPanel';
+
+import type { RuleType } from './A11YPanel';
 import { useA11yContext } from './A11yContext';
 
 // TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality

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

@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+import React, { useState } from 'react';
 import { Global, styled } from '@storybook/theming';
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 

code/addons/a11y/src/manager.tsx

@@ -3,7 +3,8 @@ import { addons, types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { VisionSimulator } from './components/VisionSimulator';
 import { A11YPanel } from './components/A11YPanel';
-import { A11yContextProvider, Results } from './components/A11yContext';
+import type { Results } from './components/A11yContext';
+import { A11yContextProvider } from './components/A11yContext';
 
 addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {

code/addons/a11y/src/params.ts

@@ -1,4 +1,4 @@
-import { ElementContext, Spec, RunOptions } from 'axe-core';
+import type { ElementContext, Spec, RunOptions } from 'axe-core';
 
 export interface Setup {
   element?: ElementContext;

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

@@ -1,4 +1,5 @@
-import React, { FC, Fragment } from 'react';
+import type { FC } from 'react';
+import React, { Fragment } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import type { Theme } from '@storybook/theming';
 
@@ -6,7 +7,7 @@ import { Inspector } from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';
 
 import { Action, InspectorContainer, Counter } from './style';
-import { ActionDisplay } from '../../models';
+import type { ActionDisplay } from '../../models';
 
 const UnstyledWrapped: FC<{ className?: string }> = ({ children, className }) => (
   <ScrollArea horizontal vertical className={className}>

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

@@ -6,7 +6,7 @@ import { STORY_CHANGED } from '@storybook/core-events';
 
 import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
 import { EVENT_ID } from '../..';
-import { ActionDisplay } from '../../models';
+import type { ActionDisplay } from '../../models';
 
 interface ActionLoggerProps {
   active: boolean;

code/addons/actions/src/models/ActionDisplay.ts

@@ -1,4 +1,4 @@
-import { ActionOptions } from './ActionOptions';
+import type { ActionOptions } from './ActionOptions';
 
 export interface ActionDisplay {
   id: string;

code/addons/actions/src/models/ActionsFunction.ts

@@ -1,5 +1,5 @@
-import { ActionOptions } from './ActionOptions';
-import { ActionsMap } from './ActionsMap';
+import type { ActionOptions } from './ActionOptions';
+import type { ActionsMap } from './ActionsMap';
 
 export interface ActionsFunction {
   <T extends string>(handlerMap: Record<T, string>, options?: ActionOptions): ActionsMap<T>;

code/addons/actions/src/models/ActionsMap.ts

@@ -1,3 +1,3 @@
-import { HandlerFunction } from './HandlerFunction';
+import type { HandlerFunction } from './HandlerFunction';
 
 export type ActionsMap<T extends string = string> = Record<T, HandlerFunction>;

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

@@ -1,7 +1,7 @@
 import uuidv4 from 'uuid-browser/v4';
 import { addons } from '@storybook/addons';
 import { EVENT_ID } from '../constants';
-import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
+import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
 import { config } from './configureActions';
 
 type SyntheticEvent = any; // import('react').SyntheticEvent;

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

@@ -1,5 +1,5 @@
 import { action } from './action';
-import { ActionsFunction, ActionOptions, ActionsMap } from '../models';
+import type { ActionsFunction, ActionOptions, ActionsMap } from '../models';
 import { config } from './configureActions';
 
 export const actions: ActionsFunction = (...args: any[]) => {

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

@@ -1,4 +1,4 @@
-import { ActionOptions } from '../models';
+import type { ActionOptions } from '../models';
 
 export const config: ActionOptions = {
   depth: 10,

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

@@ -1,4 +1,5 @@
-import React, { FC, Fragment, useCallback, useMemo, memo } from 'react';
+import type { FC } from 'react';
+import React, { Fragment, useCallback, useMemo, memo } from 'react';
 import memoize from 'memoizerific';
 
 import { useParameter, useGlobals } from '@storybook/api';
@@ -7,7 +8,12 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
-import { BackgroundSelectorItem, Background, BackgroundsParameter, GlobalState } from '../types';
+import type {
+  BackgroundSelectorItem,
+  Background,
+  BackgroundsParameter,
+  GlobalState,
+} from '../types';
 import { getBackgroundColorByName } from '../helpers';
 
 const createBackgroundSelectorItem = memoize(1000)(

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

@@ -1,4 +1,5 @@
-import React, { FC, memo } from 'react';
+import type { FC } from 'react';
+import React, { memo } from 'react';
 
 import { useGlobals, useParameter } from '@storybook/api';
 import { Icons, IconButton } from '@storybook/components';

code/addons/backgrounds/src/helpers/index.ts

@@ -3,7 +3,7 @@ import { dedent } from 'ts-dedent';
 
 import { logger } from '@storybook/client-logger';
 
-import { Background } from '../types';
+import type { Background } from '../types';
 
 const { document, window } = global;
 

code/addons/backgrounds/src/types/index.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 export interface GlobalState {
   name: string | undefined;

code/addons/controls/src/ControlsPanel.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
 import {
   PureArgsTable as ArgsTable,

code/addons/controls/template/stories/basics.stories.ts

@@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {
   component: null,

code/addons/controls/template/stories/conditional.stories.ts

@@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {
   component: null,

code/addons/controls/template/stories/disable.stories.ts

@@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {
   component: null,

code/addons/controls/template/stories/filters.stories.ts

@@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {
   component: null,

code/addons/controls/template/stories/issues.stories.ts

@@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {
   component: null,

code/addons/controls/template/stories/matchers.stories.ts

@@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {
   component: null,

code/addons/controls/template/stories/sorting.stories.ts

@@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {
   component: null,

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

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

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

@@ -4,9 +4,8 @@ import { type Call, CallStates, type ControlStates } from '@storybook/instrument
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 
-// eslint-disable-next-line import/no-cycle
 import { Subnav } from './Subnav';
-// eslint-disable-next-line import/no-cycle
+
 import { Interaction } from './Interaction';
 
 export interface Controls {

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

@@ -1,7 +1,8 @@
 import { ObjectInspector } from '@devtools-ds/object-inspector';
 import type { Call, CallRef, ElementRef } from '@storybook/instrumenter';
 import { useTheme } from '@storybook/theming';
-import React, { Fragment, ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React, { Fragment } from 'react';
 
 const colorsLight = {
   base: '#444',

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

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+import React from 'react';
 import {
   Button,
   IconButton,
@@ -9,12 +10,13 @@ import {
   WithTooltip,
   Bar,
 } from '@storybook/components';
-import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
+import type { Call, ControlStates } from '@storybook/instrumenter';
+import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
 import { StatusBadge } from './StatusBadge';
-// eslint-disable-next-line import/no-cycle
-import { Controls } from './InteractionsPanel';
+
+import type { Controls } from './InteractionsPanel';
 
 const SubnavWrapper = styled.div(({ theme }) => ({
   background: theme.background.app,

code/addons/jest/src/components/Message.tsx

@@ -1,4 +1,5 @@
-import React, { Fragment, FC } from 'react';
+import type { FC } from 'react';
+import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
 
 const positiveConsoleRegex = /\[32m(.*?)\[39m/;

code/addons/jest/src/components/Panel.tsx

@@ -1,9 +1,11 @@
-import React, { FC, Fragment } from 'react';
+import type { FC } from 'react';
+import React, { Fragment } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
 import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components';
 import { SizeMe } from 'react-sizeme';
 import Result from './Result';
-import provideJestResult, { Test } from '../hoc/provideJestResult';
+import type { Test } from '../hoc/provideJestResult';
+import provideJestResult from '../hoc/provideJestResult';
 
 const StatusTypes = {
   PASSED_TYPE: 'passed',

code/addons/jest/src/hoc/provideJestResult.tsx

@@ -1,4 +1,5 @@
-import React, { Component as ReactComponent, ComponentType } from 'react';
+import type { ComponentType } from 'react';
+import React, { Component as ReactComponent } from 'react';
 import { STORY_CHANGED } from '@storybook/core-events';
 import type { API } from '@storybook/api';
 import { ADD_TESTS } from '../shared';

code/addons/links/src/react/components/link.tsx

@@ -1,4 +1,5 @@
-import React, { MouseEvent, PureComponent, ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
+import React, { PureComponent } from 'react';
 
 import { navigate, hrefTo } from '../../utils';
 

code/addons/measure/src/box-model/visualizer.ts

@@ -4,7 +4,8 @@
  */
 import global from 'global';
 import { draw } from './canvas';
-import { labelStacks, Label, LabelStack } from './labels';
+import type { Label, LabelStack } from './labels';
+import { labelStacks } from './labels';
 
 const colors = {
   margin: '#f6b26ba8',

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

@@ -1,7 +1,7 @@
-import { IOptions } from 'glob';
-import { Stories2SnapsConverter } from '../Stories2SnapsConverter';
-import { SupportedFramework } from '../frameworks';
-import { RenderTree } from '../frameworks/Loader';
+import type { IOptions } from 'glob';
+import type { Stories2SnapsConverter } from '../Stories2SnapsConverter';
+import type { SupportedFramework } from '../frameworks';
+import type { RenderTree } from '../frameworks/Loader';
 
 export interface TestMethodOptions {
   story: any;

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

@@ -1,5 +1,5 @@
 import type { AnyFramework, Addon_Loadable } from '@storybook/types';
-import { ClientApi as ClientApiClass } from '@storybook/client-api';
+import type { ClientApi as ClientApiClass } from '@storybook/client-api';
 import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 import type { SupportedFramework } from './SupportedFramework';
 

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

@@ -13,7 +13,7 @@ import { normalizeStoriesEntry } from '@storybook/core-common';
 import registerRequireContextHook from '@storybook/babel-plugin-require-context-hook/register';
 import global from 'global';
 
-import { ClientApi } from './Loader';
+import type { ClientApi } from './Loader';
 import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 
 registerRequireContextHook();

code/addons/storyshots/storyshots-core/src/frameworks/frameworkLoader.ts

@@ -1,7 +1,7 @@
 /* eslint-disable global-require,import/no-dynamic-require */
 import fs from 'fs';
 import path from 'path';
-import { Loader } from './Loader';
+import type { Loader } from './Loader';
 import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 
 const loaderScriptName = 'loader.js';

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

@@ -1,5 +1,5 @@
 import 'jest-specific-snapshot';
-import {
+import type {
   StoryshotsTestMethod,
   TestMethodOptions,
   StoryshotsOptions,

code/addons/storyshots/storyshots-puppeteer/src/axeTest.ts

@@ -1,5 +1,6 @@
 import AxePuppeteer from '@axe-core/puppeteer';
-import { defaultAxeConfig, AxeConfig } from './config';
+import type { AxeConfig } from './config';
+import { defaultAxeConfig } from './config';
 import { puppeteerTest } from './puppeteerTest';
 
 export const axeTest = (customConfig: Partial<AxeConfig> = {}) => {

code/addons/storyshots/storyshots-puppeteer/src/config.ts

@@ -1,5 +1,5 @@
-import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
-import { ScreenshotOptions, Browser, Page, ElementHandle, LaunchOptions } from 'puppeteer';
+import type { MatchImageSnapshotOptions } from 'jest-image-snapshot';
+import type { ScreenshotOptions, Browser, Page, ElementHandle, LaunchOptions } from 'puppeteer';
 
 type PuppeteerLifeCycleEvent = 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
 

code/addons/storyshots/storyshots-puppeteer/src/imageSnapshot.ts

@@ -1,5 +1,6 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import { defaultImageSnapshotConfig, ImageSnapshotConfig } from './config';
+import type { ImageSnapshotConfig } from './config';
+import { defaultImageSnapshotConfig } from './config';
 import { puppeteerTest } from './puppeteerTest';
 
 expect.extend({ toMatchImageSnapshot });

code/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts

@@ -1,7 +1,8 @@
-import { Browser, Page } from 'puppeteer';
+import type { Browser, Page } from 'puppeteer';
 import { logger } from '@storybook/node-logger';
 import { constructUrl } from './url';
-import { defaultPuppeteerTestConfig, PuppeteerTestConfig } from './config';
+import type { PuppeteerTestConfig } from './config';
+import { defaultPuppeteerTestConfig } from './config';
 
 export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) => {
   const {

code/addons/storysource/src/StoryPanel.tsx

@@ -11,7 +11,7 @@ import {
 // @ts-expect-error Typedefs don't currently expose `createElement` even though it exists
 import { createElement as createSyntaxHighlighterElement } from 'react-syntax-highlighter';
 
-import { SourceBlock, LocationsMap } from '@storybook/source-loader';
+import type { SourceBlock, LocationsMap } from '@storybook/source-loader';
 
 const StyledStoryLink = styled(Link)<{ to: string; key: string }>(({ theme }) => ({
   display: 'block',

code/addons/toolbars/src/components/ToolbarManager.tsx

@@ -1,9 +1,10 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 import { useGlobalTypes } from '@storybook/api';
 import { Separator } from '@storybook/components';
 import { ToolbarMenuList } from './ToolbarMenuList';
 import { normalizeArgType } from '../utils/normalize-toolbar-arg-type';
-import { ToolbarArgType } from '../types';
+import type { ToolbarArgType } from '../types';
 
 /**
  * A smart component for handling manager-preview interactions.

code/addons/toolbars/src/components/ToolbarMenuButton.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 import { Icons, IconButton, type IconsProps } from '@storybook/components';
 
 interface ToolbarMenuButtonProps {

code/addons/toolbars/src/components/ToolbarMenuList.tsx

@@ -1,11 +1,13 @@
-import React, { useCallback, FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
+import React, { useCallback } from 'react';
 import { useGlobals } from '@storybook/api';
 import { deprecate } from '@storybook/client-logger';
 import { WithTooltip, TooltipLinkList } from '@storybook/components';
 import { ToolbarMenuButton } from './ToolbarMenuButton';
-import { withKeyboardCycle, WithKeyboardCycleProps } from '../hoc/withKeyboardCycle';
+import type { WithKeyboardCycleProps } from '../hoc/withKeyboardCycle';
+import { withKeyboardCycle } from '../hoc/withKeyboardCycle';
 import { getSelectedIcon, getSelectedTitle } from '../utils/get-selected';
-import { ToolbarMenuProps } from '../types';
+import type { ToolbarMenuProps } from '../types';
 import { ToolbarMenuListItem } from './ToolbarMenuListItem';
 
 type ItemProps = {

code/addons/toolbars/src/components/ToolbarMenuListItem.tsx

@@ -1,6 +1,7 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import { Icons } from '@storybook/components';
-import { ToolbarItem } from '../types';
+import type { ToolbarItem } from '../types';
 
 interface ListItem {
   id: string;

code/addons/toolbars/src/hoc/withKeyboardCycle.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useCallback } from 'react';
 import { useGlobals, useStorybookApi } from '@storybook/api';
 import { createCycleValueArray } from '../utils/create-cycle-value-array';
 import { registerShortcuts } from '../utils/register-shortcuts';
-import { ToolbarMenuProps } from '../types';
+import type { ToolbarMenuProps } from '../types';
 
 export type WithKeyboardCycleProps = {
   cycleValues?: string[];

code/addons/toolbars/src/utils/create-cycle-value-array.ts

@@ -1,4 +1,4 @@
-import { ToolbarItem, ToolbarItemType } from '../types';
+import type { ToolbarItem, ToolbarItemType } from '../types';
 
 const disallowedCycleableItemTypes: Array<ToolbarItemType> = ['reset'];
 

code/addons/toolbars/src/utils/get-selected.ts

@@ -1,4 +1,4 @@
-import { ToolbarItem } from '../types';
+import type { ToolbarItem } from '../types';
 
 interface GetSelectedItemProps {
   currentValue: string | null;

code/addons/toolbars/template/stories/globals.stories.ts

@@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 const greetingForLocale = (locale: string) => {
   switch (locale) {

code/addons/viewport/src/Tool.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-fallthrough */
-import React, { Fragment, ReactNode, useEffect, useRef, FC, memo } from 'react';
+import type { ReactNode, FC } from 'react';
+import React, { Fragment, useEffect, useRef, memo } from 'react';
 import memoize from 'memoizerific';
 
 import { styled, Global, type Theme, withTheme } from '@storybook/theming';
@@ -10,7 +11,7 @@ import { useStorybookApi, useParameter, useAddonState } from '@storybook/api';
 import { registerShortcuts } from './shortcuts';
 import { PARAM_KEY, ADDON_ID } from './constants';
 import { MINIMAL_VIEWPORTS } from './defaults';
-import { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models';
+import type { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models';
 
 interface ViewportItem {
   id: string;

code/addons/viewport/src/defaults.ts

@@ -1,4 +1,4 @@
-import { ViewportMap } from './models';
+import type { ViewportMap } from './models';
 
 export const INITIAL_VIEWPORTS: ViewportMap = {
   iphone5: {

code/addons/viewport/src/models/ViewportAddonParameter.ts

@@ -1,4 +1,4 @@
-import { ViewportMap } from './Viewport';
+import type { ViewportMap } from './Viewport';
 
 export interface ViewportAddonParameter {
   disable?: boolean;

code/e2e-tests/util.ts

@@ -1,5 +1,6 @@
 /* eslint-disable jest/no-standalone-expect, no-await-in-loop */
-import { expect, Page } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { toId } from '@storybook/csf';
 
 export class SbPage {

code/frameworks/angular/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      { prefer: 'no-type-imports', disallowTypeAnnotations: false },
+    ],
+  },
+};

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -1,13 +1,13 @@
 import {
   BuilderContext,
   BuilderOutput,
+  Target,
   createBuilder,
   targetFromTargetString,
-  Target,
 } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
-import { from, Observable, of, throwError } from 'rxjs';
-import type { CLIOptions } from '@storybook/types';
+import { Observable, from, of, throwError } from 'rxjs';
+import { CLIOptions } from '@storybook/types';
 import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 import { sync as findUpSync } from 'find-up';
 import { sync as readUpSync } from 'read-pkg-up';
@@ -18,7 +18,7 @@ import {
 } from '@angular-devkit/build-angular';
 
 import { buildStaticStandalone } from '@storybook/core-server';
-import type { StandaloneOptions } from '../utils/standalone-options';
+import { StandaloneOptions } from '../utils/standalone-options';
 import { runCompodoc } from '../utils/run-compodoc';
 import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
 

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -1,9 +1,9 @@
 import {
   BuilderContext,
   BuilderOutput,
+  Target,
   createBuilder,
   targetFromTargetString,
-  Target,
 } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import {
@@ -12,13 +12,13 @@ import {
   StylePreprocessorOptions,
 } from '@angular-devkit/build-angular';
 import { from, Observable, of } from 'rxjs';
-import type { CLIOptions } from '@storybook/types';
+import { CLIOptions } from '@storybook/types';
 import { map, switchMap, mapTo } from 'rxjs/operators';
 import { sync as findUpSync } from 'find-up';
 import { sync as readUpSync } from 'read-pkg-up';
 
 import { buildDevStandalone } from '@storybook/core-server';
-import type { StandaloneOptions } from '../utils/standalone-options';
+import { StandaloneOptions } from '../utils/standalone-options';
 import { runCompodoc } from '../utils/run-compodoc';
 import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
 

code/frameworks/angular/src/builders/utils/standalone-options.ts

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

code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts

@@ -1,7 +1,7 @@
-import { enableProdMode, NgModule, PlatformRef } from '@angular/core';
+import { NgModule, PlatformRef, enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { BehaviorSubject, Subject } from 'rxjs';
+import { Subject, BehaviorSubject } from 'rxjs';
 import { stringify } from 'telejson';
 import { ICollection, StoryFnAngularReturnType, Parameters } from '../types';
 import { createStorybookModule, getStorybookModuleMetadata } from './StorybookModule';

code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.test.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
-import type { API_ArgTypes } from '@storybook/types';
+import { API_ArgTypes } from '@storybook/types';
 import { computesTemplateSourceFromComponent } from './ComputesTemplateFromComponent';
-import { ButtonAccent, InputComponent, ISomeInterface } from './__testfixtures__/input.component';
+import { ISomeInterface, ButtonAccent, InputComponent } from './__testfixtures__/input.component';
 
 describe('angular source decorator', () => {
   it('With no props should generate simple tag', () => {

code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.ts

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

code/frameworks/angular/src/client/angular-beta/StorybookModule.test.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, NgModule, Output, Type } from '@angular/core';
+import { NgModule, Type, Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { TestBed } from '@angular/core/testing';
 import { BrowserModule } from '@angular/platform-browser';

code/frameworks/angular/src/client/angular-beta/StorybookModule.ts

@@ -1,4 +1,4 @@
-import { NgModule, Type } from '@angular/core';
+import { Type, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { Subject } from 'rxjs';

code/frameworks/angular/src/client/angular-beta/StorybookProvider.ts

@@ -1,5 +1,5 @@
-import { InjectionToken, NgZone, Provider } from '@angular/core';
-import { Observable, Subject, Subscriber } from 'rxjs';
+import { Provider, InjectionToken, NgZone } from '@angular/core';
+import { Subject, Subscriber, Observable } from 'rxjs';
 import { ICollection } from '../types';
 
 export const STORY_PROPS = new InjectionToken<Subject<ICollection | undefined>>('STORY_PROPS');

code/frameworks/angular/src/client/angular-beta/StorybookWrapperComponent.ts

@@ -1,11 +1,11 @@
 import {
   AfterViewInit,
-  ChangeDetectorRef,
-  Component,
   ElementRef,
-  Inject,
   OnDestroy,
   Type,
+  ChangeDetectorRef,
+  Component,
+  Inject,
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';

code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts

@@ -1,6 +1,7 @@
 import {
-  Component,
   ComponentFactory,
+  Type,
+  Component,
   ComponentFactoryResolver,
   Directive,
   EventEmitter,
@@ -9,7 +10,6 @@ import {
   Input,
   Output,
   Pipe,
-  Type,
 } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';

code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.ts

@@ -1,10 +1,10 @@
 import {
+  Type,
   Component,
   Directive,
   Input,
   Output,
   Pipe,
-  Type,
   ɵReflectionCapabilities as ReflectionCapabilities,
 } from '@angular/core';
 

code/frameworks/angular/src/client/angular/app.component.ts

@@ -5,15 +5,15 @@
 import {
   Component,
   Inject,
-  OnInit,
   ViewChild,
   ViewContainerRef,
-  ComponentFactoryResolver,
-  OnDestroy,
   EventEmitter,
-  SimpleChanges,
   SimpleChange,
   ChangeDetectorRef,
+  OnInit,
+  ComponentFactoryResolver,
+  OnDestroy,
+  SimpleChanges,
 } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 import { first } from 'rxjs/operators';

code/frameworks/angular/src/client/angular/helpers.ts

@@ -1,13 +1,13 @@
 import global from 'global';
-import { enableProdMode, NgModule, Component, NgModuleRef, Type, NgZone } from '@angular/core';
+import { NgModuleRef, Type, enableProdMode, NgModule, Component, NgZone } from '@angular/core';
 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 type { PartialStoryFn } from '@storybook/types';
+import { Subscriber, Observable, ReplaySubject } from 'rxjs';
+import { PartialStoryFn } from '@storybook/types';
 import { AppComponent } from './app.component';
 import { STORY } from './app.token';
-import type { NgModuleMetadata, StoryFnAngularReturnType, AngularFramework } from '../types';
+import { NgModuleMetadata, StoryFnAngularReturnType, AngularFramework } from '../types';
 
 const { document } = global;
 

code/frameworks/angular/src/client/decorateStory.test.ts

@@ -1,9 +1,9 @@
 import { Component, Input, Output } from '@angular/core';
-import type { DecoratorFunction, StoryContext } from '@storybook/types';
+import { DecoratorFunction, StoryContext } from '@storybook/types';
 import { componentWrapperDecorator } from './decorators';
 
 import decorateStory from './decorateStory';
-import type { AngularFramework } from './types';
+import { AngularFramework } from './types';
 
 describe('decorateStory', () => {
   describe('angular behavior', () => {

code/frameworks/angular/src/client/decorateStory.ts

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

code/frameworks/angular/src/client/decorators.test.ts

@@ -1,4 +1,4 @@
-import type { Addon_StoryContext } from '@storybook/types';
+import { Addon_StoryContext } from '@storybook/types';
 
 import { Component } from '@angular/core';
 import { moduleMetadata } from './decorators';

code/frameworks/angular/src/client/decorators.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-param-reassign */
-import type { Type } from '@angular/core';
-import type { DecoratorFunction, StoryContext } from '@storybook/types';
+import { Type } from '@angular/core';
+import { DecoratorFunction, StoryContext } from '@storybook/types';
 import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
 import { isComponent } from './angular-beta/utils/NgComponentAnalyzer';
-import type { ICollection, NgModuleMetadata, AngularFramework } from './types';
+import { ICollection, NgModuleMetadata, AngularFramework } from './types';
 
 // 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.

code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts

@@ -4,13 +4,13 @@
 /* eslint-disable no-underscore-dangle */
 import {
   Component,
-  ElementRef,
   EventEmitter,
   HostBinding,
   HostListener,
   Input,
   Output,
   ViewChild,
+  ElementRef,
 } from '@angular/core';
 
 export const exportedConstant = 'An exported constant';

code/frameworks/angular/src/client/docs/compodoc.ts

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

code/frameworks/angular/src/client/docs/config.ts

@@ -1,5 +1,5 @@
 import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
-import type { Parameters, DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
+import { Parameters, DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
 import { extractArgTypes, extractComponentDescription } from './compodoc';
 import { sourceDecorator } from './sourceDecorator';
 

code/frameworks/angular/src/client/docs/sourceDecorator.ts

@@ -1,5 +1,5 @@
 import { addons, useEffect } from '@storybook/addons';
-import type { PartialStoryFn } from '@storybook/types';
+import { PartialStoryFn } from '@storybook/types';
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { StoryContext, AngularFramework } from '../types';
 import { computesTemplateSourceFromComponent } from '../../renderer';

code/frameworks/angular/src/client/public-api.ts

@@ -1,9 +1,9 @@
 /* eslint-disable prefer-destructuring */
-import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
+import { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 import { renderToDOM, render } from './render';
 import decorateStory from './decorateStory';
-import type { AngularFramework } from './types';
+import { AngularFramework } from './types';
 
 export * from './public-types';
 

code/frameworks/angular/src/client/public-types.ts

@@ -1,9 +1,4 @@
-import type {
-  AnnotatedStoryFn,
-  Args,
-  ComponentAnnotations,
-  StoryAnnotations,
-} from '@storybook/types';
+import { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations } from '@storybook/types';
 import { AngularFramework } from './types';
 
 export type { Args, ArgTypes } from '@storybook/types';

code/frameworks/angular/src/client/render.ts

@@ -1,7 +1,7 @@
-import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
+import { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 
 import { renderNgApp } from './angular/helpers';
-import type { AngularFramework } from './types';
+import { AngularFramework } from './types';
 
 import { RendererFactory } from './angular-beta/RendererFactory';
 

code/frameworks/angular/src/client/types.ts

@@ -1,4 +1,4 @@
-import type {
+import {
   Parameters as DefaultParameters,
   StoryContext as DefaultStoryContext,
 } from '@storybook/types';

code/frameworks/angular/src/preset.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import type { PresetProperty } from '@storybook/types';
+import { PresetProperty } from '@storybook/types';
 import { StorybookConfig } from './types';
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [

code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts

@@ -1,10 +1,10 @@
 import path from 'path';
-import type { Configuration } from 'webpack';
+import { Configuration } from 'webpack';
 import { logger } from '@storybook/node-logger';
 import { normalize, getSystemPath } from '@angular-devkit/core';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import { webpackFinal } from './framework-preset-angular-cli';
-import type { PresetOptions } from './preset-options';
+import { PresetOptions } from './preset-options';
 
 const testPath = __dirname;
 

code/frameworks/angular/src/server/framework-preset-angular-cli.ts

@@ -1,14 +1,14 @@
 import webpack from 'webpack';
 import { logger } from '@storybook/node-logger';
-import { targetFromTargetString, BuilderContext, Target } from '@angular-devkit/architect';
+import { BuilderContext, Target, targetFromTargetString } from '@angular-devkit/architect';
 import { sync as findUpSync } from 'find-up';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
-import { logging, JsonObject } from '@angular-devkit/core';
+import { JsonObject, logging } from '@angular-devkit/core';
 import { moduleIsAvailable } from './utils/module-is-available';
 import { getWebpackConfig as getWebpackConfig13_x_x } from './angular-cli-webpack-13.x.x';
-import type { PresetOptions } from './preset-options';
+import { PresetOptions } from './preset-options';
 import {
   getDefaultProjectName,
   findAngularProjectTarget,

code/frameworks/angular/src/server/framework-preset-angular-docs.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import type { StorybookConfig } from '@storybook/types';
+import { StorybookConfig } from '@storybook/types';
 import { hasDocsOrControls } from '@storybook/docs-tools';
 
 export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => {

code/frameworks/angular/src/server/framework-preset-angular-ivy.ts

@@ -1,9 +1,9 @@
 import { Configuration } from 'webpack';
 import * as path from 'path';
-import type { Preset } from '@storybook/types';
+import { Preset } from '@storybook/types';
 
-import type { PresetOptions } from './preset-options';
-import type { AngularOptions } from '../types';
+import { PresetOptions } from './preset-options';
+import { AngularOptions } from '../types';
 
 /**
  * Source : https://github.com/angular/angular-cli/blob/ebccb5de4a455af813c5e82483db6af20666bdbd/packages/angular_devkit/build_angular/src/utils/load-esm.ts#L23