Introduced storybook

This should make developing components much easier, I hope :D
2016-12-08 12:08:04 +00:00 · 2016-12-08 12:08:04 +00:00 · 0f6169ca5d
parent 557cd5a291
commit 0f6169ca5d
10 changed files with 2013 additions and 341 deletions
--- a/ui/.storybook/config.js
+++ b/ui/.storybook/config.js
@ -0,0 +1,7 @@
+const { configure } = require('@kadira/storybook');
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);
--- a/ui/docs/yarn.lock
+++ b/ui/docs/yarn.lock
@ -1,5 +1,7 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
+
+
 abbrev@1:
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
@ -20,8 +22,8 @@ ajv-keywords@^1.1.1:
  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.2.0.tgz#676c4f087bfe1e8b12dca6fda2f3c74f417b099c"

 ajv@^4.7.0:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.9.1.tgz#08e1b0a5fddc8b844d28ca7b03510e78812ee3a0"
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.9.2.tgz#3f7dcda95b0c34bceb2d69945117d146219f1a2c"
  dependencies:
    co "^4.6.0"
    json-stable-stringify "^1.0.1"
@ -38,7 +40,7 @@ amdefine@>=0.0.4:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"

-ansi-regex@^2.0.0, ansi-regex@2:
+ansi-regex@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"

@ -120,6 +122,12 @@ async-each@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"

+async@2.0.0-rc.4:
+  version "2.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.0.0-rc.4.tgz#9b7f60724c17962a973f787419e0ebc5571dbad8"
+  dependencies:
+    lodash "^4.3.0"
+
 async@^2.1.2:
  version "2.1.4"
  resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
@ -130,12 +138,6 @@ async@~0.2.6:
  version "0.2.10"
  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"

-async@2.0.0-rc.4:
-  version "2.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.0.0-rc.4.tgz#9b7f60724c17962a973f787419e0ebc5571dbad8"
-  dependencies:
-    lodash "^4.3.0"
-
 asynckit@^0.4.0:
  version "0.4.0"
  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@ -225,8 +227,8 @@ babel-helper-replace-supers@^6.18.0, babel-helper-replace-supers@^6.8.0:
    babel-types "^6.18.0"

 babel-loader@^6.2.8:
-  version "6.2.8"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.8.tgz#30d7183aef60afc140b36443676b7acb4c12ac9c"
+  version "6.2.9"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.9.tgz#2bce6a1c29b47afa90b937ba1fb1f87084d61c61"
  dependencies:
    find-cache-dir "^0.1.1"
    loader-utils "^0.2.11"
@ -703,17 +705,6 @@ cipher-base@^1.0.0, cipher-base@^1.0.1:
  dependencies:
    inherits "^2.0.1"

-cli-color@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-1.1.0.tgz#de188cdc4929d83b67aea04110fbed40fdbf6775"
-  dependencies:
-    ansi-regex "2"
-    d "^0.1.1"
-    es5-ext "^0.10.8"
-    es6-iterator "2"
-    memoizee "^0.3.9"
-    timers-ext "0.1"
-
 cliui@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@ -887,12 +878,6 @@ css-to-react-native@^1.0.3:
    fbjs "^0.8.5"
    nearley "^2.7.7"

-d@^0.1.1, d@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
-  dependencies:
-    es5-ext "~0.10.2"
-
 dangerously-set-inner-html@2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/dangerously-set-inner-html/-/dangerously-set-inner-html-2.0.0.tgz#da73f26330c9ef0b6b12ca443091904406ddb73a"
@ -911,13 +896,7 @@ date-now@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"

-debug@^2.2.0:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.3.3.tgz#40c453e67e6e13c901ddec317af8986cda9eff8c"
-  dependencies:
-    ms "0.7.2"
-
-debug@~2.2.0:
+debug@^2.2.0, debug@~2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
  dependencies:
@ -1041,52 +1020,6 @@ error-stack-parser@^1.3.6:
  dependencies:
    stackframe "^0.3.1"

