Added Storybook environment

Author: BiosBoy

.DS_Store

@@ -0,0 +1,4 @@
+# Storybook
+
+## 0.0.1
+ * Init release.

.storybook/.DS_Store

@@ -0,0 +1,3 @@
+import withCustomStyles from './withCustomStyles'
+
+export { withCustomStyles }

.storybook/CHANGELOG.md

@@ -0,0 +1,8 @@
+// Adds an ability to set custom styles for the body node.
+const withCustomStyles = (customStyles: string) => (story: Function) => {
+  document.body.setAttribute('style', customStyles)
+
+  return story()
+}
+
+export default withCustomStyles

.storybook/addons/index.ts

@@ -0,0 +1,7 @@
+export const BACKGROUNDS = {
+  backgrounds: [
+    { name: 'ccc', value: '#ccc', default: true },
+    { name: 'white', value: '#fff' },
+    { name: 'black', value: '#111' }
+  ]
+}

.storybook/addons/withCustomStyles.ts

@@ -0,0 +1,117 @@
+const webpack = require('webpack')
+const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
+
+const globals = require('../globals')
+
+module.exports = {
+  stories: ['../**/*.story.*'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-knobs',
+    '@storybook/addon-links',
+    '@storybook/addon-viewport'
+  ],
+  webpackFinal: async (config) => {
+    // TODO: investigate how we can implement pure webpack.config.js in Storybook!!!
+    const customConfig = {
+      ...config,
+      plugins: [
+        ...config.plugins,
+        new webpack.DefinePlugin(globals),
+        new MiniCssExtractPlugin({
+          filename: '[name].css',
+          chunkFilename: '[id].css'
+        }),
+        new HardSourceWebpackPlugin()
+      ],
+      module: {
+        ...config.module,
+        rules: [
+          {
+            test: /\.(js|jsx|ts|tsx)?$/,
+            loader: 'ts-loader',
+            exclude: [/node_modules/]
+          },
+          // JSON
+          {
+            type: 'javascript/auto',
+            test: /\.json$/,
+            loader: 'json-loader'
+          },
+          // SCSS
+          {
+            test: /(\.cssmodule|\.cssmodule\.scss)$/,
+            use: [
+              {
+                loader: MiniCssExtractPlugin.loader
+              },
+              {
+                loader: 'css-modules-typescript-loader'
+              },
+              {
+                loader: 'css-loader',
+                modules: {
+                  localIdentName: '[local]___[hash:base64:5]'
+                }
+              },
+              {
+                loader: 'postcss-loader'
+              },
+              {
+                loader: 'sass-loader'
+              }
+            ]
+          },
+          // FONTS
+          {
+            test: /\.woff(\?.*)?$/,
+            loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff'
+          },
+          {
+            test: /\.woff2(\?.*)?$/,
+            loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2'
+          },
+          {
+            test: /\.otf(\?.*)?$/,
+            loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype'
+          },
+          {
+            test: /\.ttf(\?.*)?$/,
+            loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream'
+          },
+          {
+            test: /\.eot(\?.*)?$/,
+            loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]'
+          },
+          // IMAGES
+          {
+            test: /\.svg(\?.*)?$/,
+            loader: 'url-loader?limit=8192'
+          },
+          {
+            test: /\.(png|jpg|webp)$/,
+            loader: 'url-loader?limit=8192'
+          }
+        ]
+      },
+      externals: {
+        ...config.externals,
+        react: 'React',
+        'react-dom': 'ReactDOM'
+      },
+      resolve: {
+        ...config.resolve,
+        modules: [...config.resolve.modules, 'node_modules'],
+        extensions: [...config.resolve.extensions, '.ts', '.tsx', '.js', '.jsx', '.json']
+      }
+    }
+
+    return customConfig
+  },
+  typescript: {
+    reactDocgen: 'none' // TODO: remove this once the error on 70% will be fixed (about undefined .properties)
+  }
+}

.storybook/constants/index.js

@@ -0,0 +1,10 @@
+const express = require('express')
+const path = require('path')
+const proxy = require('../bin/proxy')
+
+module.exports = (router) => {
+  // custom storybook server middleware for static folder serving
+  router.use('/public', express.static(path.join(__dirname, '.', 'public')))
+  // custom storybook proxy for handling static files from real DEV server
+  router.use('/', proxy)
+}

.storybook/generated-stories-entry.js

@@ -0,0 +1,11 @@
+<script type="text/javascript" src="/js/script/lib/react.16.17.1.development.js"></script>
+<script type="text/javascript" src="/js/script/lib/react-dom.16.17.1.development.js"></script>
+<script type="text/javascript" src="/js/script/lib/prop-types.min.js"></script>
+
+<style>
+  @import url('https://fonts.googleapis.com/css?family=Fjalla+One');
+
+  * {
+    font-family: 'Fjalla One', sans-serif;
+  }
+</style>