Build: split lib/addons into manager & preview part, move code to manager-api

code/.yarnrc.yml

@@ -23,6 +23,8 @@ plugins:
     spec: '@yarnpkg/plugin-typescript'
   - path: ../.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'
+  - path: ../.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: '@yarnpkg/plugin-workspace-tools'
 
 unsafeHttpWhitelist:
   - localhost

code/addons/a11y/package.json

@@ -63,7 +63,6 @@
   },
   "dependencies": {
     "@storybook/addon-highlight": "7.0.0-alpha.53",
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/channels": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",

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

@@ -1,13 +1,11 @@
-import { addons } from '@storybook/addons';
 import * as api from '@storybook/manager-api';
 import { PANEL_ID } from './constants';
 import './manager';
 
 jest.mock('@storybook/manager-api');
-jest.mock('@storybook/addons');
 const mockedApi = api as unknown as jest.Mocked<api.API>;
 mockedApi.getAddonState = jest.fn();
-const mockedAddons = addons as jest.Mocked<typeof addons>;
+const mockedAddons = api.addons as jest.Mocked<typeof api.addons>;
 const registrationImpl = mockedAddons.register.mock.calls[0][1];
 
 describe('A11yManager', () => {

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/manager-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

@@ -76,7 +76,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",

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

@@ -75,7 +75,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",

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/manager-api';
 
 import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';

code/addons/controls/package.json

@@ -67,7 +67,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/blocks": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",

code/addons/controls/src/manager.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types, type API, useArgTypes } from '@storybook/manager-api';
 import { AddonPanel } from '@storybook/components';
-import { type API, useArgTypes } from '@storybook/manager-api';
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';
 

code/addons/docs/docs/multiframework.md

@@ -112,6 +112,8 @@ This dynamic rendering is framework-specific, meaning it needs a custom implemen
 
 Let's take a look at the React framework implementation of `dynamic` snippets as a reference for implementing this feature in other frameworks:
 
+TODO: understanding this better, should probably import from `preview-api` instead of `addons`?
+
 ```tsx
 import { addons, StoryContext } from '@storybook/addons';
 import { SNIPPET_RENDERED } from '../../shared';

code/addons/docs/docs/theming.md

@@ -14,7 +14,7 @@ Storybook theming is the **recommended way** to theme your docs. Docs uses the s
 Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`:
 
 ```js
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 // or a custom theme
 import { themes } from '@storybook/theming';
 

code/addons/essentials/package.json

@@ -120,7 +120,6 @@
     "@storybook/addon-outline": "7.0.0-alpha.53",
     "@storybook/addon-toolbars": "7.0.0-alpha.53",
     "@storybook/addon-viewport": "7.0.0-alpha.53",
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/manager-api": "7.0.0-alpha.53",
     "@storybook/node-logger": "7.0.0-alpha.53",

code/addons/highlight/README.md

@@ -28,7 +28,7 @@ Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an
 
 ```js
 import React, { useEffect } from 'react';
-import { useChannel } from '@storybook/addons';
+import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
 import { MyComponent } form './MyComponent';
 

code/addons/highlight/package.json

@@ -60,7 +60,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
     "@storybook/preview-api": "7.0.0-alpha.53",
     "global": "^4.4.0"

code/addons/interactions/package.json

@@ -72,7 +72,6 @@
   },
   "dependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",

code/addons/interactions/src/manager.tsx

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

code/addons/jest/package.json

@@ -69,7 +69,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",

code/addons/jest/src/manager.tsx

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

code/addons/links/package.json

@@ -76,10 +76,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
     "@storybook/csf": "next",
+    "@storybook/manager-api": "7.0.0-alpha.53",
     "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/router": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",

code/addons/links/src/manager.ts

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

code/addons/measure/package.json

@@ -74,7 +74,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",

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/manager-api';
 
 import { ADDON_ID, TOOL_ID } from './constants';
 import { Tool } from './Tool';

code/addons/outline/package.json

@@ -77,7 +77,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",

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/manager-api';
 
 import { ADDON_ID } from './constants';
 import { OutlineSelector } from './OutlineSelector';

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

@@ -38,7 +38,6 @@
   },
   "dependencies": {
     "@jest/transform": "^29.3.1",
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
     "@storybook/client-api": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",

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

@@ -53,7 +53,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/manager-api": "7.0.0-alpha.53",

code/addons/storysource/src/manager.tsx

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

code/addons/toolbars/package.json

@@ -67,7 +67,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/manager-api": "7.0.0-alpha.53",

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/manager-api';
 import { ToolbarManager } from './components/ToolbarManager';
 import { ADDON_ID } from './constants';
 

code/addons/viewport/package.json

@@ -72,7 +72,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",

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/manager-api';
 
 import { ADDON_ID } from './constants';
 

code/frameworks/angular/package.json

@@ -34,7 +34,6 @@
     "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\""
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/builder-webpack5": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/core-client": "7.0.0-alpha.53",

code/frameworks/nextjs/package.json

@@ -59,7 +59,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/builder-webpack5": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/node-logger": "7.0.0-alpha.53",

code/frameworks/react-vite/package.json

@@ -53,7 +53,6 @@
   "dependencies": {
     "@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5",
     "@rollup/pluginutils": "^4.2.0",
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",

code/frameworks/svelte-vite/package.json

@@ -52,7 +52,6 @@
   },
   "dependencies": {
     "@storybook/addon-svelte-csf": "^2.0.0",
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",

code/frameworks/vue-vite/package.json

@@ -50,7 +50,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",

code/frameworks/vue3-vite/package.json

@@ -51,7 +51,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",

code/frameworks/web-components-vite/package.json

@@ -51,7 +51,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",

code/lib/addons/README.md

@@ -1,9 +1,3 @@
-# Storybook Addons
+The contents of this package have moved to `@storybook/preview-api` and `@storybook/manager-api`. Please update your import depending on where are are using this API.
 
-Storybook Addons is a node module which is used to load custom addons to storybook.
-
-It stores addon loaders, communication channel and other resources which can be used by storybook implementations where required.
-
----
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
+This package will no longer be released as part of the 8.0 release of storybook.

code/lib/addons/package.json

@@ -42,14 +42,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.0-alpha.53",
-    "@storybook/client-logger": "7.0.0-alpha.53",
-    "@storybook/core-events": "7.0.0-alpha.53",
     "@storybook/manager-api": "7.0.0-alpha.53",
-    "@storybook/router": "7.0.0-alpha.53",
-    "@storybook/theming": "7.0.0-alpha.53",
-    "@storybook/types": "7.0.0-alpha.53",
-    "global": "^4.4.0"
+    "@storybook/preview-api": "7.0.0-alpha.53",
+    "@storybook/types": "7.0.0-alpha.53"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

code/lib/addons/src/index.ts

@@ -1,18 +1,26 @@
-/// <reference types="webpack-env" />
+import { type Addon_Type, Addon_TypesEnum } from '@storybook/types';
 
-// There can only be 1 default export per entry point and it has to be directly from index
-// Exporting this twice in order to to be able to import it like { addons } instead of 'addons'
-// prefer import { addons } from '@storybook/addons' over import addons from '@storybook/addons'
-//
-// See main.ts
+export { type Addon_Type as Addon, Addon_TypesEnum as types };
 
-import { addons } from './main';
+export { addons, type AddonStore, mockChannel } from '@storybook/manager-api';
 
-export * from './make-decorator';
-
-export * from './main';
-export * from './storybook-channel-mock';
-// eslint-disable-next-line import/no-cycle
-export * from './hooks';
-
-export default addons;
+export {
+  type EventMap,
+  HooksContext,
+  type Listener,
+  type MakeDecoratorOptions,
+  type MakeDecoratorResult,
+  applyHooks,
+  makeDecorator,
+  useArgs,
+  useCallback,
+  useChannel,
+  useEffect,
+  useGlobals,
+  useMemo,
+  useParameter,
+  useReducer,
+  useRef,
+  useState,
+  useStoryContext,
+} from '@storybook/preview-api/dist/addons';