Feature: Extend setAddon API

app/react/src/client/preview/client_api.js

@@ -48,15 +48,6 @@ export default class ClientApi {
       kind,
     };
 
-    // apply addons
-    Object.keys(this._addons).forEach(name => {
-      const addon = this._addons[name];
-      api[name] = (...args) => {
-        addon.apply(api, args);
-        return api;
-      };
-    });
-
     api.add = (storyName, getStory) => {
       if (typeof storyName !== 'string') {
         throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
@@ -88,6 +79,23 @@ export default class ClientApi {
       return api;
     };
 
+    const initExp = /^_init/;
+
+    // apply addons
+    Object.keys(this._addons).filter(name => !name.match(initExp)).forEach(name => {
+      const addon = this._addons[name];
+      api[name] = (...args) => {
+        addon.apply(api, args);
+        return api;
+      };
+    });
+
+    // init addons
+    Object.keys(this._addons).filter(name => name.match(initExp)).forEach(name => {
+      const addon = this._addons[name];
+      addon.apply(api);
+    });
+
     return api;
   }
 

examples/cra-kitchen-sink/.storybook/config.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { configure, setAddon } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import infoAddon from '@storybook/addon-info';
@@ -16,6 +17,12 @@ setOptions({
 
 setAddon(infoAddon);
 
+setAddon({
+  _initBackground() {
+    this.add('Toc',() => <div> Info about <b>{this.kind}:</b> it's just a very simple example!</div>)
+  }
+})
+
 function loadStories() {
   require('../src/stories/index');
   require('../src/stories/storybook-components');