chore: add storybooks

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react'
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.tsx?$/)
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
+
+configure(loadStories, module)

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link rel="stylesheet"
+href="https://maxcdn.bootstr
+apcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+    crossorigin="anonymous">

.storybook/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDirs": ["src", "stories"]
+  }
+}

.storybook/webpack.config.js

@@ -0,0 +1,19 @@
+const path = require('path')
+// const ExtractTextPlugin = require('extract-text-webpack-plugin')
+// const sassImportOnce = require('node-sass-import-once')
+
+module.exports = (baseConfig, env, config) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('awesome-typescript-loader'),
+  })
+
+  config.module.rules.unshift({
+    test: /\.scss$/,
+    loaders: ['style-loader', 'css-loader', 'sass-loader'],
+    include: path.resolve(__dirname, '../'),
+  })
+
+  config.resolve.extensions.push('.ts', '.tsx')
+  return config
+}

package.json

@@ -33,7 +33,9 @@
     "watch:build:typescript": "tsc -p tsconfig.dist.json -w",
     "watch:build:assets": "nodemon --watch src/ --ext css,d.ts,json --exec 'yarn run build:assets || exit 1'",
     "watch:build": "yarn run clean && concurrently --kill-others 'npm:watch:build:*'",
-    "watch:test": "yarn run test -- -w"
+    "watch:test": "yarn run test -- -w",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "nyc": {
     "extension": [
@@ -71,12 +73,18 @@
     "ts-key-enum": "^2.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.1",
+    "@babel/runtime": "^7.0.0",
     "@commitlint/cli": "^7.1.1",
     "@commitlint/config-conventional": "^7.1.1",
     "@sourcegraph/prettierrc": "^2.2.0",
     "@sourcegraph/tsconfig": "^3.0.0",
     "@sourcegraph/tslint-config": "^12.0.0",
     "@sqs/jsonc-parser": "^1.0.3",
+    "@storybook/addon-actions": "4.0.0-alpha.21",
+    "@storybook/addon-links": "4.0.0-alpha.21",
+    "@storybook/addons": "4.0.0-alpha.21",
+    "@storybook/react": "4.0.0-alpha.21",
     "@types/lodash-es": "^4.17.1",
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.9.4",
@@ -85,16 +93,29 @@
     "@types/react-router": "^4.0.30",
     "@types/react-router-dom": "^4.3.0",
     "@types/reactstrap": "^6.0.2",
+    "@types/storybook__addon-actions": "^3.4.1",
+    "@types/storybook__react": "3.0.9",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.0.2",
+    "babel-runtime": "^6.26.0",
     "concurrently": "^4.0.1",
     "cpy-cli": "^2.0.0",
     "del-cli": "^1.1.0",
     "esm": "^3.0.82",
+    "extract-text-webpack-plugin": "^3.0.2",
     "husky": "^0.14.3",
     "mocha": "^5.2.0",
+    "node-sass": "^4.9.3",
+    "node-sass-import-once": "^1.2.0",
     "nodemon": "^1.18.4",
     "nyc": "^13.0.1",
+    "open-color": "^1.6.3",
+    "postcss-loader": "^3.0.0",
     "prettier": "^1.14.2",
+    "raw-loader": "^0.5.1",
     "react-dom": "^16.4.2",
+    "sass-loader": "^7.1.0",
     "semantic-release": "^15.9.12",
     "source-map-support": "^0.5.9",
     "ts-node": "^7.0.1",

stories/global.scss

@@ -0,0 +1,20 @@
+@import 'open-color/open-color.scss';
+
+$primary: $oc-blue-7;
+$secondary: #2b3750;
+$success: $oc-green-7;
+$info: $oc-cyan-7;
+$warning: $oc-yellow-7;
+$danger: $oc-red-7;
+$secondary-light: darken(#f2f4f8, 5%);
+
+:root {
+    --primary: #{$primary};
+    --primary-opacity-2: rgba(28, 126, 214, 0.8);
+    --secondary: #{$secondary};
+    --success: #{$success};
+    --info: #{$info};
+    --warning: #{$warning};
+    --danger: #{$danger};
+    --text-muted: #f2f4f8;
+}

stories/ui/generic/Toggle.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react'
+
+import { Toggle } from '../../../src/ui/generic/Toggle'
+
+import '../../global.scss'
+
+/**
+ * These two imports are separated to prevent auto ordering of imports because we want the globals imported first.
+ */
+import '../../../src/ui/generic/Toggle.css'
+
+storiesOf('Toggle', module)
+    .add('Default true', () => <Toggle onToggle={action('toggled')} title="toggler" value={true} />)
+    .add('Default false', () => <Toggle onToggle={action('toggled')} title="toggler" value={false} />)
+    .add('Disabled', () => <Toggle onToggle={action('toggled')} disabled={true} title="toggler" />)