Merge branch 'master' into use-npm

.github/CODEOWNERS

@@ -3,7 +3,7 @@
 
 /addons/a11y/ @jbovenschen
 /addons/actions/ @rhalff
-/addons/background/ @ndelangen @hypnosphi
+/addons/backgrounds/ @ndelangen @hypnosphi
 /addons/centered/ @kazupon
 /addons/events/ @z4o4z @ndelangen
 /addons/graphql/ @mnmtanish

.teamcity/OpenSourceProjects_Storybook/buildTypes/StotybookApp.kt

@@ -12,7 +12,8 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
     ANGULAR("Angular", "angular-cli"),
     POLYMER("Polymer", "polymer-cli"),
     MITHRIL("Mithril", "mithril-kitchen-sink"),
-    HTML("HTML", "html-kitchen-sink", false);
+    HTML("HTML", "html-kitchen-sink"),
+    MARKO("Marko", "marko-cli");
 
     val lowerName = appName.toLowerCase()
 

ADDONS_SUPPORT.md

@@ -1,19 +1,19 @@
 ## Addon / Framework Support Table
 
-| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)|
-| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
-|[a11y](addons/a11y)              |+| | | | | |
-|[actions](addons/actions)        |+|+|+|+|+|+|
-|[background](addons/background)  |+| | | | |+|
-|[centered](addons/centered)      |+| |+| | |+|
-|[events](addons/events)          |+| | | | | |
-|[graphql](addons/graphql)        |+| | | | | |
-|[info](addons/info)              |+| | | | | |
-|[jest](addons/jest)              |+| | | | | |
-|[knobs](addons/knobs)            |+|+|+|+|+|+|
-|[links](addons/links)            |+|+|+|+|+|+|
-|[notes](addons/notes)            |+| |+|+|+|+|
-|[options](addons/options)        |+|+|+|+|+|+|
-|[storyshots](addons/storyshots)  |+|+|+|+| | |
-|[storysource](addons/storysource)|+| |+|+|+|+|
-|[viewport](addons/viewport)      |+| |+|+|+|+|
+| |[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)              |+| | | | | |+| |
+|[actions](addons/actions)        |+|+|+|+|+|+|+|+|
+|[backgrounds](addons/backgrounds)  |+| | | | |+|+| |
+|[centered](addons/centered)      |+| |+| | |+|+| |
+|[events](addons/events)          |+| | | | | |+| |
+|[graphql](addons/graphql)        |+| | | | | | | |
+|[info](addons/info)              |+| | | | | | | |
+|[jest](addons/jest)              |+| | |+| | |+| |
+|[knobs](addons/knobs)            |+|+|+|+|+|+|+|+|
+|[links](addons/links)            |+|+|+|+|+|+|+| |
+|[notes](addons/notes)            |+| |+|+|+|+|+| |
+|[options](addons/options)        |+|+|+|+|+|+|+| |
+|[storyshots](addons/storyshots)  |+|+|+|+| | |+| |
+|[storysource](addons/storysource)|+| |+|+|+|+|+|+|
+|[viewport](addons/viewport)      |+| |+|+|+|+|+| |

README.md

@@ -72,8 +72,10 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 -   [React Native](app/react-native)
 -   [Vue](app/vue)
 -   [Angular](app/angular)
--   [Polymer](app/polymer) <sup>release candidate</sup>
+-   [Polymer](app/polymer)
 -   [Mithril](app/mithril) <sup>alpha</sup>
+-   [Marko](app/marko) <sup>alpha</sup>
+-   [HTML](app/html) <sup>alpha</sup>
 
 ### Sub Projects
 
@@ -84,7 +86,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 
 -   [a11y](addons/a11y/) - Test components for user accessibility in Storybook
 -   [actions](addons/actions/) - Log actions as users interact with components in the Storybook UI
--   [background](addons/background/) - Let users choose backgrounds in the Storybook UI
+-   [backgrounds](addons/backgrounds/) - Let users choose backgrounds in the Storybook UI
 -   [centered](addons/centered/) - Center the alignment of your components within the Storybook UI
 -   [events](addons/events/) - Interactively fire events to components that respond to EventEmitter
 -   [graphql](addons/graphql/) - Query a GraphQL server within Storybook stories
