diff --git a/.circleci/config.yml b/.circleci/config.yml
index e3f8c3537a9c..4c3ee6045a0e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -78,6 +78,9 @@ jobs:
       - run:
           name: Integration Test - Kichen sinks
           command: yarn test --integration
+      - store_artifacts:
+          path: integration/__image_snapshots__
+          destination: integration_image_snapshots
   example-react-native:
     <<: *defaults
     steps:
diff --git a/.github/stale.yml b/.github/stale.yml
new file mode 100644
index 000000000000..a5717c95fa5e
--- /dev/null
+++ b/.github/stale.yml
@@ -0,0 +1,26 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 85
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 5
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - bug
+  - 'help wanted'
+  - 'in progress'
+  - 'do not merge'
+  - 'needs review'
+
+# Label to use when marking an issue as stale
+staleLabel: inactive
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  Hi everyone! Seems like there hasn't been much going on in this issue lately.
+  If there are still questions, comments, or bugs, please feel free to continue
+  the discussion. We do try to do some housekeeping every once in a while so
+  inactive issues will get closed after 90 days. Thanks!
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: >
+  Hey there, it's me again! I am going to help our maintainers close this issue
+  so they can focus on development efforts instead. If the issue mentioned is
+  still a concern, please open a new ticket and mention this old one. Cheers
+  and thanks for using Storybook!
diff --git a/README.md b/README.md
index dc645de5f979..8e2301332c59 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,8 @@ cd my-react-app
 getstorybook
 ```
 
+The `-g` global install is used to run our cli tool in your project directory to generate templates for your existing projects. To avoid the global install and start your project manually, take a look at our [Slow Start Guide](https://storybook.js.org/basics/slow-start-guide/).
+
 Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
 
 **Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 3.x version the easiest way is:
diff --git a/addons/actions/CHANGELOG.md b/addons/actions/CHANGELOG.md
deleted file mode 100644
index 60992dfdfd4c..000000000000
--- a/addons/actions/CHANGELOG.md
+++ /dev/null
@@ -1,43 +0,0 @@
-## Changelog
-
-### v1.1.3
-
-22 Mar 2017
-
--   Fix issue caused by `v1.1.2` where storybook crashes when actions are used without names [PR30](https://github.com/storybooks/storybook-addon-actions/pull/30).
-
-### v1.1.2
-
-21 Mar 2017
-
--   Document `decorateAction` function (action decorator). [PR28](https://github.com/storybooks/storybook-addon-actions/pull/28)
-
--   Set correct Function.name for action handlers [PR24](https://github.com/storybooks/storybook-addon-actions/pull/24)
-
-### v1.1.1
-
-11 Sep 2016
-
--   Support arguments with circular references [PR6](https://github.com/kadirahq/storybook-addon-actions/pull/6)
-
-### v1.1.0
-
-11 Sep 2016
-
--   Support action decorators [PR3](https://github.com/kadirahq/storybook-addon-actions/pull/3)
-
-### v1.0.4
-
--   Refactor source code (use separate files)
-
-### v1.0.3
-
--   Log all arguments (only the first argument was logged previously)
-
-### v1.0.2
-
--   Style tweak: center counter and inspector elements
-
-### v1.0.1
-
--   First stable release with all features from the storybook action logger such as `action` function, react inspector and grouping log messages.
diff --git a/addons/centered/CHANGELOG.md b/addons/centered/CHANGELOG.md
deleted file mode 100644
index 8b031d36bf84..000000000000
--- a/addons/centered/CHANGELOG.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Change Log
-
-### v1.1.2
-
--   Add .npmignore file [#PR9](https://github.com/storybooks/react-storybook-decorator-centered/pull/9)
-
-### v1.1.1
-
--   Remove build directory from the repository [#PR8](https://github.com/storybooks/react-storybook-decorator-centered/pull/8)
--   Simplify styles [#PR6](https://github.com/storybooks/react-storybook-decorator-centered/pull/6)
--   Add using as addon instructions to Readme [#PR2](https://github.com/storybooks/react-storybook-decorator-centered/pull/8)
-
-### v1.0.0
-
--   Initial release as `@kadira/react-storybook-decorator-centered`.
diff --git a/addons/comments/CHANGELOG.md b/addons/comments/CHANGELOG.md
deleted file mode 100644
index 7b1cc8111d1f..000000000000
--- a/addons/comments/CHANGELOG.md
+++ /dev/null
@@ -1,111 +0,0 @@
-## Changelog
-
-### v1.9.1
-
-27-October-2016
-
--   Fix comment delete button [PR48](https://github.com/kadirahq/storybook-addon-comments/pull/48)
--   Remove app not found console error [PR49](https://github.com/kadirahq/storybook-addon-comments/pull/49)
-
-### v1.9.0
-
-20-October-2016
-
--   Show comments for public apps without logging in [PR46](https://github.com/kadirahq/storybook-addon-comments/pull/46)
-
-### v1.8.0
-
-17-October-2016
-
--   Add border-radius for comment form [PR44](https://github.com/kadirahq/storybook-addon-comments/pull/44)
-
-### v1.7.2
-
-18-October-2016
-
--   Add a loading icon for loading comments for the first time. [PR43](https://github.com/kadirahq/storybook-addon-comments/pull/43)
--   Fix some minor bugs.
-
-### v1.7.1
-
-18-October-2016
-
-Load comments just after we found the current user.
-This fixes the issue of not loading comments for the current story just after reloaded.
-
-### v1.7.0
-
-14-October-2016
-
-Improve console errors and signIn process when the user is loggedOut.
-
-### v1.7.0
-
-14-October-2016
-
--   Add a confirm box when deleting components. [#38](https://github.com/kadirahq/storybook-addon-comments/pull/38)
--   Add the user to the local cache when adding a comment. [#40](https://github.com/kadirahq/storybook-addon-comments/pull/40)
-
-### v1.6.1
-
-12-October-2016
-
-Move a few packages from dev-deps to deps.
-
-### v1.6.0
-
-12-October-2016
-
--   Implement a better workflow for local users [PR31](https://github.com/kadirahq/storybook-addon-comments/pull/31)
--   Set the protected field to true. [PR30](https://github.com/kadirahq/storybook-addon-comments/pull/30)
-
-### v1.5.1
-
-12-October-2016
-
-Fix a regression in the latest master. [PR33](https://github.com/kadirahq/storybook-addon-comments/pull/33)
-
-### v1.5.0
-
-12-October-2016
-
-Add comment delete feature [PR23](https://github.com/kadirahq/storybook-addon-comments/pull/23)
-
-### v1.4.0
-
-12-October-2016
-
-Add a cache invalidation system. [PR28](https://github.com/kadirahq/storybook-addon-comments/pull/28)
-
-### v1.3.0
-
-11-October-2016
-
-Add markdown support. [PR24](https://github.com/kadirahq/storybook-addon-comments/pull/24)
-
-### v1.2.0
-
-11-October-2016
-
-Add multiline comment support. [PR22](https://github.com/kadirahq/storybook-addon-comments/pull/22)
-
-### v1.1.1
-
-Fix user info bug and remove unused files
-
--   Remove unused local addon-db files [PR19](https://github.com/kadirahq/storybook-addon-comments/pull/19)
--   Update storybook dev dependency to auto export repo info [PR20](https://github.com/kadirahq/storybook-addon-comments/pull/20)
--   Fix getUserInfo error by correcting method name [PR21](https://github.com/kadirahq/storybook-addon-comments/pull/21)
-
-### v1.1.0
-
-Add some usability improvements.
-
--   Change login links to Storybook Hub. [PR12](https://github.com/kadirahq/storybook-addon-comments/pull/12)
--   Remove full date text. [PR13](https://github.com/kadirahq/storybook-addon-comments/pull/13)
--   Increase font size a bit. [PR14](https://github.com/kadirahq/storybook-addon-comments/pull/14)
--   Implement a local comments cache. [PR16](https://github.com/kadirahq/storybook-addon-comments/pull/16)
-
-### v1.0.0
-
--   First stable release
diff --git a/addons/events/CHANGELOG.md b/addons/events/CHANGELOG.md
deleted file mode 100644
index 1d997b5493bc..000000000000
--- a/addons/events/CHANGELOG.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# ChangeLog
-
-### v1.1.0
-
-14-04-2017
-
--   Added the ability to edit event payload
--   Added live example
--   Updated readme
-
-### v1.0.0
-
-13-04-2017
-
--   Initial version
diff --git a/addons/graphql/CHANGELOG.md b/addons/graphql/CHANGELOG.md
deleted file mode 100644
index cbfab56d7fb4..000000000000
--- a/addons/graphql/CHANGELOG.md
+++ /dev/null
@@ -1,5 +0,0 @@
-## Changelog
-
-### v1.0.0
-
--   First stable release
diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index 949134ce6237..bcb4040e1330 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "global": "^4.3.2",
-    "graphiql": "^0.11.6",
+    "graphiql": "^0.11.10",
     "graphql": "^0.11.7",
     "prop-types": "^15.6.0"
   },
diff --git a/addons/info/CHANGELOG.md b/addons/info/CHANGELOG.md
deleted file mode 100644
index 0b2b1a1031d5..000000000000
--- a/addons/info/CHANGELOG.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# Change Log
-
-### v3.3.0
-
--   Add setDefaults function [PR114](https://github.com/kadirahq/react-storybook-addon-info/pull/114)
-
-### v3.2.4
-
--   Add missing dist files [PR113](https://github.com/kadirahq/react-storybook-addon-info/pull/113)
-
-### v3.2.3
-
--   Handle number type nodes [PR110](https://github.com/kadirahq/react-storybook-addon-info/pull/110)
-
-### v3.2.2
-
--   Use markdown-to-react-components npm package instead of our fork. Our PR to them is merged and published. [PR109](https://github.com/kadirahq/react-storybook-addon-info/pull/109)
-
-### v3.2.1
-
--   Handle false values for types [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54)
-
-### v3.2.0
-
--   Support custom MTRC config [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54)
--   Fix propTables prop validation with a default value [PR55](https://github.com/kadirahq/react-storybook-addon-info/pull/55)
-
-### v3.1.4
-
--   Remove propTables prop validation warning [PR53](https://github.com/kadirahq/react-storybook-addon-info/pull/53)
--   Update example storybook [PR52](https://github.com/kadirahq/react-storybook-addon-info/pull/52)
-
-### v3.1.3
-
--   Fix wrong detection of propType when isRequired is set [PR49](https://github.com/kadirahq/react-storybook-addon-info/pull/49)
--   Add displayName for Button [PR51](https://github.com/kadirahq/react-storybook-addon-info/pull/51)
-
-### v3.1.2
-
--   Fixed a bug which made the `info` to not display and the `options` parameter to be ignored when `info` is not given.[PR45](https://github.com/kadirahq/react-storybook-addon-info/pull/45)
-
-### v3.1.1
-
--   Add a z-index for rendered items to make the overlay always display on top [PR38](https://github.com/kadirahq/react-storybook-addon-info/pull/38)
-
-### v3.1.0
-
--   Make the `info` argument optional [PR37](https://github.com/kadirahq/react-storybook-addon-info/pull/37)
-
-### v3.0.10
-
--   Render the component inside a div element when on inline mode [PR34](https://github.com/kadirahq/react-storybook-addon-info/pull/34)
-
-### v3.0.9
-
--   Add missing `@kadira/storybook` devDependencies [PR25](https://github.com/kadirahq/react-storybook-addon-info/pull/25)
--   Improve prop rendering in jsx source view [PR24](https://github.com/kadirahq/react-storybook-addon-info/pull/24)
--   Avoid warning message with "webkitFontSmoothing" [PR30](https://github.com/kadirahq/react-storybook-addon-info/pull/30)
--   Remove max-width style rule for wrapper [PR31](https://github.com/kadirahq/react-storybook-addon-info/pull/31) and [PR36](https://github.com/kadirahq/react-storybook-addon-info/pull/36)
--   Improve prop table rendering (handle css resets) [PR32](https://github.com/kadirahq/react-storybook-addon-info/pull/32)
-
-### v3.0.8
-
--   Fixed unkeyed array iteration warning in React with: [PR23](https://github.com/kadirahq/react-storybook-addon-info/pull/23)
-
-### v3.0.7
-
--   Improve default display in prop table. See [#16](https://github.com/kadirahq/react-storybook-addon-info/pull/16)
-
-### v3.0.6
-
--   Improve function type and react element type props display. See [#14](https://github.com/kadirahq/react-storybook-addon-info/pull/14)
-
-### v3.0.5
-
--   Over-indentation of ending tag in source code is fixed. See [#13](https://github.com/kadirahq/react-storybook-addon-info/pull/13)
-
-### v3.0.4
-
--   Remove the need to use json-loader with webpack when using this package.
-    See: [#12](https://github.com/kadirahq/react-storybook-addon-info/issues/12)
-
-### v3.0.0
-
--   Add the version which works as an Storybook addon.
diff --git a/addons/knobs/CHANGELOG.md b/addons/knobs/CHANGELOG.md
deleted file mode 100644
index 4a02cb017018..000000000000
--- a/addons/knobs/CHANGELOG.md
+++ /dev/null
@@ -1,105 +0,0 @@
-# Changelog
-
-### v1.7.1
-
-01-December-2016
-
-Update style changes in the panel. [PR79](https://github.com/storybooks/storybook-addon-knobs/pull/79)
-
-### v1.7.0
-
-25-November-2016
-
-Modify number() to support a range slider as an input type for a knob.[PR77](https://github.com/storybooks/storybook-addon-knobs/pull/77)
-
-### v1.6.0
-
-19-November-2016
-
-Add Color as a type. [PR75](https://github.com/storybooks/storybook-addon-knobs/pull/75)
-
-### v1.5.0
-
-8-November-2016
-
-Add Array as a type. [PR70](https://github.com/storybooks/storybook-addon-knobs/pull/70).
-
-### v1.4.1
-
-27-October-2016
-
-Fix some issues related to typescript declaration. [PR69](<Typescript declaration updates>)
-
-### v1.4.0
-
-27-October-2016
-
-Add TypeScript support [PR65](https://github.com/kadirahq/storybook-addon-knobs/pull/65).
-
-### v1.3.3
-
-13-October-2016
-
-Fix issue where hot reloaded updates were not rendered [PR62](https://github.com/kadirahq/storybook-addon-knobs/pull/62).
-
-### v1.3.2
-
-13-October-2016
-
-Make the render function of WrapStory pure [PR61](https://github.com/kadirahq/storybook-addon-knobs/pull/61).
-
-### v1.3.1
-
-13-October-2016
-
-Show or hide knob from panel depending on whether it was called in the story or not [PR59](https://github.com/kadirahq/storybook-addon-knobs/pull/59).
-
-### v1.3.0
-
-05-October-2016
-
-Accept null values for the date type. [PR56](https://github.com/kadirahq/storybook-addon-knobs/pull/56).
-
-### v1.2.3
-
-28-September-2016
-
-Remove setting selected prop in options in Select knobs [PR47](https://github.com/kadirahq/storybook-addon-knobs/pull/47)
-
-### v1.2.2
-
-25-September-2016
-
-Fix copy-paste error [PR37](https://github.com/kadirahq/storybook-addon-knobs/pull/37)
-Remove <div> wrapper from WrapStory [PR42](https://github.com/kadirahq/storybook-addon-knobs/pull/42)
-
-### v1.2.1
-
-20-September-2016
-
-Support to use date type without a default value. [PR32](https://github.com/kadirahq/storybook-addon-knobs/pull/32)
-
-### v1.2.0
-
-19-September-2016
-
-Add a knob to get date from the user. [PR26](https://github.com/kadirahq/storybook-addon-knobs/pull/26)
-
-### v1.1.0
-
-11-September-2016
-
-Implement the select knob. [PR21](https://github.com/kadirahq/storybook-addon-knobs/pull/21)
-
-### v1.0.1
-
-09-September-2016
-
-Allow user to write JSON in the Object knob freely.
-Earlier, it's hard to add new fields without creating a JSON error.
-
-### v1.0.0
-
-09-September-2016
-
-Initial Release.
diff --git a/addons/links/CHANGELOG.md b/addons/links/CHANGELOG.md
deleted file mode 100644
index 3d04b2ab3bf2..000000000000
--- a/addons/links/CHANGELOG.md
+++ /dev/null
@@ -1,10 +0,0 @@
-## Changelog
-
-### v1.0.1
-
--   Refactor source code
--   Update the README file
-
-### v1.0.0
-
--   First stable release with all features from the storybook linkTo function
diff --git a/addons/notes/CHANGELOG.md b/addons/notes/CHANGELOG.md
deleted file mode 100644
index d1d549f99b5a..000000000000
--- a/addons/notes/CHANGELOG.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# ChangeLog
-
-### v1.0.1
-
-30-August-2016
-
--   Update docs.
-
-### v1.0.0
-
-30-August-2016
-
--   Initial version
diff --git a/addons/notes/README.md b/addons/notes/README.md
index 4daca664ac25..e637e3faa0e7 100644
--- a/addons/notes/README.md
+++ b/addons/notes/README.md
@@ -43,3 +43,17 @@ import Component from './Component';
 storiesOf('Component', module)
   .add('with some emoji', withNotes('A very simple component')(() => <Component></Component>));
 ```
