Updates for storybook 4.

content/angular/en/get-started.md

@@ -21,7 +21,7 @@ npx -p @angular/cli ng new taskbox --style less
 cd taskbox
 
 # Add Storybook:
-npx -p @storybook/cli getstorybook
+npx -p @storybook/cli sb init
 ```
 
 We can quickly check that the various environments of our application are working properly:

content/angular/es/get-started.md

@@ -21,7 +21,7 @@ npx ng new taskbox --style less
 cd taskbox
 
 # Añade Storybook:
-npx -p @storybook/cli getstorybook
+npx -p @storybook/cli sb init
 ```
 
 Podemos comprobar rápidamente que los distintos entornos de nuestra aplicación funcionan correctamente:

content/react/en/get-started.md

@@ -21,7 +21,7 @@ npx create-react-app taskbox
 cd taskbox
 
 # Add Storybook:
-npx -p @storybook/cli getstorybook
+npx -p @storybook/cli sb init
 ```
 
 We can quickly check that the various environments of our application are working properly:

content/react/en/simple-component.md

@@ -207,6 +207,10 @@ Storybook gave us a great way to visually test our application during constructi
 
 ### Snapshot testing
 
+<div class="aside">
+⚠️ Storyshots (storybook's snapshot testing addon) doesn't currently work with Create React App as it requires a custom Babel config for testing. We are currently working on a fix.
+</div>
+
 Snapshot testing refers to the practice of recording the “known good” output of a component for a given input and then flagging the component whenever the output changes in future. This complements Storybook, because it’s a quick way to view the new version of a component and check out the changes.
 
 <div class="aside">

content/react/en/test.md

@@ -35,18 +35,12 @@ There are a number of tools for visual regression testing. For professional team
 
 Chromatic is a hassle-free Storybook addon for visual regression testing and review in the cloud. Since it’s a paid service (with a free trial), it may not be for everyone. However, Chromatic is an instructive example of a production visual testing workflow that we'll try out for free. Let’s have a look.
 
-### Initiate Git
+### Bring git up to date
 
-First you want to setup Git for your project in the local directory. Chromatic uses Git history to keep track of your UI components.
+Create React App has created a git repo for your project; let's check in the changes we have made:
 
 ```bash
-$ git init
-```
-
-Next add files to the first commit.
-
-```bash
-$ git add .
+$ git add -A
 ```
 
 Now commit the files.
@@ -92,7 +86,7 @@ Then [login to Chromatic](https://chromaticqa.com/start) with your GitHub accoun
 Run the test command in the command line to setup visual regression tests for Storybook. Don't forget to add your unique app code in place of `<app-code>`.
 
 ```bash
-./node_modules/.bin/chromatic test --storybook-addon --app-code=<app-code> --do-not-start
+./node_modules/.bin/chromatic test --app-code=<app-code> --do-not-start
 ```
 
 <div class="aside">

content/react/es/get-started.md

@@ -21,7 +21,7 @@ npx create-react-app taskbox
 cd taskbox
 
 # Añade Storybook:
-npx -p @storybook/cli getstorybook
+npx -p @storybook/cli sb init
 ```
 
 Podemos comprobar rápidamente que los distintos entornos de nuestra aplicación funcionan correctamente:

content/react/zh-TW/get-started.md

@@ -22,7 +22,7 @@ npx create-react-app taskbox
 cd taskbox
 
 # 加入 Storybook:
-npx -p @storybook/cli getstorybook
+npx -p @storybook/cli sb init
 ```
 
 我們可以快速檢查,我們的應用程式的各種命令是否正常工作:

content/vue/en/get-started.md

@@ -21,40 +21,7 @@ npx -p @vue/cli vue create --preset hichroma/vue-preset-learnstorybook taskbox
 cd taskbox
 
 # Add Storybook:
-npx -p @storybook/cli getstorybook
-```
-
-### Make some adjustments
-
-We need to make a couple of small adjustments to storybook's config to ensure that it works well with our Vue CLI application. First, let's merge the `babel.config.js` that Vue CLI created with the `.babelrc` that storybook created. We'll remove the `babel.config.js` and change `.babelrc` to:
-
-```json
-{
-  "presets": ["@vue/app"]
-}
-```
-
-Also, we'll add a `.storybook/webpack.config.js` to ensure that Storybook understands a couple of Vue webpack conventions:
-
-```js
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const path = require('path');
-
-module.exports = (storybookBaseConfig, configType) => {
-  storybookBaseConfig.plugins.push(new VueLoaderPlugin());
-  storybookBaseConfig.module.rules.push({
-    test: /\.css$/,
-    use: ['vue-style-loader', 'css-loader'],
-  });
-  storybookBaseConfig.resolve = {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      vue$: 'vue/dist/vue.esm.js',
-      '@': path.join(__dirname, '..', 'src'),
-    },
-  };
-  return storybookBaseConfig;
-};
+npx -p @storybook/cli sb init
 ```
 
 We can quickly check that the various environments of our application are working properly:
@@ -71,7 +38,7 @@ yarn serve
 ```
 
 <div class="aside">
-  NOTE: If <code>yarn test</code> throws an error, you may not have <a href="https://yarnpkg.com/lang/en/docs/install/">yarn installed</a> or you may need to install <code>watchman</code> as advised in <a href="https://github.com/facebook/create-react-app/issues/871#issuecomment-252297884">this issue</a>.
+  NOTE: If <code>yarn test:unit</code> throws an error, you may not have <a href="https://yarnpkg.com/lang/en/docs/install/">yarn installed</a> or you may need to install <code>watchman</code> as advised in <a href="https://github.com/facebook/create-react-app/issues/871#issuecomment-252297884">this issue</a>.
 </div>
 
 Our three frontend app modalities: automated test (Jest), component development (Storybook), and the app itself.
@@ -82,7 +49,7 @@ Depending on what part of the app you’re working on, you may want to run one o
 
 ## Reuse CSS
 
-Taskbox reuses design elements from the GraphQL and React Tutorial [example app](https://blog.hichroma.com/graphql-react-tutorial-part-1-6-d0691af25858), so we won’t need to write CSS in this tutorial. We’ll simply compile the LESS to a single CSS file and include it in our app. Copy and paste [this compiled CSS](https://github.com/hichroma/learnstorybook-code/blob/master/src/index.css) into the src/index.css file per CRA’s convention.
+Taskbox reuses design elements from the GraphQL and React Tutorial [example app](https://blog.hichroma.com/graphql-react-tutorial-part-1-6-d0691af25858), so we won’t need to write CSS in this tutorial. We’ll simply compile the LESS to a single CSS file and include it in our app. Copy and paste [this compiled CSS](https://github.com/hichroma/learnstorybook-code/blob/master/src/index.css) into the src/index.css file.
 
 ![Taskbox UI](/ss-browserchrome-taskbox-learnstorybook.png)
 

content/vue/en/simple-component.md

@@ -222,22 +222,34 @@ Make sure your components render data that doesn't change, so that your snapshot
 With the [Storyshots addon](https://github.com/storybooks/storybook/tree/master/addons/storyshots) a snapshot test is created for each of the stories. Use it by adding a development dependency on the package:
 
 ```bash
-yarn add --dev @storybook/addon-storyshots jest-vue-preprocessor
+yarn add --dev @storybook/addon-storyshots jest-vue-preprocessor babel-plugin-require-context-hook
 ```
 
 Then create an `tests/unit/storybook.spec.js` file with the following in it:
 
 ```javascript
+import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
 import initStoryshots from '@storybook/addon-storyshots';
+
+registerRequireContextHook();
 initStoryshots();
 ```
 
-We also need to add a line to our `jest.config.js`:
+We need to add a line to our `jest.config.js`:
 
 ```js
   transformIgnorePatterns: ["/node_modules/(?!(@storybook/.*\\.vue$))"],
 ```
 
+Finally, we need to make a tweak to our `babel.config.js`:
+
+```js
+module.exports = api => ({
+  presets: ['@vue/app'],
+  ...(api.env('test') && { plugins: ['require-context-hook'] }),
+});
+```
+
 Once the above is done, we can run `yarn test:unit` and see the following output:
 
 ![Task test runner](/task-testrunner.png)