move code from lib/addons to manager-api, reference manager-api or preview-api instead of lib/addons

Author: ndelangen

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

@@ -1,4 +1,3 @@
-import { addons } from '@storybook/addons';
 import * as api from '@storybook/manager-api';
 import { PANEL_ID } from './constants';
 import './manager';
@@ -7,7 +6,7 @@ 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/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/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/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/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/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/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

@@ -80,6 +80,7 @@
     "@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/addons';
+import { addons } from '@storybook/manager-api';
 
 import EVENTS, { ADDON_ID } from './constants';
 

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/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/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/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/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/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/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/src/index.ts

@@ -6,13 +6,13 @@
 //
 // See main.ts
 
-import { addons } from './main';
+import { type Addon_Type, Addon_TypesEnum } from '@storybook/types';
+
+export { type Addon_Type as Addon, Addon_TypesEnum as types };
 
 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;

code/lib/addons/src/main.ts

@@ -1,133 +1 @@
-import global from 'global';
-
-import type { Channel } from '@storybook/channels';
-import { SET_CONFIG } from '@storybook/core-events';
-import type { API } from '@storybook/manager-api';
-import type {
-  Addon_Collection,
-  Addon_Config,
-  Addon_Elements,
-  Addon_Loaders,
-  Addon_Type,
-  Addon_Types,
-} from '@storybook/types';
-import { Addon_TypesEnum } from '@storybook/types';
-import { logger } from '@storybook/client-logger';
-import { mockChannel } from './storybook-channel-mock';
-
-export { Addon_Type as Addon, Addon_TypesEnum as types };
-
-export function isSupportedType(type: Addon_Types): boolean {
-  return !!Object.values(Addon_TypesEnum).find((typeVal) => typeVal === type);
-}
-
-export class AddonStore {
-  constructor() {
-    this.promise = new Promise((res) => {
-      this.resolve = () => res(this.getChannel());
-    }) as Promise<Channel>;
-  }
-
-  private loaders: Addon_Loaders<API> = {};
-
-  private elements: Addon_Elements = {};
-
-  private config: Addon_Config = {};
-
-  private channel: Channel | undefined;
-
-  private serverChannel: Channel | undefined;
-
-  private promise: any;
-
-  private resolve: any;
-
-  getChannel = (): Channel => {
-    // this.channel should get overwritten by setChannel. If it wasn't called (e.g. in non-browser environment), set a mock instead.
-    if (!this.channel) {
-      this.setChannel(mockChannel());
-    }
-
-    return this.channel;
-  };
-
-  getServerChannel = (): Channel => {
-    if (!this.serverChannel) {
-      throw new Error('Accessing non-existent serverChannel');
-    }
-
-    return this.serverChannel;
-  };
-
-  ready = (): Promise<Channel> => this.promise;
-
-  hasChannel = (): boolean => !!this.channel;
-
-  hasServerChannel = (): boolean => !!this.serverChannel;
-
-  setChannel = (channel: Channel): void => {
-    this.channel = channel;
-    this.resolve();
-  };
-
-  setServerChannel = (channel: Channel): void => {
-    this.serverChannel = channel;
-  };
-
-  getElements = (type: Addon_Types): Addon_Collection => {
-    if (!this.elements[type]) {
-      this.elements[type] = {};
-    }
-    return this.elements[type];
-  };
-
-  addPanel = (name: string, options: Addon_Type): void => {
-    this.add(name, {
-      type: Addon_TypesEnum.PANEL,
-      ...options,
-    });
-  };
-
-  add = (name: string, addon: Addon_Type) => {
-    const { type } = addon;
-    const collection = this.getElements(type);
-    collection[name] = { id: name, ...addon };
-  };
-
-  setConfig = (value: Addon_Config) => {
-    Object.assign(this.config, value);
-    if (this.hasChannel()) {
-      this.getChannel().emit(SET_CONFIG, value);
-    }
-  };
-
-  getConfig = () => this.config;
-
-  register = (name: string, registerCallback: (api: API) => void): void => {
-    if (this.loaders[name]) {
-      logger.warn(`${name} was loaded twice, this could have bad side-effects`);
-    }
-    this.loaders[name] = registerCallback;
-  };
-
-  loadAddons = (api: any) => {
-    Object.values(this.loaders).forEach((value) => value(api));
-  };
-}
-
-// Enforce addons store to be a singleton
-const KEY = '__STORYBOOK_ADDONS';
-
-function getAddonsStore(): AddonStore {
-  if (!global[KEY]) {
-    global[KEY] = new AddonStore();
-  }
-  return global[KEY];
-}
-
-// 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 public_api.ts
-
-export const addons = getAddonsStore();
+export { addons, type AddonStore } from '@storybook/manager-api';

code/lib/addons/src/storybook-channel-mock.ts

@@ -1,10 +1 @@
-import { Channel } from '@storybook/channels';
-
-export function mockChannel() {
-  const transport = {
-    setHandler: () => {},
-    send: () => {},
-  };
-
-  return new Channel({ transport });
-}
+export { mockChannel } from '@storybook/manager-api';

code/lib/channels/README.md

@@ -31,6 +31,8 @@ class Transport {
 
 Currently, channels are baked into storybook implementations and therefore this module is not designed to be used directly by addon developers. When developing addons, use the `getChannel` method exported by `@storybook/addons` module. For this to work, Storybook implementations should use the `setChannel` method before loading addons.
 
+TODO: this needs to be updated to reflect the manager/preview split
+
 ```js
 import { addons } from '@storybook/addons';
 

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/manager-api/src/index.tsx

@@ -483,3 +483,8 @@ export function useArgTypes(): API_ArgTypes {
 }
 
 export { eventToShortcut, shortcutToHumanString, shortcutMatchesShortcut };
+
+export { addons } from './lib/addons';
+
+/* deprecated */
+export { mockChannel, types, type Addon, type AddonStore } from './lib/addons';