Add storybook integration

4 files changed, 71 insertions, 0 deletions

diff --git a/.storybook/addons.js b/.storybook/addons.js
new file mode 100644
index 000000000..4e162fa27
--- /dev/null
+++ b/.storybook/addons.js
@@ -0,0 +1,2 @@
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-actions/register'
diff --git a/.storybook/config.js b/.storybook/config.js
new file mode 100644
index 000000000..48e3997eb
--- /dev/null
+++ b/.storybook/config.js
@@ -0,0 +1,11 @@
+import { configure } from '@storybook/react'
+import '../ui/app/css/index.scss'
+
+const req = require.context('../ui/app/components', true, /\.stories\.js$/)
+
+function loadStories () {
+  require('./decorators')
+  req.keys().forEach((filename) => req(filename))
+}
+
+configure(loadStories, module)
diff --git a/.storybook/decorators.js b/.storybook/decorators.js
new file mode 100644
index 000000000..7b0745ac4
--- /dev/null
+++ b/.storybook/decorators.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { addDecorator } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+import { withKnobs } from '@storybook/addon-knobs/react'
+
+const styles = {
+  height: '100vh',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}
+
+const CenterDecorator = story => (
+  <div style={styles}>
+    { story() }
+  </div>
+)
+
+addDecorator((story, context) => withInfo()(story)(context))
+addDecorator(withKnobs)
+addDecorator(CenterDecorator)
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
new file mode 100644
index 000000000..bd66954f3
--- /dev/null
+++ b/.storybook/webpack.config.js
@@ -0,0 +1,37 @@
+const path = require('path')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        loaders: [{
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'fonts/',
+          },
+        }],
+      },
+      {
+        test: /\.scss$/,
+        loaders: [
+          'style-loader',
+          'css-loader',
+          'resolve-url-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      './fonts/Font_Awesome': path.resolve(__dirname, '../fonts/Font_Awesome'),
+    },
+  },
+}