Merge pull request #11322 from storybookjs/10008-deprecate-setaddon

Core: Deprecate `setAddon` from `storiesOf` API

MIGRATION.md

@@ -25,6 +25,7 @@
   - [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration)
   - [Improved story source handling](#improved-story-source-handling)
   - [6.0 Addon API changes](#60-addon-api-changes)
+    - [Deprecated setAddon](#deprecated-setaddon)
     - [Actions addon uses parameters](#actions-addon-uses-parameters)
     - [Removed action decorator APIs](#removed-action-decorator-apis)
     - [Removed withA11y decorator](#removed-witha11y-decorator)
@@ -489,12 +490,18 @@ The MDX analog:
 
 ### 6.0 Addon API changes
 
+#### Deprecated setAddon
+
+We've deprecated the `setAddon` method of the `storiesOf` API and plan to remove it in 7.0.
+
+Since early versions, Storybook shipped with a `setAddon` API, which allows you to extend `storiesOf` with arbitrary code. We've removed this from all core addons long ago and recommend writing stories in [Component Story Format](https://medium.com/storybookjs/component-story-format-66f4c32366df) rather than using the internal Storybook API.
+
 #### Actions addon uses parameters
 
 Leveraging the new preset `@storybook/addon-actions` uses parameters to pass action options. If you previously had:
 
 ```js
-import { withactions } from `@storybook/addon-actions`;
+import { withActions } from `@storybook/addon-actions`;
 
 export StoryOne = ...;
 StoryOne.story = {

examples/cra-react15/src/stories/welcome.stories.js

@@ -1,10 +1,25 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { storiesOf, setAddon } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
 
+// Added deprecated setAddon tests
+setAddon({
+  aa() {
+    console.log('aa');
+  },
+});
+
+setAddon({
+  bb() {
+    console.log('bb');
+  },
+});
+
 storiesOf('Welcome', module)
   .addParameters({
     component: Welcome,
   })
+  .aa()
+  .bb()
   .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

lib/client-api/package.json

@@ -42,7 +42,8 @@
     "memoizerific": "^1.11.3",
     "qs": "^6.6.0",
     "stable": "^0.1.8",
-    "ts-dedent": "^1.1.1"
+    "ts-dedent": "^1.1.1",
+    "util-deprecate": "^1.0.2"
   },
   "peerDependencies": {
     "react": "*",

lib/client-api/src/client_api.ts

@@ -1,4 +1,6 @@
 /* eslint no-underscore-dangle: 0 */
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
 import { logger } from '@storybook/client-logger';
 import { StoryFn, Parameters, DecorateStoryFunction } from '@storybook/addons';
 import { toId } from '@storybook/csf';
@@ -65,12 +67,19 @@ export default class ClientApi {
     singleton = this;
   }
 
-  setAddon = (addon: any) => {
-    this._addons = {
-      ...this._addons,
-      ...addon,
-    };
-  };
+  setAddon = deprecate(
+    (addon: any) => {
+      this._addons = {
+        ...this._addons,
+        ...addon,
+      };
+    },
+    dedent`
+      setAddon is deprecated and will be removed in Storybook 7.0
+
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-setaddon
+    `
+  );
 
   getSeparators = () => {
     const { hierarchySeparator, hierarchyRootSeparator, showRoots } =