Merge branch 'master' into channel-created-event

2025-04-04 19:11:08 +08:00 · 2018-01-18 14:38:46 +05:30 · 2018-01-18 14:38:46 +05:30 · 39b02ef203
commit 39b02ef203
parent a362bfda62 b58df08354
96 changed files with 6110 additions and 2185 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -3,6 +3,6 @@ root = true
 [*]
 end_of_line = lf

-[*.{js,json,ts,html}]
+[*.{js,json,ts,vue,html}]
 indent_style = space
 indent_size = 2
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -27,7 +27,7 @@
  "dependencies": {
    "@storybook/components": "^3.4.0-alpha.4",
    "axe-core": "^2.6.1",
-    "glamorous": "^4.11.2",
+    "glamorous": "^4.11.3",
    "prop-types": "^15.6.0"
  },
  "peerDependencies": {
--- a/addons/a11y/src/components/Report/RerunButton.js
+++ b/addons/a11y/src/components/Report/RerunButton.js
@ -11,6 +11,7 @@ const RerunButton = glamorous.button({
  padding: '5px 10px',
  borderRadius: '4px 0 0 0',
  color: 'rgba(0, 0, 0, 0.5)',
+  textTransform: 'uppercase',
 });

 export default RerunButton;
--- a/addons/a11y/src/components/Report/index.js
+++ b/addons/a11y/src/components/Report/index.js
@ -32,7 +32,7 @@ const Report = ({ items, empty, passes }) => (
    ) : (
      <span style={styles.empty}>{empty}</span>
    )}
-    <RerunButton onClick={onRerunClick}>RE-RUN</RerunButton>
+    <RerunButton onClick={onRerunClick}>Re-run tests</RerunButton>
  </Fragment>
 );

--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -25,7 +25,7 @@
    "make-error": "^1.3.2",
    "prop-types": "^15.6.0",
    "react-inspector": "^2.2.2",
