Merge pull request #3555 from storybooks/generic-addon-decorators

Generic addon decorators
storybookjs · May 15, 2018 · 47185be · 47185be
2 parents f2019e3 + da9990e
commit 47185be
Show file tree

Hide file tree

Showing 106 changed files with 576 additions and 2,070 deletions.
diff --git a/ADDONS_SUPPORT.md b/ADDONS_SUPPORT.md
@@ -2,11 +2,11 @@
 
 | |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)|
 | ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
-|[a11y](addons/a11y)              |+| | | | | |+| |
+|[a11y](addons/a11y)              |+| |+|+|+|+|+|+|
 |[actions](addons/actions)        |+|+|+|+|+|+|+|+|
-|[backgrounds](addons/backgrounds)  |+| | | | |+|+| |
+|[backgrounds](addons/backgrounds)  |+| |+|+|+|+|+|+|
 |[centered](addons/centered)      |+| |+|+| |+|+| |
-|[events](addons/events)          |+| | | | | |+| |
+|[events](addons/events)          |+| |+|+|+|+|+|+|
 |[graphql](addons/graphql)        |+| | | | | | | |
 |[info](addons/info)              |+| | | | | | | |
 |[jest](addons/jest)              |+| | |+| | |+| |
@@ -16,4 +16,4 @@
 |[options](addons/options)        |+|+|+|+|+|+|+| |
 |[storyshots](addons/storyshots)  |+|+|+|+| | |+| |
 |[storysource](addons/storysource)|+| |+|+|+|+|+|+|
-|[viewport](addons/viewport)      |+| |+|+|+|+|+| |
+|[viewport](addons/viewport)      |+| |+|+|+|+|+|+|
diff --git a/addons/a11y/html.js b/addons/a11y/html.js
diff --git a/addons/a11y/src/A11yManager.js b/addons/a11y/src/A11yManager.js
diff --git a/addons/a11y/src/components/WrapStory.js b/addons/a11y/src/components/WrapStory.js
diff --git a/addons/a11y/src/html.js b/addons/a11y/src/html.js
diff --git a/addons/a11y/src/index.js b/addons/a11y/src/index.js
@@ -1,18 +1,37 @@
+import { document } from 'global';
+import axe from 'axe-core';
 import addons from '@storybook/addons';
+import Events from '@storybook/core-events';
+import { logger } from '@storybook/client-logger';
 
-import A11yManager from './A11yManager';
-import * as shared from './shared';
+import { CHECK_EVENT_ID, RERUN_EVENT_ID } from './shared';
 
-const manager = new A11yManager();
 let axeOptions = {};
 
-function checkA11y(storyFn, context) {
+export const configureA11y = (options = {}) => {
+  axeOptions = options;
+};
+
+const runA11yCheck = () => {
   const channel = addons.getChannel();
-  return manager.wrapStory(channel, storyFn, context, axeOptions);
-}
+  const wrapper = document.getElementById('root');
 
-function configureA11y(options = {}) {
-  axeOptions = options;
-}
+  axe.reset();
+  axe.configure(axeOptions);
+  axe.run(wrapper).then(results => channel.emit(CHECK_EVENT_ID, results), logger.error);
+};
+
+const a11ySubscription = () => {
+  const channel = addons.getChannel();
+  channel.on(Events.STORY_RENDERED, runA11yCheck);
+  channel.on(RERUN_EVENT_ID, runA11yCheck);
+  return () => {
+    channel.removeListener(Events.STORY_RENDERED, runA11yCheck);
+    channel.removeListener(RERUN_EVENT_ID, runA11yCheck);
+  };
+};
 
-export { checkA11y, shared, configureA11y };
+export const checkA11y = story => {
+  addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, a11ySubscription);
+  return story();
+};
diff --git a/addons/actions/src/preview/withActions.js b/addons/actions/src/preview/withActions.js
@@ -57,7 +57,9 @@ const actionsSubscription = (...args) => {
 };
 
 export const createDecorator = actionsFn => (...args) => story => {
-  addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, actionsSubscription(actionsFn, ...args));
+  if (root != null) {
+    addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, actionsSubscription(actionsFn, ...args));
+  }
   return story();
 };
 

diff --git a/addons/backgrounds/README.md b/addons/backgrounds/README.md
@@ -69,17 +69,3 @@ storiesOf("Button", module)
   .addDecorator(backgrounds)
   .add("with text", () => <button>Click me</button>);
 ```
-
-> In the case of Mithril, use these imports:
->
-> ```js
-> import { storiesOf } from '@storybook/mithril';
-> import backgrounds from "@storybook/addon-backgrounds/mithril";
-> ```
-
-> In the case of Vue, use these imports:
->
-> ```js
-> import { storiesOf } from '@storybook/vue';
-> import backgrounds from "@storybook/addon-backgrounds/vue";
-> ```
diff --git a/addons/backgrounds/html.js b/addons/backgrounds/html.js
diff --git a/addons/backgrounds/mithril.js b/addons/backgrounds/mithril.js
@@ -1 +1 @@
-module.exports = require('./dist/mithril');
+module.exports = require('./dist/deprecated');
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
@@ -29,7 +29,7 @@
     "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
-    "react-lifecycles-compat": "^3.0.2"
+    "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
     "vue": "^2.5.16"

diff --git a/addons/backgrounds/src/BackgroundPanel.js b/addons/backgrounds/src/BackgroundPanel.js
@@ -93,7 +93,7 @@ export default class BackgroundPanel extends Component {
       this.setState({ backgrounds });
       const currentBackground = api.getQueryParam('background');
 
-      if (currentBackground) {
+      if (currentBackground && backgrounds.some(bg => bg.value === currentBackground)) {
         this.updateIframe(currentBackground);
       } else if (backgrounds.filter(x => x.default).length) {
         const defaultBgs = backgrounds.filter(x => x.default);

diff --git a/addons/backgrounds/src/__tests__/index.js b/addons/backgrounds/src/__tests__/index.js
diff --git a/addons/backgrounds/src/__tests__/vue.js b/addons/backgrounds/src/__tests__/vue.js
diff --git a/addons/backgrounds/src/deprecated.js b/addons/backgrounds/src/deprecated.js
@@ -0,0 +1,8 @@
+import deprecate from 'util-deprecate';
+
+import backgrounds from '.';
+
+export default deprecate(
+  backgrounds,
+  "addon-backgrounds: framework-specific imports are deprecated, just use `import backgrounds from '@storybook/addon-backgrounds`"
+);
diff --git a/addons/backgrounds/src/html.js b/addons/backgrounds/src/html.js