-es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.5, es5-ext@~0.10.6, es5-ext@~0.10.7:
-  version "0.10.12"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
-  dependencies:
-    es6-iterator "2"
-    es6-symbol "~3.1"
-
-es6-iterator@~0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-0.1.3.tgz#d6f58b8c4fc413c249b4baa19768f8e4d7c8944e"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.5"
-    es6-symbol "~2.0.1"
-
-es6-iterator@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
-  dependencies:
-    d "^0.1.1"
-    es5-ext "^0.10.7"
-    es6-symbol "3"
-
-es6-symbol@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-2.0.1.tgz#761b5c67cfd4f1d18afb234f691d678682cb3bf3"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.5"
-
-es6-symbol@~3.1, es6-symbol@3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-
-es6-weak-map@~0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-0.1.4.tgz#706cef9e99aa236ba7766c239c8b9e286ea7d228"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.6"
-    es6-iterator "~0.1.3"
-    es6-symbol "~2.0.1"
-
 escape-html@~1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@ -1103,13 +1036,6 @@ etag@~1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"

-event-emitter@~0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.7"
-
 eventemitter3@1.x.x:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
@ -1463,15 +1389,15 @@ http-errors@~1.5.0:
    statuses ">= 1.3.1 < 2"

 http-proxy-middleware@~0.17.1:
-  version "0.17.2"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.2.tgz#572d517a6d2fb1063a469de294eed96066352007"
+  version "0.17.3"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.3.tgz#940382147149b856084f5534752d5b5a8168cd1d"
  dependencies:
-    http-proxy "^1.15.1"
-    is-glob "^3.0.0"
-    lodash "^4.16.2"
+    http-proxy "^1.16.2"
+    is-glob "^3.1.0"
+    lodash "^4.17.2"
    micromatch "^2.3.11"

-http-proxy@^1.15.1:
+http-proxy@^1.16.2:
  version "1.16.2"
  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
  dependencies:
@ -1513,7 +1439,7 @@ inflight@^1.0.4:
    once "^1.3.0"
    wrappy "1"

-inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1, inherits@2, inherits@2.0.3:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"

@ -1604,7 +1530,7 @@ is-glob@^2.0.0, is-glob@^2.0.1:
  dependencies:
    is-extglob "^1.0.0"

-is-glob@^3.0.0:
+is-glob@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
  dependencies:
@ -1649,14 +1575,14 @@ is-utf8@^0.2.0:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"

-isarray@^1.0.0, isarray@~1.0.0, isarray@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-
 isarray@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"

+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
 isobject@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@ -1735,8 +1661,8 @@ jsprim@^1.2.2:
    verror "1.3.6"

 kind-of@^3.0.2:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.0.4.tgz#7b8ecf18a4e17f8269d73b501c9f232c96887a74"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
  dependencies:
    is-buffer "^1.0.2"

@ -1777,7 +1703,7 @@ lodash.flatten@^4.4.0:
  version "4.4.0"
  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"

-lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
  version "4.17.2"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"

@ -1795,28 +1721,10 @@ lower-case@^1.1.1:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"

-lru-queue@0.1:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
-  dependencies:
-    es5-ext "~0.10.2"
-
 media-typer@0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"

-memoizee@^0.3.9:
-  version "0.3.10"
-  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.3.10.tgz#4eca0d8aed39ec9d017f4c5c2f2f6432f42e5c8f"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-    es6-weak-map "~0.1.4"
-    event-emitter "~0.3.4"
-    lru-queue "0.1"
-    next-tick "~0.2.2"
-    timers-ext "0.1"
-
 memory-fs@^0.3.0, memory-fs@~0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
@ -1867,7 +1775,7 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7:
  dependencies:
    mime-db "~1.25.0"

-mime@^1.3.4, mime@1.3.4:
+mime@1.3.4, mime@^1.3.4:
  version "1.3.4"
  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"