-    "uuid": "^3.1.0"
+    "uuid": "^3.2.1"
  },
  "peerDependencies": {
    "@storybook/addons": "^3.3.0",
--- a/addons/background/src/index.js
+++ b/addons/background/src/index.js
@ -5,7 +5,7 @@ import addons from '@storybook/addons';

 const style = {
  wrapper: {
-    overflow: 'scroll',
+    overflow: 'auto',
    position: 'fixed',
    top: 0,
    bottom: 0,
--- a/addons/events/package.json
+++ b/addons/events/package.json
@ -25,7 +25,7 @@
    "format-json": "^1.0.3",
    "prop-types": "^15.6.0",
    "react-textarea-autosize": "^5.2.1",
-    "uuid": "^3.1.0"
+    "uuid": "^3.2.1"
  },
  "peerDependencies": {
    "@storybook/addons": "^3.3.0",
--- a/addons/info/docs/home-screenshot.png
+++ b/addons/info/docs/home-screenshot.png
--- a/addons/info/package.json
+++ b/addons/info/package.json
@ -18,6 +18,7 @@
    "@storybook/client-logger": "^3.4.0-alpha.4",
    "@storybook/components": "^3.4.0-alpha.4",
    "babel-runtime": "^6.26.0",
+    "glamorous": "^4.11.3",
    "global": "^4.3.2",
    "marksy": "^6.0.3",
    "nested-object-assign": "^1.0.1",
--- a/addons/info/src/snapshots/index.test.js.snap
+++ b/addons/info/src/snapshots/index.test.js.snap
--- a/addons/info/src/components/PropVal.js
+++ b/addons/info/src/components/PropVal.js
@ -1,46 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withTheme } from 'glamorous';
 import createFragment from 'react-addons-create-fragment';

-const valueStyles = {
+const getValueStyles = (codeColors = {}) => ({
  func: {
-    color: '#170',
+    color: codeColors.func || '#170',
  },

  attr: {
-    color: '#666',
+    color: codeColors.attr || '#666',
  },

  object: {
-    color: '#666',
+    color: codeColors.object || '#666',
  },

  array: {
-    color: '#666',
+    color: codeColors.array || '#666',
  },

  number: {
-    color: '#a11',
+    color: codeColors.number || '#a11',
  },

  string: {
-    color: '#22a',
+    color: codeColors.string || '#22a',
    wordBreak: 'break-word',
  },

  bool: {
-    color: '#a11',
+    color: codeColors.bool || '#a11',
  },

  empty: {
    color: '#777',
  },
-};
+});

-function previewArray(val, maxPropArrayLength) {
+function previewArray(val, maxPropArrayLength, valueStyles) {
  const items = {};
  val.slice(0, maxPropArrayLength).forEach((item, i) => {
-    items[`n${i}`] = <PropVal val={item} />;
+    items[`n${i}`] = <PropVal val={item} valueStyles={valueStyles} />;
    items[`c${i}`] = ', ';
  });
  if (val.length > maxPropArrayLength) {
@ -51,13 +52,13 @@ function previewArray(val, maxPropArrayLength) {
  return <span style={valueStyles.array}>[{createFragment(items)}]</span>;
 }

-function previewObject(val, maxPropObjectKeys) {
+function previewObject(val, maxPropObjectKeys, valueStyles) {
  const names = Object.keys(val);
  const items = {};
  names.slice(0, maxPropObjectKeys).forEach((name, i) => {
    items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>;
    items[`c${i}`] = ': ';
-    items[`v${i}`] = <PropVal val={val[name]} />;
+    items[`v${i}`] = <PropVal val={val[name]} valueStyles={valueStyles} />;
    items[`m${i}`] = ', ';
  });
  if (names.length > maxPropObjectKeys) {
@ -74,11 +75,13 @@ function previewObject(val, maxPropObjectKeys) {
  );
 }

-export default function PropVal(props) {
-  const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
+function PropVal(props) {
+  const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength, theme } = props;
  let { val } = props;
+  const { codeColors } = theme || {};
  let braceWrap = true;
  let content = null;
+  const valueStyles = props.valueStyles || getValueStyles(codeColors);

  if (typeof val === 'number') {
    content = <span style={valueStyles.number}>{val}</span>;
@ -91,7 +94,7 @@ export default function PropVal(props) {
  } else if (typeof val === 'boolean') {
    content = <span style={valueStyles.bool}>{`${val}`}</span>;
  } else if (Array.isArray(val)) {
-    content = previewArray(val, maxPropArrayLength);
+    content = previewArray(val, maxPropArrayLength, valueStyles);
  } else if (typeof val === 'function') {
    content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
  } else if (!val) {
@ -105,7 +108,7 @@ export default function PropVal(props) {
      </span>
    );
  } else {
-    content = previewObject(val, maxPropObjectKeys);
+    content = previewObject(val, maxPropObjectKeys, valueStyles);
  }

  if (!braceWrap) return content;
@ -118,6 +121,8 @@ PropVal.defaultProps = {
  maxPropObjectKeys: 3,
  maxPropArrayLength: 3,
  maxPropStringLength: 50,
+  theme: {},
+  valueStyles: null,
 };

 PropVal.propTypes = {
@ -125,4 +130,19 @@ PropVal.propTypes = {
  maxPropObjectKeys: PropTypes.number,
  maxPropArrayLength: PropTypes.number,
  maxPropStringLength: PropTypes.number,
+  theme: PropTypes.shape({
+    codeColors: PropTypes.object,
+  }),
+  valueStyles: PropTypes.shape({
+    func: PropTypes.object,
+    attr: PropTypes.object,
+    object: PropTypes.object,
+    array: PropTypes.object,
+    number: PropTypes.object,
+    string: PropTypes.object,
+    bool: PropTypes.object,
+    empty: PropTypes.object,
+  }),
 };
+
+export default withTheme(PropVal);
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@ -4,6 +4,7 @@ import React, { createElement } from 'react';
 import PropTypes from 'prop-types';
 import global from 'global';
 import { baseFonts } from '@storybook/components';
+import { ThemeProvider } from 'glamorous';

 import marksy from 'marksy';

@ -364,11 +365,11 @@ export default class Story extends React.Component {
  }

  render() {
-    if (this.props.showInline) {
-      return this._renderInline();
-    }
-
-    return this._renderOverlay();
+    return (
+      <ThemeProvider theme={this.state.stylesheet}>
+        {this.props.showInline ? this._renderInline() : this._renderOverlay()}
+      </ThemeProvider>
+    );
  }
 }

--- a/addons/info/src/components/markdown/code.js
+++ b/addons/info/src/components/markdown/code.js
@ -52,21 +52,6 @@ Code.defaultProps = {
  code: null,
 };

-export function Pre(props) {
-  const style = {
-    fontSize: '.88em',
-    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-    backgroundColor: '#fafafa',
-    padding: '.5rem',
-    lineHeight: 1.5,
-    overflowX: 'scroll',
-  };
-  return <pre style={style}>{props.children}</pre>;
-}
-
-Pre.propTypes = { children: PropTypes.node };
-Pre.defaultProps = { children: null };
-
 export function Blockquote(props) {
  const style = {
    fontSize: '1.88em',
@ -79,3 +64,5 @@ export function Blockquote(props) {

 Blockquote.propTypes = { children: PropTypes.node };
 Blockquote.defaultProps = { children: null };
+
+export { default as Pre } from './pre/pre';
--- a/addons/info/src/components/markdown/pre/copy.js
+++ b/addons/info/src/components/markdown/pre/copy.js
@ -0,0 +1,13 @@
+/* eslint-disable no-undef */
+export default function copy(str) {
+  const tmp = document.createElement('TEXTAREA');
+  const focus = document.activeElement;
+
+  tmp.value = str;
+
+  document.body.appendChild(tmp);
+  tmp.select();
+  document.execCommand('copy');
+  document.body.removeChild(tmp);
+  focus.focus();
+}
--- a/addons/info/src/components/markdown/pre/copyButton.js
+++ b/addons/info/src/components/markdown/pre/copyButton.js
@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import glamorous, { withTheme } from 'glamorous';
+
+const Button = glamorous.button(
+  {
+    overflow: 'hidden',
+    border: '1px solid #eee',
+    borderRadius: 3,
+    backgroundColor: '#FFFFFF',
+    cursor: 'pointer',
+    fontSize: 13,
+    padding: '3px 10px',
+    alignSelf: 'flex-start',
+
+    ':hover': {
+      backgroundColor: '#f4f7fa',
+      borderColor: '#ddd',
+    },
+
+    ':active': {
+      backgroundColor: '#e9ecef',
+      borderColor: '#ccc',
+    },
+  },
+  props => props.styles
+);
+
+const ContentWrapper = glamorous.div(
+  {
+    transition: 'transform .2s ease',
+    height: 16,
+  },
+  props => ({
+    ...props.styles,
+    transform: props.toggled ? 'translateY(0px)' : 'translateY(-100%) translateY(-6px)',
+  })
+);
+
+function CopyButton(props) {
+  const { copyButton = {}, copyButtonContent } = props.theme;
+  const { toggleText = 'Copied!', text = 'Copy', ...copyButtonStyles } = copyButton;
+
+  return (
+    <Button onClick={props.onClick} styles={copyButtonStyles}>
+      <ContentWrapper styles={copyButtonContent} toggled={props.toggled}>
+        <div style={{ marginBottom: 6 }}>{toggleText}</div>
+        <div>{text}</div>
+      </ContentWrapper>
+    </Button>
+  );
+}
+
+CopyButton.propTypes = {
+  onClick: PropTypes.func,
+  toggled: PropTypes.bool,
+  theme: PropTypes.shape({
+    copyButton: PropTypes.object,
+  }),
+};
+
+CopyButton.defaultProps = {
+  onClick: () => {},
+  toggled: false,
+  theme: {},
+};
+
+export default withTheme(CopyButton);
--- a/addons/info/src/components/markdown/pre/pre.js
+++ b/addons/info/src/components/markdown/pre/pre.js
@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import glamorous, { withTheme } from 'glamorous';
+
+import CopyButton from './copyButton';
+import copy from './copy';
+
+const TOGGLE_TIMEOUT = 1800;
+
+const StyledPre = glamorous.pre(
+  {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    fontSize: '.88em',
+    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+    backgroundColor: '#fafafa',
+    padding: '.5rem',
+    lineHeight: 1.5,
+    overflowX: 'scroll',
+  },
+  props => props.styles
+);
+
+class Pre extends React.Component {
+  state = {
+    copied: false,
+  };
+
+  setRef = elem => {
+    this.pre = elem;
+  };
+
+  handleClick = () => {
+    const text = this.pre && this.pre.innerText;
+
+    if (!text) {
+      return;
+    }
+
+    copy(text);
+    this.setState({ copied: true });
+
+    clearTimeout(this.timeout);
+
+    this.timeout = setTimeout(() => {
+      this.setState({ copied: false });
+    }, TOGGLE_TIMEOUT);
+  };
+
+  render() {
+    const { pre } = this.props.theme;
+
+    return (
+      <StyledPre styles={pre}>
+        <div ref={this.setRef}>{this.props.children}</div>
+        <CopyButton onClick={this.handleClick} toggled={this.state.copied} />
+      </StyledPre>
+    );
+  }
+}
+
+Pre.propTypes = {
+  children: PropTypes.node,
+  theme: PropTypes.shape({
+    pre: PropTypes.object,
+  }),
+};
+
+Pre.defaultProps = {
+  children: null,
+  theme: {},
+};
+
+export default withTheme(Pre);
--- a/addons/info/src/components/types/OneOfType.js
+++ b/addons/info/src/components/types/OneOfType.js
@ -8,13 +8,13 @@ const OneOfType = ({ propType }) => {
  return (
    <span>
      {propType.value
-        .map((value, i) => [
-          <PrettyPropType
-            key={`${value.name}${value.value ? `-${value.value}` : ''}`}
-            propType={value}
-          />,
-          i < length - 1 ? <span> | </span> : null,
-        ])
+        .map((value, i) => {
+          const key = `${value.name}${value.value ? `-${value.value}` : ''}`;
+          return [
+            <PrettyPropType key={key} propType={value} />,
+            i < length - 1 ? <span key={`${key}-separator`}> | </span> : null,
+          ];
+        })
        .reduce((acc, tuple) => acc.concat(tuple), [])}
    </span>
  );
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -27,7 +27,7 @@
  "dependencies": {
    "@storybook/components": "^3.4.0-alpha.4",
    "glamor": "^2.20.40",
-    "glamorous": "^4.11.2",
+    "glamorous": "^4.11.3",
    "global": "^4.3.2",
    "prop-types": "^15.6.0"
  },
--- a/addons/knobs/src/angular/helpers.js
+++ b/addons/knobs/src/angular/helpers.js
@ -1,22 +1,19 @@
 /* eslint no-underscore-dangle: 0 */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { Component, SimpleChange, ChangeDetectorRef } from '@angular/core';
-import { getParameters, getAnnotations, getPropMetadata } from './utils';
+import { getParameters, getAnnotations } from './utils';

-const getComponentMetadata = ({ component, props = {}, moduleMetadata = {}, template = '' }) => {
+const getComponentMetadata = ({ component, props = {}, moduleMetadata = {} }) => {
  if (!component || typeof component !== 'function') throw new Error('No valid component provided');

  const componentMeta = getAnnotations(component)[0] || {};
-  const propsMeta = getPropMetadata(component);
  const paramsMetadata = getParameters(component);

  return {
    component,
    props,
    componentMeta,
-    propsMeta,
    moduleMetadata,
-    template,
    params: paramsMetadata,
  };
 };
@ -89,6 +86,14 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch
  return KnobWrapperComponent;
 };

+const createComponentFromTemplate = template => {
+  const componentClass = class DynamicComponent {};
+
+  return Component({
+    template,
+  })(componentClass);
+};
+
 const resetKnobs = (knobStore, channel) => {
  knobStore.reset();
  channel.emit('addon:knobs:setKnobs', {
@ -99,16 +104,20 @@ const resetKnobs = (knobStore, channel) => {

 export function prepareComponent({ getStory, context, channel, knobStore }) {
  resetKnobs(knobStore, channel);
-  const {
-    component,
-    componentMeta,
-    props,
-    propsMeta,
-    params,
-    moduleMetadata,
-  } = getComponentMetadata(getStory(context));
+  const story = getStory(context);
+  let { component } = story;
+  const { template } = story;

-  if (!componentMeta) throw new Error('No component metadata available');
+  if (!component) {
+    component = createComponentFromTemplate(template);
+  }
+
+  const { componentMeta, props, params, moduleMetadata } = getComponentMetadata({
+    ...story,
+    component,
+  });
+
+  if (!componentMeta && component) throw new Error('No component metadata available');

  const AnnotatedComponent = getAnnotatedComponent({
    componentMeta,
@ -121,7 +130,6 @@ export function prepareComponent({ getStory, context, channel, knobStore }) {
  return {
    component: AnnotatedComponent,
    props,
-    propsMeta,
    moduleMetadata,
  };
 }
--- a/addons/knobs/src/angular/utils.js
+++ b/addons/knobs/src/angular/utils.js
@ -27,10 +27,6 @@ export function getAnnotations(component) {
  return getMeta(component, ['annotations'], []);
 }

-export function getPropMetadata(component) {
-  return getMeta(component, ['__prop__metadata__', 'propMetadata'], {});
-}
-
 export function getParameters(component) {
  const params = reflectionCapabilities.parameters(component);

--- a/addons/storyshots/README.md
+++ b/addons/storyshots/README.md
@ -14,6 +14,8 @@ StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storyboo
 This addon works with Storybook for:
 - [React](https://github.com/storybooks/storybook/tree/master/app/react)
 - [React Native](https://github.com/storybooks/storybook/tree/master/app/react-native)
+- [Angular](https://github.com/storybooks/storybook/tree/master/app/angular)
+- [Vue](https://github.com/storybooks/storybook/tree/master/app/vue)

 ![StoryShots In Action](docs/storyshots-fail.png)

@ -36,6 +38,69 @@ Usually, you might already have completed this step. If not, here are some resou

 > Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).

+### Configure Jest for React
+StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but 
+[doesn't](#deps-issue) install it, so you need to install it separately.
+
+```sh
+npm install --save-dev react-test-renderer
+```
+
+### Configure Jest for Angular
+StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but 
+[doesn't](#deps-issue) install it, so you need to install it separately.
+
+```sh
+npm install --save-dev jest-preset-angular
+```
+
+If you already use Jest for testing your angular app - probably you already have the needed jest configuration.
+Anyway you can add these lines to your jest config:
+```js
+module.exports = {
+  globals: {
+    __TRANSFORM_HTML__: true,
+  },
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html'],
+};
+```
+### Configure Jest for Vue
+StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but 
+[doesn't](#deps-issue) install it, so you need yo install it separately.
+ 
+ ```sh
+ npm install --save-dev jest-vue-preprocessor
+ ```
+ 
+If you already use Jest for testing your vue app - probably you already have the needed jest configuration.
+Anyway you can add these lines to your jest config:
+```js
+module.exports = {
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
+  },
+  moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'node'],
+};
+```
+
+### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
+Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them. 
+
+`dependencies` - will installed an exact version of the particular dep - Storyshots can work with different versions of the same framework (let's say React v16 and React v15), that have to be compatible with a version of its plugin (react-test-renderer).
+
+`optionalDependencies` - behaves like a regular dependency, but do not fail the installation in case there is a problem to bring the dep.
+
+`peerDependencies` - listing all the deps in peer will trigger warnings during the installation - we don't want users to install unneeded deps by hand.
+
+`optionalPeerDependencies` - unfortunately there is nothing like this =(
+    
+For more information read npm [docs](https://docs.npmjs.com/files/package.json#dependencies)
+
 ## Configure Storyshots for HTML snapshots

 Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer, as long as it matches Jest's config [`testMatch`](http://facebook.github.io/jest/docs/en/configuration.html#testmatch-array-string)).
@ -60,8 +125,8 @@ Now run your Jest test command. (Usually, `npm test`.) Then you can see all of y

 Internally, it uses [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).

-When willing to generate and compare image snapshots for your stories, you have to two options: 
- - Have a storybook running (ie. accessible via http(s):// , for instance using `yarn run storybook`)
+When willing to generate and compare image snapshots for your stories, you have two options: 
+ - Have a storybook running (ie. accessible via http(s), for instance using `yarn run storybook`)
 - Have a static build of the storybook (for instance, using `yarn run build-storybook`)

 Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served)
@ -80,7 +145,7 @@ Internally here are the steps:
 - Browses each stories (calling _http://localhost:6006/iframe.html?..._ URL),
 - Take screenshots & save all images under _\_image_snapshots\__ folder.

-### Specifying the storybook URL
+### Specifying the storybook URL

 If you want to set specific storybook URL, you can specify via the `storybookUrl` parameter, see below: 
 ```js
@ -115,10 +180,12 @@ initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'h


 ### Integrate image storyshots with regular app
+
 You may want to use another Jest project to run your image snapshots as they require more resources: Chrome and Storybook built/served.
 You can find a working example of this in the [official-storybook](https://github.com/storybooks/storybook/tree/master/examples/official-storybook) example.

-### Integrate image storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)
+### Integrate image storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)
+
 You have two options here, you can either: 

 - Simply add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available.
@ -139,7 +206,8 @@ You have two options here, you can either:

    Once that's setup, you can run `yarn run image-snapshots` (or `npm run image-snapshots`).

-### Reminder
+### Reminder
+
 An image snapshot is simply a screenshot taken by a web browser (in our case, Chrome).

 The browser opens a page (either using the static build of storybook or a running instance of Storybook)
@ -300,6 +368,10 @@ Take a snapshot of a shallow-rendered version of the component. Note that this o

 Utility function used in `multiSnapshotWithOptions`. This is made available for users who implement custom test functions that also want to take advantage of multi-file storyshots.

+### `imageSnapshot`
+
+Render the story and take Jest snapshots as images. see [Configure image snapshots](#configure-storyshots-for-image-snapshots)
+
 ###### Example:

 Let's say we wanted to create a test function for shallow && multi-file snapshots:
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@ -11,7 +11,7 @@
  },
  "scripts": {
    "build-storybook": "build-storybook",
-    "prepare": "babel ./src --out-dir ./dist",
+    "prepare": "node ../../scripts/prepare.js",
    "storybook": "start-storybook -p 6006",
    "example": "jest storyshot.test"
  },
@ -43,8 +43,6 @@
  },
  "peerDependencies": {
    "@storybook/addons": "^3.4.0-alpha.4",
-    "babel-core": "^6.26.0 || ^7.0.0-0",
-    "react": "*",
-    "react-test-renderer": "*"
+    "babel-core": "^6.26.0 || ^7.0.0-0"
  }
 }
--- a/addons/storyshots/src/angular/app.component.ts
+++ b/addons/storyshots/src/angular/app.component.ts
@ -0,0 +1,92 @@
+// We could use NgComponentOutlet here but there's currently no easy way
+// to provide @Inputs and subscribe to @Outputs, see
+// https://github.com/angular/angular/issues/15360
+// For the time being, the ViewContainerRef approach works pretty well.
+import {
+  Component,
+  Inject,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  OnDestroy,
+  EventEmitter,
+  SimpleChanges,
+  SimpleChange,
+} from '@angular/core';
+import { STORY } from './app.token';
+import { NgStory, ICollection } from './types';
+
+@Component({
+  selector: 'storybook-dynamic-app-root',
+  template: '<ng-template #target></ng-template>',
+})
+export class AppComponent implements OnInit, OnDestroy {
+  @ViewChild('target', { read: ViewContainerRef })
+  target: ViewContainerRef;
+  constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {}
+
+  ngOnInit(): void {
+    this.putInMyHtml();
+  }
+
+  ngOnDestroy(): void {
+    this.target.clear();
+  }
+
+  private putInMyHtml(): void {
+    this.target.clear();
+    const compFactory = this.cfr.resolveComponentFactory(this.data.component);
+    const instance = this.target.createComponent(compFactory).instance;
+
+    this.setProps(instance, this.data);
+  }
+
+  /**
+   * Set inputs and outputs
+   */
+  private setProps(instance: any, { props = {} }: NgStory): void {
+    const changes: SimpleChanges = {};
+    const hasNgOnChangesHook = !!instance['ngOnChanges'];
+
+    Object.keys(props).map((key: string) => {
+      const value = props[key];
+      const instanceProperty = instance[key];
+
+      if (!(instanceProperty instanceof EventEmitter) && !!value) {
+        instance[key] = value;
+        if (hasNgOnChangesHook) {
+          changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
+        }
+      } else if (typeof value === 'function' && key !== 'ngModelChange') {
+        instanceProperty.subscribe(value);
+      }
+    });
+
+    this.callNgOnChangesHook(instance, changes);
+    this.setNgModel(instance, props);
+  }
+
+  /**
+   * Manually call 'ngOnChanges' hook because angular doesn't do that for dynamic components
+   * Issue: [https://github.com/angular/angular/issues/8903]
+   */
+  private callNgOnChangesHook(instance: any, changes: SimpleChanges): void {
+    if (!!Object.keys(changes).length) {
+      instance.ngOnChanges(changes);
+    }
+  }
+
+  /**
+   * If component implements ControlValueAccessor interface try to set ngModel
+   */
+  private setNgModel(instance: any, props: ICollection): void {
+    if (!!props['ngModel']) {
+      instance.writeValue(props.ngModel);
+    }
+
+    if (typeof props.ngModelChange === 'function') {
+      instance.registerOnChange(props.ngModelChange);
+    }
+  }
+}
--- a/addons/storyshots/src/angular/app.token.ts
+++ b/addons/storyshots/src/angular/app.token.ts
@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { NgStory } from './types';
+
+export const STORY = new InjectionToken<NgStory>('story');
--- a/addons/storyshots/src/angular/helpers.ts
+++ b/addons/storyshots/src/angular/helpers.ts
@ -0,0 +1,64 @@
+import { Component, Type } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { STORY } from './app.token';
+import { NgStory } from './types';
+
+const getModuleMeta = (
+  declarations: Array<Type<any> | any[]>,
+  entryComponents: Array<Type<any> | any[]>,
+  bootstrap: Array<Type<any> | any[]>,
+  data: NgStory,
+  moduleMetadata: any
+) => {
+  return {
+    declarations: [...declarations, ...(moduleMetadata.declarations || [])],
+    imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
+    providers: [
+      { provide: STORY, useValue: Object.assign({}, data) },
+      ...(moduleMetadata.providers || []),
+    ],
+    entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
+    schemas: [...(moduleMetadata.schemas || [])],
+    bootstrap: [...bootstrap],
+  };
+};
+
+const createComponentFromTemplate = (template: string): Function => {
+  const componentClass = class DynamicComponent {};
+
+  return Component({
+    template: template,
+  })(componentClass);
+};
+
+export const initModuleData = (storyObj: NgStory): any => {
+  const { component, template, props, moduleMetadata = {} } = storyObj;
+
+  let AnnotatedComponent;
+
+  if (template) {
+    AnnotatedComponent = createComponentFromTemplate(template);
+  } else {
+    AnnotatedComponent = component;
+  }
+
+  const story = {
+    component: AnnotatedComponent,
+    props,
+  };
+
+  const moduleMeta = getModuleMeta(
+    [AppComponent, AnnotatedComponent],
+    [AnnotatedComponent],
+    [AppComponent],
+    story,
+    moduleMetadata
+  );
+
+  return {
+    AppComponent,
+    moduleMeta,
+  };
+};
--- a/addons/storyshots/src/angular/loader.js
+++ b/addons/storyshots/src/angular/loader.js
@ -0,0 +1,43 @@
+import runWithRequireContext from '../require_context';
+import hasDependency from '../hasDependency';
+import loadConfig from '../config-loader';
+
+function setupAngularJestPreset() {
+  // Angular + Jest + Storyshots = Crazy Shit:
+  // We need to require 'jest-preset-angular/setupJest' before any storybook code
+  // is running inside jest -  one of the things that `jest-preset-angular/setupJest` does is
+  // extending the `window.Reflect` with all the needed metadata functions, that are required
+  // for emission of the TS decorations like 'design:paramtypes'
+  require.requireActual('jest-preset-angular/setupJest');
+}
+
+function test(options) {
+  return (
+    options.framework === 'angular' || (!options.framework && hasDependency('@storybook/angular'))
+  );
+}
+
+function load(options) {
+  setupAngularJestPreset();
+
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/angular/dist/server/babel_config',
+  });
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'angular',
+    renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for angular');
+    },
+    storybook: require.requireActual('@storybook/angular'),
+  };
+}
+
+export default {
+  load,
+  test,
+};
--- a/addons/storyshots/src/angular/renderTree.js
+++ b/addons/storyshots/src/angular/renderTree.js
@ -0,0 +1,44 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { TestBed } from '@angular/core/testing';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { addSerializer } from 'jest-specific-snapshot';
+import { initModuleData } from './helpers.ts';
+
+addSerializer(HTMLCommentSerializer);
+addSerializer(AngularSnapshotSerializer);
+
+function getRenderedTree(story, context) {
+  const currentStory = story.render(context);
+
+  const { moduleMeta, AppComponent } = initModuleData(currentStory);
+
+  TestBed.configureTestingModule({
+    imports: [...moduleMeta.imports],
+    declarations: [...moduleMeta.declarations],
+    providers: [...moduleMeta.providers],
+    schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
+    bootstrap: [...moduleMeta.bootstrap],
+  });
+
+  TestBed.overrideModule(BrowserDynamicTestingModule, {
+    set: {
+      entryComponents: [...moduleMeta.entryComponents],
+    },
+  });
+
+  return TestBed.compileComponents().then(() => {
+    const tree = TestBed.createComponent(AppComponent);
+    tree.detectChanges();
+
+    return tree;
+  });
+}
+
+export default getRenderedTree;
--- a/addons/storyshots/src/angular/types.ts
+++ b/addons/storyshots/src/angular/types.ts
@ -0,0 +1,19 @@
+export interface NgModuleMetadata {
+  declarations?: Array<any>;
+  entryComponents?: Array<any>;
+  imports?: Array<any>;
+  schemas?: Array<any>;
+  providers?: Array<any>;
+}
+
+export interface ICollection {
+  [p: string]: any;
+}
+
+export interface NgStory {
+  component?: any;
+  props: ICollection;
+  propsMeta?: ICollection;
+  moduleMetadata?: NgModuleMetadata;
+  template?: string;
+}
--- a/addons/storyshots/src/config-loader.js
+++ b/addons/storyshots/src/config-loader.js
@ -0,0 +1,24 @@
+import path from 'path';
+
+const babel = require('babel-core');
+
+function getConfigContent({ resolvedConfigDirPath, configPath, babelConfigPath }) {
+  const loadBabelConfig = require.requireActual(babelConfigPath).default;
+  const babelConfig = loadBabelConfig(resolvedConfigDirPath);
+  return babel.transformFileSync(configPath, babelConfig).code;
+}
+
+function load({ configDirPath, babelConfigPath }) {
+  const resolvedConfigDirPath = path.resolve(configDirPath || '.storybook');
+  const configPath = path.join(resolvedConfigDirPath, 'config.js');
+
+  const content = getConfigContent({ resolvedConfigDirPath, configPath, babelConfigPath });
+  const contextOpts = { filename: configPath, dirname: resolvedConfigDirPath };
+
+  return {
+    content,
+    contextOpts,
+  };
+}
+
+export default load;
--- a/addons/storyshots/src/frameworkLoader.js
+++ b/addons/storyshots/src/frameworkLoader.js
@ -0,0 +1,18 @@
+import loaderReact from './react/loader';
+import loaderRn from './rn/loader';
+import loaderAngular from './angular/loader';
+import loaderVue from './vue/loader';
+
+const loaders = [loaderReact, loaderAngular, loaderRn, loaderVue];
+
+function loadFramework(options) {
+  const loader = loaders.find(frameworkLoader => frameworkLoader.test(options));
+
+  if (!loader) {
+    throw new Error('storyshots is intended only to be used with storybook');
+  }
+
+  return loader.load(options);
+}
+
+export default loadFramework;
--- a/addons/storyshots/src/hasDependency.js
+++ b/addons/storyshots/src/hasDependency.js
@ -0,0 +1,13 @@
+import fs from 'fs';
+import path from 'path';
+import readPkgUp from 'read-pkg-up';
+
+const { pkg } = readPkgUp.sync();
+
+export default function hasDependency(name) {
+  return (
+    (pkg.devDependencies && pkg.devDependencies[name]) ||
+    (pkg.dependencies && pkg.dependencies[name]) ||
+    fs.existsSync(path.join('node_modules', name, 'package.json'))
+  );
+}
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@ -1,96 +1,58 @@
-import path from 'path';
+/* eslint-disable no-loop-func */
 import fs from 'fs';
 import glob from 'glob';
 import global, { describe, it, beforeEach, afterEach } from 'global';
-import readPkgUp from 'read-pkg-up';
 import addons from '@storybook/addons';
-
-import runWithRequireContext from './require_context';
+import loadFramework from './frameworkLoader';
 import createChannel from './storybook-channel-mock';
-import { snapshotWithOptions } from './test-bodies';
 import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
+import { imageSnapshot } from './test-body-image-snapshot';
+
+import {
+  multiSnapshotWithOptions,
+  snapshotWithOptions,
+  snapshot,
+  shallowSnapshot,
+  renderOnly,
+} from './test-bodies';
+
+global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};

 export {
+  getSnapshotFileName,
  snapshot,
  multiSnapshotWithOptions,
  snapshotWithOptions,
  shallowSnapshot,
  renderOnly,
-} from './test-bodies';
-
-export { imageSnapshot } from './test-body-image-snapshot';
-
-export { getSnapshotFileName };
-
-let storybook;
-let configPath;
-global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
-
-const babel = require('babel-core');
-
-const { pkg } = readPkgUp.sync();
-
-const hasDependency = name =>
-  (pkg.devDependencies && pkg.devDependencies[name]) ||
-  (pkg.dependencies && pkg.dependencies[name]) ||
-  fs.existsSync(path.join('node_modules', name, 'package.json'));
+  imageSnapshot,
+};

 export default function testStorySnapshots(options = {}) {
-  addons.setChannel(createChannel());
-
-  const isStorybook =
-    options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
-  const isRNStorybook =
-    options.framework === 'react-native' ||
-    (!options.framework && hasDependency('@storybook/react-native'));
-
-  if (isStorybook) {
-    storybook = require.requireActual('@storybook/react');
-    // eslint-disable-next-line
-    const loadBabelConfig = require('@storybook/react/dist/server/babel_config')
-      .default;
-    const configDirPath = path.resolve(options.configPath || '.storybook');
-    configPath = path.join(configDirPath, 'config.js');
-
-    const babelConfig = loadBabelConfig(configDirPath);
-    const content = babel.transformFileSync(configPath, babelConfig).code;
-    const contextOpts = {
-      filename: configPath,
-      dirname: configDirPath,
-    };
-
-    runWithRequireContext(content, contextOpts);
-  } else if (isRNStorybook) {
-    storybook = require.requireActual('@storybook/react-native');
-
-    configPath = path.resolve(options.configPath || 'storybook');
-    require.requireActual(configPath);
-  } else {
-    throw new Error('storyshots is intended only to be used with storybook');
-  }
-
  if (typeof describe !== 'function') {
    throw new Error('testStorySnapshots is intended only to be used inside jest');
  }

-  // NOTE: keep `suit` typo for backwards compatibility
-  const suite = options.suite || options.suit || 'Storyshots';
+  addons.setChannel(createChannel());
+
+  const { storybook, framework, renderTree, renderShallowTree } = loadFramework(options);
  const stories = storybook.getStorybook();

  if (stories.length === 0) {
    throw new Error('storyshots found 0 stories');
  }

-  // Added not to break existing storyshots configs (can be removed in a future major release)
-  // eslint-disable-next-line
-  options.storyNameRegex = options.storyNameRegex || options.storyRegex;
+  // NOTE: keep `suit` typo for backwards compatibility
+  const suite = options.suite || options.suit || 'Storyshots';
+  // NOTE: Added not to break existing storyshots configs (can be removed in a future major release)
+  const storyNameRegex = options.storyNameRegex || options.storyRegex;
+
  const snapshotOptions = {
    renderer: options.renderer,
    serializer: options.serializer,
  };
-  // eslint-disable-next-line
-  options.test =
-    options.test || snapshotWithOptions({ options: snapshotOptions });
+
+  const testMethod = options.test || snapshotWithOptions({ options: snapshotOptions });

  // eslint-disable-next-line
  for (const group of stories) {
@ -103,15 +65,15 @@ export default function testStorySnapshots(options = {}) {

    describe(suite, () => {
      beforeEach(() => {
-        if (typeof options.test.beforeEach === 'function') {
-          return options.test.beforeEach();
+        if (typeof testMethod.beforeEach === 'function') {
+          return testMethod.beforeEach();
        }
        return Promise.resolve();
      });

      afterEach(() => {
-        if (typeof options.test.afterEach === 'function') {
-          return options.test.afterEach();
+        if (typeof testMethod.afterEach === 'function') {
+          return testMethod.afterEach();
        }
        return Promise.resolve();
      });
@ -119,16 +81,18 @@ export default function testStorySnapshots(options = {}) {
      describe(kind, () => {
        // eslint-disable-next-line
        for (const story of group.stories) {
-          if (options.storyNameRegex && !story.name.match(options.storyNameRegex)) {
+          if (storyNameRegex && !story.name.match(storyNameRegex)) {
            // eslint-disable-next-line
            continue;
          }

          it(story.name, () => {
-            const context = { fileName, kind, story: story.name, isRNStorybook };
-            return options.test({
+            const context = { fileName, kind, story: story.name, framework };
+            return testMethod({
              story,
              context,
+              renderTree,
+              renderShallowTree,
            });
          });
        }
--- a/addons/storyshots/src/react/loader.js
+++ b/addons/storyshots/src/react/loader.js
@ -0,0 +1,28 @@
+import runWithRequireContext from '../require_context';
+import hasDependency from '../hasDependency';
+import loadConfig from '../config-loader';
+
+function test(options) {
+  return options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
+}
+
+function load(options) {
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/react/dist/server/babel_config',
+  });
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'react',
+    renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: require.requireActual('./renderShallowTree').default,
+    storybook: require.requireActual('@storybook/react'),
+  };
+}
+
+export default {
+  load,
+  test,
+};
--- a/addons/storyshots/src/react/renderShallowTree.js
+++ b/addons/storyshots/src/react/renderShallowTree.js
@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import shallow from 'react-test-renderer/shallow';
+
+function getRenderedTree(story, context, { renderer, serializer }) {
+  const storyElement = story.render(context);
+  const shallowRenderer = renderer || shallow.createRenderer();
+  const tree = shallowRenderer.render(storyElement);
+  return serializer ? serializer(tree) : tree;
+}
+
+export default getRenderedTree;
--- a/addons/storyshots/src/react/renderTree.js
+++ b/addons/storyshots/src/react/renderTree.js
@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import reactTestRenderer from 'react-test-renderer';
+
+function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
+  const storyElement = story.render(context);
+  const currentRenderer = renderer || reactTestRenderer.create;
+  const tree = currentRenderer(storyElement, rendererOptions);
+  return serializer ? serializer(tree) : tree;
+}
+
+export default getRenderedTree;
--- a/addons/storyshots/src/rn/loader.js
+++ b/addons/storyshots/src/rn/loader.js
@ -0,0 +1,29 @@
+/* eslint-disable global-require */
+import path from 'path';
+import hasDependency from '../hasDependency';
+
+function test(options) {
+  return (
+    options.framework === 'react-native' ||
+    (!options.framework && hasDependency('@storybook/react-native'))
+  );
+}
+
+function load(options) {
+  const storybook = require.requireActual('@storybook/react-native');
+
+  const configPath = path.resolve(options.configPath || 'storybook');
+  require.requireActual(configPath);
+
+  return {
+    renderTree: require('../react/renderTree').default,
+    renderShallowTree: require('../react/renderShallowTree').default,
+    framework: 'rn',
+    storybook,
+  };
+}
+
+export default {
+  load,
+  test,
+};
--- a/addons/storyshots/src/test-bodies.js
+++ b/addons/storyshots/src/test-bodies.js
@ -1,43 +1,54 @@
-import reactTestRenderer from 'react-test-renderer';
-import shallow from 'react-test-renderer/shallow';
 import 'jest-specific-snapshot';
 import { getSnapshotFileName } from './utils';

-function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
-  const currentRenderer = renderer || reactTestRenderer.create;
-  const storyElement = story.render(context);
-  const tree = currentRenderer(storyElement, rendererOptions);
-  return serializer ? serializer(tree) : tree;
+export const snapshotWithOptions = options => ({
+  story,
+  context,
+  renderTree,
+  snapshotFileName,
+}) => {
+  const result = renderTree(story, context, options);
+
+  function match(tree) {
+    if (snapshotFileName) {
+      expect(tree).toMatchSpecificSnapshot(snapshotFileName);
+    } else {
+      expect(tree).toMatchSnapshot();
+    }
+
+    if (typeof tree.unmount === 'function') {
+      tree.unmount();
+    }
+  }
+
+  if (typeof result.then === 'function') {
+    return result.then(match);
+  }
+
+  return match(result);
+};
+
+export const multiSnapshotWithOptions = options => ({ story, context, renderTree }) =>
+  snapshotWithOptions(options)({
+    story,
+    context,
+    renderTree,
+    snapshotFileName: getSnapshotFileName(context),
+  });
+
+export function shallowSnapshot({ story, context, renderShallowTree, options = {} }) {
+  const result = renderShallowTree(story, context, options);
+  expect(result).toMatchSnapshot();
 }

-export const snapshotWithOptions = options => ({ story, context, snapshotFileName }) => {
-  const tree = getRenderedTree(story, context, options);
+export function renderOnly({ story, context, renderTree }) {
+  const result = renderTree(story, context, {});

-  if (snapshotFileName) {
-    expect(tree).toMatchSpecificSnapshot(snapshotFileName);
-  } else {
-    expect(tree).toMatchSnapshot();
+  if (typeof result.then === 'function') {
+    return result;
  }

-  if (typeof tree.unmount === 'function') {
-    tree.unmount();
-  }
-};
-
-export const multiSnapshotWithOptions = options => ({ story, context }) => {
-  snapshotWithOptions(options)({ story, context, snapshotFileName: getSnapshotFileName(context) });
-};
+  return undefined;
+}

 export const snapshot = snapshotWithOptions({});
-
-export function shallowSnapshot({ story, context, options: { renderer, serializer } }) {
-  const shallowRenderer = renderer || shallow.createRenderer();
-  const tree = shallowRenderer.render(story.render(context));
-  const serializedTree = serializer ? serializer(tree) : tree;
-  expect(serializedTree).toMatchSnapshot();
-}
-
-export function renderOnly({ story, context }) {
-  const storyElement = story.render(context);
-  reactTestRenderer.create(storyElement);
-}
--- a/addons/storyshots/src/test-body-image-snapshot.js
+++ b/addons/storyshots/src/test-body-image-snapshot.js
@ -11,7 +11,7 @@ export const imageSnapshot = ({
  let page; // Hold ref to the page to screenshot.

  const testFn = ({ context }) => {
-    if (context.isRNStorybook) {
+    if (context.framework === 'rn') {
      // Skip tests since we de not support RN image snapshots.
      console.error(
        "It seems you are running imageSnapshot on RN app and it's not supported. Skipping test."
--- a/addons/storyshots/src/utils.test.js
+++ b/addons/storyshots/src/utils.test.js
@ -0,0 +1,46 @@
+import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
+
+describe('getSnapshotFileName', () => {
+  it('fileName is provided - snapshot is stored in __snapshots__ dir', () => {
+    const context = { fileName: 'foo.js' };
+
+    const result = getSnapshotFileName(context);
+    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+
+    expect(platformAgnosticResult).toBe('__snapshots__/foo.storyshot');
+  });
+
+  it('fileName with multiple extensions is provided - only the last extension is replaced', () => {
+    const context = { fileName: 'foo.web.stories.js' };
+
+    const result = getSnapshotFileName(context);
+    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+
+    expect(platformAgnosticResult).toBe('__snapshots__/foo.web.stories.storyshot');
+  });
+
+  it('fileName with dir is provided - __snapshots__ dir is created inside another dir', () => {
+    const context = { fileName: 'test/foo.js' };
+
+    const result = getSnapshotFileName(context);
+    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+
+    expect(platformAgnosticResult).toBe('test/__snapshots__/foo.storyshot');
+  });
+});
+
+describe('getPossibleStoriesFiles', () => {
+  it('storyshots is provided and all the posible stories file names are returned', () => {
+    const storyshots = 'test/__snapshots__/foo.web.stories.storyshot';
+
+    const result = getPossibleStoriesFiles(storyshots);
+    const platformAgnosticResult = result.map(path => path.replace(/\\|\//g, '/'));
+
+    expect(platformAgnosticResult).toEqual([
+      'test/foo.web.stories.js',
+      'test/foo.web.stories.jsx',
+      'test/foo.web.stories.ts',
+      'test/foo.web.stories.tsx',
+    ]);
+  });
+});
--- a/addons/storyshots/src/vue/loader.js
+++ b/addons/storyshots/src/vue/loader.js
@ -0,0 +1,38 @@
+import global from 'global';
+import runWithRequireContext from '../require_context';
+import hasDependency from '../hasDependency';
+import loadConfig from '../config-loader';
+
+function mockVueToIncludeCompiler() {
+  jest.mock('vue', () => require.requireActual('vue/dist/vue.common.js'));
+}
+
+function test(options) {
+  return options.framework === 'vue' || (!options.framework && hasDependency('@storybook/vue'));
+}
+
+function load(options) {
+  global.STORYBOOK_ENV = 'vue';
+  mockVueToIncludeCompiler();
+
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/vue/dist/server/babel_config',
+  });
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'vue',
+    renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for vue');
+    },
+    storybook: require.requireActual('@storybook/vue'),
+  };
+}
+
+export default {
+  load,
+  test,
+};
--- a/addons/storyshots/src/vue/renderTree.js
+++ b/addons/storyshots/src/vue/renderTree.js
@ -0,0 +1,13 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Vue from 'vue';
+
+function getRenderedTree(story, context) {
+  const storyElement = story.render(context);
+
+  const Constructor = Vue.extend(storyElement);
+  const vm = new Constructor().$mount();
+
+  return vm.$el;
+}
+
+export default getRenderedTree;
--- a/addons/storyshots/stories/snapshots/storyshot.shallow.test.js.snap
+++ b/addons/storyshots/stories/snapshots/storyshot.shallow.test.js.snap
@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</Unknown>
+`;
+
+exports[`Storyshots Another Button with text 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</Unknown>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</Unknown>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</Unknown>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<glamorous(article)>
+  <glamorous(h1)>
+    Welcome to storybook
+  </glamorous(h1)>
+  <p>
+    This is a UI component dev environment for your app.
+  </p>
+  <p>
+    We've added some basic stories inside the
+     
+    <glamorous(code)>
+      src/stories
+    </glamorous(code)>
+     
+    directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample
+     
+    <glamorous(a)
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      stories
+    </glamorous(a)>
+     
+    for a component called
+     
+    <glamorous(code)>
+      Button
+    </glamorous(code)>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    You can also edit those components and see changes right away.
+    <br />
+    (Try editing the 
+    <glamorous(code)>
+      Button
+    </glamorous(code)>
+     stories located at 
+    <glamorous(code)>
+      src/stories/index.js
+    </glamorous(code)>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+     
+    <glamorous(a)
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Writing Stories
+    </glamorous(a)>
+     
+    section in our documentation.
+  </p>
+  <glamorous(p)>
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the
+     
+    <glamorous(code)>
+      .storybook/webpack.config.js
+    </glamorous(code)>
+     
+    to add webpack loaders and plugins you are using in this project.
+  </glamorous(p)>
+</glamorous(article)>
+`;
--- a/addons/storyshots/stories/snapshots/storyshot.shallowWithOptions.test.js.snap
+++ b/addons/storyshots/stories/snapshots/storyshot.shallowWithOptions.test.js.snap
@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"😀 😎 👍 💯\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Another Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"😀 😎 👍 💯\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Welcome to storybook\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"This is a UI component dev environment for your app.\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"We've added some basic stories inside the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"directory.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"A story is a single state of one or more UI components. You can have as many stories as you want.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Basically a story is like a visual test case.)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"See these sample\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"button\\",\\"tabIndex\\":\\"0\\",\\"children\\":\\"stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"for a component called\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\".\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Just like that, you can add your own components as stories.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"You can also edit those components and see changes right away.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Try editing the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\" stories located at \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories/index.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\".)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Usually we create stories with smaller UI components in the app.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"href\\":\\"https://storybook.js.org/basics/writing-stories\\",\\"target\\":\\"_blank\\",\\"rel\\":\\"noopener noreferrer\\",\\"children\\":\\"Writing Stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"section in our documentation.\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"type\\":\\"b\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"NOTE:\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\".storybook/webpack.config.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"to add webpack loaders and plugins you are using in this project.\\"]},\\"_owner\\":null,\\"_store\\":{}}]},\\"_owner\\":null,\\"_store\\":{}}"`;
--- a/addons/storyshots/stories/storyshot.renderOnly.test.js
+++ b/addons/storyshots/stories/storyshot.renderOnly.test.js
@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { renderOnly } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: renderOnly,
+});
--- a/addons/storyshots/stories/storyshot.shallow.test.js
+++ b/addons/storyshots/stories/storyshot.shallow.test.js
@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { shallowSnapshot } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: shallowSnapshot,
+});
--- a/addons/storyshots/stories/storyshot.shallowWithOptions.test.js
+++ b/addons/storyshots/stories/storyshot.shallowWithOptions.test.js
@ -0,0 +1,14 @@
+import path from 'path';
+import initStoryshots, { shallowSnapshot } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: data =>
+    shallowSnapshot({
+      ...data,
+      options: {
+        serializer: JSON.stringify,
+      },
+    }),
+});
--- a/app/angular/package.json
+++ b/app/angular/package.json
@ -34,10 +34,10 @@
    "autoprefixer": "^7.2.5",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.0.0",
-    "babel-plugin-react-docgen": "^1.6.0",
+    "babel-plugin-react-docgen": "^1.8.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-app": "^3.0.0",
+    "babel-preset-react-app": "^3.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "case-sensitive-paths-webpack-plugin": "^2.0.0",
@ -47,12 +47,12 @@
    "configstore": "^3.1.0",
    "core-js": "^2.4.1",
    "cross-env": "^5.1.1",
-    "css-loader": "^0.28.8",
+    "css-loader": "^0.28.9",
    "express": "^4.15.3",
    "file-loader": "^0.11.1",
    "find-cache-dir": "^1.0.0",
    "global": "^4.3.2",
-    "html-loader": "^0.5.4",
+    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.4",
    "json-stringify-safe": "^5.0.1",
@ -79,7 +79,7 @@
    "uglifyjs-webpack-plugin": "^1.1.6",
    "url-loader": "^0.5.8",
    "util-deprecate": "^1.0.2",
-    "uuid": "^3.1.0",
+    "uuid": "^3.2.1",
    "webpack": "^2.5.1 || ^3.0.0",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-hot-middleware": "^2.18.0",
--- a/app/angular/src/client/preview/angular/components/app.component.ts
+++ b/app/angular/src/client/preview/angular/components/app.component.ts
@ -53,7 +53,7 @@ export class AppComponent implements OnInit, OnDestroy {
      const value = props[key];
      const instanceProperty = instance[key];

-      if (!(instanceProperty instanceof EventEmitter) && !!value) {
+      if (!(instanceProperty instanceof EventEmitter) && (value !== undefined && value !== null)) {
        instance[key] = value;
        if (hasNgOnChangesHook) {
          changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@ -33,14 +33,14 @@
    "autoprefixer": "^7.1.6",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
-    "babel-plugin-react-docgen": "^1.8.0",
+    "babel-plugin-react-docgen": "^1.8.2",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-minify": "^0.2.0",
    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-app": "^3.1.0",
+    "babel-preset-react-app": "^3.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.1",
@ -50,7 +50,7 @@
    "configstore": "^3.1.1",
    "copy-webpack-plugin": "^4.2.0",
    "core-js": "^2.5.1",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.9",
    "express": "^4.16.2",
    "file-loader": "^0.11.2",
    "find-cache-dir": "^1.0.0",
@ -75,7 +75,7 @@
    "style-loader": "^0.18.2",
    "url-loader": "^0.6.2",
    "util-deprecate": "^1.0.2",
-    "uuid": "^3.1.0",
+    "uuid": "^3.2.1",
    "webpack": "^3.6.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.20.0"
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@ -48,7 +48,7 @@
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.1",
    "commander": "^2.13.0",
-    "css-loader": "^0.28.8",
+    "css-loader": "^0.28.9",
    "express": "^4.16.2",
    "file-loader": "^1.1.6",
    "find-cache-dir": "^1.0.0",
@ -66,7 +66,7 @@
    "url-loader": "^0.6.2",
    "url-parse": "^1.1.9",
    "util-deprecate": "^1.0.2",
-    "uuid": "^3.1.0",
+    "uuid": "^3.2.1",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^1.12.2",
    "webpack-hot-middleware": "^2.21.0",
--- a/app/react/package.json
+++ b/app/react/package.json
@ -34,13 +34,13 @@
    "airbnb-js-shims": "^1.4.0",
    "autoprefixer": "^7.2.5",
    "babel-loader": "^7.1.2",
-    "babel-plugin-react-docgen": "^1.8.0",
+    "babel-plugin-react-docgen": "^1.8.2",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-minify": "^0.2.0",
    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-app": "^3.1.0",
+    "babel-preset-react-app": "^3.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.1",
@ -49,15 +49,15 @@
    "common-tags": "^1.7.2",
    "configstore": "^3.1.1",
    "core-js": "^2.5.3",
-    "css-loader": "^0.28.8",
+    "css-loader": "^0.28.9",
    "dotenv-webpack": "^1.5.4",
    "express": "^4.16.2",
    "file-loader": "^1.1.6",
    "find-cache-dir": "^1.0.0",
    "glamor": "^2.20.40",
-    "glamorous": "^4.11.2",
+    "glamorous": "^4.11.3",
    "global": "^4.3.2",
-    "html-loader": "^0.5.4",
+    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "json-stringify-safe": "^5.0.1",
@ -77,7 +77,7 @@
    "uglifyjs-webpack-plugin": "^1.1.6",
    "url-loader": "^0.6.2",
    "util-deprecate": "^1.0.2",
-    "uuid": "^3.1.0",
+    "uuid": "^3.2.1",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^1.12.2",
    "webpack-hot-middleware": "^2.21.0"
--- a/app/vue/package.json
+++ b/app/vue/package.json
@ -32,13 +32,13 @@
    "airbnb-js-shims": "^1.4.0",
    "autoprefixer": "^7.2.5",
    "babel-loader": "^7.1.2",
-    "babel-plugin-react-docgen": "^1.8.0",
+    "babel-plugin-react-docgen": "^1.8.2",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-minify": "^0.2.0",
    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-app": "^3.1.0",
+    "babel-preset-react-app": "^3.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.1",
@ -47,13 +47,13 @@
    "common-tags": "^1.7.2",
    "configstore": "^3.1.1",
    "core-js": "^2.5.3",
-    "css-loader": "^0.28.8",
+    "css-loader": "^0.28.9",
    "dotenv-webpack": "^1.5.4",
    "express": "^4.16.2",
    "file-loader": "^1.1.6",
    "find-cache-dir": "^1.0.0",
    "global": "^4.3.2",
-    "html-loader": "^0.5.4",
+    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "json-stringify-safe": "^5.0.1",
@ -73,7 +73,7 @@
    "uglifyjs-webpack-plugin": "^1.1.6",
    "url-loader": "^0.6.2",
    "util-deprecate": "^1.0.2",
-    "uuid": "^3.1.0",
+    "uuid": "^3.2.1",
    "vue-hot-reload-api": "^2.2.4",
    "vue-style-loader": "^3.0.1",
    "webpack": "^3.10.0",
--- a/docs/package.json
+++ b/docs/package.json
@ -31,12 +31,12 @@
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bootstrap": "^3.3.7",
-    "gatsby": "^1.9.155",
+    "gatsby": "^1.9.157",
    "gatsby-link": "^1.6.34",
-    "gatsby-plugin-sharp": "^1.6.24",
+    "gatsby-plugin-sharp": "^1.6.25",
    "gatsby-remark-autolink-headers": "^1.4.11",
    "gatsby-remark-copy-linked-files": "^1.5.25",
-    "gatsby-remark-images": "^1.5.36",
+    "gatsby-remark-images": "^1.5.37",
    "gatsby-remark-smartypants": "^1.4.10",
    "gatsby-source-filesystem": "^1.5.11",
    "gatsby-transformer-remark": "^1.7.28",
--- a/docs/src/pages/addons/writing-addons/index.md
+++ b/docs/src/pages/addons/writing-addons/index.md
@ -176,5 +176,5 @@ When you are developing your addon as a package, you can't use `npm link` to add

 ### Package Maintenance

-Your packaged Storybook addon needed to be written in ES5. If you are using ES6, then you need to transpile it.
+Your packaged Storybook addon needs to be written in ES5. If you are using ES6, then you need to transpile it.
 In that case, we recommend to use [React CDK](https://github.com/kadirahq/react-cdk) for that.
--- a/docs/src/pages/basics/introduction/index.md
+++ b/docs/src/pages/basics/introduction/index.md
@ -1,8 +1,7 @@
-* * *
-
+---
 id: 'introduction'
-
-## title: 'Introduction'
+title: 'Introduction'
+---

 Storybook is a UI development environment for your UI components.
 With it, you can visualize different states of your UI components and develop them interactively.
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@ -4362,9 +4362,9 @@ gatsby-module-loader@^1.0.9:
    babel-runtime "^6.26.0"
    loader-utils "^0.2.16"

-gatsby-plugin-sharp@^1.6.24:
-  version "1.6.24"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.24.tgz#f885a384b222f655534e45788a99863a038bf107"
+gatsby-plugin-sharp@^1.6.25:
+  version "1.6.25"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.25.tgz#c6c67276ac4ed7ca9ac2b15dcdcd199f12e4208d"
  dependencies:
    async "^2.1.2"
    babel-runtime "^6.26.0"
@ -4409,13 +4409,13 @@ gatsby-remark-copy-linked-files@^1.5.25:
    path-is-inside "^1.0.2"
    unist-util-visit "^1.1.1"

-gatsby-remark-images@^1.5.36:
-  version "1.5.36"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.36.tgz#12920b1c1969d519befd4c661201c28e30a896a8"
+gatsby-remark-images@^1.5.37:
+  version "1.5.37"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.37.tgz#8a8b872bac4bdac0af828b8e4e3ba4eccf5443eb"
  dependencies:
    babel-runtime "^6.26.0"
    cheerio "^1.0.0-rc.2"
-    gatsby-plugin-sharp "^1.6.24"
+    gatsby-plugin-sharp "^1.6.25"
    is-relative-url "^2.0.0"
    lodash "^4.17.4"
    slash "^1.0.0"
@ -4468,9 +4468,9 @@ gatsby-transformer-remark@^1.7.28:
    unist-util-select "^1.5.0"
    unist-util-visit "^1.1.1"

-gatsby@^1.9.155:
-  version "1.9.155"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.155.tgz#49fe4063fa2d19279f90b4a1019dcf20ce94d08a"
+gatsby@^1.9.157:
+  version "1.9.157"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.157.tgz#b9fee3bc27bffe606a325f4086c4370b04dbc26f"
  dependencies:
    async "^2.1.2"
    babel-code-frame "^6.22.0"
--- a/examples/angular-cli/angularshots.test.js
+++ b/examples/angular-cli/angularshots.test.js
@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+
+initStoryshots({
+  framework: 'angular',
+  configPath: path.join(__dirname, '.storybook'),
+  test: multiSnapshotWithOptions({}),
+});
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@ -13,26 +13,27 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^5.1.3",
-    "@angular/common": "^5.1.3",
-    "@angular/compiler": "^5.1.3",
-    "@angular/core": "^5.1.3",
-    "@angular/forms": "^5.1.3",
-    "@angular/http": "^5.1.3",
-    "@angular/platform-browser": "^5.1.3",
-    "@angular/platform-browser-dynamic": "^5.1.3",
-    "@angular/router": "^5.1.3",
+    "@angular/animations": "^5.2.1",
+    "@angular/common": "^5.2.1",
+    "@angular/compiler": "^5.2.1",
+    "@angular/core": "^5.2.1",
+    "@angular/forms": "^5.2.1",
+    "@angular/http": "^5.2.1",
+    "@angular/platform-browser": "^5.2.1",
+    "@angular/platform-browser-dynamic": "^5.2.1",
+    "@angular/router": "^5.2.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.6.4",
-    "@angular/compiler-cli": "^5.1.3",
-    "@angular/language-service": "^5.1.3",
+    "@angular/compiler-cli": "^5.2.1",
+    "@angular/language-service": "^5.2.1",
    "@storybook/addon-actions": "^3.4.0-alpha.4",
    "@storybook/addon-links": "^3.4.0-alpha.4",
    "@storybook/addon-notes": "^3.4.0-alpha.4",
+    "@storybook/addon-storyshots": "^3.4.0-alpha.4",
    "@storybook/addons": "^3.4.0-alpha.4",
    "@storybook/angular": "^3.4.0-alpha.4",
    "@types/jasmine": "~2.8.3",
--- a/examples/angular-cli/src/stories/snapshots/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/snapshots/addon-actions.stories.storyshot
@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Actions Action and method 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c5=""
+  >
+    
+        
+    <button
+      _ngcontent-c5=""
+    >
+      Action and Method
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Addon Actions Action only 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c4=""
+  >
+    
+        
+    <button
+      _ngcontent-c4=""
+    >
+      Action only
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
--- a/examples/angular-cli/src/stories/snapshots/addon-knobs.stories.storyshot
+++ b/examples/angular-cli/src/stories/snapshots/addon-knobs.stories.storyshot
@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Knobs All knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-simple-knobs-component>
+    
+      
+    <div
+      ng-reflect-ng-style="[object Object]"
+      style="border-radius: 8px;"
+    >
+      
+        
+      <h1>
+        My name is Jane,
+      </h1>
+      
+        
+      <h3>
+        today is Jan 20, 2017
+      </h3>
+      
+        
+      
+      <p>
+        I have a stock of 20 apple, costing $ 2.25 each.
+      </p>
+      
+        
+      
+       
+      
+      <p>
+        Sorry.
+      </p>
+      
+        
+      <p>
+        Also, I have:
+      </p>
+      
+        
+      <ul>
+        
+          
+        
+        <li>
+          
+            Laptop
+          
+        </li>
+        <li>
+          
+            Book
+          
+        </li>
+        <li>
+          
+            Whiskey
+          
+        </li>
+        
+        
+      </ul>
+      
+        
+      
+      <p>
+        Nice to meet you!
+      </p>
+      
+        
+      
+      
+      
+    </div>
+    
+    
+  </storybook-simple-knobs-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Addon Knobs Simple 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    
+          
+    <h1>
+       This is a template 
+    </h1>
+    
+          
+    <storybook-simple-knobs-component
+      ng-reflect-name="John Doe"
+      ng-reflect-phone-number="555-55-55"
+    >
+      
+      
+      <div>
+        I am John Doe and I'm  years old.
+      </div>
+      
+      
+      <div>
+        Phone Number: 555-55-55
+      </div>
+      
+    
+    </storybook-simple-knobs-component>
+    
+        
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
--- a/examples/angular-cli/src/stories/snapshots/addon-links.stories.storyshot
+++ b/examples/angular-cli/src/stories/snapshots/addon-links.stories.storyshot
@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button button with link to another story 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c6=""
+  >
+    
+        
+    <button
+      _ngcontent-c6=""
+    >
+      Go to Welcome Story
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
--- a/examples/angular-cli/src/stories/snapshots/addon-notes.stories.storyshot
+++ b/examples/angular-cli/src/stories/snapshots/addon-notes.stories.storyshot
@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Notes Note with HTML 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c8=""
+  >
+    
+        
+    <button
+      _ngcontent-c8=""
+    >
+      Notes with HTML
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Addon Notes Simple note 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c7=""
+  >
+    
+        
+    <button
+      _ngcontent-c7=""
+    >
+      Notes on some Button
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
--- a/examples/angular-cli/src/stories/snapshots/app.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/snapshots/app.component.stories.storyshot
@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App Component Component with separate template 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-app-root>
+    
+  
+    <div
+      class="hide"
+      style="color: red; font-size: 30px; text-align: center;"
+    >
+      
+    This should be hidden, if not - scss is not loaded as needed.
+  
+    </div>
+    
+  
+    <div
+      style="text-align:center"
+    >
+      
+    
+      <h1>
+        
+      Welcome to app!
+    
+      </h1>
+      
+    
+      <img
+        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+        width="300"
+      />
+      
+  
+    </div>
+    
+  
+    <h2>
+      Here are some links to help you start: 
+    </h2>
+    
+  
+    <ul>
+      
+    
+      <li>
+        
+      
+        <h2>
+          <a
+            href="https://angular.io/tutorial"
+            target="_blank"
+          >
+            Tour of Heroes
+          </a>
+        </h2>
+        
+    
+      </li>
+      
+    
+      <li>
+        
+      
+        <h2>
+          <a
+            href="https://github.com/angular/angular-cli/wiki"
+            target="_blank"
+          >
+            CLI Documentation
+          </a>
+        </h2>
+        
+    
+      </li>
+      
+    
+      <li>
+        
+      
+        <h2>
+          <a
+            href="https://blog.angular.io//"
+            target="_blank"
+          >
+            Angular blog
+          </a>
+        </h2>
+        
+    
+      </li>
+      
+  
+    </ul>
+    
+  
+  
+  </storybook-app-root>
+</storybook-dynamic-app-root>
+`;
--- a/examples/angular-cli/src/stories/snapshots/custom-metadata.stories.storyshot
+++ b/examples/angular-cli/src/stories/snapshots/custom-metadata.stories.storyshot
@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom Pipe Default 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </storybook-name>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </storybook-name>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom ngModule metadata simple 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-simple-service-component>
+    
+      
+    <p>
+      Static name:
+    </p>
+    
+      
+    <ul>
+      
+        
+      
+      
+      
+    </ul>
+    
+    
+  </storybook-simple-service-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-simple-service-component>
+    
+      
+    <p>
+      Dynamic knob:
+    </p>
+    
+      
+    <ul>
+      
+        
+      
+      
+      
+    </ul>
+    
+    
+  </storybook-simple-service-component>
+</storybook-dynamic-app-root>
+`;
--- a/examples/angular-cli/src/stories/snapshots/index.storyshot
+++ b/examples/angular-cli/src/stories/snapshots/index.storyshot
@ -0,0 +1,414 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button with some emoji 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c3=""
+  >
+    
+        
+    <button
+      _ngcontent-c3=""
+    >
+      😀 😎 👍 💯
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    
+        
+    <h1>
+       This is a template 
+    </h1>
+    
+        
+    <storybook-button-component
+      _nghost-c1=""
+      ng-reflect-text="Hello Button"
+    >
+      
+        
+      <button
+        _ngcontent-c1=""
+      >
+        Hello Button
+      </button>
+      
+    
+    </storybook-button-component>
+    
+        
+    <storybook-welcome-component
+      _nghost-c2=""
+    >
+      
+        
+      <main
+        _ngcontent-c2=""
+      >
+        
+          
+        <h1
+          _ngcontent-c2=""
+        >
+          Welcome to storybook
+        </h1>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          This is a UI component dev environment for your app.
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            We've added some basic stories inside the 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            src/stories
+          </span>
+           directory.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            A story is a single state of one or more UI components. You can have as many stories as
+            you want.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            (Basically a story is like a visual test case.)
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            See these sample 
+          <a
+            _ngcontent-c2=""
+            role="button"
+            tabindex="0"
+          >
+            stories
+          </a>
+           for a component called
+            
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            Button
+          </span>
+           .
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            Just like that, you can add your own components as stories.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            You can also edit those components and see changes right away.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            (Try editing the 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            Button
+          </span>
+           stories
+            located at 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            src/stories/index.js
+          </span>
+          .)
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            Usually we create stories with smaller UI components in the app.
+          <br
+            _ngcontent-c2=""
+          />
+          
+            Have a look at the 
+          <a
+            _ngcontent-c2=""
+            href="https://storybook.js.org/basics/writing-stories"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            
+              Writing Stories
+            
+          </a>
+           section in our documentation.
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+          class="note"
+        >
+          
+            
+          <b
+            _ngcontent-c2=""
+          >
+            NOTE:
+          </b>
+          
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            Have a look at the 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            .storybook/webpack.config.js
+          </span>
+          
+            to add webpack loaders and plugins you are using in this project.
+          
+        </p>
+        
+        
+      </main>
+      
+    
+    </storybook-welcome-component>
+    
+      
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-welcome-component
+    _nghost-c0=""
+  >
+    
+        
+    <main
+      _ngcontent-c0=""
+    >
+      
+          
+      <h1
+        _ngcontent-c0=""
+      >
+        Welcome to storybook
+      </h1>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        This is a UI component dev environment for your app.
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        
+            We've added some basic stories inside the 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          src/stories
+        </span>
+         directory.
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            A story is a single state of one or more UI components. You can have as many stories as
+            you want.
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            (Basically a story is like a visual test case.)
+          
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        
+            See these sample 
+        <a
+          _ngcontent-c0=""
+          role="button"
+          tabindex="0"
+        >
+          stories
+        </a>
+         for a component called
+            
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          Button
+        </span>
+         .
+          
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        
+            Just like that, you can add your own components as stories.
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            You can also edit those components and see changes right away.
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            (Try editing the 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          Button
+        </span>
+         stories
+            located at 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          src/stories/index.js
+        </span>
+        .)
+          
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        
+            Usually we create stories with smaller UI components in the app.
+        <br
+          _ngcontent-c0=""
+        />
+        
+            Have a look at the 
+        <a
+          _ngcontent-c0=""
+          href="https://storybook.js.org/basics/writing-stories"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          
+              Writing Stories
+            
+        </a>
+         section in our documentation.
+          
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+        class="note"
+      >
+        
+            
+        <b
+          _ngcontent-c0=""
+        >
+          NOTE:
+        </b>
+        
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            Have a look at the 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          .storybook/webpack.config.js
+        </span>
+        
+            to add webpack loaders and plugins you are using in this project.
+          
+      </p>
+      
+        
+    </main>
+    
+    
+  </storybook-welcome-component>
+</storybook-dynamic-app-root>
+`;
--- a/examples/angular-cli/src/stories/addon-knobs.stories.ts
+++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts
@ -20,11 +20,23 @@ storiesOf('Addon Knobs', module)
  .addDecorator(withKnobs)
  .add('Simple', () => {
    const name = text('name', 'John Doe');
-    const age = number('age', 44);
+    const age = number('age', 0);
    const phoneNumber = text('phoneNumber', '555-55-55');

    return {
-      component: SimpleKnobsComponent,
+      moduleMetadata: {
+        entryComponents: [SimpleKnobsComponent],
+        declarations: [SimpleKnobsComponent],
+      },
+      template: `
+        <h1> This is a template </h1>
+        <storybook-simple-knobs-component
+          [age]="age"
+          [phoneNumber]="phoneNumber"
+          [name]="name"
+        >
+        </storybook-simple-knobs-component>
+      `,
      props: {
        name,
        age,
--- a/examples/angular-cli/src/stories/addon-links.stories.ts
+++ b/examples/angular-cli/src/stories/addon-links.stories.ts
@ -0,0 +1,11 @@
+import { linkTo } from '@storybook/addon-links';
+import { storiesOf } from '@storybook/angular';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Another Button', module).add('button with link to another story', () => ({
+  component: Button,
+  props: {
+    text: 'Go to Welcome Story',
+    onClick: linkTo('Welcome'),
+  },
+}));
--- a/examples/angular-cli/src/stories/app.component.stories.ts
+++ b/examples/angular-cli/src/stories/app.component.stories.ts
@ -0,0 +1,7 @@
+import { storiesOf } from '@storybook/angular';
+import { AppComponent } from '../app/app.component';
+
+storiesOf('App Component', module).add('Component with separate template', () => ({
+  component: AppComponent,
+  props: {},
+}));
--- a/examples/angular-cli/src/stories/component-with-di/snapshots/di.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/component-with-di/snapshots/di.component.stories.storyshot
@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Component dependencies inputs and inject dependencies 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-di-component>
+    <div>
+      
+    
+      <div>
+        All dependencies are defined: true
+      </div>
+      
+    
+      <div>
+        Title: Component dependencies
+      </div>
+      
+    
+      <div>
+        Injector: function Injector_(view, elDef) {
+          this.view = view;
+          this.elDef = elDef;
+      }
+      </div>
+      
+    
+      <div>
+        ElementRef: {"nativeElement":{}}
+      </div>
+      
+    
+      <div>
+        TestToken: 123
+      </div>
+      
+  
+    </div>
+    
+  
+  </storybook-di-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Component dependencies inputs and inject dependencies with knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-di-component>
+    <div>
+      
+    
+      <div>
+        All dependencies are defined: true
+      </div>
+      
+    
+      <div>
+        Title: Component dependencies
+      </div>
+      
+    
+      <div>
+        Injector: function Injector_(view, elDef) {
+          this.view = view;
+          this.elDef = elDef;
+      }
+      </div>
+      
+    
+      <div>
+        ElementRef: {"nativeElement":{}}
+      </div>
+      
+    
+      <div>
+        TestToken: 123
+      </div>
+      
+  
+    </div>
+    
+  
+  </storybook-di-component>
+</storybook-dynamic-app-root>
+`;
--- a/examples/angular-cli/src/stories/custom-metadata.stories.ts
+++ b/examples/angular-cli/src/stories/custom-metadata.stories.ts
@ -1,8 +1,8 @@
 import { storiesOf } from '@storybook/angular';
 import { withKnobs, text } from '@storybook/addon-knobs/angular';

-import { NameComponent } from './name.component';
-import { CustomPipePipe } from './custom.pipe';
+import { NameComponent } from './moduleMetadata/name.component';
+import { CustomPipePipe } from './moduleMetadata/custom.pipe';
 import { DummyService } from './moduleMetadata/dummy.service';
 import { ServiceComponent } from './moduleMetadata/service.component';

--- a/examples/angular-cli/src/stories/customControlValueAccessor/snapshots/custom-cva-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/snapshots/custom-cva-component.stories.storyshot
@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-custom-cva-component>
+    
+      
+    <div>
+      Type anything
+    </div>
+    
+      
+    <input
+      class="ng-untouched ng-pristine ng-valid"
+      ng-reflect-model="Type anything"
+      type="text"
+    />
+    
+    
+  </storybook-custom-cva-component>
+</storybook-dynamic-app-root>
+`;
--- a/examples/angular-cli/src/stories/index.ts
+++ b/examples/angular-cli/src/stories/index.ts
@ -1,8 +1,5 @@
 import { storiesOf } from '@storybook/angular';
-import { linkTo } from '@storybook/addon-links';
-
 import { Welcome, Button } from '@storybook/angular/demo';
-import { AppComponent } from '../app/app.component';

 storiesOf('Welcome', module).add('to Storybook', () => ({
  component: Welcome,
@ -35,16 +32,3 @@ storiesOf('Button', module)
      onClick: () => {},
    },
  }));
-
-storiesOf('Another Button', module).add('button with link to another story', () => ({
-  component: Button,
-  props: {
-    text: 'Go to Welcome Story',
-    onClick: linkTo('Welcome'),
-  },
-}));
-
-storiesOf('App Component', module).add('Component with separate template', () => ({
-  component: AppComponent,
-  props: {},
-}));
--- a/examples/angular-cli/src/stories/moduleMetadata/custom.pipe.ts
+++ b/examples/angular-cli/src/stories/moduleMetadata/custom.pipe.ts
--- a/examples/angular-cli/src/stories/moduleMetadata/name.component.ts
+++ b/examples/angular-cli/src/stories/moduleMetadata/name.component.ts
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@ -11,7 +11,7 @@
  },
  "dependencies": {
    "glamor": "^2.20.40",
-    "glamorous": "^4.11.2",
+    "glamorous": "^4.11.3",
    "global": "^4.3.2",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
@ -35,12 +35,12 @@
    "@storybook/client-logger": "^3.4.0-alpha.4",
    "@storybook/components": "^3.4.0-alpha.4",
    "@storybook/react": "^3.4.0-alpha.4",
-    "babel-jest": "^22.0.6",
+    "babel-jest": "^22.1.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.0",
    "enzyme-to-json": "^3.2.2",
-    "jest": "^22.0.6",
-    "react-scripts": "^1.0.17"
+    "jest": "^22.1.2",
+    "react-scripts": "^1.1.0"
  },
  "private": true
 }
--- a/examples/cra-kitchen-sink/src/stories/snapshots/index.stories.storyshot
+++ b/examples/cra-kitchen-sink/src/stories/snapshots/index.stories.storyshot
@ -92,92 +92,110 @@ exports[`Storyshots Button addons composition 1`] = `
            Story Source
          </h1>
          <pre
-            style="font-size:.88em;font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa;padding:.5rem;line-height:1.5;overflow-x:scroll"
+            class="css-4akams"
          >
            <div>
-              <div
-                style="padding-left:18px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+              <div>
+                <div
+                  style="padding-left:18px;padding-right:3px"
                >
-                  &lt;div
-                </span>
-                <span />
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    &lt;div
+                  </span>
+                  <span />
+                  <span
+                    style="color:#777"
+                  >
+                    &gt;
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  &gt;
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
-                />
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  />
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  click the 
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    click the 
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  &lt;InfoButton
-                </span>
-                <span />
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    &lt;InfoButton
+                  </span>
+                  <span />
+                  <span
+                    style="color:#777"
+                  >
+                    /&gt;
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  /&gt;
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                     label in top right for info about "
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                   label in top right for info about "
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    addons composition
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  addons composition
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    "
+                  </span>
+                </div>
+                <div
+                  style="padding-left:18px;padding-right:3px"
                >
-                  "
-                </span>
-              </div>
-              <div
-                style="padding-left:18px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
-                >
-                  &lt;/div&gt;
-                </span>
+                  <span
+                    style="color:#777"
+                  >
+                    &lt;/div&gt;
+                  </span>
+                </div>
              </div>
            </div>
+            <button
+              class="css-gydez8"
+            >
+              <div
+                class="css-kv47nt"
+              >
+                <div
+                  style="margin-bottom:6px"
+                >
+                  Copied!
+                </div>
+                <div>
+                  Copy
+                </div>
+              </div>
+            </button>
          </pre>
        </div>
        <div>
@ -278,92 +296,110 @@ exports[`Storyshots Button with new info 1`] = `
            Story Source
          </h1>
          <pre
-            style="font-size:.88em;font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa;padding:.5rem;line-height:1.5;overflow-x:scroll"
+            class="css-4akams"
          >
            <div>
-              <div
-                style="padding-left:18px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+              <div>
+                <div
+                  style="padding-left:18px;padding-right:3px"
                >
-                  &lt;Container
-                </span>
-                <span />
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    &lt;Container
+                  </span>
+                  <span />
+                  <span
+                    style="color:#777"
+                  >
+                    &gt;
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  &gt;
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
-                />
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  />
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  click the 
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    click the 
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  &lt;InfoButton
-                </span>
-                <span />
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    &lt;InfoButton
+                  </span>
+                  <span />
+                  <span
+                    style="color:#777"
+                  >
+                    /&gt;
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  /&gt;
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                     label in top right for info about "
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                   label in top right for info about "
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    with new info
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  with new info
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    "
+                  </span>
+                </div>
+                <div
+                  style="padding-left:18px;padding-right:3px"
                >
-                  "
-                </span>
-              </div>
-              <div
-                style="padding-left:18px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
-                >
-                  &lt;/Container&gt;
-                </span>
+                  <span
+                    style="color:#777"
+                  >
+                    &lt;/Container&gt;
+                  </span>
+                </div>
              </div>
            </div>
+            <button
+              class="css-gydez8"
+            >
+              <div
+                class="css-kv47nt"
+              >
+                <div
+                  style="margin-bottom:6px"
+                >
+                  Copied!
+                </div>
+                <div>
+                  Copy
+                </div>
+              </div>
+            </button>
          </pre>
        </div>
        <div>
@ -674,85 +710,103 @@ exports[`Storyshots Button with some info 1`] = `
            Story Source
          </h1>
          <pre
-            style="font-size:.88em;font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa;padding:.5rem;line-height:1.5;overflow-x:scroll"
+            class="css-4akams"
          >
            <div>
-              <div
-                style="padding-left:18px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+              <div>
+                <div
+                  style="padding-left:18px;padding-right:3px"
                >
-                  &lt;Container
-                </span>
-                <span />
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    &lt;Container
+                  </span>
+                  <span />
+                  <span
+                    style="color:#777"
+                  >
+                    &gt;
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  &gt;
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    click the 
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  click the 
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    &lt;InfoButton
+                  </span>
+                  <span />
+                  <span
+                    style="color:#777"
+                  >
+                    /&gt;
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  &lt;InfoButton
-                </span>
-                <span />
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                     label in top right for info about "
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                  /&gt;
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    with some info
+                  </span>
+                </div>
+                <div
+                  style="padding-left:33px;padding-right:3px"
                >
-                   label in top right for info about "
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
+                  <span
+                    style="color:#777"
+                  >
+                    "
+                  </span>
+                </div>
+                <div
+                  style="padding-left:18px;padding-right:3px"
                >
-                  with some info
-                </span>
-              </div>
-              <div
-                style="padding-left:33px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
-                >
-                  "
-                </span>
-              </div>
-              <div
-                style="padding-left:18px;padding-right:3px"
-              >
-                <span
-                  style="color:#777"
-                >
-                  &lt;/Container&gt;
-                </span>
+                  <span
+                    style="color:#777"
+                  >
+                    &lt;/Container&gt;
+                  </span>
+                </div>
              </div>
            </div>
+            <button
+              class="css-gydez8"
+            >
+              <div
+                class="css-kv47nt"
+              >
+                <div
+                  style="margin-bottom:6px"
+                >
+                  Copied!
+                </div>
+                <div>
+                  Copy
+                </div>
+              </div>
+            </button>
          </pre>
        </div>
        <div>
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@ -37,7 +37,7 @@
    "react": "^16.2.0",
    "react-chromatic": "^0.7.3",
    "react-dom": "^16.2.0",
-    "uuid": "^3.1.0"
+    "uuid": "^3.2.1"
  },
  "private": true
 }
--- a/examples/official-storybook/stories/snapshots/addon-backgrounds.stories.storyshot
+++ b/examples/official-storybook/stories/snapshots/addon-backgrounds.stories.storyshot
@ -2,7 +2,7 @@

 exports[`Storyshots Addons|Backgrounds story 1 1`] = `
 <div
-  style="overflow:scroll;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
+  style="overflow:auto;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
 >
  <button>
    You should be able to switch backgrounds for this story
@ -12,7 +12,7 @@ exports[`Storyshots Addons|Backgrounds story 1 1`] = `

 exports[`Storyshots Addons|Backgrounds story 2 1`] = `
 <div
-  style="overflow:scroll;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
+  style="overflow:auto;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
 >
  <button>
    This one too!
--- a/examples/official-storybook/stories/snapshots/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/snapshots/addon-info.stories.storyshot
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@ -26,6 +26,6 @@
    "babel-preset-stage-2": "^6.24.1",
    "copy-webpack-plugin": "^4.2.0",
    "html-webpack-plugin": "^2.30.1",
-    "webpack-dev-server": "^2.9.4"
+    "webpack-dev-server": "^2.11.0"
  }
 }
--- a/examples/vue-kitchen-sink/.babelrc
+++ b/examples/vue-kitchen-sink/.babelrc
@ -2,6 +2,11 @@
  "presets": [
    ["env", { "modules": false }],
    "vue"
-  ]
+  ],
+  "env": {
+    "test": {
+      "presets": ["env"]
+    }
+  }
 }

--- a/examples/vue-kitchen-sink/.storybook/config.js
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@ -5,8 +5,8 @@ import Vuex from 'vuex'

 import MyButton from '../src/stories/Button.vue'

-Vue.component('my-button', MyButton)
-Vue.use(Vuex)
+Vue.component('my-button', MyButton);
+Vue.use(Vuex);

 function loadStories() {
  require('../src/stories');
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@ -8,6 +8,7 @@
    "@storybook/addon-knobs": "^3.4.0-alpha.4",
    "@storybook/addon-links": "^3.4.0-alpha.4",
    "@storybook/addon-notes": "^3.4.0-alpha.4",
+    "@storybook/addon-storyshots": "^3.4.0-alpha.4",
    "@storybook/addon-viewport": "^3.4.0-alpha.4",
    "@storybook/addons": "^3.4.0-alpha.4",
    "@storybook/vue": "^3.4.0-alpha.4",
@ -16,14 +17,14 @@
    "babel-preset-env": "^1.6.0",
    "babel-preset-vue": "^1.2.1",
    "cross-env": "^5.1.3",
-    "css-loader": "^0.28.8",
+    "css-loader": "^0.28.9",
    "file-loader": "^1.1.6",
    "vue-hot-reload-api": "^2.2.4",
    "vue-loader": "^13.7.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.10.1"
+    "webpack-dev-server": "^2.11.0"
  },
  "dependencies": {
    "vue": "^2.5.13",
--- a/examples/vue-kitchen-sink/src/stories/Welcome.vue
+++ b/examples/vue-kitchen-sink/src/stories/Welcome.vue
@ -53,6 +53,9 @@
  </div>
 </template>

+<script>
+</script>
+
 <style>
  .main {
    margin: 15px;
--- a/examples/vue-kitchen-sink/src/stories/snapshots/index.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/snapshots/index.storyshot
@ -0,0 +1,478 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Actions Action and method 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon Actions Action only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon Knobs All knobs 1`] = `
+<div
+  style="padding: 8px 22px; border-radius: 8px;"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+   
+  <h3>
+    today is 2017-1-20
+  </h3>
+   
+  <p>
+    I have a stock of 20 apple, costing $2.25 each.
+  </p>
+   
+  <p>
+    Also, I have:
+  </p>
+   
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+   
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addon Notes Note with HTML 1`] = `
+<p>
+  🤔😳😯😮
+  <br />
+  😄😩😓😱
+  <br />
+  🤓😑😶😊
+</p>
+`;
+
+exports[`Storyshots Addon Notes Simple note 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
+
+exports[`Storyshots App App 1`] = `
+<div
+  id="app"
+>
+  <img
+    src="./logo.png"
+  />
+   
+  <h1 />
+   
+  <h2>
+    Essential Links
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="https://vuejs.org"
+        target="_blank"
+      >
+        Core Docs
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://forum.vuejs.org"
+        target="_blank"
+      >
+        Forum
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://gitter.im/vuejs/vue"
+        target="_blank"
+      >
+        Gitter Chat
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://twitter.com/vuejs"
+        target="_blank"
+      >
+        Twitter
+      </a>
+    </li>
+  </ul>
+   
+  <h2>
+    Ecosystem
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="http://router.vuejs.org/"
+        target="_blank"
+      >
+        vue-router
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vuex.vuejs.org/"
+        target="_blank"
+      >
+        vuex
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vue-loader.vuejs.org/"
+        target="_blank"
+      >
+        vue-loader
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://github.com/vuejs/awesome-vue"
+        target="_blank"
+      >
+        awesome-vue
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Storyshots Button rounded 1`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
+>
+  <div
+    style="margin: auto;"
+  >
+    <button
+      class="button rounded"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with rounded edges!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Button square 1`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
+>
+  <div
+    style="margin: auto;"
+  >
+    <button
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with square edges!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Decorator for Vue render 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+    >
+      renders component: MyButton!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Decorator for Vue template 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      MyButton with template!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Method for rendering Vue JSX 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered with JSX!
+</button>
+`;
+
+exports[`Storyshots Method for rendering Vue pre-registered component 1`] = `
+<p>
+  <em>
+    This component was pre-registered in .storybook/config.js
+  </em>
+  <br />
+   
+  <button
+    class="button"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Method for rendering Vue render + component 1`] = `
+<button
+  class="button"
+>
+  renders component: MyButton!
+</button>
+`;
+
+exports[`Storyshots Method for rendering Vue render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Method for rendering Vue template + component 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered in a template!
+</button>
+`;
+
+exports[`Storyshots Method for rendering Vue template + methods 1`] = `
+<p>
+  <em>
+    Clicking the button will navigate to another story using the 'addon-links'
+  </em>
+  <br />
+   
+  <button
+    class="button rounded"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template + props & methods!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Method for rendering Vue template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
+exports[`Storyshots Method for rendering Vue vuex + actions 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with vuex: 0!
+</button>
+`;
+
+exports[`Storyshots Method for rendering Vue whatever you want 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with awesomeness: 0!
+</button>
+`;
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<div
+  class="main"
+>
+  <h1>
+    Welcome to Storybook for Vue
+  </h1>
+   
+  <p>
+    
+    This is a UI component dev environment for your vue app.
+  
+  </p>
+   
+  <p>
+    
+    We've added some basic stories inside the
+    
+    <code
+      class="code"
+    >
+      src/stories
+    </code>
+    
+    directory.
+    
+    <br />
+    
+    A story is a single state of one or more UI components.
+    You can have as many stories as you want.
+    
+    <br />
+    
+    (Basically a story is like a visual test case.)
+  
+  </p>
+   
+  <p>
+    
+    See these sample
+    
+    <a
+      class="link"
+      href="#"
+    >
+      stories
+    </a>
+    
+    for a component called
+    
+    <code
+      class="code"
+    >
+      Button
+    </code>
+    
+    .
+  
+  </p>
+   
+  <p
+    style="text-align: center;"
+  >
+    <img
+      src="../logo.png"
+    />
+  </p>
+   
+  <p>
+    
+    Just like that, you can add your own components as stories.
+    
+    <br />
+    
+    You can also edit those components and see changes right away.
+    
+    <br />
+    
+    (Try editing the 
+    <code
+      class="code"
+    >
+      Button
+    </code>
+     component
+    located at 
+    <code
+      class="code"
+    >
+      src/stories/Button.js
+    </code>
+    .)
+  
+  </p>
+   
+  <p>
+    
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    
+    Have a look at the
+    
+    <a
+      class="link"
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+    >
+      
+      Writing Stories
+    
+    </a>
+    
+    section in our documentation.
+  
+  </p>
+   
+  <p
+    class="note"
+  >
+    <b>
+      NOTE:
+    </b>
+     
+    <br />
+    
+    Have a look at the
+    
+    <code
+      class="code"
+    >
+      .storybook/webpack.config.js
+    </code>
+    
+    to add webpack
+    loaders and plugins you are using in this project.
+  
+  </p>
+</div>
+`;
--- a/examples/vue-kitchen-sink/vueshots.test.js
+++ b/examples/vue-kitchen-sink/vueshots.test.js
@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+
+initStoryshots({
+  framework: 'vue',
+  configPath: path.join(__dirname, '.storybook'),
+  test: multiSnapshotWithOptions({}),
+});
--- a/jest.config.js
+++ b/jest.config.js
@ -1,4 +1,7 @@
 module.exports = {
+  globals: {
+    __TRANSFORM_HTML__: true,
+  },
  cacheDirectory: '.cache/jest',
  clearMocks: true,
  moduleNameMapper: {
@ -12,8 +15,15 @@ module.exports = {
    '<rootDir>/app',
    '<rootDir>/lib',
    '<rootDir>/examples/cra-kitchen-sink',
+    '<rootDir>/examples/vue-kitchen-sink',
    '<rootDir>/examples/official-storybook',
+    '<rootDir>/examples/angular-cli',
  ],
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
+  },
  testPathIgnorePatterns: ['/node_modules/', 'addon-jest.test.js', '/cli/test/'],
  collectCoverage: false,
  collectCoverageFrom: [
@ -28,4 +38,5 @@ module.exports = {
  setupTestFrameworkScriptFile: './scripts/jest.init.js',
  setupFiles: ['raf/polyfill'],
  testURL: 'http://localhost',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html', 'vue'],
 };
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@ -38,7 +38,7 @@
    "json5": "^0.5.1",
    "latest-version": "^3.1.0",
    "merge-dirs": "^0.2.1",
-    "semver": "^5.4.1",
+    "semver": "^5.5.0",
    "shelljs": "^0.8.0",
    "update-notifier": "^2.3.0"
  },
--- a/lib/components/package.json
+++ b/lib/components/package.json
@ -16,7 +16,7 @@
  },
  "dependencies": {
    "glamor": "^2.20.40",
-    "glamorous": "^4.11.2",
+    "glamorous": "^4.11.3",
    "prop-types": "^15.6.0"
  },
  "peerDependencies": {
--- a/lib/core/src/client/preview/client_api.js
+++ b/lib/core/src/client/preview/client_api.js
@ -2,6 +2,8 @@

 import { logger } from '@storybook/client-logger';

+import StoryStore from './story_store';
+
 const defaultDecorateStory = (getStory, decorators) =>
  decorators.reduce(
    (decorated, decorator) => context => decorator(() => decorated(context), context),
@ -9,7 +11,11 @@ const defaultDecorateStory = (getStory, decorators) =>
  );

 export default class ClientApi {
-  constructor({ channel, storyStore, decorateStory = defaultDecorateStory }) {
+  constructor({
+    channel,
+    storyStore = new StoryStore(),
+    decorateStory = defaultDecorateStory,
+  } = {}) {
    // channel can be null when running in node
    // always check whether channel is available
    this._channel = channel;
--- a/lib/core/src/client/preview/client_api.test.js
+++ b/lib/core/src/client/preview/client_api.test.js
@ -2,52 +2,6 @@

 import ClientAPI from './client_api';

-class StoryStore {
-  constructor() {
-    this.stories = [];
-  }
-
-  addStory(kind, story, fn, fileName) {
-    this.stories.push({ kind, story, fn, fileName });
-  }
-
-  getStoryKinds() {
-    return this.stories.reduce((kinds, info) => {
-      if (kinds.indexOf(info.kind) === -1) {
-        kinds.push(info.kind);
-      }
-      return kinds;
-    }, []);
-  }
-
-  getStories(kind) {
-    return this.stories.reduce((stories, info) => {
-      if (info.kind === kind) {
-        stories.push(info.story);
-      }
-      return stories;
-    }, []);
-  }
-
-  getStoryFileName(kind) {
-    const story = this.stories.find(info => info.kind === kind);
-    return story ? story.fileName : null;
-  }
-
-  getStory(kind, name) {
-    return this.stories.reduce((fn, info) => {
-      if (!fn && info.kind === kind && info.story === name) {
-        return info.fn;
-      }
-      return fn;
-    }, null);
-  }
-
-  hasStory(kind, name) {
-    return Boolean(this.getStory(kind, name));
-  }
-}
-
 describe('preview.client_api', () => {
  describe('setAddon', () => {
    it('should register addons', () => {
@ -138,8 +92,18 @@ describe('preview.client_api', () => {
  });

  describe('addDecorator', () => {
+    class MockStoryStore {
+      stories = [];
+      addStory(kind, name, fn, fileName) {
+        this.stories.push({ kind, name, fn, fileName });
+      }
+      hasStory(k, n) {
+        return this.stories.find(({ kind, name }) => kind === k && name === n);
+      }
+    }
+
    it('should add local decorators', () => {
-      const storyStore = new StoryStore();
+      const storyStore = new MockStoryStore();
      const api = new ClientAPI({ storyStore });
      const localApi = api.storiesOf('none', module);
      localApi.addDecorator(fn => `aa-${fn()}`);
@ -149,7 +113,7 @@ describe('preview.client_api', () => {
    });

    it('should add global decorators', () => {
-      const storyStore = new StoryStore();
+      const storyStore = new MockStoryStore();
      const api = new ClientAPI({ storyStore });
      api.addDecorator(fn => `bb-${fn()}`);
      const localApi = api.storiesOf('none', module);
@ -159,7 +123,7 @@ describe('preview.client_api', () => {
    });

    it('should utilize both decorators at once', () => {
-      const storyStore = new StoryStore();
+      const storyStore = new MockStoryStore();
      const api = new ClientAPI({ storyStore });
      const localApi = api.storiesOf('none', module);

@ -171,7 +135,7 @@ describe('preview.client_api', () => {
    });

    it('should pass the context', () => {
-      const storyStore = new StoryStore();
+      const storyStore = new MockStoryStore();
      const api = new ClientAPI({ storyStore });
      const localApi = api.storiesOf('none', module);
      localApi.addDecorator(fn => `aa-${fn()}`);
@ -186,7 +150,7 @@ describe('preview.client_api', () => {
    });

    it('should have access to the context', () => {
-      const storyStore = new StoryStore();
+      const storyStore = new MockStoryStore();
      const api = new ClientAPI({ storyStore });
      const localApi = api.storiesOf('none', module);
      localApi.addDecorator((fn, { kind, story }) => `${kind}-${story}-${fn()}`);
@ -211,81 +175,98 @@ describe('preview.client_api', () => {
  });

  describe('getStorybook', () => {
-    it('should return storybook when empty', () => {
-      const storyStore = new StoryStore();
-      const api = new ClientAPI({ storyStore });
-      const book = api.getStorybook();
-      expect(book).toEqual([]);
-    });
+    it('should transform the storybook to an array with filenames', () => {
+      class MockStoryStore {
+        getStoryKinds() {
+          return ['kind-1', 'kind-2'];
+        }

-    it('should return storybook with stories', () => {
-      const storyStore = new StoryStore();
-      const api = new ClientAPI({ storyStore });
-      const functions = {
-        'story-1.1': () => 'story-1.1',
-        'story-1.2': () => 'story-1.2',
-        'story-2.1': () => 'story-2.1',
-        'story-2.2': () => 'story-2.2',
-      };
-      const kind1 = api.storiesOf('kind-1', { filename: 'kind1.js' });
-      kind1.add('story-1.1', functions['story-1.1']);
-      kind1.add('story-1.2', functions['story-1.2']);
-      const kind2 = api.storiesOf('kind-2', { filename: 'kind2.js' });
-      kind2.add('story-2.1', functions['story-2.1']);
-      kind2.add('story-2.2', functions['story-2.2']);
+        getStoryFileName(kind) {
+          return `${kind}.js`;
+        }
+
+        getStories() {
+          return ['a', 'b'];
+        }
+
+        getStory(kind, name) {
+          return `${kind}:${name}`;
+        }
+      }
+
+      const api = new ClientAPI({ storyStore: new MockStoryStore() });
      const book = api.getStorybook();
      expect(book).toEqual([
        {
          kind: 'kind-1',
-          fileName: 'kind1.js',
-          stories: [
-            { name: 'story-1.1', render: functions['story-1.1'] },
-            { name: 'story-1.2', render: functions['story-1.2'] },
-          ],
+          fileName: 'kind-1.js',
+          stories: [{ name: 'a', render: 'kind-1:a' }, { name: 'b', render: 'kind-1:b' }],
        },
        {
          kind: 'kind-2',
-          fileName: 'kind2.js',
-          stories: [
-            { name: 'story-2.1', render: functions['story-2.1'] },
-            { name: 'story-2.2', render: functions['story-2.2'] },
-          ],
+          fileName: 'kind-2.js',
+          stories: [{ name: 'a', render: 'kind-2:a' }, { name: 'b', render: 'kind-2:b' }],
        },
      ]);
    });
+  });

-    it('should return storybook with file names when module with file name provided', () => {
-      const storyStore = new StoryStore();
-      const api = new ClientAPI({ storyStore });
-      const functions = {
-        'story-1.1': () => 'story-1.1',
-        'story-1.2': () => 'story-1.2',
-        'story-2.1': () => 'story-2.1',
-        'story-2.2': () => 'story-2.2',
-      };
-      const kind1 = api.storiesOf('kind-1', { filename: 'foo' });
-      kind1.add('story-1.1', functions['story-1.1']);
-      kind1.add('story-1.2', functions['story-1.2']);
-      const kind2 = api.storiesOf('kind-2', { filename: 'bar' });
-      kind2.add('story-2.1', functions['story-2.1']);
-      kind2.add('story-2.2', functions['story-2.2']);
-      const book = api.getStorybook();
-      expect(book).toEqual([
-        {
-          kind: 'kind-1',
-          fileName: 'foo',
-          stories: [
-            { name: 'story-1.1', render: functions['story-1.1'] },
-            { name: 'story-1.2', render: functions['story-1.2'] },
-          ],
+  describe('reads filename from module', () => {
+    const api = new ClientAPI();
+    const story = () => 0;
+    api.storiesOf('kind', { filename: 'foo.js' }).add('story', story);
+    expect(api.getStorybook()).toEqual([
+      { kind: 'kind', fileName: 'foo.js', stories: [{ name: 'story', render: story }] },
+    ]);
+  });
+
+  describe('hot module loading', () => {
+    class MockModule {
+      hot = {
+        callbacks: [],
+        dispose(fn) {
+          this.callbacks.push(fn);
        },
+        reload() {
+          this.callbacks.forEach(fn => fn());
+        },
+      };
+    }
+
+    it('should increment store revision when the module reloads', () => {
+      const api = new ClientAPI();
+      expect(api._storyStore.getRevision()).toEqual(0);
+
+      const module = new MockModule();
+      api.storiesOf('kind', module);
+      module.hot.reload();
+
+      expect(api._storyStore.getRevision()).toEqual(1);
+    });
+
+    it('should replace a kind when the module reloads', () => {
+      const module = new MockModule();
+      const stories = [jest.fn(), jest.fn()];
+
+      const api = new ClientAPI();
+      expect(api.getStorybook()).toEqual([]);
+
+      api.storiesOf('kind', module).add('story', stories[0]);
+      expect(api.getStorybook()).toEqual([
        {
-          kind: 'kind-2',
-          fileName: 'bar',
-          stories: [
-            { name: 'story-2.1', render: functions['story-2.1'] },
-            { name: 'story-2.2', render: functions['story-2.2'] },
-          ],
+          kind: 'kind',
+          stories: [{ name: 'story', render: stories[0] }],
+        },
+      ]);
+
+      module.hot.reload();
+      expect(api.getStorybook()).toEqual([]);
+
+      api.storiesOf('kind', module).add('story', stories[1]);
+      expect(api.getStorybook()).toEqual([
+        {
+          kind: 'kind',
+          stories: [{ name: 'story', render: stories[1] }],
        },
      ]);
    });
--- a/lib/core/src/client/preview/story_store.js
+++ b/lib/core/src/client/preview/story_store.js
@ -85,7 +85,9 @@ export default class StoryStore extends EventEmitter {
  }

  removeStoryKind(kind) {
-    this._data[kind].stories = {};
+    if (this.hasStoryKind(kind)) {
+      this._data[kind].stories = {};
+    }
  }

  hasStoryKind(kind) {
--- a/lib/core/src/client/preview/story_store.test.js
+++ b/lib/core/src/client/preview/story_store.test.js
@ -0,0 +1,49 @@
+import StoryStore from './story_store';
+
+describe('preview.story_store', () => {
+  describe('dumpStoryBook', () => {
+    it('should return nothing when empty', () => {
+      const store = new StoryStore();
+      expect(store.dumpStoryBook()).toEqual([]);
+    });
+
+    it('should return storybook with stories', () => {
+      const store = new StoryStore();
+
+      store.addStory('kind-1', 'story-1.1', () => 0);
+      store.addStory('kind-1', 'story-1.2', () => 0);
+      store.addStory('kind-2', 'story-2.1', () => 0);
+      store.addStory('kind-2', 'story-2.2', () => 0);
+
+      expect(store.dumpStoryBook()).toEqual([
+        {
+          kind: 'kind-1',
+          stories: ['story-1.1', 'story-1.2'],
+        },
+        {
+          kind: 'kind-2',
+          stories: ['story-2.1', 'story-2.2'],
+        },
+      ]);
+    });
+  });
+
+  describe('getStoryFileName', () => {
+    it('should return the filename of the first story passed for the kind', () => {
+      const store = new StoryStore();
+      store.addStory('kind-1', 'story-1.1', () => 0, 'foo.js');
+      store.addStory('kind-1', 'story-1.2', () => 0, 'foo-2.js');
+      store.addStory('kind-2', 'story-2.1', () => 0, 'bar.js');
+
+      expect(store.getStoryFileName('kind-1')).toBe('foo.js');
+      expect(store.getStoryFileName('kind-2')).toBe('bar.js');
+    });
+  });
+
+  describe('removeStoryKind', () => {
+    it('should not error even if there is no kind', () => {
+      const store = new StoryStore();
+      store.removeStoryKind('kind');
+    });
+  });
+});
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@ -34,7 +34,7 @@
    "react-fuzzy": "^0.5.1",
    "react-icons": "^2.2.7",
    "react-inspector": "^2.2.2",
-    "react-modal": "^3.1.10",
+    "react-modal": "^3.1.11",
    "react-split-pane": "^0.1.74",
    "react-treebeard": "^2.1.0",
    "redux": "^3.7.2"
--- a/package.json
+++ b/package.json
@ -28,7 +28,7 @@
    "publish": "lerna publish",
    "postpublish": "yarn --cwd lib/cli test -o",
    "repo-dirty-check": "node ./scripts/repo-dirty-check",
-    "start": "npm --prefix examples/cra-kitchen-sink run storybook",
+    "start": "npm --prefix examples/official-storybook run storybook",
    "test": "node ./scripts/test.js",
    "test-latest-cra": "npm --prefix lib/cli run test-latest-cra",
    "chromatic": "npm --prefix examples/official-storybook run chromatic"
@ -56,25 +56,27 @@
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jest": "^21.6.1",
+    "eslint-plugin-jest": "^21.7.0",
    "eslint-plugin-json": "^1.2.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-prettier": "^2.4.0",
+    "eslint-plugin-prettier": "^2.5.0",
    "eslint-plugin-react": "^7.5.1",
    "gh-pages": "^1.1.0",
    "github-release-from-changelog": "^1.3.0",
    "glob": "^7.1.2",
    "husky": "^0.14.3",
    "inquirer": "^4.0.2",
-    "jest": "^22.0.6",
-    "jest-cli": "^22.0.6",
-    "jest-config": "^22.0.6",
-    "jest-diff": "^22.0.6",
-    "jest-environment-jsdom": "^22.0.6",
+    "jest": "^22.1.2",
+    "jest-cli": "^22.1.2",
+    "jest-config": "^22.1.2",
+    "jest-diff": "^22.1.0",
+    "jest-environment-jsdom": "^22.1.2",
    "jest-enzyme": "^4.0.2",
    "jest-image-snapshot": "^2.3.0",
-    "jest-jasmine2": "^22.0.6",
-    "lerna": "^2.6.0",
+    "jest-jasmine2": "^22.1.2",
+    "jest-preset-angular": "^5.0.0",
+    "jest-vue-preprocessor": "^1.3.1",
+    "lerna": "^2.7.1",
    "lint-staged": "^6.0.0",
    "lodash": "^4.17.4",
    "nodemon": "^1.14.11",
@ -92,6 +94,7 @@
    "remark-preset-lint-recommended": "^3.0.1",
    "shelljs": "^0.8.0",
    "symlink-dir": "^1.1.1",
+    "ts-jest": "^22.0.0",
    "tslint": "~5.9.1",
    "tslint-config-prettier": "^1.6.0",
    "tslint-plugin-prettier": "^1.3.0"
--- a/yarn.lock
+++ b/yarn.lock