From 530a2a40b88a943408dbe58f46766b1a280205ca Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@thesnail.org>
Date: Mon, 20 Jan 2020 15:29:41 +1100
Subject: [PATCH] Update simple-component configs to address comments

https://github.com/chromaui/learnstorybook.com/pull/249/files#r366488733
---
 .../angular/en/simple-component.md            | 38 ++++++++++---------
 .../react/en/simple-component.md              | 14 ++++++-
 .../vue/en/simple-component.md                | 14 ++++++-
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/content/intro-to-storybook/angular/en/simple-component.md b/content/intro-to-storybook/angular/en/simple-component.md
index 83a6d8d81..801b6aea7 100644
--- a/content/intro-to-storybook/angular/en/simple-component.md
+++ b/content/intro-to-storybook/angular/en/simple-component.md
@@ -132,28 +132,22 @@ When creating a story we use a base task (`task`) to build out the shape of the
 
 ## Config
 
-We also have to make one small change to the Storybook configuration so it uses our LESS file. We can do that by adding a file `.storybook/preview.js` which runs when Storybook starts in our browser:
+We'll need to make a couple of changes to the Storybook configuration so it notices not only our recently created stories, but also allows us to use our LESS file.
 
-```javascript
-// .storybook/preview.js
-
-import '../src/styles.less';
-```
-
-In order to support that LESS import we'll need to play around a bit with webpack. Just create a `webpack.config.js` file inside the `.storybook` folder and paste the following:
+Start by changing your Storybook configuration file (`.storybook/main.js`) to the following:
 
 ```javascript
-const path = require('path');
-
+// .storybook/main.js
 module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.less$/,
-        loaders: ['style-loader', 'css-loader', 'less-loader'],
-        include: path.resolve(__dirname, '../'),
-      },
-    ],
+  stories: ['../src/components/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  webpackFinal: config => {
+    config.rules.push({
+      test: /\.less$/,
+      loaders: ['style-loader', 'css-loader', 'less-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+    return config;
   },
 };
 ```
@@ -164,6 +158,14 @@ You'll also need to install the corresponding loaders:
 yarn add -D less-loader css-loader style-loader
 ```
 
+After completing the changes above, inside the `.storybook` folder, add a new file called `preview.js` with the following:
+
+```javascript
+// .storybook/preview.js
+
+import '../src/styles.less';
+```
+
 Once we’ve done this, restarting the Storybook server should yield test cases for the three TaskComponent states:
 
 <video autoPlay muted playsInline controls >
diff --git a/content/intro-to-storybook/react/en/simple-component.md b/content/intro-to-storybook/react/en/simple-component.md
index 560fc46d2..27be4f201 100644
--- a/content/intro-to-storybook/react/en/simple-component.md
+++ b/content/intro-to-storybook/react/en/simple-component.md
@@ -111,7 +111,19 @@ When creating a story we use a base task (`taskData`) to build out the shape of
 
 ## Config
 
-We also have to make one small change to the Storybook configuration so it uses our CSS file. We can do that by adding a file `.storybook/preview.js` which runs when Storybook starts in our browser:
+We'll need to make a couple of changes to the Storybook configuration so it notices not only our recently created stories, but also allows us to use our CSS file.
+
+Start by changing your Storybook configuration file (`.storybook/main.js`) to the following:
+
+```javascript
+// .storybook/main.js
+module.exports = {
+  stories: ['../src/components/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
+```
+
+After completing the change above, inside the `.storybook` folder, add a new file called `preview.js` with the following:
 
 ```javascript
 // .storybook/preview.js
diff --git a/content/intro-to-storybook/vue/en/simple-component.md b/content/intro-to-storybook/vue/en/simple-component.md
index e8ce89379..b8ee388ab 100644
--- a/content/intro-to-storybook/vue/en/simple-component.md
+++ b/content/intro-to-storybook/vue/en/simple-component.md
@@ -143,7 +143,19 @@ When creating a story we use a base task (`taskData`) to build out the shape of
 
 ## Config
 
-We also have to make one small change to the Storybook configuration so it uses our CSS file. We can do that by adding a file `.storybook/preview.js` which runs when Storybook starts in our browser:
+We'll need to make a couple of changes to the Storybook configuration so it notices not only our recently created stories, but also allows us to use our CSS file.
+
+Start by changing your Storybook configuration file (`.storybook/main.js`) to the following:
+
+```javascript
+// .storybook/main.js
+module.exports = {
+  stories: ['../src/components/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
+```
+
+After completing the change above, inside the `.storybook` folder, add a new file called `preview.js` with the following:
 
 ```javascript
 // .storybook/preview.js