@ -1887,19 +1795,15 @@ minimatch@^3.0.0, minimatch@^3.0.2:
  dependencies:
    brace-expansion "^1.0.0"

+minimist@0.0.8, minimist@~0.0.1:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
 minimist@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"

-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-
-minimist@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
-
-mkdirp@^0.5.1, "mkdirp@>=0.5 0", mkdirp@~0.5.0, mkdirp@~0.5.1:
+"mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
  dependencies:
@ -1909,19 +1813,14 @@ ms@0.7.1:
  version "0.7.1"
  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"

-ms@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
-
 nan@^2.3.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.4.0.tgz#fb3c59d45fe4effe215f0b890f8adf6eb32d2232"

 nearley@^2.7.7:
-  version "2.7.9"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.7.9.tgz#df26be2bc3922239fca4f4fb5b8e4d2c7eeab3c7"
+  version "2.7.10"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.7.10.tgz#06f9531e06a1730244635acd7dd005485550a623"
  dependencies:
-    cli-color "^1.0.0"
    nomnom "~1.6.2"
    railroad-diagrams "^1.0.0"
    randexp "^0.4.2"
@ -1930,10 +1829,6 @@ negotiator@0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"

-next-tick@~0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-0.2.2.tgz#75da4a927ee5887e39065880065b7336413b310d"
-
 no-case@^2.2.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.0.tgz#ca2825ccb76b18e6f79d573dcfbf1eace33dd164"
@ -2065,13 +1960,7 @@ on-headers@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"

-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  dependencies:
-    wrappy "1"
-
-once@~1.3.3:
+once@^1.3.0, once@~1.3.3:
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
  dependencies:
@ -2155,16 +2044,16 @@ path-is-absolute@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"

+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
 path-to-regexp@^1.5.3:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
  dependencies:
    isarray "0.0.1"

-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-
 path-type@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@ -2246,22 +2135,22 @@ public-encrypt@^4.0.0:
    parse-asn1 "^5.0.0"
    randombytes "^2.0.1"

-punycode@^1.2.4, punycode@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-
 punycode@1.3.2:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"

-qs@~6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"

 qs@6.2.0:
  version "6.2.0"
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"

+qs@~6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
+
 query-string@4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822"
@ -2525,7 +2414,7 @@ right-align@^0.1.1:
  dependencies:
    align-text "^0.1.1"

-rimraf@~2.5.1, rimraf@~2.5.4, rimraf@2:
+rimraf@2, rimraf@~2.5.1, rimraf@~2.5.4:
  version "2.5.4"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
  dependencies:
@ -2535,7 +2424,7 @@ ripemd160@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"

-semver@~5.3.0, "semver@2 || 3 || 4 || 5":
+"semver@2 || 3 || 4 || 5", semver@~5.3.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"

@ -2700,10 +2589,6 @@ strict-uri-encode@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"

-string_decoder@^0.10.25, string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-
 string-width@^1.0.1, string-width@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@ -2712,6 +2597,10 @@ string-width@^1.0.1, string-width@^1.0.2:
    is-fullwidth-code-point "^1.0.0"
    strip-ansi "^3.0.0"

+string_decoder@^0.10.25, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
 stringstream@~0.0.4:
  version "0.0.5"
  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
@ -2789,13 +2678,6 @@ timers-browserify@^1.4.2:
  dependencies:
    process "~0.11.0"

-timers-ext@0.1:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.0.tgz#00345a2ca93089d1251322054389d263e27b77e2"
-  dependencies:
-    es5-ext "~0.10.2"
-    next-tick "~0.2.2"
-
 title-case@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.0.tgz#c68ccb4232079ded64f94b91b4941ade91391979"
@ -2869,16 +2751,16 @@ upper-case@^1.0.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"

-url-parse@^1.1.1:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.7.tgz#025cff999653a459ab34232147d89514cc87d74a"
+url-parse@1.0.x:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
  dependencies:
    querystringify "0.0.x"
    requires-port "1.0.x"