+
+### Deprecated API
+This API is slated for removal in 4.0
+
+```js
+import { WithNotes } from '@storybook/addon-notes';
+
+storiesOf('Addon Notes', module)
+  .add('using deprecated API', () => (
+    <WithNotes notes="Hello">
+      <BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />
+    </WithNotes>
+  ));
+```
diff --git a/addons/options/CHANGELOG.md b/addons/options/CHANGELOG.md
deleted file mode 100644
index 1ad8d52a97be..000000000000
--- a/addons/options/CHANGELOG.md
+++ /dev/null
@@ -1,19 +0,0 @@
-## Changelog
-
-### v1.0.2
-
-13 Mar 2017
-
--   Add typescript typings
-
-### v1.0.1
-
-26 Sep 2016
-
--   Update dev dependencies
-
-### v1.0.0
-
-23 Sep 2016
-
--   First stable release
diff --git a/addons/options/README.md b/addons/options/README.md
index c6dd84c662b5..9805fb2d1237 100644
--- a/addons/options/README.md
+++ b/addons/options/README.md
@@ -106,3 +106,4 @@ setOptions({
 
 storybook.configure(() => require('./stories'), module);
 ```
+It is also possible to call `setOptions()` inside individual stories. Note that this will bring impact story render performance significantly.
diff --git a/addons/storyshots/CHANGELOG.md b/addons/storyshots/CHANGELOG.md
deleted file mode 100644
index f21d152162e4..000000000000
--- a/addons/storyshots/CHANGELOG.md
+++ /dev/null
@@ -1,157 +0,0 @@
-# ChangeLog
-
-### v3.2.2
-
-16-February-2016
-
-Move set channel to happen before anything runs because addons might init expecting the channel to exist. [PR75](https://github.com/storybooks/storyshots/pull/75)
-
-### v3.2.1
-
-21-January-2016
-
-Provide mock Storybook Channel to Storybook addons. [PR72](https://github.com/storybooks/storyshots/pull/72)
-
-### v3.2.0
-
-30-December-2016
-
-Add support to filter stories by story name using a regexp. [PR70](https://github.com/storybooks/storyshots/pull/70)
-
-### v3.1.1
-
-27-December-2016
-
-Pass storybook context to render function of stories. [PR69](https://github.com/storybooks/storyshots/pull/69)
-
-### v3.1.0
-
-24-December-2016
-
-Add support for require.context. [PR67](https://github.com/storybooks/storyshots/pull/67)
-
-### v3.0.0
-
-22-December-2016
-
-This is a brand new version of StoryShots where it allows you to use StoryShots inside Jest. Earlier we have also bundled a CLI tool which uses some of the internal modules used by Jest.
-
-But it seems like we are building an our own Jest with that. That's why we decided to go with this approach.
-
-If you still like to use our CLI version, use this [version](https://github.com/storybooks/storyshots/tree/v2.1.0).
-(It's working but we no longer maintain it.)
-
-### v2.1.0
-
-8-November-2016
-
-Default loaders support markdown file [PR56](https://github.com/kadirahq/storyshots/pull/56)
-
-### v2.0.2
-
-7-November-2016
-
--   `NODE_ENV` is set to `"development"` by default [PR50](https://github.com/kadirahq/storyshots/pull/50)
--   `require.context` regexp test includes the begining `./` of filenames [PR55](https://github.com/kadirahq/storyshots/pull/55)
-
-### v2.0.1
-
-20-October-2016
-
-Prepare channel before reading storybook as some addons use it before running stories. [PR41](https://github.com/kadirahq/storyshots/pull/41)
-
-### v2.0.0
-
-11-October-2016
-
--   Update `jest-snapshot` to version 16.0.0. [PR39](https://github.com/kadirahq/storyshots/pull/39)
--   Use a directory and extension different from regular jest snapshots for storyshots. [PR40](https://github.com/kadirahq/storyshots/pull/40)
-
-#### Migrating from 1.x.x
-
-From version 2.0.0 by default storyshot files will be stored in a directory named `__storyshots__` (instead of `__snapshots__`) inside storybook config directory. Further storyshot files will use extension `.shot` instead of `.snap`.
-
-These changes are important because they allow storyshots to be used with jest in the same project. See [issue#34](https://github.com/kadirahq/storyshots/issues/34) for more info.
-
-This mean that once storyshots is updated to 2.0.0 it wont check your existing snapshots. It will create new snapshots in the new location and you can delete old ones.
-
-To update safely, follow these steps.
-
-1.  Run your 1.x.x version of storyshots and make sure all stories pass.
-2.  Update storyshots. `npm install @kadira/storyshots@^2.0.0 --save-dev`
-3.  Delete `__snapshots__` directory and contents from your storybook config directory. Also remove it from your version control system.
-4.  Run updated storyshots and add the newly added `__storyshots__` directory to your version control system.
-
-Done!
-
-### v1.1.5
-
-9-October-2016
-
-Fix issue where `require.context` did not work with regexps for full path. [PR37](https://github.com/kadirahq/storyshots/pull/37)
-
-### v1.1.4
-
-6-October-2016
-
-Add support for `require.context` inside storybook config module. The regression introduced in v1.1.2 is addressed. [PR33](https://github.com/kadirahq/storyshots/pull/30)
-
-### v1.1.3
-
-30-September-2016
-
-v1.1.2 introduce a [regression](https://github.com/kadirahq/storyshots/pull/30#issuecomment-250805615). So this revert that version.
-
-### v1.1.2
-
-30-September-2016
-
-Add support for `require.context` inside storybook config module. [PR30](https://github.com/kadirahq/storyshots/pull/30)
-
-### v1.1.1
-
-28-September-2016
-
--   Watch mode Summary shows the stats for the last run only. [PR27](https://github.com/kadirahq/storyshots/pull/27)
--   If some tests fail exit with status code 1. [PR28](https://github.com/kadirahq/storyshots/pull/28)
-
-### v1.1.0
-
-27-September-2016
-
-Add `--exclude` flag to avoid running stories matching a given regexp. [PR24](https://github.com/kadirahq/storyshots/pull/24) [PR25](https://github.com/kadirahq/storyshots/pull/25)
-
-### v1.0.5
-
-25-September-2016
-
--   Fix missing dependencies. [PR21](https://github.com/kadirahq/storyshots/pull/21)
--   Context should contain only the story name. [PR20](https://github.com/kadirahq/storyshots/pull/20)
-
-### v1.0.4
-
-Invalid Version. Same as v1.0.3
-
-### v1.0.3
-
-23-September-2016
-
-Fix a typo in the console Summary message.
-
-### v1.0.1
-
-22-September-2016
-
-Fix: Allow module loaders to return something. [PR14](https://github.com/kadirahq/storyshots/pull/14)
-
-### v1.0.1
-
-22-September-2016
-
-Fix a typo.
-
-### v1.0.0
-
-22-September-2016
-
-Initial Release.
diff --git a/app/react-native/CHANGELOG.md b/app/react-native/CHANGELOG.md
deleted file mode 100644
index d898d5e2a436..000000000000
--- a/app/react-native/CHANGELOG.md
+++ /dev/null
@@ -1,218 +0,0 @@
-# CHANGELOG
-
-## v2.3.0
-
--   Add support for multiple users [#PR132](https://github.com/storybooks/react-native-storybook/pull/132)
-
-## v2.2.4
-
--   Fix build issue with RN v0.42 [#PR128](https://github.com/storybooks/react-native-storybook/pull/128) and [#PR129](https://github.com/storybooks/react-native-storybook/pull/129)
-
-## v2.2.3
-
--   Support React Native v0.42 [PR #126](https://github.com/kadirahq/react-native-storybook/pull/126).
-
-## v2.2.2
-
--   Load .babelrc from project root directory [PR #125](https://github.com/kadirahq/react-native-storybook/pull/123).
-
-## v2.2.1
-
--   Support React Native v0.41 [PR #121](https://github.com/kadirahq/react-native-storybook/pull/121).
-
-## v2.2.0
-
--   Support React Native v0.39 [PR #114](https://github.com/kadirahq/react-native-storybook/pull/114).
--   Support custom express middleware [PR #115](https://github.com/kadirahq/react-native-storybook/pull/115).
-
-## v2.1.7
-
--   Support React Native v0.37 [PR #112](https://github.com/kadirahq/react-native-storybook/pull/112).
-
-## v2.1.6
-
--   Show help message on device if no story is selected [PR #111](https://github.com/kadirahq/react-native-storybook/pull/111).
-
-## v2.1.5
-
--   Support React Native v0.36 [PR #106](https://github.com/kadirahq/react-native-storybook/pull/106).
-
-## v2.1.4
-
--   Make sure that when a story is selected the previous story is completely unmounted and new story is mounted [PR #104](https://github.com/kadirahq/react-native-storybook/pull/104).
-
-## v2.1.3
-
--   Support React Native v0.34 [PR #102](https://github.com/kadirahq/react-native-storybook/pull/102).
-
-## v2.1.2
-
--   Fix bug where context object is missing [PR #83](https://github.com/kadirahq/react-native-storybook/pull/83).
-
-## v2.1.1
-
--   Support React Native v0.33 [PR #71](https://github.com/kadirahq/react-native-storybook/pull/71).
-
-## v2.1.0
-
--   Remove `/dist` directory from the repo
--   Support custom preview addons [PR #68](https://github.com/kadirahq/react-native-storybook/pull/68).
-
-## v2.0.2
-
--   Use 7007 as the default port (use in getstorybook tool) [PR #64](https://github.com/kadirahq/react-native-storybook/pull/64).
--   Support React Native v0.32 [PR #65](https://github.com/kadirahq/react-native-storybook/pull/65).
-
-## v2.0.1
-
--   Fix storyFn prop validation [PR #59](https://github.com/kadirahq/react-native-storybook/pull/59).
--   Support older versions of react-native module [PR #60](https://github.com/kadirahq/react-native-storybook/pull/60).
-
-## v2.0.0
-
-**Rewrite the backend to support new UI and addons**
-
--   Use webpack dev middleware to serve storybook UI instead of prebuilt manager.js
--   Advanced config API is removed (UI customizations can be done with addons easily)
--   Removed custom channels and preview modules (moved to separate addons)
-
-## v1.12.6
-
--   Support react native versions 0.27.0 to 0.31.x
-
-## v1.12.5
-
--   Support react native versions 0.27.0 to 0.30.x [PR #55](https://github.com/kadirahq/react-native-storybook/pull/55).
-
-## v1.12.3
-
--   Use channel modules [PR #52](https://github.com/kadirahq/react-native-storybook/pull/52).
-
-## v1.12.2
-
--   Make the `module` argument optional
--   Remove unnecessary console.log statement
-
-## v1.12.1
-
--   Disable react warnings (these should be handled in storybook-ui repo)
-
-## v1.12.0
-
--   Add qr-code preview option [PR #49](https://github.com/kadirahq/react-native-storybook/pull/49).
-
-## v1.11.3
-
--   Make `addDecorator` return `this` to make it chainable [PR #47](https://github.com/kadirahq/react-native-storybook/pull/47).
-
-## v1.11.2
-
--   Get rid of the 'unique key prop' warning
-
-## v1.11.1
-
--   Add missing imports for `storybook build` command
-
-## v1.11.0
-
--   Rewrite most of the code to avoid unnecessary event emitters
--   Improve code organization and haow it handles storybook config
--   Implement `linkTo` feature.
-
-## v1.10.1
-
--   Tweak appetize.io preview (remove frame and autoplay)
-
-## v1.10.0
-
--   Remove android build from the build command [PR #41](https://github.com/kadirahq/react-native-storybook/pull/41).
-
-## v1.9.0
-
--   Abstract the communication layer (as "channels") and add firebase support
--   Add in-browser preview with appetize
--   Add storybook favicon
-
-## v1.8.0
-
--   Introduce getStorybookUI method to get the UI component class.
-
-## v1.7.2
-
--   Update README related to HMR usage.
-
-## v1.7.1
-
--   Make the getting started process simple.
-
-## v1.7.0
-
--   Minify the manager build to around 350 KB with UglifyJs support.
-
-## v1.6.0
-
--   Add run-ios command [PR #27](https://github.com/kadirahq/react-native-storybook/pull/27).
-
-## v1.5.0
-
--   Pass the context variable [PR #26](https://github.com/kadirahq/react-native-storybook/pull/26).
-
-## v1.4.0
-
--   Implement action logger feature [PR #25](https://github.com/kadirahq/react-native-storybook/pull/25).
-
-## v1.3.0
-
--   Implement decorators feature [PR #24](https://github.com/kadirahq/react-native-storybook/pull/24).
-
-## v1.2.1
-
--   Fix bug where web UI crashes when starting with selection query params [PR #21](https://github.com/kadirahq/react-native-storybook/pull/21).
-
-## v1.2.0
-
--   Support addons [PR #20](https://github.com/kadirahq/react-native-storybook/pull/20).
-
-## v1.1.4
-
--   Add missing `module` argument to template [PR #18](https://github.com/kadirahq/react-native-storybook/pull/18).
-
-## v1.1.3
-
--   Remove socket.io and use plain Websockets [PR #17](https://github.com/kadirahq/react-native-storybook/pull/17). Removes JS debugging requirement.
-
-## v1.1.2
-
--   Partially fix hot module reloading [Issue #8](https://github.com/kadirahq/react-native-storybook/issues/8) with [PR #10](https://github.com/kadirahq/react-native-storybook/pull/10)
-
-## v1.1.1
-
--   Build source files and write README
-
-## v1.1.0
-
--   Replace `PreviewContainer` with `PreviewComponent` where the host and port are configurable
-
-## v1.0.4
-
--   Fix socket.io by using a patched socket.io temporarily [PR #2](https://github.com/kadirahq/react-native-storybook/pull/2)
-
-## v1.0.3
-
--   Fix `window.navigator.userAgent` related issue with socket.io [Issue #1](https://github.com/kadirahq/react-native-storybook/issues/1)
-
-## v1.0.2
-
--   Rename storybook command file from `cli.js` to `storybook.js`
-
-## v1.0.1
-
--   Add missing dependency `commander` to package.json file
-
-## v1.0.0
-
-This is the initial non-poc release of `react-native-storybook`. With this release, users can write stories and check them using an ios-simulator. The address of the storybook `localhost:9001` is hardcoded so for now it does not work on real devices or the android simulator. Also it is not contributor friendly. When used with `npm link`, the node_modules directory should be removed when using the ios simulator.
-
--   Support ability to write stories using `storiesOf` and `add` without using decorators or addons
--   The storybook can be started with `storybook start -h localhost -p 9001` although the port and host should be as given in this example
--   The story preview device can be started with the `react-native run-ios` command but the apps `index.*.js` must be edited (for now)
diff --git a/app/react-native/package.json b/app/react-native/package.json
index cdeb682288d2..efb1ee7019a8 100644
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@@ -74,7 +74,7 @@
     "babel-cli": "^6.26.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-native": "^0.43.3"
+    "react-native": "^0.49.3"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/app/react-native/readme.md b/app/react-native/readme.md
index f4811462bcc7..436e60d621ce 100644
--- a/app/react-native/readme.md
+++ b/app/react-native/readme.md
@@ -1,1495 +1,101 @@
-# 3.3.0-alpha.0
+# Storybook for React Native
 
-2017-September-06
+[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
+[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
+[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/badge.svg)](https://now-examples-slackin-nqnzoygycp.now.sh/)
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
 
-#### Features
+* * *
 
--   Viewport addon: simulate device sizes in preview window [#1753](https://github.com/storybooks/storybook/pull/1753)
--   CLI: Add codemod for deprecated addon-links and addon-actions from app [#1368](https://github.com/storybooks/storybook/pull/1368)
--   Info addon: More detailed props table [#1485](https://github.com/storybooks/storybook/pull/1485)
--   React native: Add accessibility labels to OnDeviceUI [#1780](https://github.com/storybooks/storybook/pull/1780)
--   Stories panel: Stories on each hierarchy level [#1763](https://github.com/storybooks/storybook/pull/1763)
--   Storyshots: Generate snapshot per story file [#1584](https://github.com/storybooks/storybook/pull/1584)
--   CLI: Add support for Vue projects using Nuxt [#1794](https://github.com/storybooks/storybook/pull/1794)
+With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-#### Bug Fixes
+![Storybook Screenshot](docs/assets/readme/screenshot.png)
 
--   Import chunks/assets in correct order using HtmlWebpackPlugin [#1775](https://github.com/storybooks/storybook/pull/1775)
--   Fix preview scrolling [#1782](https://github.com/storybooks/storybook/pull/1782)
--   Height aligned 2 buttons in manager's header [#1769](https://github.com/storybooks/storybook/pull/1769)
--   Search box: make found options selectable with click [#1697](https://github.com/storybooks/storybook/pull/1697)
--   Info addon: Fix Docgen in static builds [#1725](https://github.com/storybooks/storybook/pull/1725)
--   Knobs: allow arrays in object knob proptypes [#1701](https://github.com/storybooks/storybook/pull/1701)
+For more information visit: [storybook.js.org](https://storybook.js.org)
 
-#### Documentation
+## Getting Started
 
--   Improve linkTo documentation [#1793](https://github.com/storybooks/storybook/pull/1793)
--   Add carbon to examples page [#1764](https://github.com/storybooks/storybook/pull/1764)
--   Minor grammar fixes and clarification to Vue documentation [#1756](https://github.com/storybooks/storybook/pull/1756)
--   Fix incorrect yarn command in docs [#1758](https://github.com/storybooks/storybook/pull/1758)
--   Add storybook-chrome-screenshot to addon gallery [#1761](https://github.com/storybooks/storybook/pull/1761)
--   Fixing typo on VueJS withNotes Example [#1787](https://github.com/storybooks/storybook/pull/1787)
+The `getstorybook` tool can be used to add Storybook to your React Native app. Install the `getstorybook` tool if necessary and run it from your project directory with these commands:
 
-#### Maintenance
+```shell
+npm -g i @storybook/cli
+getstorybook
+```
 
--   Deprecate confusing option names [#1692](https://github.com/storybooks/storybook/pull/1692)
--   A CLI for running specific tests suites, like bootstrap CLI [#1752](https://github.com/storybooks/storybook/pull/1752)
--   Remove check for sender on channel. [#1407](https://github.com/storybooks/storybook/pull/1407)
--   Use yarn instead of NPM [#1703](https://github.com/storybooks/storybook/pull/1703)
--   Add config for dependencies.io [#1770](https://github.com/storybooks/storybook/pull/1770)
--   Added addon-knobs to crna and vanilla react native. [#1636](https://github.com/storybooks/storybook/pull/1636)
--   Fixed Jest warnings [#1744](https://github.com/storybooks/storybook/pull/1744)
--   Smoke test master [#1801](https://github.com/storybooks/storybook/pull/1801)
+After you have installed, there are additional steps for `create-react-native-app` apps. See the section for details, otherwise skip to [Start Storybook](#start-storybook)
+to see the next step.
 
-#### Dependency Upgrades
+## Create React Native App (CRNA)
 
--   Upgrade root dependencies and sync with packages [#1802](https://github.com/storybooks/storybook/pull/1802)
--   Update jest to the latest version 🚀 [#1799](https://github.com/storybooks/storybook/pull/1799)
--   Update eslint-plugin-jest to the latest version 🚀 [#1795](https://github.com/storybooks/storybook/pull/1795)
--   Update lerna to the latest version 🚀 [#1768](https://github.com/storybooks/storybook/pull/1768)
+If you run `getstorybook` inside a CRNA app, you'll be notified that there is an extra step required to use Storybook.
 
-# 3.2.11
+The easiest way to use Storybook inside CRNA is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
 
-2017-September-27
+```js
+export default from './storybook';
+```
 
-#### Features
+This will get you up and running quickly, but then you lose your app!
+There are multiple options here. for example, you can export conditionally:
 
--   Add two new RN packager configuration options [#1865](https://github.com/storybooks/storybook/pull/1865)
+```js
+import StorybookUI from './storybook';
 
-#### Bug Fixes
+import App from './app';
 
--   Addon-info - Fix immutable props issues with React 16 [#1894](https://github.com/storybooks/storybook/pull/1894)
--   Update react-inspector to fix #1831 [#1888](https://github.com/storybooks/storybook/pull/1888)
+module.exports = __DEV__ ? StorybookUI : App;
+```
 
-#### Documentation
+Alternatively, `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
 
--   Updated release process documentation [#1882](https://github.com/storybooks/storybook/pull/1882)
+## Start Storybook
 
-# 3.2.10
+After initial setup start the storybook server with the storybook npm script.
 
-2017-September-22
+```shell
+npm run storybook
+```
 
-#### Features
+Now, you can open <http://localhost:7007> to view your storybook menus in the browser.
 
--   Added codemod for deprecated addon-links and addon-actions from app [#1368](https://github.com/storybooks/storybook/pull/1368)
--   React native: Added option for custom packager port [#1837](https://github.com/storybooks/storybook/pull/1837)
--   CLI: add support for Vue projects using Nuxt [#1794](https://github.com/storybooks/storybook/pull/1794)
+## Start App
 
-#### Bug Fixes
+To see your Storybook stories on the device, you should start your mobile app for the `<platform>` of your choice (typically `ios` or `android`). (Note that due to an implementation detail, your stories will only show up in the left pane of your browser window after your device has connected to this storybook server.)
 
--   Avoid error "storyshots is intended only to be used with storybook" [#1441](https://github.com/storybooks/storybook/pull/1441)
--   Log correct url when using --https [#1871](https://github.com/storybooks/storybook/pull/1871)
--   Fix broken links in the deprecation warning for RN and Vue apps [#1827](https://github.com/storybooks/storybook/pull/1827)
--   Height aligned 2 buttons in manager's header [#1769](https://github.com/storybooks/storybook/pull/1769)
--   Add missing regenerator and runtime babel transform pkgs to package.json [#1848](https://github.com/storybooks/storybook/pull/1848)
+For CRNA apps:
 
-#### Documentation
+    npm run <platform>
 
--   Update README: mention that addon-links needs to be registered manually [#1835](https://github.com/storybooks/storybook/pull/1835)
--   Improve linkTo documentation [#1793](https://github.com/storybooks/storybook/pull/1793)
--   Minor grammar fixes and clarification to Vue documentation [#1756](https://github.com/storybooks/storybook/pull/1756)
--   Add missing NPM script section to Vue guide [#1824](https://github.com/storybooks/storybook/pull/1824)
--   Add storybook-chrome-screenshot to addon gallery [#1761](https://github.com/storybooks/storybook/pull/1761)
+For RN apps:
 
-#### Dependency Upgrades
+    react-native run-<platform>
 
--   Update babel-eslint to the latest version 🚀 [#1836](https://github.com/storybooks/storybook/pull/1836)
--   UPGRADE root dependencies and SYNC with packages [#1802](https://github.com/storybooks/storybook/pull/1802)
--   Update jest to the latest version 🚀 [#1799](https://github.com/storybooks/storybook/pull/1799)
--   Update eslint-plugin-jest to the latest version 🚀 [#1795](https://github.com/storybooks/storybook/pull/1795)
--   Update lerna to the latest version 🚀 [#1768](https://github.com/storybooks/storybook/pull/1768)
+Once your app is started, changing the selected story in web browser will update the story displayed within your mobile app.
 
-#### Maintenance
+If you are using Android and you get the following error after running the app: `'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'`, you have to forward the port 7007 on your device/emulator to port 7007 on your local machine with the following command:
+`adb reverse tcp:7007 tcp:7007`
 
--   Smoke test master [#1801](https://github.com/storybooks/storybook/pull/1801)
--   Fixed Jest warnings [#1744](https://github.com/storybooks/storybook/pull/1744)
+## Using Haul-cli
 
-# 3.2.9
+[Haul](https://github.com/callstack-io/haul) is an alternative to the react-native packager and has several advantages in that it allows you to define your own loaders, and handles symlinks better.
 
-2017-August-26
+If you want to use haul instead of the react-native packager, modify the storybook npm script to:
 
-#### Bug Fixes
+```sh
+storybook start -p 7007 --haul webpack.haul.storybook.js --platform android | ios | all
+```
 
--   Fix getstorybook CLI for React Native projects [#1741](https://github.com/storybooks/storybook/pull/1741)
+Where webpack.haul.storybook.js should look something like this:
 
-#### Documentation
+```js
+module.exports = ({ platform }) => ({
+  entry: `./storybook/index.${platform}.js`,
+  // any other haul config here.
+});
+```
 
--   Improve `addon-info` README options documentation [#1732](https://github.com/storybooks/storybook/pull/1732)
+## Learn More
 
-#### Maintenance
-
--   ADD a CLI for bootstrapping [#1216](https://github.com/storybooks/storybook/pull/1216)
-
-#### Dependency Upgrades
-
--   Update lerna to the latest version 🚀 [#1727](https://github.com/storybooks/storybook/pull/1727)
-
-# 3.2.8
-
-2017-August-23
-
-#### Bug Fixes
-
--   Fix storyshots with new babel config [#1721](https://github.com/storybooks/storybook/pull/1721)
--   Fix CLI generators export [#1722](https://github.com/storybooks/storybook/pull/1722)
-
-#### Documentation
-
--   Add caveat about knobs date defaultValue [#1719](https://github.com/storybooks/storybook/pull/1719)
-
-# 3.2.7
-
-2017-August-23
-
-#### Bug Fixes
-
--   Fix storyshots by moving cacheDirectory to webpack config [#1713](https://github.com/storybooks/storybook/pull/1713)
--   Revert "Improved error checking in global addDecorator" [#1716](https://github.com/storybooks/storybook/pull/1716)
--   Stricter linting rules for imports [#1676](https://github.com/storybooks/storybook/pull/1676)
--   Addon Info: Remove broken prop type sort (keep defined order) [#1711](https://github.com/storybooks/storybook/pull/1711)
-
-#### Maintenance
-
--   Enable eslint for vue-related stuff [#1715](https://github.com/storybooks/storybook/pull/1715)
--   CLI: ensure explicit dependency on `prop-types` for RN [#1714](https://github.com/storybooks/storybook/pull/1714)
-
-# 3.2.6
-
-2017-August-22
-
-#### Features
-
--   Improve search and highlighting [#1693](https://github.com/storybooks/storybook/pull/1693)
--   Add centered decorator for vue [#1595](https://github.com/storybooks/storybook/pull/1595)
--   Add react-docgen propTypes to info addon [#1562](https://github.com/storybooks/storybook/pull/1562)
-
-#### Bug Fixes
-
--   Fix stories panel resizing bug [#1689](https://github.com/storybooks/storybook/pull/1689)
--   Check for React presence when detecting `WEBPACK_REACT` type [#1646](https://github.com/storybooks/storybook/pull/1646)
--   Fix Create React App detection [#1645](https://github.com/storybooks/storybook/pull/1645)
--   Add dependencies on plugins used by getstorybook CLI [#1652](https://github.com/storybooks/storybook/pull/1652)
--   Fix preview window loading non js,css files [#1554](https://github.com/storybooks/storybook/pull/1554)
-
-#### Documentation
-
--   Improve the warning given when using channel before it's defined [#1515](https://github.com/storybooks/storybook/pull/1515)
--   Remove imports from README that are not necessary with latest API [#1700](https://github.com/storybooks/storybook/pull/1700)
--   Add reminders to PR template [#1683](https://github.com/storybooks/storybook/pull/1683)
--   Docgen Flow Type Example [#1684](https://github.com/storybooks/storybook/pull/1684)
-
-#### Maintenance
-
--   Make lint-staged work properly [#1675](https://github.com/storybooks/storybook/pull/1675)
--   Move baseFonts and RoutedLink to `@storybook/components` [#1659](https://github.com/storybooks/storybook/pull/1659)
-
-#### Dependency Upgrades
-
--   Switch to babel preset env + async/await/generator support [#1668](https://github.com/storybooks/storybook/pull/1668)
--   Upgrade react-native-compat to avoid PropTypes warnings [#1673](https://github.com/storybooks/storybook/pull/1673)
--   Change React.PropTypes to prop-types [#1674](https://github.com/storybooks/storybook/pull/1674) [#1710](https://github.com/storybooks/storybook/pull/1710)
-
-# 3.2.5
-
-2017-August-16
-
-#### Features
-
--   Add codemod for deprecated addon-info API [#1582](https://github.com/storybooks/storybook/pull/1582)
-
-#### Bug Fixes
-
--   Fixed addon-knobs for RN [#1635](https://github.com/storybooks/storybook/pull/1635)
--   Make links navigate in the parent window [#1650](https://github.com/storybooks/storybook/pull/1650)
--   Don’t render leftpanel stories tree if stories are empty [#1664](https://github.com/storybooks/storybook/pull/1664)
--   Remove double styling for inline stories [#1651](https://github.com/storybooks/storybook/pull/1651)
-
-#### Dependency Upgrades
-
--   Upgrade react-modal to v2.2.4 [#1666](https://github.com/storybooks/storybook/pull/1666)
-
-# 3.2.4
-
-2017-August-12
-
-#### Features
-
--   Hierarchy expansion on search [#1598](https://github.com/storybooks/storybook/pull/1598)
--   Add sidebarAnimations config prop [#1601](https://github.com/storybooks/storybook/pull/1601)
--   Add hrefs to left menu links [#1523](https://github.com/storybooks/storybook/pull/1523)
--   Enable many components of same type in addon-info prop tables [#1607](https://github.com/storybooks/storybook/pull/1607)
--   Always collapse an expanded kind in tree view without changing selected story [#1590](https://github.com/storybooks/storybook/pull/1590)
--   Option to select an addon panel [#1641](https://github.com/storybooks/storybook/pull/1641)
-
-#### Documentation
-
--   Document how to use info addon as decorator [#1592](https://github.com/storybooks/storybook/pull/1592)
--   Add Android simulator instructions for React Native [#1591](https://github.com/storybooks/storybook/pull/1591)
-
-#### Maintenance
-
--   Tree view visual adjustments [#1599](https://github.com/storybooks/storybook/pull/1599)
--   Add z-index to shortcuts popup overlay [#1617](https://github.com/storybooks/storybook/pull/1617)
--   Use ReactModal for search box [#1548](https://github.com/storybooks/storybook/pull/1548)
--   Limit react versions to >=15 [#1613](https://github.com/storybooks/storybook/pull/1613)
-
-# 3.2.3
-
-2017-August-01
-
-#### Features
-
--   Use the React Native packager's host by default [#1568](https://github.com/storybooks/storybook/pull/1568)
--   Make onDeviceUI default for RN getstorybook [#1571](https://github.com/storybooks/storybook/pull/1571)
-
-#### Documentation
-
--   Add short description to addon-options readme [#1566](https://github.com/storybooks/storybook/pull/1566)
-
-# 3.2.2
-
-2017-July-31
-
-#### Bug Fixes
-
--   Fixed build-storybook for vue [#1564](https://github.com/storybooks/storybook/pull/1564)
-
-# 3.2.1
-
-2017-July-31
-
-#### Bug Fixes
-
--   Check if hierarchySeparator presents in the options object [#1561](https://github.com/storybooks/storybook/pull/1561)
--   React Native &lt;0.43 support [#1555](https://github.com/storybooks/storybook/pull/1555)
-
-#### Documentation
-
--   Fix typo with Vue README referring to react [#1556](https://github.com/storybooks/storybook/pull/1556)
--   Add state-setting FAQ [#1559](https://github.com/storybooks/storybook/pull/1559)
-
-# 3.2.0
-
-2017-July-31
-
-Storybook 3.2 is filled with new features to help make your components shine! Headline features:
-
--   Vue support [#1267](https://github.com/storybooks/storybook/pull/1267)
--   Story Hierarchy [#1329](https://github.com/storybooks/storybook/pull/1329)
--   React Native On Device UI [#1413](https://github.com/storybooks/storybook/pull/1413)
-
-Plus many more features, documentation improvements, and bugfixes below!
-
-#### Features
-
--   Vue support [#1267](https://github.com/storybooks/storybook/pull/1267)
--   Add support for vue in addon-notes [#1278](https://github.com/storybooks/storybook/pull/1278)
--   CLI support for Vue [#1287](https://github.com/storybooks/storybook/pull/1287)
--   Story Hierarchy [#1329](https://github.com/storybooks/storybook/pull/1329)
--   Story Hierarchy UI improvements [#1387](https://github.com/storybooks/storybook/pull/1387) [#1356](https://github.com/storybooks/storybook/pull/1356)
--   Story Hierarchy - keyboard accessibility [#1427](https://github.com/storybooks/storybook/pull/1427)
--   React Native - On Device UI [#1413](https://github.com/storybooks/storybook/pull/1413)
--   Show first story on RN OnDeviceUI startup [#1510](https://github.com/storybooks/storybook/pull/1510)
--   Added collapsible RN OnDeviceUI navigation [#1544](https://github.com/storybooks/storybook/pull/1544)
--   Add warning when module is missing in storiesOf [#1525](https://github.com/storybooks/storybook/pull/1525)
--   Provide styling hook for Addon Info story body [#1308](https://github.com/storybooks/storybook/pull/1308)
--   Implement filtering on story-level [#1432](https://github.com/storybooks/storybook/pull/1432)
--   Refactoring of `addon-info` [#1452](https://github.com/storybooks/storybook/pull/1452)
--   ADD storybook logo for inside terminal for future CLI or easteregg [#1499](https://github.com/storybooks/storybook/pull/1499)
--   Improved error checking in global addDecorator [#1481](https://github.com/storybooks/storybook/pull/1481)
-
-#### Bug Fixes
-
--   Fix react native example and bootstrapping [#1514](https://github.com/storybooks/storybook/pull/1514)
--   Fix a 'funny' hmr issue in cra-kitchen-sink [#1508](https://github.com/storybooks/storybook/pull/1508)
--   When timestamps are enabled, it actually checks them before applying changes [#1405](https://github.com/storybooks/storybook/pull/1405)
--   Fix issue when extending webpack config [#1468](https://github.com/storybooks/storybook/pull/1468)
--   Fix addon notes [#1448](https://github.com/storybooks/storybook/pull/1448)
--   Story Hierarchy - initial state bug fix [#1401](https://github.com/storybooks/storybook/pull/1401)
--   Remove blue outline when node is focused [#1497](https://github.com/storybooks/storybook/pull/1497)
-
-#### Documentation
-
--   Add hierarchySeparator to README [#1445](https://github.com/storybooks/storybook/pull/1445)
--   Document null addons channel in FAQ [#1507](https://github.com/storybooks/storybook/pull/1507)
-
-#### Maintenance
-
--   Revert knobs API to previous API. [#1527](https://github.com/storybooks/storybook/pull/1527)
--   FIX hoist-internals: remove existing folder/link before linking [#1516](https://github.com/storybooks/storybook/pull/1516)
--   Update global hook for Vue Devtools [#1376](https://github.com/storybooks/storybook/pull/1376)
--   SWITCH to circleci over travisCI && CHANGE lerna bootstrap procedure: [#1486](https://github.com/storybooks/storybook/pull/1486)
--   Update cra-kitchen-sink package versions for 3.2-alpha [#1434](https://github.com/storybooks/storybook/pull/1434)
--   Updating 3.2 alpha release with patches [#1419](https://github.com/storybooks/storybook/pull/1419)
--   Remove typescript typings for @storybook/addon-notes [#1344](https://github.com/storybooks/storybook/pull/1344)
--   Remove typescript typings for @storybook/addon-options [#1343](https://github.com/storybooks/storybook/pull/1343)
--   Remove typescript typings for @storybook/addon-knobs [#1339](https://github.com/storybooks/storybook/pull/1339)
--   Remove typescript typings for @storybook/addon-links [#1342](https://github.com/storybooks/storybook/pull/1342)
-
-#### Dependency Upgrades
-
--   Updated babel-plugin-react-docgen version [#1526](https://github.com/storybooks/storybook/pull/1526)
--   UPDATE everything (including eslint 4) [#1517](https://github.com/storybooks/storybook/pull/1517)
--   Update remark-preset-lint-recommended to the latest version 🚀 [#1512](https://github.com/storybooks/storybook/pull/1512)
--   Update remark-cli to the latest version 🚀 [#1498](https://github.com/storybooks/storybook/pull/1498)
--   Remove upper bound on react-native peerDependency [#1424](https://github.com/storybooks/storybook/pull/1424)
--   Bump `react-split-pane` version [#1495](https://github.com/storybooks/storybook/pull/1495)
-
-# 3.1.9
-
-2017-July-16
-
-#### Features
-
--   React fiber support [#1443](https://github.com/storybooks/storybook/pull/1443)
-
-#### Documentation
-
--   Refine docs about loading stories dynamically for react-native [#1420](https://github.com/storybooks/storybook/pull/1420)
-
-#### Bug Fixes
-
--   Verify that name is a string in addons/actions [#1415](https://github.com/storybooks/storybook/pull/1415)
--   Knobs: fix label alignment [#1471](https://github.com/storybooks/storybook/pull/1471)
--   Fix display of large components [#1237](https://github.com/storybooks/storybook/pull/1237)
-
-#### Dependency Upgrades
-
--   Dependency updates [#1439](https://github.com/storybooks/storybook/pull/1439)
--   chore(package): update husky to version 0.14.3 [#1437](https://github.com/storybooks/storybook/pull/1437)
--   Update danger to the latest version 🚀 [#1393](https://github.com/storybooks/storybook/pull/1393)
--   Update lerna to the latest version 🚀 [#1423](https://github.com/storybooks/storybook/pull/1423)
--   Pin gatsby version and upgrade gh-pages [#1462](https://github.com/storybooks/storybook/pull/1462)
-
-# 3.1.8
-
-2017-July-06
-
-#### Documentation
-
--   Updated addon knob readme. [#1406](https://github.com/storybooks/storybook/pull/1406)
--   Add a FAQ entry for shared config with next [#1390](https://github.com/storybooks/storybook/pull/1390)
--   Documented webpack customization example for typescript [#1386](https://github.com/storybooks/storybook/pull/1386)
-
-#### Maintenance
-
--   Removed empty array, since webpack 2 doesn't support them anymore. [#1381](https://github.com/storybooks/storybook/pull/1381)
-
-#### Dependency Upgrades
-
--   Support webpack 3.0.0 [#1410](https://github.com/storybooks/storybook/pull/1410)
--   Update react inspector to fix #1385 [#1408](https://github.com/storybooks/storybook/pull/1408)
-
-# 3.1.7
-
-2017-June-28
-
-#### Bug Fixes
-
--   Exit storybook build non-zero on stats errors (e.g. errors in the transpilation pipeline) [#1372](https://github.com/storybooks/storybook/pull/1372)
--   Fixed regression: CSS entries were not picked up for storybook pages (e.g. when using exract-text-webpack-plugin) [#1363](https://github.com/storybooks/storybook/pull/1363)
-
-#### Documentation
-
--   Document Storybook release process [#1348](https://github.com/storybooks/storybook/pull/1348)
-
-# 3.1.6
-
-2017-June-26
-
-#### Bug Fixes
-
--   Remove the `cacheDirectory` option from babel config [#1350](https://github.com/storybooks/storybook/pull/1350)
--   websockets (ws) removed `socket.upgradeReq`, so use `req` instead [#1337](https://github.com/storybooks/storybook/pull/1337)
--   Ensure we add the correct version of `react-dom` [#1349](https://github.com/storybooks/storybook/pull/1349)
--   Addon Info: Fix invalid prop `node.type` supplied to 'Props' [#1351](https://github.com/storybooks/storybook/pull/1351)
--   Addon Info: Omit empty inline info header [#1306](https://github.com/storybooks/storybook/pull/1306)
--   Addon Actions: Use uuid for action IDs instead of Math.random (fixes #1109) [#1347](https://github.com/storybooks/storybook/pull/1347)
-
-#### Documentation
-
--   Fix welcome instructions to reflect current `getstorybook` [#1358](https://github.com/storybooks/storybook/pull/1358)
--   Addon Info: Update README with configuration instructions [#1326](https://github.com/storybooks/storybook/pull/1326)
-
-#### Dependency Upgrades
-
--   Update lint-staged to the latest version 🚀 [#1315](https://github.com/storybooks/storybook/pull/1315)
-
-# 3.1.5
-
-2017-June-22
-
-#### Features
-
--   Added flow support to getstorybook upgrade [#1289](https://github.com/storybooks/storybook/pull/1289)
--   Added support for the `haul` react-native packager [#1294](https://github.com/storybooks/storybook/pull/1294)
-
-#### Bug Fixes
-
--   Fixed addon knobs proptypes deserialization [#1290](https://github.com/storybooks/storybook/pull/1290)
-
-#### Documentation
-
--   Added search to docs [#1256](https://github.com/storybooks/storybook/pull/1256)
--   snapshot testing inverse regex example documentation [#1317](https://github.com/storybooks/storybook/pull/1317)
-
-#### Maintenance
-
--   Refactored storybook component library [#1266](https://github.com/storybooks/storybook/pull/1266)
--   Created CRA kitchen sink addons example [#1288](https://github.com/storybooks/storybook/pull/1288)
--   Use a pack -> install technique to recreate local packages [#1332](https://github.com/storybooks/storybook/pull/1332)
--   Import demo components from @storybook/react [#1303](https://github.com/storybooks/storybook/pull/1303)
-
-# 3.1.4
-
-2017-June-15
-
-#### Features
-
--   IMPROVE design of addon-events [#1249](https://github.com/storybooks/storybook/pull/1249)
--   Add a `shallowSnapshot` option for storyshots `test` functions [#1232](https://github.com/storybooks/storybook/pull/1232)
-
-#### Bug Fixes
-
--   Fix app entry bug in RN gestorybook [#1280](https://github.com/storybooks/storybook/pull/1280)
--   fix(addons/info): Cannot read property 'props' of undefined [#1258](https://github.com/storybooks/storybook/pull/1258)
-
-#### Documentation
-
--   Add versions plugin to docs [#1269](https://github.com/storybooks/storybook/pull/1269)
-
-# 3.1.3
-
-2017-June-10
-
-#### Bug Fixes
-
--   Fix `storybook-build` manager-head.html bug [#1248](https://github.com/storybooks/storybook/pull/1248)
-
-# 3.1.2
-
-Minor features including a new "events" addon, as well as the usual bugfixes, cleanup, etc.
-
-2017-June-09
-
-#### Features
-
--   Add small design update to addon info package [#1213](https://github.com/storybooks/storybook/pull/1213)
--   Add display configuration options to info addon [#1157](https://github.com/storybooks/storybook/pull/1157)
--   Add support for multiple webpack chunks in iframe [#1083](https://github.com/storybooks/storybook/pull/1083)
--   Add events addon [#1130](https://github.com/storybooks/storybook/pull/1130)
--   Allow including files just before manager.bundle.js [#1134](https://github.com/storybooks/storybook/pull/1134)
-
-#### Bug Fixes
-
--   Fixed knobs addon editing bug [#1233](https://github.com/storybooks/storybook/pull/1233)
--   Fix bug in addons/graphql in reIndentQuery [#1207](https://github.com/storybooks/storybook/pull/1207)
--   Marksy initialized with mtrcConf intead of marksyConf [#1205](https://github.com/storybooks/storybook/pull/1205)
-
-#### Documentation
-
--   Document stories not showing up on storybook UI until device connects [#1221](https://github.com/storybooks/storybook/pull/1221)
--   Fixed references to storybook.js.org. [#1211](https://github.com/storybooks/storybook/pull/1211)
--   Updated repository URL to address broken npm images [#1197](https://github.com/storybooks/storybook/pull/1197)
-
-#### Maintenance
-
--   Added a vanilla React Native example app. [#1202](https://github.com/storybooks/storybook/pull/1202)
--   Move typings for @storybook/react to @types package [#1199](https://github.com/storybooks/storybook/pull/1199)
--   Set ESlint rules more strict 🚑 [#911](https://github.com/storybooks/storybook/pull/911)
-
-#### Dependency Upgrades
-
--   Update babel docgen plugin to generate docs for React.createClass and createReactClass [#1206](https://github.com/storybooks/storybook/pull/1206)
--   Update `marksy` dependecy due broken 1.1.0 version [#1204](https://github.com/storybooks/storybook/pull/1204)
-
-# 3.0.1
-
-Minor bug fixes and documentation updates post 3.0.0 release.
-
-2017-June-06
-
-#### Bug Fixes
-
--   Added error message for `addon-options` [#1194](https://github.com/storybooks/storybook/pull/1194)
--   Fix(react-native) add missing `ws` dependency [#1174](https://github.com/storybooks/storybook/pull/1174)
--   Fix terminal colors by reset console colors explicitly [#1184](https://github.com/storybooks/storybook/pull/1184)
--   Fix addon panel layout styling [#1170](https://github.com/storybooks/storybook/pull/1170)
--   ADD https import & remove tracking code remains [#1176](https://github.com/storybooks/storybook/pull/1176)
--   Fix incorrect babel config file reading [#1156](https://github.com/storybooks/storybook/pull/1156)
--   Fixed withKnobs definition. [#1164](https://github.com/storybooks/storybook/pull/1164)
-
-#### Documentation
-
--   Fixed typo in react-native browser instructions [#1189](https://github.com/storybooks/storybook/pull/1189)
--   Add instruction for npm install with -D for development dependency [#1168](https://github.com/storybooks/storybook/pull/1168)
--   Fix broken link for [addons] in README [#1167](https://github.com/storybooks/storybook/pull/1167)
--   Refreshed logo in docs [#1149](https://github.com/storybooks/storybook/pull/1149)
--   fix addon broken links in documentation [#1165](https://github.com/storybooks/storybook/pull/1165)
--   start-storybook cli - expand commands descriptions [#1161](https://github.com/storybooks/storybook/pull/1161)
--   Fix typo in codemod readme [#1158](https://github.com/storybooks/storybook/pull/1158)
-
-#### Dependency Upgrades
-
--   Replaced deprecated `markdown-to-react-components` with `marksy` [#1188](https://github.com/storybooks/storybook/pull/1188)
-
-# 3.0.0
-
-Storybook 3.0 is our first fully community-driven release! Notable changes:
-
--   Moved from `@kadira` to `@storybooks` org across [github](https://github.com/storybooks/storybook/), [npm](https://www.npmjs.com/package/@storybook/react), [docs](https://storybook.js.org/)
--   Upgraded to Webpack2! [#637](https://github.com/storybooks/storybook/pull/637)
--   Switched to monorepo and overhauled package structure. [#749](https://github.com/storybooks/storybook/pull/749) [#1031](https://github.com/storybooks/storybook/pull/1031)
--   Added configuration options to storybooks snapshot testing. [#1090](https://github.com/storybooks/storybook/pull/1090)
--   Added `create-react-native-app` support. [#1117](https://github.com/storybooks/storybook/pull/1117)
--   Added HTTPS support. [#735](https://github.com/storybooks/storybook/pull/735)
-
-2017-May-31
-
-#### Features
-
--   Added help text to the react-native preview panel [#1142](https://github.com/storybooks/storybook/pull/1142)
--   Added create-react-native-app support [#1117](https://github.com/storybooks/storybook/pull/1117)
--   Fixed knobs-addon performance issues [#1039](https://github.com/storybooks/storybook/pull/1039)
--   Added `snapshotWithOptions` to configure storyshots rendering options [#1090](https://github.com/storybooks/storybook/pull/1090)
--   Added custom `test` function for storyshots [#1035](https://github.com/storybooks/storybook/pull/1035)
--   Added typescript definition to addon notes [#989](https://github.com/storybooks/storybook/pull/989)
--   Added HTTPS option for dev server [#735](https://github.com/storybooks/storybook/pull/735)
-
-#### Bug Fixes
-
--   Use strict equality in action logger [#1144](https://github.com/storybooks/storybook/pull/1144)
--   FIX addon info and addon storyshots incompatibility [#1129](https://github.com/storybooks/storybook/pull/1129)
--   FIX postcss options missing in default webpack config && UPDATE dependencies [#1087](https://github.com/storybooks/storybook/pull/1087)
--   Fix CLI had a package version from storybook hardcoded - now queries npm registry [#1079](https://github.com/storybooks/storybook/pull/1079)
--   Fix semi broken \_\_docgenInfo integration in addon info [#1030](https://github.com/storybooks/storybook/pull/1030)
--   Fix: build-storybook no longer supports relative paths [#1058](https://github.com/storybooks/storybook/pull/1058)
--   Fix for types `number` for addon knobs [#1001](https://github.com/storybooks/storybook/pull/1001)
--   Fix webpack overriding && Add an example with local file dependencies [#965](https://github.com/storybooks/storybook/pull/965)
-
-#### Documentation
-
--   Add storybook-addon-intl to addon gallery [#1143](https://github.com/storybooks/storybook/pull/1143)
--   3.0.0 release notes && release notes automation [#1047](https://github.com/storybooks/storybook/pull/1047)
--   3.0.0 migration assistance : codemod, update installation and usage instructions [#1093](https://github.com/storybooks/storybook/pull/1093)
--   Add ReactSVGPanZoom to examples list [#1139](https://github.com/storybooks/storybook/pull/1139)
--   Show webpack 2 config example in docs: rules not loaders [#1137](https://github.com/storybooks/storybook/pull/1137)
--   Merge docs repo into this repo: add /docs [#1131](https://github.com/storybooks/storybook/pull/1131)
--   Change brand name from “React Storybook” to “Storybook” [#1044](https://github.com/storybooks/storybook/pull/1044)
--   Updated issue triage guidelines [#1024](https://github.com/storybooks/storybook/pull/1024)
-
-#### Maintenance
-
--   Add typings for links add-on [#1154](https://github.com/storybooks/storybook/pull/1154)
--   Add react-dom to the devDependency list for React Native projects [#1102](https://github.com/storybooks/storybook/pull/1102)
--   Upgrade React Native to webpack 2 config [#1097](https://github.com/storybooks/storybook/pull/1097)
--   Add unit tests for addon storyshots [#971](https://github.com/storybooks/storybook/pull/971)
--   Deprecate builtin addons (links and actions) - no longer included by default [#1038](https://github.com/storybooks/storybook/pull/1038)
--   change NPM organisation from kadira to storybook in code [#996](https://github.com/storybooks/storybook/pull/996)
--   CHANGE folder structure && CHANGE package-names [#1031](https://github.com/storybooks/storybook/pull/1031)
--   Add deprecation warnings when addons are required via main package [#1025](https://github.com/storybooks/storybook/pull/1025)
--   Remove text transform uppercase for knob labels [#991](https://github.com/storybooks/storybook/pull/991)
-
-#### Dependency Upgrades
-
-<details>
-<summary>
-11 PRs
-</summary>
-
--   Update lerna to the latest version 🚀 [#1101](https://github.com/storybooks/storybook/pull/1101)
--   CHANGE to prop-types package for notes & test-cra [#1082](https://github.com/storybooks/storybook/pull/1082)
--   update dependencies in cra-storybook [#1080](https://github.com/storybooks/storybook/pull/1080)
--   Switch back to non-fork of react-inspector [#1026](https://github.com/storybooks/storybook/pull/1026)
--   Dependency updates: webpack, babel, react [#1008](https://github.com/storybooks/storybook/pull/1008)
--   Update jest to the latest version 🚀 [#998](https://github.com/storybooks/storybook/pull/998)
--   Update lerna to the latest version 🚀 [#969](https://github.com/storybooks/storybook/pull/969)
--   CHANGE to use react-split-view 0.1.63 over the fork [#956](https://github.com/storybooks/storybook/pull/956)
--   Update lerna to the latest version 🚀 [#915](https://github.com/storybooks/storybook/pull/915)
--   Use jest for unittesting - standardize unit testing epic [#904](https://github.com/storybooks/storybook/pull/904)
--   Update dependencies to enable Greenkeeper 🌴 [#768](https://github.com/storybooks/storybook/pull/768)
-
-</details>
-
-#### Other
-
-<details>
-<summary>
-33 PRs
-</summary>
-
--   Added an upgrade mode to getstorybook [#1146](https://github.com/storybooks/storybook/pull/1146)
--   Update link to Storyshots addon [#1074](https://github.com/storybooks/storybook/pull/1074)
--   Added error message for missing or invalid storyName [#747](https://github.com/storybooks/storybook/pull/747)
--   Opened an Open Collective Account <https://opencollective.com/storybook> [#1065](https://github.com/storybooks/storybook/pull/1065)
--   Add propTablesExclude option [#924](https://github.com/storybooks/storybook/pull/924)
--   addon-info: make the info overlay be fixed  [#914](https://github.com/storybooks/storybook/pull/914)
--   Handle null elements in getData [#926](https://github.com/storybooks/storybook/pull/926)
--   add description field from \_\_docgenInfo for prop table for info plugin [#929](https://github.com/storybooks/storybook/pull/929)
--   \#959 add a max-height and center element with alignItems: center [#961](https://github.com/storybooks/storybook/pull/961)
--   Switch to the only prepublish script [#903](https://github.com/storybooks/storybook/pull/903)
--   PR review policy [#923](https://github.com/storybooks/storybook/pull/923)
--   Add typescript definitions for getStorybook() [#753](https://github.com/storybooks/storybook/pull/753)
--   Restore deep link for addon docs [#919](https://github.com/storybooks/storybook/pull/919)
--   Fix default storybook webpack config [#922](https://github.com/storybooks/storybook/pull/922)
--   Render the first story for a kind if no story selected. [#918](https://github.com/storybooks/storybook/pull/918)
--   Update docs for monorepo [#913](https://github.com/storybooks/storybook/pull/913)
--   Monorepo readme and contributing [#907](https://github.com/storybooks/storybook/pull/907)
--   Add story kind regex [#906](https://github.com/storybooks/storybook/pull/906)
--   Add examples [#897](https://github.com/storybooks/storybook/pull/897)
--   Add missing repos [#882](https://github.com/storybooks/storybook/pull/882)
--   Switch to monorepo [#749](https://github.com/storybooks/storybook/pull/749)
--   extend devMiddlewareOptions with config.devServer [#723](https://github.com/storybooks/storybook/pull/723)
--   Added meta IE=edge [#715](https://github.com/storybooks/storybook/pull/715)
--   Replace String.includes with String.indexOf: cross-browsing support [#712](https://github.com/storybooks/storybook/pull/712)
--   Issue Triage instructions [#748](https://github.com/storybooks/storybook/pull/748)
--   Simple pull request template [#741](https://github.com/storybooks/storybook/pull/741)
--   Make return type of StoryDecorator nullable [#680](https://github.com/storybooks/storybook/pull/680)
--   Warn if story with a given name already exists [#670](https://github.com/storybooks/storybook/pull/670)
--   Fix spelling mistake - "element form the story" to  "element from the story" [#702](https://github.com/storybooks/storybook/pull/702)
--   Remove broken react-button example [#699](https://github.com/storybooks/storybook/pull/699)
--   Fixed spelling error. [#720](https://github.com/storybooks/storybook/pull/720)
--   Cleaner error handling for storiesOf [#672](https://github.com/storybooks/storybook/pull/672)
--   Update links to point to new organization [#721](https://github.com/storybooks/storybook/pull/721)
-
-</details>
-
-# v2.35.3
-
-Allow customConfig to override devtool. [PR668](https://github.com/storybooks/react-storybook/pull/668)
-
-# v2.35.2
-
-03-January-2017
-
-Fixes issue [#601](https://github.com/storybooks/react-storybook/issues/601) where it throws error when introduce a propType with a hypen. Add a [fix](https://github.com/kadirahq/babel-plugin-react-docgen/pull/23) to [`babel-plugin-react-docgen`](https://github.com/kadirahq/babel-plugin-react-docgen) to fix this issue.
-
-This release comes with the updated `babel-plugin-react-docgen`.
-
-# v2.35.1
-
--   Revert [PR653](https://github.com/storybooks/react-storybook/pull/653) where it's causing HMR to not working properly.
-
-# v2.35.0
-
-18-December-2016
-
--   Using file-loader to load all the extensions [PR653](https://github.com/storybooks/react-storybook/pull/653)
--   Update css-loader dependency [PR648](https://github.com/storybooks/react-storybook/pull/648)
--   Check if stories are loaded from Jest [PR644](https://github.com/storybooks/react-storybook/pull/644)
-
-# v2.34.0
-
-05-December-2016
-
-Open the express router for developers (middleware.js file). [PR435](https://github.com/storybooks/react-storybook/pull/435)
-
-# v2.33.1
-
-01-December-2016
-
-Update Typescript definition file for global addDecorator. [PR634](https://github.com/storybooks/react-storybook/pull/634)
-
-# v2.33.0
-
-28-November-2016
-
-Completely avoid re-rendering the preview iframe. [PR631](https://github.com/storybooks/react-storybook/pull/631)
-
-# v2.32.2
-
-28-November-2016
-
-Update postmsg channel module version [PR627](https://github.com/storybooks/react-storybook/pull/627)
-
-# v2.32.1
-
-22-November-2016
-
-Add support for react_perf comes with React 15.4.0. [PR623](https://github.com/storybooks/react-storybook/pull/623)
-
-# v2.32.0
-
-Incorrect publish (error when running `npm publish`)
-
-# v2.31.0
-
-20-November-2016
-
-Add the react-storybook version to the build output. [PR621](https://github.com/storybooks/react-storybook/pull/621)
-
-# v2.30.1
-
-17-November-2016
-
-Update the postmsg channel module to fix issue [#555](https://github.com/storybooks/react-storybook/issues/555) with [PR611](https://github.com/storybooks/react-storybook/pull/611)
-
-# v2.30.0
-
-16-November-2016
-
-Update to the new Storybook UI which doesn't use Redux.
-
-# v2.29.7
-
-11-November-2016
-
-Update @kadira/storybook-ui to the latest.
-
-# v2.29.6
-
-10-November-2016
-
-Fix a typo in the story syntax error messages. [PR610](https://github.com/storybooks/react-storybook/pull/610)
-
-# v2.29.5
-
-09-November-2016
-
-Check if regex and regex.test is available before calling it. [PR608](https://github.com/storybooks/react-storybook/pull/608)
-
-# v2.29.3
-
-08-November-2016
-
-Update webpack-hot-middleware to version 2.13.2 to fix the issue [#543](https://github.com/storybooks/react-storybook/issues/543).
-
-# v2.29.3
-
-03-November-2016
-
-Fix a regression caused by v2.29.2.
-There was a text called undefined listed always on the top of the preview.
-
-# v2.29.2
-
-03-November-2016
-
-Add various fixes.
-
--   Use webpack chunkhash to enable long-term caching. [PR597](https://github.com/storybooks/react-storybook/pull/597)
--   Fixed json loader testing for when test is multiple. [PR598](https://github.com/storybooks/react-storybook/pull/598)
--   Fix usage of custom favicon [PR592](https://github.com/storybooks/react-storybook/pull/592)
--   Update postcss-loader to v1.1.0 [PR599](https://github.com/storybooks/react-storybook/pull/599)
--   fix for `module.hot` is not available in a static build [PR600](https://github.com/storybooks/react-storybook/pull/600)
-
-# v2.29.1
-
-03-November-2016
-
-Update babel-plugin-react-docgen to v1.4.1 to fix HOC [issue](https://github.com/kadirahq/babel-plugin-react-docgen/issues/19)
-
-# v2.29.0
-
-01-November-2016
-
-Update babel-plugin-react-docgen to 1.4.0.
-This will fix some of the compilation issues such as #580.
-
-# v2.28.1
-
-28-October-2016
-
-Remove preview decorator support. [PR583](https://github.com/storybooks/react-storybook/pull/583).
-
-# v2.28.0
-
-28-October-2016
-
-Add preview decorator support. [PR582](https://github.com/storybooks/react-storybook/pull/582).
-This will help us bring storybook designer with some great power.
-
-# v2.27.0
-
-27-October-2016
-
-Add a few usability improvements to Storybook.
-
--   Display storybook version. [PR559](https://github.com/storybooks/react-storybook/pull/559)
--   Make the storybooks cacheable. [PR578](https://github.com/storybooks/react-storybook/pull/578)
--   Change the devtool to eval and remove the use of source maps. [PR577](https://github.com/storybooks/react-storybook/pull/577)
--   Update `babel-preset-react-app` to the latest. [PR576](https://github.com/storybooks/react-storybook/pull/576)
--   Ship `json-loader` by default. [PR575](https://github.com/storybooks/react-storybook/pull/575)
-
-# v2.26.0
-
-24-October-2016
-
-Get some new features from CRA.
-
--   Add jsx as a resolve extension [PR563](https://github.com/storybooks/react-storybook/pull/563)
--   Allow to use postcss for CSS @imports [PR564](https://github.com/storybooks/react-storybook/pull/564)
--   Use process.env as a proper object [PR565](https://github.com/storybooks/react-storybook/pull/565)
-
-# v2.25.1
-
-23-October-2016
-
-Add a potential fix to [558](https://github.com/storybooks/react-storybook/issues/558) by updating babel-plugin-react-docgen to the latest(v1.3.2).
-
-# v2.25.0
-
-21-October-2016
-
-Add react docgen info into React classes with the react-docgen babel plugin. [PR557](https://github.com/storybooks/react-storybook/pull/557).
-With this:
-
--   We could get docgen info with any React component class using `ClassName.__docgenInfo`.
--   From the global collection: `STORYBOOK_REACT_CLASSES`
-
-Additionally, added `yarn.lock`.
-
-# v2.24.1
-
-19-October-2016
-
-Do not show git command output. [PR554](https://github.com/storybooks/react-storybook/pull/554)
-
-# v2.24.0
-
-07-October-2016
-
--   Export git repository info to support custom tool integrations [PR536](https://github.com/storybooks/react-storybook/pull/536)
-
-# v2.23.0
-
-06-October-2016
-
--   Remove the experimental database addon from react-storybook [PR535](https://github.com/storybooks/react-storybook/pull/535)
-
-# v2.22.0
-
-05-October-2016
-
-Add some nice development experiment based on suggestion from Dan Abramov.
-
--   Set a color to the Storybook URL in the console. [PR533](https://github.com/storybooks/react-storybook/pull/533)
--   Add better error message when there's no React element in the story. [PR534](https://github.com/storybooks/react-storybook/pull/534)
-
-# v2.21.0
-
-05-October-2016
-
--   Get the latest features from CRA including NODE_PATH support, public folder support and some other minor changes. [#468](https://github.com/storybooks/react-storybook/issues/468)
--   Also bumped `@kadira/storybook-channel-postmsg` to `^1.0.3`
-
-# v2.20.1
-
-28-September-2016
-
--   Fix story kind order bug [PR499](https://github.com/storybooks/react-storybook/pull/499)
--   Prefix config environment variables [PR503](https://github.com/storybooks/react-storybook/pull/503)
-
-# v2.20.0
-
-26-September-2016
-
--   Use postMessage channel [PR498](https://github.com/storybooks/react-storybook/pull/498)
--   Support dynamic panel titles [PR497](https://github.com/storybooks/react-storybook/pull/497)
-
-# v2.19.0
-
-26-September-2016
-
--   Support layout options [PR494](https://github.com/storybooks/react-storybook/pull/494)
--   Update Typescript definitions [PR491](https://github.com/storybooks/react-storybook/pull/491) and [PR493](https://github.com/storybooks/react-storybook/pull/493)
-
-# v2.18.1
-
-23-September-2016
-
--   Stop uglifyjs from mangling names [PR483](https://github.com/storybooks/react-storybook/pull/483)
-
-# v2.18.0
-
-23-September-2016
-
--   Remove `STORYBOOK_` prefix from config env [PR481](https://github.com/storybooks/react-storybook/pull/481)
-
-# v2.17.0
-
-22-September-2016
-
--   Add support for StoryShots. [PR479](https://github.com/storybooks/react-storybook/pull/479)
--   Fix some typos: [PR477](https://github.com/storybooks/react-storybook/pull/477) & [PR478](https://github.com/storybooks/react-storybook/pull/478)
-
-# v2.16.1
-
-21-September-2016
-
--   Fix the 404 error for `addon-db.json` file [PR472](https://github.com/storybooks/react-storybook/pull/472)
--   Serve/Bundle the storybook favicon [PR473](https://github.com/storybooks/react-storybook/pull/473)
-
-# v2.16.0
-
-21-September-2016
-
--   Move the babel config loading logic into a seperate file. [PR469](https://github.com/storybooks/react-storybook/pull/469)
--   Update airbnd eslint rules to the latest.
-
-# v2.15.1
-
-19-September-2016
-
-Add a fix to webpack custom resolve.alias not working. [PR465](https://github.com/storybooks/react-storybook/pull/465)
-
-# v2.15.0
-
-19-September-2016
-
--   Use @kadira/storybook-addons as a resolve.alias. So, we can support addons for NPM2 too. [PR462](https://github.com/storybooks/react-storybook/pull/462)
-
-# v2.14.0
-
-14-September-2016
-
--   Watch missing NPM modules and force webpack rebuild. [PR446](https://github.com/storybooks/react-storybook/pull/446)
--   Fix issue on error message hanging after even it solved. [PR447](https://github.com/storybooks/react-storybook/pull/447)
--   Allow to reload if HMR goes crazy. [PR448](https://github.com/storybooks/react-storybook/pull/448)
--   Add support to get custom env variables. [PR450](https://github.com/storybooks/react-storybook/pull/450)
-
-# v2.13.1
-
-14-September-2016
-
--   Fix 404 error when db file does not exist [PR449](https://github.com/storybooks/react-storybook/pull/449)
-
-# v2.13.0
-
-9-September-2016
-
--   Fix [#443](https://github.com/storybooks/react-storybook/issues/443) where the static version of Storybook doesn't like Safari.
--   Update postcss-loader to 0.13.0.
-
-# v2.12.1
-
-8-September-2016
-
--   Parse static directory provided by env as a list. [PR436](https://github.com/storybooks/react-storybook/pull/436)
-
-# v2.12.0
-
-8-September-2016
-
--   Do not include addon register file on preview. [PR426](https://github.com/storybooks/react-storybook/pull/426)
--   Update css-loader to version 0.25.0. [PR427](https://github.com/storybooks/react-storybook/pull/427)
--   Get the head.html values for every page request. [PR432](https://github.com/storybooks/react-storybook/pull/432)
-
-# v2.11.0
-
-4-September-2016
-
--   Remove babel-polyfill since we don't use it.
--   Update versions with the help from greenkeeper. [PR421](https://github.com/storybooks/react-storybook/pull/421)
-
-# v2.10.0
-
-3-September-2016
-
--   Adding airbnb-js-shims again. [PR419](https://github.com/storybooks/react-storybook/pull/419)
-
-# v2.9.1
-
-2-September-2016.
-
--   Use the config directory to store the addon database file [PR418](https://github.com/storybooks/react-storybook/pull/418).
-
-# v2.9.0
-
-2-September-2016.
-
--   Copy the addon-db.json file when building static storybooks [PR417](https://github.com/storybooks/react-storybook/pull/417).
-
-# v2.8.0
-
-2-September-2016.
-
--   Update @kadira/storybook to get the clean query params feature. See [storybook-ui-PR37](https://github.com/kadirahq/storybook-ui/pull/37)
-
-# v2.7.0
-
-1-September-2016
-
--   Add addon database feature [PR415](https://github.com/storybooks/react-storybook/pull/415).
-
-# v2.6.1
-
-31-August-2016
-
--   Bring back HMR dev logs. [PR412](https://github.com/storybooks/react-storybook/pull/412).
-
-# v2.6.0
-
-30-August-2016
-
--   Allow start/build params from env variables. [PR413](https://github.com/storybooks/react-storybook/pull/413)
-
-# v2.5.2
-
-29-August-2016
-
--   Remove the use of babel-runtime/core-js modules. [PR410](https://github.com/storybooks/react-storybook/pull/410)
-
-# v2.5.1
-
-24-August-2016
-
--   Update @kadira/storybook-ui to v3.3.2
-
-# v2.5.0
-
-24-August-2016
-
--   We are no longer shipping extra polyfills anymore. [PR402](https://github.com/storybooks/react-storybook/pull/402)
-
-# v2.4.2
-
-24-August-2016
-
--   Allow file-loader URLs to work on subpaths. [PR401](https://github.com/storybooks/react-storybook/pull/401)
-
-# v2.4.1
-
-24-August-2016
-
--   Bump @kadira/storybook ui to v3.3.1 to fix some UI related issues.
-
-# v2.4.0
-
-23-August-2016
-
--   Simplify the option to stop tracking. [PR399](https://github.com/storybooks/react-storybook/pull/399)
--   Use JSON5 instead of CJSON to parse .babelrc. [PR398](https://github.com/storybooks/react-storybook/pull/398)
--   Add webpack2 support by changing the use of OccurenceOrderPlugin. [PR397](https://github.com/storybooks/react-storybook/pull/397)
--   Use @kadira/storybook-ui 2.3.0, which has new APIs to set URL for addons.
-
-# v2.3.0
-
-16-August-2016
-
--   Implement anonymous usage tracking. [PR384](https://github.com/storybooks/react-storybook/pull/384)
-
-# v2.2.3
-
-15-August-2016
-
--   Add a hash to media file's filename. Otherwise, it'll cause issues when there are multiple images with the same filename but in different directories. [PR380](https://github.com/storybooks/react-storybook/pull/380)
-
-# v2.2.2
-
-10-August-2016
-
--   Remove unused extract-text-webpack-plugin. This will add webpack2 support. [PR369](https://github.com/storybooks/react-storybook/pull/369).
-
-# v2.2.1
-
-09-August-2016
-
--   Use @kadira/storybook-channel modules. [#PR359](https://github.com/storybooks/react-storybook/pull/359).
--   Update @kadira/storybook-ui to the latest.
-
-# v2.2.0
-
-05-August-2016
-
-This release bring some webpack config related optimizations and the NPM2 support. Here are the notable changes:
-
--   Use es6-shim directly into webpack config. [PR355](https://github.com/storybooks/react-storybook/pull/355)
--   Use the default babel-config based on CRA's config. [PR354](https://github.com/storybooks/react-storybook/pull/354)
--   Add NPM2 support. [PR356](https://github.com/storybooks/react-storybook/pull/356)
--   Add autofixer defaults. [PR357](https://github.com/storybooks/react-storybook/pull/357)
-
-# v2.1.1
-
-03-August-2016
-
-Remove default webpack config for all config types. [PR348](https://github.com/storybooks/react-storybook/pull/348)
-
-Now we only use the Create React App based config if there's no custom webpack config.
-This will fix issues like [#347](https://github.com/storybooks/react-storybook/issues/347).
-
-# v2.1.0
-
-02-August-2016
-
-Add support for the addon API. See [PR346](https://github.com/storybooks/react-storybook/pull/346).
-
-Here after we are using most of the features including actions,links as plugins.
-So, this introduced a huge area to add customizations to Storybook.
-
-Unfortunately, as of this version, there are no docs for this feature. But, you can have a look at these addons:
-
--   actions addon (powers the action logger): [addon-actions](https://github.com/kadirahq/storybook-addon-actions)
--   links addon (powers the linkTo feature): [addon-links](https://github.com/kadirahq/storybook-addon-links)
-
-Have a look at [here](https://github.com/storybooks/react-storybook/blob/master/src/server/config.js#L88) to how to configure addons.
-
-# v2.0.0
-
-01-August-2016
-
-This is the starting of the next major version of Storybook. This version is almost compatible with `v1.x.x` but defaults have been changes as discussed below. That's why we are starting out a new version.
-
--   Update defaults to match create-react-app. [PR342](https://github.com/storybooks/react-storybook/pull/342). Here are the notable changes:
-    -   Add postcss based CSS loader.
-    -   Add file-loader for images and common types.
-    -   Add url-loader for shorter media files.
-    -   Do not pre-build manager(storybook UI) bundle.
-    -   Continue support for babel's stage-0 preset and add es2016 preset.
--   Update @kadira/storybook-ui to v2.6.1 to remove some React warnings.
-
-# v1.41.0
-
--   Fix nodejs require errors [#337](https://github.com/storybooks/react-storybook/pull/337).
--   Add getStorybook method to client API [#332](https://github.com/storybooks/react-storybook/pull/332).
-
-# v1.40.0
-
--   Fix duplicate decorator bug [#335](https://github.com/storybooks/react-storybook/pull/335).
-
-# v1.39.1
-
--   Update babel packages [#325](https://github.com/storybooks/react-storybook/pull/325).
--   Hide HMR info logs [#331](https://github.com/storybooks/react-storybook/pull/331).
-
-# v1.39.0
-
--   Update @kadira/storybook-ui to get features from [v2.5.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v250) and [v2.6.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v260).
-
-# v1.38.3
-
--   Add names for action and linkTo functions [#321](https://github.com/storybooks/react-storybook/pull/321).
-
-# v1.38.2
-
--   Fix error in prepublish script [#319](https://github.com/storybooks/react-storybook/pull/319).
-
-# v1.38.1
-
--   Improve Windows support by writing prepublish script using shelljs [#308](https://github.com/storybooks/react-storybook/pull/308).
-
-# v1.38.0
-
--   v1.37.0 was a nightmare since it contains the npm-shrinkwrap.json. Fixed by removing it. See: [#306](https://github.com/storybooks/react-storybook/issues/306) and [#305](https://github.com/storybooks/react-storybook/pull/305).
-
-# v1.37.0
-
--   Update @kadira/storybook-ui to 2.4.0
-
-# v1.36.0
-
--   Support watchOptions configuration. See: [PR287](https://github.com/storybooks/react-storybook/pull/287)
-
-# v1.35.2
-
--   Add missing font-face to the ErrorDisplay's heading.
-
-# v1.35.1
-
--   Fix issue related to bad error handling. See issue [#275](https://github.com/storybooks/react-storybook/issues/275):
-
-# v1.35.0
-
--   Add fuzzy search powered search box and Redux DevTools support via [@kadira/storybook-ui@2.3.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v230).
-
-# v1.34.1
-
--   Don't always override NODE_ENV in build-storybook. [PR272](https://github.com/storybooks/react-storybook/pull/272)
-
-# v1.34.0
-
--   Use storybook-ui v2.2.0 which puts shortcut state into the URL.
-
-# v1.33.0
-
--   Introduce an [extension API](https://github.com/storybooks/react-storybook/blob/master/docs/extensions.md) for Storybook. See: [PR258](https://github.com/storybooks/react-storybook/pull/258)
-
-# v1.32.1
-
--   Extend @kadira/storybook-ui provider from it's base Provider.
-
-# v1.32.0
-
--   Use @kadira/storybook-ui as the manager UI with the implemented provider for React. See `client/manager` for more info.
-
-# v1.31.0
-
--   Pass a `context` argument to stories [PR250](https://github.com/storybooks/react-storybook/pull/250)
-
-# v1.30.0
-
--   Fuzzy search kinds [PR247](https://github.com/storybooks/react-storybook/pull/247)
-
-# v1.29.5
-
--   Update dependency version to fix filter crash [PR246](https://github.com/storybooks/react-storybook/pull/246)
-
-# v1.29.4
-
--   Protect index.html/iframe.html from being overwritten [PR243](https://github.com/storybooks/react-storybook/pull/243)
-
-# v1.29.3
-
--   Update @kadira/storybook-core version [PR241](https://github.com/storybooks/react-storybook/pull/241)
--   Add es6-shim by default [PR238](https://github.com/storybooks/react-storybook/pull/238)
-
-# v1.29.2
-
--   Use url.resolve instead of path.join [PR240](https://github.com/storybooks/react-storybook/pull/240)
-
-# v1.29.1
-
--   Copy missed manager.js.map file on static build [PR236](https://github.com/storybooks/react-storybook/pull/236)
-
-# v1.29.0
-
--   Multiple static dirs (comma separated) [PR229](https://github.com/storybooks/react-storybook/pull/229)
-
-# v1.28.5
-
--   Support ECMAScript stage-0 [PR228](https://github.com/storybooks/react-storybook/pull/228) to fix [Issue #227](https://github.com/storybooks/react-storybook/issues/227)
-
-# v1.28.4
-
--   Support custom webpack public path for dev-server and static build started by [PR226](https://github.com/storybooks/react-storybook/pull/226)
-
-# v1.28.3
-
--   Revert [PR226](https://github.com/storybooks/react-storybook/pull/226)
-
-# v1.28.2
-
--   Support custom webpack publicPath [PR226](https://github.com/storybooks/react-storybook/pull/226)
-
-# v1.28.1
-
--   Add charset meta tags to HTML heads [PR216](https://github.com/storybooks/react-storybook/pull/216)
-
-# v1.28.0
-
--   Moved storybook serving code into a middleware to support more advanced use cases.
--   Refactored dev server to use storybook middleware [PR211](https://github.com/storybooks/react-storybook/pull/211)
-
-# v1.27.0
-
--   Move modules to storybook-core repo. [PR196](https://github.com/storybooks/react-storybook/pull/196)
--   Add stack-source-map again only for Chrome to get better error stacks.
--   Add ability to control the hostname. See [PR195](https://github.com/storybooks/react-storybook/pull/195) and [PR198](https://github.com/storybooks/react-storybook/pull/198)
-
-# v1.26.0
-
-12-May-2016
-
--   Ensure asset directory exists in the static-builder.
-
-# v1.25.0
-
-11-May-2016
-
--   Fix several publishing related issues. See: [#188](https://github.com/storybooks/react-storybook/pull/188).
--   Fix babel extends issue. See: [PR185](https://github.com/storybooks/react-storybook/pull/185).
--   Fix issue with removing a preset from users babelrc.
-    -   Fixes: [#183](https://github.com/storybooks/react-storybook/issues/183).
-    -   [PR184](https://github.com/storybooks/react-storybook/pull/184)
--   Make left panel scrollable with keeping the filterbox always. See: [PR182](https://github.com/storybooks/react-storybook/pull/182).
--   Add `qs` as a direct dependency as it's used in preview.
-
-# v1.24.0
-
-10-May-2016
-
--   Add a potential fix for the double scrollbar issue. See: [179](https://github.com/storybooks/react-storybook/issues/179).
--   Add scrolling support to the left panel. Fixes [#177](https://github.com/storybooks/react-storybook/issues/177).
--   Remove NODE_ENV=production flag. Fixes [#158](https://github.com/storybooks/react-storybook/issues/158)
-
-# v1.23.0
-
-09-May-2016
-
--   Add shortcuts to jump to previous and next stories. See [PR176](https://github.com/storybooks/react-storybook/pull/176)
--   Fix loader concatenation bug specially when custom config doesn't have a loaders section. [PR173](https://github.com/storybooks/react-storybook/pull/173)
-
-# v1.22.1
-
-06-May-2016
-
--   Add a potential fix for [#167](https://github.com/storybooks/react-storybook/issues/167)
-    -   basically, this moved back babel-packages required by webpack.
-
-# v1.22.0
-
-06-May-2016
-
--   Improve the static builder time.
-
-# v1.21.0
-
-06-May-2016
-
--   Add configType argument to custom config function. See: [PR169](https://github.com/storybooks/react-storybook/pull/169)
--   Add the unicode version of the Keyboard Shortcut Icon. See: [PR170](https://github.com/storybooks/react-storybook/pull/170)
-
-# v1.20.0
-
-05-May-2016
-
--   Allow to configure webpack as the user wants. See [PR160](https://github.com/storybooks/react-storybook/pull/160)
--   Add typescript typings support for the core API. See [PR157](https://github.com/storybooks/react-storybook/pull/157)
--   Implement Mantra architecture and some new features including permalinks, full screen support. See: [PR165](https://github.com/storybooks/react-storybook/pull/165)
--   Remove some typo in docs. See: [PR154](https://github.com/storybooks/react-storybook/pull/154)
--   Move UI testing libraries to devDependencies. See: [PR153](https://github.com/storybooks/react-storybook/pull/153)
-
-# v1.19.0
-
-27-April-2016
-
--   Add airbnb-js-shims to client-side JS. See: [PR147](https://github.com/storybooks/react-storybook/pull/147)
--   Remove self-closing div tag, which is invalid HTML. See: [PR148](https://github.com/storybooks/react-storybook/pull/148)
--   Search for a .babelrc in the storybook config directory first, then the project root. See: [PR149](https://github.com/storybooks/react-storybook/pull/149)
-
-# v1.18.0
-
-26-April-2016
-
--   Link Storybook menu to the repo. See: [PR137](https://github.com/storybooks/react-storybook/pull/137)
--   Implement keyboard shortcuts and fuzzy search. See: [PR141](https://github.com/storybooks/react-storybook/pull/141)
-
-# v1.17.2
-
-25-April-2016
-
--   Fix an error which only occurs on Firefox. See: [PR144](https://github.com/storybooks/react-storybook/pull/144)
-
-# v1.17.1
-
-21-April-2016
-
--   Fix a regression introduce by `v1.17.0`. See: [PR133](https://github.com/storybooks/react-storybook/pull/133)
-
-# v1.17.0
-
-21-April-2016
-
--   Check all the arguments passed to action for events. See: [PR132](https://github.com/storybooks/react-storybook/pull/132)
-
-# v1.16.1
-
-21-April-2016
-
--   Fix action logs highlighting issue, which comes as a regression of [PR126](https://github.com/storybooks/react-storybook/pull/126).
-
-# v1.16.0
-
-20-April-2016
-
--   Prevent re-rendering the preview iframe when there is an action.
-    -   Related issue: [#116](https://github.com/storybooks/react-storybook/issues/116)
-    -   Related PR: [PR126](https://github.com/storybooks/react-storybook/pull/126)
-
-# v1.15.0
-
-20-April-2016
-
--   Improve action logger UI and increase max log count to 10. See [PR123](https://github.com/storybooks/react-storybook/pull/123)
-
-# v1.14.0
-
-19-April-2016
-
--   Add syntax highlights to the logger. See: [PR118](https://github.com/storybooks/react-storybook/pull/118)
-
-# v1.13.0
-
--   Add some UI test cases. See [PR103](https://github.com/storybooks/react-storybook/pull/103)
--   Implement `.addDecorator()` API. See [PR115](https://github.com/storybooks/react-storybook/pull/115)
--   Add code folding support. See [PR111](https://github.com/storybooks/react-storybook/pull/111)
-
-# v1.12.0
-
-14-April-2016
-
--   Add support for webpack module preLoaders. See: [PR107](https://github.com/storybooks/react-storybook/pull/107)
-
-# v1.11.0
-
-13-April-2016
-
--   Add support for React DevTools. See: [PR104](https://github.com/storybooks/react-storybook/pull/104)
-
-# v1.10.2
-
-12-April-2016
-
-Fix various issues related to static bundling.
-
--   Add custom head generation to static build as well.
--   Use relative urls so, static sites can be host with paths (GH Pages)
--   Identify SyntheticEvent using feature detection. UglifyJS mangal class names, so we can't use classnames to detect a SyntheticEvent in the static build.
-
-# v1.10.1
-
--   Don't serve index.html in static directory as a site index. See [PR100](https://github.com/storybooks/react-storybook/pull/100)
--   Use cjson for parsing .babelrc files (support comments). See [PR98](https://github.com/storybooks/react-storybook/pull/98)
--   Remove the dist directory before running babel to avoid older code. See [PR101](https://github.com/storybooks/react-storybook/pull/101)
-
-# v1.10.0
-
--   Add custom head support inside the iframe. See [PR77](https://github.com/storybooks/react-storybook/pull/77)
--   Unmount components before rendering into DOM node. Fix: [#81](https://github.com/storybooks/react-storybook/issues/81)
--   Add a static file builder. See [PR88](https://github.com/storybooks/react-storybook/pull/88)
--   Fix search box's lineHeight to work with all the browsers. See: [PR94](https://github.com/storybooks/react-storybook/pull/94)
--   Add the search box. See: [PR91](https://github.com/storybooks/react-storybook/pull/91).
-
-# v1.9.0
-
-Add some minor improvements.
-
--   Avoid deprecated warning in Chrome Canary. See: [PR85](https://github.com/storybooks/react-storybook/pull/85)
--   Fix the React Warning about CSS property. See: [PR84](https://github.com/storybooks/react-storybook/pull/84)
--   Transition on latest logged action. See: [PR80](https://github.com/storybooks/react-storybook/pull/80)
-
-# v1.8.0
-
--   Add story linking functionality.
-    -   [Documentation](https://github.com/storybooks/react-storybook/blob/master/docs/api.md#linking-stories).
-    -   Original feature request: [#50](https://github.com/storybooks/react-storybook/issues/50)
-    -   Implementation: [PR86](https://github.com/storybooks/react-storybook/pull/86)
-
-# v1.7.0
-
--   Add support to React v15.0.0.
-
-# v1.6.0
-
--   Make scrollable layout. See: [PR](https://github.com/storybooks/react-storybook/pull/70)
--   Add npm3 requirement to the `package.json`.
--   Add `react` and `react-dom` to devDependencies.
-
-# v1.5.0
-
--   Add support for most of the custom webpack configuration. See [PR64](https://github.com/storybooks/react-storybook/pull/64)
-
-# v1.4.0
-
--   Add CLI option to specify the config dir. See [PR52](https://github.com/storybooks/react-storybook/pull/52).
-
-# v1.3.0
-
--   Load the `.babelrc` manually. Fixed: [#41](https://github.com/storybooks/react-storybook/issues/41)
--   Add a better contributing guide. See [CONTRIBUTING.md](https://github.com/storybooks/react-storybook/blob/master/CONTRIBUTING.md)
--   Add a development utility `npm run dev` which watches "src" directory and run `npm run prepublish`.
-
-# v1.2.0
-
--   Add a button to clear logs in the ActionLogger. This is requested in [PR21](https://github.com/storybooks/react-storybook/issues/21).
--   Remove navigation list order hijacking. See [commit](https://github.com/storybooks/react-storybook/commit/166365fd38f51f79e69e028a1c11e2620eddcb99).
--   Fix a typo in .gitignore. See [PR31](https://github.com/storybooks/react-storybook/pull/31).
--   Add support for JSX. See [PR18](https://github.com/storybooks/react-storybook/pull/18).
-
-# v1.1.0
-
--   v1.0.0 was a mistake and it contains very old code. That's why we had to do a 1.1.0 release.
-
-# v1.0.0
-
--   Yeah!
+Check the `docs` directory in this repo for more advanced setup guides and other info.
diff --git a/app/react-native/src/bin/storybook-start.js b/app/react-native/src/bin/storybook-start.js
index 95c6cea0ed32..42d2fe74e7a5 100644
--- a/app/react-native/src/bin/storybook-start.js
+++ b/app/react-native/src/bin/storybook-start.js
@@ -10,6 +10,7 @@ program
   .option('-h, --host <host>', 'host to listen on')
   .option('-p, --port <port>', 'port to listen on')
   .option('--haul <configFile>', 'use haul with config file')
+  .option('--platform <ios|android|all>', 'build platform-specific build')
   .option('-s, --secured', 'whether server is running on https')
   .option('-c, --config-dir [dir-name]', 'storybook config directory')
   .option('-e, --environment [environment]', 'DEVELOPMENT/PRODUCTION environment for webpack')
@@ -76,7 +77,8 @@ if (!program.skipPackager) {
 
   let cliCommand = 'node node_modules/react-native/local-cli/cli.js start';
   if (program.haul) {
-    cliCommand = `node node_modules/.bin/haul start --config ${program.haul} --platform all`;
+    const platform = program.platform || 'all';
+    cliCommand = `node node_modules/.bin/haul start --config ${program.haul} --platform ${platform}`;
   }
   // RN packager
   shelljs.exec(
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index aa4fd04f6083..516a41a05264 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -177,5 +177,9 @@ OnDeviceUI.propTypes = {
     emit: PropTypes.func.isRequired,
     removeListener: PropTypes.func.isRequired,
   }).isRequired,
-  url: PropTypes.string.isRequired,
+  url: PropTypes.string,
+};
+
+OnDeviceUI.defaultProps = {
+  url: '',
 };
diff --git a/app/react-native/src/preview/components/StoryView/index.js b/app/react-native/src/preview/components/StoryView/index.js
index 6db708df54e8..f0d897929c6f 100644
--- a/app/react-native/src/preview/components/StoryView/index.js
+++ b/app/react-native/src/preview/components/StoryView/index.js
@@ -24,7 +24,7 @@ export default class StoryView extends Component {
   renderHelp() {
     return (
       <View style={style.help}>
-        {this.props.url ? (
+        {this.props.url && this.props.url.length ? (
           <Text>
             Please open the Storybook UI (
             {this.props.url}
@@ -58,5 +58,9 @@ StoryView.propTypes = {
     on: PropTypes.func.isRequired,
     removeListener: PropTypes.func.isRequired,
   }).isRequired,
-  url: PropTypes.string.isRequired,
+  url: PropTypes.string,
+};
+
+StoryView.defaultProps = {
+  url: '',
 };
diff --git a/app/react/README.md b/app/react/README.md
index edf8681ef468..2db0821f4a21 100644
--- a/app/react/README.md
+++ b/app/react/README.md
@@ -1,11 +1,13 @@
 # Storybook for React
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
-[![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook)
+[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
 [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
 [![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
-[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
-[![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/badge.svg)](https://now-examples-slackin-nqnzoygycp.now.sh/)
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
+
+* * *
 
 Storybook for React is a UI development environment for your React components.
 With it, you can visualize different states of your UI components and develop them interactively.
diff --git a/app/react/package.json b/app/react/package.json
index b60fee00853b..f9fc7aaea65d 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -51,7 +51,7 @@
     "file-loader": "^0.11.2",
     "find-cache-dir": "^1.0.0",
     "glamor": "^2.20.40",
-    "glamorous": "^4.10.0",
+    "glamorous": "^4.11.0",
     "global": "^4.3.2",
     "html-webpack-plugin": "^2.30.1",
     "json-loader": "^0.5.7",
diff --git a/app/vue/README.md b/app/vue/README.md
index 6438e3179a24..ce0b83cbf595 100644
--- a/app/vue/README.md
+++ b/app/vue/README.md
@@ -1,6 +1,5 @@
 # Storybook for Vue
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
 [![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
 [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
 [![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
diff --git a/dependencies.yml b/dependencies.yml
index bd6995784eac..5374bead1ba7 100644
--- a/dependencies.yml
+++ b/dependencies.yml
@@ -39,8 +39,13 @@ collectors:
       github_assignees:
       - Hypnosphi
   # create issues for new major versions
-#  - type: repo-issue
-#    versions: "Y.0.0"
+  - type: repo-issue
+    versions: "Y.0.0"
+    settings:
+      github_labels:
+      - dependencies:update
+      github_assignees:
+      - Hypnosphi
 
 - type: js-npm
   path: docs
@@ -54,5 +59,10 @@ collectors:
       github_assignees:
       - Hypnosphi
   # create issues for new major versions
-#  - type: repo-issue
-#    versions: "Y.0.0"
+  - type: repo-issue
+    versions: "Y.0.0"
+    settings:
+      github_labels:
+      - dependencies:update
+      github_assignees:
+      - Hypnosphi
diff --git a/docs/pages/basics/guide-react/index.md b/docs/pages/basics/guide-react/index.md
index da950fc4f000..dd955c0dc844 100644
--- a/docs/pages/basics/guide-react/index.md
+++ b/docs/pages/basics/guide-react/index.md
@@ -31,7 +31,7 @@ npm i --save-dev @storybook/react
 
 ## Add react and react-dom
 
-Make sure that you have `react` and `react-dom` in your dependencies as well because we list is as a peerDependency:
+Make sure that you have `react` and `react-dom` in your dependencies as well because we list these as a peerDependency:
 
 ```sh
 npm i --save react react-dom
diff --git a/docs/pages/basics/quick-start-guide/index.md b/docs/pages/basics/quick-start-guide/index.md
index 1d067775639e..1eb1eaa771e4 100644
--- a/docs/pages/basics/quick-start-guide/index.md
+++ b/docs/pages/basics/quick-start-guide/index.md
@@ -11,6 +11,7 @@ cd my-project-directory
 npm i -g @storybook/cli
 getstorybook
 ```
+The `-g` global install is used to run our cli tool in your project directory to generate templates for your existing projects. To avoid the global install and start your project manually, take a look at our [Slow Start Guide](/basics/slow-start-guide/).
 
 This will configure your app for Storybook. After that, you can run your Storybook with:
 
diff --git a/docs/pages/examples/_examples.yml b/docs/pages/examples/_examples.yml
index 64247866060e..a57cc7a56a6b 100644
--- a/docs/pages/examples/_examples.yml
+++ b/docs/pages/examples/_examples.yml
@@ -25,6 +25,13 @@ atlassian:
   description: Atlassian's official UI library.
   demo: https://atlaskit.atlassian.com/components
   site: https://atlaskit.atlassian.com/
+wix:
+  thumbnail: ./thumbnails/wix.png
+  title: Wix Style React
+  description: Components that conform to Wix Style
+  source: https://github.com/wix/wix-style-react
+  demo: https://wix.github.io/wix-style-react/
+  site: https://wix.com
 buffer:
   thumbnail: ./thumbnails/buffer.jpg
   title: Buffer Components
diff --git a/docs/pages/examples/thumbnails/wix.png b/docs/pages/examples/thumbnails/wix.png
new file mode 100644
index 000000000000..f0d351c03dd8
Binary files /dev/null and b/docs/pages/examples/thumbnails/wix.png differ
diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
index a90810903681..1ad0ed9875b6 100644
--- a/examples/cra-kitchen-sink/.storybook/config.js
+++ b/examples/cra-kitchen-sink/.storybook/config.js
@@ -1,5 +1,7 @@
 import { configure, setAddon } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
+
+// deprecated usage of infoAddon
 import infoAddon from '@storybook/addon-info';
 
 setOptions({
@@ -9,16 +11,21 @@ setOptions({
   showStoriesPanel: true,
   showAddonsPanel: true,
   showSearchBox: false,
-  addonsPanelInRight: true,
+  addonPanelInRight: true,
   sortStoriesByKind: false,
   hierarchySeparator: /\/|\./,
 });
 
+// deprecated usage of infoAddon
 setAddon(infoAddon);
 
+// put welcome screen at the top of the list so it's the first one displayed
+require('../src/stories/welcome');
+
+// automatically import all story js files that end with *.stories.js
+const req = require.context('../src/stories', true, /\.stories\.js$/)
 function loadStories() {
-  require('../src/stories/index');
-  require('../src/stories/storybook-components');
+  req.keys().forEach((filename) => req(filename))
 }
 
 configure(loadStories, module);
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index ebb9c14cb708..47c25ea9b7f9 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -13,7 +13,7 @@
     "eventemitter3": "^2.0.3",
     "format-json": "^1.0.3",
     "glamor": "^2.20.40",
-    "glamorous": "^4.10.0",
+    "glamorous": "^4.11.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
diff --git a/examples/cra-kitchen-sink/src/components/BaseButton.js b/examples/cra-kitchen-sink/src/components/BaseButton.js
new file mode 100644
index 000000000000..37a8882dd69a
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/components/BaseButton.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/** BaseButton component description imported from comments inside the component file */
+const BaseButton = ({ disabled, label, onClick }) => (
+  <button disabled={disabled} onClick={onClick}>
+    {label}
+  </button>
+);
+
+BaseButton.defaultProps = {
+  disabled: false,
+  onClick: () => {},
+};
+
+BaseButton.propTypes = {
+  /** Boolean indicating whether the button should render as disabled */
+  disabled: PropTypes.bool,
+  /** button label. */
+  label: PropTypes.string.isRequired,
+  /** onClick handler */
+  onClick: PropTypes.func,
+};
+
+export default BaseButton;
diff --git a/examples/cra-kitchen-sink/src/components/DocgenButton.js b/examples/cra-kitchen-sink/src/components/DocgenButton.js
index 898da18dd08b..bf327352abd1 100644
--- a/examples/cra-kitchen-sink/src/components/DocgenButton.js
+++ b/examples/cra-kitchen-sink/src/components/DocgenButton.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-/** Button component description */
+/** DocgenButton component description imported from comments inside the component file */
 const DocgenButton = ({ disabled, label, onClick }) => (
   <button disabled={disabled} onClick={onClick}>
     {label}
diff --git a/examples/cra-kitchen-sink/src/components/FlowTypeButton.js b/examples/cra-kitchen-sink/src/components/FlowTypeButton.js
index d008dec3a755..4511adf970f6 100644
--- a/examples/cra-kitchen-sink/src/components/FlowTypeButton.js
+++ b/examples/cra-kitchen-sink/src/components/FlowTypeButton.js
@@ -10,7 +10,7 @@ type PropsType = {
   disabled?: boolean,
 };
 
-/** Flow type button description */
+/** FlowTypeButton component description imported from comments inside the component file */
 const FlowTypeButton = ({ label, onClick, disabled }: PropsType) => (
   <button onClick={onClick} disabled={disabled}>
     {label}
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-info.stories.storyshot
similarity index 57%
rename from examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot
rename to examples/cra-kitchen-sink/src/stories/__snapshots__/addon-info.stories.storyshot
index 2a532e8e6f20..1d15d2d1f876 100644
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-info.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
+exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
 <div>
   <div
     style={
@@ -14,7 +14,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
       disabled={false}
       onClick={[Function]}
     >
-      Docgen Button
+      Button
     </button>
   </div>
   <a
@@ -118,7 +118,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
               }
             }
           >
-            AddonInfo.DocgenButton
+            Addon Info.Decorator
           </h1>
           <h2
             style={
@@ -130,7 +130,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
               }
             }
           >
-            DocgenButton
+            Use Info as story decorator
           </h2>
         </div>
         <div
@@ -150,7 +150,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
               }
             }
           >
-            Some Description
+            Info could be used as a global or local decorator as well.
           </p>
         </div>
         <div>
@@ -194,37 +194,9 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
                 }
               >
                 &lt;
-                DocgenButton
+                BaseButton
               </span>
               <span>
-                <span>
-                   
-                  <span
-                    style={Object {}}
-                  >
-                    onClick
-                  </span>
-                  <span>
-                    =
-                    <span
-                      style={Object {}}
-                    >
-                      <span>
-                        {
-                        <span
-                          style={
-                            Object {
-                              "color": "#170",
-                            }
-                          }
-                        >
-                          clicked()
-                        </span>
-                        }
-                      </span>
-                    </span>
-                  </span>
-                </span>
                 <span>
                    
                   <span
@@ -246,7 +218,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
                         }
                       >
                         "
-                        Docgen Button
+                        Button
                         "
                       </span>
                     </span>
@@ -288,7 +260,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
               }
             >
               "
-              DocgenButton
+              BaseButton
               " Component
             </h2>
             <table
@@ -423,206 +395,6 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
                     className="css-d52hbj"
                   />
                 </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    one
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    two
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    obj
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    shape
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    arrayOf
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    msg
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    enm
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    union
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
               </tbody>
             </table>
           </div>
@@ -633,7 +405,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
 </div>
 `;
 
-exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
+exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
 <div>
   <div
     style={
@@ -647,7 +419,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
       disabled={false}
       onClick={[Function]}
     >
-      Flow Typed Button
+      Button
     </button>
   </div>
   <a
@@ -751,7 +523,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
               }
             }
           >
-            AddonInfo.FlowTypeButton
+            Addon Info.Markdown
           </h1>
           <h2
             style={
@@ -763,7 +535,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
               }
             }
           >
-            FlowTypeButton
+            Displays Markdown in description
           </h2>
         </div>
         <div
@@ -773,34 +545,85 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
             }
           }
         >
-          <p
+          <h4
+            id="you-can-use-markdown-in-your-withinfo()-description."
             style={
               Object {
                 "WebkitFontSmoothing": "antialiased",
                 "color": "#444",
                 "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-                "fontSize": "15px",
+                "fontSize": "20px",
+                "fontWeight": 600,
+                "margin": 0,
+                "padding": 0,
               }
             }
           >
-            Some Description
-          </p>
-        </div>
-        <div>
-          <h1
+            You can use markdown in your withInfo() description.
+          </h4>
+          <p
             style={
               Object {
-                "borderBottom": "1px solid #EEE",
-                "fontSize": "25px",
-                "margin": "20px 0 0 0",
-                "padding": "0 0 5px 0",
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
               }
             }
           >
-            Story Source
-          </h1>
-          <pre
-            style={
+            Sometimes you might want to manually include some code examples:
+          </p>
+          <pre>
+            <code
+              className="hljs js"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "const codeblock = [];",
+                }
+              }
+            />
+          </pre>
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            Maybe include a 
+            <a
+              href="http://storybook.js.org"
+              rel="noopener noreferrer"
+              style={
+                Object {
+                  "color": "#3498db",
+                }
+              }
+              target="_blank"
+            >
+              link
+            </a>
+             to your project as well.
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
               Object {
                 "backgroundColor": "#fafafa",
                 "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
@@ -827,7 +650,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
                 }
               >
                 &lt;
-                FlowTypeButton
+                BaseButton
               </span>
               <span>
                 <span>
@@ -879,7 +702,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
                         }
                       >
                         "
-                        Flow Typed Button
+                        Button
                         "
                       </span>
                     </span>
@@ -921,7 +744,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
               }
             >
               "
-              FlowTypeButton
+              BaseButton
               " Component
             </h2>
             <table
@@ -966,9 +789,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    <span>
-                      unknown
-                    </span>
+                    <span />
                   </td>
                   <td
                     className="css-d52hbj"
@@ -996,6 +817,31 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
                     className="css-d52hbj"
                   />
                 </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    label
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    yes
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
                 <tr>
                   <td
                     className="css-1ygfcef"
@@ -1005,9 +851,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    <span>
-                      unknown
-                    </span>
+                    <span />
                   </td>
                   <td
                     className="css-d52hbj"
@@ -1045,7 +889,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
 </div>
 `;
 
-exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
+exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1`] = `
 <div>
   <div
     style={
@@ -1059,7 +903,7 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
       disabled={false}
       onClick={[Function]}
     >
-      Docgen Button
+      Button
     </button>
   </div>
   <a
@@ -1145,39 +989,6 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
           }
         }
       >
-        <div
-          style={
-            Object {
-              "borderBottom": "1px solid #eee",
-              "marginBottom": 10,
-              "paddingTop": 10,
-            }
-          }
-        >
-          <h1
-            style={
-              Object {
-                "fontSize": "35px",
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            AddonInfo.ImportedPropsButton
-          </h1>
-          <h2
-            style={
-              Object {
-                "fontSize": "22px",
-                "fontWeight": 400,
-                "margin": "0 0 10px 0",
-                "padding": 0,
-              }
-            }
-          >
-            ImportedPropsButton
-          </h2>
-        </div>
         <div
           style={
             Object {
@@ -1195,7 +1006,7 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
               }
             }
           >
-            Button with PropTypes imported from another file. Should fallback to using PropTypes for data.
+            The Info Addon header should be hidden
           </p>
         </div>
         <div>
@@ -1239,37 +1050,9 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                 }
               >
                 &lt;
-                ImportedPropsButton
+                BaseButton
               </span>
               <span>
-                <span>
-                   
-                  <span
-                    style={Object {}}
-                  >
-                    onClick
-                  </span>
-                  <span>
-                    =
-                    <span
-                      style={Object {}}
-                    >
-                      <span>
-                        {
-                        <span
-                          style={
-                            Object {
-                              "color": "#170",
-                            }
-                          }
-                        >
-                          clicked()
-                        </span>
-                        }
-                      </span>
-                    </span>
-                  </span>
-                </span>
                 <span>
                    
                   <span
@@ -1291,7 +1074,7 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                         }
                       >
                         "
-                        Docgen Button
+                        Button
                         "
                       </span>
                     </span>
@@ -1333,7 +1116,7 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
               }
             >
               "
-              ImportedPropsButton
+              BaseButton
               " Component
             </h2>
             <table
@@ -1468,36 +1251,1645 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                     className="css-d52hbj"
                   />
                 </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    one
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`] = `
+<div>
+  <div
+    style={undefined}
+  >
+    <div
+      style={
+        Object {
+          "WebkitFontSmoothing": "antialiased",
+          "backgroundColor": "#fff",
+          "border": "1px solid #eee",
+          "borderRadius": "2px",
+          "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+          "color": "#444",
+          "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+          "fontSize": "15px",
+          "fontWeight": 300,
+          "lineHeight": 1.45,
+          "marginTop": "50px",
+          "padding": "20px 40px 40px",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "borderBottom": "1px solid #eee",
+            "marginBottom": 10,
+            "paddingTop": 10,
+          }
+        }
+      >
+        <h1
+          style={
+            Object {
+              "fontSize": "35px",
+              "margin": 0,
+              "padding": 0,
+            }
+          }
+        >
+          Addon Info.Options.inline
+        </h1>
+        <h2
+          style={
+            Object {
+              "fontSize": "22px",
+              "fontWeight": 400,
+              "margin": "0 0 10px 0",
+              "padding": 0,
+            }
+          }
+        >
+          Inlines component inside story
+        </h2>
+      </div>
+    </div>
+  </div>
+  <div
+    style={Object {}}
+  >
+    <button
+      disabled={false}
+      onClick={[Function]}
+    >
+      Button
+    </button>
+  </div>
+  <div
+    style={undefined}
+  >
+    <div
+      style={
+        Object {
+          "WebkitFontSmoothing": "antialiased",
+          "backgroundColor": "#fff",
+          "border": "1px solid #eee",
+          "borderRadius": "2px",
+          "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+          "color": "#444",
+          "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+          "fontSize": "15px",
+          "fontWeight": 300,
+          "lineHeight": 1.45,
+          "marginTop": "50px",
+          "padding": "20px 40px 40px",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "marginBottom": 0,
+          }
+        }
+      >
+        <p
+          style={
+            Object {
+              "WebkitFontSmoothing": "antialiased",
+              "color": "#444",
+              "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+              "fontSize": "15px",
+            }
+          }
+        >
+          Component should be inlined between description and PropType table
+        </p>
+      </div>
+      <div>
+        <h1
+          style={
+            Object {
+              "borderBottom": "1px solid #EEE",
+              "fontSize": "25px",
+              "margin": "20px 0 0 0",
+              "padding": "0 0 5px 0",
+            }
+          }
+        >
+          Story Source
+        </h1>
+        <pre
+          style={
+            Object {
+              "backgroundColor": "#fafafa",
+              "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+              "fontSize": ".88em",
+              "lineHeight": 1.5,
+              "overflowX": "scroll",
+              "padding": ".5rem",
+            }
+          }
+        >
+          <div
+            style={
+              Object {
+                "paddingLeft": 18,
+                "paddingRight": 3,
+              }
+            }
+          >
+            <span
+              style={
+                Object {
+                  "color": "#777",
+                }
+              }
+            >
+              &lt;
+              BaseButton
+            </span>
+            <span>
+              <span>
+                 
+                <span
+                  style={Object {}}
+                >
+                  label
+                </span>
+                <span>
+                  =
+                  <span
+                    style={Object {}}
                   >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
+                    <span
+                      style={
+                        Object {
+                          "color": "#22a",
+                          "wordBreak": "break-word",
+                        }
+                      }
+                    >
+                      "
+                      Button
+                      "
+                    </span>
+                  </span>
+                </span>
+                 
+              </span>
+            </span>
+            <span
+              style={
+                Object {
+                  "color": "#777",
+                }
+              }
+            >
+              /&gt;
+            </span>
+          </div>
+        </pre>
+      </div>
+      <div>
+        <h1
+          style={
+            Object {
+              "borderBottom": "1px solid #EEE",
+              "fontSize": "25px",
+              "margin": "20px 0 0 0",
+              "padding": "0 0 5px 0",
+            }
+          }
+        >
+          Prop Types
+        </h1>
+        <div>
+          <h2
+            style={
+              Object {
+                "margin": "20px 0 0 0",
+              }
+            }
+          >
+            "
+            BaseButton
+            " Component
+          </h2>
+          <table
+            className="css-1ytzlk7"
+          >
+            <thead>
+              <tr>
+                <th
+                  className="css-d52hbj"
+                >
+                  property
+                </th>
+                <th
+                  className="css-d52hbj"
+                >
+                  propType
+                </th>
+                <th
+                  className="css-d52hbj"
+                >
+                  required
+                </th>
+                <th
+                  className="css-d52hbj"
+                >
+                  default
+                </th>
+                <th
+                  className="css-d52hbj"
+                >
+                  description
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td
+                  className="css-1ygfcef"
+                >
+                  disabled
+                </td>
+                <td
+                  className="css-1ygfcef"
+                >
+                  <span />
+                </td>
+                <td
+                  className="css-d52hbj"
+                >
+                  -
+                </td>
+                <td
+                  className="css-d52hbj"
+                >
+                  <span>
+                    {
+                    <span
+                      style={
+                        Object {
+                          "color": "#a11",
+                        }
+                      }
+                    >
+                      false
+                    </span>
+                    }
+                  </span>
+                </td>
+                <td
+                  className="css-d52hbj"
+                />
+              </tr>
+              <tr>
+                <td
+                  className="css-1ygfcef"
+                >
+                  label
+                </td>
+                <td
+                  className="css-1ygfcef"
+                >
+                  <span />
+                </td>
+                <td
+                  className="css-d52hbj"
+                >
+                  yes
+                </td>
+                <td
+                  className="css-d52hbj"
+                >
+                  -
+                </td>
+                <td
+                  className="css-d52hbj"
+                />
+              </tr>
+              <tr>
+                <td
+                  className="css-1ygfcef"
+                >
+                  onClick
+                </td>
+                <td
+                  className="css-1ygfcef"
+                >
+                  <span />
+                </td>
+                <td
+                  className="css-d52hbj"
+                >
+                  -
+                </td>
+                <td
+                  className="css-d52hbj"
+                >
+                  <span>
+                    {
+                    <span
+                      style={
+                        Object {
+                          "color": "#170",
+                        }
+                      }
+                    >
+                      onClick()
+                    </span>
+                    }
+                  </span>
+                </td>
+                <td
+                  className="css-d52hbj"
+                />
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon Info.Options.propTables Shows additional component prop tables 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <button
+      disabled={false}
+      onClick={[Function]}
+    >
+      Button
+    </button>
+  </div>
+  <a
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "background": "#28c",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "textDecoration": "none",
+        "top": 0,
+      }
+    }
+    tabIndex="0"
+  >
+    Show Info
+  </a>
+  <div
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
+  >
+    <a
+      onClick={[Function]}
+      role="button"
+      style={
+        Object {
+          "background": "#28c",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "textDecoration": "none",
+          "top": 0,
+        }
+      }
+      tabIndex="0"
+    >
+      ×
+    </a>
+    <div
+      style={undefined}
+    >
+      <div
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Addon Info.Options.propTables
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            Shows additional component prop tables
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            There should be a prop table added for a component not included in the story
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "paddingLeft": 18,
+                  "paddingRight": 3,
+                }
+              }
+            >
+              <span
+                style={
+                  Object {
+                    "color": "#777",
+                  }
+                }
+              >
+                &lt;
+                BaseButton
+              </span>
+              <span>
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    label
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#22a",
+                            "wordBreak": "break-word",
+                          }
+                        }
+                      >
+                        "
+                        Button
+                        "
+                      </span>
+                    </span>
+                  </span>
+                   
+                </span>
+              </span>
+              <span
+                style={
+                  Object {
+                    "color": "#777",
+                  }
+                }
+              >
+                /&gt;
+              </span>
+            </div>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              BaseButton
+              " Component
+            </h2>
+            <table
+              className="css-1ytzlk7"
+            >
+              <thead>
+                <tr>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    property
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    propType
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    required
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    default
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    disabled
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    label
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    yes
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    onClick
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
+                        }
+                      >
+                        onClick()
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              FlowTypeButton
+              " Component
+            </h2>
+            <table
+              className="css-1ytzlk7"
+            >
+              <thead>
+                <tr>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    property
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    propType
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    required
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    default
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    disabled
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span>
+                      unknown
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    onClick
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span>
+                      unknown
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
+                        }
+                      >
+                        onClick()
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from prop tables 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div>
+      <button
+        disabled={false}
+        onClick={[Function]}
+      >
+        Button
+      </button>
+      <button
+        disabled={false}
+        onClick={[Function]}
+      >
+        Flow Typed Button
+      </button>
+    </div>
+  </div>
+  <a
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "background": "#28c",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "textDecoration": "none",
+        "top": 0,
+      }
+    }
+    tabIndex="0"
+  >
+    Show Info
+  </a>
+  <div
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
+  >
+    <a
+      onClick={[Function]}
+      role="button"
+      style={
+        Object {
+          "background": "#28c",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "textDecoration": "none",
+          "top": 0,
+        }
+      }
+      tabIndex="0"
+    >
+      ×
+    </a>
+    <div
+      style={undefined}
+    >
+      <div
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Addon Info.Options.propTablesExclude
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            Exclude component from prop tables
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            This can exclude extraneous components from being displayed in prop tables.
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  div
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  BaseButton
+                </span>
+                <span>
+                  <span>
+                     
+                    <span
+                      style={Object {}}
+                    >
+                      label
+                    </span>
+                    <span>
+                      =
+                      <span
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "color": "#22a",
+                              "wordBreak": "break-word",
+                            }
+                          }
+                        >
+                          "
+                          Button
+                          "
+                        </span>
+                      </span>
+                    </span>
+                     
+                  </span>
+                </span>
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  FlowTypeButton
+                </span>
+                <span>
+                  <span>
+                     
+                    <span
+                      style={Object {}}
+                    >
+                      label
+                    </span>
+                    <span>
+                      =
+                      <span
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "color": "#22a",
+                              "wordBreak": "break-word",
+                            }
+                          }
+                        >
+                          "
+                          Flow Typed Button
+                          "
+                        </span>
+                      </span>
+                    </span>
+                     
+                  </span>
+                </span>
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;/
+                  div
+                  &gt;
+                </span>
+              </div>
+            </div>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              BaseButton
+              " Component
+            </h2>
+            <table
+              className="css-1ytzlk7"
+            >
+              <thead>
+                <tr>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    property
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    propType
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    required
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    default
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    disabled
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    label
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    yes
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    onClick
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
+                        }
+                      >
+                        onClick()
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
                   />
                 </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <button
+      disabled={false}
+      onClick={[Function]}
+    >
+      Button
+    </button>
+  </div>
+  <a
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "background": "#28c",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "textDecoration": "none",
+        "top": 0,
+      }
+    }
+    tabIndex="0"
+  >
+    Show Info
+  </a>
+  <div
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
+  >
+    <a
+      onClick={[Function]}
+      role="button"
+      style={
+        Object {
+          "background": "#28c",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "textDecoration": "none",
+          "top": 0,
+        }
+      }
+      tabIndex="0"
+    >
+      ×
+    </a>
+    <div
+      style={undefined}
+    >
+      <div
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Addon Info.Options.source
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            Shows or hides Info Addon source
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            The Info Addon source section should be hidden
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              BaseButton
+              " Component
+            </h2>
+            <table
+              className="css-1ytzlk7"
+            >
+              <thead>
+                <tr>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    property
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    propType
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    required
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    default
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
                 <tr>
                   <td
                     className="css-1ygfcef"
                   >
-                    two
+                    disabled
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -1509,6 +2901,43 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                   >
                     -
                   </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    label
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    yes
+                  </td>
                   <td
                     className="css-d52hbj"
                   >
@@ -1522,7 +2951,7 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    obj
+                    onClick
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -1537,67 +2966,316 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
+                        }
+                      >
+                        onClick()
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon Info.Options.styles Change info styles // I think this is broken or I am using it wrong? 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <button
+      disabled={false}
+      onClick={[Function]}
+    >
+      Button
+    </button>
+  </div>
+  <a
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "background": "#28c",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "textDecoration": "none",
+        "top": 0,
+      }
+    }
+    tabIndex="0"
+  >
+    Show Info
+  </a>
+  <div
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
+  >
+    <a
+      onClick={[Function]}
+      role="button"
+      style={
+        Object {
+          "background": "#28c",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "textDecoration": "none",
+          "top": 0,
+        }
+      }
+      tabIndex="0"
+    >
+      ×
+    </a>
+    <div
+      style={undefined}
+    >
+      <div
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Addon Info.Options.styles
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            Change info styles // I think this is broken or I am using it wrong?
+          </h2>
+        </div>
+        
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "paddingLeft": 18,
+                  "paddingRight": 3,
+                }
+              }
+            >
+              <span
+                style={
+                  Object {
+                    "color": "#777",
+                  }
+                }
+              >
+                &lt;
+                BaseButton
+              </span>
+              <span>
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    label
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#22a",
+                            "wordBreak": "break-word",
+                          }
+                        }
+                      >
+                        "
+                        Button
+                        "
+                      </span>
+                    </span>
+                  </span>
+                   
+                </span>
+              </span>
+              <span
+                style={
+                  Object {
+                    "color": "#777",
+                  }
+                }
+              >
+                /&gt;
+              </span>
+            </div>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              BaseButton
+              " Component
+            </h2>
+            <table
+              className="css-1ytzlk7"
+            >
+              <thead>
                 <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    shape
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
+                  <th
                     className="css-d52hbj"
                   >
-                    -
-                  </td>
-                  <td
+                    property
+                  </th>
+                  <th
                     className="css-d52hbj"
-                  />
-                </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
                   >
-                    arrayOf
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
+                    propType
+                  </th>
+                  <th
                     className="css-d52hbj"
                   >
-                    -
-                  </td>
-                  <td
+                    required
+                  </th>
+                  <th
                     className="css-d52hbj"
                   >
-                    -
-                  </td>
-                  <td
+                    default
+                  </th>
+                  <th
                     className="css-d52hbj"
-                  />
+                  >
+                    description
+                  </th>
                 </tr>
+              </thead>
+              <tbody>
                 <tr>
                   <td
                     className="css-1ygfcef"
                   >
-                    msg
+                    disabled
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -1612,7 +3290,19 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    -
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
                   </td>
                   <td
                     className="css-d52hbj"
@@ -1622,7 +3312,7 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    enm
+                    label
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -1632,7 +3322,7 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    -
+                    yes
                   </td>
                   <td
                     className="css-d52hbj"
@@ -1647,7 +3337,7 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    union
+                    onClick
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -1662,7 +3352,19 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    -
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
+                        }
+                      >
+                        onClick()
+                      </span>
+                      }
+                    </span>
                   </td>
                   <td
                     className="css-d52hbj"
@@ -1678,122 +3380,7 @@ exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = `
 </div>
 `;
 
-exports[`Storyshots AddonLink.Button First 1`] = `
-<button
-  onClick={[Function]}
->
-  Go to "Second"
-</button>
-`;
-
-exports[`Storyshots AddonLink.Button Second 1`] = `
-<button
-  onClick={[Function]}
->
-  Go to "First"
-</button>
-`;
-
-exports[`Storyshots AddonLink.Href log 1`] = `
-<span>
-  See action logger
-</span>
-`;
-
-exports[`Storyshots AddonLink.Link First 1`] = `
-<a
-  href="/"
-  onClick={[Function]}
->
-  Go to Second
-</a>
-`;
-
-exports[`Storyshots AddonLink.Link Second 1`] = `
-<a
-  href="/"
-  onClick={[Function]}
->
-  Go to First
-</a>
-`;
-
-exports[`Storyshots AddonLink.Select First 1`] = `
-<a
-  href="/"
-  onClick={[Function]}
->
-  Go back
-</a>
-`;
-
-exports[`Storyshots AddonLink.Select Index 1`] = `
-<select
-  onChange={[Function]}
-  value="Index"
->
-  <option>
-    Index
-  </option>
-  <option>
-    First
-  </option>
-  <option>
-    Second
-  </option>
-  <option>
-    Third
-  </option>
-</select>
-`;
-
-exports[`Storyshots AddonLink.Select Second 1`] = `
-<a
-  href="/"
-  onClick={[Function]}
->
-  Go back
-</a>
-`;
-
-exports[`Storyshots AddonLink.Select Third 1`] = `
-<a
-  href="/"
-  onClick={[Function]}
->
-  Go back
-</a>
-`;
-
-exports[`Storyshots App full app 1`] = `
-<div
-  className="App"
->
-  <div
-    className="App-header"
-  >
-    <img
-      alt="logo"
-      className="App-logo"
-      src="file-stub"
-    />
-    <h2>
-      Welcome to React
-    </h2>
-  </div>
-  <p
-    className="App-intro"
-  >
-    To get started, edit 
-    <code>
-      src/App.js
-    </code>
-     and save to reload.
-  </p>
-</div>
-`;
-
-exports[`Storyshots Button addons composition 1`] = `
+exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`] = `
 <div>
   <div
     style={
@@ -1803,30 +3390,12 @@ exports[`Storyshots Button addons composition 1`] = `
       }
     }
   >
-    <div>
-      click the 
-      <span
-        style={
-          Object {
-            "background": "rgb(34, 136, 204)",
-            "borderRadius": "0px 0px 0px 5px",
-            "color": "rgb(255, 255, 255)",
-            "fontFamily": "sans-serif",
-            "fontSize": 12,
-            "margin": 10,
-            "padding": "5px 15px",
-            "textDecoration": "none",
-          }
-        }
-      >
-         
-        Show Info
-         
-      </span>
-       label in top right for info about "
-      addons composition
-      "
-    </div>
+    <button
+      disabled={false}
+      onClick={[Function]}
+    >
+      Flow Typed Button
+    </button>
   </div>
   <a
     onClick={[Function]}
@@ -1906,256 +3475,174 @@ exports[`Storyshots Button addons composition 1`] = `
             "fontSize": "15px",
             "fontWeight": 300,
             "lineHeight": 1.45,
-            "marginTop": "50px",
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "borderBottom": "1px solid #eee",
-              "marginBottom": 10,
-              "paddingTop": 10,
-            }
-          }
-        >
-          <h1
-            style={
-              Object {
-                "fontSize": "35px",
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            Button
-          </h1>
-          <h2
-            style={
-              Object {
-                "fontSize": "22px",
-                "fontWeight": 400,
-                "margin": "0 0 10px 0",
-                "padding": 0,
-              }
-            }
-          >
-            addons composition
-          </h2>
-        </div>
-        <div
-          style={
-            Object {
-              "marginBottom": 0,
-            }
-          }
-        >
-          <p
-            style={
-              Object {
-                "WebkitFontSmoothing": "antialiased",
-                "color": "#444",
-                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-                "fontSize": "15px",
-              }
-            }
-          >
-            see Notes panel for composition info
-          </p>
-        </div>
-        <div>
-          <h1
-            style={
-              Object {
-                "borderBottom": "1px solid #EEE",
-                "fontSize": "25px",
-                "margin": "20px 0 0 0",
-                "padding": "0 0 5px 0",
-              }
-            }
-          >
-            Story Source
-          </h1>
-          <pre
-            style={
-              Object {
-                "backgroundColor": "#fafafa",
-                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
-                "fontSize": ".88em",
-                "lineHeight": 1.5,
-                "overflowX": "scroll",
-                "padding": ".5rem",
-              }
-            }
-          >
-            <div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  div
-                </span>
-                <span />
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &gt;
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                />
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  click the 
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  InfoButton
-                </span>
-                <span />
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  /&gt;
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Addon Info.React Docgen
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            Comments from Flow declarations
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "paddingLeft": 18,
+                  "paddingRight": 3,
                 }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                   label in top right for info about "
-                </span>
-              </div>
-              <div
+              }
+            >
+              <span
                 style={
                   Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  addons composition
+                &lt;
+                FlowTypeButton
+              </span>
+              <span>
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    onClick
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span>
+                        {
+                        <span
+                          style={
+                            Object {
+                              "color": "#170",
+                            }
+                          }
+                        >
+                          clicked()
+                        </span>
+                        }
+                      </span>
+                    </span>
+                  </span>
                 </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  "
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    label
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#22a",
+                            "wordBreak": "break-word",
+                          }
+                        }
+                      >
+                        "
+                        Flow Typed Button
+                        "
+                      </span>
+                    </span>
+                  </span>
+                   
                 </span>
-              </div>
-              <div
+              </span>
+              <span
                 style={
                   Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;/
-                  div
-                  &gt;
-                </span>
-              </div>
+                /&gt;
+              </span>
             </div>
           </pre>
         </div>
@@ -2181,12 +3668,122 @@ exports[`Storyshots Button addons composition 1`] = `
               }
             >
               "
-              InfoButton
+              FlowTypeButton
               " Component
             </h2>
-            <small>
-              No propTypes defined!
-            </small>
+            <table
+              className="css-1ytzlk7"
+            >
+              <thead>
+                <tr>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    property
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    propType
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    required
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    default
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    disabled
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span>
+                      unknown
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    onClick
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span>
+                      unknown
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
+                        }
+                      >
+                        onClick()
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
@@ -2195,74 +3792,7 @@ exports[`Storyshots Button addons composition 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button with knobs 1`] = `
-<div
-  style={
-    Object {
-      "backgroundColor": "#ffff00",
-      "border": "3px solid #ff00ff",
-      "padding": "10px",
-    }
-  }
->
-  <p>
-    My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
-  </p>
-  <p>
-    My birthday is: 
-    January 20, 2017
-  </p>
-  <p>
-    I have 
-    2
-     children:
-  </p>
-  <ol>
-    <li>
-      Jane
-      , 
-      13
-       years old
-    </li>
-    <li>
-      John
-      , 
-      8
-       years old
-    </li>
-  </ol>
-  <p>
-    My wallet contains: $
-    12.50
-  </p>
-  <p>
-    In my backpack, I have:
-  </p>
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-  <p>
-    Nice to meet you!
-  </p>
-  <hr />
-  <p>
-    PS. My shirt pocket contains: 
-  </p>
-  <li>
-    No items!
-  </li>
-</div>
-`;
-
-exports[`Storyshots Button with new info 1`] = `
+exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations 1`] = `
 <div>
   <div
     style={
@@ -2272,33 +3802,12 @@ exports[`Storyshots Button with new info 1`] = `
       }
     }
   >
-    <div
-      title="the best container ever"
+    <button
+      disabled={false}
+      onClick={[Function]}
     >
-      click the 
-      <span
-        style={
-          Object {
-            "background": "rgb(34, 136, 204)",
-            "borderRadius": "0px 0px 0px 5px",
-            "color": "rgb(255, 255, 255)",
-            "fontFamily": "sans-serif",
-            "fontSize": 12,
-            "margin": 10,
-            "padding": "5px 15px",
-            "textDecoration": "none",
-          }
-        }
-      >
-         
-        Show Info
-         
-      </span>
-       label in top right for info about "
-      with new info
-      "
-      
-    </div>
+      Docgen Button
+    </button>
   </div>
   <a
     onClick={[Function]}
@@ -2401,7 +3910,7 @@ exports[`Storyshots Button with new info 1`] = `
               }
             }
           >
-            Button
+            Addon Info.React Docgen
           </h1>
           <h2
             style={
@@ -2413,7 +3922,7 @@ exports[`Storyshots Button with new info 1`] = `
               }
             }
           >
-            with new info
+            Comments from PropType declarations
           </h2>
         </div>
         <div
@@ -2433,20 +3942,7 @@ exports[`Storyshots Button with new info 1`] = `
               }
             }
           >
-            Use the 
-            <a
-              href="https://github.com/storybooks/storybook/tree/master/addons/info"
-              rel="noopener noreferrer"
-              style={
-                Object {
-                  "color": "#3498db",
-                }
-              }
-              target="_blank"
-            >
-              info addon
-            </a>
-             with its new painless API.
+            Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
           </p>
         </div>
         <div>
@@ -2474,173 +3970,91 @@ exports[`Storyshots Button with new info 1`] = `
               }
             }
           >
-            <div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  Container
-                </span>
-                <span />
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &gt;
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                />
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  click the 
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  InfoButton
-                </span>
-                <span />
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  /&gt;
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                   label in top right for info about "
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
+            <div
+              style={
+                Object {
+                  "paddingLeft": 18,
+                  "paddingRight": 3,
                 }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  with new info
-                </span>
-              </div>
-              <div
+              }
+            >
+              <span
                 style={
                   Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  "
+                &lt;
+                DocgenButton
+              </span>
+              <span>
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    onClick
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span>
+                        {
+                        <span
+                          style={
+                            Object {
+                              "color": "#170",
+                            }
+                          }
+                        >
+                          clicked()
+                        </span>
+                        }
+                      </span>
+                    </span>
+                  </span>
                 </span>
-              </div>
-              <div
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    label
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#22a",
+                            "wordBreak": "break-word",
+                          }
+                        }
+                      >
+                        "
+                        Docgen Button
+                        "
+                      </span>
+                    </span>
+                  </span>
+                   
+                </span>
+              </span>
+              <span
                 style={
                   Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;/
-                  Container
-                  &gt;
-                </span>
-              </div>
+                /&gt;
+              </span>
             </div>
           </pre>
         </div>
@@ -2666,7 +4080,7 @@ exports[`Storyshots Button with new info 1`] = `
               }
             >
               "
-              Container
+              DocgenButton
               " Component
             </h2>
             <table
@@ -2682,31 +4096,230 @@ exports[`Storyshots Button with new info 1`] = `
                   <th
                     className="css-d52hbj"
                   >
-                    propType
-                  </th>
-                  <th
+                    propType
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    required
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    default
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    disabled
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    label
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    yes
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    onClick
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
+                        }
+                      >
+                        onClick()
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    one
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    two
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    obj
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    shape
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
                     className="css-d52hbj"
                   >
-                    required
-                  </th>
-                  <th
+                    -
+                  </td>
+                  <td
                     className="css-d52hbj"
                   >
-                    default
-                  </th>
-                  <th
+                    -
+                  </td>
+                  <td
                     className="css-d52hbj"
-                  >
-                    description
-                  </th>
+                  />
                 </tr>
-              </thead>
-              <tbody>
                 <tr>
                   <td
                     className="css-1ygfcef"
                   >
-                    children
+                    arrayOf
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -2716,7 +4329,7 @@ exports[`Storyshots Button with new info 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    yes
+                    -
                   </td>
                   <td
                     className="css-d52hbj"
@@ -2731,7 +4344,7 @@ exports[`Storyshots Button with new info 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    isAmazing
+                    msg
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -2746,19 +4359,7 @@ exports[`Storyshots Button with new info 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    <span>
-                      {
-                      <span
-                        style={
-                          Object {
-                            "color": "#a11",
-                          }
-                        }
-                      >
-                        false
-                      </span>
-                      }
-                    </span>
+                    -
                   </td>
                   <td
                     className="css-d52hbj"
@@ -2768,7 +4369,7 @@ exports[`Storyshots Button with new info 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    age
+                    enm
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -2783,67 +4384,7 @@ exports[`Storyshots Button with new info 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    <span>
-                      {
-                      <span
-                        style={
-                          Object {
-                            "color": "#666",
-                          }
-                        }
-                      >
-                        {
-                        <span
-                          style={
-                            Object {
-                              "color": "#666",
-                            }
-                          }
-                        >
-                          isOld
-                        </span>
-                        : 
-                        <span>
-                          {
-                          <span
-                            style={
-                              Object {
-                                "color": "#a11",
-                              }
-                            }
-                          >
-                            false
-                          </span>
-                          }
-                        </span>
-                        , 
-                        <span
-                          style={
-                            Object {
-                              "color": "#666",
-                            }
-                          }
-                        >
-                          value
-                        </span>
-                        : 
-                        <span>
-                          {
-                          <span
-                            style={
-                              Object {
-                                "color": "#a11",
-                              }
-                            }
-                          >
-                            0
-                          </span>
-                          }
-                        </span>
-                        }
-                      </span>
-                      }
-                    </span>
+                    -
                   </td>
                   <td
                     className="css-d52hbj"
@@ -2853,7 +4394,7 @@ exports[`Storyshots Button with new info 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    title
+                    union
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -2868,18 +4409,7 @@ exports[`Storyshots Button with new info 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    <span
-                      style={
-                        Object {
-                          "color": "#22a",
-                          "wordBreak": "break-word",
-                        }
-                      }
-                    >
-                      "
-                      the best container ever
-                      "
-                    </span>
+                    -
                   </td>
                   <td
                     className="css-d52hbj"
@@ -2888,22 +4418,6 @@ exports[`Storyshots Button with new info 1`] = `
               </tbody>
             </table>
           </div>
-          <div>
-            <h2
-              style={
-                Object {
-                  "margin": "20px 0 0 0",
-                }
-              }
-            >
-              "
-              InfoButton
-              " Component
-            </h2>
-            <small>
-              No propTypes defined!
-            </small>
-          </div>
         </div>
       </div>
     </div>
@@ -2911,24 +4425,7 @@ exports[`Storyshots Button with new info 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button with notes 1`] = `
-<button
-  className="css-1yjiefr"
->
-  Check my notes in the notes panel
-</button>
-`;
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots Button with some info 1`] = `
+exports[`Storyshots Addon Info.React Docgen Comments from component declaration 1`] = `
 <div>
   <div
     style={
@@ -2938,33 +4435,12 @@ exports[`Storyshots Button with some info 1`] = `
       }
     }
   >
-    <div
-      title="the best container ever"
+    <button
+      disabled={false}
+      onClick={[Function]}
     >
-      click the 
-      <span
-        style={
-          Object {
-            "background": "rgb(34, 136, 204)",
-            "borderRadius": "0px 0px 0px 5px",
-            "color": "rgb(255, 255, 255)",
-            "fontFamily": "sans-serif",
-            "fontSize": 12,
-            "margin": 10,
-            "padding": "5px 15px",
-            "textDecoration": "none",
-          }
-        }
-      >
-         
-        Show Info
-         
-      </span>
-       label in top right for info about "
-      with some info
-      "
-      
-    </div>
+      Button
+    </button>
   </div>
   <a
     onClick={[Function]}
@@ -3067,7 +4543,7 @@ exports[`Storyshots Button with some info 1`] = `
               }
             }
           >
-            Button
+            Addon Info.React Docgen
           </h1>
           <h2
             style={
@@ -3079,7 +4555,7 @@ exports[`Storyshots Button with some info 1`] = `
               }
             }
           >
-            with some info
+            Comments from component declaration
           </h2>
         </div>
         <div
@@ -3099,20 +4575,7 @@ exports[`Storyshots Button with some info 1`] = `
               }
             }
           >
-            Use the 
-            <a
-              href="https://github.com/storybooks/storybook/tree/master/addons/info"
-              rel="noopener noreferrer"
-              style={
-                Object {
-                  "color": "#3498db",
-                }
-              }
-              target="_blank"
-            >
-              info addon
-            </a>
-             with its painful API.
+            Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
           </p>
         </div>
         <div>
@@ -3140,157 +4603,91 @@ exports[`Storyshots Button with some info 1`] = `
               }
             }
           >
-            <div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  Container
-                </span>
-                <span />
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &gt;
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  click the 
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  InfoButton
-                </span>
-                <span />
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  /&gt;
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
+            <div
+              style={
+                Object {
+                  "paddingLeft": 18,
+                  "paddingRight": 3,
                 }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                   label in top right for info about "
-                </span>
-              </div>
-              <div
+              }
+            >
+              <span
                 style={
                   Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  with some info
+                &lt;
+                BaseButton
+              </span>
+              <span>
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    onClick
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span>
+                        {
+                        <span
+                          style={
+                            Object {
+                              "color": "#170",
+                            }
+                          }
+                        >
+                          clicked()
+                        </span>
+                        }
+                      </span>
+                    </span>
+                  </span>
                 </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  "
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    label
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#22a",
+                            "wordBreak": "break-word",
+                          }
+                        }
+                      >
+                        "
+                        Button
+                        "
+                      </span>
+                    </span>
+                  </span>
+                   
                 </span>
-              </div>
-              <div
+              </span>
+              <span
                 style={
                   Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;/
-                  Container
-                  &gt;
-                </span>
-              </div>
+                /&gt;
+              </span>
             </div>
           </pre>
         </div>
@@ -3316,7 +4713,7 @@ exports[`Storyshots Button with some info 1`] = `
               }
             >
               "
-              Container
+              BaseButton
               " Component
             </h2>
             <table
@@ -3356,32 +4753,7 @@ exports[`Storyshots Button with some info 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    children
-                  </td>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    <span />
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    yes
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  >
-                    -
-                  </td>
-                  <td
-                    className="css-d52hbj"
-                  />
-                </tr>
-                <tr>
-                  <td
-                    className="css-1ygfcef"
-                  >
-                    isAmazing
+                    disabled
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -3418,7 +4790,7 @@ exports[`Storyshots Button with some info 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    age
+                    label
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -3428,72 +4800,12 @@ exports[`Storyshots Button with some info 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    -
+                    yes
                   </td>
                   <td
                     className="css-d52hbj"
                   >
-                    <span>
-                      {
-                      <span
-                        style={
-                          Object {
-                            "color": "#666",
-                          }
-                        }
-                      >
-                        {
-                        <span
-                          style={
-                            Object {
-                              "color": "#666",
-                            }
-                          }
-                        >
-                          isOld
-                        </span>
-                        : 
-                        <span>
-                          {
-                          <span
-                            style={
-                              Object {
-                                "color": "#a11",
-                              }
-                            }
-                          >
-                            false
-                          </span>
-                          }
-                        </span>
-                        , 
-                        <span
-                          style={
-                            Object {
-                              "color": "#666",
-                            }
-                          }
-                        >
-                          value
-                        </span>
-                        : 
-                        <span>
-                          {
-                          <span
-                            style={
-                              Object {
-                                "color": "#a11",
-                              }
-                            }
-                          >
-                            0
-                          </span>
-                          }
-                        </span>
-                        }
-                      </span>
-                      }
-                    </span>
+                    -
                   </td>
                   <td
                     className="css-d52hbj"
@@ -3503,7 +4815,7 @@ exports[`Storyshots Button with some info 1`] = `
                   <td
                     className="css-1ygfcef"
                   >
-                    title
+                    onClick
                   </td>
                   <td
                     className="css-1ygfcef"
@@ -3518,17 +4830,18 @@ exports[`Storyshots Button with some info 1`] = `
                   <td
                     className="css-d52hbj"
                   >
-                    <span
-                      style={
-                        Object {
-                          "color": "#22a",
-                          "wordBreak": "break-word",
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
                         }
+                      >
+                        onClick()
+                      </span>
                       }
-                    >
-                      "
-                      the best container ever
-                      "
                     </span>
                   </td>
                   <td
@@ -3538,351 +4851,9 @@ exports[`Storyshots Button with some info 1`] = `
               </tbody>
             </table>
           </div>
-          <div>
-            <h2
-              style={
-                Object {
-                  "margin": "20px 0 0 0",
-                }
-              }
-            >
-              "
-              InfoButton
-              " Component
-            </h2>
-            <small>
-              No propTypes defined!
-            </small>
-          </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 `;
-
-exports[`Storyshots Button with text 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Cells.Molecules.Atoms with some emoji2 1`] = `
-<button
-  className="css-1yjiefr"
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots Cells.Molecules.Atoms with text2 1`] = `
-<button
-  className="css-1yjiefr"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Cells/Molecules with some emoji 1`] = `
-<button
-  className="css-1yjiefr"
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots Cells/Molecules with text 1`] = `
-<button
-  className="css-1yjiefr"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Cells/Molecules.Atoms/simple with some emoji 1`] = `
-<button
-  className="css-1yjiefr"
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots Cells/Molecules.Atoms/simple with text 1`] = `
-<button
-  className="css-1yjiefr"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Cells/Molecules/Atoms.more with some emoji2 1`] = `
-<button
-  className="css-1yjiefr"
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = `
-<button
-  className="css-1yjiefr"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Some really long story kind description with text 1`] = `
-<div
-  style={
-    Object {
-      "alignItems": "center",
-      "bottom": 0,
-      "display": "flex",
-      "justifyContent": "center",
-      "left": 0,
-      "overflow": "auto",
-      "position": "fixed",
-      "right": 0,
-      "top": 0,
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "margin": "auto",
-      }
-    }
-  >
-    <button
-      className="css-1yjiefr"
-      onClick={[Function]}
-    >
-      Hello Button
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<article
-  className="css-1fqbdip"
->
-  <h1
-    className="css-nil"
-  >
-    Welcome to storybook
-  </h1>
-  <p>
-    This is a UI component dev environment for your app.
-  </p>
-  <p>
-    We've added some basic stories inside the
-     
-    <code
-      className="css-mteq83"
-    >
-      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
-      className="css-ca0824"
-      href="/"
-      onClick={[Function]}
-    >
-      stories
-    </a>
-     
-    for a component called
-     
-    <code
-      className="css-mteq83"
-    >
-      Button
-    </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 
-    <code
-      className="css-mteq83"
-    >
-      Button
-    </code>
-     stories located at 
-    <code
-      className="css-mteq83"
-    >
-      src/stories/index.js
-    </code>
-    .)
-  </p>
-  <p>
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    Have a look at the
-     
-    <a
-      className="css-ca0824"
-      href="https://storybook.js.org/basics/writing-stories"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      Writing Stories
-    </a>
-     
-    section in our documentation.
-  </p>
-  <p
-    className="css-bwdon3"
-  >
-    <b>
-      NOTE:
-    </b>
-    <br />
-    Have a look at the
-     
-    <code
-      className="css-mteq83"
-    >
-      .storybook/webpack.config.js
-    </code>
-     
-    to add webpack loaders and plugins you are using in this project.
-  </p>
-</article>
-`;
-
-exports[`Storyshots WithEvents Logger 1`] = `
-<div
-  style={
-    Object {
-      "color": "rgb(51, 51, 51)",
-      "fontFamily": "
-          -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
-          \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
-        ",
-      "padding": 20,
-    }
-  }
->
-  <h1>
-    Logger
-  </h1>
-  <dl />
-</div>
-`;
-
-exports[`Storyshots component.Button first 1`] = `
-<button>
-  first button
-</button>
-`;
-
-exports[`Storyshots component.Button second 1`] = `
-<button>
-  first second
-</button>
-`;
-
-exports[`Storyshots component.base.Link first 1`] = `
-<a>
-  first link
-</a>
-`;
-
-exports[`Storyshots component.base.Link second 1`] = `
-<a>
-  second link
-</a>
-`;
-
-exports[`Storyshots component.base.Span first 1`] = `
-<span>
-  first span
-</span>
-`;
-
-exports[`Storyshots component.base.Span second 1`] = `
-<span>
-  second span
-</span>
-`;
-
-exports[`Storyshots component.common.Div first 1`] = `
-<div>
-  first div
-</div>
-`;
-
-exports[`Storyshots component.common.Div second 1`] = `
-<div>
-  second div
-</div>
-`;
-
-exports[`Storyshots component.common.Table first 1`] = `
-<table>
-  <tr>
-    <td>
-      first table
-    </td>
-  </tr>
-</table>
-`;
-
-exports[`Storyshots component.common.Table second 1`] = `
-<table>
-  <tr>
-    <td>
-      first table
-    </td>
-  </tr>
-</table>
-`;
-
-exports[`Storyshots withNotes with a button and some emoji 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots withNotes with old API 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots withNotes with some emoji 1`] = `
-<p>
-  🤔😳😯😮
-</p>
-`;
-
-exports[`Storyshots withNotes with some text 1`] = `
-<div>
-  Hello guys
-</div>
-`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..c009dcd4f368
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Knobs.withKnobs triggers actions via button 1`] = `
+<div>
+  <p>
+    Hit the knob load button and it should trigger an async load after a short delay
+  </p>
+  <p>
+    No items loaded
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon Knobs.withKnobs tweaks static values 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "#ffff00",
+      "border": "3px solid #ff00ff",
+      "padding": "10px",
+    }
+  }
+>
+  <p>
+    My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
+  </p>
+  <p>
+    My birthday is: 
+    January 20, 2017
+  </p>
+  <p>
+    My wallet contains: $
+    12.50
+  </p>
+  <p>
+    In my backpack, I have:
+  </p>
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  <p>
+    Nice to meet you!
+  </p>
+  <hr />
+  <p>
+    PS. My shirt pocket contains: 
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon Knobs.withKnobsOptions triggers actions via button with debounce delay 1`] = `
+<div>
+  <p>
+    Hit the knob load button and it should trigger an async load after a short delay
+  </p>
+  <p>
+    No items loaded
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon Knobs.withKnobsOptions tweaks static values with debounce delay 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "#ffff00",
+      "border": "3px solid #ff00ff",
+      "padding": "10px",
+    }
+  }
+>
+  <p>
+    If you are encountering performance issues with state updating too often, use withKnobsOptions to debounce changes.
+  </p>
+  <p>
+    My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
+  </p>
+  <p>
+    My birthday is: 
+    January 20, 2017
+  </p>
+  <p>
+    My wallet contains: $
+    12.50
+  </p>
+  <p>
+    In my backpack, I have:
+  </p>
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  <p>
+    Nice to meet you!
+  </p>
+  <hr />
+  <p>
+    PS. My shirt pocket contains: 
+  </p>
+</div>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
new file mode 100644
index 000000000000..7cc460716147
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Notes using deprecated API 1`] = `
+<button
+  disabled={false}
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Addon Notes withNotes 1`] = `
+<button
+  disabled={false}
+  onClick={[Function]}
+>
+  Button with notes - check the notes panel for details
+</button>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
new file mode 100644
index 000000000000..6a8cc30228d7
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -0,0 +1,1792 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App full app 1`] = `
+<div
+  className="App"
+>
+  <div
+    className="App-header"
+  >
+    <img
+      alt="logo"
+      className="App-logo"
+      src="file-stub"
+    />
+    <h2>
+      Welcome to React
+    </h2>
+  </div>
+  <p
+    className="App-intro"
+  >
+    To get started, edit 
+    <code>
+      src/App.js
+    </code>
+     and save to reload.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Button addons composition 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div>
+      click the 
+      <span
+        style={
+          Object {
+            "background": "rgb(34, 136, 204)",
+            "borderRadius": "0px 0px 0px 5px",
+            "color": "rgb(255, 255, 255)",
+            "fontFamily": "sans-serif",
+            "fontSize": 12,
+            "margin": 10,
+            "padding": "5px 15px",
+            "textDecoration": "none",
+          }
+        }
+      >
+         
+        Show Info
+         
+      </span>
+       label in top right for info about "
+      addons composition
+      "
+    </div>
+  </div>
+  <a
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "background": "#28c",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "textDecoration": "none",
+        "top": 0,
+      }
+    }
+    tabIndex="0"
+  >
+    Show Info
+  </a>
+  <div
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
+  >
+    <a
+      onClick={[Function]}
+      role="button"
+      style={
+        Object {
+          "background": "#28c",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "textDecoration": "none",
+          "top": 0,
+        }
+      }
+      tabIndex="0"
+    >
+      ×
+    </a>
+    <div
+      style={undefined}
+    >
+      <div
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Button
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            addons composition
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            see Notes panel for composition info
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  div
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                />
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  click the 
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  InfoButton
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                   label in top right for info about "
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  addons composition
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  "
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;/
+                  div
+                  &gt;
+                </span>
+              </div>
+            </div>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              InfoButton
+              " Component
+            </h2>
+            <small>
+              No propTypes defined!
+            </small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Button with new info 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      title="the best container ever"
+    >
+      click the 
+      <span
+        style={
+          Object {
+            "background": "rgb(34, 136, 204)",
+            "borderRadius": "0px 0px 0px 5px",
+            "color": "rgb(255, 255, 255)",
+            "fontFamily": "sans-serif",
+            "fontSize": 12,
+            "margin": 10,
+            "padding": "5px 15px",
+            "textDecoration": "none",
+          }
+        }
+      >
+         
+        Show Info
+         
+      </span>
+       label in top right for info about "
+      with new info
+      "
+      
+    </div>
+  </div>
+  <a
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "background": "#28c",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "textDecoration": "none",
+        "top": 0,
+      }
+    }
+    tabIndex="0"
+  >
+    Show Info
+  </a>
+  <div
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
+  >
+    <a
+      onClick={[Function]}
+      role="button"
+      style={
+        Object {
+          "background": "#28c",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "textDecoration": "none",
+          "top": 0,
+        }
+      }
+      tabIndex="0"
+    >
+      ×
+    </a>
+    <div
+      style={undefined}
+    >
+      <div
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Button
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            with new info
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            Use the 
+            <a
+              href="https://github.com/storybooks/storybook/tree/master/addons/info"
+              rel="noopener noreferrer"
+              style={
+                Object {
+                  "color": "#3498db",
+                }
+              }
+              target="_blank"
+            >
+              info addon
+            </a>
+             with its new painless API.
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  Container
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                />
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  click the 
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  InfoButton
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                   label in top right for info about "
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  with new info
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  "
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;/
+                  Container
+                  &gt;
+                </span>
+              </div>
+            </div>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              Container
+              " Component
+            </h2>
+            <table
+              className="css-1ytzlk7"
+            >
+              <thead>
+                <tr>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    property
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    propType
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    required
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    default
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    children
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    yes
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    isAmazing
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    age
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        <span
+                          style={
+                            Object {
+                              "color": "#666",
+                            }
+                          }
+                        >
+                          isOld
+                        </span>
+                        : 
+                        <span>
+                          {
+                          <span
+                            style={
+                              Object {
+                                "color": "#a11",
+                              }
+                            }
+                          >
+                            false
+                          </span>
+                          }
+                        </span>
+                        , 
+                        <span
+                          style={
+                            Object {
+                              "color": "#666",
+                            }
+                          }
+                        >
+                          value
+                        </span>
+                        : 
+                        <span>
+                          {
+                          <span
+                            style={
+                              Object {
+                                "color": "#a11",
+                              }
+                            }
+                          >
+                            0
+                          </span>
+                          }
+                        </span>
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    title
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span
+                      style={
+                        Object {
+                          "color": "#22a",
+                          "wordBreak": "break-word",
+                        }
+                      }
+                    >
+                      "
+                      the best container ever
+                      "
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              InfoButton
+              " Component
+            </h2>
+            <small>
+              No propTypes defined!
+            </small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Button with notes 1`] = `
+<button
+  className="css-1yjiefr"
+>
+  Check my notes in the notes panel
+</button>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Button with some info 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      title="the best container ever"
+    >
+      click the 
+      <span
+        style={
+          Object {
+            "background": "rgb(34, 136, 204)",
+            "borderRadius": "0px 0px 0px 5px",
+            "color": "rgb(255, 255, 255)",
+            "fontFamily": "sans-serif",
+            "fontSize": 12,
+            "margin": 10,
+            "padding": "5px 15px",
+            "textDecoration": "none",
+          }
+        }
+      >
+         
+        Show Info
+         
+      </span>
+       label in top right for info about "
+      with some info
+      "
+      
+    </div>
+  </div>
+  <a
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "background": "#28c",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "textDecoration": "none",
+        "top": 0,
+      }
+    }
+    tabIndex="0"
+  >
+    Show Info
+  </a>
+  <div
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
+  >
+    <a
+      onClick={[Function]}
+      role="button"
+      style={
+        Object {
+          "background": "#28c",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "textDecoration": "none",
+          "top": 0,
+        }
+      }
+      tabIndex="0"
+    >
+      ×
+    </a>
+    <div
+      style={undefined}
+    >
+      <div
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Button
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            with some info
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            Use the 
+            <a
+              href="https://github.com/storybooks/storybook/tree/master/addons/info"
+              rel="noopener noreferrer"
+              style={
+                Object {
+                  "color": "#3498db",
+                }
+              }
+              target="_blank"
+            >
+              info addon
+            </a>
+             with its painful API.
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  Container
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  click the 
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  InfoButton
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                   label in top right for info about "
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  with some info
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  "
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;/
+                  Container
+                  &gt;
+                </span>
+              </div>
+            </div>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              Container
+              " Component
+            </h2>
+            <table
+              className="css-1ytzlk7"
+            >
+              <thead>
+                <tr>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    property
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    propType
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    required
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    default
+                  </th>
+                  <th
+                    className="css-d52hbj"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    children
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    yes
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    isAmazing
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    age
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        <span
+                          style={
+                            Object {
+                              "color": "#666",
+                            }
+                          }
+                        >
+                          isOld
+                        </span>
+                        : 
+                        <span>
+                          {
+                          <span
+                            style={
+                              Object {
+                                "color": "#a11",
+                              }
+                            }
+                          >
+                            false
+                          </span>
+                          }
+                        </span>
+                        , 
+                        <span
+                          style={
+                            Object {
+                              "color": "#666",
+                            }
+                          }
+                        >
+                          value
+                        </span>
+                        : 
+                        <span>
+                          {
+                          <span
+                            style={
+                              Object {
+                                "color": "#a11",
+                              }
+                            }
+                          >
+                            0
+                          </span>
+                          }
+                        </span>
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    title
+                  </td>
+                  <td
+                    className="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  >
+                    <span
+                      style={
+                        Object {
+                          "color": "#22a",
+                          "wordBreak": "break-word",
+                        }
+                      }
+                    >
+                      "
+                      the best container ever
+                      "
+                    </span>
+                  </td>
+                  <td
+                    className="css-d52hbj"
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              InfoButton
+              " Component
+            </h2>
+            <small>
+              No propTypes defined!
+            </small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Some really long story kind description with text 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "bottom": 0,
+      "display": "flex",
+      "justifyContent": "center",
+      "left": 0,
+      "overflow": "auto",
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "margin": "auto",
+      }
+    }
+  >
+    <button
+      className="css-1yjiefr"
+      onClick={[Function]}
+    >
+      Hello Button
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots WithEvents Logger 1`] = `
+<div
+  style={
+    Object {
+      "color": "rgb(51, 51, 51)",
+      "fontFamily": "
+          -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
+          \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
+        ",
+      "padding": 20,
+    }
+  }
+>
+  <h1>
+    Logger
+  </h1>
+  <dl />
+</div>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/storybook-components.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/storybook-components.stories.storyshot
similarity index 100%
rename from examples/cra-kitchen-sink/src/stories/__snapshots__/storybook-components.storyshot
rename to examples/cra-kitchen-sink/src/stories/__snapshots__/storybook-components.stories.storyshot
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot
new file mode 100644
index 000000000000..bc6abe86a6e7
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<article
+  className="css-1fqbdip"
+>
+  <h1
+    className="css-nil"
+  >
+    Welcome to storybook
+  </h1>
+  <p>
+    This is a UI component dev environment for your app.
+  </p>
+  <p>
+    We've added some basic stories inside the
+     
+    <code
+      className="css-mteq83"
+    >
+      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
+      className="css-ca0824"
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      stories
+    </a>
+     
+    for a component called
+     
+    <code
+      className="css-mteq83"
+    >
+      Button
+    </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 
+    <code
+      className="css-mteq83"
+    >
+      Button
+    </code>
+     stories located at 
+    <code
+      className="css-mteq83"
+    >
+      src/stories/index.js
+    </code>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+     
+    <a
+      className="css-ca0824"
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Writing Stories
+    </a>
+     
+    section in our documentation.
+  </p>
+  <p
+    className="css-bwdon3"
+  >
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the
+     
+    <code
+      className="css-mteq83"
+    >
+      .storybook/webpack.config.js
+    </code>
+     
+    to add webpack loaders and plugins you are using in this project.
+  </p>
+</article>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/addon-info.stories.js b/examples/cra-kitchen-sink/src/stories/addon-info.stories.js
new file mode 100644
index 000000000000..0aec884b6d87
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/addon-info.stories.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import DocgenButton from '../components/DocgenButton';
+import FlowTypeButton from '../components/FlowTypeButton';
+import BaseButton from '../components/BaseButton';
+
+storiesOf('Addon Info.React Docgen', module)
+  .add(
+    'Comments from PropType declarations',
+    withInfo(
+      'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+    )(() => <DocgenButton onClick={action('clicked')} label="Docgen Button" />)
+  )
+  .add(
+    'Comments from Flow declarations',
+    withInfo(
+      'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+    )(() => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />)
+  )
+  .add(
+    'Comments from component declaration',
+    withInfo(
+      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
+    )(() => <BaseButton onClick={action('clicked')} label="Button" />)
+  );
+
+const markdownDescription = `
+#### You can use markdown in your withInfo() description.
+
+Sometimes you might want to manually include some code examples:
+~~~js
+const codeblock = [];
+~~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+`;
+
+storiesOf('Addon Info.Markdown', module).add(
+  'Displays Markdown in description',
+  withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
+);
+
+storiesOf('Addon Info.Options.inline', module).add(
+  'Inlines component inside story',
+  withInfo({
+    text: 'Component should be inlined between description and PropType table',
+    inline: true, // Displays info inline vs click button to view
+  })(() => <BaseButton label="Button" />)
+);
+
+storiesOf('Addon Info.Options.header', module).add(
+  'Shows or hides Info Addon header',
+  withInfo({
+    text: 'The Info Addon header should be hidden',
+    header: false, // Toggles display of header with component name and description
+  })(() => <BaseButton label="Button" />)
+);
+
+storiesOf('Addon Info.Options.source', module).add(
+  'Shows or hides Info Addon source',
+  withInfo({
+    text: 'The Info Addon source section should be hidden',
+    source: false, // Displays the source of story Component
+  })(() => <BaseButton label="Button" />)
+);
+
+storiesOf('Addon Info.Options.propTables', module).add(
+  'Shows additional component prop tables',
+  withInfo({
+    text: 'There should be a prop table added for a component not included in the story',
+    propTables: [FlowTypeButton],
+  })(() => <BaseButton label="Button" />)
+);
+
+storiesOf('Addon Info.Options.propTablesExclude', module).add(
+  'Exclude component from prop tables',
+  withInfo({
+    text: 'This can exclude extraneous components from being displayed in prop tables.',
+    propTablesExclude: [FlowTypeButton],
+  })(() => (
+    <div>
+      <BaseButton label="Button" />
+      <FlowTypeButton label="Flow Typed Button" />
+    </div>
+  ))
+);
+
+storiesOf('Addon Info.Options.styles', module).add(
+  'Change info styles // I think this is broken or I am using it wrong?',
+  withInfo({
+    styles: { backgroundColor: 'blue' },
+  })(() => <BaseButton label="Button" />)
+);
+
+storiesOf('Addon Info.Decorator', module)
+  .addDecorator((story, context) =>
+    withInfo('Info could be used as a global or local decorator as well.')(story)(context)
+  )
+  .add('Use Info as story decorator', () => <BaseButton label="Button" />);
diff --git a/examples/cra-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/cra-kitchen-sink/src/stories/addon-knobs.stories.js
new file mode 100644
index 000000000000..ce2b900e8234
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -0,0 +1,155 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import {
+  withKnobs,
+  withKnobsOptions,
+  text,
+  number,
+  boolean,
+  color,
+  select,
+  array,
+  date,
+  button,
+  object,
+} from '@storybook/addon-knobs/react';
+
+class AsyncItemLoader extends React.Component {
+  constructor() {
+    super();
+    this.state = { items: [] };
+  }
+
+  handleLoadItems() {
+    this.setState({
+      isLoading: true,
+      items: [],
+    });
+    setTimeout(() => this.setState({ items: ['pencil', 'pen', 'eraser'], isLoading: false }), 1500);
+  }
+
+  render() {
+    // this existing example seems like a react anti-pattern?
+    // perhaps for testing purposes only?
+    button('Load the items', () => this.handleLoadItems());
+
+    const { isLoading, items } = this.state;
+
+    if (isLoading) {
+      return <p>Loading data</p>;
+    } else if (!items.length) {
+      return <p>No items loaded</p>;
+    }
+    return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
+  }
+}
+
+storiesOf('Addon Knobs.withKnobs', module)
+  .addDecorator(withKnobs)
+  .add('tweaks static values', () => {
+    const name = text('Name', 'Storyteller');
+    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
+    const fruits = {
+      apple: 'Apple',
+      banana: 'Banana',
+      cherry: 'Cherry',
+    };
+    const fruit = select('Fruit', fruits, 'apple');
+    const dollars = number('Dollars', 12.5);
+
+    const backgroundColor = color('background', '#ffff00');
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const otherStyles = object('Styles', {
+      border: '3px solid #ff00ff',
+      padding: '10px',
+    });
+    const nice = boolean('Nice', true);
+
+    // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
+    const defaultBirthday = new Date('Jan 20 2017');
+    const birthday = date('Birthday', defaultBirthday);
+
+    const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
+    const style = { backgroundColor, ...otherStyles };
+    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+
+    return (
+      <div style={style}>
+        <p>{intro}</p>
+        <p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
+        <p>My wallet contains: ${dollars.toFixed(2)}</p>
+        <p>In my backpack, I have:</p>
+        <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
+        <p>{salutation}</p>
+        <hr />
+        <p>PS. My shirt pocket contains: </p>
+      </div>
+    );
+  })
+  .add('triggers actions via button', () => (
+    <div>
+      <p>Hit the knob load button and it should trigger an async load after a short delay</p>
+      <AsyncItemLoader />
+    </div>
+  ));
+
+storiesOf('Addon Knobs.withKnobsOptions', module)
+  .addDecorator(
+    withKnobsOptions({
+      debounce: { wait: 100, leading: boolean }, // Same as lodash debounce.
+      timestamps: true, // Doesn't emit events while user is typing.
+    })
+  )
+  .add('tweaks static values with debounce delay', () => {
+    const name = text('Name', 'Storyteller');
+    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
+    const fruits = {
+      apple: 'Apple',
+      banana: 'Banana',
+      cherry: 'Cherry',
+    };
+    const fruit = select('Fruit', fruits, 'apple');
+    const dollars = number('Dollars', 12.5);
+
+    const backgroundColor = color('background', '#ffff00');
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const otherStyles = object('Styles', {
+      border: '3px solid #ff00ff',
+      padding: '10px',
+    });
+    const nice = boolean('Nice', true);
+
+    // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
+    const defaultBirthday = new Date('Jan 20 2017');
+    const birthday = date('Birthday', defaultBirthday);
+
+    const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
+    const style = { backgroundColor, ...otherStyles };
+    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+
+    return (
+      <div style={style}>
+        <p>
+          If you are encountering performance issues with state updating too often, use
+          withKnobsOptions to debounce changes.
+        </p>
+        <p>{intro}</p>
+        <p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
+        <p>My wallet contains: ${dollars.toFixed(2)}</p>
+        <p>In my backpack, I have:</p>
+        <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
+        <p>{salutation}</p>
+        <hr />
+        <p>PS. My shirt pocket contains: </p>
+      </div>
+    );
+  })
+  .add('triggers actions via button with debounce delay', () => (
+    <div>
+      <p>Hit the knob load button and it should trigger an async load after a short delay</p>
+      <AsyncItemLoader />
+    </div>
+  ));
diff --git a/examples/cra-kitchen-sink/src/stories/addon-notes.stories.js b/examples/cra-kitchen-sink/src/stories/addon-notes.stories.js
new file mode 100644
index 000000000000..e27c7998de91
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/addon-notes.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { withNotes, WithNotes } from '@storybook/addon-notes';
+import { action } from '@storybook/addon-actions';
+import BaseButton from '../components/BaseButton';
+
+storiesOf('Addon Notes', module)
+  .add(
+    'withNotes',
+    withNotes(
+      'This is the notes for a button. This is helpful for adding details about a story in a separate panel.'
+    )(() => <BaseButton label="Button with notes - check the notes panel for details" />)
+  )
+  .add('using deprecated API', () => (
+    <WithNotes notes="Hello">
+      <BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />
+    </WithNotes>
+  ));
diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js
index 5d9983037f48..a40676394ae8 100644
--- a/examples/cra-kitchen-sink/src/stories/index.js
+++ b/examples/cra-kitchen-sink/src/stories/index.js
@@ -1,377 +1,377 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import EventEmiter from 'eventemitter3';
-
-import { storiesOf } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
-import { action } from '@storybook/addon-actions';
-import { withNotes, WithNotes } from '@storybook/addon-notes';
-import { LinkTo, linkTo, hrefTo } from '@storybook/addon-links';
-import WithEvents from '@storybook/addon-events';
-import {
-  withKnobs,
-  text,
-  number,
-  boolean,
-  color,
-  select,
-  array,
-  date,
-  button,
-  object,
-} from '@storybook/addon-knobs/react';
-import centered from '@storybook/addon-centered';
-import { withInfo } from '@storybook/addon-info';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-import App from '../App';
-import Logger from './Logger';
-import Container from './Container';
-import DocgenButton from '../components/DocgenButton';
-import FlowTypeButton from '../components/FlowTypeButton';
-import ImportedPropsButton from '../components/ImportedPropsButton';
-
-const EVENTS = {
-  TEST_EVENT_1: 'test-event-1',
-  TEST_EVENT_2: 'test-event-2',
-  TEST_EVENT_3: 'test-event-3',
-  TEST_EVENT_4: 'test-event-4',
-};
-
-const emiter = new EventEmiter();
-const emit = emiter.emit.bind(emiter);
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showKind="Button" />);
-
-const InfoButton = () => (
-  <span
-    style={{
-      fontFamily: 'sans-serif',
-      fontSize: 12,
-      textDecoration: 'none',
-      background: 'rgb(34, 136, 204)',
-      color: 'rgb(255, 255, 255)',
-      padding: '5px 15px',
-      margin: 10,
-      borderRadius: '0px 0px 0px 5px',
-    }}
-  >
-    {' '}
-    Show Info{' '}
-  </span>
-);
-
-class AsyncItemLoader extends React.Component {
-  constructor() {
-    super();
-    this.state = { items: [] };
-  }
-
-  loadItems() {
-    setTimeout(() => this.setState({ items: ['pencil', 'pen', 'eraser'] }), 1500);
-  }
-
-  render() {
-    button('Load the items', () => this.loadItems());
-    return this.props.children(this.state.items);
-  }
-}
-AsyncItemLoader.propTypes = { children: PropTypes.func.isRequired };
-
-storiesOf('Button', module)
-  .addDecorator(withKnobs)
-  .add('with text', () => (
-    <Button onClick={action('clicked')}>
-      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
-      Hello Button
-    </Button>
-  ))
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
-      😀 😎 👍 💯
-    </Button>
-  ))
-  .add('with notes', () => (
-    <WithNotes notes={'A very simple button'}>
-      <Button>
-        {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
-        Check my notes in the notes panel
-      </Button>
-    </WithNotes>
-  ))
-  .add('with knobs', () => {
-    setOptions({ selectedAddonPanel: 'storybooks/storybook-addon-knobs' });
-    const name = text('Name', 'Storyteller');
-    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
-    const fruits = {
-      apple: 'Apple',
-      banana: 'Banana',
-      cherry: 'Cherry',
-    };
-    const fruit = select('Fruit', fruits, 'apple');
-    const dollars = number('Dollars', 12.5);
-
-    // NOTE: color picker is currently broken
-    const backgroundColor = color('background', '#ffff00');
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const otherStyles = object('Styles', {
-      border: '3px solid #ff00ff',
-      padding: '10px',
-    });
-    const nice = boolean('Nice', true);
-    const children = object('Children', [
-      {
-        name: 'Jane',
-        age: 13,
-      },
-      {
-        name: 'John',
-        age: 8,
-      },
-    ]);
-
-    // NOTE: put this last because it currently breaks everything after it :D
-    const birthday = date('Birthday', new Date('Jan 20 2017'));
-
-    const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
-    const style = { backgroundColor, ...otherStyles };
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
-
-    return (
-      <div style={style}>
-        <p>{intro}</p>
-        <p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
-        <p>I have {children.length} children:</p>
-        <ol>
-          {children.map(child => (
-            <li key={child.name}>
-              {child.name}, {child.age} years old
-            </li>
-          ))}
-        </ol>
-        <p>My wallet contains: ${dollars.toFixed(2)}</p>
-        <p>In my backpack, I have:</p>
-        <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
-        <p>{salutation}</p>
-        <hr />
-        <p>PS. My shirt pocket contains: </p>
-        <AsyncItemLoader>
-          {loadedItems => {
-            if (!loadedItems.length) return <li>No items!</li>;
-            return <ul>{loadedItems.map(i => <li key={i}>{i}</li>)}</ul>;
-          }}
-        </AsyncItemLoader>
-      </div>
-    );
-  })
-  .addWithInfo(
-    'with some info',
-    'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.',
-    context => (
-      <Container>
-        click the <InfoButton /> label in top right for info about "{context.story}"
-      </Container>
-    )
-  )
-  .add(
-    'with new info',
-    withInfo(
-      'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.'
-    )(context => (
-      <Container>
-        {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })}
-        click the <InfoButton /> label in top right for info about "{context.story}"
-      </Container>
-    ))
-  )
-  .add(
-    'addons composition',
-    withInfo('see Notes panel for composition info')(
-      withNotes('Composition: Info(Notes())')(context => (
-        <div>
-          {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
-          click the <InfoButton /> label in top right for info about "{context.story}"
-        </div>
-      ))
-    )
-  );
-
-storiesOf('AddonLink.Link', module)
-  .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
-  .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
-
-storiesOf('AddonLink.Button', module)
-  .add('First', () => (
-    <button onClick={linkTo('AddonLink.Button', 'Second')}>Go to "Second"</button>
-  ))
-  .add('Second', () => (
-    <button onClick={linkTo('AddonLink.Button', 'First')}>Go to "First"</button>
-  ));
-
-storiesOf('AddonLink.Select', module)
-  .add('Index', () => (
-    <select value="Index" onChange={linkTo('AddonLink.Select', e => e.currentTarget.value)}>
-      <option>Index</option>
-      <option>First</option>
-      <option>Second</option>
-      <option>Third</option>
-    </select>
-  ))
-  .add('First', () => <LinkTo story="Index">Go back</LinkTo>)
-  .add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
-  .add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
-
-storiesOf('AddonLink.Href', module).add('log', () => {
-  hrefTo('AddonLink.Href', 'log').then(action('URL of this story'));
-
-  return <span>See action logger</span>;
-});
-
-storiesOf('AddonInfo.DocgenButton', module).addWithInfo('DocgenButton', 'Some Description', () => (
-  <DocgenButton onClick={action('clicked')} label="Docgen Button" />
-));
-
-storiesOf('AddonInfo.ImportedPropsButton', module).addWithInfo(
-  'ImportedPropsButton',
-  'Button with PropTypes imported from another file. Should fallback to using PropTypes for data.',
-  () => <ImportedPropsButton onClick={action('clicked')} label="Docgen Button" />
-);
-
-storiesOf('AddonInfo.FlowTypeButton', module).addWithInfo(
-  'FlowTypeButton',
-  'Some Description',
-  () => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
-);
-
-storiesOf('App', module).add('full app', () => <App />);
-
-storiesOf('Some really long story kind description', module)
-  .addDecorator(centered)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
-
-storiesOf('WithEvents', module)
-  .addDecorator(getStory => (
-    <WithEvents
-      emit={emit}
-      events={[
-        {
-          name: EVENTS.TEST_EVENT_1,
-          title: 'Test event 1',
-          payload: 0,
-        },
-        {
-          name: EVENTS.TEST_EVENT_2,
-          title: 'Test event 2',
-          payload: 'Test event 2',
-        },
-        {
-          name: EVENTS.TEST_EVENT_3,
-          title: 'Test event 3',
-          payload: {
-            string: 'value',
-            number: 123,
-            array: [1, 2, 3],
-            object: {
-              string: 'value',
-              number: 123,
-              array: [1, 2, 3],
-            },
-          },
-        },
-        {
-          name: EVENTS.TEST_EVENT_4,
-          title: 'Test event 4',
-          payload: [
-            {
-              string: 'value',
-              number: 123,
-              array: [1, 2, 3],
-            },
-            {
-              string: 'value',
-              number: 123,
-              array: [1, 2, 3],
-            },
-            {
-              string: 'value',
-              number: 123,
-              array: [1, 2, 3],
-            },
-          ],
-        },
-      ]}
-    >
-      {getStory()}
-    </WithEvents>
-  ))
-  .add('Logger', () => <Logger emiter={emiter} />);
-
-storiesOf('withNotes', module)
-  .add('with some text', withNotes('Hello guys')(() => <div>Hello guys</div>))
-  .add('with some emoji', withNotes('My notes on emojies')(() => <p>🤔😳😯😮</p>))
-  .add(
-    'with a button and some emoji',
-    withNotes('My notes on a button with emojies')(() => (
-      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
-    ))
-  )
-  .add('with old API', () => (
-    <WithNotes notes="Hello">
-      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
-    </WithNotes>
-  ));
-
-storiesOf('component.base.Link', module)
-  .addDecorator(withKnobs)
-  .add('first', () => <a>{text('firstLink', 'first link')}</a>)
-  .add('second', () => <a>{text('secondLink', 'second link')}</a>);
-
-storiesOf('component.base.Span', module)
-  .add('first', () => <span>first span</span>)
-  .add('second', () => <span>second span</span>);
-
-storiesOf('component.common.Div', module)
-  .add('first', () => <div>first div</div>)
-  .add('second', () => <div>second div</div>);
-
-storiesOf('component.common.Table', module)
-  .add('first', () => (
-    <table>
-      <tr>
-        <td>first table</td>
-      </tr>
-    </table>
-  ))
-  .add('second', () => (
-    <table>
-      <tr>
-        <td>first table</td>
-      </tr>
-    </table>
-  ));
-
-storiesOf('component.Button', module)
-  .add('first', () => <button>first button</button>)
-  .add('second', () => <button>first second</button>);
-
-// Atomic
-
-storiesOf('Cells/Molecules.Atoms/simple', module)
-  .addDecorator(withKnobs)
-  .add('with text', () => <Button>{text('buttonText', 'Hello Button')}</Button>)
-  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
-
-storiesOf('Cells/Molecules/Atoms.more', module)
-  .add('with text2', () => <Button>Hello Button</Button>)
-  .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
-
-storiesOf('Cells/Molecules', module)
-  .add('with text', () => <Button>Hello Button</Button>)
-  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
-
-storiesOf('Cells.Molecules.Atoms', module)
-  .add('with text2', () => <Button>Hello Button</Button>)
-  .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
+// import React from 'react';
+// import PropTypes from 'prop-types';
+// import EventEmiter from 'eventemitter3';
+
+// import { storiesOf } from '@storybook/react';
+// import { setOptions } from '@storybook/addon-options';
+// import { action } from '@storybook/addon-actions';
+// import { withNotes, WithNotes } from '@storybook/addon-notes';
+// import { LinkTo, linkTo, hrefTo } from '@storybook/addon-links';
+// import WithEvents from '@storybook/addon-events';
+// import {
+//   withKnobs,
+//   text,
+//   number,
+//   boolean,
+//   color,
+//   select,
+//   array,
+//   date,
+//   button,
+//   object,
+// } from '@storybook/addon-knobs/react';
+// import centered from '@storybook/addon-centered';
+// import { withInfo } from '@storybook/addon-info';
+
+// import { Button, Welcome } from '@storybook/react/demo';
+
+// import App from '../App';
+// import Logger from './Logger';
+// import Container from './Container';
+// import DocgenButton from '../components/DocgenButton';
+// import FlowTypeButton from '../components/FlowTypeButton';
+// import ImportedPropsButton from '../components/ImportedPropsButton';
+
+// const EVENTS = {
+//   TEST_EVENT_1: 'test-event-1',
+//   TEST_EVENT_2: 'test-event-2',
+//   TEST_EVENT_3: 'test-event-3',
+//   TEST_EVENT_4: 'test-event-4',
+// };
+
+// const emiter = new EventEmiter();
+// const emit = emiter.emit.bind(emiter);
+
+// storiesOf('Welcome', module).add('to Storybook', () => <Welcome showKind="Button" />);
+
+// const InfoButton = () => (
+//   <span
+//     style={{
+//       fontFamily: 'sans-serif',
+//       fontSize: 12,
+//       textDecoration: 'none',
+//       background: 'rgb(34, 136, 204)',
+//       color: 'rgb(255, 255, 255)',
+//       padding: '5px 15px',
+//       margin: 10,
+//       borderRadius: '0px 0px 0px 5px',
+//     }}
+//   >
+//     {' '}
+//     Show Info{' '}
+//   </span>
+// );
+
+// class AsyncItemLoader extends React.Component {
+//   constructor() {
+//     super();
+//     this.state = { items: [] };
+//   }
+
+//   loadItems() {
+//     setTimeout(() => this.setState({ items: ['pencil', 'pen', 'eraser'] }), 1500);
+//   }
+
+//   render() {
+//     button('Load the items', () => this.loadItems());
+//     return this.props.children(this.state.items);
+//   }
+// }
+// AsyncItemLoader.propTypes = { children: PropTypes.func.isRequired };
+
+// storiesOf('Button', module)
+//   .addDecorator(withKnobs)
+//   .add('with text', () => (
+//     <Button onClick={action('clicked')}>
+//       {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+//       Hello Button
+//     </Button>
+//   ))
+//   .add('with some emoji', () => (
+//     <Button onClick={action('clicked')}>
+//       {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+//       😀 😎 👍 💯
+//     </Button>
+//   ))
+//   .add('with notes', () => (
+//     <WithNotes notes={'A very simple button'}>
+//       <Button>
+//         {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
+//         Check my notes in the notes panel
+//       </Button>
+//     </WithNotes>
+//   ))
+//   .add('with knobs', () => {
+//     setOptions({ selectedAddonPanel: 'storybooks/storybook-addon-knobs' });
+//     const name = text('Name', 'Storyteller');
+//     const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
+//     const fruits = {
+//       apple: 'Apple',
+//       banana: 'Banana',
+//       cherry: 'Cherry',
+//     };
+//     const fruit = select('Fruit', fruits, 'apple');
+//     const dollars = number('Dollars', 12.5);
+
+//     // NOTE: color picker is currently broken
+//     const backgroundColor = color('background', '#ffff00');
+//     const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+//     const otherStyles = object('Styles', {
+//       border: '3px solid #ff00ff',
+//       padding: '10px',
+//     });
+//     const nice = boolean('Nice', true);
+//     const children = object('Children', [
+//       {
+//         name: 'Jane',
+//         age: 13,
+//       },
+//       {
+//         name: 'John',
+//         age: 8,
+//       },
+//     ]);
+
+//     // NOTE: put this last because it currently breaks everything after it :D
+//     const birthday = date('Birthday', new Date('Jan 20 2017'));
+
+//     const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
+//     const style = { backgroundColor, ...otherStyles };
+//     const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+//     const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+
+//     return (
+//       <div style={style}>
+//         <p>{intro}</p>
+//         <p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
+//         <p>I have {children.length} children:</p>
+//         <ol>
+//           {children.map(child => (
+//             <li key={child.name}>
+//               {child.name}, {child.age} years old
+//             </li>
+//           ))}
+//         </ol>
+//         <p>My wallet contains: ${dollars.toFixed(2)}</p>
+//         <p>In my backpack, I have:</p>
+//         <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
+//         <p>{salutation}</p>
+//         <hr />
+//         <p>PS. My shirt pocket contains: </p>
+//         <AsyncItemLoader>
+//           {loadedItems => {
+//             if (!loadedItems.length) return <li>No items!</li>;
+//             return <ul>{loadedItems.map(i => <li key={i}>{i}</li>)}</ul>;
+//           }}
+//         </AsyncItemLoader>
+//       </div>
+//     );
+//   })
+//   .addWithInfo(
+//     'with some info',
+//     'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.',
+//     context => (
+//       <Container>
+//         click the <InfoButton /> label in top right for info about "{context.story}"
+//       </Container>
+//     )
+//   )
+//   .add(
+//     'with new info',
+//     withInfo(
+//       'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.'
+//     )(context => (
+//       <Container>
+//         {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })}
+//         click the <InfoButton /> label in top right for info about "{context.story}"
+//       </Container>
+//     ))
+//   )
+//   .add(
+//     'addons composition',
+//     withInfo('see Notes panel for composition info')(
+//       withNotes('Composition: Info(Notes())')(context => (
+//         <div>
+//           {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
+//           click the <InfoButton /> label in top right for info about "{context.story}"
+//         </div>
+//       ))
+//     )
+//   );
+
+// storiesOf('AddonLink.Link', module)
+//   .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
+//   .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
+
+// storiesOf('AddonLink.Button', module)
+//   .add('First', () => (
+//     <button onClick={linkTo('AddonLink.Button', 'Second')}>Go to "Second"</button>
+//   ))
+//   .add('Second', () => (
+//     <button onClick={linkTo('AddonLink.Button', 'First')}>Go to "First"</button>
+//   ));
+
+// storiesOf('AddonLink.Select', module)
+//   .add('Index', () => (
+//     <select value="Index" onChange={linkTo('AddonLink.Select', e => e.currentTarget.value)}>
+//       <option>Index</option>
+//       <option>First</option>
+//       <option>Second</option>
+//       <option>Third</option>
+//     </select>
+//   ))
+//   .add('First', () => <LinkTo story="Index">Go back</LinkTo>)
+//   .add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
+//   .add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
+
+// storiesOf('AddonLink.Href', module).add('log', () => {
+//   hrefTo('AddonLink.Href', 'log').then(action('URL of this story'));
+
+//   return <span>See action logger</span>;
+// });
+
+// storiesOf('AddonInfo.DocgenButton', module).addWithInfo('DocgenButton', 'Some Description', () => (
+//   <DocgenButton onClick={action('clicked')} label="Docgen Button" />
+// ));
+
+// storiesOf('AddonInfo.ImportedPropsButton', module).addWithInfo(
+//   'ImportedPropsButton',
+//   'Button with PropTypes imported from another file. Should fallback to using PropTypes for data.',
+//   () => <ImportedPropsButton onClick={action('clicked')} label="Docgen Button" />
+// );
+
+// storiesOf('AddonInfo.FlowTypeButton', module).addWithInfo(
+//   'FlowTypeButton',
+//   'Some Description',
+//   () => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
+// );
+
+// storiesOf('App', module).add('full app', () => <App />);
+
+// storiesOf('Some really long story kind description', module)
+//   .addDecorator(centered)
+//   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
+
+// storiesOf('WithEvents', module)
+//   .addDecorator(getStory => (
+//     <WithEvents
+//       emit={emit}
+//       events={[
+//         {
+//           name: EVENTS.TEST_EVENT_1,
+//           title: 'Test event 1',
+//           payload: 0,
+//         },
+//         {
+//           name: EVENTS.TEST_EVENT_2,
+//           title: 'Test event 2',
+//           payload: 'Test event 2',
+//         },
+//         {
+//           name: EVENTS.TEST_EVENT_3,
+//           title: 'Test event 3',
+//           payload: {
+//             string: 'value',
+//             number: 123,
+//             array: [1, 2, 3],
+//             object: {
+//               string: 'value',
+//               number: 123,
+//               array: [1, 2, 3],
+//             },
+//           },
+//         },
+//         {
+//           name: EVENTS.TEST_EVENT_4,
+//           title: 'Test event 4',
+//           payload: [
+//             {
+//               string: 'value',
+//               number: 123,
+//               array: [1, 2, 3],
+//             },
+//             {
+//               string: 'value',
+//               number: 123,
+//               array: [1, 2, 3],
+//             },
+//             {
+//               string: 'value',
+//               number: 123,
+//               array: [1, 2, 3],
+//             },
+//           ],
+//         },
+//       ]}
+//     >
+//       {getStory()}
+//     </WithEvents>
+//   ))
+//   .add('Logger', () => <Logger emiter={emiter} />);
+
+// storiesOf('withNotes', module)
+//   .add('with some text', withNotes('Hello guys')(() => <div>Hello guys</div>))
+//   .add('with some emoji', withNotes('My notes on emojies')(() => <p>🤔😳😯😮</p>))
+//   .add(
+//     'with a button and some emoji',
+//     withNotes('My notes on a button with emojies')(() => (
+//       <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+//     ))
+//   )
+//   .add('with old API', () => (
+//     <WithNotes notes="Hello">
+//       <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+//     </WithNotes>
+//   ));
+
+// storiesOf('component.base.Link', module)
+//   .addDecorator(withKnobs)
+//   .add('first', () => <a>{text('firstLink', 'first link')}</a>)
+//   .add('second', () => <a>{text('secondLink', 'second link')}</a>);
+
+// storiesOf('component.base.Span', module)
+//   .add('first', () => <span>first span</span>)
+//   .add('second', () => <span>second span</span>);
+
+// storiesOf('component.common.Div', module)
+//   .add('first', () => <div>first div</div>)
+//   .add('second', () => <div>second div</div>);
+
+// storiesOf('component.common.Table', module)
+//   .add('first', () => (
+//     <table>
+//       <tr>
+//         <td>first table</td>
+//       </tr>
+//     </table>
+//   ))
+//   .add('second', () => (
+//     <table>
+//       <tr>
+//         <td>first table</td>
+//       </tr>
+//     </table>
+//   ));
+
+// storiesOf('component.Button', module)
+//   .add('first', () => <button>first button</button>)
+//   .add('second', () => <button>first second</button>);
+
+// // Atomic
+
+// storiesOf('Cells/Molecules.Atoms/simple', module)
+//   .addDecorator(withKnobs)
+//   .add('with text', () => <Button>{text('buttonText', 'Hello Button')}</Button>)
+//   .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
+
+// storiesOf('Cells/Molecules/Atoms.more', module)
+//   .add('with text2', () => <Button>Hello Button</Button>)
+//   .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
+
+// storiesOf('Cells/Molecules', module)
+//   .add('with text', () => <Button>Hello Button</Button>)
+//   .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
+
+// storiesOf('Cells.Molecules.Atoms', module)
+//   .add('with text2', () => <Button>Hello Button</Button>)
+//   .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
new file mode 100644
index 000000000000..00b11bd18da8
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import EventEmiter from 'eventemitter3';
+
+import { storiesOf } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+import { action } from '@storybook/addon-actions';
+import { withNotes, WithNotes } from '@storybook/addon-notes';
+import WithEvents from '@storybook/addon-events';
+import centered from '@storybook/addon-centered';
+import { withInfo } from '@storybook/addon-info';
+import { Button } from '@storybook/react/demo';
+
+import App from '../App';
+import Logger from './Logger';
+import Container from './Container';
+
+const EVENTS = {
+  TEST_EVENT_1: 'test-event-1',
+  TEST_EVENT_2: 'test-event-2',
+  TEST_EVENT_3: 'test-event-3',
+  TEST_EVENT_4: 'test-event-4',
+};
+
+const emiter = new EventEmiter();
+const emit = emiter.emit.bind(emiter);
+
+const InfoButton = () => (
+  <span
+    style={{
+      fontFamily: 'sans-serif',
+      fontSize: 12,
+      textDecoration: 'none',
+      background: 'rgb(34, 136, 204)',
+      color: 'rgb(255, 255, 255)',
+      padding: '5px 15px',
+      margin: 10,
+      borderRadius: '0px 0px 0px 5px',
+    }}
+  >
+    {' '}
+    Show Info{' '}
+  </span>
+);
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>
+      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+      Hello Button
+    </Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+      😀 😎 👍 💯
+    </Button>
+  ))
+  .add('with notes', () => (
+    // deprecated usage
+    <WithNotes notes={'A very simple button'}>
+      <Button>
+        {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
+        Check my notes in the notes panel
+      </Button>
+    </WithNotes>
+  ))
+  .addWithInfo(
+    'with some info',
+    'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.',
+    context => (
+      <Container>
+        click the <InfoButton /> label in top right for info about "{context.story}"
+      </Container>
+    )
+  )
+  .add(
+    'with new info',
+    withInfo(
+      'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.'
+    )(context => (
+      <Container>
+        {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })}
+        click the <InfoButton /> label in top right for info about "{context.story}"
+      </Container>
+    ))
+  )
+  .add(
+    'addons composition',
+    withInfo('see Notes panel for composition info')(
+      withNotes('Composition: Info(Notes())')(context => (
+        <div>
+          {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
+          click the <InfoButton /> label in top right for info about "{context.story}"
+        </div>
+      ))
+    )
+  );
+
+storiesOf('App', module).add('full app', () => <App />);
+
+storiesOf('Some really long story kind description', module)
+  .addDecorator(centered)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
+
+storiesOf('WithEvents', module)
+  .addDecorator(getStory => (
+    <WithEvents
+      emit={emit}
+      events={[
+        {
+          name: EVENTS.TEST_EVENT_1,
+          title: 'Test event 1',
+          payload: 0,
+        },
+        {
+          name: EVENTS.TEST_EVENT_2,
+          title: 'Test event 2',
+          payload: 'Test event 2',
+        },
+        {
+          name: EVENTS.TEST_EVENT_3,
+          title: 'Test event 3',
+          payload: {
+            string: 'value',
+            number: 123,
+            array: [1, 2, 3],
+            object: {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          },
+        },
+        {
+          name: EVENTS.TEST_EVENT_4,
+          title: 'Test event 4',
+          payload: [
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          ],
+        },
+      ]}
+    >
+      {getStory()}
+    </WithEvents>
+  ))
+  .add('Logger', () => <Logger emiter={emiter} />);
diff --git a/examples/cra-kitchen-sink/src/stories/storybook-components.js b/examples/cra-kitchen-sink/src/stories/storybook-components.stories.js
similarity index 100%
rename from examples/cra-kitchen-sink/src/stories/storybook-components.js
rename to examples/cra-kitchen-sink/src/stories/storybook-components.stories.js
diff --git a/examples/cra-kitchen-sink/src/stories/welcome.js b/examples/cra-kitchen-sink/src/stories/welcome.js
new file mode 100644
index 000000000000..9610f12d04e9
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/welcome.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Welcome } from '@storybook/react/demo';
+import { storiesOf } from '@storybook/react';
+import { linkTo } from '@storybook/addon-links';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
diff --git a/examples/crna-kitchen-sink/app.json b/examples/crna-kitchen-sink/app.json
index 150dcb6e1a82..dc020d30f0d7 100644
--- a/examples/crna-kitchen-sink/app.json
+++ b/examples/crna-kitchen-sink/app.json
@@ -1,5 +1,5 @@
 {
   "expo": {
-    "sdkVersion": "19.0.0"
+    "sdkVersion": "22.0.0"
   }
 }
diff --git a/examples/crna-kitchen-sink/package.json b/examples/crna-kitchen-sink/package.json
index 7553a83afc05..8d4a33c03459 100644
--- a/examples/crna-kitchen-sink/package.json
+++ b/examples/crna-kitchen-sink/package.json
@@ -9,14 +9,15 @@
     "@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
     "@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",
     "@storybook/addons": "file:../../packs/storybook-addons.tgz",
-    "@storybook/channels": "file:../../packs/storybook-channels.tgz",
     "@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
+    "@storybook/channels": "file:../../packs/storybook-channels.tgz",
     "@storybook/components": "file:../../packs/storybook-components.tgz",
     "@storybook/react-native": "file:../../packs/storybook-react-native.tgz",
     "@storybook/ui": "file:../../packs/storybook-ui.tgz",
+    "jest-expo": "^22.0.0",
     "react-native-scripts": "1.1.0",
-    "jest-expo": "19.0.0",
-    "react-test-renderer": "16.0.0-alpha.12"
+    "react-test-renderer": "~16.0.0",
+    "webpack": "^3.8.1"
   },
   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
@@ -31,10 +32,9 @@
     "preset": "jest-expo"
   },
   "dependencies": {
-    "expo": "^19.0.0",
-    "prop-types": "^15.6.0",
-    "react": "16.0.0-alpha.12",
-    "react-native": "0.46.1",
-    "webpack": "^2.5.1 || ^3.0.0"
+    "expo": "^22.0.0",
+    "prop-types": "^15.5.0",
+    "react": "~16.0.0",
+    "react-native": "~0.49.3"
   }
 }
diff --git a/examples/react-native-vanilla/__tests__/__snapshots__/storyshots.js.snap b/examples/react-native-vanilla/__tests__/__snapshots__/storyshots.js.snap
index 6698ac5b4e2e..f3538f8fcfd3 100644
--- a/examples/react-native-vanilla/__tests__/__snapshots__/storyshots.js.snap
+++ b/examples/react-native-vanilla/__tests__/__snapshots__/storyshots.js.snap
@@ -19,6 +19,7 @@ exports[`Storyshots Button with some emoji 1`] = `
     hasTVPreferredFocus={undefined}
     hitSlop={undefined}
     isTVSelectable={true}
+    nativeID={undefined}
     onLayout={undefined}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -40,6 +41,7 @@ exports[`Storyshots Button with some emoji 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
+      disabled={false}
       ellipsizeMode="tail"
     >
       😀 😎 👍 💯
@@ -67,6 +69,7 @@ exports[`Storyshots Button with text 1`] = `
     hasTVPreferredFocus={undefined}
     hitSlop={undefined}
     isTVSelectable={true}
+    nativeID={undefined}
     onLayout={undefined}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -88,6 +91,7 @@ exports[`Storyshots Button with text 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
+      disabled={false}
       ellipsizeMode="tail"
     >
       Hello Button
@@ -110,6 +114,7 @@ exports[`Storyshots Knobs with knobs 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
+    disabled={false}
     ellipsizeMode="tail"
   >
     My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
@@ -117,6 +122,7 @@ exports[`Storyshots Knobs with knobs 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
+    disabled={false}
     ellipsizeMode="tail"
   >
     My birthday is: 
@@ -125,6 +131,7 @@ exports[`Storyshots Knobs with knobs 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
+    disabled={false}
     ellipsizeMode="tail"
   >
     My wallet contains: $
@@ -133,6 +140,7 @@ exports[`Storyshots Knobs with knobs 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
+    disabled={false}
     ellipsizeMode="tail"
   >
     In my backpack, I have:
@@ -141,6 +149,7 @@ exports[`Storyshots Knobs with knobs 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
+      disabled={false}
       ellipsizeMode="tail"
     >
       Laptop
@@ -148,6 +157,7 @@ exports[`Storyshots Knobs with knobs 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
+      disabled={false}
       ellipsizeMode="tail"
     >
       Book
@@ -155,6 +165,7 @@ exports[`Storyshots Knobs with knobs 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
+      disabled={false}
       ellipsizeMode="tail"
     >
       Whiskey
@@ -163,6 +174,7 @@ exports[`Storyshots Knobs with knobs 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
+    disabled={false}
     ellipsizeMode="tail"
   >
     Nice to meet you!
@@ -183,6 +195,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
+    disabled={false}
     ellipsizeMode="tail"
     style={
       Object {
@@ -196,6 +209,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
+    disabled={false}
     ellipsizeMode="tail"
     style={
       Object {
@@ -210,6 +224,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
+    disabled={false}
     ellipsizeMode="tail"
     style={
       Object {
diff --git a/examples/react-native-vanilla/package.json b/examples/react-native-vanilla/package.json
index 4f7befdc0822..d763cba5b934 100644
--- a/examples/react-native-vanilla/package.json
+++ b/examples/react-native-vanilla/package.json
@@ -3,20 +3,20 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "start": "node node_modules/react-native/local-cli/cli.js run-ios",
     "test": "jest",
     "storybook": "storybook start -p 7007"
   },
   "dependencies": {
     "prop-types": "^15.6.0",
-    "react": "16.0.0-alpha.6",
-    "react-native": "0.44.1"
+    "react": "~16.0.0",
+    "react-native": "~0.49.3"
   },
   "devDependencies": {
     "babel-jest": "21.0.0",
     "babel-preset-react-native": "1.9.2",
     "jest": "^21.0.1",
-    "react-test-renderer": "16.0.0-alpha.6",
+    "react-test-renderer": "~16.0.0",
     "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
     "@storybook/addon-knobs": "file:../../packs/storybook-addon-knobs.tgz",
     "@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
diff --git a/examples/react-native-vanilla/storybook/index.js b/examples/react-native-vanilla/storybook/index.js
new file mode 100644
index 000000000000..f0513c5a8651
--- /dev/null
+++ b/examples/react-native-vanilla/storybook/index.js
@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index aeeb939de844..000325ce4299 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -17,9 +17,9 @@
     "babel-preset-vue": "^1.2.1",
     "cross-env": "^3.0.0",
     "css-loader": "^0.28.7",
-    "file-loader": "^0.11.2",
+    "file-loader": "^1.1.5",
     "vue-hot-reload-api": "^2.2.0",
-    "vue-loader": "^12.2.1",
+    "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.6.0",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "vue": "^2.5.2",
-    "vuex": "^2.5.0"
+    "vuex": "^3.0.0"
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
diff --git a/integration/__image_snapshots__/cra-kitchen-sink-snap.png b/integration/__image_snapshots__/cra-kitchen-sink-snap.png
index 60854eb09702..fd6bc256be53 100644
Binary files a/integration/__image_snapshots__/cra-kitchen-sink-snap.png and b/integration/__image_snapshots__/cra-kitchen-sink-snap.png differ
diff --git a/integration/examples.test.js b/integration/examples.test.js
index 8912f6dff5e1..cdafd0f7411c 100644
--- a/integration/examples.test.js
+++ b/integration/examples.test.js
@@ -13,32 +13,29 @@ const examples = [
 
 examples.forEach(({ name, port }) => {
   let browser = puppeteer.launch();
+  let page;
 
   describe('sandboxes', () => {
+    beforeAll(async () => {
+      browser = await browser;
+      page = await browser.newPage();
+      await page.setViewport({ width: 1400, height: 1000 });
+    });
     afterAll(() => {
       browser.close();
     });
 
-    it.concurrent(
-      `Take screenshots for '${name}'`,
-      async () => {
-        browser = await browser;
-        const page = await browser.newPage();
-        await page.setViewport({ width: 1400, height: 1000 });
-        await page.goto(`http://localhost:${port}`);
-        await page.waitForSelector('[role="menuitem"][data-name="Welcome"]');
-        await page.waitFor(2000);
-
-        const screenshot = await page.screenshot({ fullPage: true });
+    it(`Take screenshots for '${name}'`, async () => {
+      await page.goto(`http://localhost:${port}`);
+      await page.waitForSelector('[role="menuitem"][data-name="Welcome"]');
+      await page.waitFor(2000);
 
-        expect(screenshot).toMatchImageSnapshot({
-          customDiffConfig: {
-            threshold: 0.03, // 3% threshold
-          },
-          customSnapshotIdentifier: name.split('/').join('-'),
-        });
-      },
-      1000 * 60 * 10 // 10 minutes for all tests in total
-    );
+      const screenshot = await page.screenshot({ fullPage: true });
+      expect(screenshot).toMatchImageSnapshot({
+        failureThreshold: 0.04, // 4% threshold,
+        failureThresholdType: 'percent',
+        customSnapshotIdentifier: name.split('/').join('-'),
+      });
+    });
   });
 });
diff --git a/lib/addons/CHANGELOG.md b/lib/addons/CHANGELOG.md
deleted file mode 100644
index 063a797e3faa..000000000000
--- a/lib/addons/CHANGELOG.md
+++ /dev/null
@@ -1,35 +0,0 @@
-## Changelog
-
-### v1.6.0
-
-28 Oct 2016
-
-Revert stuff introduce with v1.6.0. It might break react-native-storybook.
-We have [another way](https://github.com/kadirahq/react-storybook/pull/582#issuecomment-256840165) to do what we support to do with preview decorators.
-
-### v1.6.0
-
-28 Oct 2016
-
--   Add `setPreviewDecorator` and `getPreviewDecorator` methods.
--   Now following methods can only be set once and they accept an option name as the second argument.
-    -   setChannel(channel, name)
-    -   setDatabase(database, name)
-    -   setPreview(preview, name)
-    -   setPreviewDecorator(decorator, name)
-
-### v1.5.0
-
-13 Aug 2016
-
--   Add `getDatabase` and `setDatabase` methods [PR3](https://github.com/kadirahq/storybook-addons/pull/3)
-
-### v1.4.0
-
-29 Aug 2016
-
--   Add `getPreview` and `setPreview` methods [PR2](https://github.com/kadirahq/storybook-addons/pull/2)
-
-### v1.3.1
-
--   First stable release with addon store for loaders, panels and channel.
diff --git a/lib/channel-postmessage/CHANGELOG.md b/lib/channel-postmessage/CHANGELOG.md
deleted file mode 100644
index ca870ae0c288..000000000000
--- a/lib/channel-postmessage/CHANGELOG.md
+++ /dev/null
@@ -1,49 +0,0 @@
-## Changelog
-
-### v2.0.1
-
-24-Nov-2016
-
--   Fix empty story list when loading in an iframe [PR8](https://github.com/kadirahq/storybook-channel-postmsg/pull/8)
-
-### v2.0.0
-
-17-Nov-2016
-
--   Identify the page with a parameter [PR7](https://github.com/kadirahq/storybook-channel-postmsg/pull/7)
-
-### v1.1.0
-
-28-Oct-2016
-
--   Use a constant key to identify relavent messages [PR6](https://github.com/kadirahq/storybook-channel-postmsg/pull/6)
-
-### v1.0.4
-
-28-Oct-2016
-
--   Allow message handlers to throw errors [PR4](https://github.com/kadirahq/storybook-channel-postmsg/pull/4)
-
-### v1.0.3
-
-28-Sep-2016
-
--   Serialize data because some objects throw error when sent over postMessage [PR3](https://github.com/kadirahq/storybook-channel-postmsg/pull/3)
-
-### v1.0.2
-
-28-Sep-2016
-
--   Do not serialize data because objects can be sent over postMessage [PR1](https://github.com/kadirahq/storybook-channel-postmsg/pull/1)
-
-### v1.0.1
-
-26-Sep-2016
-
--   Select the iframe by id (getElementById)
-
-### v1.0.0
-
-26-Sep-2016
-
--   Implement send and receive functions
diff --git a/lib/channel-websocket/CHANGELOG.md b/lib/channel-websocket/CHANGELOG.md
deleted file mode 100644
index abbd2006c59d..000000000000
--- a/lib/channel-websocket/CHANGELOG.md
+++ /dev/null
@@ -1,9 +0,0 @@
-## Changelog
-
-### v1.0.1
-
--   Public release
-
-### v1.0.0
-
--   Implement the channel transport interface
diff --git a/lib/channels/CHANGELOG.md b/lib/channels/CHANGELOG.md
deleted file mode 100644
index 19b49324c3ca..000000000000
--- a/lib/channels/CHANGELOG.md
+++ /dev/null
@@ -1,10 +0,0 @@
-## Changelog
-
-### v1.1.0
-
--   Add a new `from` field to events to identify sender.
--   Ignore messages originated from itself (check event.from)
-
-### v1.0.1
-
--   Implement an API similar to an EventEmitter
diff --git a/lib/cli/CHANGELOG.md b/lib/cli/CHANGELOG.md
deleted file mode 100644
index 8722876138de..000000000000
--- a/lib/cli/CHANGELOG.md
+++ /dev/null
@@ -1,116 +0,0 @@
-# Changelog
-
-### v1.7.0
-
-18-Dec-2016
-
-Use a non-hacky way to detect yarn. [PR24](https://github.com/storybooks/getstorybook/pull/24)
-
-### v1.6.1
-
-18-Oct-2016
-
-Fix some typos. [PR21](https://github.com/kadirahq/getstorybook/pull/21)
-
-### v1.6.0
-
-12-Oct-2016
-
-Add yarn support. Now users could install storybook with yarn and use yarn to install deps:
-
-    yarn global add getstorybook
-    getstorybook
-
-For more info check [docs](https://github.com/kadirahq/getstorybook#yarn-support).
-
-### v1.5.2
-
-07-Oct-2016
-
--   Update more user friendly welcome screen to REACT_SCRIPTS generator.
-
-### v1.5.0
-
-05-Oct-2016
-
--   Update to use the latest storybook. Also update REACT_SCRIPTS generator to support public folder.
-
-### v1.4.6
-
-30-Sep-2016
-
--   Remove index.css import from config.js in CRA.
-
-### v1.4.5
-
-06-Aug-2016
-
-Fix an issue related to Meteor.
-
--   Related issue: [kadirahq/react-storybook#423](https://github.com/kadirahq/react-storybook/issues/423)
--   The fix: [088eecf](https://github.com/kadirahq/getstorybook/commit/088eecf740bebf522b6608892a3a7e3e34bcfc31)
-
-### v1.4.4
-
-30-Aug-2016
-
--   Update @kadira/storybook to version 2.5.2. [PR17](https://github.com/kadirahq/getstorybook/pull/17)
--   Add Arial font and remove image from Welcome message. [PR16](https://github.com/kadirahq/getstorybook/pull/16)
-
-### v1.4.3
-
-30-Aug-2016
-
-This is a mistakenly published version.
-
-### v1.4.2
-
-28-Aug-2016
-
--   React Native: Do not import addons.js on entryfiles.[PR14](https://github.com/kadirahq/getstorybook/pull/14)
--   Fix "emojies" typo. [PR15](https://github.com/kadirahq/getstorybook/pull/15)
-
-### v1.4.1
-
-26-Aug-2016
-
--   `RN` Automate setting app name on entry files [PR12](https://github.com/kadirahq/getstorybook/pull/12)
--   `RN` Add entry javascript file for Android [PR13](https://github.com/kadirahq/getstorybook/pull/13)
-
-### v1.4.0
-
-25-Aug-2016
-
--   Add support for React Native apps. [PR11](https://github.com/kadirahq/getstorybook/pull/11)
-
-### v1.3.0
-
-11-Aug-2016
-
--   Add support for Webpack React apps. [PR8](https://github.com/kadirahq/getstorybook/pull/8)
--   Add support for Meteor. [PR9](https://github.com/kadirahq/getstorybook/pull/9)
-
-### v1.2.0
-
-10-Aug-2016
-
--   Add better default stories. [PR7](https://github.com/kadirahq/getstorybook/pull/7)
--   Fix an issue with the `-f` option. With `-f`, it was detecting every app as a CRA based app.
-
-### v1.1.0
-
-3-Aug-2016
-
-Show some feedback when installing NPM dependencies. Fixes: [#5](https://github.com/kadirahq/getstorybook/issues/5).
-
-Now we use `childProcess.spawnSync` to run the `npm install` command.
-
-### v1.0.0
-
-2-Aug-2016
-
-Add the initial release supporting following project types:
-
--   Create React App based projects.
--   Any other React app.
--   Any React component library.
diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/index.js b/lib/cli/generators/REACT_NATIVE/template/storybook/index.js
new file mode 100644
index 000000000000..f0513c5a8651
--- /dev/null
+++ b/lib/cli/generators/REACT_NATIVE/template/storybook/index.js
@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;
diff --git a/lib/cli/test/snapshots/react_native/storybook/index.js b/lib/cli/test/snapshots/react_native/storybook/index.js
new file mode 100644
index 000000000000..f0513c5a8651
--- /dev/null
+++ b/lib/cli/test/snapshots/react_native/storybook/index.js
@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;
diff --git a/lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.input.js b/lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.input.js
index b96c0bcb5eb3..8253cc11c6ca 100644
--- a/lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.input.js
+++ b/lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.input.js
@@ -188,3 +188,11 @@ storiesOf('Button').addWithInfo(
     }
   }
 )
+
+storiesOf('shared/ProgressBar', module)
+  .addDecorator(withKnobs)
+  .addWithInfo('default style', () => (
+    <ProgressBar progress={number('progress', 25)}
+      delay={number('delay', 500)}
+    />
+  ));
diff --git a/lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.js b/lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.js
index 1da578e189f0..ed3e5f29d7ae 100644
--- a/lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.js
@@ -184,3 +184,11 @@ storiesOf('Button').add('with custom styles', withInfo({
     return stylesheet
   }
 })(() => <Button label="The Button" onClick={action('onClick')} />))
+
+storiesOf('shared/ProgressBar', module)
+  .addDecorator(withKnobs)
+  .add('default style', withInfo('default style')(() => (
+    <ProgressBar progress={number('progress', 25)}
+      delay={number('delay', 500)}
+    />
+  )));
diff --git a/lib/codemod/src/transforms/update-addon-info.js b/lib/codemod/src/transforms/update-addon-info.js
index 4ad524d7cae9..591d85643e7e 100644
--- a/lib/codemod/src/transforms/update-addon-info.js
+++ b/lib/codemod/src/transforms/update-addon-info.js
@@ -36,6 +36,10 @@ export default function transformer(file, api) {
    */
   const getOptions = args => {
     if (args[3] === undefined) {
+      if (args[2] === undefined) {
+        // when the optional description string is not supplied for addWithInfo, just use story name
+        return [args[0]];
+      }
       return [args[1]];
     }
     return [
@@ -56,10 +60,15 @@ export default function transformer(file, api) {
     const node = addWithInfoExpression.node;
     const args = node.arguments;
 
+    // if optional description string is not supplied, the story component becomes second arg
+    const storyComponent = args[2] ? args[2] : args[1];
+
     node.callee.property.name = 'add';
     node.arguments = [
       args[0],
-      j.callExpression(j.callExpression(j.identifier('withInfo'), getOptions(args)), [args[2]]),
+      j.callExpression(j.callExpression(j.identifier('withInfo'), getOptions(args)), [
+        storyComponent,
+      ]),
     ];
 
     return node;
diff --git a/lib/components/package.json b/lib/components/package.json
index a6f3849c16ca..edbe50ae2729 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "glamor": "^2.20.40",
-    "glamorous": "^4.10.0",
+    "glamorous": "^4.11.0",
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
diff --git a/lib/ui/CHANGELOG.md b/lib/ui/CHANGELOG.md
deleted file mode 100644
index b1433c0843d2..000000000000
--- a/lib/ui/CHANGELOG.md
+++ /dev/null
@@ -1,177 +0,0 @@
-## Change Log
-
-### v3.10.1
-
-07-Dec-2016
-
-Fix a react warning about missing `contentLabel` property [PR66](https://github.com/storybooks/storybook-ui/pull/66)
-
-### v3.10.0
-
-05-Dec-2016
-
-Storybook keyboard shortcuts are disabled when the user is focused into a textarea, input or similar elements. [PR65](https://github.com/storybooks/storybook-ui/pull/65)
-
-### v3.9.0
-
-30-Nov-2016
-
-Some design tweaks to the UI. [PR64](https://github.com/storybooks/storybook-ui/pull/64)
-
-### v3.8.0
-
-16-Nov-2016
-
-Replace the use of Redux with [Podda](https://github.com/arunoda/podda). Now it's pretty easy to work with the system. [PR61](https://github.com/storybooks/storybook-ui/pull/61)
-
-### v3.7.0
-
-13-Nov-2016
-
-Use the new React Komposer. It's a bit more lightweight and high performant. [PR58](https://github.com/storybooks/storybook-ui/pull/58)
-
-### v3.6.4
-
-12-Nov-2016
-
-Avoid preview re-mounting when switching to the full screen mode. [PR59](https://github.com/storybooks/storybook-ui/pull/59)
-
-### v3.6.3
-
-17-Oct-2016
-
--   Improve shortcut help view for Windows users [PR54](https://github.com/kadirahq/storybook-ui/pull/54)
-
-### v3.6.2
-
-04-Oct-2016
-
--   Fix a style regression introduced by the previous PR. See: [PR47](https://github.com/kadirahq/storybook-ui/pull/47)
-
-### v3.6.1
-
-29-Sep-2016
-
--   Use links in story list for accessibility [PR43](https://github.com/kadirahq/storybook-ui/pull/43)
-
-### v3.6.0
-
-27-Sep-2016
-
--   Dynamic Panel titles [PR42](https://github.com/kadirahq/storybook-ui/pull/42)
-
-### v3.5.0
-
-26-Sep-2016
-
--   Set layout state with provider api [PR41](https://github.com/kadirahq/storybook-ui/pull/41)
-
-### v3.4.1
-
-2-Sep-2016
-
--   Call the onStory callback as soon as it listens. [PR38](https://github.com/kadirahq/storybook-ui/pull/38)
-
-### v3.4.0
-
-2-Sep-2016
-
--   Custom query params are not stored in a separate object. [PR37](https://github.com/kadirahq/storybook-ui/pull/37)
-
-### v3.3.4
-
-30-Aug-2016
-
--   Add missing react-dom peerDependency [PR35](https://github.com/kadirahq/storybook-ui/pull/35)
-
-### v3.3.3
-
-30-Aug-2016
-
--   Avoid re-rendering panel content [PR36](https://github.com/kadirahq/storybook-ui/pull/36)
-
-### v3.3.2
-
-24-Aug-2016
-
--   When some url params are already present ui is displayed in the default way. [PR33](https://github.com/kadirahq/storybook-ui/pull/33)
-
-### v3.3.1
-
-24-Aug-2016
-
--   Avoid adding custom query params to the state if its undefined. [PR32](https://github.com/kadirahq/storybook-ui/pull/32)
--   Prevent emit story event for every redux store change. [PR31](https://github.com/kadirahq/storybook-ui/pull/31)
-
-### v3.3.0
-
-23-Aug-2016
-
--   Add 'setQueryParams' and 'getQueryParams' to api. [PR30](https://github.com/kadirahq/storybook-ui/pull/30)
--   Selected down panel in url. [PR29](https://github.com/kadirahq/storybook-ui/pull/29)
-
-### v3.2.0
-
-09-Aug-2016
-
-Support multiple callbacks for the provider's onStory callback.
-
-### v3.1.1
-
-05-Aug-2016
-
-Update react-fuzzy to version 0.3.3.
-
-### v3.1.0
-
-05-Aug-2016
-
-Add support for NPM2.
-
-Basically, we remove the NPM3 from the package.json's engine. We also changed the example app to work with NPM2.
-
-### v3.0.0
-
--   Remove Action Logger and add support for custom panels [PR22](https://github.com/kadirahq/storybook-ui/pull/22)
-
-### v2.6.1
-
--   Remove some React warnings due to bad code.
-
-### v2.6.0
-
--   Remove logger name with the updated react-inspector. [PR21](https://github.com/kadirahq/storybook-ui/pull/21)
-
-### v2.5.0
-
--   API to set options added. [PR20](https://github.com/kadirahq/storybook-ui/pull/20)
--   Ability to dock action logger in right. [PR18](https://github.com/kadirahq/storybook-ui/pull/18)
--   Add transition to latest added log. [PR16](https://github.com/kadirahq/storybook-ui/pull/16)
-
-### v2.4.0
-
--   Show cross only if text present in the filter box. [PR13](https://github.com/kadirahq/storybook-ui/pull/13)
--   Update react-fuzzy. [PR12](https://github.com/kadirahq/storybook-ui/pull/12)
--   Improved logging with react-inspector. [PR11](https://github.com/kadirahq/storybook-ui/pull/11)
-
-### v2.3.0
-
--   Add support for Redux DevTools extension. See [PR8](https://github.com/kadirahq/storybook-ui/pull/8).
--   Add fuzzy search support with a brand new search overlay. See [PR7](https://github.com/kadirahq/storybook-ui/pull/7).
-
-### v2.2.0
-
--   Add fullscreen and other shortcut state to the URL. See [PR5](https://github.com/kadirahq/storybook-ui/pull/5)
-
-### v2.1.1
-
--   Add a hacking guide.
--   Refactored the module code base and removed provider code.
-
-### v2.1.0
-
--   When creating the provider, it's required to extend from the base Provider. See [this example](https://github.com/kadirahq/storybook-ui/blob/master/example/client/provider.js#L10) for more info.
-
-### v2.0.0
-
--   Expose the whole Manager UI from this module. See the usage in [react-storybook](https://github.com/storybooks/react-storybook/blob/master/src/client/manager/index.js).
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 13366bd0d2bd..126e2c0d5fbd 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -34,7 +34,7 @@
     "react-inspector": "^2.2.0",
     "react-komposer": "^2.0.0",
     "react-modal": "^2.4.1",
-    "react-split-pane": "^0.1.65",
+    "react-split-pane": "^0.1.68",
     "react-treebeard": "^2.0.3",
     "redux": "^3.7.2"
   },
diff --git a/lib/ui/src/modules/ui/components/addon_panel/style.js b/lib/ui/src/modules/ui/components/addon_panel/style.js
index 97c882034a47..d68c93a5ea2d 100644
--- a/lib/ui/src/modules/ui/components/addon_panel/style.js
+++ b/lib/ui/src/modules/ui/components/addon_panel/style.js
@@ -33,7 +33,7 @@ export default {
   },
 
   content: {
-    flex: 1,
+    flex: '1 1 0',
     display: 'flex',
     overflow: 'auto',
   },
diff --git a/package.json b/package.json
index f915e305b514..8142de0775c9 100644
--- a/package.json
+++ b/package.json
@@ -51,12 +51,12 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "chalk": "^2.3.0",
-    "codecov": "^2.3.1",
+    "codecov": "^3.0.0",
     "commander": "^2.11.0",
     "danger": "^1.2.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
-    "eslint": "^4.9.0",
+    "eslint": "^4.10.0",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-config-prettier": "^2.4.0",
     "eslint-plugin-import": "^2.8.0",
@@ -73,7 +73,7 @@
     "inquirer": "^3.2.3",
     "jest": "^21.2.0",
     "jest-enzyme": "^4.0.1",
-    "jest-image-snapshot": "^1.0.1",
+    "jest-image-snapshot": "^2.1.0",
     "lerna": "^2.4.0",
     "lint-staged": "^4.3.0",
     "lodash": "^4.17.4",
diff --git a/yarn.lock b/yarn.lock
index 5d0b6a7af769..91c2aa97d049 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11,8 +11,8 @@
     typescript "^2.3.3"
 
 "@angular/animations@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-5.0.0-rc.5.tgz#4d614e6d8762dc32823ade4ae143bce83ab1c436"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-5.0.0-rc.9.tgz#6a3ab9a3175565af4942a10b1ef12b88870dc6c0"
   dependencies:
     tslib "^1.7.1"
 
@@ -86,14 +86,14 @@
     node-sass "^4.3.0"
 
 "@angular/common@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-5.0.0-rc.5.tgz#8ffe3cab450e533514750efdfa7fd5fd9874bc51"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-5.0.0-rc.9.tgz#086d20297368cd792019e10901145a3db68288d2"
   dependencies:
     tslib "^1.7.1"
 
 "@angular/compiler-cli@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-5.0.0-rc.5.tgz#a488f5b13823607d3851fe6c30d56402d3a52906"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-5.0.0-rc.9.tgz#8945e451c2634470067a8b40a8bd5b68c117e145"
   dependencies:
     chokidar "^1.4.2"
     minimist "^1.2.0"
@@ -101,48 +101,48 @@
     tsickle "^0.24.0"
 
 "@angular/compiler@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-5.0.0-rc.5.tgz#6a7e75b0f57e8bbee9816dd07a43eded985b01c4"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-5.0.0-rc.9.tgz#25c172a33fc7eff18026735484a28236378f033e"
   dependencies:
     tslib "^1.7.1"
 
 "@angular/core@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-5.0.0-rc.5.tgz#26ea19f542b786fcca38084d64fd6e31b93ba675"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-5.0.0-rc.9.tgz#0aab5d2d9b31ea530a41bb1e3009504d1bd64673"
   dependencies:
     tslib "^1.7.1"
 
 "@angular/forms@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-5.0.0-rc.5.tgz#6a421fe276651d27d29a16a16380dc1d92f4ac0d"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-5.0.0-rc.9.tgz#a75e1895b721311990e25313143c9b367e4be35a"
   dependencies:
     tslib "^1.7.1"
 
 "@angular/http@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/http/-/http-5.0.0-rc.5.tgz#23c8399507e2ea7a3d8937bfff0d31767bf9ced1"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/http/-/http-5.0.0-rc.9.tgz#9b2645c384fd6d822c2fb1b4c7d264c61b1b2bd1"
   dependencies:
     tslib "^1.7.1"
 
 "@angular/language-service@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-5.0.0-rc.5.tgz#a2776a4e63158dcefd2f1b1cd91942f20dcdbae0"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-5.0.0-rc.9.tgz#7db2151bd452dea6c90a025de234432dd0b51998"
 
 "@angular/platform-browser-dynamic@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.0.0-rc.5.tgz#49c894c9943183fa7733207c80ff0d065ed45cce"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.0.0-rc.9.tgz#92bc1151ef485cdccc2f4f6a6b739b9e46b6ecb2"
   dependencies:
     tslib "^1.7.1"
 
 "@angular/platform-browser@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-5.0.0-rc.5.tgz#063ddee8809c7eec7d2d9207ba033658f55f22dc"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-5.0.0-rc.9.tgz#ada7950e6104b0159abc2d84d13edf1b82483f20"
   dependencies:
     tslib "^1.7.1"
 
 "@angular/router@^5.0.0-beta.7":
-  version "5.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-5.0.0-rc.5.tgz#9d93714fc00fae615a0a785a3465006b49a64420"
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-5.0.0-rc.9.tgz#2d2ac42adfd1f147e819cf28737d47c6c9bef2cd"
   dependencies:
     tslib "^1.7.1"
 
@@ -177,9 +177,13 @@
     magic-string "^0.22.3"
     source-map "^0.5.6"
 
+"@types/inline-style-prefixer@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/inline-style-prefixer/-/inline-style-prefixer-3.0.1.tgz#8541e636b029124b747952e9a28848286d2b5bf6"
+
 "@types/jasmine@*":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.6.0.tgz#997b41a27752b4850af2683bc4a8d8222c25bd02"
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.6.2.tgz#6e6d4cb183cd55c7a1ad6270bced10fdd5367a3c"
 
 "@types/jasmine@~2.5.53":
   version "2.5.54"
@@ -198,8 +202,8 @@
     "@types/node" "*"
 
 "@types/node@*", "@types/node@^8.0.0":
-  version "8.0.46"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.46.tgz#6e1766b2d0ed06631d5b5f87bb8e72c8dbb6888e"
+  version "8.0.47"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.47.tgz#968e596f91acd59069054558a00708c445ca30c2"
 
 "@types/node@^6.0.46", "@types/node@~6.0.60":
   version "6.0.90"
@@ -213,6 +217,10 @@
   version "15.6.5"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-15.6.5.tgz#fb23b8d8b7226313b645b6e84fb178976bbfe587"
 
+"@types/react@^16.0.18":
+  version "16.0.19"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.19.tgz#f804a0fcd6d94c17df92cf2fd46671bbbc862329"
+
 "@types/selenium-webdriver@^2.53.35", "@types/selenium-webdriver@~2.53.39":
   version "2.53.42"
   resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.42.tgz#74cb77fb6052edaff2a8984ddafd88d419f25cac"
@@ -284,18 +292,14 @@ acorn@^4.0.3, acorn@^4.0.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
 acorn@^5.0.0, acorn@^5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.2.1.tgz#317ac7821826c22c702d66189ab8359675f135d7"
 
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
 
-address@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.0.2.tgz#480081e82b587ba319459fef512f516fe03d58af"
-
-address@^1.0.1:
+address@1.0.3, address@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
 
@@ -350,8 +354,8 @@ ajv-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 
 ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
 
 ajv@^4.7.0, ajv@^4.9.1:
   version "4.11.8"
@@ -397,10 +401,6 @@ angular2-template-loader@^0.6.2:
   dependencies:
     loader-utils "^0.2.15"
 
-anser@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.1.tgz#c3641863a962cebef941ea2c8706f2cb4f0716bd"
-
 ansi-align@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-1.1.0.tgz#2f0c1658829739add5ebb15e6b0c6e3423f016ba"
@@ -417,10 +417,6 @@ ansi-escapes@^1.0.0, ansi-escapes@^1.1.0, ansi-escapes@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
 
-ansi-escapes@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
-
 ansi-escapes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
@@ -614,13 +610,9 @@ asap@^2.0.0, asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
 
-asap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-1.0.0.tgz#b2a45da5fdfa20b0496fc3768cc27c12fa916a7d"
-
 asn1.js@^4.0.0:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.2.tgz#8117ef4f7ed87cd8f89044b5bff97ac243a16c9a"
   dependencies:
     bn.js "^4.0.0"
     inherits "^2.0.1"
@@ -660,9 +652,9 @@ ast-types@0.8.15:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.8.15.tgz#8eef0827f04dff0ec8857ba925abe3fea6194e52"
 
-ast-types@0.9.12:
-  version "0.9.12"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.12.tgz#b136300d67026625ae15326982ca9918e5db73c9"
+ast-types@0.9.14:
+  version "0.9.14"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.14.tgz#d34ba5dffb9d15a44351fd2a9d82e4ab2838b5ba"
 
 ast-types@0.9.6:
   version "0.9.6"
@@ -684,10 +676,6 @@ async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
-async@0.1.15:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.1.15.tgz#2180eaca2cf2a6ca5280d41c0585bec9b3e49bd3"
-
 async@2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
@@ -698,7 +686,7 @@ async@^1.4.0, async@^1.5.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.0.1, async@^2.1.2, async@^2.1.4, async@^2.1.5, async@^2.4.1, async@^2.5.0:
+async@^2.1.2, async@^2.1.4, async@^2.1.5, async@^2.4.0, async@^2.4.1, async@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -784,13 +772,13 @@ babel-cli@^6.26.0:
   optionalDependencies:
     chokidar "^1.6.1"
 
-babel-code-frame@6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
+babel-code-frame@6.26.0, babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
   dependencies:
-    chalk "^1.1.0"
+    chalk "^1.1.3"
     esutils "^2.0.2"
-    js-tokens "^3.0.0"
+    js-tokens "^3.0.2"
 
 babel-code-frame@7.0.0-beta.0:
   version "7.0.0-beta.0"
@@ -800,14 +788,6 @@ babel-code-frame@7.0.0-beta.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
-  dependencies:
-    chalk "^1.1.3"
-    esutils "^2.0.2"
-    js-tokens "^3.0.2"
-
 babel-core@6.25.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
@@ -883,7 +863,7 @@ babel-core@^5:
     trim-right "^1.0.0"
     try-resolve "^1.0.0"
 
-babel-core@^6.0.0, babel-core@^6.21.0, babel-core@^6.26.0, babel-core@^6.7.2:
+babel-core@^6.0.0, babel-core@^6.24.1, babel-core@^6.26.0, babel-core@^6.7.2:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
   dependencies:
@@ -925,7 +905,7 @@ babel-eslint@^8.0.0:
     babel-types "7.0.0-beta.0"
     babylon "7.0.0-beta.22"
 
-babel-generator@^6.18.0, babel-generator@^6.21.0, babel-generator@^6.25.0, babel-generator@^6.26.0:
+babel-generator@^6.18.0, babel-generator@^6.24.1, babel-generator@^6.25.0, babel-generator@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
   dependencies:
@@ -1152,7 +1132,7 @@ babel-messages@^6.23.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-check-es2015-constants@^6.22.0, babel-plugin-check-es2015-constants@^6.5.0, babel-plugin-check-es2015-constants@^6.7.2, babel-plugin-check-es2015-constants@^6.8.0:
+babel-plugin-check-es2015-constants@^6.22.0, babel-plugin-check-es2015-constants@^6.5.0, babel-plugin-check-es2015-constants@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
   dependencies:
@@ -1166,13 +1146,13 @@ babel-plugin-dead-code-elimination@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-dead-code-elimination/-/babel-plugin-dead-code-elimination-1.0.2.tgz#5f7c451274dcd7cccdbfbb3e0b85dd28121f0f65"
 
-babel-plugin-dynamic-import-node@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.0.2.tgz#adb5bc8f48a89311540395ae9f0cc3ed4b10bb2e"
+babel-plugin-dynamic-import-node@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.1.0.tgz#bd1d88ac7aaf98df4917c384373b04d971a2b37a"
   dependencies:
     babel-plugin-syntax-dynamic-import "^6.18.0"
-    babel-template "^6.24.1"
-    babel-types "^6.24.1"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
 
 babel-plugin-eval@^1.0.1:
   version "1.0.1"
@@ -1385,7 +1365,7 @@ babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-s
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
-babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.5.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
+babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
 
@@ -1425,7 +1405,7 @@ babel-plugin-transform-class-constructor-call@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-plugin-transform-class-properties@6.24.1, babel-plugin-transform-class-properties@^6.24.1, babel-plugin-transform-class-properties@^6.5.0, babel-plugin-transform-class-properties@^6.6.0, babel-plugin-transform-class-properties@^6.8.0:
+babel-plugin-transform-class-properties@6.24.1, babel-plugin-transform-class-properties@^6.18.0, babel-plugin-transform-class-properties@^6.24.1, babel-plugin-transform-class-properties@^6.5.0, babel-plugin-transform-class-properties@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
   dependencies:
@@ -1459,19 +1439,19 @@ babel-plugin-transform-do-expressions@^6.22.0:
     babel-plugin-syntax-do-expressions "^6.8.0"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-arrow-functions@^6.22.0, babel-plugin-transform-es2015-arrow-functions@^6.5.0, babel-plugin-transform-es2015-arrow-functions@^6.5.2, babel-plugin-transform-es2015-arrow-functions@^6.8.0:
+babel-plugin-transform-es2015-arrow-functions@^6.22.0, babel-plugin-transform-es2015-arrow-functions@^6.5.0, babel-plugin-transform-es2015-arrow-functions@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-block-scoped-functions@^6.22.0, babel-plugin-transform-es2015-block-scoped-functions@^6.6.5, babel-plugin-transform-es2015-block-scoped-functions@^6.8.0:
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.0, babel-plugin-transform-es2015-block-scoped-functions@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es2015-block-scoping@^6.24.1, babel-plugin-transform-es2015-block-scoping@^6.5.0, babel-plugin-transform-es2015-block-scoping@^6.7.1, babel-plugin-transform-es2015-block-scoping@^6.8.0:
+babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es2015-block-scoping@^6.24.1, babel-plugin-transform-es2015-block-scoping@^6.5.0, babel-plugin-transform-es2015-block-scoping@^6.8.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
   dependencies:
@@ -1481,7 +1461,7 @@ babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es20
     babel-types "^6.26.0"
     lodash "^4.17.4"
 
-babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-classes@^6.24.1, babel-plugin-transform-es2015-classes@^6.5.0, babel-plugin-transform-es2015-classes@^6.6.5, babel-plugin-transform-es2015-classes@^6.8.0:
+babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-classes@^6.24.1, babel-plugin-transform-es2015-classes@^6.5.0, babel-plugin-transform-es2015-classes@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
   dependencies:
@@ -1495,14 +1475,14 @@ babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-cla
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-computed-properties@^6.22.0, babel-plugin-transform-es2015-computed-properties@^6.24.1, babel-plugin-transform-es2015-computed-properties@^6.5.0, babel-plugin-transform-es2015-computed-properties@^6.6.5, babel-plugin-transform-es2015-computed-properties@^6.8.0:
+babel-plugin-transform-es2015-computed-properties@^6.22.0, babel-plugin-transform-es2015-computed-properties@^6.24.1, babel-plugin-transform-es2015-computed-properties@^6.5.0, babel-plugin-transform-es2015-computed-properties@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
   dependencies:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-destructuring@6.x, babel-plugin-transform-es2015-destructuring@^6.22.0, babel-plugin-transform-es2015-destructuring@^6.23.0, babel-plugin-transform-es2015-destructuring@^6.5.0, babel-plugin-transform-es2015-destructuring@^6.6.5, babel-plugin-transform-es2015-destructuring@^6.8.0:
+babel-plugin-transform-es2015-destructuring@6.x, babel-plugin-transform-es2015-destructuring@^6.22.0, babel-plugin-transform-es2015-destructuring@^6.23.0, babel-plugin-transform-es2015-destructuring@^6.5.0, babel-plugin-transform-es2015-destructuring@^6.8.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
   dependencies:
@@ -1515,7 +1495,7 @@ babel-plugin-transform-es2015-duplicate-keys@^6.22.0, babel-plugin-transform-es2
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-for-of@^6.22.0, babel-plugin-transform-es2015-for-of@^6.23.0, babel-plugin-transform-es2015-for-of@^6.5.0, babel-plugin-transform-es2015-for-of@^6.6.0, babel-plugin-transform-es2015-for-of@^6.8.0:
+babel-plugin-transform-es2015-for-of@^6.22.0, babel-plugin-transform-es2015-for-of@^6.23.0, babel-plugin-transform-es2015-for-of@^6.5.0, babel-plugin-transform-es2015-for-of@^6.8.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
   dependencies:
@@ -1543,7 +1523,7 @@ babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-modules-commonjs@6.x, babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1, babel-plugin-transform-es2015-modules-commonjs@^6.5.0, babel-plugin-transform-es2015-modules-commonjs@^6.7.0, babel-plugin-transform-es2015-modules-commonjs@^6.8.0:
+babel-plugin-transform-es2015-modules-commonjs@6.x, babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1, babel-plugin-transform-es2015-modules-commonjs@^6.5.0, babel-plugin-transform-es2015-modules-commonjs@^6.8.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz#0d8394029b7dc6abe1a97ef181e00758dd2e5d8a"
   dependencies:
@@ -1568,14 +1548,14 @@ babel-plugin-transform-es2015-modules-umd@^6.23.0, babel-plugin-transform-es2015
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-object-super@^6.22.0, babel-plugin-transform-es2015-object-super@^6.24.1, babel-plugin-transform-es2015-object-super@^6.6.5, babel-plugin-transform-es2015-object-super@^6.8.0:
+babel-plugin-transform-es2015-object-super@^6.22.0, babel-plugin-transform-es2015-object-super@^6.24.1, babel-plugin-transform-es2015-object-super@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
   dependencies:
     babel-helper-replace-supers "^6.24.1"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-parameters@6.x, babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015-parameters@^6.24.1, babel-plugin-transform-es2015-parameters@^6.5.0, babel-plugin-transform-es2015-parameters@^6.7.0, babel-plugin-transform-es2015-parameters@^6.8.0:
+babel-plugin-transform-es2015-parameters@6.x, babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015-parameters@^6.24.1, babel-plugin-transform-es2015-parameters@^6.5.0, babel-plugin-transform-es2015-parameters@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
   dependencies:
@@ -1593,7 +1573,7 @@ babel-plugin-transform-es2015-shorthand-properties@6.x, babel-plugin-transform-e
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-spread@6.x, babel-plugin-transform-es2015-spread@^6.22.0, babel-plugin-transform-es2015-spread@^6.5.0, babel-plugin-transform-es2015-spread@^6.6.5, babel-plugin-transform-es2015-spread@^6.8.0:
+babel-plugin-transform-es2015-spread@6.x, babel-plugin-transform-es2015-spread@^6.22.0, babel-plugin-transform-es2015-spread@^6.5.0, babel-plugin-transform-es2015-spread@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
   dependencies:
@@ -1607,7 +1587,7 @@ babel-plugin-transform-es2015-sticky-regex@6.x, babel-plugin-transform-es2015-st
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-template-literals@^6.22.0, babel-plugin-transform-es2015-template-literals@^6.5.0, babel-plugin-transform-es2015-template-literals@^6.6.5, babel-plugin-transform-es2015-template-literals@^6.8.0:
+babel-plugin-transform-es2015-template-literals@^6.22.0, babel-plugin-transform-es2015-template-literals@^6.5.0, babel-plugin-transform-es2015-template-literals@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
   dependencies:
@@ -1627,13 +1607,13 @@ babel-plugin-transform-es2015-unicode-regex@6.x, babel-plugin-transform-es2015-u
     babel-runtime "^6.22.0"
     regexpu-core "^2.0.0"
 
-babel-plugin-transform-es3-member-expression-literals@^6.5.0, babel-plugin-transform-es3-member-expression-literals@^6.8.0:
+babel-plugin-transform-es3-member-expression-literals@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es3-member-expression-literals/-/babel-plugin-transform-es3-member-expression-literals-6.22.0.tgz#733d3444f3ecc41bef8ed1a6a4e09657b8969ebb"
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es3-property-literals@^6.5.0, babel-plugin-transform-es3-property-literals@^6.8.0:
+babel-plugin-transform-es3-property-literals@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es3-property-literals/-/babel-plugin-transform-es3-property-literals-6.22.0.tgz#b2078d5842e22abf40f73e8cde9cd3711abd5758"
   dependencies:
@@ -1654,7 +1634,7 @@ babel-plugin-transform-export-extensions@^6.22.0:
     babel-plugin-syntax-export-extensions "^6.8.0"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-flow-strip-types@^6.21.0, babel-plugin-transform-flow-strip-types@^6.22.0, babel-plugin-transform-flow-strip-types@^6.5.0, babel-plugin-transform-flow-strip-types@^6.7.0, babel-plugin-transform-flow-strip-types@^6.8.0:
+babel-plugin-transform-flow-strip-types@^6.21.0, babel-plugin-transform-flow-strip-types@^6.22.0, babel-plugin-transform-flow-strip-types@^6.5.0, babel-plugin-transform-flow-strip-types@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
   dependencies:
@@ -1694,14 +1674,7 @@ babel-plugin-transform-object-assign@^6.5.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-object-rest-spread@6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.23.0.tgz#875d6bc9be761c58a2ae3feee5dc4895d8c7f921"
-  dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-object-rest-spread@^6.20.2, babel-plugin-transform-object-rest-spread@^6.22.0, babel-plugin-transform-object-rest-spread@^6.23.0, babel-plugin-transform-object-rest-spread@^6.5.0, babel-plugin-transform-object-rest-spread@^6.6.5, babel-plugin-transform-object-rest-spread@^6.8.0:
+babel-plugin-transform-object-rest-spread@6.26.0, babel-plugin-transform-object-rest-spread@^6.20.2, babel-plugin-transform-object-rest-spread@^6.22.0, babel-plugin-transform-object-rest-spread@^6.23.0, babel-plugin-transform-object-rest-spread@^6.5.0, babel-plugin-transform-object-rest-spread@^6.8.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
   dependencies:
@@ -1748,13 +1721,7 @@ babel-plugin-transform-react-jsx@6.24.1, babel-plugin-transform-react-jsx@^6.24.
     babel-plugin-syntax-jsx "^6.8.0"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-regenerator@6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
-  dependencies:
-    regenerator-transform "0.9.11"
-
-babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.24.1, babel-plugin-transform-regenerator@^6.26.0, babel-plugin-transform-regenerator@^6.5.0:
+babel-plugin-transform-regenerator@6.26.0, babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.24.1, babel-plugin-transform-regenerator@^6.26.0, babel-plugin-transform-regenerator@^6.5.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
   dependencies:
@@ -1823,42 +1790,7 @@ babel-polyfill@^6.20.0, babel-polyfill@^6.26.0:
     core-js "^2.5.0"
     regenerator-runtime "^0.10.5"
 
-babel-preset-env@1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.5.2.tgz#cd4ae90a6e94b709f97374b33e5f8b983556adef"
-  dependencies:
-    babel-plugin-check-es2015-constants "^6.22.0"
-    babel-plugin-syntax-trailing-function-commas "^6.22.0"
-    babel-plugin-transform-async-to-generator "^6.22.0"
-    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoping "^6.23.0"
-    babel-plugin-transform-es2015-classes "^6.23.0"
-    babel-plugin-transform-es2015-computed-properties "^6.22.0"
-    babel-plugin-transform-es2015-destructuring "^6.23.0"
-    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
-    babel-plugin-transform-es2015-for-of "^6.23.0"
-    babel-plugin-transform-es2015-function-name "^6.22.0"
-    babel-plugin-transform-es2015-literals "^6.22.0"
-    babel-plugin-transform-es2015-modules-amd "^6.22.0"
-    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-umd "^6.23.0"
-    babel-plugin-transform-es2015-object-super "^6.22.0"
-    babel-plugin-transform-es2015-parameters "^6.23.0"
-    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
-    babel-plugin-transform-es2015-spread "^6.22.0"
-    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
-    babel-plugin-transform-es2015-template-literals "^6.22.0"
-    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
-    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
-    babel-plugin-transform-exponentiation-operator "^6.22.0"
-    babel-plugin-transform-regenerator "^6.22.0"
-    browserslist "^2.1.2"
-    invariant "^2.2.2"
-    semver "^5.3.0"
-
-babel-preset-env@^1.6.0, babel-preset-env@^1.6.1:
+babel-preset-env@1.6.1, babel-preset-env@^1.6.0, babel-preset-env@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
   dependencies:
@@ -1936,36 +1868,7 @@ babel-preset-es2015@^6.9.0:
     babel-plugin-transform-es2015-unicode-regex "^6.24.1"
     babel-plugin-transform-regenerator "^6.24.1"
 
-babel-preset-fbjs@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-1.0.0.tgz#c972e5c9b301d4ec9e7971f4aec3e14ac017a8b0"
-  dependencies:
-    babel-plugin-check-es2015-constants "^6.7.2"
-    babel-plugin-syntax-flow "^6.5.0"
-    babel-plugin-syntax-object-rest-spread "^6.5.0"
-    babel-plugin-syntax-trailing-function-commas "^6.5.0"
-    babel-plugin-transform-class-properties "^6.6.0"
-    babel-plugin-transform-es2015-arrow-functions "^6.5.2"
-    babel-plugin-transform-es2015-block-scoped-functions "^6.6.5"
-    babel-plugin-transform-es2015-block-scoping "^6.7.1"
-    babel-plugin-transform-es2015-classes "^6.6.5"
-    babel-plugin-transform-es2015-computed-properties "^6.6.5"
-    babel-plugin-transform-es2015-destructuring "^6.6.5"
-    babel-plugin-transform-es2015-for-of "^6.6.0"
-    babel-plugin-transform-es2015-literals "^6.5.0"
-    babel-plugin-transform-es2015-modules-commonjs "^6.7.0"
-    babel-plugin-transform-es2015-object-super "^6.6.5"
-    babel-plugin-transform-es2015-parameters "^6.7.0"
-    babel-plugin-transform-es2015-shorthand-properties "^6.5.0"
-    babel-plugin-transform-es2015-spread "^6.6.5"
-    babel-plugin-transform-es2015-template-literals "^6.6.5"
-    babel-plugin-transform-es3-member-expression-literals "^6.5.0"
-    babel-plugin-transform-es3-property-literals "^6.5.0"
-    babel-plugin-transform-flow-strip-types "^6.7.0"
-    babel-plugin-transform-object-rest-spread "^6.6.5"
-    object-assign "^4.0.1"
-
-babel-preset-fbjs@^2.1.0:
+babel-preset-fbjs@^2.1.2, babel-preset-fbjs@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-2.1.4.tgz#22f358e6654073acf61e47a052a777d7bccf03af"
   dependencies:
@@ -2046,25 +1949,25 @@ babel-preset-minify@^0.2.0:
     lodash.isplainobject "^4.0.6"
 
 babel-preset-react-app@^3.0.0, babel-preset-react-app@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-3.0.3.tgz#5716d6a8c7354db0cc2707207ab6ceb3b2e0a825"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-3.1.0.tgz#d77f6061ab9d7bf4b3cdc86b7cde9ded0df03e48"
   dependencies:
-    babel-plugin-dynamic-import-node "1.0.2"
+    babel-plugin-dynamic-import-node "1.1.0"
     babel-plugin-syntax-dynamic-import "6.18.0"
     babel-plugin-transform-class-properties "6.24.1"
-    babel-plugin-transform-object-rest-spread "6.23.0"
+    babel-plugin-transform-object-rest-spread "6.26.0"
     babel-plugin-transform-react-constant-elements "6.23.0"
     babel-plugin-transform-react-jsx "6.24.1"
     babel-plugin-transform-react-jsx-self "6.22.0"
     babel-plugin-transform-react-jsx-source "6.22.0"
-    babel-plugin-transform-regenerator "6.24.1"
+    babel-plugin-transform-regenerator "6.26.0"
     babel-plugin-transform-runtime "6.23.0"
-    babel-preset-env "1.5.2"
+    babel-preset-env "1.6.1"
     babel-preset-react "6.24.1"
 
-babel-preset-react-native@^1.9.1:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-react-native/-/babel-preset-react-native-1.9.2.tgz#b22addd2e355ff3b39671b79be807e52dfa145f2"
+babel-preset-react-native@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-native/-/babel-preset-react-native-2.1.0.tgz#9013ebd82da1c88102bf588810ff59e209ca2b8a"
   dependencies:
     babel-plugin-check-es2015-constants "^6.5.0"
     babel-plugin-react-transform "2.0.2"
@@ -2153,7 +2056,7 @@ babel-preset-vue@^1.2.1:
     babel-plugin-syntax-jsx "^6.18.0"
     babel-plugin-transform-vue-jsx "^3.5.0"
 
-babel-register@^6.18.0, babel-register@^6.24.1, babel-register@^6.26.0, babel-register@^6.9.0:
+babel-register@^6.24.1, babel-register@^6.26.0, babel-register@^6.9.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
   dependencies:
@@ -2165,7 +2068,7 @@ babel-register@^6.18.0, babel-register@^6.24.1, babel-register@^6.26.0, babel-re
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.26.0, babel-runtime@6.x.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.9.2:
+babel-runtime@6.26.0, babel-runtime@6.x.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.9.2:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -2209,7 +2112,7 @@ babel-traverse@7.0.0-beta.0:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.18.0, babel-traverse@^6.21.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0:
+babel-traverse@^6.18.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
   dependencies:
@@ -2231,7 +2134,7 @@ babel-types@7.0.0-beta.0:
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.21.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.25.0, babel-types@^6.26.0:
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.25.0, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies:
@@ -2248,7 +2151,7 @@ babylon@^5.8.38, babylon@~5.8.3:
   version "5.8.38"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-5.8.38.tgz#ec9b120b11bf6ccd4173a18bf217e60b79859ffd"
 
-babylon@^6.14.1, babylon@^6.17.0, babylon@^6.17.2, babylon@^6.17.3, babylon@^6.18.0:
+babylon@^6.17.0, babylon@^6.17.2, babylon@^6.17.3, babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
 
@@ -2276,6 +2179,10 @@ base64-js@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978"
 
+base64-js@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.1.2.tgz#d6400cac1c4c660976d90d07a04351d89395f5e8"
+
 base64-js@^1.0.2, base64-js@^1.1.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
@@ -2324,6 +2231,10 @@ better-assert@~1.0.0:
   dependencies:
     callsite "1.0.0"
 
+big-integer@^1.6.7:
+  version "1.6.25"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.25.tgz#1de45a9f57542ac20121c682f8d642220a34e823"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -2338,14 +2249,6 @@ bl@^1.0.0:
   dependencies:
     readable-stream "^2.0.5"
 
-blink-diff@^1.0.13:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/blink-diff/-/blink-diff-1.0.13.tgz#80e3df69de804b30d40c70f041e983841ecda899"
-  dependencies:
-    pngjs-image "~0.11.5"
-    preceptor-core "~0.10.0"
-    promise "6.0.0"
-
 blob@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
@@ -2366,7 +2269,7 @@ bluebird@^2.9.33:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.11.0.tgz#534b9033c022c9579c56ba3b3e5a5caafbb650e1"
 
-bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.4.7, bluebird@^3.5.0, bluebird@~3.5.0:
+bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.4.7, bluebird@^3.5.0, bluebird@~3.5.0:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -2467,15 +2370,17 @@ boxen@^1.0.0, boxen@^1.2.1:
     term-size "^1.2.0"
     widest-line "^1.0.0"
 
-bplist-creator@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.0.4.tgz#4ac0496782e127a85c1d2026a4f5eb22a7aff991"
+bplist-creator@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.0.7.tgz#37df1536092824b87c42f957b01344117372ae45"
   dependencies:
-    stream-buffers "~0.2.3"
+    stream-buffers "~2.2.0"
 
-bplist-parser@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.0.6.tgz#38da3471817df9d44ab3892e27707bbbd75a11b9"
+bplist-parser@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.1.1.tgz#d60d5dcc20cba6dc7e1f299b35d3e1f95dafbae6"
+  dependencies:
+    big-integer "^1.6.7"
 
 brace-expansion@^1.0.0, brace-expansion@^1.1.7:
   version "1.1.8"
@@ -2576,11 +2481,11 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     electron-to-chromium "^1.2.7"
 
 browserslist@^2.1.2, browserslist@^2.1.5, browserslist@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.5.1.tgz#68e4bc536bbcc6086d62843a2ffccea8396821c6"
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.6.1.tgz#cc65a05ad6131ebda26f076f2822ba1bc826376b"
   dependencies:
-    caniuse-lite "^1.0.30000744"
-    electron-to-chromium "^1.3.24"
+    caniuse-lite "^1.0.30000755"
+    electron-to-chromium "^1.3.27"
 
 bser@1.0.2:
   version "1.0.2"
@@ -2588,12 +2493,6 @@ bser@1.0.2:
   dependencies:
     node-int64 "^0.4.0"
 
-bser@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.3.tgz#d63da19ee17330a0e260d2a34422b21a89520317"
-  dependencies:
-    node-int64 "^0.4.0"
-
 bser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -2742,12 +2641,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000749"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000749.tgz#556773aa3aa704f581d748fa63b46ca087aac67d"
+  version "1.0.30000756"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000756.tgz#e938a6b991630f30d2263dd3458beb65d362268b"
 
-caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000744, caniuse-lite@^1.0.30000748:
-  version "1.0.30000749"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000749.tgz#2ff382865aead8cca35dacfbab04f58effa4c01c"
+caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000755:
+  version "1.0.30000756"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000756.tgz#3da701c1521b9fab87004c6de7c97fa47dbeaad2"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -2757,10 +2656,6 @@ case-sensitive-paths-webpack-plugin@2.1.1, case-sensitive-paths-webpack-plugin@^
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.1.tgz#3d29ced8c1f124bf6f53846fb3f5894731fdc909"
 
-caseless@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
-
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -2780,7 +2675,7 @@ chain-function@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
 
-chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   dependencies:
@@ -3014,12 +2909,12 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-codecov@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/codecov/-/codecov-2.3.1.tgz#7dda945cd58a1f6081025b5b03ee01a2ef20f86e"
+codecov@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/codecov/-/codecov-3.0.0.tgz#c273b8c4f12945723e8dc9d25803d89343e5f28e"
   dependencies:
     argv "0.0.2"
-    request "2.77.0"
+    request "2.81.0"
     urlgrey "0.4.4"
 
 codelyzer@^3.1.2:
@@ -3209,7 +3104,7 @@ concat-stream@1.6.0, concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-config-chain@~1.1.11, config-chain@~1.1.5:
+config-chain@~1.1.11:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.11.tgz#aba09747dfbe4c3e70e766a6e41586e1859fc6f2"
   dependencies:
@@ -3617,7 +3512,7 @@ cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^3.0.0, cross-spawn@^3.0.1:
+cross-spawn@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
   dependencies:
@@ -4295,21 +4190,11 @@ editor@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/editor/-/editor-1.0.0.tgz#60c7f87bd62bcc6a894fa8ccd6afb7823a24f742"
 
-editorconfig@^0.13.2:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.13.3.tgz#e5219e587951d60958fd94ea9a9a008cdeff1b34"
-  dependencies:
-    bluebird "^3.0.5"
-    commander "^2.9.0"
-    lru-cache "^3.2.0"
-    semver "^5.1.0"
-    sigmund "^1.0.1"
-
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.24:
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.27:
   version "1.3.27"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz#78ecb8a399066187bb374eede35d9c70565a803d"
 
@@ -4431,6 +4316,14 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
+envinfo@^3.0.0:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-3.4.2.tgz#f06648836155b81e1d7b4a1c3fca3f6b5f38789b"
+  dependencies:
+    minimist "^1.2.0"
+    os-name "^2.0.1"
+    which "^1.2.14"
+
 enzyme-adapter-react-16@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.2.tgz#8c6f431f17c69e1e9eeb25ca4bd92f31971eb2dd"
@@ -4500,7 +4393,7 @@ errorhandler@~1.4.2:
     accepts "~1.3.0"
     escape-html "~1.0.3"
 
-es-abstract@^1.4.3, es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0, es-abstract@^1.8.2:
+es-abstract@^1.4.3, es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0, es-abstract@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
   dependencies:
@@ -4856,9 +4749,9 @@ eslint@^3.16.1:
     text-table "~0.2.0"
     user-home "^2.0.0"
 
-eslint@^4.9.0:
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.9.0.tgz#76879d274068261b191fe0f2f56c74c2f4208e8b"
+eslint@^4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.10.0.tgz#f25d0d7955c81968c2309aa5c9a229e045176bb7"
   dependencies:
     ajv "^5.2.0"
     babel-code-frame "^6.22.0"
@@ -5172,11 +5065,11 @@ extract-text-webpack-plugin@3.0.0:
     webpack-sources "^1.0.1"
 
 extract-zip@^1.6.5:
-  version "1.6.5"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.5.tgz#99a06735b6ea20ea9b705d779acffcc87cff0440"
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.6.tgz#1290ede8d20d0872b429fd3f351ca128ec5ef85c"
   dependencies:
     concat-stream "1.6.0"
-    debug "2.2.0"
+    debug "2.6.9"
     mkdirp "0.5.0"
     yauzl "2.4.1"
 
@@ -5245,20 +5138,32 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs-scripts@^0.7.0:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/fbjs-scripts/-/fbjs-scripts-0.7.1.tgz#4f115e218e243e3addbf0eddaac1e3c62f703fac"
+fbjs-scripts@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/fbjs-scripts/-/fbjs-scripts-0.8.1.tgz#c1c6efbecb7f008478468976b783880c2f669765"
   dependencies:
     babel-core "^6.7.2"
-    babel-preset-fbjs "^1.0.0"
-    core-js "^1.0.0"
-    cross-spawn "^3.0.1"
+    babel-preset-fbjs "^2.1.2"
+    core-js "^2.4.1"
+    cross-spawn "^5.1.0"
     gulp-util "^3.0.4"
     object-assign "^4.0.1"
     semver "^5.1.0"
     through2 "^2.0.0"
 
-fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9, fbjs@~0.8.9:
+fbjs@0.8.14:
+  version "0.8.14"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -5308,6 +5213,13 @@ file-loader@^0.10.0:
   dependencies:
     loader-utils "^1.0.2"
 
+file-loader@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.5.tgz#91c25b6b6fbe56dae99f10a425fd64933b5c9daa"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -5319,9 +5231,9 @@ fileset@^2.0.2:
     glob "^7.0.3"
     minimatch "^3.0.3"
 
-filesize@3.5.10:
-  version "3.5.10"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.10.tgz#fc8fa23ddb4ef9e5e0ab6e1e64f679a24a56761f"
+filesize@3.5.11:
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
 
 fill-range@^2.1.0:
   version "2.2.3"
@@ -5462,17 +5374,17 @@ forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
-form-data@^2.1.1, form-data@~2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+form-data@~2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.5"
     mime-types "^2.1.12"
 
-form-data@~2.1.1:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.5"
@@ -5539,9 +5451,9 @@ fs-extra@^0.23.1:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^0.26.2:
-  version "0.26.7"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.26.7.tgz#9ae1fdd94897798edab76d0918cf42d0c3184fa9"
+fs-extra@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^2.1.0"
@@ -5549,15 +5461,13 @@ fs-extra@^0.26.2:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^0.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+fs-extra@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^2.1.0"
     klaw "^1.0.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
 
 fs-extra@^4.0.0, fs-extra@^4.0.1:
   version "4.0.2"
@@ -5826,9 +5736,9 @@ glamor@^2.20.40:
     prop-types "^15.5.10"
     through "^2.3.8"
 
-glamorous@^4.10.0:
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/glamorous/-/glamorous-4.10.0.tgz#2f2e06c27b93aade93432c98ca21db0b8c3d9a5e"
+glamorous@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/glamorous/-/glamorous-4.11.0.tgz#cb846dda1450c895c59a34060fb19e3251ed619f"
   dependencies:
     brcast "^3.0.0"
     fast-memoize "^2.2.7"
@@ -5922,8 +5832,8 @@ global@^4.3.0, global@^4.3.2:
     process "~0.5.1"
 
 globals@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-10.1.0.tgz#4425a1881be0d336b4a823a82a7be725d5dd987c"
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-10.2.0.tgz#69490789091fcaa7f7d512c668c8eb73894a4ef2"
 
 globals@^6.4.0:
   version "6.4.1"
@@ -6012,9 +5922,9 @@ graceful-fs@4.1.11, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3,
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-graphiql@^0.11.6:
-  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-0.11.6.tgz#5d24d3609c9dd7c8a24306f76d8402899a9dc5e0"
+graphiql@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-0.11.10.tgz#6d24261b5ccd04bafcea4b8168ee2ff89bb22248"
   dependencies:
     codemirror "^5.26.0"
     codemirror-graphql "^0.6.11"
@@ -6152,15 +6062,6 @@ har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
 
-har-validator@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
-  dependencies:
-    chalk "^1.1.1"
-    commander "^2.9.0"
-    is-my-json-valid "^2.12.4"
-    pinkie-promise "^2.0.0"
-
 har-validator@~4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
@@ -6345,7 +6246,7 @@ html-encoding-sniffer@^1.0.1:
   dependencies:
     whatwg-encoding "^1.0.1"
 
-html-entities@1.2.1, html-entities@^1.2.0:
+html-entities@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
@@ -6534,7 +6435,7 @@ iconv-lite@0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
 
-iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.5, iconv-lite@^0.4.8, iconv-lite@~0.4.13:
+iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.5, iconv-lite@~0.4.13:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
@@ -6561,12 +6462,12 @@ ignore-by-default@^1.0.1:
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
 
 ignore@^3.2.0, ignore@^3.3.3:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.6.tgz#b6f3196b38ed92f0c86e52f6f79b7fc4c8266c8d"
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
-image-size@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.3.5.tgz#83240eab2fb5b00b04aab8c74b0471e9cba7ad8c"
+image-size@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.1.tgz#98122a562d59dcc097ef1b2c8191866eb8f5d663"
 
 image-size@~0.5.0:
   version "0.5.5"
@@ -6582,10 +6483,6 @@ immutable@^3.8.1:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
 
-immutable@~3.7.6:
-  version "3.7.6"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
-
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -6673,11 +6570,11 @@ inline-style-prefixer@^3.0.6:
     bowser "^1.7.3"
     css-in-js-utils "^2.0.0"
 
-inquirer@3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.1.tgz#06ceb0f540f45ca548c17d6840959878265fa175"
+inquirer@3.3.0, inquirer@^3.0.0, inquirer@^3.0.6, inquirer@^3.2.2, inquirer@^3.2.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
   dependencies:
-    ansi-escapes "^2.0.0"
+    ansi-escapes "^3.0.0"
     chalk "^2.0.0"
     cli-cursor "^2.1.0"
     cli-width "^2.0.0"
@@ -6728,25 +6625,6 @@ inquirer@^0.12.0:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
-inquirer@^3.0.0, inquirer@^3.0.6, inquirer@^3.2.2, inquirer@^3.2.3:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
-  dependencies:
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.0"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^2.0.4"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rx-lite "^4.0.8"
-    rx-lite-aggregates "^4.0.8"
-    string-width "^2.1.0"
-    strip-ansi "^4.0.0"
-    through "^2.3.6"
-
 insert-css@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-1.1.0.tgz#4a3f7a3e783877381bb8471a6452d1d27315db9e"
@@ -6828,8 +6706,8 @@ is-binary-path@^1.0.0:
     binary-extensions "^1.0.0"
 
 is-buffer@^1.0.2, is-buffer@^1.1.4, is-buffer@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
 
 is-builtin-module@^1.0.0:
   version "1.0.0"
@@ -6948,7 +6826,7 @@ is-integer@^1.0.4:
   dependencies:
     is-finite "^1.0.0"
 
-is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
+is-my-json-valid@^2.10.0:
   version "2.16.1"
   resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.1.tgz#5a846777e2c2620d1e69104e5d3a03b1f6088f11"
   dependencies:
@@ -7121,10 +6999,6 @@ isbinaryfile@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.2.tgz#4a3e974ec0cba9004d3fc6cde7209ea69368a621"
 
-isemail@1.x.x:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/isemail/-/isemail-1.2.0.tgz#be03df8cc3e29de4d2c5df6501263f1fa4595e9a"
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -7380,6 +7254,10 @@ jest-diff@^21.2.1:
     jest-get-type "^21.2.0"
     pretty-format "^21.2.1"
 
+jest-docblock@20.1.0-echo.1:
+  version "20.1.0-echo.1"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.1.0-echo.1.tgz#be02f43ee019f97e6b83267c746ac7b40d290fe8"
+
 jest-docblock@^20.0.3:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.0.3.tgz#17bea984342cc33d83c50fbe1545ea0efaa44712"
@@ -7429,14 +7307,15 @@ jest-get-type@^21.2.0:
   version "21.2.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-21.2.0.tgz#f6376ab9db4b60d81e39f30749c6c466f40d4a23"
 
-jest-haste-map@19.0.0:
-  version "19.0.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-19.0.0.tgz#adde00b62b1fe04432a104b3254fc5004514b55e"
+jest-haste-map@20.1.0-echo.1:
+  version "20.1.0-echo.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-20.1.0-echo.1.tgz#6dfd0c97bb51a68a35dd98326e04f994157dce81"
   dependencies:
     fb-watchman "^2.0.0"
-    graceful-fs "^4.1.6"
+    graceful-fs "^4.1.11"
+    jest-docblock "20.1.0-echo.1"
     micromatch "^2.3.11"
-    sane "~1.5.0"
+    sane "^2.0.0"
     worker-farm "^1.3.1"
 
 jest-haste-map@^20.0.4:
@@ -7461,14 +7340,15 @@ jest-haste-map@^21.2.0:
     sane "^2.0.0"
     worker-farm "^1.3.1"
 
-jest-image-snapshot@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-1.0.1.tgz#9b92f57b46c29627b2e9da6e07c27ee784be95a4"
+jest-image-snapshot@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-2.1.0.tgz#a8863f38de868e0175335dd9a1b170650e0bcdc9"
   dependencies:
-    blink-diff "^1.0.13"
     chalk "^1.1.3"
     lodash "^4.17.4"
     mkdirp "^0.5.1"
+    pixelmatch "^4.0.2"
+    pngjs "^3.3.0"
 
 jest-jasmine2@^20.0.4:
   version "20.0.4"
@@ -7720,28 +7600,10 @@ jest@^21.2.0:
   dependencies:
     jest-cli "^21.2.1"
 
-joi@^6.6.1:
-  version "6.10.1"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-6.10.1.tgz#4d50c318079122000fe5f16af1ff8e1917b77e06"
-  dependencies:
-    hoek "2.x.x"
-    isemail "1.x.x"
-    moment "2.x.x"
-    topo "1.x.x"
-
 js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf"
 
-js-beautify@^1.6.3:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.7.4.tgz#fa0dfa8fef594d6a6253755fe26af5d0a22cbd90"
-  dependencies:
-    config-chain "~1.1.5"
-    editorconfig "^0.13.2"
-    mkdirp "~0.5.0"
-    nopt "~3.0.1"
-
 js-tokens@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-1.0.1.tgz#cc435a5c8b94ad15acb7983140fc80182c89aeae"
@@ -7769,8 +7631,8 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
 jschardet@^1.4.2:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.5.1.tgz#c519f629f86b3a5bedba58a88d311309eec097f9"
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.6.0.tgz#c7d1a71edcff2839db2f9ec30fc5d5ebd3c1a678"
 
 jscodeshift@^0.3.30:
   version "0.3.32"
@@ -8202,8 +8064,8 @@ listr-update-renderer@^0.2.0:
     strip-ansi "^3.0.1"
 
 listr-verbose-renderer@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.4.0.tgz#44dc01bb0c34a03c572154d4d08cde9b1dc5620f"
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#8206f4cf6d52ddc5827e5fd14989e0e965933a35"
   dependencies:
     chalk "^1.1.3"
     cli-cursor "^1.0.2"
@@ -8602,14 +8464,6 @@ log-update@^1.0.2:
     ansi-escapes "^1.0.0"
     cli-cursor "^1.0.2"
 
-log4js@0.6.20:
-  version "0.6.20"
-  resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.20.tgz#5382993d038ee2e453de21c82f4b1beeed2c48fa"
-  dependencies:
-    async "0.1.15"
-    readable-stream "~1.0.2"
-    semver "~1.1.4"
-
 log4js@^0.6.31:
   version "0.6.38"
   resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
@@ -8654,12 +8508,6 @@ lru-cache@2.2.x:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
 
-lru-cache@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-3.2.0.tgz#71789b3b7f5399bec8565dda38aa30d2a097efee"
-  dependencies:
-    pseudomap "^1.0.1"
-
 lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@~4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
@@ -8671,6 +8519,10 @@ macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
 
+macos-release@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-1.1.0.tgz#831945e29365b470aa8724b0ab36c8f8959d10fb"
+
 magic-string@^0.22.3:
   version "0.22.4"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.4.tgz#31039b4e40366395618c1d6cf8193c53917475ff"
@@ -8846,6 +8698,12 @@ merge-dirs@^0.2.1:
     node-fs "~0.1.7"
     path "^0.12.7"
 
+merge-stream@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
+  dependencies:
+    readable-stream "^2.0.1"
+
 merge@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
@@ -8863,6 +8721,46 @@ methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 
+metro-bundler@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/metro-bundler/-/metro-bundler-0.13.0.tgz#a1510eaecfc3db8ef46d2a936a3cc18f651e26f7"
+  dependencies:
+    absolute-path "^0.0.0"
+    async "^2.4.0"
+    babel-core "^6.24.1"
+    babel-generator "^6.24.1"
+    babel-plugin-external-helpers "^6.18.0"
+    babel-preset-es2015-node "^6.1.1"
+    babel-preset-fbjs "^2.1.4"
+    babel-preset-react-native "^2.0.0"
+    babel-register "^6.24.1"
+    babylon "^6.18.0"
+    chalk "^1.1.1"
+    concat-stream "^1.6.0"
+    core-js "^2.2.2"
+    debug "^2.2.0"
+    denodeify "^1.2.1"
+    fbjs "0.8.14"
+    graceful-fs "^4.1.3"
+    image-size "^0.6.0"
+    jest-docblock "20.1.0-echo.1"
+    jest-haste-map "20.1.0-echo.1"
+    json-stable-stringify "^1.0.1"
+    json5 "^0.4.0"
+    left-pad "^1.1.3"
+    lodash "^4.16.6"
+    merge-stream "^1.0.1"
+    mime-types "2.1.11"
+    mkdirp "^0.5.1"
+    request "^2.79.0"
+    rimraf "^2.5.4"
+    source-map "^0.5.6"
+    temp "0.8.3"
+    throat "^4.1.0"
+    uglify-js "2.7.5"
+    write-file-atomic "^1.2.0"
+    xpipe "^1.0.5"
+
 micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
@@ -8888,14 +8786,18 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-"mime-db@>= 1.30.0 < 2", mime-db@~1.30.0:
-  version "1.30.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+"mime-db@>= 1.30.0 < 2":
+  version "1.31.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.31.0.tgz#a49cd8f3ebf3ed1a482b60561d9105ad40ca74cb"
 
 mime-db@~1.23.0:
   version "1.23.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.23.0.tgz#a31b4070adaea27d732ea333740a64d0ec9a6659"
 
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
 mime-types@2.1.11:
   version "2.1.11"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.11.tgz#c259c471bda808a85d6cd193b430a5fae4473b3c"
@@ -9024,7 +8926,7 @@ modify-values@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.0.tgz#e2b6cdeb9ce19f99317a53722f3dbf5df5eaaab2"
 
-moment@2.x.x, moment@^2.19.0, moment@^2.19.1, moment@^2.6.0:
+moment@^2.19.0, moment@^2.19.1, moment@^2.6.0:
   version "2.19.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.1.tgz#56da1a2d1cbf01d38b7e1afc31c10bcfa1929167"
 
@@ -9279,14 +9181,6 @@ node-status-codes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
 
-node-uuid@1.4.7:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
-
-node-uuid@~1.4.7:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.8.tgz#b040eb0923968afabf8d32fb1f17f1167fdab907"
-
 node-version@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.1.0.tgz#f437d7ba407e65e2c4eaef8887b1718ba523d4f0"
@@ -9320,7 +9214,7 @@ nomnom@~1.6.2:
     colors "0.5.x"
     underscore "~1.4.4"
 
-"nopt@2 || 3", nopt@~3.0.1:
+"nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
   dependencies:
@@ -9777,6 +9671,13 @@ os-locale@^2.0.0:
     lcid "^1.0.0"
     mem "^1.1.0"
 
+os-name@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/os-name/-/os-name-2.0.1.tgz#b9a386361c17ae3a21736ef0599405c9a8c5dc5e"
+  dependencies:
+    macos-release "^1.0.0"
+    win-release "^1.0.0"
+
 os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@@ -9862,7 +9763,7 @@ pacote@~2.7.38:
     unique-filename "^1.1.0"
     which "^1.2.12"
 
-pako@^0.2.6, pako@~0.2.0:
+pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
 
@@ -10068,9 +9969,9 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-pegjs@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/pegjs/-/pegjs-0.9.0.tgz#f6aefa2e3ce56169208e52179dfe41f89141a369"
+pegjs@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/pegjs/-/pegjs-0.10.0.tgz#cf8bafae6eddff4b5a7efb185269eaaf4610ddbd"
 
 pend@~1.2.0:
   version "1.2.0"
@@ -10102,6 +10003,12 @@ pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
+pixelmatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-4.0.2.tgz#8f47dcec5011b477b67db03c243bc1f3085e8854"
+  dependencies:
+    pngjs "^3.0.0"
+
 pkg-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
@@ -10114,7 +10021,15 @@ pkg-dir@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-plist@1.2.0, plist@^1.2.0:
+plist@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/plist/-/plist-2.0.1.tgz#0a32ca9481b1c364e92e18dc55c876de9d01da8b"
+  dependencies:
+    base64-js "1.1.2"
+    xmlbuilder "8.2.2"
+    xmldom "0.1.x"
+
+plist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/plist/-/plist-1.2.0.tgz#084b5093ddc92506e259f874b8d9b1afb8c79593"
   dependencies:
@@ -10141,20 +10056,9 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
-pngjs-image@~0.11.5:
-  version "0.11.7"
-  resolved "https://registry.yarnpkg.com/pngjs-image/-/pngjs-image-0.11.7.tgz#631dd59924569fc82ffebae0d5d53f85f54dab62"
-  dependencies:
-    iconv-lite "^0.4.8"
-    pako "^0.2.6"
-    pngjs "2.3.1"
-    request "^2.55.0"
-    stream-buffers "1.0.1"
-    underscore "1.7.0"
-
-pngjs@2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-2.3.1.tgz#11d1e12b9cb64d63e30c143a330f4c1f567da85f"
+pngjs@^3.0.0, pngjs@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.0.tgz#1f5730c189c94933b81beda2ab2f8e2855263a8f"
 
 podda@^1.2.2:
   version "1.2.2"
@@ -10468,7 +10372,7 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.15, postcss@^5.2.16:
+postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.15, postcss@^5.2.16:
   version "5.2.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
   dependencies:
@@ -10485,13 +10389,6 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.2, postcss@^6.0.6,
     source-map "^0.6.1"
     supports-color "^4.4.0"
 
-preceptor-core@~0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/preceptor-core/-/preceptor-core-0.10.0.tgz#d906e88760c6fb92121f942b393c91dfcf7618a4"
-  dependencies:
-    log4js "0.6.20"
-    underscore "1.7.0"
-
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -10533,6 +10430,10 @@ pretty-format@^21.2.1:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^4.2.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-4.3.1.tgz#530be5c42b3c05b36414a7a2a4337aa80acd0e8d"
+
 private@^0.1.6, private@^0.1.7, private@~0.1.5:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -10573,19 +10474,13 @@ promise-retry@^1.1.1:
     retry "^0.10.0"
 
 promise.prototype.finally@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-3.0.1.tgz#51ba2fa0a4cba5cbca54da818a8da8f24fc68f39"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-3.1.0.tgz#66f161b1643636e50e7cf201dc1b84a857f3864e"
   dependencies:
     define-properties "^1.1.2"
-    es-abstract "^1.8.2"
+    es-abstract "^1.9.0"
     function-bind "^1.1.1"
 
-promise@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-6.0.0.tgz#456538dd4afdd25dc7d0f52a5201ed242b7c109d"
-  dependencies:
-    asap "~1.0.0"
-
 promise@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.1.tgz#e45d68b00a17647b6da711bf85ed6ed47208f450"
@@ -10667,7 +10562,7 @@ ps-tree@^1.1.0:
   dependencies:
     event-stream "~3.3.0"
 
-pseudomap@^1.0.1, pseudomap@^1.0.2:
+pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
 
@@ -10737,10 +10632,6 @@ qs@6.5.1, qs@^6.4.0, qs@^6.5.1, qs@~6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
 
-qs@~6.3.0:
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
-
 qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
@@ -10769,8 +10660,8 @@ querystringify@~1.0.0:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
 
 radium@^0.19.0:
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/radium/-/radium-0.19.5.tgz#2352ffa9c2265ea7c76e07540d9841727f85dbe8"
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/radium/-/radium-0.19.6.tgz#b86721d08dbd303b061a4ae2ebb06cc6e335ae72"
   dependencies:
     array-find "^1.0.0"
     exenv "^1.2.1"
@@ -10893,29 +10784,29 @@ react-deep-force-update@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.1.tgz#bcd31478027b64b3339f108921ab520b4313dc2c"
 
 react-dev-utils@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.1.0.tgz#f6f436febd3f4eeb538490319b51c875c1e35bc5"
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.1.tgz#9f2763e7bafa1a1b9c52254d2a479deec280f111"
   dependencies:
-    address "1.0.2"
-    babel-code-frame "6.22.0"
+    address "1.0.3"
+    babel-code-frame "6.26.0"
     chalk "1.1.3"
     cross-spawn "5.1.0"
     detect-port-alt "1.1.3"
     escape-string-regexp "1.0.5"
-    filesize "3.5.10"
+    filesize "3.5.11"
     global-modules "1.0.0"
     gzip-size "3.0.0"
-    inquirer "3.2.1"
+    inquirer "3.3.0"
     is-root "1.0.0"
     opn "5.1.0"
-    react-error-overlay "^2.0.2"
+    react-error-overlay "^3.0.0"
     recursive-readdir "2.2.1"
     shell-quote "1.6.1"
     sockjs-client "1.1.4"
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-devtools-core@^2.0.8:
+react-devtools-core@^2.5.0:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-2.5.2.tgz#f97bec5afae5d9318d16778065e0c214c4d5714c"
   dependencies:
@@ -10934,7 +10825,7 @@ react-docgen@^2.15.0:
     node-dir "^0.1.10"
     recast "^0.12.6"
 
-"react-dom@^15 || ^16", react-dom@^16.0.0:
+react-dom@^16.0.0:
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
   dependencies:
@@ -10943,18 +10834,9 @@ react-docgen@^2.15.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-error-overlay@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-2.0.2.tgz#967b091962b17f5aeb4a60b1311b1736e1b6533d"
-  dependencies:
-    anser "1.4.1"
-    babel-code-frame "6.22.0"
-    babel-runtime "6.26.0"
-    html-entities "1.2.1"
-    react "^15 || ^16"
-    react-dom "^15 || ^16"
-    settle-promise "1.0.0"
-    source-map "0.5.6"
+react-error-overlay@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
 
 react-fuzzy@^0.5.1:
   version "0.5.1"
@@ -10982,8 +10864,8 @@ react-icons@^2.2.7:
     react-icon-base "2.1.0"
 
 react-inspector@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.2.0.tgz#2aa0778c3512063f598d7a89a28a5d5c7733cad7"
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.2.1.tgz#c24f9a0131960b8e63c8392254d34df0717aabdf"
   dependencies:
     babel-runtime "^6.26.0"
     is-dom "^1.0.9"
@@ -11021,57 +10903,38 @@ react-native-compat@^1.0.0:
   dependencies:
     prop-types "^15.5.10"
 
-react-native@^0.43.3:
-  version "0.43.4"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.43.4.tgz#92fb6937ab415b2e5612835a93a61845de98eb4d"
+react-native@^0.49.3:
+  version "0.49.5"
+  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.49.5.tgz#89f0fe93a8da4db2670c4bd0d81131a2ff617f27"
   dependencies:
     absolute-path "^0.0.0"
     art "^0.10.0"
-    async "^2.0.1"
-    babel-core "^6.21.0"
-    babel-generator "^6.21.0"
-    babel-plugin-external-helpers "^6.18.0"
+    babel-core "^6.24.1"
     babel-plugin-syntax-trailing-function-commas "^6.20.0"
     babel-plugin-transform-async-to-generator "6.16.0"
+    babel-plugin-transform-class-properties "^6.18.0"
     babel-plugin-transform-flow-strip-types "^6.21.0"
     babel-plugin-transform-object-rest-spread "^6.20.2"
-    babel-polyfill "^6.20.0"
-    babel-preset-es2015-node "^6.1.1"
-    babel-preset-fbjs "^2.1.0"
-    babel-preset-react-native "^1.9.1"
-    babel-register "^6.18.0"
-    babel-runtime "^6.20.0"
-    babel-traverse "^6.21.0"
-    babel-types "^6.21.0"
-    babylon "^6.14.1"
+    babel-register "^6.24.1"
+    babel-runtime "^6.23.0"
     base64-js "^1.1.2"
-    bser "^1.0.2"
     chalk "^1.1.1"
     commander "^2.9.0"
-    concat-stream "^1.6.0"
     connect "^2.8.3"
-    core-js "^2.2.2"
+    create-react-class "^15.5.2"
     debug "^2.2.0"
     denodeify "^1.2.1"
+    envinfo "^3.0.0"
     event-target-shim "^1.0.5"
-    fbjs "~0.8.9"
-    fbjs-scripts "^0.7.0"
-    form-data "^2.1.1"
-    fs-extra "^0.26.2"
-    glob "^5.0.15"
+    fbjs "0.8.14"
+    fbjs-scripts "^0.8.1"
+    fs-extra "^1.0.0"
+    glob "^7.1.1"
     graceful-fs "^4.1.3"
-    image-size "^0.3.5"
-    immutable "~3.7.6"
-    imurmurhash "^0.1.4"
-    inquirer "^0.12.0"
-    jest-haste-map "19.0.0"
-    joi "^6.6.1"
-    json-stable-stringify "^1.0.1"
-    json5 "^0.4.0"
-    left-pad "^1.1.3"
+    inquirer "^3.0.6"
     lodash "^4.16.6"
+    metro-bundler "^0.13.0"
     mime "^1.3.4"
-    mime-types "2.1.11"
     minimist "^1.2.0"
     mkdirp "^0.5.1"
     node-fetch "^1.3.3"
@@ -11079,36 +10942,26 @@ react-native@^0.43.3:
     opn "^3.0.2"
     optimist "^0.6.1"
     plist "^1.2.0"
+    pretty-format "^4.2.1"
     promise "^7.1.1"
+    prop-types "^15.5.8"
     react-clone-referenced-element "^1.0.1"
-    react-devtools-core "^2.0.8"
+    react-devtools-core "^2.5.0"
     react-timer-mixin "^0.13.2"
-    react-transform-hmr "^1.0.4"
-    rebound "^0.0.13"
     regenerator-runtime "^0.9.5"
-    request "^2.79.0"
     rimraf "^2.5.4"
-    sane "~1.4.1"
     semver "^5.0.3"
     shell-quote "1.6.1"
-    source-map "^0.5.6"
     stacktrace-parser "^0.1.3"
-    temp "0.8.3"
-    throat "^3.0.0"
-    uglify-js "^2.6.2"
     whatwg-fetch "^1.0.0"
-    wordwrap "^1.0.0"
-    worker-farm "^1.3.1"
-    write-file-atomic "^1.2.0"
     ws "^1.1.0"
-    xcode "^0.8.9"
+    xcode "^0.9.1"
     xmldoc "^0.4.0"
-    xpipe "^1.0.5"
     yargs "^6.4.0"
 
 react-onclickoutside@^6.5.0:
-  version "6.6.2"
-  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.6.2.tgz#8446f665460ffda1c68b7f3aeeea3a217bfdf18f"
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.6.3.tgz#f3b9226f4541039d6d5a4a6120c4dfffcf7de60c"
 
 react-proxy@^1.1.7:
   version "1.1.8"
@@ -11173,10 +11026,12 @@ react-simple-di@^1.2.0:
     babel-runtime "6.x.x"
     hoist-non-react-statics "1.x.x"
 
-react-split-pane@^0.1.65:
-  version "0.1.66"
-  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.66.tgz#369085dd07ec1237bda123e73813dcc7dc6502c1"
+react-split-pane@^0.1.68:
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.68.tgz#a4ed40b0e77f0578cb6c9f9e65edd32726e4b16a"
   dependencies:
+    "@types/inline-style-prefixer" "^3.0.0"
+    "@types/react" "^16.0.18"
     inline-style-prefixer "^3.0.6"
     prop-types "^15.5.10"
     react-style-proptype "^3.0.0"
@@ -11238,7 +11093,7 @@ react-treebeard@^2.0.3:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
-"react@^15 || ^16", react@^16.0.0:
+react@^16.0.0:
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
   dependencies:
@@ -11407,10 +11262,6 @@ readline2@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     mute-stream "0.0.5"
 
-rebound@^0.0.13:
-  version "0.0.13"
-  resolved "https://registry.yarnpkg.com/rebound/-/rebound-0.0.13.tgz#4a225254caf7da756797b19c5817bf7a7941fac1"
-
 recast@0.10.33:
   version "0.10.33"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.10.33.tgz#942808f7aa016f1fa7142c461d7e5704aaa8d697"
@@ -11439,10 +11290,10 @@ recast@^0.11.17:
     source-map "~0.5.0"
 
 recast@^0.12.5, recast@^0.12.6:
-  version "0.12.7"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.12.7.tgz#6ec2ba1ae1d163cd12b5c17c3823458b299f3a0b"
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.12.8.tgz#bb5dc9501dfa0cd075686e1daf9d67797cc5499f"
   dependencies:
-    ast-types "0.9.12"
+    ast-types "0.9.14"
     core-js "^2.4.1"
     esprima "~4.0.0"
     private "~0.1.5"
@@ -11510,14 +11361,6 @@ regenerator-runtime@^0.9.5:
   version "0.9.6"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"
 
-regenerator-transform@0.9.11:
-  version "0.9.11"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283"
-  dependencies:
-    babel-runtime "^6.18.0"
-    babel-types "^6.19.0"
-    private "^0.1.6"
-
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -11896,7 +11739,7 @@ replace-ext@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
 
-request@2, request@^2.55.0, request@^2.74.0, request@^2.78.0, request@^2.79.0, request@^2.81.0, request@^2.83.0:
+request@2, request@^2.74.0, request@^2.78.0, request@^2.79.0, request@^2.81.0, request@^2.83.0:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
   dependencies:
@@ -11923,31 +11766,6 @@ request@2, request@^2.55.0, request@^2.74.0, request@^2.78.0, request@^2.79.0, r
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
-request@2.77.0:
-  version "2.77.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.77.0.tgz#2b00d82030ededcc97089ffa5d8810a9c2aa314b"
-  dependencies:
-    aws-sign2 "~0.6.0"
-    aws4 "^1.2.1"
-    caseless "~0.11.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.0"
-    forever-agent "~0.6.1"
-    form-data "~2.1.1"
-    har-validator "~2.0.6"
-    hawk "~3.1.3"
-    http-signature "~1.1.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.7"
-    node-uuid "~1.4.7"
-    oauth-sign "~0.8.1"
-    qs "~6.3.0"
-    stringstream "~0.0.4"
-    tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
-
 request@2.81.0, request@~2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
@@ -12027,9 +11845,9 @@ resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0, resolve@^1.3.2, resolve@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
   dependencies:
     path-parse "^1.0.5"
 
@@ -12145,8 +11963,8 @@ rx-lite@^3.1.2:
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
 
 rxjs@^5.0.0-beta.11, rxjs@^5.4.2:
-  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.1.tgz#ef980a6ad7438c74e3b0f0d1e6f1493e385997fd"
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.2.tgz#28d403f0071121967f18ad665563255d54236ac3"
   dependencies:
     symbol-observable "^1.0.1"
 
@@ -12172,29 +11990,6 @@ sane@^2.0.0:
   optionalDependencies:
     fsevents "^1.1.1"
 
-sane@~1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-1.4.1.tgz#88f763d74040f5f0c256b6163db399bf110ac715"
-  dependencies:
-    exec-sh "^0.2.0"
-    fb-watchman "^1.8.0"
-    minimatch "^3.0.2"
-    minimist "^1.1.1"
-    walker "~1.0.5"
-    watch "~0.10.0"
-
-sane@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-1.5.0.tgz#a4adeae764d048621ecb27d5f9ecf513101939f3"
-  dependencies:
-    anymatch "^1.3.0"
-    exec-sh "^0.2.0"
-    fb-watchman "^1.8.0"
-    minimatch "^3.0.2"
-    minimist "^1.1.1"
-    walker "~1.0.5"
-    watch "~0.10.0"
-
 sane@~1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-1.6.0.tgz#9610c452307a135d29c1fdfe2547034180c46775"
@@ -12312,10 +12107,6 @@ semver-dsl@^1.0.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
 
-semver@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-1.1.4.tgz#2e5a4e72bab03472cc97f72753b4508912ef5540"
-
 semver@~4.3.3:
   version "4.3.6"
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
@@ -12447,10 +12238,6 @@ setprototypeof@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
 
-settle-promise@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/settle-promise/-/settle-promise-1.0.0.tgz#697adb58b821f387ce2757c06efc9de5f0ee33d8"
-
 sha.js@^2.4.0, sha.js@^2.4.8:
   version "2.4.9"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
@@ -12519,10 +12306,6 @@ shellwords@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
-sigmund@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -12541,13 +12324,13 @@ simple-is@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/simple-is/-/simple-is-0.2.0.tgz#2abb75aade39deb5cc815ce10e6191164850baf0"
 
-simple-plist@0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/simple-plist/-/simple-plist-0.1.4.tgz#10eb51b47e33c556eb8ec46d5ee64d64e717db5d"
+simple-plist@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/simple-plist/-/simple-plist-0.2.1.tgz#71766db352326928cf3a807242ba762322636723"
   dependencies:
-    bplist-creator "0.0.4"
-    bplist-parser "0.0.6"
-    plist "1.2.0"
+    bplist-creator "0.0.7"
+    bplist-parser "0.1.1"
+    plist "2.0.1"
 
 slash@^1.0.0:
   version "1.0.0"
@@ -12582,8 +12365,8 @@ sntp@1.x.x:
     hoek "2.x.x"
 
 sntp@2.x.x:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.0.2.tgz#5064110f0af85f7cfdb7d6b67a40028ce52b4b2b"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
   dependencies:
     hoek "4.x.x"
 
@@ -12737,10 +12520,6 @@ source-map@0.1.x, source-map@~0.1.7:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@0.5.6:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
-
 source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -12883,13 +12662,9 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
-stream-buffers@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-1.0.1.tgz#9a44a37555f96a5b78a5a765f0c48446cb160b8c"
-
-stream-buffers@~0.2.3:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-0.2.6.tgz#181c08d5bb3690045f69401b9ae6a7a0cf3313fc"
+stream-buffers@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
 
 stream-combiner@~0.0.4:
   version "0.0.4"
@@ -13250,8 +13025,8 @@ tar-fs@^1.15.3:
     tar-stream "^1.1.2"
 
 tar-pack@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
   dependencies:
     debug "^2.2.0"
     fstream "^1.0.10"
@@ -13348,7 +13123,7 @@ throat@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-3.2.0.tgz#50cb0670edbc40237b9e347d7e1f88e4620af836"
 
-throat@^4.0.0:
+throat@^4.0.0, throat@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
 
@@ -13442,12 +13217,6 @@ to-vfile@^2.0.0:
     is-buffer "^1.1.4"
     vfile "^2.0.0"
 
-topo@1.x.x:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/topo/-/topo-1.1.0.tgz#e9d751615d1bb87dc865db182fa1ca0a5ef536d5"
-  dependencies:
-    hoek "2.x.x"
-
 toposort@^1.0.0:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"
@@ -13586,10 +13355,6 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-tunnel-agent@~0.4.1:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
-
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -13616,21 +13381,30 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"
 
 typescript@^2.3.3, typescript@^2.4.0:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.3.tgz#df3dcdc38f3beb800d4bc322646b04a3f6ca7f0d"
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.1.tgz#ef39cdea27abac0b500242d6726ab90e0c846631"
 
 ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
+uglify-js@2.7.5:
+  version "2.7.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
+  dependencies:
+    async "~0.2.6"
+    source-map "~0.5.1"
+    uglify-to-browserify "~1.0.0"
+    yargs "~3.10.0"
+
 uglify-js@3.1.x, uglify-js@^3.0.13:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.5.tgz#4c1a6d53b2fe77e4710dd94631853effd3ff5143"
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.6.tgz#918832602036e95d2318e11f27ee8461a8592c5d"
   dependencies:
     commander "~2.11.0"
     source-map "~0.6.1"
 
-uglify-js@^2.6, uglify-js@^2.6.2, uglify-js@^2.8.29:
+uglify-js@^2.6, uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
   dependencies:
@@ -13691,10 +13465,6 @@ undefsafe@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-0.0.3.tgz#ecca3a03e56b9af17385baac812ac83b994a962f"
 
-underscore@1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209"
-
 underscore@~1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
@@ -13986,6 +13756,10 @@ utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
 
+uuid@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+
 uuid@^2.0.1, uuid@^2.0.2, uuid@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
@@ -14108,28 +13882,10 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-hot-reload-api@^2.1.0, vue-hot-reload-api@^2.1.1, vue-hot-reload-api@^2.2.0:
+vue-hot-reload-api@^2.1.1, vue-hot-reload-api@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.0.tgz#9a21b35ced3634434a43ee80efb7350ea8fb206d"
 
-vue-loader@^12.2.1:
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.2.tgz#2b3a764f27018f975bc78cb8b1f55137548ee2d7"
-  dependencies:
-    consolidate "^0.14.0"
-    hash-sum "^1.0.2"
-    js-beautify "^1.6.3"
-    loader-utils "^1.1.0"
-    lru-cache "^4.0.1"
-    postcss "^5.0.21"
-    postcss-load-config "^1.1.0"
-    postcss-selector-parser "^2.0.0"
-    resolve "^1.3.3"
-    source-map "^0.5.6"
-    vue-hot-reload-api "^2.1.0"
-    vue-style-loader "^3.0.0"
-    vue-template-es2015-compiler "^1.2.2"
-
 vue-loader@^13.3.0:
   version "13.3.0"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.3.0.tgz#3bf837d490ba5dea6fc07e0835ffa6c688c8af33"
@@ -14162,7 +13918,7 @@ vue-template-compiler@^2.5.2:
     de-indent "^1.0.2"
     he "^1.1.0"
 
-vue-template-es2015-compiler@^1.2.2, vue-template-es2015-compiler@^1.6.0:
+vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
@@ -14170,9 +13926,9 @@ vue@^2.5.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.2.tgz#fd367a87bae7535e47f9dc5c9ec3b496e5feb5a4"
 
-vuex@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-2.5.0.tgz#20f0265ade6c9a5ac6724a405d3ffdb4726c9741"
+vuex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.0.tgz#98b4b5c4954b1c1c1f5b29fa0476a23580315814"
 
 walk-sync@^0.3.1:
   version "0.3.2"
@@ -14473,10 +14229,10 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.2.tgz#0e18781de629a18308ce1481650f67ffa2693a5d"
 
 whatwg-encoding@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.2.tgz#bd68ad169c3cf55080562257714bf012e668a165"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3"
   dependencies:
-    iconv-lite "0.4.13"
+    iconv-lite "0.4.19"
 
 whatwg-fetch@2.0.3, whatwg-fetch@>=0.10.0:
   version "2.0.3"
@@ -14533,6 +14289,12 @@ widest-line@^1.0.0:
   dependencies:
     string-width "^1.0.1"
 
+win-release@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/win-release/-/win-release-1.1.1.tgz#5fa55e02be7ca934edfc12665632e849b72e5209"
+  dependencies:
+    semver "^5.0.1"
+
 window-size@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
@@ -14549,17 +14311,17 @@ wordwrap@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
 
-wordwrap@^1.0.0, wordwrap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
 
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
 worker-farm@^1.3.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.0.tgz#adfdf0cd40581465ed0a1f648f9735722afd5c8d"
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.1.tgz#8e9f4a7da4f3c595aa600903051b969390423fa1"
   dependencies:
     errno "^0.1.4"
     xtend "^4.0.1"
@@ -14678,13 +14440,13 @@ x-is-string@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
 
-xcode@^0.8.9:
-  version "0.8.9"
-  resolved "https://registry.yarnpkg.com/xcode/-/xcode-0.8.9.tgz#ec6765f70e9dccccc9f6e9a5b9b4e7e814b4cf35"
+xcode@^0.9.1:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/xcode/-/xcode-0.9.3.tgz#910a89c16aee6cc0b42ca805a6d0b4cf87211cf3"
   dependencies:
-    node-uuid "1.4.7"
-    pegjs "0.9.0"
-    simple-plist "0.1.4"
+    pegjs "^0.10.0"
+    simple-plist "^0.2.1"
+    uuid "3.0.1"
 
 xdg-basedir@^2.0.0:
   version "2.0.0"
@@ -14724,6 +14486,10 @@ xmlbuilder@4.0.0:
   dependencies:
     lodash "^3.5.0"
 
+xmlbuilder@8.2.2:
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-8.2.2.tgz#69248673410b4ba42e1a6136551d2922335aa773"
+
 xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
   version "9.0.4"
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"