@@ -110,6 +112,8 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
 - [Angular](https://storybooks-angular.netlify.com/)
 - [Polymer](https://storybooks-polymer.netlify.com/)
 - [Mithril](https://storybooks-mithril.netlify.com/)
+- [Marko](https://storybooks-marko.netlify.com/)
+- [HTML](https://storybooks-html.netlify.com/)
 
 ### 3.4
 - [React Official](https://release-3-4--storybooks-official.netlify.com)
@@ -224,3 +228,7 @@ Become a sponsor and get your logo on our README on Github with a link to your s
 <a href="https://opencollective.com/storybook/sponsor/27/website" target="_blank"><img src="https://opencollective.com/storybook/sponsor/27/avatar.svg"></a>
 <a href="https://opencollective.com/storybook/sponsor/28/website" target="_blank"><img src="https://opencollective.com/storybook/sponsor/28/avatar.svg"></a>
 <a href="https://opencollective.com/storybook/sponsor/29/website" target="_blank"><img src="https://opencollective.com/storybook/sponsor/29/avatar.svg"></a>
+
+## License
+
+[MIT](https://github.com/storybooks/storybook/blob/master/LICENSE)

addons/a11y/html.js

@@ -0,0 +1 @@
+module.exports = require('./dist/html');

addons/a11y/package.json

@@ -28,10 +28,12 @@
     "@storybook/addons": "4.0.0-alpha.4",
     "@storybook/client-logger": "4.0.0-alpha.4",
     "@storybook/components": "4.0.0-alpha.4",
+    "@storybook/core-events": "4.0.0-alpha.4",
     "axe-core": "^3.0.2",
     "babel-runtime": "^6.26.0",
     "glamor": "^2.20.40",
     "glamorous": "^4.12.5",
+    "global": "^4.3.2",
     "prop-types": "^15.6.1"
   },
   "peerDependencies": {

addons/a11y/src/components/Panel.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import addons from '@storybook/addons';
 
+import { CHECK_EVENT_ID } from '../shared';
+
 import Tabs from './Tabs';
 import Report from './Report';
 
@@ -26,11 +28,11 @@ class Panel extends Component {
   }
 
   componentDidMount() {
-    this.channel.on('addon:a11y:check', this.onUpdate);
+    this.channel.on(CHECK_EVENT_ID, this.onUpdate);
   }
 
   componentWillUnmount() {
-    this.channel.removeListener('addon:a11y:check', this.onUpdate);
+    this.channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
   }
 
   onUpdate({ passes, violations }) {

addons/a11y/src/components/Report/index.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import addons from '@storybook/addons';
+
+import { RERUN_EVENT_ID } from '../../shared';
+
 import RerunButton from './RerunButton';
 import Item from './Item';
 
@@ -20,7 +23,7 @@ const styles = {
 
 function onRerunClick() {
   const channel = addons.getChannel();
-  channel.emit('addon:a11y:rerun');
+  channel.emit(RERUN_EVENT_ID);
 }
 
 const Report = ({ items, empty, passes }) => (

addons/a11y/src/components/WrapStory.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import axe from 'axe-core';
 import { logger } from '@storybook/client-logger';
 
+import { CHECK_EVENT_ID, RERUN_EVENT_ID } from '../shared';
+
 class WrapStory extends Component {
   static propTypes = {
     context: PropTypes.shape({}),
@@ -25,13 +27,13 @@ class WrapStory extends Component {
 
   componentDidMount() {
     const { channel } = this.props;
-    channel.on('addon:a11y:rerun', this.runA11yCheck);
+    channel.on(RERUN_EVENT_ID, this.runA11yCheck);
     this.runA11yCheck();
   }
 
   componentWillUnmount() {
     const { channel } = this.props;
-    channel.removeListener('addon:a11y:rerun', this.runA11yCheck);
+    channel.removeListener(RERUN_EVENT_ID, this.runA11yCheck);
   }
 
   /* eslint-disable react/no-find-dom-node */
@@ -42,7 +44,7 @@ class WrapStory extends Component {
     if (wrapper !== null) {
       axe.reset();
       axe.configure(axeOptions);
-      axe.run(wrapper).then(results => channel.emit('addon:a11y:check', results), logger.error);
+      axe.run(wrapper).then(results => channel.emit(CHECK_EVENT_ID, results), logger.error);
     }
   }
 

addons/a11y/src/html.js

@@ -0,0 +1,35 @@
+import { document, setTimeout } 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 { CHECK_EVENT_ID, RERUN_EVENT_ID } from './shared';
+
+let axeOptions = {};
+
+export const configureA11y = (options = {}) => {
+  axeOptions = options;
+};
+
+const runA11yCheck = () => {
+  const channel = addons.getChannel();
+  const wrapper = document.getElementById('root');
+
+  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(RERUN_EVENT_ID, runA11yCheck);
+  return () => channel.removeListener(RERUN_EVENT_ID, runA11yCheck);
+};
+
+export const checkA11y = story => {
+  addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, a11ySubscription);
+  // We need to wait for rendering
+  setTimeout(runA11yCheck, 0);
+  return story();
+};

addons/a11y/src/shared/index.js

@@ -1,6 +1,7 @@
 // addons, panels and events get unique names using a prefix
 const ADDON_ID = '@storybook/addon-a11y';
 const PANEL_ID = `${ADDON_ID}/panel`;
-const EVENT_ID = `${ADDON_ID}/event`;
+const CHECK_EVENT_ID = `${ADDON_ID}/check`;
+const RERUN_EVENT_ID = `${ADDON_ID}/rerun`;
 
-export { ADDON_ID, PANEL_ID, EVENT_ID };
+export { ADDON_ID, PANEL_ID, CHECK_EVENT_ID, RERUN_EVENT_ID };

addons/actions/README.md

@@ -55,10 +55,10 @@ import { actions } from '@storybook/addon-actions';
 import Button from './button';
 
 // This will lead to { onClick: action('onClick'), ... }
-const eventsFromNames = actions('onClick', 'onDoubleClick');
+const eventsFromNames = actions('onClick', 'onMouseOver');
 
 // This will lead to { onClick: action('clicked'), ... }
-const eventsFromObject = actions({ onClick: 'clicked', onDoubleClick: 'double clicked' });
+const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });
 
 storiesOf('Button', module)
   .add('default view', () => <Button {...eventsFromNames}>Hello World!</Button>)
@@ -71,14 +71,14 @@ storiesOf('Button', module)
 
 If you wish to process action data before sending them over to the logger, you can do it with action decorators.
 
-`decorate` takes an array of decorator functions. Each decorator function is passed an array of arguments, and should return a new arguments array to use. `decorate` returns a object with two functions: `action` and `actions`, that act like the above, except they log the modified arguments instead of the original arguments.
+`decorateAction` takes an array of decorator functions. Each decorator function is passed an array of arguments, and should return a new arguments array to use. `decorateAction` returns a object with two functions: `action` and `actions`, that act like the above, except they log the modified arguments instead of the original arguments.
 
 ```js
-import { decorate } from '@storybook/addon-actions';
+import { decorateAction } from '@storybook/addon-actions';
 
 import Button from './button';
 
-const firstArg = decorate([args => args.slice(0, 1)]);
+const firstArg = decorateAction([args => args.slice(0, 1)]);
 
 storiesOf('Button', module).add('default view', () => (
   <Button onClick={firstArg.action('button-click')}>Hello World!</Button>
@@ -123,3 +123,22 @@ action('my-action', {
 |`depth`|Number|Configures the transfered depth of any logged objects.|`10`|
 |`clearOnStoryChange`|Boolean|Flag whether to clear the action logger when switching away from the current story.|`true`|
 |`limit`|Number|Limits the number of items logged in the action logger|`50`|
+
+## withActions decorator
+
+You can define action handles in a declarative way using `withActions` decorators. It accepts the same arguments as [`actions`](#multiple-actions)
+Keys have `'<eventName> <selector>'` format, e.g. `'click .btn'`. Selector is optional. This can be used with any framework but is especially useful for `@storybook/html`.
+
+```js
+import { storiesOf } from '@storybook/html';
+import { withActions } from '@storybook/addon-actions';
+
+storiesOf('button', module)
+  // Log mousovers on entire story and clicks on .btn
+  .addDecorator(withActions('mouseover', 'click .btn'))
+  .add('with actions', () => `
+    <div>
+      Clicks on this button will be logged: <button class="btn" type="button">Button</button>
+    </div>
+  `);
+```

addons/actions/package.json

@@ -22,11 +22,13 @@
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.4",
     "@storybook/components": "4.0.0-alpha.4",
+    "@storybook/core-events": "4.0.0-alpha.4",
     "babel-runtime": "^6.26.0",
     "deep-equal": "^1.0.1",
     "glamor": "^2.20.40",
     "glamorous": "^4.12.5",
     "global": "^4.3.2",
+    "lodash.isequal": "^4.5.0",
     "make-error": "^1.3.4",
     "prop-types": "^15.6.1",
     "react-inspector": "^2.3.0",

addons/actions/src/index.js

@@ -1,8 +1,15 @@
-import { action, actions, decorate, configureActions, decorateAction } from './preview';
+import {
+  action,
+  actions,
+  decorate,
+  configureActions,
+  decorateAction,
+  withActions,
+} from './preview';
 
 // addons, panels and events get unique names using a prefix
 export const ADDON_ID = 'storybook/actions';
 export const PANEL_ID = `${ADDON_ID}/actions-panel`;
 export const EVENT_ID = `${ADDON_ID}/action-event`;
 
-export { action, actions, decorate, configureActions, decorateAction };
+export { action, actions, decorate, configureActions, decorateAction, withActions };

addons/actions/src/preview/decorateAction.js

@@ -1,5 +1,6 @@
 import action from './action';
 import actions from './actions';
+import { createDecorator } from './withActions';
 
 function applyDecorators(decorators, actionCallback) {
   return (..._args) => {
@@ -17,15 +18,17 @@ export function decorateAction(decorators) {
 
 export function decorate(decorators) {
   const decorated = decorateAction(decorators);
+  const decoratedActions = (...args) => {
+    const rawActions = actions(...args);
+    const actionsObject = {};
+    Object.keys(rawActions).forEach(name => {
+      actionsObject[name] = applyDecorators(decorators, rawActions[name]);
+    });
+    return actionsObject;
+  };
   return {
     action: decorated,
-    actions: (...args) => {
-      const rawActions = actions(...args);
-      const decoratedActions = {};
-      Object.keys(rawActions).forEach(name => {
-        decoratedActions[name] = applyDecorators(decorators, rawActions[name]);
-      });
-      return decoratedActions;
-    },
+    actions: decoratedActions,
+    withActions: createDecorator(decoratedActions),
   };
 }

addons/actions/src/preview/index.js

@@ -2,3 +2,4 @@ export { default as action } from './action';
 export { default as actions } from './actions';
 export { configureActions } from './configureActions';
 export { decorateAction, decorate } from './decorateAction';
+export { default as withActions } from './withActions';

addons/actions/src/preview/withActions.js

@@ -0,0 +1,64 @@
+// Based on http://backbonejs.org/docs/backbone.html#section-164
+import { document, Element } from 'global';
+import isEqual from 'lodash.isequal';
+import addons from '@storybook/addons';
+import Events from '@storybook/core-events';
+
+import actions from './actions';
+
+let lastSubscription;
+let lastArgs;
+
+const delegateEventSplitter = /^(\S+)\s*(.*)$/;
+
+const isIE = Element != null && !Element.prototype.matches;
+const matchesMethod = isIE ? 'msMatchesSelector' : 'matches';
+
+const root = document && document.getElementById('root');
+
+const hasMatchInAncestry = (element, selector) => {
+  if (element[matchesMethod](selector)) {
+    return true;
+  }
+  const parent = element.parentElement;
+  if (!parent) {
+    return false;
+  }
+  return hasMatchInAncestry(parent, selector);
+};
+
+const createHandlers = (actionsFn, ...args) => {
+  const actionsObject = actionsFn(...args);
+  return Object.entries(actionsObject).map(([key, action]) => {
+    // eslint-disable-next-line no-unused-vars
+    const [_, eventName, selector] = key.match(delegateEventSplitter);
+    return {
+      eventName,
+      handler: e => {
+        if (!selector || hasMatchInAncestry(e.target, selector)) {
+          action(e);
+        }
+      },
+    };
+  });
+};
+
+const actionsSubscription = (...args) => {
+  if (!isEqual(args, lastArgs)) {
+    lastArgs = args;
+    const handlers = createHandlers(...args);
+    lastSubscription = () => {
+      handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
+      return () =>
+        handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
+    };
+  }
+  return lastSubscription;
+};
+
+export const createDecorator = actionsFn => (...args) => story => {
+  addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, actionsSubscription(actionsFn, ...args));
+  return story();
+};
+
+export default createDecorator(actions);

addons/backgrounds/html.js

@@ -0,0 +1 @@
+module.exports = require('./dist/html');

addons/backgrounds/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.4",
+    "@storybook/core-events": "4.0.0-alpha.4",
     "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",

addons/backgrounds/src/BackgroundPanel.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import addons from '@storybook/addons';
 
+import Events from './events';
 import Swatch from './Swatch';
 
 const storybookIframe = 'storybook-preview-iframe';
@@ -88,7 +89,7 @@ export default class BackgroundPanel extends Component {
 
     const { api } = this.props;
 
-    this.channel.on('background-set', backgrounds => {
+    this.channel.on(Events.SET, backgrounds => {
       this.setState({ backgrounds });
       const currentBackground = api.getQueryParam('background');
 
@@ -100,7 +101,7 @@ export default class BackgroundPanel extends Component {
       }
     });
 
-    this.channel.on('background-unset', () => {
+    this.channel.on(Events.UNSET, () => {
       this.setState({ backgrounds: [] });
       this.updateIframe('none');
     });

addons/backgrounds/src/__tests__/BackgroundPanel.js

@@ -3,6 +3,7 @@ import { shallow, mount } from 'enzyme';
 import EventEmitter from 'events';
 
 import BackgroundPanel from '../BackgroundPanel';
+import Events from '../events';
 
 const backgrounds = [
   { name: 'black', value: '#000000' },
@@ -49,7 +50,7 @@ describe('Background Panel', () => {
   it('should set the query string', () => {
     const SpiedChannel = new EventEmitter();
     mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
-    SpiedChannel.emit('background-set', backgrounds);
+    SpiedChannel.emit(Events.SET, backgrounds);
 
     expect(mockedApi.getQueryParam).toBeCalledWith('background');
   });
@@ -57,7 +58,7 @@ describe('Background Panel', () => {
   it('should not unset the query string', () => {
     const SpiedChannel = new EventEmitter();
     mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
-    SpiedChannel.emit('background-unset', []);
+    SpiedChannel.emit(Events.UNSET, []);
 
     expect(mockedApi.setQueryParams).not.toHaveBeenCalled();
   });
@@ -65,7 +66,7 @@ describe('Background Panel', () => {
   it('should accept colors through channel and render the correct swatches with a default swatch', () => {
     const SpiedChannel = new EventEmitter();
     const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
-    SpiedChannel.emit('background-set', backgrounds);
+    SpiedChannel.emit(Events.SET, backgrounds);
 
     expect(backgroundPanel.state('backgrounds')).toEqual(backgrounds);
   });
@@ -75,7 +76,7 @@ describe('Background Panel', () => {
     const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
     const [head, ...tail] = backgrounds;
     const localBgs = [{ ...head, default: true }, ...tail];
-    SpiedChannel.emit('background-set', localBgs);
+    SpiedChannel.emit(Events.SET, localBgs);
 
     expect(backgroundPanel.state('backgrounds')).toEqual(localBgs);
     backgroundPanel.setState({ backgrounds: localBgs }); // force re-render
@@ -93,7 +94,7 @@ describe('Background Panel', () => {
     SpiedChannel.on('background', bg => {
       expect(bg).toBe(second.value);
     });
-    SpiedChannel.emit('background-set', localBgs);
+    SpiedChannel.emit(Events.SET, localBgs);
 
     expect(backgroundPanel.state('backgrounds')).toEqual(localBgs);
     backgroundPanel.setState({ backgrounds: localBgs }); // force re-render
@@ -106,12 +107,12 @@ describe('Background Panel', () => {
   it('should unset all swatches on receiving the background-unset message', () => {
     const SpiedChannel = new EventEmitter();
     const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
-    SpiedChannel.emit('background-set', backgrounds);
+    SpiedChannel.emit(Events.SET, backgrounds);
 
     expect(backgroundPanel.state('backgrounds')).toEqual(backgrounds);
     backgroundPanel.setState({ backgrounds }); // force re-render
 
-    SpiedChannel.emit('background-unset');
+    SpiedChannel.emit(Events.UNSET);
     expect(backgroundPanel.state('backgrounds')).toHaveLength(0);
   });
 

addons/backgrounds/src/__tests__/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import EventEmitter from 'events';
 
 import { BackgroundDecorator } from '../index';
-
-const EventEmitter = require('events');
+import Events from '../events';
 
 const testStory = () => () => <p>Hello World!</p>;
 
@@ -23,7 +23,7 @@ describe('Background Decorator', () => {
     );
 
     const spy = jest.fn();
-    SpiedChannel.on('background-unset', spy);
+    SpiedChannel.on(Events.UNSET, spy);
 
     backgroundDecorator.unmount();
 
@@ -33,7 +33,7 @@ describe('Background Decorator', () => {
   it('should send background-set event when the component mounts', () => {
     const SpiedChannel = new EventEmitter();
     const spy = jest.fn();
-    SpiedChannel.on('background-set', spy);
+    SpiedChannel.on(Events.SET, spy);
 
     shallow(<BackgroundDecorator story={testStory} channel={SpiedChannel} />);
 

addons/backgrounds/src/__tests__/vue.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import { vueHandler } from '../vue';
 
+import Events from '../events';
+
 describe('Vue handler', () => {
   it('Returns a component with a created function', () => {
     const testChannel = { emit: jest.fn() };
@@ -37,6 +39,6 @@ describe('Vue handler', () => {
     new Vue(vueHandler(testChannel, testBackground)(testStory, testContext)).$mount();
 
     expect(testChannel.emit).toHaveBeenCalledTimes(1);
-    expect(testChannel.emit).toHaveBeenCalledWith('background-set', expect.any(Array));
+    expect(testChannel.emit).toHaveBeenCalledWith(Events.SET, expect.any(Array));
   });
 });

addons/backgrounds/src/events.js

@@ -0,0 +1,6 @@
+const ADDON_ID = 'backgrounds';
+
+export default {
+  SET: `${ADDON_ID}:set`,
+  UNSET: `${ADDON_ID}:unset`,
+};

addons/backgrounds/src/html.js

@@ -0,0 +1,17 @@
+import addons from '@storybook/addons';
+import CoreEvents from '@storybook/core-events';
+
+import Events from './events';
+
+const subscription = () => () => addons.getChannel().emit(Events.UNSET);
+
+let prevBackgrounds;
+
+export default backgrounds => story => {
+  if (prevBackgrounds !== backgrounds) {
+    addons.getChannel().emit(Events.SET, backgrounds);
+    prevBackgrounds = backgrounds;
+  }
+  addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
+  return story();
+};

addons/backgrounds/src/index.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 
 import addons from '@storybook/addons';
 
+import Events from './events';
+
 export class BackgroundDecorator extends React.Component {
   constructor(props) {
     super(props);
@@ -21,11 +23,11 @@ export class BackgroundDecorator extends React.Component {
   }
 
   componentDidMount() {
-    this.channel.emit('background-set', this.props.backgrounds);
+    this.channel.emit(Events.SET, this.props.backgrounds);
   }
 
   componentWillUnmount() {
-    this.channel.emit('background-unset');
+    this.channel.emit(Events.UNSET);
   }
 
   render() {

addons/backgrounds/src/mithril.js

@@ -5,6 +5,8 @@ import m from 'mithril';
 
 import addons from '@storybook/addons';
 
+import Events from './events';
+
 export class BackgroundDecorator {
   constructor(vnode) {
     this.props = vnode.attrs;
@@ -22,11 +24,11 @@ export class BackgroundDecorator {
   }
 
   oncreate() {
-    this.channel.emit('background-set', this.props.backgrounds);
+    this.channel.emit(Events.SET, this.props.backgrounds);
   }
 
   onremove() {
-    this.channel.emit('background-unset');
+    this.channel.emit(Events.UNSET);
   }
 
   view() {

addons/backgrounds/src/vue.js

@@ -1,5 +1,7 @@
 import addons from '@storybook/addons';
 
+import Events from './events';
+
 export const vueHandler = (channel, backgrounds) => (getStory, context) => ({
   data() {
     return {
@@ -14,11 +16,11 @@ export const vueHandler = (channel, backgrounds) => (getStory, context) => ({
   },
 
   created() {
-    channel.emit('background-set', backgrounds);
+    channel.emit(Events.SET, backgrounds);
   },
 
   beforeDestroy() {
-    channel.emit('background-unset');
+    channel.emit(Events.UNSET);
   },
 });
 

addons/centered/html.js

@@ -0,0 +1 @@
+module.exports = require('./dist/html');

addons/centered/src/html.js

@@ -0,0 +1,46 @@
+import { document, Node } from 'global';
+import styles from './styles';
+
+const INNER_ID = 'sb-addon-centered-inner';
+const WRAPPER_ID = 'sb-addon-centered-wrapper';
+
+function getOrCreate(id, style) {
+  const elementOnDom = document.getElementById(id);
+
+  if (elementOnDom) {
+    return elementOnDom;
+  }
+
+  const element = document.createElement('div');
+  element.setAttribute('id', id);
+  Object.assign(element.style, style);
+
+  return element;
+}
+
+function getInnerDiv() {
+  return getOrCreate(INNER_ID, styles.innerStyle);
+}
+
+function getWrapperDiv() {
+  return getOrCreate(WRAPPER_ID, styles.style);
+}
+
+export default function(storyFn) {
+  const inner = getInnerDiv();
+  const wrapper = getWrapperDiv();
+  wrapper.appendChild(inner);
+
+  const component = storyFn();
+
+  if (typeof component === 'string') {
+    inner.innerHTML = component;
+  } else if (component instanceof Node) {
+    inner.innerHTML = '';
+    inner.appendChild(component);
+  } else {
+    return component;
+  }
+
+  return wrapper;
+}

addons/centered/src/mithril.js

@@ -2,28 +2,13 @@
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import m from 'mithril';
-
-const style = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'auto',
-};
-
-const innerStyle = {
-  margin: 'auto',
-};
+import styles from './styles';
 
 export default function(storyFn) {
   return {
     view: () => (
-      <div style={style}>
-        <div style={innerStyle}>{m(storyFn())}</div>
+      <div style={styles.style}>
+        <div style={styles.innerStyle}>{m(storyFn())}</div>
       </div>
     ),
   };

addons/centered/src/react.js

@@ -1,26 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react';
-
-const style = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'auto',
-};
-
-const innerStyle = {
-  margin: 'auto',
-};
+import styles from './styles';
 
 export default function(storyFn) {
   return (
-    <div style={style}>
-      <div style={innerStyle}>{storyFn()}</div>
+    <div style={styles.style}>
+      <div style={styles.innerStyle}>{storyFn()}</div>
     </div>
   );
 }

addons/centered/src/styles.js

@@ -0,0 +1,18 @@
+const styles = {
+  style: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'auto',
+  },
+  innerStyle: {
+    margin: 'auto',
+  },
+};
+
+export default styles;

addons/centered/src/vue.js

@@ -1,3 +1,5 @@
+import styles from './styles';
+
 export default function() {
   return {
     template: `
@@ -8,22 +10,7 @@ export default function() {
       </div>
     `,
     data() {
-      return {
-        style: {
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          overflow: 'auto',
-        },
-        innerStyle: {
-          margin: 'auto',
-        },
-      };
+      return styles;
     },
   };
 }

addons/events/html.js

@@ -0,0 +1 @@
+module.exports = require('./dist/html');

addons/events/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.4",
+    "@storybook/core-events": "4.0.0-alpha.4",
     "babel-runtime": "^6.26.0",
     "format-json": "^1.0.3",
     "prop-types": "^15.6.1",

addons/events/src/html.js

@@ -0,0 +1,27 @@
+import addons from '@storybook/addons';
+import CoreEvents from '@storybook/core-events';
+
+import { EVENTS } from './constants';
+
+let prevEvents;
+let currentEmit;
+
+const onEmit = event => {
+  currentEmit(event.name, event.payload);
+};
+
+const subscription = () => {
+  const channel = addons.getChannel();
+  channel.on(EVENTS.EMIT, onEmit);
+  return () => channel.removeListener(EVENTS.EMIT, onEmit);
+};
+
+export default ({ emit, events }) => story => {
+  if (prevEvents !== events) {
+    addons.getChannel().emit(EVENTS.ADD, events);
+    prevEvents = events;
+  }
+  currentEmit = emit;
+  addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
+  return story();
+};

addons/info/package.json

@@ -16,7 +16,7 @@
     "@storybook/client-logger": "4.0.0-alpha.4",
     "@storybook/components": "4.0.0-alpha.4",
     "babel-runtime": "^6.26.0",
-    "core-js": "2.5.5",
+    "core-js": "2.5.6",
     "glamor": "^2.20.40",
     "glamorous": "^4.12.5",
     "global": "^4.3.2",

addons/jest/README.md

@@ -118,6 +118,48 @@ storiesOf('MyComponent', module)
 - **options.results**: OBJECT jest output results. *mandatory*
 - **filesExt**: STRING test file extention. *optionnal*. This allow you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That mean it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...
 
+## Usage with Angular
+
+Assuming that you have created a test files `my.component.spec.ts` and `my-other.comonent.spec.ts`
+
+Configure Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)
+
+In project`s `typings.d.ts` add
+
+```ts
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+```
+
+Create a simple file `withTests.ts`:
+
+```ts
+import * as results from '../.jest-test-results.json';
+import { withTests } from '@storybook/addon-jest';
+
+export const wTests = withTests({
+  results,
+  filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$'
+});
+```
+
+Then in your story:
+
+```js
+// import your file
+import wTests from '.withTests';
+
+storiesOf('MyComponent', module)
+  .addDecorator(wTests('my.component', 'my-other.component'))
+  .add('This story shows test results from my.component.spec.ts and my-other.component.spec.ts', () => (
+    <div>Jest results in storybook</div>
+  ));
+```
+
+##### Example [here](https://github.com/storybooks/storybook/tree/master/examples/angular-cli)
+
 ## TODO
 
 - [ ] Add coverage

addons/knobs/html.js

@@ -0,0 +1 @@
+module.exports = require('./dist/html');

addons/knobs/marko.js

@@ -0,0 +1 @@
+module.exports = require('./dist/marko');

addons/knobs/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.4",
     "@storybook/components": "4.0.0-alpha.4",
+    "@storybook/core-events": "4.0.0-alpha.4",
     "babel-runtime": "^6.26.0",
     "deep-equal": "^1.0.1",
     "escape-html": "^1.0.3",

addons/knobs/src/html/index.js

@@ -0,0 +1,32 @@
+import registerKnobs from './registerKnobs';
+
+import {
+  knob,
+  text,
+  boolean,
+  number,
+  color,
+  object,
+  array,
+  date,
+  select,
+  files,
+  manager,
+  makeDecorators,
+} from '../base';
+
+export { knob, text, boolean, number, color, object, array, date, select, files };
+
+export function button(name, callback) {
+  return manager.knob(name, { type: 'button', value: Date.now(), callback, hideLabel: true });
+}
+
+function prepareComponent({ getStory, context }) {
+  registerKnobs();
+
+  return getStory(context);
+}
+
+export const htmlHandler = () => getStory => context => prepareComponent({ getStory, context });
+
+export const { withKnobs, withKnobsOptions } = makeDecorators(htmlHandler, { escapeHTML: true });

addons/knobs/src/html/registerKnobs.js

@@ -0,0 +1,64 @@
+import addons from '@storybook/addons';
+import Events from '@storybook/core-events';
+import { manager } from '../base';
+
+const { knobStore } = manager;
+
+function forceReRender() {
+  addons.getChannel().emit(Events.FORCE_RE_RENDER);
+}
+
+function setPaneKnobs(timestamp = +new Date()) {
+  const channel = addons.getChannel();
+  channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp });
+}
+
+function knobChanged(change) {
+  const { name, value } = change;
+
+  // Update the related knob and it's value.
+  const knobOptions = knobStore.get(name);
+
+  knobOptions.value = value;
+  knobStore.markAllUnused();
+
+  forceReRender();
+}
+
+function knobClicked(clicked) {
+  const knobOptions = knobStore.get(clicked.name);
+  knobOptions.callback();
+}
+
+function resetKnobs() {
+  knobStore.reset();
+
+  forceReRender();
+
+  const channel = addons.getChannel();
+  setPaneKnobs(channel, knobStore, false);
+}
+
+function disconnectCallbacks() {
+  const channel = addons.getChannel();
+  channel.removeListener('addon:knobs:knobChange', knobChanged);
+  channel.removeListener('addon:knobs:knobClick', knobClicked);
+  channel.removeListener('addon:knobs:reset', resetKnobs);
+  knobStore.unsubscribe(setPaneKnobs);
+}
+
+function connectCallbacks() {
+  const channel = addons.getChannel();
+  channel.on('addon:knobs:knobChange', knobChanged);
+  channel.on('addon:knobs:knobClick', knobClicked);
+  channel.on('addon:knobs:reset', resetKnobs);
+  knobStore.subscribe(setPaneKnobs);
+
+  return disconnectCallbacks;
+}
+
+function registerKnobs() {
+  addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, connectCallbacks);
+}
+
+export default registerKnobs;

addons/knobs/src/marko/WrapStory.marko

@@ -0,0 +1,70 @@
+class {
+
+  onCreate(input) {
+    this.props = input.props;
+    this.knobChanged = this.knobChanged.bind(this);
+    this.knobClicked = this.knobClicked.bind(this);
+    this.resetKnobs = this.resetKnobs.bind(this);
+    this.setPaneKnobs = this.setPaneKnobs.bind(this);
+  }
+
+  onMount() {
+    // Watch for changes in knob editor.
+    this.props.channel.on('addon:knobs:knobChange', this.knobChanged);
+    // Watch for clicks in knob editor.
+    this.props.channel.on('addon:knobs:knobClick', this.knobClicked);
+    // Watch for the reset event and reset knobs.
+    this.props.channel.on('addon:knobs:reset', this.resetKnobs);
+    // Watch for any change in the knobStore and set the panel again for those changes.
+    this.props.knobStore.subscribe(this.setPaneKnobs);
+    // Set knobs in the panel for the first time.
+    this.setPaneKnobs();
+  }
+
+  onDestroy() {
+    this.props.channel.removeListener('addon:knobs:knobChange', this.knobChanged);
+    this.props.channel.removeListener('addon:knobs:knobClick', this.knobClicked);
+    this.props.channel.removeListener('addon:knobs:reset', this.resetKnobs);
+    this.props.knobStore.unsubscribe(this.setPaneKnobs);
+  }
+
+  setPaneKnobs(timestamp = +new Date()) {
+    const { channel, knobStore } = this.props;
+    channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp });
+  }
+
+  knobChanged(change) {
+    const { name, value } = change;
+    const { knobStore, storyFn, context } = this.props;
+
+    // Update the related knob and it's value.
+    var knobOptions = knobStore.get(name);
+    knobOptions.value = value;
+    knobStore.markAllUnused();
+    
+    this.renderElement(storyFn(context));
+  }
+
+  knobClicked(clicked) {
+    let knobOptions = this.props.knobStore.get(clicked.name);
+    knobOptions.callback();
+  }
+
+  resetKnobs() {
+    const { knobStore, storyFn, context } = this.props;
+    knobStore.reset();
+    this.renderElement(storyFn(context));
+    this.setPaneKnobs(false);
+  }
+
+  renderElement(storyContent) {
+    var WrapperElm = document.getElementById('Wrapper');
+    if(this.currLoadedComponent) {
+      this.currLoadedComponent.destroy();
+      this.currLoadedComponent = null;
+    }
+    this.currLoadedComponent = storyContent.appendTo(WrapperElm).getComponent();
+  }
+}
+
+<div id="Wrapper"></div>

addons/knobs/src/marko/index.js

@@ -0,0 +1,43 @@
+import addons from '@storybook/addons';
+import WrapStory from './WrapStory.marko';
+
+import {
+  knob,
+  text,
+  boolean,
+  number,
+  color,
+  object,
+  array,
+  date,
+  select,
+  selectV2,
+  button,
+  manager,
+} from '../base';
+
+export { knob, text, boolean, number, color, object, array, date, select, selectV2, button };
+
+export const markoHandler = (channel, knobStore) => getStory => context => {
+  const initialContent = getStory(context);
+  const props = { context, storyFn: getStory, channel, knobStore, initialContent };
+
+  return WrapStory.renderSync({ props });
+};
+
+function wrapperKnobs(options) {
+  const channel = addons.getChannel();
+  manager.setChannel(channel);
+
+  if (options) channel.emit('addon:knobs:setOptions', options);
+
+  return markoHandler(channel, manager.knobStore);
+}
+
+export function withKnobs(storyFn, context) {
+  return wrapperKnobs()(storyFn)(context);
+}
+
+export function withKnobsOptions(options = {}) {
+  return (storyFn, context) => wrapperKnobs(options)(storyFn)(context);
+}

addons/links/README.md

@@ -95,6 +95,22 @@ storiesOf('Href', module)
   });
 ```
 
+## withLinks decorator
+
+`withLinks` decorator enables a declarative way of defining story links, using data attributes.
+Here is an example in React, but it works with any framework:
+
+```js
+import { storiesOf } from '@storybook/react'
+import { withLinks } from '@storybook/addon-links'
+
+storiesOf('Button', module)
+  .addDecorator(withLinks)
+  .add('First', () => (
+    <button data-sb-kind="OtherKind" data-sb-story="OtherStory">Go to "OtherStory"</button>
+  ))
+```
+
 ## LinkTo component (React only)
 
 One possible way of using `hrefTo` is to create a component that uses native `a` element, but prevents page reloads on plain left click, so that one can still use default browser methods to open link in new tab.

addons/links/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.4",
     "@storybook/components": "4.0.0-alpha.4",
+    "@storybook/core-events": "4.0.0-alpha.4",
     "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.1"

addons/links/src/index.js

@@ -3,7 +3,7 @@ export const EVENT_ID = `${ADDON_ID}/link-event`;
 export const REQUEST_HREF_EVENT_ID = `${ADDON_ID}/request-href-event`;
 export const RECEIVE_HREF_EVENT_ID = `${ADDON_ID}/receive-href-event`;
 
-export { linkTo, hrefTo } from './preview';
+export { linkTo, hrefTo, withLinks } from './preview';
 
 let hasWarned = false;
 

addons/links/src/preview.js

@@ -1,4 +1,7 @@
+import { document } from 'global';
 import addons from '@storybook/addons';
+import Events from '@storybook/core-events';
+
 import { EVENT_ID, REQUEST_HREF_EVENT_ID, RECEIVE_HREF_EVENT_ID } from './';
 
 export const openLink = params => addons.getChannel().emit(EVENT_ID, params);
@@ -19,3 +22,21 @@ export const hrefTo = (kind, story) =>
     channel.on(RECEIVE_HREF_EVENT_ID, resolve);
     channel.emit(REQUEST_HREF_EVENT_ID, { kind, story });
   });
+
+const linksListener = e => {
+  const { sbKind, sbStory } = e.target.dataset;
+  if (sbKind || sbStory) {
+    e.preventDefault();
+    linkTo(sbKind, sbStory)();
+  }
+};
+
+const linkSubscribtion = () => {
+  document.addEventListener('click', linksListener);
+  return () => document.removeEventListener('click', linksListener);
+};
+
+export const withLinks = story => {
+  addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, linkSubscribtion);
+  return story();
+};

addons/storyshots/src/frameworkLoader.js

@@ -2,8 +2,9 @@ import loaderReact from './react/loader';
 import loaderRn from './rn/loader';
 import loaderAngular from './angular/loader';
 import loaderVue from './vue/loader';
+import loaderHTML from './html/loader';
 
-const loaders = [loaderReact, loaderAngular, loaderRn, loaderVue];
+const loaders = [loaderReact, loaderAngular, loaderRn, loaderVue, loaderHTML];
 
 function loadFramework(options) {
   const loader = loaders.find(frameworkLoader => frameworkLoader.test(options));

addons/storyshots/src/html/loader.js

@@ -0,0 +1,32 @@
+import global from 'global';
+import runWithRequireContext from '../require_context';
+import loadConfig from '../config-loader';
+
+function test(options) {
+  return options.framework === 'html';
+}
+
+function load(options) {
+  global.STORYBOOK_ENV = 'html';
+
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/html/dist/server/config/babel',
+  });
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'html',
+    renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for HTML');
+    },
+    storybook: require.requireActual('@storybook/html'),
+  };
+}
+
+export default {
+  load,
+  test,
+};

addons/storyshots/src/html/renderTree.js

@@ -0,0 +1,20 @@
+import { document, Node } from 'global';
+
+function getRenderedTree(story, context) {
+  const component = story.render(context);
+
+  if (component instanceof Node) {
+    return component;
+  }
+
+  const section = document.createElement('section');
+  section.innerHTML = component;
+
+  if (section.childElementCount > 1) {
+    return section;
+  }
+
+  return section.firstChild;
+}
+
+export default getRenderedTree;

addons/storysource/package.json

@@ -27,7 +27,7 @@
     "loader-utils": "^1.1.0",
     "prettier": "^1.12.1",
     "prop-types": "^15.6.1",
-    "react-syntax-highlighter": "^7.0.2"
+    "react-syntax-highlighter": "^7.0.4"
   },
   "peerDependencies": {
     "react": "*"

app/angular/package.json

@@ -33,14 +33,14 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
     "dotenv-webpack": "^1.5.5",
     "global": "^4.3.2",
     "html-webpack-plugin": "^3.2.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^7.0.1",
     "ts-loader": "^4.2.0",
-    "webpack": "^4.6.0",
+    "webpack": "^4.8.0",
     "webpack-hot-middleware": "^2.22.1",
     "zone.js": "^0.8.26"
   },

app/html/.npmignore

@@ -0,0 +1,3 @@
+docs
+src
+.babelrc

app/html/README.md

@@ -0,0 +1,26 @@
+# Storybook for HTML <sup>alpha</sup>
+
+* * *
+
+Storybook for HTML is a UI development environment for your plain HTML snippets.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/app/html/docs/demo.png)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+npm i -g @storybook/cli
+cd my-app
+getstorybook --html
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+* * *
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.

app/html/bin/build.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server/build');

app/html/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');

app/html/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@storybook/html",
+  "version": "4.0.0-alpha.4",
+  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/html",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/core": "4.0.0-alpha.4",
+    "@storybook/react-dev-utils": "^5.0.0",
+    "airbnb-js-shims": "^1.4.1",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-macros": "^2.2.0",
+    "babel-plugin-transform-regenerator": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-minify": "^0.4.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "common-tags": "^1.4.0",
+    "core-js": "^2.5.6",
+    "dotenv-webpack": "^1.5.5",
+    "global": "^4.3.2",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "raw-loader": "^0.5.1",
+    "webpack": "^4.8.0",
+    "webpack-hot-middleware": "^2.22.1"
+  },
+  "peerDependencies": {
+    "babel-core": "^6.26.0 || ^7.0.0-0",
+    "babel-runtime": ">=6.0.0"
+  }
+}

app/html/src/client/index.js

@@ -0,0 +1,9 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+} from './preview';

app/html/src/client/preview/index.js

@@ -0,0 +1,17 @@
+import { start } from '@storybook/core/client';
+
+import render from './render';
+
+const { clientApi, configApi, forceReRender } = start(render);
+
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
+
+export const { configure } = configApi;
+export { forceReRender };

app/html/src/client/preview/render.js

@@ -0,0 +1,24 @@
+import { document, Node } from 'global';
+import { stripIndents } from 'common-tags';
+
+const rootElement = document.getElementById('root');
+
+export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
+  const component = story();
+
+  showMain();
+  if (typeof component === 'string') {
+    rootElement.innerHTML = component;
+  } else if (component instanceof Node) {
+    rootElement.innerHTML = '';
+    rootElement.appendChild(component);
+  } else {
+    showError({
+      title: `Expecting an HTML snippet or DOM node from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `,
+    });
+  }
+}

app/html/src/server/build.js

@@ -0,0 +1,12 @@
+import { buildStatic } from '@storybook/core/server';
+import path from 'path';
+import packageJson from '../../package.json';
+import getBaseConfig from './config/webpack.config.prod';
+import loadConfig from './config';
+
+buildStatic({
+  packageJson,
+  getBaseConfig,
+  loadConfig,
+  defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
+});

app/html/src/server/config.js

@@ -0,0 +1,8 @@
+import { configLoaderCreator } from '@storybook/core/server';
+import defaultConfig from './config/babel';
+
+const configLoader = configLoaderCreator({
+  defaultBabelConfig: defaultConfig,
+});
+
+export default configLoader;

app/html/src/server/config/babel.js

@@ -0,0 +1,28 @@
+module.exports = {
+  // Don't try to find .babelrc because we want to force this configuration.
+  babelrc: false,
+  presets: [
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
+      },
+    ],
+    require.resolve('babel-preset-stage-0'),
+  ],
+  plugins: [
+    require.resolve('babel-plugin-macros'),
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
+};

app/html/src/server/config/babel.prod.js

@@ -0,0 +1,33 @@
+module.exports = {
+  // Don't try to find .babelrc because we want to force this configuration.
+  babelrc: false,
+  presets: [
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: false,
+      },
+    ],
+    require.resolve('babel-preset-stage-0'),
+    [
+      require.resolve('babel-preset-minify'),
+      {
+        mangle: false,
+      },
+    ],
+  ],
+  plugins: [
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
+};

app/html/src/server/config/globals.js

@@ -0,0 +1,4 @@
+import { window } from 'global';
+
+window.STORYBOOK_REACT_CLASSES = {};
+window.STORYBOOK_ENV = 'HTML';

app/html/src/server/config/polyfills.js

@@ -0,0 +1,3 @@
+import 'core-js/es6/symbol';
+import 'core-js/fn/array/iterator';
+import 'airbnb-js-shims';

app/html/src/server/config/utils.js

@@ -0,0 +1,35 @@
+import path from 'path';
+
+export const includePaths = [path.resolve('./')];
+
+export const excludePaths = [path.resolve('node_modules')];
+
+export const nodeModulesPaths = path.resolve('./node_modules');
+
+export const nodePaths = (process.env.NODE_PATH || '')
+  .split(process.platform === 'win32' ? ';' : ':')
+  .filter(Boolean)
+  .map(p => path.resolve('./', p));
+
+// Load environment variables starts with STORYBOOK_ to the client side.
+export function loadEnv(options = {}) {
+  const defaultNodeEnv = options.production ? 'production' : 'development';
+  const env = {
+    NODE_ENV: JSON.stringify(process.env.NODE_ENV || defaultNodeEnv),
+    // This is to support CRA's public folder feature.
+    // In production we set this to dot(.) to allow the browser to access these assests
+    // even when deployed inside a subpath. (like in GitHub pages)
+    // In development this is just empty as we always serves from the root.
+    PUBLIC_URL: JSON.stringify(options.production ? '.' : ''),
+  };
+
+  Object.keys(process.env)
+    .filter(name => /^STORYBOOK_/.test(name))
+    .forEach(name => {
+      env[name] = JSON.stringify(process.env[name]);
+    });
+
+  return {
+    'process.env': env,
+  };
+}

app/html/src/server/config/webpack.config.js

@@ -0,0 +1,106 @@
+import path from 'path';
+import webpack from 'webpack';
+import Dotenv from 'dotenv-webpack';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
+import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
+import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import {
+  managerPath,
+  getPreviewHeadHtml,
+  getManagerHeadHtml,
+  indexHtmlPath,
+  iframeHtmlPath,
+} from '@storybook/core/server';
+
+import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
+import babelLoaderConfig from './babel';
+import { version } from '../../../package.json';
+
+export default function(configDir, quiet) {
+  const config = {
+    mode: 'development',
+    devtool: 'cheap-module-source-map',
+    entry: {
+      manager: [require.resolve('./polyfills'), managerPath],
+      preview: [
+        require.resolve('./polyfills'),
+        require.resolve('./globals'),
+        `${require.resolve('webpack-hot-middleware/client')}?reload=true`,
+      ],
+    },
+    output: {
+      path: path.join(__dirname, 'dist'),
+      filename: 'static/[name].bundle.js',
+      publicPath: '/',
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        filename: 'index.html',
+        chunks: ['manager'],
+        chunksSortMode: 'none',
+        data: {
+          managerHead: getManagerHeadHtml(configDir),
+          version,
+        },
+        template: indexHtmlPath,
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'iframe.html',
+        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
+        data: {
+          previewHead: getPreviewHeadHtml(configDir),
+        },
+        template: iframeHtmlPath,
+      }),
+      new InterpolateHtmlPlugin(process.env),
+      new webpack.DefinePlugin(loadEnv()),
+      new webpack.HotModuleReplacementPlugin(),
+      new CaseSensitivePathsPlugin(),
+      new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+      quiet ? null : new webpack.ProgressPlugin(),
+      new Dotenv({ silent: true }),
+    ].filter(Boolean),
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          loader: require.resolve('babel-loader'),
+          query: babelLoaderConfig,
+          include: includePaths,
+          exclude: excludePaths,
+        },
+        {
+          test: /\.html$/,
+          use: [
+            {
+              loader: require.resolve('html-loader'),
+            },
+          ],
+        },
+        {
+          test: /\.md$/,
+          use: [
+            {
+              loader: require.resolve('raw-loader'),
+            },
+          ],
+        },
+      ],
+    },
+    resolve: {
+      // Since we ship with json-loader always, it's better to move extensions to here
+      // from the default config.
+      extensions: ['.js', '.json'],
+      // Add support to NODE_PATH. With this we could avoid relative path imports.
+      // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
+      modules: ['node_modules'].concat(nodePaths),
+    },
+    performance: {
+      hints: false,
+    },
+  };
+
+  return config;
+}

app/html/src/server/config/webpack.config.prod.js

@@ -0,0 +1,108 @@
+import webpack from 'webpack';
+import Dotenv from 'dotenv-webpack';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import {
+  managerPath,
+  getPreviewHeadHtml,
+  getManagerHeadHtml,
+  indexHtmlPath,
+  iframeHtmlPath,
+} from '@storybook/core/server';
+import babelLoaderConfig from './babel.prod';
+import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
+import { version } from '../../../package.json';
+
+export default function(configDir) {
+  const entries = {
+    preview: [require.resolve('./polyfills'), require.resolve('./globals')],
+    manager: [require.resolve('./polyfills'), managerPath],
+  };
+
+  const config = {
+    mode: 'production',
+    bail: true,
+    devtool: '#cheap-module-source-map',
+    entry: entries,
+    output: {
+      filename: 'static/[name].[chunkhash].bundle.js',
+      // Here we set the publicPath to ''.
+      // This allows us to deploy storybook into subpaths like GitHub pages.
+      // This works with css and image loaders too.
+      // This is working for storybook since, we don't use pushState urls and
+      // relative URLs works always.
+      publicPath: '',
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        filename: 'index.html',
+        chunks: ['manager', 'runtime~manager'],
+        chunksSortMode: 'none',
+        data: {
+          managerHead: getManagerHeadHtml(configDir),
+          version,
+        },
+        template: indexHtmlPath,
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'iframe.html',
+        excludeChunks: ['manager', 'runtime~manager'],
+        chunksSortMode: 'none',
+        data: {
+          previewHead: getPreviewHeadHtml(configDir),
+        },
+        template: iframeHtmlPath,
+      }),
+      new InterpolateHtmlPlugin(process.env),
+      new webpack.DefinePlugin(loadEnv({ production: true })),
+      new Dotenv({ silent: true }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          loader: require.resolve('babel-loader'),
+          query: babelLoaderConfig,
+          include: includePaths,
+          exclude: excludePaths,
+        },
+        {
+          test: /\.html$/,
+          use: [
+            {
+              loader: require.resolve('html-loader'),
+            },
+          ],
+        },
+        {
+          test: /\.md$/,
+          use: [
+            {
+              loader: require.resolve('raw-loader'),
+            },
+          ],
+        },
+      ],
+    },
+    resolve: {
+      // Since we ship with json-loader always, it's better to move extensions to here
+      // from the default config.
+      extensions: ['.js', '.json'],
+      // Add support to NODE_PATH. With this we could avoid relative path imports.
+      // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
+      modules: ['node_modules'].concat(nodePaths),
+    },
+    optimization: {
+      // Automatically split vendor and commons for preview bundle
+      // https://twitter.com/wSokra/status/969633336732905474
+      splitChunks: {
+        chunks: chunk => chunk.name !== 'manager',
+      },
+      // Keep the runtime chunk seperated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      runtimeChunk: true,
+    },
+  };
+
+  return config;
+}

app/html/src/server/index.js

@@ -0,0 +1,12 @@
+import { buildDev } from '@storybook/core/server';
+import path from 'path';
+import packageJson from '../../package.json';
+import getBaseConfig from './config/webpack.config';
+import loadConfig from './config';
+
+buildDev({
+  packageJson,
+  getBaseConfig,
+  loadConfig,
+  defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
+});

app/marko/.npmignore

@@ -0,0 +1,2 @@
+docs
+.babelrc

app/marko/README.md

@@ -0,0 +1,41 @@
+# Storybook for Marko
+
+[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
+[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
+[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
+
+* * *
+
+Storybook for Marko is a UI development environment for your Marko components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](docs/demo.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+npm i -g @storybook/cli
+cd my-marko-app
+getstorybook
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+* * *
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
+
+Here are some featured storybooks that you can reference to see how Storybook works:
+
+## Docs
+
+-   [Basics](https://storybook.js.org/basics/introduction)
+-   [Configurations](https://storybook.js.org/configurations/default-config)
+-   [Addons](https://storybook.js.org/addons/introduction)

app/marko/bin/build.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server/build');

app/marko/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');

app/marko/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@storybook/marko",
+  "version": "4.0.0-alpha.4",
+  "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/marko",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "jsnext:main": "src/client/index.js",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "4.0.0-alpha.4",
+    "@storybook/channel-postmessage": "4.0.0-alpha.4",
+    "@storybook/client-logger": "4.0.0-alpha.4",
+    "@storybook/core": "4.0.0-alpha.4",
+    "@storybook/node-logger": "4.0.0-alpha.4",
+    "@storybook/ui": "4.0.0-alpha.4",
+    "airbnb-js-shims": "^1.4.1",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-macros": "^2.2.0",
+    "babel-plugin-transform-regenerator": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-minify": "^0.3.0",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "common-tags": "^1.7.2",
+    "core-js": "^2.5.4",
+    "dotenv-webpack": "^1.5.5",
+    "glamor": "^2.20.40",
+    "glamorous": "^4.12.1",
+    "global": "^4.3.2",
+    "html-webpack-plugin": "^3.2.0",
+    "marko-loader": "^1.3.3",
+    "raw-loader": "^0.5.1",
+    "lodash.flattendeep": "^4.4.0",
+    "prop-types": "^15.6.1",
+    "webpack": "^4.5.0",
+    "webpack-hot-middleware": "^2.21.2"
+  },
+  "peerDependencies": {
+    "babel-core": "^6.26.0 || ^7.0.0-0",
+    "babel-runtime": ">=6.0.0"
+  }
+}

app/marko/src/client/index.js

@@ -0,0 +1,9 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+} from './preview';

app/marko/src/client/preview/index.js

@@ -0,0 +1,17 @@
+import { start } from '@storybook/core/client';
+
+import render from './render';
+
+const { clientApi, configApi, forceReRender } = start(render);
+
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
+
+export const { configure } = configApi;
+export { forceReRender };

app/marko/src/client/preview/render.js

@@ -0,0 +1,28 @@
+import { document } from 'global';
+import { stripIndents } from 'common-tags';
+
+const rootEl = document.getElementById('root');
+let currLoadedComponent = null; // currently loaded marko widget!
+
+export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
+  const element = story();
+
+  // We need to unmount the existing set of components in the DOM node.
+  if (currLoadedComponent) {
+    currLoadedComponent.destroy();
+  }
+
+  if (!element || !element.out) {
+    showError({
+      title: `Expecting a Marko element from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the Marko element from the story?
+        Use "() => MyComp.renderSync({})" or "() => { return MyComp.renderSync({}); }" when defining the story.
+      `,
+    });
+    return;
+  }
+
+  showMain();
+  currLoadedComponent = element.appendTo(rootEl).getComponent();
+}

app/marko/src/demo/Button.marko

@@ -0,0 +1,9 @@
+class {
+    handleStartClick() {
+      alert('hi')
+    }
+}
+
+<div>
+  <button type="button" on-click("handleStartClick")>Hello!</button>
+</div>

app/marko/src/demo/Welcome.marko

@@ -0,0 +1,32 @@
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>
+
+<div id="app">
+  <h1>Welcome to Storybook for Marko</h1>
+</div>

app/marko/src/server/build.js

@@ -0,0 +1,12 @@
+import { buildStatic } from '@storybook/core/server';
+import path from 'path';
+import packageJson from '../../package.json';
+import getBaseConfig from './config/webpack.config.prod';
+import loadConfig from './config';
+
+buildStatic({
+  packageJson,
+  getBaseConfig,
+  loadConfig,
+  defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
+});

app/marko/src/server/config.js

@@ -0,0 +1,9 @@
+import { configLoaderCreator } from '@storybook/core/server';
+import defaultConfig from './config/babel';
+
+const configLoader = configLoaderCreator({
+  defaultConfigName: 'marko-cli',
+  defaultBabelConfig: defaultConfig,
+});
+
+export default configLoader;

app/marko/src/server/config/babel.js

@@ -0,0 +1,28 @@
+module.exports = {
+  // Don't try to find .babelrc because we want to force this configuration.
+  babelrc: false,
+  presets: [
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
+      },
+    ],
+    require.resolve('babel-preset-stage-0'),
+  ],
+  plugins: [
+    require.resolve('babel-plugin-macros'),
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
+};

app/marko/src/server/config/babel.prod.js

@@ -0,0 +1,28 @@
+module.exports = {
+  // Don't try to find .babelrc because we want to force this configuration.
+  babelrc: false,
+  presets: [
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: false,
+      },
+    ],
+    require.resolve('babel-preset-stage-0'),
+    require.resolve('babel-preset-minify'),
+  ],
+  plugins: [
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
+};

app/marko/src/server/config/globals.js

@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'marko';