-url-parse@1.0.x:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
+url-parse@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.7.tgz#025cff999653a459ab34232147d89514cc87d74a"
  dependencies:
    querystringify "0.0.x"
    requires-port "1.0.x"
@ -2894,7 +2776,7 @@ util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

-util@^0.10.3, util@0.10.3:
+util@0.10.3, util@^0.10.3:
  version "0.10.3"
  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
  dependencies:
@ -3035,22 +2917,22 @@ wide-align@^1.1.0:
  dependencies:
    string-width "^1.0.1"

-window-size@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
-
 window-size@0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"

-wordwrap@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+window-size@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"

 wordwrap@0.0.2:
  version "0.0.2"
  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"

+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
 wrap-ansi@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
@ -3103,4 +2985,3 @@ yargs@~3.10.0:
    cliui "^2.1.0"
    decamelize "^1.0.0"
    window-size "0.1.0"
-
--- a/ui/package.json
+++ b/ui/package.json
@ -8,7 +8,9 @@
    "start": "cd docs && npm start",
    "lint": "make lint",
    "test": "make test",
-    "build": "babel src --out-dir dist --source-maps inline"
+    "build": "babel src --out-dir dist --source-maps inline",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "color": "^1.0.1",
@ -22,11 +24,13 @@
    "lodash.isundefined": "^3.0.1",
    "param-case": "^2.1.0",
    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
    "react-icons": "^2.2.1",
    "reduce-css-calc": "^1.3.0",
    "styled-components": "^1.1.2"
  },
  "devDependencies": {
+    "@kadira/storybook": "^2.21.0",
    "ava": "^0.17.0",
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.2",
--- a/ui/src/components/avatar/index.js
+++ b/ui/src/components/avatar/index.js
@ -1,5 +1,6 @@
 // TODO: use a checkbox

+const React = require('react');
 const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
@ -18,11 +19,14 @@ const {

 const Picture = styled.img`
  ${verticallyAlignCenter}
-  max-width: 60%;
+  max-width: 100%;
 `;

 const Letter = styled.p`
  font-size: 2rem;
+  margin-top: 0;
+  margin-bottom: 1em;
+  line-height: 1.5;
 `;

 const Avatar = styled.div`
@ -51,7 +55,7 @@ module.exports = ({
    background: color
  };

-  const letter = name.split('')[0];
+  const letter = name[0];
  const av = src ? (
    <Picture
      alt={alt || name}
--- a/ui/src/index.js
+++ b/ui/src/index.js
@ -1,5 +1,5 @@
 module.exports = {
-  // Avatar: require('./components/avatar'),
+  Avatar: require('./components/avatar'),
  Base: require('./components/base'),
  // Button: require('./components/button'),
  // ButtonIcon: require('./components/button-icon'),
--- a/ui/src/shared/functions.js
+++ b/ui/src/shared/functions.js
@ -2,7 +2,7 @@ const calc = require('reduce-css-calc');

 module.exports = {
  remcalc: function(values) {
-    values = values.replace('px', '').split(' ');
+    values = values.toString().replace('px', '').split(' ');

    let outputRems = '';
    const base = 16;
--- a/ui/stories/Button.js
+++ b/ui/stories/Button.js
@ -0,0 +1,27 @@
+import React from 'react';
+
+const buttonStyles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+const Button = ({ children, onClick }) => (
+  <button
+    style={buttonStyles}
+    onClick={onClick}
+  >
+    {children}
+  </button>
+);
+
+Button.propTypes = {
+  children: React.PropTypes.string.isRequired,
+  onClick: React.PropTypes.func,
+};
+
+export default Button;
--- a/ui/stories/Welcome.js
+++ b/ui/stories/Welcome.js
@ -0,0 +1,72 @@
+import React from 'react';
+
+const styles = {
+  main: {
+    margin: 15,
+    maxWidth: 600,
+    lineHeight: 1.4,
+    fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+  },
+
+  logo: {
+    width: 200,
+  },
+
+  link: {
+    color: '#1474f3',
+    textDecoration: 'none',
+    borderBottom: '1px solid #1474f3',
+    paddingBottom: 2,
+  },
+
+  code: {
+    fontSize: 15,
+    fontWeight: 600,
+    padding: "2px 5px",
+    border: "1px solid #eae9e9",
+    borderRadius: 4,
+    backgroundColor: '#f3f2f2',
+    color: '#3a3a3a',
+  },
+};
+
+export default class Welcome extends React.Component {
+  showApp(e) {
+    e.preventDefault();
+    if(this.props.showApp) this.props.showApp();
+  }
+
+  render() {
+    return (
+      <div style={styles.main}>
+        <h1>Welcome to STORYBOOK</h1>
+        <p>
+          This is a UI component dev environment for your app.
+        </p>
+        <p>
+          We've added some basic stories inside the <code style={styles.code}>src/stories</code> directory.
+          <br/>
+          A story is a single state of one or more UI components. You can have as many stories as you want.
+          <br/>
+          (Basically a story is like a visual test case.)
+        </p>
+        <p>
+          See these sample <a style={styles.link} href='#' onClick={this.showApp.bind(this)}>stories</a> for a component called <code style={styles.code}>Button</code>.
+        </p>
+        <p>
+          Just like that, you can add your own components as stories.
+          <br />
+          You can also edit those components and see changes right away.
+          <br />
+          (Try editing the <code style={styles.code}>Button</code> component
+          located at <code style={styles.code}>src/stories/Button.js</code>.)
+        </p>
+        <p>
+          This is just one thing you can do with Storybook.
+          <br/>
+          Have a look at the <a style={styles.link} href="https://github.com/kadirahq/react-storybook" target="_blank">React Storybook</a> repo for more information.
+        </p>
+      </div>
+    );
+  }
+}
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@ -0,0 +1,93 @@
+const React = require('react');
+const {
+  storiesOf,
+  action,
+  linkTo
+} = require('@kadira/storybook');
+
+const {
+  Base,
+  Container,
+  Row,
+  Column,
+  Avatar
+} = require('../src/');
+
+const styles = {
+  base: {
+    backgroundColor: '#FFEBEE'
+  },
+  row: {
+    backgroundColor: '#EF5350'
+  },
+  column: {
+    backgroundColor: '#B71C1C',
+    textAlign: 'center',
+    color: 'white'
+  }
+};
+
+storiesOf('Grid', module)
+  .add('Row and Column', () => (
+    <Base>
+      <Container fluid>
+        <Row>
+          <Column
+            md={10}
+            sm={9}
+            style={styles.base}
+            xs={12}
+          >
+            <Row around style={styles.row}>
+              <Column
+                lg={4}
+                md={3}
+                sm={2}
+                style={styles.column}
+                xs={1}
+              >1</Column>
+              <Column
+                lg={4}
+                md={3}
+                sm={2}
+                style={styles.column}
+                xs={1}
+              >2</Column>
+              <Column
+                lg={4}
+                md={3}
+                sm={2}
+                style={styles.column}
+                xs={1}
+              >3</Column>
+            </Row>
+          </Column>
+        </Row>
+      </Container>
+    </Base>
+  ));
+
+storiesOf('Avatar', module)
+  .add('Avatar Picture', () => (
+    <Avatar
+      color='#ef6176'
+      name='Tom'
+      src='https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg'
+    />
+  ))
+  .add('Avatar Text', () => (
+    <Base>
+      <Avatar
+        color='#35a8c0'
+        name='Alex'
+      />
+      <Avatar
+        color='#35a8c0'
+        name='Thomas'
+      />
+      <Avatar
+        color='#35a8c0'
+        name='귀여운 오리'
+      />
+    </Base>
+  ));
--- a/ui/yarn.lock
+++ b/ui/yarn.lock