feat: finish integrating storybook (#75)

.storybook/addons.js

@@ -1,2 +1,5 @@
+import 'storybook-readme/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-viewport/register';
 import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
+import '@storybook/addon-options/register';

.storybook/config.js

@@ -1,7 +1,26 @@
-import { configure } from '@storybook/react';
+import React from 'react';
+import { addDecorator, configure } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withViewport } from '@storybook/addon-viewport';
+import { withOptions } from '@storybook/addon-options';
 
-// automatically import all files ending in *.stories.js
-const req = require.context('../src', true, /.stories.tsx$/);
+// inject custom css to all stories
+addDecorator(story => (
+  <div style={{ fontFamily: '"Roboto", sans-serif' }}>{story()}</div>
+));
+
+// setup global addons
+addDecorator(withKnobs);
+addDecorator(withViewport);
+addDecorator(
+  withOptions({
+    name: 'Doc UI',
+    url: 'https://github.com/shockits/doc-ui',
+  })
+);
+
+// automatically import all storybook files
+const req = require.context('../src', true, /.stories.(ts|tsx)$/);
 function loadStories() {
   req.keys().forEach(filename => req(filename));
 }

.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"
+  rel="stylesheet"
+/>

.storybook/webpack.config.js

@@ -1,11 +1,12 @@
-const path = require('path');
-
 module.exports = (baseConfig, env, config) => {
   config.resolve.extensions.push('.ts', '.tsx');
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     exclude: /node_modules/,
-    loader: require.resolve('awesome-typescript-loader'),
+    loaders: [
+      require.resolve('babel-loader'),
+      require.resolve('awesome-typescript-loader'),
+    ],
   });
 
   return config;