gh-422: Upgrade storybook and reorganize stories

.prettierignore

@@ -3,4 +3,5 @@ dist/
 lib/
 node_modules/
 .cache/
+temp
 *.(jpeg|png|gif)

.storybook/main.js

@@ -0,0 +1,27 @@
+const path = require('path');
+
+// Export a function. Accept the base config as the only param.
+module.exports = {
+    stories: ['../stories/*.js'],
+    addons: [
+        '@storybook/addon-actions',
+        '@storybook/addon-viewport/register',
+        '@storybook/addon-knobs',
+        '@storybook/addon-storysource',
+    ],
+    webpackFinal: async (config, { configType }) => {
+        config.module.rules.push({
+            test: /\.scss$/,
+            use: ['style-loader', 'css-loader', 'sass-loader'],
+            include: path.resolve(__dirname, '../src'),
+        });
+
+        config.module.rules.push({
+            test: /stories\/(.+).js?$/,
+            loaders: [require.resolve('@storybook/addon-storysource/loader')],
+            enforce: 'pre',
+        });
+
+        return config;
+    },
+};

gulpfile.js

@@ -5,15 +5,15 @@ var cssTask = require('./tasks/css');
 var ghPagesTask = require('./tasks/gh-pages');
 
 gulp.task('test', function(done) {
-    return runShellCommand('yarn jest', done);
+    return runShellCommand('yarn', ['jest'], done);
 });
 
 gulp.task('build-website', function(done) {
-    return runShellCommand('yarn build-website', done);
+    return runShellCommand('yarn', ['build-website'], done);
 });
 
 gulp.task('build-storybook', function(done) {
-    return runShellCommand('yarn build-storybook', done);
+    return runShellCommand('yarn', ['build-storybook'], done);
 });
 
 gulp.task('build-styles', function(done) {

package.json

@@ -60,7 +60,15 @@
         "@babel/preset-react": "^7.9.4",
         "@kadira/react-storybook-addon-info": "^3.4.0",
         "@kadira/storybook": "^2.35.3",
+        "@storybook/addon-actions": "^5.3.18",
+        "@storybook/addon-essentials": "^5.3.18",
+        "@storybook/addon-knobs": "^5.3.18",
+        "@storybook/addon-storysource": "^5.3.18",
+        "@storybook/addon-viewport": "^5.3.18",
+        "@storybook/react": "^5.3.18",
         "auto-changelog": "^1.10.2",
+        "babel-loader": "^8.1.0",
+        "css-loader": "^3.5.2",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.2",
         "gh-pages": "^0.11.0",
@@ -82,7 +90,9 @@
         "react": "^16.9.0",
         "react-dom": "^16.9.0",
         "react-player": "^1.15.3",
-        "react-test-renderer": "^16.9.0"
+        "react-test-renderer": "^16.9.0",
+        "sass-loader": "^8.0.2",
+        "style-loader": "^1.1.3"
     },
     "dependencies": {
         "classnames": "^2.2.5",