feat(storybook): Implement Storybook 5.0 (#3821)

* feat(storybook): Implement Storybook 5.0

* Fix compiling error on docs generation

Author: brandonferrua

.babelrc

@@ -2,7 +2,8 @@
   "presets": ["react"],
   "plugins": [
     "transform-es2015-modules-commonjs",
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    "syntax-dynamic-import"
   ],
   "env": {
     "test": {

.gitignore

@@ -18,6 +18,7 @@
 !/.travis.yml
 !/.github
 !/.prettierignore
+!/.storybook
 
 # Add a .gitkeep file in an empty
 # directory to check it in the repository

.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-options/register';
+import '@storybook/addon-a11y/register';

.storybook/config.js

@@ -0,0 +1,24 @@
+import { configure, addDecorator, addParameters } from '@storybook/react';
+import { withA11y } from '@storybook/addon-a11y';
+import { create } from '@storybook/theming';
+
+const req = require.context('../ui/', true, /\.stories\.js$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+// Global Decorators
+// https://storybook.js.org/addons/introduction/#1-decorators
+addDecorator(withA11y);
+addParameters({
+  options: {
+    theme: create({
+      base: 'light',
+      brandTitle: 'SLDS',
+      brandUrl: 'http://www.lightningdesignsystem.com'
+    })
+  }
+});
+
+configure(loadStories, module);

.storybook/preview-head.html

@@ -0,0 +1 @@
+<style>.sb-show-main { background: white; padding: 2rem; height: 100vh; } </style>

.storybook/scss/framework/config.scss

@@ -0,0 +1,6 @@
+// This file is used to override any system variables when webpack is compiling the
+// modules stylesheets for story book etc. as they can't be reletive to the
+// assets folder, as that doesn't exist in the storybook environement
+
+$static-image-path: '../../assets/images';
+$static-font-path: '../../assets/fonts/webfonts';

.storybook/webpack.config.js

@@ -0,0 +1,66 @@
+const path = require('path');
+const paths = require('../scripts/helpers/paths');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = async ({ config, mode }) => {
+  config.module.rules.push(
+    {
+      test: /\.scss$/,
+      include: [
+        path.resolve(__dirname, '../ui'),
+        path.resolve(__dirname, '../.storybook'),
+        path.resolve(__dirname, '../shared'),
+        path.resolve(__dirname, '../assets')
+      ],
+      use: [
+        {
+          loader: path.resolve(
+            __dirname,
+            '../scripts/compile/lwc-style-loader.js'
+          )
+        },
+        {
+          loader: 'css-loader',
+          options: { importLoaders: 2 }
+        },
+        {
+          loader: 'postcss-loader',
+          options: { sourceMap: true }
+        },
+        {
+          loader: 'resolve-url-loader',
+          options: { sourceMap: true }
+        },
+        {
+          loader: 'sass-loader',
+          options: { sourceMap: true, outputStyle: 'compressed' }
+        },
+        // Reads Sass vars from files or inlined in the options property
+        // needed to reset the asset paths for webpack to load them, as we
+        //  assume we're loading from the assets folder with a relitive path
+        // from the compile css monolith to the assets, like fonts
+        {
+          loader: '@epegzz/sass-vars-loader',
+          options: {
+            syntax: 'scss',
+            files: [path.resolve(__dirname, './scss/framework/config.scss')]
+          }
+        }
+      ]
+    },
+    {
+      test: /\.css$/,
+      include: path.resolve(__dirname, '../ui'),
+      use: ['raw-loader']
+    }
+  );
+  config.plugins.push(
+    new CopyWebpackPlugin([
+      {
+        from: paths.icons,
+        to: '/assets/icons'
+      }
+    ])
+  );
+  return config;
+};