step 4

code/addons/a11y/package.json

@@ -69,6 +69,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "axe-core": "^4.2.0",

code/addons/a11y/src/a11yRunner.test.ts

@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { EVENTS } from './constants';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 const mockedAddons = addons as jest.Mocked<typeof addons>;
 
 describe('a11yRunner', () => {

code/addons/a11y/src/a11yRunner.ts

@@ -1,5 +1,5 @@
 import global from 'global';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { EVENTS } from './constants';
 import type { A11yParameters } from './params';
 

code/addons/a11y/src/manager.test.tsx

@@ -1,10 +1,10 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import * as api from '@storybook/api';
 import { PANEL_ID } from './constants';
 import './manager';
 
 jest.mock('@storybook/api');
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 const mockedApi = api as unknown as jest.Mocked<api.API>;
 mockedApi.getAddonState = jest.fn();
 const mockedAddons = addons as jest.Mocked<typeof addons>;

code/addons/a11y/src/manager.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/preview-api';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { VisionSimulator } from './components/VisionSimulator';
 import { A11YPanel } from './components/A11YPanel';

code/addons/actions/package.json

@@ -68,6 +68,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "dequal": "^2.0.2",

code/addons/actions/src/decorator.ts

@@ -1,5 +1,5 @@
 import global from 'global';
-import { useEffect, makeDecorator } from '@storybook/addons';
+import { useEffect, makeDecorator } from '@storybook/preview-api';
 import { actions } from './runtime/actions';
 
 import { PARAM_KEY } from './constants';

code/addons/actions/src/manager.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/preview-api';
 import { STORY_CHANGED } from '@storybook/core-events';
 import ActionLogger from './containers/ActionLogger';
 import { ADDON_ID, EVENT_ID, PANEL_ID, PARAM_KEY } from './constants';

code/addons/actions/src/runtime/__tests__/action.test.js

@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { action, configureActions } from '../..';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 
 const createChannel = () => {
   const channel = { emit: jest.fn() };

code/addons/actions/src/runtime/__tests__/actions.test.js

@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { actions } from '../..';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 
 const createChannel = () => {
   const channel = { emit: jest.fn() };

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

@@ -1,5 +1,5 @@
 import uuidv4 from 'uuid-browser/v4';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { EVENT_ID } from '../constants';
 import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
 import { config } from './configureActions';

code/addons/backgrounds/package.json

@@ -67,6 +67,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0",

code/addons/backgrounds/src/decorators/withBackground.ts

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

code/addons/backgrounds/src/decorators/withGrid.ts

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/preview-api';
 import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addGridStyle } from '../helpers';

code/addons/backgrounds/src/manager.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/preview-api';
 
 import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';

code/addons/controls/package.json

@@ -64,6 +64,7 @@
     "@storybook/components": "7.0.0-alpha.47",
     "@storybook/core-common": "7.0.0-alpha.47",
     "@storybook/node-logger": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",

code/addons/controls/src/manager.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/preview-api';
 import { AddonPanel } from '@storybook/components';
 import { type API, useArgTypes } from '@storybook/api';
 import { ControlsPanel } from './ControlsPanel';

code/addons/docs/package.json

@@ -64,6 +64,7 @@
     "@storybook/mdx2-csf": "next",
     "@storybook/node-logger": "7.0.0-alpha.47",
     "@storybook/postinstall": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/preview-web": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",

code/addons/essentials/package.json

@@ -54,6 +54,7 @@
     "@storybook/api": "7.0.0-alpha.47",
     "@storybook/core-common": "7.0.0-alpha.47",
     "@storybook/node-logger": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

code/addons/highlight/package.json

@@ -52,6 +52,7 @@
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "global": "^4.4.0"
   },
   "devDependencies": {

code/addons/highlight/src/highlight.ts

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import global from 'global';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { STORY_CHANGED } from '@storybook/core-events';
 import { HIGHLIGHT, RESET_HIGHLIGHT, HIGHLIGHT_STYLE_ID } from './constants';
 

code/addons/interactions/package.json

@@ -66,6 +66,7 @@
     "@storybook/core-common": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
     "@storybook/instrumenter": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0",

code/addons/interactions/src/manager.tsx

@@ -1,4 +1,4 @@
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/preview-api';
 
 import { ADDON_ID, PANEL_ID } from './constants';
 import { Panel } from './Panel';

code/addons/interactions/src/preset/preview.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import type {
   AnyFramework,

code/addons/jest/package.json

@@ -64,6 +64,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",
     "global": "^4.4.0",
     "react-sizeme": "^3.0.1",

code/addons/jest/src/index.ts

@@ -1,6 +1,6 @@
 /// <reference types="webpack-env" />
 
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { normalize, sep } from 'upath';
 import { ADD_TESTS, defineJestParameter } from './shared';
 

code/addons/jest/src/manager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 
 import Panel from './components/Panel';

code/addons/links/package.json

@@ -67,6 +67,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
     "@storybook/csf": "next",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/router": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0",

code/addons/links/src/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 
 import EVENTS, { ADDON_ID } from './constants';
 

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SELECT_STORY } from '@storybook/core-events';
 import LinkTo from './link';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 jest.mock('global', () => ({
   document: {
     location: {

code/addons/links/src/utils.test.ts

@@ -1,9 +1,9 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { SELECT_STORY } from '@storybook/core-events';
 
 import { linkTo, hrefTo } from './utils';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 jest.mock('global', () => ({
   // @ts-expect-error (Converted from ts-ignore)
   document: global.document,

code/addons/links/src/utils.ts

@@ -1,5 +1,5 @@
 import global from 'global';
-import { addons, makeDecorator } from '@storybook/addons';
+import { addons, makeDecorator } from '@storybook/preview-api';
 import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
 import type { StoryId, StoryName, ComponentTitle } from '@storybook/types';
 import { toId } from '@storybook/csf';

code/addons/measure/package.json

@@ -66,6 +66,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0"
   },

code/addons/measure/src/manager.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/preview-api';
 
 import { ADDON_ID, TOOL_ID } from './constants';
 import { Tool } from './Tool';

code/addons/measure/src/withMeasure.ts

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

code/addons/outline/package.json

@@ -69,6 +69,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0",
     "ts-dedent": "^2.0.0"

code/addons/outline/src/manager.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/preview-api';
 
 import { ADDON_ID } from './constants';
 import { OutlineSelector } from './OutlineSelector';

code/addons/outline/src/withOutline.ts

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/preview-api';
 import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addOutlineStyles } from './helpers';

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

@@ -44,6 +44,7 @@
     "@storybook/core-client": "7.0.0-alpha.47",
     "@storybook/core-common": "7.0.0-alpha.47",
     "@storybook/core-webpack": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.16",

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

@@ -1,5 +1,5 @@
 import global from 'global';
-import { addons, mockChannel } from '@storybook/addons';
+import { addons, mockChannel } from '@storybook/preview-api';
 import ensureOptionsDefaults from './ensureOptionsDefaults';
 import snapshotsTests from './snapshotsTestsTemplate';
 import integrityTest from './integrityTestTemplate';

code/addons/storysource/package.json

@@ -57,6 +57,7 @@
     "@storybook/api": "7.0.0-alpha.47",
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/router": "7.0.0-alpha.47",
     "@storybook/source-loader": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",

code/addons/storysource/src/manager.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 
 import { StoryPanel } from './StoryPanel';
 import { ADDON_ID, PANEL_ID } from './index';

code/addons/toolbars/package.json

@@ -61,6 +61,7 @@
     "@storybook/api": "7.0.0-alpha.47",
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47"
   },
   "devDependencies": {

code/addons/toolbars/src/manager.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/preview-api';
 import { ToolbarManager } from './components/ToolbarManager';
 import { ADDON_ID } from './constants';
 

code/addons/viewport/package.json

@@ -64,6 +64,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",

code/addons/viewport/src/manager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/preview-api';
 
 import { ADDON_ID } from './constants';
 

code/frameworks/angular/package.json

@@ -45,6 +45,7 @@
     "@storybook/core-webpack": "7.0.0-alpha.47",
     "@storybook/docs-tools": "7.0.0-alpha.47",
     "@storybook/node-logger": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "@types/node": "^16.0.0",

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

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { DOCS_RENDERED, STORY_CHANGED } from '@storybook/core-events';
 import { AbstractRenderer } from './AbstractRenderer';
 import { StoryFnAngularReturnType, Parameters } from '../types';

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

@@ -1,4 +1,4 @@
-import { addons, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/preview-api';
 import { PartialStoryFn } from '@storybook/types';
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { StoryContext, AngularFramework } from '../types';

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

@@ -815,7 +815,7 @@ const newWebpackConfiguration = (
       modules: ['node_modules'],
       mainFields: ['browser', 'main'],
       alias: {
-        '@storybook/addons': '/Users/joe/storybook/lib/addons',
+        '@storybook/preview-api': '/Users/joe/storybook/lib/addons',
         '@storybook/api': '/Users/joe/storybook/lib/api',
         '@storybook/channels': '/Users/joe/storybook/lib/channels',
         '@storybook/channel-postmessage': '/Users/joe/storybook/lib/channel-postmessage',

code/frameworks/nextjs/package.json

@@ -65,6 +65,7 @@
     "@storybook/core-common": "7.0.0-alpha.47",
     "@storybook/node-logger": "7.0.0-alpha.47",
     "@storybook/preset-react-webpack": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/react": "7.0.0-alpha.47",
     "@types/node": "^14.14.20 || ^16.0.0",
     "find-up": "^5.0.0",

code/frameworks/react-vite/src/index.ts

@@ -1,7 +1,7 @@
 // exports for builder-vite
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+export { addons } from '@storybook/preview-api';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
 export { ClientApi } from '@storybook/preview-api';
 

code/frameworks/svelte-vite/src/index.ts

@@ -1,7 +1,7 @@
 // exports for builder-vite
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+export { addons } from '@storybook/preview-api';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
 export { ClientApi } from '@storybook/preview-api';
 

code/frameworks/vue-vite/src/index.ts

@@ -1,7 +1,7 @@
 // exports for builder-vite
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+export { addons } from '@storybook/preview-api';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
 export { ClientApi } from '@storybook/preview-api';
 

code/frameworks/vue3-vite/src/index.ts

@@ -1,7 +1,7 @@
 // exports for builder-vite
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+export { addons } from '@storybook/preview-api';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
 export { ClientApi } from '@storybook/preview-api';
 

code/frameworks/web-components-vite/src/index.ts

@@ -1,7 +1,7 @@
 // exports for builder-vite
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+export { addons } from '@storybook/preview-api';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
 export { ClientApi } from '@storybook/preview-api';
 

code/lib/builder-vite/src/optimizeDeps.ts

@@ -13,7 +13,7 @@ const INCLUDE_CANDIDATES = [
   '@mdx-js/react',
   '@storybook/addon-docs > acorn-jsx',
   '@storybook/addon-docs',
-  '@storybook/addons',
+  '@storybook/preview-api',
   '@storybook/channel-postmessage',
   '@storybook/channel-websocket',
   '@storybook/client-api',

code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars

@@ -3,7 +3,7 @@ import global from 'global';
 import { PreviewWeb } from '@storybook/preview-web';
 import { composeConfigs } from '@storybook/store';
 import { ClientApi } from '@storybook/preview-api';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 

code/lib/cli/src/js-package-manager/JsPackageManager.ts

@@ -132,7 +132,7 @@ export abstract class JsPackageManager {
    *   `@storybook/react@${storybookVersion}`,
    *   `@storybook/addon-actions@${actionsVersion}`,
    *   `@storybook/addon-links@${linksVersion}`,
-   *   `@storybook/addons@${addonsVersion}`,
+   *   `@storybook/preview-api@${addonsVersion}`,
    * ]);
    */
   public addDependencies(

code/lib/cli/src/js-package-manager/NPMProxy.test.ts

@@ -63,27 +63,27 @@ describe('NPM Proxy', () => {
 
   describe('addDependencies', () => {
     describe('npm6', () => {
-      it('with devDep it should run `npm install -D @storybook/addons`', () => {
+      it('with devDep it should run `npm install -D @storybook/preview-api`', () => {
         const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('6.0.0');
 
-        npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+        npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
         expect(executeCommandSpy).toHaveBeenLastCalledWith(
           'npm',
-          ['install', '-D', '@storybook/addons'],
+          ['install', '-D', '@storybook/preview-api'],
           expect.any(String)
         );
       });
     });
     describe('npm7', () => {
-      it('with devDep it should run `npm install -D @storybook/addons`', () => {
+      it('with devDep it should run `npm install -D @storybook/preview-api`', () => {
         const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('7.0.0');
 
-        npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+        npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
         expect(executeCommandSpy).toHaveBeenLastCalledWith(
           'npm',
-          ['install', '--legacy-peer-deps', '-D', '@storybook/addons'],
+          ['install', '--legacy-peer-deps', '-D', '@storybook/preview-api'],
           expect.any(String)
         );
       });
@@ -92,27 +92,27 @@ describe('NPM Proxy', () => {
 
   describe('removeDependencies', () => {
     describe('npm6', () => {
-      it('with devDep it should run `npm uninstall @storybook/addons`', () => {
+      it('with devDep it should run `npm uninstall @storybook/preview-api`', () => {
         const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('6.0.0');
 
-        npmProxy.removeDependencies({}, ['@storybook/addons']);
+        npmProxy.removeDependencies({}, ['@storybook/preview-api']);
 
         expect(executeCommandSpy).toHaveBeenLastCalledWith(
           'npm',
-          ['uninstall', '@storybook/addons'],
+          ['uninstall', '@storybook/preview-api'],
           expect.any(String)
         );
       });
     });
     describe('npm7', () => {
-      it('with devDep it should run `npm uninstall @storybook/addons`', () => {
+      it('with devDep it should run `npm uninstall @storybook/preview-api`', () => {
         const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('7.0.0');
 
-        npmProxy.removeDependencies({}, ['@storybook/addons']);
+        npmProxy.removeDependencies({}, ['@storybook/preview-api']);
 
         expect(executeCommandSpy).toHaveBeenLastCalledWith(
           'npm',
-          ['uninstall', '--legacy-peer-deps', '@storybook/addons'],
+          ['uninstall', '--legacy-peer-deps', '@storybook/preview-api'],
           expect.any(String)
         );
       });
@@ -151,11 +151,11 @@ describe('NPM Proxy', () => {
     it('without constraint it returns the latest version', async () => {
       const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('"5.3.19"');
 
-      const version = await npmProxy.latestVersion('@storybook/addons');
+      const version = await npmProxy.latestVersion('@storybook/preview-api');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('npm', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'version',
         '--json',
       ]);
@@ -167,11 +167,11 @@ describe('NPM Proxy', () => {
         .spyOn(npmProxy, 'executeCommand')
         .mockReturnValue('["4.25.3","5.3.19","6.0.0-beta.23"]');
 
-      const version = await npmProxy.latestVersion('@storybook/addons', '5.X');
+      const version = await npmProxy.latestVersion('@storybook/preview-api', '5.X');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('npm', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'versions',
         '--json',
       ]);
@@ -181,7 +181,7 @@ describe('NPM Proxy', () => {
     it('throws an error if command output is not a valid JSON', async () => {
       jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('NOT A JSON');
 
-      await expect(npmProxy.latestVersion('@storybook/addons')).rejects.toThrow();
+      await expect(npmProxy.latestVersion('@storybook/preview-api')).rejects.toThrow();
     });
   });
 

code/lib/cli/src/js-package-manager/PNPMProxy.test.ts

@@ -47,28 +47,28 @@ describe('NPM Proxy', () => {
   });
 
   describe('addDependencies', () => {
-    it('with devDep it should run `pnpm add -D @storybook/addons`', () => {
+    it('with devDep it should run `pnpm add -D @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('6.0.0');
 
-      pnpmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+      pnpmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenLastCalledWith(
         'pnpm',
-        ['add', '-D', '@storybook/addons'],
+        ['add', '-D', '@storybook/preview-api'],
         expect.any(String)
       );
     });
   });
 
   describe('removeDependencies', () => {
-    it('with devDep it should run `npm uninstall @storybook/addons`', () => {
+    it('with devDep it should run `npm uninstall @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('6.0.0');
 
-      pnpmProxy.removeDependencies({}, ['@storybook/addons']);
+      pnpmProxy.removeDependencies({}, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenLastCalledWith(
         'pnpm',
-        ['remove', '@storybook/addons'],
+        ['remove', '@storybook/preview-api'],
         expect.any(String)
       );
     });
@@ -107,11 +107,11 @@ describe('NPM Proxy', () => {
     it('without constraint it returns the latest version', async () => {
       const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('"5.3.19"');
 
-      const version = await pnpmProxy.latestVersion('@storybook/addons');
+      const version = await pnpmProxy.latestVersion('@storybook/preview-api');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('pnpm', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'version',
         '--json',
       ]);
@@ -123,11 +123,11 @@ describe('NPM Proxy', () => {
         .spyOn(pnpmProxy, 'executeCommand')
         .mockReturnValue('["4.25.3","5.3.19","6.0.0-beta.23"]');
 
-      const version = await pnpmProxy.latestVersion('@storybook/addons', '5.X');
+      const version = await pnpmProxy.latestVersion('@storybook/preview-api', '5.X');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('pnpm', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'versions',
         '--json',
       ]);
@@ -137,7 +137,7 @@ describe('NPM Proxy', () => {
     it('throws an error if command output is not a valid JSON', async () => {
       jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('NOT A JSON');
 
-      await expect(pnpmProxy.latestVersion('@storybook/addons')).rejects.toThrow();
+      await expect(pnpmProxy.latestVersion('@storybook/preview-api')).rejects.toThrow();
     });
   });
 

code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts

@@ -47,28 +47,28 @@ describe('Yarn 1 Proxy', () => {
   });
 
   describe('addDependencies', () => {
-    it('with devDep it should run `yarn install -D --ignore-workspace-root-check @storybook/addons`', () => {
+    it('with devDep it should run `yarn install -D --ignore-workspace-root-check @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('');
 
-      yarn1Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+      yarn1Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenCalledWith(
         'yarn',
-        ['add', '-D', '--ignore-workspace-root-check', '@storybook/addons'],
+        ['add', '-D', '--ignore-workspace-root-check', '@storybook/preview-api'],
         expect.any(String)
       );
     });
   });
 
   describe('removeDependencies', () => {
-    it('should run `yarn remove --ignore-workspace-root-check @storybook/addons`', () => {
+    it('should run `yarn remove --ignore-workspace-root-check @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('');
 
-      yarn1Proxy.removeDependencies({}, ['@storybook/addons']);
+      yarn1Proxy.removeDependencies({}, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenCalledWith(
         'yarn',
-        ['remove', '--ignore-workspace-root-check', '@storybook/addons'],
+        ['remove', '--ignore-workspace-root-check', '@storybook/preview-api'],
         expect.any(String)
       );
     });
@@ -107,11 +107,11 @@ describe('Yarn 1 Proxy', () => {
         .spyOn(yarn1Proxy, 'executeCommand')
         .mockReturnValue('{"type":"inspect","data":"5.3.19"}');
 
-      const version = await yarn1Proxy.latestVersion('@storybook/addons');
+      const version = await yarn1Proxy.latestVersion('@storybook/preview-api');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'version',
         '--json',
       ]);
@@ -123,11 +123,11 @@ describe('Yarn 1 Proxy', () => {
         .spyOn(yarn1Proxy, 'executeCommand')
         .mockReturnValue('{"type":"inspect","data":["4.25.3","5.3.19","6.0.0-beta.23"]}');
 
-      const version = await yarn1Proxy.latestVersion('@storybook/addons', '5.X');
+      const version = await yarn1Proxy.latestVersion('@storybook/preview-api', '5.X');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'versions',
         '--json',
       ]);
@@ -137,7 +137,7 @@ describe('Yarn 1 Proxy', () => {
     it('throws an error if command output is not a valid JSON', async () => {
       jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('NOT A JSON');
 
-      await expect(yarn1Proxy.latestVersion('@storybook/addons')).rejects.toThrow();
+      await expect(yarn1Proxy.latestVersion('@storybook/preview-api')).rejects.toThrow();
     });
   });
 

code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts

@@ -47,28 +47,28 @@ describe('Yarn 2 Proxy', () => {
   });
 
   describe('addDependencies', () => {
-    it('with devDep it should run `yarn install -D @storybook/addons`', () => {
+    it('with devDep it should run `yarn install -D @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('');
 
-      yarn2Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+      yarn2Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenCalledWith(
         'yarn',
-        ['add', '-D', '@storybook/addons'],
+        ['add', '-D', '@storybook/preview-api'],
         expect.any(String)
       );
     });
   });
 
   describe('removeDependencies', () => {
-    it('should run `yarn remove @storybook/addons`', () => {
+    it('should run `yarn remove @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('');
 
-      yarn2Proxy.removeDependencies({}, ['@storybook/addons']);
+      yarn2Proxy.removeDependencies({}, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenCalledWith(
         'yarn',
-        ['remove', '@storybook/addons'],
+        ['remove', '@storybook/preview-api'],
         expect.any(String)
       );
     });
@@ -105,14 +105,14 @@ describe('Yarn 2 Proxy', () => {
     it('without constraint it returns the latest version', async () => {
       const executeCommandSpy = jest
         .spyOn(yarn2Proxy, 'executeCommand')
-        .mockReturnValue('{"name":"@storybook/addons","version":"5.3.19"}');
+        .mockReturnValue('{"name":"@storybook/preview-api","version":"5.3.19"}');
 
-      const version = await yarn2Proxy.latestVersion('@storybook/addons');
+      const version = await yarn2Proxy.latestVersion('@storybook/preview-api');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [
         'npm',
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         '--fields',
         'version',
         '--json',
@@ -124,15 +124,15 @@ describe('Yarn 2 Proxy', () => {
       const executeCommandSpy = jest
         .spyOn(yarn2Proxy, 'executeCommand')
         .mockReturnValue(
-          '{"name":"@storybook/addons","versions":["4.25.3","5.3.19","6.0.0-beta.23"]}'
+          '{"name":"@storybook/preview-api","versions":["4.25.3","5.3.19","6.0.0-beta.23"]}'
         );
 
-      const version = await yarn2Proxy.latestVersion('@storybook/addons', '5.X');
+      const version = await yarn2Proxy.latestVersion('@storybook/preview-api', '5.X');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [
         'npm',
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         '--fields',
         'versions',
         '--json',
@@ -143,7 +143,7 @@ describe('Yarn 2 Proxy', () => {
     it('throws an error if command output is not a valid JSON', async () => {
       jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('NOT A JSON');
 
-      await expect(yarn2Proxy.latestVersion('@storybook/addons')).rejects.toThrow();
+      await expect(yarn2Proxy.latestVersion('@storybook/preview-api')).rejects.toThrow();
     });
   });
 

code/lib/cli/src/versions.ts

@@ -17,7 +17,7 @@ export default {
   '@storybook/addon-storysource': '7.0.0-alpha.47',
   '@storybook/addon-toolbars': '7.0.0-alpha.47',
   '@storybook/addon-viewport': '7.0.0-alpha.47',
-  '@storybook/addons': '7.0.0-alpha.47',
+  '@storybook/preview-api': '7.0.0-alpha.47',
   '@storybook/angular': '7.0.0-alpha.47',
   '@storybook/api': '7.0.0-alpha.47',
   '@storybook/blocks': '7.0.0-alpha.47',

code/lib/codemod/src/transforms/update-organisation-name.js

@@ -1,6 +1,6 @@
 export const packageNames = {
   '@kadira/react-storybook-decorator-centered': '@storybook/addon-centered',
-  '@kadira/storybook-addons': '@storybook/addons',
+  '@kadira/storybook-addons': '@storybook/preview-api',
   '@kadira/storybook-addon-actions': '@storybook/addon-actions',
   '@kadira/storybook-addon-comments': '@storybook/addon-comments',
   '@kadira/storybook-addon-graphql': '@storybook/addon-graphql',

code/lib/instrumenter/package.json

@@ -46,6 +46,7 @@
     "@storybook/channels": "7.0.0-alpha.47",
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
   },

code/lib/instrumenter/src/instrumenter.test.ts

@@ -1,7 +1,7 @@
 /// <reference types="@types/jest" />;
 /* eslint-disable no-underscore-dangle */
 
-import { addons, mockChannel } from '@storybook/addons';
+import { addons, mockChannel } from '@storybook/preview-api';
 import { logger } from '@storybook/client-logger';
 import {
   FORCE_REMOUNT,

code/lib/instrumenter/src/instrumenter.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import type { Channel } from '@storybook/channels';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import type { StoryId } from '@storybook/types';
 import { once, logger } from '@storybook/client-logger';
 import {

code/lib/postinstall/src/frameworks.test.ts

@@ -9,7 +9,7 @@ const VUE = {
 };
 
 const NONE = {
-  '@storybook/addons': '5.2.5',
+  '@storybook/preview-api': '5.2.5',
   lodash: '^4.17.15',
 };
 

code/lib/preview-api/package.json

@@ -45,6 +45,7 @@
     "@storybook/addons": "7.0.0-alpha.47",
     "@storybook/client-api": "7.0.0-alpha.47",
     "@storybook/core-client": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/preview-web": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47"
   },

code/lib/preview-api/src/index.ts

@@ -19,6 +19,7 @@ export const {
   useRef,
   useState,
   useStoryContext,
+  applyHooks,
   HooksContext,
 } = ADDONS;
 
@@ -27,6 +28,12 @@ export const {
  */
 export const { makeDecorator } = ADDONS;
 
+/**
+ * ADDON API
+ * @deprecated
+ */
+export const { addons } = ADDONS;
+
 /**
  * STORIES API
  */

code/package.json

@@ -209,6 +209,7 @@
     "@storybook/preset-vue-webpack": "workspace:*",
     "@storybook/preset-vue3-webpack": "workspace:*",
     "@storybook/preset-web-components-webpack": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
     "@storybook/preview-web": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/react-vite": "workspace:*",

code/renderers/html/package.json

@@ -54,6 +54,7 @@
     "@storybook/addons": "7.0.0-alpha.47",
     "@storybook/core-client": "7.0.0-alpha.47",
     "@storybook/docs-tools": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/preview-web": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",

code/renderers/html/src/docs/sourceDecorator.test.ts

@@ -1,9 +1,9 @@
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
-import { addons, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/preview-api';
 import { sourceDecorator } from './sourceDecorator';
 import type { StoryContext } from '../types';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 const mockedAddons = addons as jest.Mocked<typeof addons>;
 const mockedUseEffect = useEffect as jest.Mocked<typeof useEffect>;
 

code/renderers/html/src/docs/sourceDecorator.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* global window */
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
-import { addons, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/preview-api';
 import type { PartialStoryFn } from '@storybook/types';
 import { dedent } from 'ts-dedent';
 

code/renderers/preact/package.json

@@ -53,6 +53,7 @@
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.47",
     "@storybook/core-client": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0",

code/renderers/react/package.json

@@ -56,6 +56,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/core-client": "7.0.0-alpha.47",
     "@storybook/docs-tools": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "@types/estree": "^0.0.51",

code/renderers/react/src/__test__/internals.test.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@types/jest" />;
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React from 'react';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { render, screen } from '@testing-library/react';
 
 import { composeStories, composeStory } from '..';

code/renderers/react/src/docs/jsxDecorator.test.tsx

@@ -2,11 +2,11 @@
 import type { FC, PropsWithChildren } from 'react';
 import React, { createElement, Profiler } from 'react';
 import PropTypes from 'prop-types';
-import { addons, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/preview-api';
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
 import { renderJsx, jsxDecorator } from './jsxDecorator';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 const mockedAddons = addons as jest.Mocked<typeof addons>;
 const mockedUseEffect = useEffect as jest.Mocked<typeof useEffect>;
 

code/renderers/react/src/docs/jsxDecorator.tsx

@@ -4,7 +4,7 @@ import React, { createElement } from 'react';
 import type { Options } from 'react-element-to-jsx-string';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 
-import { addons, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/preview-api';
 import type { StoryContext, ArgsStoryFn, PartialStoryFn } from '@storybook/types';
 import { SourceType, SNIPPET_RENDERED, getDocgenSection } from '@storybook/docs-tools';
 import { logger } from '@storybook/client-logger';

code/renderers/server/package.json

@@ -53,6 +53,7 @@
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.47",
     "@storybook/core-client": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/preview-web": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",

code/renderers/svelte/package.json

@@ -59,6 +59,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/core-client": "7.0.0-alpha.47",
     "@storybook/docs-tools": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0",

code/renderers/svelte/src/docs/sourceDecorator.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { addons, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/preview-api';
 import { deprecate } from '@storybook/client-logger';
 import type { ArgTypes, Args, StoryContext, AnyFramework } from '@storybook/types';
 

code/renderers/vue/package.json

@@ -55,6 +55,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/core-client": "7.0.0-alpha.47",
     "@storybook/docs-tools": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0",

code/renderers/vue/src/docs/sourceDecorator.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
 
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { logger } from '@storybook/client-logger';
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
 import type { ComponentOptions } from 'vue';

code/renderers/vue3/package.json

@@ -54,6 +54,7 @@
     "@storybook/addons": "7.0.0-alpha.47",
     "@storybook/core-client": "7.0.0-alpha.47",
     "@storybook/docs-tools": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0",

code/renderers/web-components/package.json

@@ -58,6 +58,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/core-client": "7.0.0-alpha.47",
     "@storybook/docs-tools": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/preview-web": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",

code/renderers/web-components/src/docs/sourceDecorator.test.ts

@@ -1,12 +1,12 @@
 /* eslint-disable import/extensions */
 import { html } from 'lit-html';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { addons, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/preview-api';
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
 import type { StoryContext } from '../types';
 import { sourceDecorator } from './sourceDecorator';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 const mockedAddons = addons as jest.Mocked<typeof addons>;
 const mockedUseEffect = useEffect as jest.Mock;
 

code/renderers/web-components/src/docs/sourceDecorator.ts

@@ -2,7 +2,7 @@
 /* global window */
 import { render } from 'lit-html';
 import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/types';
-import { addons, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/preview-api';
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 
 import type { WebComponentsFramework } from '../types';

code/ui/.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import startCase from 'lodash/startCase';
 
 addons.setConfig({

code/ui/blocks/package.json

@@ -67,6 +67,7 @@
   "devDependencies": {
     "@storybook/addon-actions": "7.0.0-alpha.47",
     "@storybook/addons": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {

code/ui/manager/package.json

@@ -61,6 +61,7 @@
     "@storybook/client-logger": "7.0.0-alpha.47",
     "@storybook/components": "7.0.0-alpha.47",
     "@storybook/core-events": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/router": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",
     "@storybook/types": "7.0.0-alpha.47",

code/ui/manager/paths.js

@@ -6,7 +6,7 @@ const resolve = resolveFrom.bind(null, __dirname);
 // These paths need to be aliased in the manager webpack config to ensure that all
 // code running inside the manager uses the *same* version of react[-dom] that we use.
 module.exports = {
-  '@storybook/addons': dirname(resolve('@storybook/addons/package.json')),
+  '@storybook/preview-api': dirname(resolve('@storybook/preview-api/package.json')),
   '@storybook/api': dirname(resolve('@storybook/api/package.json')),
   '@storybook/channels': dirname(resolve('@storybook/channels/package.json')),
   '@storybook/components': dirname(resolve('@storybook/components/package.json')),

code/ui/manager/src/FakeProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled } from '@storybook/theming';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import Provider from './provider';
 
 export class FakeProvider extends Provider {

code/ui/manager/src/components/preview/preview.mockdata.tsx

@@ -1,4 +1,4 @@
-import { types, type Addon } from '@storybook/addons';
+import { types, type Addon } from '@storybook/preview-api';
 import type { API, State } from '@storybook/api';
 import type { PreviewProps } from './utils/types';
 

code/ui/manager/src/components/preview/tools/addons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, Icons } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/addons';
+import type { Addon } from '@storybook/preview-api';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: state.layout.showPanel,

code/ui/manager/src/components/preview/tools/copy.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import copy from 'copy-to-clipboard';
 import { getStoryHref, IconButton, Icons } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/addons';
+import type { Addon } from '@storybook/preview-api';
 
 const { PREVIEW_URL, document } = global;
 

code/ui/manager/src/components/preview/tools/eject.tsx

@@ -2,7 +2,7 @@ import global from 'global';
 import React from 'react';
 import { getStoryHref, IconButton, Icons } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/addons';
+import type { Addon } from '@storybook/preview-api';
 
 const { PREVIEW_URL } = global;
 

code/ui/manager/src/components/preview/tools/menu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, Icons, Separator } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/addons';
+import type { Addon } from '@storybook/preview-api';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: state.layout.showNav,

code/ui/manager/src/components/preview/tools/remount.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 import React, { useState } from 'react';
 import { IconButton, Icons } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/addons';
+import type { Addon } from '@storybook/preview-api';
 import { styled } from '@storybook/theming';
 import { FORCE_REMOUNT } from '@storybook/core-events';