Merge branch 'next' into tech/bundle-preview-web

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 7.0.0-alpha.45 (October 28, 2022)
+
+#### Bug Fixes
+
+- Svelte: Fix regression causing all stories to error [#19653](https://github.com/storybooks/storybook/pull/19653)
+- CSF: Fix `StoryObj<typeof Cmp>` to work the same as old ComponentStoryObj [#19651](https://github.com/storybooks/storybook/pull/19651)
+
+#### Maintenance
+
+- Core: Misc dead code removal [#19654](https://github.com/storybooks/storybook/pull/19654)
+- Addon-actions: Move decorator to its own entrypoint [#19650](https://github.com/storybooks/storybook/pull/19650)
+
+#### Build
+
+- Build: Reduce resource classes [#19652](https://github.com/storybooks/storybook/pull/19652)
+
 ## 7.0.0-alpha.44 (October 27, 2022)
 
 #### Features

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -62,15 +62,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.0.0-alpha.44",
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/channels": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/addon-highlight": "7.0.0-alpha.45",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/channels": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "axe-core": "^4.2.0",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -102,7 +102,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -63,13 +63,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "dequal": "^2.0.2",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -107,7 +107,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Actions",
     "unsupportedFrameworks": [

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -62,13 +62,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
@@ -98,7 +98,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -57,16 +57,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/blocks": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-common": "7.0.0-alpha.44",
-    "@storybook/node-logger": "7.0.0-alpha.44",
-    "@storybook/store": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/blocks": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-common": "7.0.0-alpha.45",
+    "@storybook/node-logger": "7.0.0-alpha.45",
+    "@storybook/store": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
@@ -92,7 +92,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Controls",
     "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

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/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -52,22 +52,22 @@
     "@babel/plugin-transform-react-jsx": "^7.12.12",
     "@jest/transform": "^26.6.2",
     "@mdx-js/react": "^2.1.5",
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/blocks": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-common": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/csf-tools": "7.0.0-alpha.44",
-    "@storybook/docs-tools": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/blocks": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-common": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/csf-tools": "7.0.0-alpha.45",
+    "@storybook/docs-tools": "7.0.0-alpha.45",
     "@storybook/mdx2-csf": "0.1.0-next.0",
-    "@storybook/node-logger": "7.0.0-alpha.44",
-    "@storybook/postinstall": "7.0.0-alpha.44",
-    "@storybook/preview-web": "7.0.0-alpha.44",
-    "@storybook/source-loader": "7.0.0-alpha.44",
-    "@storybook/store": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/node-logger": "7.0.0-alpha.45",
+    "@storybook/postinstall": "7.0.0-alpha.45",
+    "@storybook/preview-web": "7.0.0-alpha.45",
+    "@storybook/source-loader": "7.0.0-alpha.45",
+    "@storybook/store": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "dequal": "^2.0.2",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",
@@ -94,7 +94,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

code/addons/docs/template/stories/docspage/basic.stories.ts

@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };

code/addons/docs/template/stories/docspage/description.stories.ts

@@ -6,6 +6,7 @@ export default {
   subcomponents: {
     Pre: globalThis.Components.Pre,
   },
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: {
     docs: {

code/addons/docs/template/stories/docspage/extract-description.stories.ts

@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: {
     docs: {

code/addons/docs/template/stories/docspage/iframe.stories.ts

@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Rendered in iframe' },
   parameters: {
     chromatic: { disable: true },

code/addons/docs/template/stories/docspage/overflow.stories.ts

@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Pre,
+  tags: ['docsPage'],
   args: {
     text: 'Demonstrates overflow',
     style: { width: 2000, height: 500, background: 'hotpink' },

code/addons/docs/template/stories/docspage/override.stories.ts

@@ -15,6 +15,7 @@ const Override = () => 'overridden';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: {
     chromatic: { disable: true },

code/addons/docs/template/stories/docspage/source.stories.ts

@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -41,24 +41,24 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.44",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.44",
-    "@storybook/addon-controls": "7.0.0-alpha.44",
-    "@storybook/addon-docs": "7.0.0-alpha.44",
-    "@storybook/addon-highlight": "7.0.0-alpha.44",
-    "@storybook/addon-measure": "7.0.0-alpha.44",
-    "@storybook/addon-outline": "7.0.0-alpha.44",
-    "@storybook/addon-toolbars": "7.0.0-alpha.44",
-    "@storybook/addon-viewport": "7.0.0-alpha.44",
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/core-common": "7.0.0-alpha.44",
-    "@storybook/node-logger": "7.0.0-alpha.44",
+    "@storybook/addon-actions": "7.0.0-alpha.45",
+    "@storybook/addon-backgrounds": "7.0.0-alpha.45",
+    "@storybook/addon-controls": "7.0.0-alpha.45",
+    "@storybook/addon-docs": "7.0.0-alpha.45",
+    "@storybook/addon-highlight": "7.0.0-alpha.45",
+    "@storybook/addon-measure": "7.0.0-alpha.45",
+    "@storybook/addon-outline": "7.0.0-alpha.45",
+    "@storybook/addon-toolbars": "7.0.0-alpha.45",
+    "@storybook/addon-viewport": "7.0.0-alpha.45",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/core-common": "7.0.0-alpha.45",
+    "@storybook/node-logger": "7.0.0-alpha.45",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/vue": "7.0.0-alpha.44",
+    "@storybook/vue": "7.0.0-alpha.45",
     "@types/jest": "^26.0.16",
     "typescript": "~4.6.3"
   },
@@ -112,5 +112,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3"
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532"
 }

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
@@ -50,8 +50,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
     "global": "^4.4.0"
   },
   "devDependencies": {
@@ -67,7 +67,7 @@
       "./src/highlight.ts"
     ]
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Highlight",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -59,15 +59,15 @@
   },
   "dependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-common": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/instrumenter": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-common": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/instrumenter": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "global": "^4.4.0",
     "jest-mock": "^27.0.6",
     "polished": "^4.2.2",
@@ -104,7 +104,7 @@
     ],
     "platform": "node"
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Interactions",
     "unsupportedFrameworks": [

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -59,12 +59,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45",
     "global": "^4.4.0",
     "react-sizeme": "^3.0.1",
     "upath": "^1.2.0"
@@ -94,7 +94,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Jest",
     "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
@@ -63,12 +63,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
     "@storybook/csf": "next",
-    "@storybook/router": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/router": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "global": "^4.4.0",
     "prop-types": "^15.7.2",
     "ts-dedent": "^2.0.0"
@@ -99,7 +99,7 @@
       "./src/react/index.ts"
     ]
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Links",
     "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
@@ -61,12 +61,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "global": "^4.4.0"
   },
   "devDependencies": {
@@ -94,7 +94,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Measure",
     "unsupportedFrameworks": [

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/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
@@ -64,12 +64,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "global": "^4.4.0",
     "ts-dedent": "^2.0.0"
   },
@@ -98,7 +98,7 @@
       "./src/preset/preview.tsx"
     ]
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Outline",
     "unsupportedFrameworks": [

code/addons/storyshots/storyshots-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",
@@ -38,13 +38,13 @@
   },
   "dependencies": {
     "@jest/transform": "^26.6.2",
-    "@storybook/addons": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "7.0.0-alpha.44",
-    "@storybook/core-client": "7.0.0-alpha.44",
-    "@storybook/core-common": "7.0.0-alpha.44",
-    "@storybook/core-webpack": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/client-api": "7.0.0-alpha.45",
+    "@storybook/core-client": "7.0.0-alpha.45",
+    "@storybook/core-common": "7.0.0-alpha.45",
+    "@storybook/core-webpack": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",
@@ -62,11 +62,11 @@
     "@angular/core": "^13.3.6",
     "@angular/platform-browser-dynamic": "^13.3.6",
     "@emotion/jest": "^11.8.0",
-    "@storybook/addon-docs": "7.0.0-alpha.44",
-    "@storybook/angular": "7.0.0-alpha.44",
-    "@storybook/react": "7.0.0-alpha.44",
-    "@storybook/vue": "7.0.0-alpha.44",
-    "@storybook/vue3": "7.0.0-alpha.44",
+    "@storybook/addon-docs": "7.0.0-alpha.45",
+    "@storybook/angular": "7.0.0-alpha.45",
+    "@storybook/react": "7.0.0-alpha.45",
+    "@storybook/vue": "7.0.0-alpha.45",
+    "@storybook/vue3": "7.0.0-alpha.45",
     "babel-loader": "^8.2.5",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
@@ -144,7 +144,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Storyshots",
     "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
     "@storybook/csf": "next",
-    "@storybook/node-logger": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/node-logger": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "@types/jest-image-snapshot": "^4.1.3",
     "jest-image-snapshot": "^4.3.0"
   },
@@ -45,7 +45,7 @@
     "puppeteer": "^2.0.0 || ^3.0.0"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "7.0.0-alpha.44",
+    "@storybook/addon-storyshots": "7.0.0-alpha.45",
     "puppeteer": ">=2.0.0"
   },
   "peerDependenciesMeta": {
@@ -56,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3"
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532"
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
@@ -53,13 +53,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/router": "7.0.0-alpha.44",
-    "@storybook/source-loader": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/router": "7.0.0-alpha.45",
+    "@storybook/source-loader": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45",
     "estraverse": "^5.2.0",
     "prop-types": "^15.7.2",
     "react-syntax-highlighter": "^15.5.0"
@@ -91,7 +91,7 @@
       "./src/preset.ts"
     ]
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Storysource",
     "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
@@ -57,11 +57,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44"
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45"
   },
   "devDependencies": {
     "typescript": "~4.6.3"
@@ -88,7 +88,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Toolbars",
     "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
@@ -59,12 +59,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/components": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/theming": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/components": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/theming": "7.0.0-alpha.45",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "prop-types": "^15.7.2"
@@ -95,7 +95,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3",
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532",
   "storybook": {
     "displayName": "Viewport",
     "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",

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/addon-actions.spec.ts

@@ -13,7 +13,7 @@ test.describe('addon-actions', () => {
   test('should trigger an action', async ({ page }) => {
     const sbPage = new SbPage(page);
 
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     const root = sbPage.previewRoot();
     const button = root.locator('button', { hasText: 'Button' });
     await button.click();

code/e2e-tests/addon-backgrounds.spec.ts

@@ -13,7 +13,7 @@ test.describe('addon-backgrounds', () => {
   test('should have a dark background', async ({ page }) => {
     const sbPage = new SbPage(page);
 
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.selectToolbar('[title="Change the background of the preview"]', '#dark');
 
     await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-color', 'rgb(51, 51, 51)');
@@ -22,7 +22,7 @@ test.describe('addon-backgrounds', () => {
   test('should apply a grid', async ({ page }) => {
     const sbPage = new SbPage(page);
 
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.selectToolbar('[title="Apply a grid to the preview"]');
 
     await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-image', /linear-gradient/);

code/e2e-tests/addon-controls.spec.ts

@@ -10,7 +10,7 @@ test.describe('addon-controls', () => {
     const sbPage = new SbPage(page);
     await sbPage.waitUntilLoaded();
 
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.viewAddonPanel('Controls');
 
     // Text input: Label

code/e2e-tests/addon-docs.spec.ts

@@ -22,7 +22,7 @@ test.describe('addon-docs', () => {
     );
 
     const sbPage = new SbPage(page);
-    await sbPage.navigateToStory('example-button', 'docs');
+    await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
     const root = sbPage.previewRoot();
     const toggles = root.locator('.docblock-code-toggle');
 

code/e2e-tests/addon-interactions.spec.ts

@@ -23,7 +23,7 @@ test.describe('addon-interactions', () => {
 
     const sbPage = new SbPage(page);
 
-    await sbPage.navigateToStory('example-page', 'logged-in');
+    await sbPage.navigateToStory('example/page', 'logged-in');
     await sbPage.viewAddonPanel('Interactions');
 
     const welcome = await sbPage.previewRoot().locator('.welcome');

code/e2e-tests/addon-viewport.spec.ts

@@ -14,7 +14,7 @@ test.describe('addon-viewport', () => {
     const sbPage = new SbPage(page);
 
     // Click on viewport button and select small mobile
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.selectToolbar('[title="Change the size of the preview"]', '#mobile1');
 
     // Check that Button story is still displayed

code/e2e-tests/util.ts

@@ -1,5 +1,7 @@
-/* eslint-disable jest/no-standalone-expect */
-import { expect, Page } from '@playwright/test';
+/* eslint-disable jest/no-standalone-expect, no-await-in-loop */
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+import { toId } from '@storybook/csf';
 
 export class SbPage {
   readonly page: Page;
@@ -8,15 +10,25 @@ export class SbPage {
     this.page = page;
   }
 
-  async navigateToStory(title: string, name: string) {
-    const titleId = title.replace(/ /g, '-').toLowerCase();
-    const storyId = name.replace(/ /g, '-').toLowerCase();
+  async openComponent(title: string, hasRoot = true) {
+    const parts = title.split('/');
+    for (let i = hasRoot ? 1 : 0; i < parts.length; i += 1) {
+      const parentId = toId(parts.slice(0, i + 1).join('/'));
 
-    const titleLink = this.page.locator(`#${titleId}`);
-    if ((await titleLink.getAttribute('aria-expanded')) === 'false') {
-      await titleLink.click();
+      const parentLink = this.page.locator(`#${parentId}`);
+
+      await expect(parentLink).toBeVisible();
+      if ((await parentLink.getAttribute('aria-expanded')) === 'false') {
+        await parentLink.click();
+      }
     }
+  }
 
+  async navigateToStory(title: string, name: string) {
+    await this.openComponent(title);
+
+    const titleId = toId(title);
+    const storyId = toId(name);
     const storyLinkId = `#${titleId}--${storyId}`;
     await this.page.waitForSelector(storyLinkId);
     const storyLink = this.page.locator(storyLinkId);

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-alpha.44",
+  "version": "7.0.0-alpha.45",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -34,19 +34,19 @@
     "prep": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.44",
-    "@storybook/api": "7.0.0-alpha.44",
-    "@storybook/builder-webpack5": "7.0.0-alpha.44",
-    "@storybook/client-logger": "7.0.0-alpha.44",
-    "@storybook/core-client": "7.0.0-alpha.44",
-    "@storybook/core-common": "7.0.0-alpha.44",
-    "@storybook/core-events": "7.0.0-alpha.44",
-    "@storybook/core-server": "7.0.0-alpha.44",
-    "@storybook/core-webpack": "7.0.0-alpha.44",
-    "@storybook/docs-tools": "7.0.0-alpha.44",
-    "@storybook/node-logger": "7.0.0-alpha.44",
-    "@storybook/store": "7.0.0-alpha.44",
-    "@storybook/types": "7.0.0-alpha.44",
+    "@storybook/addons": "7.0.0-alpha.45",
+    "@storybook/api": "7.0.0-alpha.45",
+    "@storybook/builder-webpack5": "7.0.0-alpha.45",
+    "@storybook/client-logger": "7.0.0-alpha.45",
+    "@storybook/core-client": "7.0.0-alpha.45",
+    "@storybook/core-common": "7.0.0-alpha.45",
+    "@storybook/core-events": "7.0.0-alpha.45",
+    "@storybook/core-server": "7.0.0-alpha.45",
+    "@storybook/core-webpack": "7.0.0-alpha.45",
+    "@storybook/docs-tools": "7.0.0-alpha.45",
+    "@storybook/node-logger": "7.0.0-alpha.45",
+    "@storybook/store": "7.0.0-alpha.45",
+    "@storybook/types": "7.0.0-alpha.45",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.23",
     "@types/react-dom": "^16.9.14",
@@ -120,5 +120,5 @@
     "access": "public"
   },
   "builders": "dist/types/builders/builders.json",
-  "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3"
+  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532"
 }