From ed97f80a00af77bb7f94e0d8c6f08b6b7161b057 Mon Sep 17 00:00:00 2001
From: Kiwi <vinh@wikiwi.io>
Date: Wed, 4 Jul 2018 14:01:08 -0300
Subject: [PATCH 01/69] Use JSDocs comments (#1727)

---
 scripts/watcher/CommandExecutor.ts     | 6 +++---
 scripts/watcher/LongRunningExecutor.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/watcher/CommandExecutor.ts b/scripts/watcher/CommandExecutor.ts
index 60cf15e6a..fddba0b8b 100644
--- a/scripts/watcher/CommandExecutor.ts
+++ b/scripts/watcher/CommandExecutor.ts
@@ -5,13 +5,13 @@ import { Executor } from "./types";
 
 interface CommandExecutorOptions {
   args?: ReadonlyArray<string>;
-  // If true, allow spawning multiple processes.
+  /** If true, allow spawning multiple processes. */
   spawnMutiple?: boolean;
 
-  // Specify the period in which the process is started at max once.
+  /** Specify the period in which the process is started at max once. */
   debounce?: number | false;
 
-  // If true, will run command upon initialization.
+  /** If true, will run command upon initialization. */
   runOnInit?: boolean;
 }
 
diff --git a/scripts/watcher/LongRunningExecutor.ts b/scripts/watcher/LongRunningExecutor.ts
index cffe6f7db..7019c1fb3 100644
--- a/scripts/watcher/LongRunningExecutor.ts
+++ b/scripts/watcher/LongRunningExecutor.ts
@@ -6,7 +6,7 @@ import { Executor } from "./types";
 interface LongRunningExecutorOptions {
   args?: ReadonlyArray<string>;
 
-  // Specify the period in which the process is restarted at max once.
+  /** Specify the period in which the process is restarted at max once. */
   debounce?: number;
 }
 

From 52594dc02802390c8e68c979014a9095b2b76139 Mon Sep 17 00:00:00 2001
From: Kiwi <vinh@wikiwi.io>
Date: Wed, 4 Jul 2018 14:12:43 -0300
Subject: [PATCH 02/69] [next] Remove nodemon (#1725)

* Remove old nodemon configs

* Remove nodemon
---
 config/nodemon/relay-stream.json |  8 ----
 config/nodemon/server.json       | 10 -----
 package-lock.json                | 77 --------------------------------
 package.json                     |  3 +-
 4 files changed, 1 insertion(+), 97 deletions(-)
 delete mode 100644 config/nodemon/relay-stream.json
 delete mode 100644 config/nodemon/server.json

diff --git a/config/nodemon/relay-stream.json b/config/nodemon/relay-stream.json
deleted file mode 100644
index dc9556823..000000000
--- a/config/nodemon/relay-stream.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "exec": "npm-run-all compile:relay-stream",
-  "ext": "ts,tsx,graphql",
-  "watch": [
-    "./src/core/client/stream",
-    "./src/core/**/*.graphql"
-  ]
-}
diff --git a/config/nodemon/server.json b/config/nodemon/server.json
deleted file mode 100644
index 08472086e..000000000
--- a/config/nodemon/server.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "exec": "npm run start:development",
-  "ext": "ts,graphql",
-  "watch": [
-    "./src"
-  ],
-  "ignore": [
-    "./src/client"
-  ]
-}
diff --git a/package-lock.json b/package-lock.json
index b3622a48d..6038504da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9820,12 +9820,6 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
-    "ignore-by-default": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
-      "dev": true
-    },
     "immutable": {
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
@@ -12790,50 +12784,6 @@
         "which": "^1.3.0"
       }
     },
-    "nodemon": {
-      "version": "1.17.5",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-1.17.5.tgz",
-      "integrity": "sha512-FG2mWJU1Y58a9ktgMJ/RZpsiPz3b7ge77t/okZHEa4NbrlXGKZ8s1A6Q+C7+JPXohAfcPALRwvxcAn8S874pmw==",
-      "dev": true,
-      "requires": {
-        "chokidar": "^2.0.2",
-        "debug": "^3.1.0",
-        "ignore-by-default": "^1.0.1",
-        "minimatch": "^3.0.4",
-        "pstree.remy": "^1.1.0",
-        "semver": "^5.5.0",
-        "supports-color": "^5.2.0",
-        "touch": "^3.1.0",
-        "undefsafe": "^2.0.2",
-        "update-notifier": "^2.3.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "nopt": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
@@ -15936,15 +15886,6 @@
       "integrity": "sha512-+AqO1Ae+N/4r7Rvchrdm432afjT9hqJRyBN3DQv9At0tPz4hIFSGKbq64fN9dVoCow4oggIIax5/iONx0r9hZw==",
       "dev": true
     },
-    "pstree.remy": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.0.tgz",
-      "integrity": "sha512-q5I5vLRMVtdWa8n/3UEzZX7Lfghzrg9eG2IKk2ENLSofKRCXVqMvMUHxCKgXNaqH/8ebhBxrqftHWnyTFweJ5Q==",
-      "dev": true,
-      "requires": {
-        "ps-tree": "^1.1.0"
-      }
-    },
     "public-encrypt": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
@@ -18801,15 +18742,6 @@
       "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
       "dev": true
     },
-    "touch": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
-      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
-      "dev": true,
-      "requires": {
-        "nopt": "~1.0.10"
-      }
-    },
     "tough-cookie": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
@@ -19684,15 +19616,6 @@
       "integrity": "sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==",
       "dev": true
     },
-    "undefsafe": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
-      "integrity": "sha1-Il9rngM3Zj4Njnz9aG/Cg2zKznY=",
-      "dev": true,
-      "requires": {
-        "debug": "^2.2.0"
-      }
-    },
     "unherit": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.1.tgz",
diff --git a/package.json b/package.json
index 5f615b41f..707d65836 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,6 @@
     "html-webpack-plugin": "^3.2.0",
     "jest": "^23.2.0",
     "loader-utils": "^1.1.0",
-    "nodemon": "^1.17.5",
     "npm-run-all": "^4.1.3",
     "postcss-flexbugs-fixes": "^3.3.1",
     "postcss-font-magician": "^2.2.1",
@@ -141,4 +140,4 @@
     "webpack-hot-client": "^4.0.3",
     "webpack-manifest-plugin": "^2.0.3"
   }
-}
\ No newline at end of file
+}

From e4c0e16e1b492a1212b5acd0da8873eeb027db20 Mon Sep 17 00:00:00 2001
From: Kiwi <vinh@wikiwi.io>
Date: Thu, 5 Jul 2018 12:04:38 -0300
Subject: [PATCH 03/69] [next] Jest implementation for React Components (#1733)

* Make jest testing work with custom path and css modules

* Add first test

* feat: added unit tests to ci

* fix: updated package-lock.json

* Update cssTransform.js

* Update cssTransform.js

* Fix test in ci
---
 .circleci/config.yml                          |  17 ++
 config/jest.config.js                         |   9 +-
 config/jest/cssTransform.js                   |  96 +++++++-
 package-lock.json                             | 229 ++++++++++--------
 package.json                                  |   9 +-
 scripts/test.js                               |   2 +-
 .../client/stream/components/Comment.spec.tsx |  28 +++
 .../__snapshots__/Comment.spec.tsx.snap       |  33 +++
 8 files changed, 308 insertions(+), 115 deletions(-)
 create mode 100644 src/core/client/stream/components/Comment.spec.tsx
 create mode 100644 src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 908210e13..bd7493f6b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -43,6 +43,20 @@ jobs:
           name: Perform linting
           command: npm run lint
 
+  # unit_tests will run the unit tests.
+  unit_tests:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - run:
+          name: Compile schemas and types
+          command: npm run compile
+      - run:
+          name: Perform testing
+          command: npm run test
+
   # build will build the static assets and server typescript files.
   build:
     <<: *job_defaults
@@ -74,6 +88,9 @@ workflows:
       - lint:
           requires:
             - npm_dependencies
+      - unit_tests:
+          requires:
+            - npm_dependencies
       - build:
           requires:
             - npm_dependencies
diff --git a/config/jest.config.js b/config/jest.config.js
index 682a2c8a4..ed9b641ae 100644
--- a/config/jest.config.js
+++ b/config/jest.config.js
@@ -8,7 +8,7 @@ module.exports = {
   setupFiles: ["<rootDir>/config/polyfills.js"],
   testMatch: [
     "**/__tests__/**/*.{js,jsx,mjs,ts,tsx}",
-    "**/*.(spec|test).{js,jsx,mjs,ts,tsx}",
+    "**/*.spec.{js,jsx,mjs,ts,tsx}",
   ],
   testEnvironment: "node",
   testURL: "http://localhost",
@@ -22,7 +22,12 @@ module.exports = {
     "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$",
   ],
   moduleNameMapper: {
-    "^react-native$": "react-native-web",
+    "^talk-admin/(.*)$": "<rootDir>/src/core/client/admin/$1",
+    "^talk-ui/(.*)$": "<rootDir>/src/core/client/ui/$1",
+    "^talk-stream/(.*)$": "<rootDir>/src/core/client/stream/$1",
+    "^talk-framework/(.*)$": "<rootDir>/src/core/client/framework/$1",
+    "^talk-common/(.*)$": "<rootDir>/src/core/common/$1",
+    "^talk-server/(.*)$": "<rootDir>/src/core/server/$1",
   },
   moduleFileExtensions: [
     "web.js",
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
index 606cc276b..90b6bfa63 100644
--- a/config/jest/cssTransform.js
+++ b/config/jest/cssTransform.js
@@ -1,14 +1,94 @@
 "use strict";
 
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
+// Adapted version of https://github.com/Connormiha/jest-css-modules-transform
+// Copyright https://github.com/Connormiha/jest-css-modules-transform/graphs/contributors
+// This oututs `module.exports = cssObject` instead of `module.exports = { default: cssObject }`;
+
+const { sep: pathSep, resolve } = require("path");
+const postcss = require("postcss");
+const postcssNested = postcss([require("postcss-nested")]);
+
+const REG_EXP_NAME_BREAK_CHAR = /[\s,.{/#[:]/;
+
+const getCSSSelectors = (css, path) => {
+  const end = css.length;
+  let i = 0;
+  let char;
+  let bracketsCount = 0;
+  const result = {};
+
+  while (i < end) {
+    if (i === -1) {
+      throw Error(`Parse error ${path}`);
+    }
+    if (css.indexOf("/*", i) === i) {
+      i = css.indexOf("*/", i + 2);
+      // Unclosed comment. Break to avoid infinity loop
+      if (i === -1) {
+        // Don't parse, but save collected result
+        return result;
+      }
+      continue;
+    }
+    char = css[i];
+    if (char === "{") {
+      bracketsCount++;
+      i++;
+      continue;
+    }
+    if (char === "}") {
+      bracketsCount--;
+      i++;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      do {
+        i = css.indexOf(char, i + 1);
+        // Syntax error since this line. Don't parse, but save collected result
+        if (i === -1) {
+          return result;
+        }
+      } while (css[i - 1] === "\\");
+      i++;
+      continue;
+    }
+    if (bracketsCount > 0) {
+      i++;
+      continue;
+    }
+    if (char === "." || char === "#") {
+      i++;
+      const startWord = i;
+      while (!REG_EXP_NAME_BREAK_CHAR.test(css[i])) {
+        i++;
+      }
+      const word = css.slice(startWord, i);
+      result[word] = word;
+      continue;
+    }
+    if (css.indexOf("@keyframes", i) === i) {
+      i += 10;
+      while (REG_EXP_NAME_BREAK_CHAR.test(css[i])) {
+        i++;
+      }
+      const startWord = i;
+      while (!REG_EXP_NAME_BREAK_CHAR.test(css[i])) {
+        i++;
+      }
+      const word = css.slice(startWord, i);
+      result[word] = word;
+      continue;
+    }
+    i++;
+  }
+  return result;
+};
 
 module.exports = {
-  process() {
-    return "module.exports = {};";
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return "cssTransform";
+  process(src, path, config) {
+    const filename = path.slice(path.lastIndexOf(pathSep) + 1);
+    const textCSS = postcssNested.process(src).css;
+    const exprt = JSON.stringify(getCSSSelectors(textCSS, path));
+    return `module.exports = ${exprt}`;
   },
 };
diff --git a/package-lock.json b/package-lock.json
index 6038504da..c6dd91c93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1628,13 +1628,17 @@
       }
     },
     "@types/react-relay": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@types/react-relay/-/react-relay-1.3.6.tgz",
-      "integrity": "sha512-X0qv3nGlE4TStFLLKxgj+6MgHZEExB1N/RDcVcyCauAojV5byD0c6VhuqAluYaTKaL2FBuxdtDL405IhIIjEbQ==",
+      "version": "github:coralproject/patched#ba4c8d01bb737e5f073534b32d870294e39cc5a8",
+      "from": "github:coralproject/patched#types/react-relay",
+      "dev": true
+    },
+    "@types/react-test-renderer": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.0.1.tgz",
+      "integrity": "sha512-kmNh8g67Ck/y/vp6KX+4JTJXiTGLZBylNhu+R7sm7zcvsrnIGVO6J1zew5inVg428j9f8yHpl68RcYOZXVborQ==",
       "dev": true,
       "requires": {
-        "@types/react": "*",
-        "@types/relay-runtime": "*"
+        "@types/react": "*"
       }
     },
     "@types/recompose": {
@@ -7635,17 +7639,17 @@
       }
     },
     "expect": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-23.2.0.tgz",
-      "integrity": "sha1-U6fhNeNv4n51hnsReP8IqqzCsN0=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-23.3.0.tgz",
+      "integrity": "sha1-7LBRrcvcQKxNtXbBYGfxL9sTzGE=",
       "dev": true,
       "requires": {
         "ansi-styles": "^3.2.0",
         "jest-diff": "^23.2.0",
         "jest-get-type": "^22.1.0",
         "jest-matcher-utils": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-regex-util": "^23.0.0"
+        "jest-message-util": "^23.3.0",
+        "jest-regex-util": "^23.3.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -10835,13 +10839,13 @@
       "dev": true
     },
     "jest": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-23.2.0.tgz",
-      "integrity": "sha1-govzGgltRdzwaCTR6gMBOve8/CA=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-23.3.0.tgz",
+      "integrity": "sha1-E1XNeS84zyD7pNoC3dt8oU2UhLU=",
       "dev": true,
       "requires": {
         "import-local": "^1.0.0",
-        "jest-cli": "^23.2.0"
+        "jest-cli": "^23.3.0"
       },
       "dependencies": {
         "ansi-regex": {
@@ -10865,9 +10869,9 @@
           }
         },
         "jest-cli": {
-          "version": "23.2.0",
-          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-23.2.0.tgz",
-          "integrity": "sha1-O1Q6PaUUXdiTeTEBcoI3n8aWxFs=",
+          "version": "23.3.0",
+          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-23.3.0.tgz",
+          "integrity": "sha1-MH6b53M0Q7eJqCedaUBU0FGp5eI=",
           "dev": true,
           "requires": {
             "ansi-escapes": "^3.0.0",
@@ -10882,18 +10886,18 @@
             "istanbul-lib-instrument": "^1.10.1",
             "istanbul-lib-source-maps": "^1.2.4",
             "jest-changed-files": "^23.2.0",
-            "jest-config": "^23.2.0",
-            "jest-environment-jsdom": "^23.2.0",
+            "jest-config": "^23.3.0",
+            "jest-environment-jsdom": "^23.3.0",
             "jest-get-type": "^22.1.0",
             "jest-haste-map": "^23.2.0",
-            "jest-message-util": "^23.2.0",
-            "jest-regex-util": "^23.0.0",
-            "jest-resolve-dependencies": "^23.2.0",
-            "jest-runner": "^23.2.0",
-            "jest-runtime": "^23.2.0",
-            "jest-snapshot": "^23.2.0",
-            "jest-util": "^23.2.0",
-            "jest-validate": "^23.2.0",
+            "jest-message-util": "^23.3.0",
+            "jest-regex-util": "^23.3.0",
+            "jest-resolve-dependencies": "^23.3.0",
+            "jest-runner": "^23.3.0",
+            "jest-runtime": "^23.3.0",
+            "jest-snapshot": "^23.3.0",
+            "jest-util": "^23.3.0",
+            "jest-validate": "^23.3.0",
             "jest-watcher": "^23.2.0",
             "jest-worker": "^23.2.0",
             "micromatch": "^3.1.10",
@@ -10938,23 +10942,23 @@
       }
     },
     "jest-config": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.2.0.tgz",
-      "integrity": "sha1-0vtVb9WioZw561bROdzKXa0qHIg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.3.0.tgz",
+      "integrity": "sha1-u01Ttw+VAPr933GNImq7U7E7gyM=",
       "dev": true,
       "requires": {
         "babel-core": "^6.0.0",
         "babel-jest": "^23.2.0",
         "chalk": "^2.0.1",
         "glob": "^7.1.1",
-        "jest-environment-jsdom": "^23.2.0",
-        "jest-environment-node": "^23.2.0",
+        "jest-environment-jsdom": "^23.3.0",
+        "jest-environment-node": "^23.3.0",
         "jest-get-type": "^22.1.0",
-        "jest-jasmine2": "^23.2.0",
-        "jest-regex-util": "^23.0.0",
+        "jest-jasmine2": "^23.3.0",
+        "jest-regex-util": "^23.3.0",
         "jest-resolve": "^23.2.0",
-        "jest-util": "^23.2.0",
-        "jest-validate": "^23.2.0",
+        "jest-util": "^23.3.0",
+        "jest-validate": "^23.3.0",
         "pretty-format": "^23.2.0"
       },
       "dependencies": {
@@ -11003,24 +11007,24 @@
       }
     },
     "jest-environment-jsdom": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.2.0.tgz",
-      "integrity": "sha1-NjRgOgipdbDKimWDIPVqVKjgRVg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.3.0.tgz",
+      "integrity": "sha1-GQRX+RyeYVRUxBhgVgZdtu16Tio=",
       "dev": true,
       "requires": {
         "jest-mock": "^23.2.0",
-        "jest-util": "^23.2.0",
+        "jest-util": "^23.3.0",
         "jsdom": "^11.5.1"
       }
     },
     "jest-environment-node": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.2.0.tgz",
-      "integrity": "sha1-tv5BNy44IJO7bz2b32wcTsClDxg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.3.0.tgz",
+      "integrity": "sha1-Ho3yHIR6pdA7dlc/DcFvzeUDTDI=",
       "dev": true,
       "requires": {
         "jest-mock": "^23.2.0",
-        "jest-util": "^23.2.0"
+        "jest-util": "^23.3.0"
       }
     },
     "jest-get-type": {
@@ -11056,21 +11060,21 @@
       }
     },
     "jest-jasmine2": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.2.0.tgz",
-      "integrity": "sha1-qmcM2x5NX47HdMlN2l4QX+M9i7Q=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.3.0.tgz",
+      "integrity": "sha1-qHBrqsI8ihMNWqjvVGSp1JCW0bU=",
       "dev": true,
       "requires": {
         "chalk": "^2.0.1",
         "co": "^4.6.0",
-        "expect": "^23.2.0",
+        "expect": "^23.3.0",
         "is-generator-fn": "^1.0.0",
         "jest-diff": "^23.2.0",
         "jest-each": "^23.2.0",
         "jest-matcher-utils": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-snapshot": "^23.2.0",
-        "jest-util": "^23.2.0",
+        "jest-message-util": "^23.3.0",
+        "jest-snapshot": "^23.3.0",
+        "jest-util": "^23.3.0",
         "pretty-format": "^23.2.0"
       }
     },
@@ -11095,9 +11099,9 @@
       }
     },
     "jest-message-util": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.2.0.tgz",
-      "integrity": "sha1-WR6BSP/2nPibBBSAnHIXVuvv50Q=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.3.0.tgz",
+      "integrity": "sha1-vAexHOxpcftd2d4t+2DrwiFQwWA=",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0-beta.35",
@@ -11114,9 +11118,9 @@
       "dev": true
     },
     "jest-regex-util": {
-      "version": "23.0.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-23.0.0.tgz",
-      "integrity": "sha1-3Vwf3gxG9DcTFM8Q96dRoj9Oj3Y=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-23.3.0.tgz",
+      "integrity": "sha1-X4ZylUfCeFxAAs6qj4Sf6MpHG8U=",
       "dev": true
     },
     "jest-resolve": {
@@ -11131,31 +11135,31 @@
       }
     },
     "jest-resolve-dependencies": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-23.2.0.tgz",
-      "integrity": "sha1-bfjVcJxkBmOc0H9Uv/B04BtcBFg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-23.3.0.tgz",
+      "integrity": "sha1-hETTsLEoi4CGTYgB/1C0Sk1pXR0=",
       "dev": true,
       "requires": {
-        "jest-regex-util": "^23.0.0",
-        "jest-snapshot": "^23.2.0"
+        "jest-regex-util": "^23.3.0",
+        "jest-snapshot": "^23.3.0"
       }
     },
     "jest-runner": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-23.2.0.tgz",
-      "integrity": "sha1-DZGWfqgvcrDHBZEJJghtIFXOda8=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-23.3.0.tgz",
+      "integrity": "sha1-BMfkWKYXUBpIddsNf/vg48vUO/s=",
       "dev": true,
       "requires": {
         "exit": "^0.1.2",
         "graceful-fs": "^4.1.11",
-        "jest-config": "^23.2.0",
+        "jest-config": "^23.3.0",
         "jest-docblock": "^23.2.0",
         "jest-haste-map": "^23.2.0",
-        "jest-jasmine2": "^23.2.0",
+        "jest-jasmine2": "^23.3.0",
         "jest-leak-detector": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-runtime": "^23.2.0",
-        "jest-util": "^23.2.0",
+        "jest-message-util": "^23.3.0",
+        "jest-runtime": "^23.3.0",
+        "jest-util": "^23.3.0",
         "jest-worker": "^23.2.0",
         "source-map-support": "^0.5.6",
         "throat": "^4.0.0"
@@ -11173,9 +11177,9 @@
       }
     },
     "jest-runtime": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-23.2.0.tgz",
-      "integrity": "sha1-YtywF2ahxMZGltwJAgnnbOGq3Lw=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-23.3.0.tgz",
+      "integrity": "sha1-SGWqtM7/gvnOxjNf164UIswd598=",
       "dev": true,
       "requires": {
         "babel-core": "^6.0.0",
@@ -11185,14 +11189,14 @@
         "exit": "^0.1.2",
         "fast-json-stable-stringify": "^2.0.0",
         "graceful-fs": "^4.1.11",
-        "jest-config": "^23.2.0",
+        "jest-config": "^23.3.0",
         "jest-haste-map": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-regex-util": "^23.0.0",
+        "jest-message-util": "^23.3.0",
+        "jest-regex-util": "^23.3.0",
         "jest-resolve": "^23.2.0",
-        "jest-snapshot": "^23.2.0",
-        "jest-util": "^23.2.0",
-        "jest-validate": "^23.2.0",
+        "jest-snapshot": "^23.3.0",
+        "jest-util": "^23.3.0",
+        "jest-validate": "^23.3.0",
         "micromatch": "^3.1.10",
         "realpath-native": "^1.0.0",
         "slash": "^1.0.0",
@@ -11208,30 +11212,35 @@
       "dev": true
     },
     "jest-snapshot": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.2.0.tgz",
-      "integrity": "sha1-x6PQFxd7utYMillYac+QqHguan4=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.3.0.tgz",
+      "integrity": "sha1-/E6fgeRUMtEFB+J/ULzmD0TYFCQ=",
       "dev": true,
       "requires": {
+        "babel-traverse": "^6.0.0",
+        "babel-types": "^6.0.0",
         "chalk": "^2.0.1",
         "jest-diff": "^23.2.0",
         "jest-matcher-utils": "^23.2.0",
+        "jest-message-util": "^23.3.0",
+        "jest-resolve": "^23.2.0",
         "mkdirp": "^0.5.1",
         "natural-compare": "^1.4.0",
-        "pretty-format": "^23.2.0"
+        "pretty-format": "^23.2.0",
+        "semver": "^5.5.0"
       }
     },
     "jest-util": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.2.0.tgz",
-      "integrity": "sha1-YrdwdXaW2W4JSgS48cNzylClqy4=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.3.0.tgz",
+      "integrity": "sha1-efNbsMMBAO9hHZY+5riPjthzqB0=",
       "dev": true,
       "requires": {
         "callsites": "^2.0.0",
         "chalk": "^2.0.1",
         "graceful-fs": "^4.1.11",
         "is-ci": "^1.0.10",
-        "jest-message-util": "^23.2.0",
+        "jest-message-util": "^23.3.0",
         "mkdirp": "^0.5.1",
         "slash": "^1.0.0",
         "source-map": "^0.6.0"
@@ -11246,9 +11255,9 @@
       }
     },
     "jest-validate": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.2.0.tgz",
-      "integrity": "sha1-Z8i5CeEa8XAXZSOIlMZ6wykbGV4=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.3.0.tgz",
+      "integrity": "sha1-1Jvqaq2YwwrNLLtUJDR5igzBP3Y=",
       "dev": true,
       "requires": {
         "chalk": "^2.0.1",
@@ -15831,13 +15840,13 @@
       "dev": true
     },
     "prompts": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.9.tgz",
-      "integrity": "sha512-RMRvwAUDVUMhP/z3YfDW6igMwT0UnL+w3XCUUNxxHjgwJnVEdHWYJVjM7hQMPub8HCk12xZYAqWlbgLBnqebwg==",
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.10.tgz",
+      "integrity": "sha512-/MPwms6+g/m6fvXZlQyOL4m4ziDim2+Wc6CdWVjp+nVCkzEkK2N4rR74m/bbGf+dkta+/SBpo1FfES8Wgrk/Fw==",
       "dev": true,
       "requires": {
-        "clorox": "^1.0.1",
-        "sisteransi": "^0.1.0"
+        "clorox": "^1.0.3",
+        "sisteransi": "^0.1.1"
       }
     },
     "prop-types": {
@@ -16360,6 +16369,12 @@
         "shallowequal": "^1.0.2"
       }
     },
+    "react-is": {
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.1.tgz",
+      "integrity": "sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ==",
+      "dev": true
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -16460,6 +16475,18 @@
         }
       }
     },
+    "react-test-renderer": {
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.1.tgz",
+      "integrity": "sha512-wyyiPxRZOTpKnNIgUBOB6xPLTpIzwcQMIURhZvzUqZzezvHjaGNsDPBhMac5fIY3Jf5NuKxoGvV64zDSOECPPQ==",
+      "dev": true,
+      "requires": {
+        "fbjs": "^0.8.16",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.0",
+        "react-is": "^16.4.1"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -16509,9 +16536,9 @@
       }
     },
     "realpath-native": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.0.0.tgz",
-      "integrity": "sha512-XJtlRJ9jf0E1H1SLeJyQ9PGzQD7S65h1pRXEcAeK48doKOnKxcgPeNohJvD5u/2sI9J1oke6E8bZHS/fmW1UiQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.0.1.tgz",
+      "integrity": "sha512-W14EcXuqUvKP8dkWkD7B95iMy77lpMnlFXbbk409bQtNCbeu0kvRE5reo+yIZ3JXxg6frbGsz2DLQ39lrCB40g==",
       "dev": true,
       "requires": {
         "util.promisify": "^1.0.0"
@@ -17755,9 +17782,9 @@
       }
     },
     "sisteransi": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-0.1.0.tgz",
-      "integrity": "sha512-kHXcIr0Z9FM6d7pwFDDIMQKGndIEtIF1oBSMXWtItpx4mrH1jhANVNT35GVekBekXl6J+5i7lJMIGq3Gm7pIdA==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-0.1.1.tgz",
+      "integrity": "sha512-PmGOd02bM9YO5ifxpw36nrNMBTptEtfRl4qUYl9SndkolplkrZZOW7PGHjrZL53QvMVj9nQ+TKqUnRsw4tJa4g==",
       "dev": true
     },
     "slash": {
diff --git a/package.json b/package.json
index 707d65836..820605d35 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,11 @@
   "scripts": {
     "start": "node dist/index.js",
     "test": "node scripts/test.js --env=jsdom",
-    "build": "npm-run-all --parallel compile:* && npm-run-all --parallel build:*",
+    "build": "npm-run-all compile --parallel build:*",
     "build:client": "node ./scripts/build.js",
     "build:server": "tsc -p ./src/tsconfig.json",
     "watch": "NODE_ENV=development ts-node ./scripts/watcher/bin/watcher.ts ./config/watcher.ts",
+    "compile": "npm-run-all --parallel compile:*",
     "compile:css-types": "tcm src/core/client/",
     "compile:relay-stream": "relay-compiler --src ./src/core/client/stream --schema $(ts-node ./scripts/schemaPath.ts tenant) --language typescript --artifactDirectory ./src/core/client/stream/__generated__ --no-watchman",
     "start:development": "NODE_ENV=development ts-node --project ./src/tsconfig.json -r tsconfig-paths/register ./src/index.ts",
@@ -72,7 +73,8 @@
     "@types/passport": "^0.4.5",
     "@types/query-string": "^6.1.0",
     "@types/react-dom": "^16.0.6",
-    "@types/react-relay": "^1.3.6",
+    "@types/react-relay": "github:coralproject/patched#types/react-relay",
+    "@types/react-test-renderer": "^16.0.1",
     "@types/recompose": "^0.26.1",
     "@types/relay-runtime": "github:coralproject/patched#types/relay-runtime",
     "@types/uuid": "^3.4.3",
@@ -100,7 +102,7 @@
     "fluent-react": "^0.7.0",
     "graphql-playground-middleware-express": "^1.7.0",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.2.0",
+    "jest": "^23.3.0",
     "loader-utils": "^1.1.0",
     "npm-run-all": "^4.1.3",
     "postcss-flexbugs-fixes": "^3.3.1",
@@ -115,6 +117,7 @@
     "react-dom": "^16.4.0",
     "react-final-form": "^3.6.0",
     "react-relay": "github:coralproject/patched#react-relay",
+    "react-test-renderer": "^16.4.1",
     "recompose": "^0.27.1",
     "relay-compiler": "github:coralproject/patched#relay-compiler",
     "relay-compiler-language-typescript": "github:coralproject/patched#relay-compiler-language-typescript",
diff --git a/scripts/test.js b/scripts/test.js
index 1ac08fd2e..f08b18de6 100644
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -19,11 +19,11 @@ const paths = require("../config/paths");
 
 const jest = require("jest");
 let argv = process.argv.slice(2);
+argv.push("--config", paths.appJestConfig);
 
 // Watch unless on CI or in coverage mode
 if (!process.env.CI && argv.indexOf("--coverage") < 0) {
   argv.push("--watch");
-  argv.push("--config", paths.appJestConfig);
 }
 
 jest.run(argv);
diff --git a/src/core/client/stream/components/Comment.spec.tsx b/src/core/client/stream/components/Comment.spec.tsx
new file mode 100644
index 000000000..6008bfc3b
--- /dev/null
+++ b/src/core/client/stream/components/Comment.spec.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+import Comment from "./Comment";
+
+it("renders username and body", () => {
+  const props = {
+    author: {
+      username: "Marvin",
+    },
+    body: "Woof",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Comment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("renders with gutterBottom", () => {
+  const props = {
+    author: {
+      username: "Marvin",
+    },
+    body: "Woof",
+    gutterBottom: true,
+  };
+  const renderer = createRenderer();
+  renderer.render(<Comment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
new file mode 100644
index 000000000..4b009e257
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders username and body 1`] = `
+<div
+  className="root"
+>
+  <withPropsOnChange(Typography)
+    className="author"
+    gutterBottom={true}
+  >
+    Marvin
+  </withPropsOnChange(Typography)>
+  <withPropsOnChange(Typography)>
+    Woof
+  </withPropsOnChange(Typography)>
+</div>
+`;
+
+exports[`renders with gutterBottom 1`] = `
+<div
+  className="root gutterBottom"
+>
+  <withPropsOnChange(Typography)
+    className="author"
+    gutterBottom={true}
+  >
+    Marvin
+  </withPropsOnChange(Typography)>
+  <withPropsOnChange(Typography)>
+    Woof
+  </withPropsOnChange(Typography)>
+</div>
+`;

From 01e14cc110bbe4cc8a44c7c012277ecfb42edbc6 Mon Sep 17 00:00:00 2001
From: Kiwi <vinh@wikiwi.io>
Date: Fri, 6 Jul 2018 16:08:10 -0300
Subject: [PATCH 04/69] Adapt files.exclude (#1736)

---
 .prettierignore       | 1 +
 .vscode/settings.json | 8 +++-----
 2 files changed, 4 insertions(+), 5 deletions(-)
 create mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..3c3629e64
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 195b73de5..4dd5d1b72 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,12 +9,10 @@
     "**/.hg": true,
     "**/CVS": true,
     "**/.DS_Store": true,
-    "node_modules": true,
-    "dist": true,
-    ".vscode": true,
-    "package-lock.json": true
+    ".vs": true
   },
+  "tslint.exclude": "**/node_modules/**",
   "tslint.autoFixOnSave": true,
   "tslint.jsEnable": true,
   "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file
+}

From 89c697b18fd50ee74df6cafd7b2e591986fd7270 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 6 Jul 2018 23:44:29 -0300
Subject: [PATCH 05/69] Permalink ui

---
 package-lock.json                             | 161 ++++++++++++++++--
 package.json                                  |   3 +
 src/core/client/stream/components/Comment.css |  10 +-
 src/core/client/stream/components/Comment.tsx |  18 +-
 .../client/stream/components/Permalink.tsx    |   0
 src/core/client/ui/components/Input/Input.css |  11 ++
 src/core/client/ui/components/Input/Input.tsx |  14 ++
 src/core/client/ui/components/Input/index.ts  |   2 +
 .../client/ui/components/Tooltip/Tooltip.css  |  14 ++
 .../client/ui/components/Tooltip/Tooltip.tsx  |  11 ++
 .../client/ui/components/Tooltip/index.ts     |   2 +
 src/core/client/ui/components/index.ts        |   2 +
 12 files changed, 230 insertions(+), 18 deletions(-)
 create mode 100644 src/core/client/stream/components/Permalink.tsx
 create mode 100644 src/core/client/ui/components/Input/Input.css
 create mode 100644 src/core/client/ui/components/Input/Input.tsx
 create mode 100644 src/core/client/ui/components/Input/index.ts
 create mode 100644 src/core/client/ui/components/Tooltip/Tooltip.css
 create mode 100644 src/core/client/ui/components/Tooltip/Tooltip.tsx
 create mode 100644 src/core/client/ui/components/Tooltip/index.ts

diff --git a/package-lock.json b/package-lock.json
index c6dd91c93..c8a6caf98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1612,7 +1612,6 @@
       "version": "16.4.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.2.tgz",
       "integrity": "sha512-oVcVteCDNiVc/fkDjowRfAZQDEOR76j3CJ3FvwXNvfV6zJguhghy1lMgpAzYox+9AZsWch+JPV6Imml3wvIUeg==",
-      "dev": true,
       "requires": {
         "csstype": "^2.2.0"
       }
@@ -1641,6 +1640,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-tooltip": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-tooltip/-/react-tooltip-3.3.5.tgz",
+      "integrity": "sha512-wpWzjtMWBPymIoYjqZTeWX1v5dJe4V1akmcTM6iZwSS/cL8jdi6dFt4BoLXDOxgL5tEe/9yVBlQD+MAYvexBfw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/recompose": {
       "version": "0.26.1",
       "resolved": "https://registry.npmjs.org/@types/recompose/-/recompose-0.26.1.tgz",
@@ -2050,6 +2057,14 @@
         "acorn": "^5.0.0"
       }
     },
+    "add-dom-event-listener": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.0.2.tgz",
+      "integrity": "sha1-j67SxBAIchzxEdodMNmVuFvkK+0=",
+      "requires": {
+        "object-assign": "4.x"
+      }
+    },
     "address": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
@@ -4166,7 +4181,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -5076,8 +5090,7 @@
     "classnames": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==",
-      "dev": true
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
     },
     "clean-css": {
       "version": "4.1.11",
@@ -5369,12 +5382,25 @@
       "integrity": "sha512-MAAAIOdi2s4Gl6rZ76PNcUa9IOYB+5ICdT41o5uMRf09aEu/F9RK+qhe8RjXNPwcTjGV7KU7h2P/fljThFVqyQ==",
       "dev": true
     },
+    "component-classes": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz",
+      "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
+      "requires": {
+        "component-indexof": "0.0.3"
+      }
+    },
     "component-emitter": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
       "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
       "dev": true
     },
+    "component-indexof": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
+      "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
+    },
     "compressible": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.14.tgz",
@@ -5881,6 +5907,15 @@
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=",
       "dev": true
     },
+    "css-animation": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.4.1.tgz",
+      "integrity": "sha1-W4gTEl3g+7uwu+G0cq6EIhRpt6g=",
+      "requires": {
+        "babel-runtime": "6.x",
+        "component-classes": "^1.2.5"
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -6248,8 +6283,7 @@
     "csstype": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.5.tgz",
-      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==",
-      "dev": true
+      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -7019,6 +7053,11 @@
         "webfontloader": "^1.6.28"
       }
     },
+    "dom-align": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.8.0.tgz",
+      "integrity": "sha512-B85D4ef2Gj5lw0rK0KM2+D5/pH7yqNxg2mB+E8uzFaolpm7RQmsxEfjyEuNiF8UBBkffumYDeKRzTzc3LePP+w=="
+    },
     "dom-converter": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
@@ -11305,8 +11344,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-yaml": {
       "version": "3.12.0",
@@ -11829,6 +11867,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
       "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -11899,6 +11942,16 @@
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
+    },
     "lodash.isempty": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
@@ -12050,7 +12103,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0"
       }
@@ -12939,8 +12991,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -15853,7 +15904,6 @@
       "version": "15.6.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
       "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.3.1",
         "object-assign": "^4.1.1"
@@ -16082,6 +16132,81 @@
         "strip-json-comments": "~2.0.1"
       }
     },
+    "rc-align": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-2.4.3.tgz",
+      "integrity": "sha512-h5KgyB5IXYR7iKpYFcMr54cuQ2eozPCZ11kbXPG5+6CWvmyJ+c0R/yjndVndiNk2G3MKcTMbJNdDv5DIckLAxQ==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "dom-align": "^1.7.0",
+        "prop-types": "^15.5.8",
+        "rc-util": "^4.0.4"
+      }
+    },
+    "rc-animate": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.4.4.tgz",
+      "integrity": "sha512-DjJLTUQj7XKKcuS8cczN0uOLfuSmgrVXFGieP1SZc87xUUTFGh8B/KjNmEtlfvxkSrSuVfb2rrEPER4SqKUtEA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "css-animation": "^1.3.2",
+        "prop-types": "15.x"
+      }
+    },
+    "rc-tooltip": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.2.tgz",
+      "integrity": "sha512-vsF29ohlfgr7lEP12aJ5j4U/4hzqSBYjWQo8I09re+q95v1o4nDjH1q/B3qFkf9aml2FbgdkJw9KYz/zXUgApA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.8",
+        "rc-trigger": "^2.2.2"
+      }
+    },
+    "rc-trigger": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.5.4.tgz",
+      "integrity": "sha512-clgXOdazDW2qg4vTZSAExpvOuojPNuMoamG+SxAm5Ih+rpVcrtEiDlDZWY4yUHyfEWJZBzgbrr4np/z2FK6RfA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.6",
+        "prop-types": "15.x",
+        "rc-align": "^2.4.0",
+        "rc-animate": "2.x",
+        "rc-util": "^4.4.0"
+      }
+    },
+    "rc-util": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.5.1.tgz",
+      "integrity": "sha512-PdCmHyBBodZdw6Oaikt0l+/R79IcRXpYkTrqD/Rbl4ZdoOi61t5TtEe40Q+A7rkWG5U1xjcN+h8j9H6GdtnICw==",
+      "requires": {
+        "add-dom-event-listener": "1.x",
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.10",
+        "shallowequal": "^0.2.2"
+      },
+      "dependencies": {
+        "lodash.keys": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+          "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+          "requires": {
+            "lodash._getnative": "^3.0.0",
+            "lodash.isarguments": "^3.0.0",
+            "lodash.isarray": "^3.0.0"
+          }
+        },
+        "shallowequal": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
+          "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",
+          "requires": {
+            "lodash.keys": "^3.1.2"
+          }
+        }
+      }
+    },
     "react": {
       "version": "16.4.1",
       "resolved": "https://registry.npmjs.org/react/-/react-16.4.1.tgz",
@@ -16487,6 +16612,15 @@
         "react-is": "^16.4.1"
       }
     },
+    "react-tooltip": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-3.6.1.tgz",
+      "integrity": "sha512-4NVjHNIx1ZazFYBNP044DHW0cr95Qaq0DSwWbrEQ7VyE8AxemHDjp0DoYvV8wilK9vR9jMlSwDW6ebRgbk3aHw==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.0"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -16673,8 +16807,7 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "regenerator-transform": {
       "version": "0.12.4",
diff --git a/package.json b/package.json
index 820605d35..e8082799a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
+    "@types/react-tooltip": "^3.3.5",
     "apollo-server-express": "^1.3.6",
     "bunyan": "^1.8.12",
     "convict": "^4.3.0",
@@ -45,6 +46,8 @@
     "mongodb": "^3.0.10",
     "passport": "^0.4.0",
     "performance-now": "^2.1.0",
+    "rc-tooltip": "^3.7.2",
+    "react-tooltip": "^3.6.1",
     "subscriptions-transport-ws": "^0.9.11",
     "uuid": "^3.2.1"
   },
diff --git a/src/core/client/stream/components/Comment.css b/src/core/client/stream/components/Comment.css
index d43780d8f..8e5301ecd 100644
--- a/src/core/client/stream/components/Comment.css
+++ b/src/core/client/stream/components/Comment.css
@@ -3,9 +3,17 @@
 }
 
 .gutterBottom {
-  margin-bottom: calc(2px * $spacing-unit);
+  margin-bottom: calc(2 px * $spacing-unit);
 }
 
 .author {
   font-weight: $font-weight-medium;
 }
+
+.shareButton {
+  padding: 10px 0;
+}
+
+.input {
+  margin-right: 5px;
+}
diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
index c1b3f9303..1f4e11b1c 100644
--- a/src/core/client/stream/components/Comment.tsx
+++ b/src/core/client/stream/components/Comment.tsx
@@ -1,9 +1,7 @@
 import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
-
-import { Typography } from "talk-ui/components";
-
+import { Button, Input, Tooltip, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
 export interface CommentProps {
@@ -25,6 +23,20 @@ const Comment: StatelessComponent<CommentProps> = props => {
         {props.author && props.author.username}
       </Typography>
       <Typography>{props.body}</Typography>
+      <div className={cn("talk-comment-footer")}>
+        <Button
+          className={styles.shareButton}
+          data-tip
+          data-for="tooltip"
+          data-event="click"
+        >
+          Share
+        </Button>
+        <Tooltip id="tooltip" effect="solid">
+          <Input value="ad" className={styles.input} />
+          <Button primary>Copy</Button>
+        </Tooltip>
+      </div>
     </div>
   );
 };
diff --git a/src/core/client/stream/components/Permalink.tsx b/src/core/client/stream/components/Permalink.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/ui/components/Input/Input.css b/src/core/client/ui/components/Input/Input.css
new file mode 100644
index 000000000..4d2e9e88a
--- /dev/null
+++ b/src/core/client/ui/components/Input/Input.css
@@ -0,0 +1,11 @@
+.root {
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: calc(0.57em / 16);
+  background: #ffffff;
+  border: 1px solid #979797;
+  box-sizing: border-box;
+  border-radius: 1px;
+  padding: 5px 20px;
+}
diff --git a/src/core/client/ui/components/Input/Input.tsx b/src/core/client/ui/components/Input/Input.tsx
new file mode 100644
index 000000000..261b3b1af
--- /dev/null
+++ b/src/core/client/ui/components/Input/Input.tsx
@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { InputHTMLAttributes, StatelessComponent } from "react";
+
+import * as styles from "./Input.css";
+
+interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
+  classes?: typeof styles;
+}
+
+const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+  return <input {...rest} className={cn(styles.root, className)} />;
+};
+
+export default Input;
diff --git a/src/core/client/ui/components/Input/index.ts b/src/core/client/ui/components/Input/index.ts
new file mode 100644
index 000000000..ae0d7a775
--- /dev/null
+++ b/src/core/client/ui/components/Input/index.ts
@@ -0,0 +1,2 @@
+export * from "./Input";
+export { default } from "./Input";
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.css b/src/core/client/ui/components/Tooltip/Tooltip.css
new file mode 100644
index 000000000..e3de3d8fe
--- /dev/null
+++ b/src/core/client/ui/components/Tooltip/Tooltip.css
@@ -0,0 +1,14 @@
+.root {
+  background: #ffffff !important;
+  border: 1px solid #c9cacb;
+  box-sizing: border-box;
+  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 1px;
+  color: #222 !important;
+  display: flex !important;
+
+  &:after,
+  &::before {
+    border-top-color: transparent !important;
+  }
+}
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.tsx b/src/core/client/ui/components/Tooltip/Tooltip.tsx
new file mode 100644
index 000000000..dffda088a
--- /dev/null
+++ b/src/core/client/ui/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+import * as styles from "./Tooltip.css";
+
+class Tooltip extends React.Component<ReactTooltip.Props> {
+  public render() {
+    return <ReactTooltip className={styles.root} {...this.props} />;
+  }
+}
+
+export default Tooltip;
diff --git a/src/core/client/ui/components/Tooltip/index.ts b/src/core/client/ui/components/Tooltip/index.ts
new file mode 100644
index 000000000..9474b3888
--- /dev/null
+++ b/src/core/client/ui/components/Tooltip/index.ts
@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+export { default } from "./Tooltip";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 54643cb2a..6e1fcd8a6 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -2,3 +2,5 @@ export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
 export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
+export { default as Tooltip } from "./Tooltip";
+export { default as Input } from "./Input";

From b77f9b8eaf14f021918276e388a0856b674a6419 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 6 Jul 2018 23:44:29 -0300
Subject: [PATCH 06/69] Permalink ui

---
 package-lock.json                             | 161 ++++++++++++++++--
 package.json                                  |   3 +
 src/core/client/stream/components/Comment.css |  10 +-
 src/core/client/stream/components/Comment.tsx |  18 +-
 .../client/stream/components/Permalink.tsx    |   0
 src/core/client/ui/components/Input/Input.css |  11 ++
 src/core/client/ui/components/Input/Input.tsx |  14 ++
 src/core/client/ui/components/Input/index.ts  |   2 +
 .../client/ui/components/Tooltip/Tooltip.css  |  14 ++
 .../client/ui/components/Tooltip/Tooltip.tsx  |  11 ++
 .../client/ui/components/Tooltip/index.ts     |   2 +
 src/core/client/ui/components/index.ts        |   2 +
 12 files changed, 230 insertions(+), 18 deletions(-)
 create mode 100644 src/core/client/stream/components/Permalink.tsx
 create mode 100644 src/core/client/ui/components/Input/Input.css
 create mode 100644 src/core/client/ui/components/Input/Input.tsx
 create mode 100644 src/core/client/ui/components/Input/index.ts
 create mode 100644 src/core/client/ui/components/Tooltip/Tooltip.css
 create mode 100644 src/core/client/ui/components/Tooltip/Tooltip.tsx
 create mode 100644 src/core/client/ui/components/Tooltip/index.ts

diff --git a/package-lock.json b/package-lock.json
index c6dd91c93..c8a6caf98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1612,7 +1612,6 @@
       "version": "16.4.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.2.tgz",
       "integrity": "sha512-oVcVteCDNiVc/fkDjowRfAZQDEOR76j3CJ3FvwXNvfV6zJguhghy1lMgpAzYox+9AZsWch+JPV6Imml3wvIUeg==",
-      "dev": true,
       "requires": {
         "csstype": "^2.2.0"
       }
@@ -1641,6 +1640,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-tooltip": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-tooltip/-/react-tooltip-3.3.5.tgz",
+      "integrity": "sha512-wpWzjtMWBPymIoYjqZTeWX1v5dJe4V1akmcTM6iZwSS/cL8jdi6dFt4BoLXDOxgL5tEe/9yVBlQD+MAYvexBfw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/recompose": {
       "version": "0.26.1",
       "resolved": "https://registry.npmjs.org/@types/recompose/-/recompose-0.26.1.tgz",
@@ -2050,6 +2057,14 @@
         "acorn": "^5.0.0"
       }
     },
+    "add-dom-event-listener": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.0.2.tgz",
+      "integrity": "sha1-j67SxBAIchzxEdodMNmVuFvkK+0=",
+      "requires": {
+        "object-assign": "4.x"
+      }
+    },
     "address": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
@@ -4166,7 +4181,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -5076,8 +5090,7 @@
     "classnames": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==",
-      "dev": true
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
     },
     "clean-css": {
       "version": "4.1.11",
@@ -5369,12 +5382,25 @@
       "integrity": "sha512-MAAAIOdi2s4Gl6rZ76PNcUa9IOYB+5ICdT41o5uMRf09aEu/F9RK+qhe8RjXNPwcTjGV7KU7h2P/fljThFVqyQ==",
       "dev": true
     },
+    "component-classes": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz",
+      "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
+      "requires": {
+        "component-indexof": "0.0.3"
+      }
+    },
     "component-emitter": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
       "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
       "dev": true
     },
+    "component-indexof": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
+      "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
+    },
     "compressible": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.14.tgz",
@@ -5881,6 +5907,15 @@
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=",
       "dev": true
     },
+    "css-animation": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.4.1.tgz",
+      "integrity": "sha1-W4gTEl3g+7uwu+G0cq6EIhRpt6g=",
+      "requires": {
+        "babel-runtime": "6.x",
+        "component-classes": "^1.2.5"
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -6248,8 +6283,7 @@
     "csstype": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.5.tgz",
-      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==",
-      "dev": true
+      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -7019,6 +7053,11 @@
         "webfontloader": "^1.6.28"
       }
     },
+    "dom-align": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.8.0.tgz",
+      "integrity": "sha512-B85D4ef2Gj5lw0rK0KM2+D5/pH7yqNxg2mB+E8uzFaolpm7RQmsxEfjyEuNiF8UBBkffumYDeKRzTzc3LePP+w=="
+    },
     "dom-converter": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
@@ -11305,8 +11344,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-yaml": {
       "version": "3.12.0",
@@ -11829,6 +11867,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
       "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -11899,6 +11942,16 @@
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
+    },
     "lodash.isempty": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
@@ -12050,7 +12103,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0"
       }
@@ -12939,8 +12991,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -15853,7 +15904,6 @@
       "version": "15.6.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
       "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.3.1",
         "object-assign": "^4.1.1"
@@ -16082,6 +16132,81 @@
         "strip-json-comments": "~2.0.1"
       }
     },
+    "rc-align": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-2.4.3.tgz",
+      "integrity": "sha512-h5KgyB5IXYR7iKpYFcMr54cuQ2eozPCZ11kbXPG5+6CWvmyJ+c0R/yjndVndiNk2G3MKcTMbJNdDv5DIckLAxQ==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "dom-align": "^1.7.0",
+        "prop-types": "^15.5.8",
+        "rc-util": "^4.0.4"
+      }
+    },
+    "rc-animate": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.4.4.tgz",
+      "integrity": "sha512-DjJLTUQj7XKKcuS8cczN0uOLfuSmgrVXFGieP1SZc87xUUTFGh8B/KjNmEtlfvxkSrSuVfb2rrEPER4SqKUtEA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "css-animation": "^1.3.2",
+        "prop-types": "15.x"
+      }
+    },
+    "rc-tooltip": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.2.tgz",
+      "integrity": "sha512-vsF29ohlfgr7lEP12aJ5j4U/4hzqSBYjWQo8I09re+q95v1o4nDjH1q/B3qFkf9aml2FbgdkJw9KYz/zXUgApA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.8",
+        "rc-trigger": "^2.2.2"
+      }
+    },
+    "rc-trigger": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.5.4.tgz",
+      "integrity": "sha512-clgXOdazDW2qg4vTZSAExpvOuojPNuMoamG+SxAm5Ih+rpVcrtEiDlDZWY4yUHyfEWJZBzgbrr4np/z2FK6RfA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.6",
+        "prop-types": "15.x",
+        "rc-align": "^2.4.0",
+        "rc-animate": "2.x",
+        "rc-util": "^4.4.0"
+      }
+    },
+    "rc-util": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.5.1.tgz",
+      "integrity": "sha512-PdCmHyBBodZdw6Oaikt0l+/R79IcRXpYkTrqD/Rbl4ZdoOi61t5TtEe40Q+A7rkWG5U1xjcN+h8j9H6GdtnICw==",
+      "requires": {
+        "add-dom-event-listener": "1.x",
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.10",
+        "shallowequal": "^0.2.2"
+      },
+      "dependencies": {
+        "lodash.keys": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+          "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+          "requires": {
+            "lodash._getnative": "^3.0.0",
+            "lodash.isarguments": "^3.0.0",
+            "lodash.isarray": "^3.0.0"
+          }
+        },
+        "shallowequal": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
+          "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",
+          "requires": {
+            "lodash.keys": "^3.1.2"
+          }
+        }
+      }
+    },
     "react": {
       "version": "16.4.1",
       "resolved": "https://registry.npmjs.org/react/-/react-16.4.1.tgz",
@@ -16487,6 +16612,15 @@
         "react-is": "^16.4.1"
       }
     },
+    "react-tooltip": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-3.6.1.tgz",
+      "integrity": "sha512-4NVjHNIx1ZazFYBNP044DHW0cr95Qaq0DSwWbrEQ7VyE8AxemHDjp0DoYvV8wilK9vR9jMlSwDW6ebRgbk3aHw==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.0"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -16673,8 +16807,7 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "regenerator-transform": {
       "version": "0.12.4",
diff --git a/package.json b/package.json
index 820605d35..e8082799a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
+    "@types/react-tooltip": "^3.3.5",
     "apollo-server-express": "^1.3.6",
     "bunyan": "^1.8.12",
     "convict": "^4.3.0",
@@ -45,6 +46,8 @@
     "mongodb": "^3.0.10",
     "passport": "^0.4.0",
     "performance-now": "^2.1.0",
+    "rc-tooltip": "^3.7.2",
+    "react-tooltip": "^3.6.1",
     "subscriptions-transport-ws": "^0.9.11",
     "uuid": "^3.2.1"
   },
diff --git a/src/core/client/stream/components/Comment.css b/src/core/client/stream/components/Comment.css
index d43780d8f..8e5301ecd 100644
--- a/src/core/client/stream/components/Comment.css
+++ b/src/core/client/stream/components/Comment.css
@@ -3,9 +3,17 @@
 }
 
 .gutterBottom {
-  margin-bottom: calc(2px * $spacing-unit);
+  margin-bottom: calc(2 px * $spacing-unit);
 }
 
 .author {
   font-weight: $font-weight-medium;
 }
+
+.shareButton {
+  padding: 10px 0;
+}
+
+.input {
+  margin-right: 5px;
+}
diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
index c1b3f9303..1f4e11b1c 100644
--- a/src/core/client/stream/components/Comment.tsx
+++ b/src/core/client/stream/components/Comment.tsx
@@ -1,9 +1,7 @@
 import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
-
-import { Typography } from "talk-ui/components";
-
+import { Button, Input, Tooltip, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
 export interface CommentProps {
@@ -25,6 +23,20 @@ const Comment: StatelessComponent<CommentProps> = props => {
         {props.author && props.author.username}
       </Typography>
       <Typography>{props.body}</Typography>
+      <div className={cn("talk-comment-footer")}>
+        <Button
+          className={styles.shareButton}
+          data-tip
+          data-for="tooltip"
+          data-event="click"
+        >
+          Share
+        </Button>
+        <Tooltip id="tooltip" effect="solid">
+          <Input value="ad" className={styles.input} />
+          <Button primary>Copy</Button>
+        </Tooltip>
+      </div>
     </div>
   );
 };
diff --git a/src/core/client/stream/components/Permalink.tsx b/src/core/client/stream/components/Permalink.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/ui/components/Input/Input.css b/src/core/client/ui/components/Input/Input.css
new file mode 100644
index 000000000..4d2e9e88a
--- /dev/null
+++ b/src/core/client/ui/components/Input/Input.css
@@ -0,0 +1,11 @@
+.root {
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: calc(0.57em / 16);
+  background: #ffffff;
+  border: 1px solid #979797;
+  box-sizing: border-box;
+  border-radius: 1px;
+  padding: 5px 20px;
+}
diff --git a/src/core/client/ui/components/Input/Input.tsx b/src/core/client/ui/components/Input/Input.tsx
new file mode 100644
index 000000000..261b3b1af
--- /dev/null
+++ b/src/core/client/ui/components/Input/Input.tsx
@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { InputHTMLAttributes, StatelessComponent } from "react";
+
+import * as styles from "./Input.css";
+
+interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
+  classes?: typeof styles;
+}
+
+const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+  return <input {...rest} className={cn(styles.root, className)} />;
+};
+
+export default Input;
diff --git a/src/core/client/ui/components/Input/index.ts b/src/core/client/ui/components/Input/index.ts
new file mode 100644
index 000000000..ae0d7a775
--- /dev/null
+++ b/src/core/client/ui/components/Input/index.ts
@@ -0,0 +1,2 @@
+export * from "./Input";
+export { default } from "./Input";
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.css b/src/core/client/ui/components/Tooltip/Tooltip.css
new file mode 100644
index 000000000..e3de3d8fe
--- /dev/null
+++ b/src/core/client/ui/components/Tooltip/Tooltip.css
@@ -0,0 +1,14 @@
+.root {
+  background: #ffffff !important;
+  border: 1px solid #c9cacb;
+  box-sizing: border-box;
+  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 1px;
+  color: #222 !important;
+  display: flex !important;
+
+  &:after,
+  &::before {
+    border-top-color: transparent !important;
+  }
+}
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.tsx b/src/core/client/ui/components/Tooltip/Tooltip.tsx
new file mode 100644
index 000000000..dffda088a
--- /dev/null
+++ b/src/core/client/ui/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+import * as styles from "./Tooltip.css";
+
+class Tooltip extends React.Component<ReactTooltip.Props> {
+  public render() {
+    return <ReactTooltip className={styles.root} {...this.props} />;
+  }
+}
+
+export default Tooltip;
diff --git a/src/core/client/ui/components/Tooltip/index.ts b/src/core/client/ui/components/Tooltip/index.ts
new file mode 100644
index 000000000..9474b3888
--- /dev/null
+++ b/src/core/client/ui/components/Tooltip/index.ts
@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+export { default } from "./Tooltip";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 54643cb2a..6e1fcd8a6 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -2,3 +2,5 @@ export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
 export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
+export { default as Tooltip } from "./Tooltip";
+export { default as Input } from "./Input";

From 205ef6b4a445cad84985538d527ff477b10a50ee Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 9 Jul 2018 11:04:16 -0300
Subject: [PATCH 07/69] Adding Copy to clipboard functionality

---
 package-lock.json                             | 30 +++++++++++++++++++
 package.json                                  |  2 ++
 .../client/stream/components/Comment.spec.tsx |  2 ++
 src/core/client/stream/components/Comment.tsx | 16 ++++++++--
 .../stream/containers/CommentContainer.tsx    |  1 +
 .../client/ui/components/Tooltip/Tooltip.css  |  5 ++++
 .../client/ui/components/Tooltip/Tooltip.tsx  | 15 ++++++++--
 7 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c8a6caf98..9f3848257 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1616,6 +1616,14 @@
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-copy-to-clipboard": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.2.5.tgz",
+      "integrity": "sha512-5LggaWWlMcgehfeDmr4FZmK8MXntzxLYERFdrXk72ye6QwpoZpyYFGgUM+xGVVtIP2WXlor8twZTXK1xckEDYw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "16.0.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.6.tgz",
@@ -5591,6 +5599,14 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "copy-to-clipboard": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz",
+      "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==",
+      "requires": {
+        "toggle-selection": "^1.0.3"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.5.2.tgz",
@@ -16219,6 +16235,15 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-copy-to-clipboard": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
+      "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==",
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dev-utils": {
       "version": "6.0.0-next.3e165448",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-6.0.0-next.3e165448.tgz",
@@ -18888,6 +18913,11 @@
         }
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "topo": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/topo/-/topo-3.0.0.tgz",
diff --git a/package.json b/package.json
index e8082799a..d2defed61 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
+    "@types/react-copy-to-clipboard": "^4.2.5",
     "@types/react-tooltip": "^3.3.5",
     "apollo-server-express": "^1.3.6",
     "bunyan": "^1.8.12",
@@ -47,6 +48,7 @@
     "passport": "^0.4.0",
     "performance-now": "^2.1.0",
     "rc-tooltip": "^3.7.2",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-tooltip": "^3.6.1",
     "subscriptions-transport-ws": "^0.9.11",
     "uuid": "^3.2.1"
diff --git a/src/core/client/stream/components/Comment.spec.tsx b/src/core/client/stream/components/Comment.spec.tsx
index 6008bfc3b..4f7448a93 100644
--- a/src/core/client/stream/components/Comment.spec.tsx
+++ b/src/core/client/stream/components/Comment.spec.tsx
@@ -4,6 +4,7 @@ import Comment from "./Comment";
 
 it("renders username and body", () => {
   const props = {
+    id: "id",
     author: {
       username: "Marvin",
     },
@@ -16,6 +17,7 @@ it("renders username and body", () => {
 
 it("renders with gutterBottom", () => {
   const props = {
+    id: "id",
     author: {
       username: "Marvin",
     },
diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
index 1f4e11b1c..b594cf27d 100644
--- a/src/core/client/stream/components/Comment.tsx
+++ b/src/core/client/stream/components/Comment.tsx
@@ -1,10 +1,12 @@
 import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
 import { Button, Input, Tooltip, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
 export interface CommentProps {
+  id: string;
   className?: string;
   author: {
     username: string;
@@ -32,9 +34,17 @@ const Comment: StatelessComponent<CommentProps> = props => {
         >
           Share
         </Button>
-        <Tooltip id="tooltip" effect="solid">
-          <Input value="ad" className={styles.input} />
-          <Button primary>Copy</Button>
+
+        <Tooltip id="tooltip" effect="solid" clickable>
+          <Input defaultValue={props.id} className={styles.input} />
+          <CopyToClipboard
+            text={props.id}
+            onCopy={() => {
+              console.log("ey");
+            }}
+          >
+            <Button primary>Copy</Button>
+          </CopyToClipboard>
         </Tooltip>
       </div>
     </div>
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 9a4d03cd8..3d7956dc6 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -17,6 +17,7 @@ const CommentContainer: StatelessComponent<InnerProps> = props => {
 const enhanced = withFragmentContainer<{ data: Data }>(
   graphql`
     fragment CommentContainer on Comment {
+      id
       author {
         username
       }
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.css b/src/core/client/ui/components/Tooltip/Tooltip.css
index e3de3d8fe..1a1553256 100644
--- a/src/core/client/ui/components/Tooltip/Tooltip.css
+++ b/src/core/client/ui/components/Tooltip/Tooltip.css
@@ -1,4 +1,5 @@
 .root {
+  padding: 6px 10px;
   background: #ffffff !important;
   border: 1px solid #c9cacb;
   box-sizing: border-box;
@@ -12,3 +13,7 @@
     border-top-color: transparent !important;
   }
 }
+
+.clickable {
+  pointer-events: all;
+}
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.tsx b/src/core/client/ui/components/Tooltip/Tooltip.tsx
index dffda088a..f6e1a9cf0 100644
--- a/src/core/client/ui/components/Tooltip/Tooltip.tsx
+++ b/src/core/client/ui/components/Tooltip/Tooltip.tsx
@@ -1,10 +1,21 @@
+import cn from "classnames";
 import React from "react";
 import ReactTooltip from "react-tooltip";
 import * as styles from "./Tooltip.css";
 
-class Tooltip extends React.Component<ReactTooltip.Props> {
+interface InnerProps extends ReactTooltip.Props {
+  clickable: boolean;
+}
+
+class Tooltip extends React.Component<InnerProps> {
   public render() {
-    return <ReactTooltip className={styles.root} {...this.props} />;
+    const { clickable } = this.props;
+    return (
+      <ReactTooltip
+        className={cn(styles.root, { [styles.clickable]: clickable })}
+        {...this.props}
+      />
+    );
   }
 }
 

From 50de9a7f84366481a9a16d3b4dc7895860e717f0 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 9 Jul 2018 11:37:08 -0300
Subject: [PATCH 08/69] WIP

---
 src/core/client/stream/components/App.tsx      |  5 +++++
 .../client/stream/containers/AppContainer.tsx  |  5 +++++
 src/core/client/stream/local/local.graphql     |  1 +
 src/core/client/stream/queries/AppQuery.tsx    | 18 ++++++++++++++++--
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index dde8e386c..56bdf54a2 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -15,9 +15,14 @@ export interface AppProps {
     isClosed: boolean;
     comments: any | null;
   } | null;
+  comment?: any | null;
 }
 
 const App: StatelessComponent<AppProps> = props => {
+  console.log(props);
+  if (props.comment) {
+    return <div>Comment</div>;
+  }
   if (props.assets) {
     return <AssetListContainer assets={props.assets} />;
   }
diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index 02abbf314..07ee8b105 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -20,8 +20,13 @@ const enhanced = withFragmentContainer<{ data: Data }>(
     fragment AppContainer on Query
       @argumentDefinitions(
         assetID: { type: "ID!" }
+        commentID: { type: "ID" }
         showAssetList: { type: "Boolean!" }
+        showPermalink: { type: "Boolean!" }
       ) {
+      comment(id: $commentID) @include(if: $showPermalink) {
+        id
+      }
       assets @include(if: $showAssetList) {
         ...AssetListContainer_assets
       }
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 3359458d0..59c829490 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -6,6 +6,7 @@ type Network {
 type Local {
   network: Network!
   assetID: String
+  commentID: String
 }
 
 extend type Query {
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 4dc61115c..86cbb69ff 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -33,9 +33,19 @@ const AppQuery: StatelessComponent<InnerProps> = props => {
   return (
     <QueryRenderer<AppQueryVariables, AppQueryResponse>
       query={graphql`
-        query AppQuery($showAssetList: Boolean!, $assetID: ID!) {
+        query AppQuery(
+          $assetID: ID!
+          $commentID: ID
+          $showAssetList: Boolean!
+          $showPermalink: Boolean!
+        ) {
           ...AppContainer
-            @arguments(showAssetList: $showAssetList, assetID: $assetID)
+            @arguments(
+              assetID: $assetID
+              commentID: $commentID
+              showAssetList: $showAssetList
+              showPermalink: $showPermalink
+            )
         }
       `}
       variables={{
@@ -43,6 +53,9 @@ const AppQuery: StatelessComponent<InnerProps> = props => {
         assetID: props.local.assetID || (null as any),
         // TODO: This is set to false, as server does not support querying assets yet.
         showAssetList: !props.local.assetID && false,
+
+        commentID: props.local.commentID || (null as any),
+        showPermalink: false,
       }}
       render={render}
     />
@@ -53,6 +66,7 @@ const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment AppQueryLocal on Local {
       assetID
+      commentID
     }
   `
 )(AppQuery);

From 6210ae60778e1c633364088979bec781c78a8ccb Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 9 Jul 2018 11:44:52 -0300
Subject: [PATCH 09/69] clean request

---
 .../client/stream/containers/AppContainer.tsx  |  5 -----
 src/core/client/stream/local/local.graphql     |  1 -
 src/core/client/stream/queries/AppQuery.tsx    | 18 ++----------------
 3 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index 07ee8b105..02abbf314 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -20,13 +20,8 @@ const enhanced = withFragmentContainer<{ data: Data }>(
     fragment AppContainer on Query
       @argumentDefinitions(
         assetID: { type: "ID!" }
-        commentID: { type: "ID" }
         showAssetList: { type: "Boolean!" }
-        showPermalink: { type: "Boolean!" }
       ) {
-      comment(id: $commentID) @include(if: $showPermalink) {
-        id
-      }
       assets @include(if: $showAssetList) {
         ...AssetListContainer_assets
       }
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 59c829490..3359458d0 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -6,7 +6,6 @@ type Network {
 type Local {
   network: Network!
   assetID: String
-  commentID: String
 }
 
 extend type Query {
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 86cbb69ff..d1256d249 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -33,19 +33,9 @@ const AppQuery: StatelessComponent<InnerProps> = props => {
   return (
     <QueryRenderer<AppQueryVariables, AppQueryResponse>
       query={graphql`
-        query AppQuery(
-          $assetID: ID!
-          $commentID: ID
-          $showAssetList: Boolean!
-          $showPermalink: Boolean!
-        ) {
+        query AppQuery($assetID: ID!, $showAssetList: Boolean!) {
           ...AppContainer
-            @arguments(
-              assetID: $assetID
-              commentID: $commentID
-              showAssetList: $showAssetList
-              showPermalink: $showPermalink
-            )
+            @arguments(assetID: $assetID, showAssetList: $showAssetList)
         }
       `}
       variables={{
@@ -53,9 +43,6 @@ const AppQuery: StatelessComponent<InnerProps> = props => {
         assetID: props.local.assetID || (null as any),
         // TODO: This is set to false, as server does not support querying assets yet.
         showAssetList: !props.local.assetID && false,
-
-        commentID: props.local.commentID || (null as any),
-        showPermalink: false,
       }}
       render={render}
     />
@@ -66,7 +53,6 @@ const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment AppQueryLocal on Local {
       assetID
-      commentID
     }
   `
 )(AppQuery);

From b15ea811e5265a0cfaa80a5db5af5f184f74724e Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 9 Jul 2018 14:33:28 -0300
Subject: [PATCH 10/69] wip

---
 src/core/client/stream/components/Comment.tsx | 34 ++++++++-----------
 src/core/client/tslint.json                   | 19 ++++-------
 .../Tooltip.css => Popover/Popover.css}       |  0
 .../client/ui/components/Popover/Popover.tsx  | 32 +++++++++++++++++
 .../client/ui/components/Popover/index.ts     |  2 ++
 .../ui/components/TextField/TextField.css     | 11 ++++++
 .../ui/components/TextField/TextField.d.ts    |  1 +
 .../ui/components/TextField/TextField.tsx     | 14 ++++++++
 .../client/ui/components/TextField/index.ts   |  2 ++
 .../client/ui/components/Tooltip/Tooltip.tsx  | 22 ------------
 .../client/ui/components/Tooltip/index.ts     |  2 --
 src/core/client/ui/components/index.ts        |  2 +-
 src/tsconfig.json                             | 25 ++++----------
 tslint.json                                   | 11 ++----
 14 files changed, 92 insertions(+), 85 deletions(-)
 rename src/core/client/ui/components/{Tooltip/Tooltip.css => Popover/Popover.css} (100%)
 create mode 100644 src/core/client/ui/components/Popover/Popover.tsx
 create mode 100644 src/core/client/ui/components/Popover/index.ts
 create mode 100644 src/core/client/ui/components/TextField/TextField.css
 create mode 100644 src/core/client/ui/components/TextField/TextField.d.ts
 create mode 100644 src/core/client/ui/components/TextField/TextField.tsx
 create mode 100644 src/core/client/ui/components/TextField/index.ts
 delete mode 100644 src/core/client/ui/components/Tooltip/Tooltip.tsx
 delete mode 100644 src/core/client/ui/components/Tooltip/index.ts

diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
index b594cf27d..cc13ae115 100644
--- a/src/core/client/stream/components/Comment.tsx
+++ b/src/core/client/stream/components/Comment.tsx
@@ -2,7 +2,7 @@ import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { Button, Input, Tooltip, Typography } from "talk-ui/components";
+import { Button, Input, Popover, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
 export interface CommentProps {
@@ -15,6 +15,8 @@ export interface CommentProps {
   gutterBottom?: boolean;
 }
 
+// make a permalink popover
+
 const Comment: StatelessComponent<CommentProps> = props => {
   const rootClassName = cn(styles.root, props.className, {
     [styles.gutterBottom]: props.gutterBottom,
@@ -26,26 +28,18 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </Typography>
       <Typography>{props.body}</Typography>
       <div className={cn("talk-comment-footer")}>
-        <Button
-          className={styles.shareButton}
-          data-tip
-          data-for="tooltip"
-          data-event="click"
+        <Popover
+          body={
+            <div>
+              <Input defaultValue={props.id} className={styles.input} />
+              <CopyToClipboard text={props.id}>
+                <Button primary>Copy</Button>
+              </CopyToClipboard>
+            </div>
+          }
         >
-          Share
-        </Button>
-
-        <Tooltip id="tooltip" effect="solid" clickable>
-          <Input defaultValue={props.id} className={styles.input} />
-          <CopyToClipboard
-            text={props.id}
-            onCopy={() => {
-              console.log("ey");
-            }}
-          >
-            <Button primary>Copy</Button>
-          </CopyToClipboard>
-        </Tooltip>
+          <Button className={styles.shareButton}>Share</Button>
+        </Popover>
       </div>
     </div>
   );
diff --git a/src/core/client/tslint.json b/src/core/client/tslint.json
index 9abc9b921..0079a6de1 100644
--- a/src/core/client/tslint.json
+++ b/src/core/client/tslint.json
@@ -1,20 +1,13 @@
 {
-  "extends": [
-    "../../../tslint.json",
-    "tslint-react"
-  ],
+  "extends": ["../../../tslint.json", "tslint-react"],
   "rules": {
+    "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [
-      true,
-      "never"
-    ]
+    "jsx-boolean-value": [true, "never"]
   },
   "jsRules": {
+    "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [
-      true,
-      "never"
-    ]
+    "jsx-boolean-value": [true, "never"]
   }
-}
\ No newline at end of file
+}
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.css b/src/core/client/ui/components/Popover/Popover.css
similarity index 100%
rename from src/core/client/ui/components/Tooltip/Tooltip.css
rename to src/core/client/ui/components/Popover/Popover.css
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
new file mode 100644
index 000000000..a3c2b9b4b
--- /dev/null
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { Manager, Popper, Reference } from "react-popper";
+// import * as styles from "./Popover.css";
+
+interface InnerProps {
+  body: React.ReactElement<any>;
+  children: React.ReactElement<any>;
+}
+
+class Popover extends React.Component<InnerProps> {
+  public render() {
+    const { children, body } = this.props;
+    return (
+      <Manager>
+        <Reference>
+          {({ ref }) => React.cloneElement(children, { ref })}
+        </Reference>
+        <Popper placement="right">
+          {({ ref, style, placement, arrowProps }) =>
+            React.cloneElement(body, {
+              ref,
+              style,
+              "data-placement": placement,
+            })
+          }
+        </Popper>
+      </Manager>
+    );
+  }
+}
+
+export default Popover;
diff --git a/src/core/client/ui/components/Popover/index.ts b/src/core/client/ui/components/Popover/index.ts
new file mode 100644
index 000000000..7e46e3708
--- /dev/null
+++ b/src/core/client/ui/components/Popover/index.ts
@@ -0,0 +1,2 @@
+export * from "./Popover";
+export { default } from "./Popover";
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
new file mode 100644
index 000000000..4d2e9e88a
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -0,0 +1,11 @@
+.root {
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: calc(0.57em / 16);
+  background: #ffffff;
+  border: 1px solid #979797;
+  box-sizing: border-box;
+  border-radius: 1px;
+  padding: 5px 20px;
+}
diff --git a/src/core/client/ui/components/TextField/TextField.d.ts b/src/core/client/ui/components/TextField/TextField.d.ts
new file mode 100644
index 000000000..f99662ba2
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.d.ts
@@ -0,0 +1 @@
+export const root: string;
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
new file mode 100644
index 000000000..d1a623662
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { InputHTMLAttributes, StatelessComponent } from "react";
+
+import * as styles from "./TextField";
+
+interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
+  classes?: typeof styles;
+}
+
+const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+  return <input {...rest} className={cn(styles.root, className)} />;
+};
+
+export default Input;
diff --git a/src/core/client/ui/components/TextField/index.ts b/src/core/client/ui/components/TextField/index.ts
new file mode 100644
index 000000000..e38acd4ea
--- /dev/null
+++ b/src/core/client/ui/components/TextField/index.ts
@@ -0,0 +1,2 @@
+export * from "./TextField";
+export { default } from "./TextField";
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.tsx b/src/core/client/ui/components/Tooltip/Tooltip.tsx
deleted file mode 100644
index f6e1a9cf0..000000000
--- a/src/core/client/ui/components/Tooltip/Tooltip.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import cn from "classnames";
-import React from "react";
-import ReactTooltip from "react-tooltip";
-import * as styles from "./Tooltip.css";
-
-interface InnerProps extends ReactTooltip.Props {
-  clickable: boolean;
-}
-
-class Tooltip extends React.Component<InnerProps> {
-  public render() {
-    const { clickable } = this.props;
-    return (
-      <ReactTooltip
-        className={cn(styles.root, { [styles.clickable]: clickable })}
-        {...this.props}
-      />
-    );
-  }
-}
-
-export default Tooltip;
diff --git a/src/core/client/ui/components/Tooltip/index.ts b/src/core/client/ui/components/Tooltip/index.ts
deleted file mode 100644
index 9474b3888..000000000
--- a/src/core/client/ui/components/Tooltip/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Tooltip";
-export { default } from "./Tooltip";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 6e1fcd8a6..9f16ee536 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -2,5 +2,5 @@ export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
 export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
-export { default as Tooltip } from "./Tooltip";
+export { default as Popover } from "./Popover";
 export { default as Input } from "./Input";
diff --git a/src/tsconfig.json b/src/tsconfig.json
index eddf98d29..857892f4d 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -9,26 +9,13 @@
     "outDir": "../dist",
     // See https://github.com/prismagraphql/graphql-request/issues/26 for why we
     // have to include "dom" here.
-    "lib": [
-      "es6",
-      "esnext.asynciterable",
-      "dom"
-    ],
+    "lib": ["es6", "esnext.asynciterable", "dom"],
     "baseUrl": "./",
     "paths": {
-      "talk-server/*": [
-        "./core/server/*"
-      ],
-      "talk-common/*": [
-        "./core/common/*"
-      ]
+      "talk-server/*": ["./core/server/*"],
+      "talk-common/*": ["./core/common/*"]
     }
   },
-  "include": [
-    "./**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "./core/client"
-  ]
-}
\ No newline at end of file
+  "include": ["./**/*"],
+  "exclude": ["node_modules", "./core/client"]
+}
diff --git a/tslint.json b/tslint.json
index 68001f8c6..853208eb0 100644
--- a/tslint.json
+++ b/tslint.json
@@ -7,10 +7,7 @@
   "rules": {
     "prettier": true,
     "object-literal-sort-keys": false,
-    "interface-name": [
-      true,
-      "never-prefix"
-    ],
+    "interface-name": [true, "never-prefix"],
     "no-switch-case-fall-through": true,
     "member-ordering": false,
     "variable-name": [
@@ -35,8 +32,6 @@
     ]
   },
   "linterOptions": {
-    "exclude": [
-      "**/node_modules/**/*"
-    ]
+    "exclude": ["**/node_modules/**/*"]
   }
-}
\ No newline at end of file
+}

From 155b8c731673f3f63dcacefe0de81387ff8f232e Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 9 Jul 2018 16:39:04 -0300
Subject: [PATCH 11/69] progress

---
 package-lock.json                             | 67 ++++++++++++++-----
 package.json                                  |  1 +
 src/core/client/stream/components/Comment.tsx | 22 ++++++
 .../client/ui/components/Popover/Popover.tsx  |  9 ++-
 .../ui/components/TextField/TextField.tsx     |  2 +-
 5 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9f3848257..2321cd2cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2390,8 +2390,7 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
     "asn1": {
       "version": "0.2.3",
@@ -5876,6 +5875,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+      "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-fetch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-2.0.0.tgz",
@@ -7288,7 +7296,6 @@
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "dev": true,
       "requires": {
         "iconv-lite": "~0.4.13"
       }
@@ -7958,7 +7965,6 @@
       "version": "0.8.17",
       "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
       "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-      "dev": true,
       "requires": {
         "core-js": "^1.0.0",
         "isomorphic-fetch": "^2.1.1",
@@ -7972,8 +7978,7 @@
         "core-js": {
           "version": "1.2.7",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
-          "dev": true
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
         }
       }
     },
@@ -9278,6 +9283,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
@@ -10604,8 +10614,7 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-svg": {
       "version": "2.1.0",
@@ -10715,7 +10724,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
       "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "dev": true,
       "requires": {
         "node-fetch": "^1.0.1",
         "whatwg-fetch": ">=0.10.0"
@@ -10725,7 +10733,6 @@
           "version": "1.7.3",
           "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
           "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-          "dev": true,
           "requires": {
             "encoding": "^0.1.11",
             "is-stream": "^1.0.1"
@@ -13542,6 +13549,11 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
+      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -15895,7 +15907,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
       "requires": {
         "asap": "~2.0.3"
       }
@@ -16537,6 +16548,29 @@
       "integrity": "sha512-OQvgdiPfWbAjudT8Q+V2aWsySCJW0aQ3wNjfOw1ooamydEQkDxRfWqfnEhCYLneCz67d+r3kBYoZlpAx5S+VWA==",
       "dev": true
     },
+    "react-popper": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
+      "integrity": "sha1-uZRSFE6P5KzHf6PZWajHngemUIQ=",
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-powerplug": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/react-powerplug/-/react-powerplug-0.1.6.tgz",
@@ -17842,8 +17876,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
-      "dev": true
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "setprototypeof": {
       "version": "1.1.0",
@@ -19711,6 +19744,11 @@
         }
       }
     },
+    "typed-styles": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -19726,8 +19764,7 @@
     "ua-parser-js": {
       "version": "0.7.18",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
-      "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==",
-      "dev": true
+      "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
     },
     "uglify-js": {
       "version": "3.4.2",
diff --git a/package.json b/package.json
index d2defed61..49b0d6ea4 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "performance-now": "^2.1.0",
     "rc-tooltip": "^3.7.2",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-popper": "^1.14.3",
     "react-tooltip": "^3.6.1",
     "subscriptions-transport-ws": "^0.9.11",
     "uuid": "^3.2.1"
diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
index cc13ae115..7bb017b42 100644
--- a/src/core/client/stream/components/Comment.tsx
+++ b/src/core/client/stream/components/Comment.tsx
@@ -2,6 +2,7 @@ import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
+import { Manager, Popper, Reference } from "react-popper";
 import { Button, Input, Popover, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
@@ -27,6 +28,27 @@ const Comment: StatelessComponent<CommentProps> = props => {
         {props.author && props.author.username}
       </Typography>
       <Typography>{props.body}</Typography>
+      <Manager>
+        <Reference>
+          {({ ref }) => (
+            <button type="button" ref={ref}>
+              Reference element
+            </button>
+          )}
+        </Reference>
+        <Popper
+          placement="left"
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {({ ref, style, placement, arrowProps }) => (
+            <div ref={ref} style={style} data-placement={placement}>
+              Popper element
+            </div>
+          )}
+        </Popper>
+      </Manager>
       <div className={cn("talk-comment-footer")}>
         <Popover
           body={
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index a3c2b9b4b..7359a8930 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -15,8 +15,13 @@ class Popover extends React.Component<InnerProps> {
         <Reference>
           {({ ref }) => React.cloneElement(children, { ref })}
         </Reference>
-        <Popper placement="right">
-          {({ ref, style, placement, arrowProps }) =>
+        <Popper
+          placement="left"
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {({ ref, placement, style }) =>
             React.cloneElement(body, {
               ref,
               style,
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index d1a623662..ac980b102 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -1,7 +1,7 @@
 import cn from "classnames";
 import React, { InputHTMLAttributes, StatelessComponent } from "react";
 
-import * as styles from "./TextField";
+import * as styles from "./TextField.css";
 
 interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
   classes?: typeof styles;

From 7ee9f235421697e7b0bf3cf0e731fb9511345875 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 9 Jul 2018 18:37:46 -0300
Subject: [PATCH 12/69] work in progress

---
 package-lock.json                             |  6 +--
 package.json                                  |  2 +-
 src/core/client/stream/components/Comment.tsx | 39 ++-----------------
 .../stream/components/PermalinkPopover.tsx    | 25 ++++++++++++
 .../client/ui/components/Button/Button.tsx    |  1 +
 .../client/ui/components/Popover/Popover.tsx  | 23 +++++++++--
 src/core/client/ui/hocs/withFowardedRefs.tsx  |  9 +++++
 7 files changed, 61 insertions(+), 44 deletions(-)
 create mode 100644 src/core/client/stream/components/PermalinkPopover.tsx
 create mode 100644 src/core/client/ui/hocs/withFowardedRefs.tsx

diff --git a/package-lock.json b/package-lock.json
index 2321cd2cf..a0c6f82dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16549,9 +16549,9 @@
       "dev": true
     },
     "react-popper": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
-      "integrity": "sha1-uZRSFE6P5KzHf6PZWajHngemUIQ=",
+      "version": "1.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0-beta.6.tgz",
+      "integrity": "sha1-yyeirFatzLr1+cQTI4cokGkkCDQ=",
       "requires": {
         "babel-runtime": "6.x.x",
         "create-react-context": "^0.2.1",
diff --git a/package.json b/package.json
index 49b0d6ea4..8dc74e5d8 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "performance-now": "^2.1.0",
     "rc-tooltip": "^3.7.2",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-popper": "^1.14.3",
+    "react-popper": "^1.0.0-beta.6",
     "react-tooltip": "^3.6.1",
     "subscriptions-transport-ws": "^0.9.11",
     "uuid": "^3.2.1"
diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
index 7bb017b42..014989a51 100644
--- a/src/core/client/stream/components/Comment.tsx
+++ b/src/core/client/stream/components/Comment.tsx
@@ -1,10 +1,9 @@
 import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
-import CopyToClipboard from "react-copy-to-clipboard";
-import { Manager, Popper, Reference } from "react-popper";
-import { Button, Input, Popover, Typography } from "talk-ui/components";
+import { Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
+import PermalinkPopover from "./PermalinkPopover";
 
 export interface CommentProps {
   id: string;
@@ -28,40 +27,8 @@ const Comment: StatelessComponent<CommentProps> = props => {
         {props.author && props.author.username}
       </Typography>
       <Typography>{props.body}</Typography>
-      <Manager>
-        <Reference>
-          {({ ref }) => (
-            <button type="button" ref={ref}>
-              Reference element
-            </button>
-          )}
-        </Reference>
-        <Popper
-          placement="left"
-          modifiers={{ preventOverflow: { enabled: false } }}
-          eventsEnabled
-          positionFixed={false}
-        >
-          {({ ref, style, placement, arrowProps }) => (
-            <div ref={ref} style={style} data-placement={placement}>
-              Popper element
-            </div>
-          )}
-        </Popper>
-      </Manager>
       <div className={cn("talk-comment-footer")}>
-        <Popover
-          body={
-            <div>
-              <Input defaultValue={props.id} className={styles.input} />
-              <CopyToClipboard text={props.id}>
-                <Button primary>Copy</Button>
-              </CopyToClipboard>
-            </div>
-          }
-        >
-          <Button className={styles.shareButton}>Share</Button>
-        </Popover>
+        <PermalinkPopover />
       </div>
     </div>
   );
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
new file mode 100644
index 000000000..cd110dfe3
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { Button, Input, Popover } from "talk-ui/components";
+
+class PermalinkPopover extends React.Component {
+  public render() {
+    const props = this.props;
+    return (
+      <Popover
+        body={
+          <div>
+            <Input defaultValue={props.id} className={styles.input} />
+            <CopyToClipboard text={props.id}>
+              <Button primary>Copy</Button>
+            </CopyToClipboard>
+          </div>
+        }
+      >
+        <button>Reference element</button>
+      </Popover>
+    );
+  }
+}
+
+export default PermalinkPopover;
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index dadb7a35d..127d16c2e 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -49,6 +49,7 @@ class Button extends React.Component<InnerProps> {
       [classes.secondary]: secondary,
     });
 
+    console.log(this.props);
     return (
       <BaseButton
         className={rootClassName}
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 7359a8930..8b55931c2 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -5,27 +5,42 @@ import { Manager, Popper, Reference } from "react-popper";
 interface InnerProps {
   body: React.ReactElement<any>;
   children: React.ReactElement<any>;
+  placement?:
+    | "auto-start"
+    | "auto"
+    | "auto-end"
+    | "top-start"
+    | "top"
+    | "top-end"
+    | "right-start"
+    | "right"
+    | "right-end"
+    | "bottom-end"
+    | "bottom"
+    | "bottom-start"
+    | "left-end"
+    | "left"
+    | "left-start";
 }
 
 class Popover extends React.Component<InnerProps> {
   public render() {
-    const { children, body } = this.props;
+    const { children, body, placement = "top" } = this.props;
     return (
       <Manager>
         <Reference>
           {({ ref }) => React.cloneElement(children, { ref })}
         </Reference>
         <Popper
-          placement="left"
+          placement={placement}
           modifiers={{ preventOverflow: { enabled: false } }}
           eventsEnabled
           positionFixed={false}
         >
-          {({ ref, placement, style }) =>
+          {({ ref, style }) =>
             React.cloneElement(body, {
               ref,
               style,
-              "data-placement": placement,
             })
           }
         </Popper>
diff --git a/src/core/client/ui/hocs/withFowardedRefs.tsx b/src/core/client/ui/hocs/withFowardedRefs.tsx
new file mode 100644
index 000000000..6fe7a726c
--- /dev/null
+++ b/src/core/client/ui/hocs/withFowardedRefs.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export function forwardRef(
+  WrappedComponent: React.ComponentType
+): React.RefForwardingComponent<any, any> {
+  return React.forwardRef((props, ref) => {
+    return <WrappedComponent {...props} forwardedRef={ref} />;
+  });
+}

From 37fb9ece668cb6ec21df4f978f5096aeb8804ca4 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 9 Jul 2018 18:57:41 -0300
Subject: [PATCH 13/69] wip

---
 src/core/client/stream/components/Comment.css |  8 --------
 src/core/client/stream/components/Comment.tsx |  2 +-
 .../stream/components/PermalinkPopover.css    | 13 +++++++++++++
 .../stream/components/PermalinkPopover.tsx    | 19 ++++++++++++-------
 src/core/client/ui/components/Input/Input.css | 11 -----------
 src/core/client/ui/components/Input/Input.tsx | 14 --------------
 src/core/client/ui/components/Input/index.ts  |  2 --
 src/core/client/ui/components/index.ts        |  2 +-
 src/core/client/ui/hocs/withFowardedRefs.tsx  |  9 ---------
 9 files changed, 27 insertions(+), 53 deletions(-)
 create mode 100644 src/core/client/stream/components/PermalinkPopover.css
 delete mode 100644 src/core/client/ui/components/Input/Input.css
 delete mode 100644 src/core/client/ui/components/Input/Input.tsx
 delete mode 100644 src/core/client/ui/components/Input/index.ts
 delete mode 100644 src/core/client/ui/hocs/withFowardedRefs.tsx

diff --git a/src/core/client/stream/components/Comment.css b/src/core/client/stream/components/Comment.css
index 8e5301ecd..4e23b2d02 100644
--- a/src/core/client/stream/components/Comment.css
+++ b/src/core/client/stream/components/Comment.css
@@ -9,11 +9,3 @@
 .author {
   font-weight: $font-weight-medium;
 }
-
-.shareButton {
-  padding: 10px 0;
-}
-
-.input {
-  margin-right: 5px;
-}
diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
index 014989a51..a332b42a3 100644
--- a/src/core/client/stream/components/Comment.tsx
+++ b/src/core/client/stream/components/Comment.tsx
@@ -28,7 +28,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </Typography>
       <Typography>{props.body}</Typography>
       <div className={cn("talk-comment-footer")}>
-        <PermalinkPopover />
+        <PermalinkPopover commentId={props.id} />
       </div>
     </div>
   );
diff --git a/src/core/client/stream/components/PermalinkPopover.css b/src/core/client/stream/components/PermalinkPopover.css
new file mode 100644
index 000000000..ffc0a1b6c
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkPopover.css
@@ -0,0 +1,13 @@
+.shareButton {
+  composes: button from "talk-ui/shared/typography.css";
+  composes: buttonReset from "talk-ui/shared/buttonReset.css";
+  padding: 10px 0;
+}
+
+.textField {
+  margin-right: 5px;
+}
+
+.root {
+  background-color: #fff;
+}
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index cd110dfe3..7d9bf8ade 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -1,22 +1,27 @@
 import React from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { Button, Input, Popover } from "talk-ui/components";
+import { Button, Popover, TextField } from "talk-ui/components";
+import * as styles from "./PermalinkPopover.css";
 
-class PermalinkPopover extends React.Component {
+interface InnerProps {
+  commentId: string;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
   public render() {
-    const props = this.props;
+    const { commentId } = this.props;
     return (
       <Popover
         body={
-          <div>
-            <Input defaultValue={props.id} className={styles.input} />
-            <CopyToClipboard text={props.id}>
+          <div className={styles.root}>
+            <TextField defaultValue={commentId} className={styles.textField} />
+            <CopyToClipboard text={commentId}>
               <Button primary>Copy</Button>
             </CopyToClipboard>
           </div>
         }
       >
-        <button>Reference element</button>
+        <button className={styles.shareButton}>Share</button>
       </Popover>
     );
   }
diff --git a/src/core/client/ui/components/Input/Input.css b/src/core/client/ui/components/Input/Input.css
deleted file mode 100644
index 4d2e9e88a..000000000
--- a/src/core/client/ui/components/Input/Input.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.root {
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  font-size: 16px;
-  letter-spacing: calc(0.57em / 16);
-  background: #ffffff;
-  border: 1px solid #979797;
-  box-sizing: border-box;
-  border-radius: 1px;
-  padding: 5px 20px;
-}
diff --git a/src/core/client/ui/components/Input/Input.tsx b/src/core/client/ui/components/Input/Input.tsx
deleted file mode 100644
index 261b3b1af..000000000
--- a/src/core/client/ui/components/Input/Input.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import cn from "classnames";
-import React, { InputHTMLAttributes, StatelessComponent } from "react";
-
-import * as styles from "./Input.css";
-
-interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
-  classes?: typeof styles;
-}
-
-const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
-  return <input {...rest} className={cn(styles.root, className)} />;
-};
-
-export default Input;
diff --git a/src/core/client/ui/components/Input/index.ts b/src/core/client/ui/components/Input/index.ts
deleted file mode 100644
index ae0d7a775..000000000
--- a/src/core/client/ui/components/Input/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Input";
-export { default } from "./Input";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 9f16ee536..66ed5bee4 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -3,4 +3,4 @@ export { default as Button } from "./Button";
 export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
 export { default as Popover } from "./Popover";
-export { default as Input } from "./Input";
+export { default as TextField } from "./TextField";
diff --git a/src/core/client/ui/hocs/withFowardedRefs.tsx b/src/core/client/ui/hocs/withFowardedRefs.tsx
deleted file mode 100644
index 6fe7a726c..000000000
--- a/src/core/client/ui/hocs/withFowardedRefs.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-export function forwardRef(
-  WrappedComponent: React.ComponentType
-): React.RefForwardingComponent<any, any> {
-  return React.forwardRef((props, ref) => {
-    return <WrappedComponent {...props} forwardedRef={ref} />;
-  });
-}

From 50fdabc0c04f23e018c621c1e220346990bc75aa Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 9 Jul 2018 19:42:24 -0300
Subject: [PATCH 14/69] ui functionality

---
 .../stream/components/PermalinkPopover.tsx    | 41 +++++++++++++++++--
 .../client/ui/components/Popover/Popover.css  |  4 --
 .../client/ui/components/Popover/Popover.tsx  | 34 ++++++++-------
 3 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index 7d9bf8ade..776edbccf 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -7,21 +7,56 @@ interface InnerProps {
   commentId: string;
 }
 
+interface State {
+  copied: boolean;
+  showBody: boolean;
+}
+
 class PermalinkPopover extends React.Component<InnerProps> {
+  public state: State = {
+    copied: false,
+    showBody: false,
+  };
+
+  public onCopy = async () => {
+    await this.toggleCopied();
+    setTimeout(() => {
+      this.toggleCopied();
+    }, 800);
+  };
+
+  public onClick = () => this.toggleShow();
+
+  public toggleShow = () => {
+    this.setState((state: State) => ({
+      showBody: !state.showBody,
+    }));
+  };
+
+  public toggleCopied = () => {
+    this.setState((state: State) => ({
+      copied: !state.copied,
+    }));
+  };
+
   public render() {
     const { commentId } = this.props;
+    const { copied, showBody } = this.state;
     return (
       <Popover
+        showBody={showBody}
         body={
           <div className={styles.root}>
             <TextField defaultValue={commentId} className={styles.textField} />
-            <CopyToClipboard text={commentId}>
-              <Button primary>Copy</Button>
+            <CopyToClipboard text={commentId} onCopy={this.onCopy}>
+              <Button primary>{copied ? "Copied!" : "Copy"}</Button>
             </CopyToClipboard>
           </div>
         }
       >
-        <button className={styles.shareButton}>Share</button>
+        <button className={styles.shareButton} onClick={this.onClick}>
+          Share
+        </button>
       </Popover>
     );
   }
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
index 1a1553256..708964cdb 100644
--- a/src/core/client/ui/components/Popover/Popover.css
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -13,7 +13,3 @@
     border-top-color: transparent !important;
   }
 }
-
-.clickable {
-  pointer-events: all;
-}
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 8b55931c2..84be78c8f 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import { Manager, Popper, Reference } from "react-popper";
-// import * as styles from "./Popover.css";
+import * as styles from "./Popover.css";
 
 interface InnerProps {
   body: React.ReactElement<any>;
   children: React.ReactElement<any>;
+  showBody: boolean;
   placement?:
     | "auto-start"
     | "auto"
@@ -25,25 +26,28 @@ interface InnerProps {
 
 class Popover extends React.Component<InnerProps> {
   public render() {
-    const { children, body, placement = "top" } = this.props;
+    const { children, body, placement = "top", showBody = true } = this.props;
     return (
       <Manager>
         <Reference>
           {({ ref }) => React.cloneElement(children, { ref })}
         </Reference>
-        <Popper
-          placement={placement}
-          modifiers={{ preventOverflow: { enabled: false } }}
-          eventsEnabled
-          positionFixed={false}
-        >
-          {({ ref, style }) =>
-            React.cloneElement(body, {
-              ref,
-              style,
-            })
-          }
-        </Popper>
+        {showBody && (
+          <Popper
+            placement={placement}
+            modifiers={{ preventOverflow: { enabled: false } }}
+            eventsEnabled
+            positionFixed={false}
+          >
+            {({ ref, style }) =>
+              React.cloneElement(body, {
+                ref,
+                style,
+                className: styles.root,
+              })
+            }
+          </Popper>
+        )}
       </Manager>
     );
   }

From 6298a50bbe0a0fdcd7cf4c8d3419f2da0d39299a Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Tue, 10 Jul 2018 12:33:31 -0300
Subject: [PATCH 15/69] Translations :/

---
 .../stream/components/PermalinkPopover.tsx      | 17 +++++++++++++++--
 src/core/client/ui/components/Button/Button.tsx |  1 -
 src/locales/en-US/stream.ftl                    |  3 +++
 src/locales/es/stream.ftl                       |  3 +++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index 776edbccf..eaa3368fd 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -1,3 +1,4 @@
+import { Localized as L } from "fluent-react/compat";
 import React from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Button, Popover, TextField } from "talk-ui/components";
@@ -49,13 +50,25 @@ class PermalinkPopover extends React.Component<InnerProps> {
           <div className={styles.root}>
             <TextField defaultValue={commentId} className={styles.textField} />
             <CopyToClipboard text={commentId} onCopy={this.onCopy}>
-              <Button primary>{copied ? "Copied!" : "Copy"}</Button>
+              <Button primary>
+                {copied ? (
+                  <L id="copied">
+                    <span>Copied!</span>
+                  </L>
+                ) : (
+                  <L id="copy">
+                    <span>Copy</span>
+                  </L>
+                )}
+              </Button>
             </CopyToClipboard>
           </div>
         }
       >
         <button className={styles.shareButton} onClick={this.onClick}>
-          Share
+          <L id="share">
+            <span>Share</span>
+          </L>
         </button>
       </Popover>
     );
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index 127d16c2e..dadb7a35d 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -49,7 +49,6 @@ class Button extends React.Component<InnerProps> {
       [classes.secondary]: secondary,
     });
 
-    console.log(this.props);
     return (
       <BaseButton
         className={rootClassName}
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 4d79869a5..fa8b0ba5c 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -1 +1,4 @@
 postCommentForm-submit = Post
+share = Share
+copy = Copy
+copied = Copied
diff --git a/src/locales/es/stream.ftl b/src/locales/es/stream.ftl
index e69de29bb..30a906cb1 100644
--- a/src/locales/es/stream.ftl
+++ b/src/locales/es/stream.ftl
@@ -0,0 +1,3 @@
+share = Compartir
+copy = Copiar
+copied = Copiado

From fc616d17533de12c90de06c2f65a3ac926e18037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 11 Jul 2018 16:14:36 -0300
Subject: [PATCH 16/69] wip

---
 .../stream/components/PermalinkPopover.tsx    | 38 ++++++++++---------
 .../client/ui/components/Popover/Popover.tsx  | 36 +++++++++---------
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index eaa3368fd..282030d20 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -45,24 +45,28 @@ class PermalinkPopover extends React.Component<InnerProps> {
     const { copied, showBody } = this.state;
     return (
       <Popover
-        showBody={showBody}
         body={
-          <div className={styles.root}>
-            <TextField defaultValue={commentId} className={styles.textField} />
-            <CopyToClipboard text={commentId} onCopy={this.onCopy}>
-              <Button primary>
-                {copied ? (
-                  <L id="copied">
-                    <span>Copied!</span>
-                  </L>
-                ) : (
-                  <L id="copy">
-                    <span>Copy</span>
-                  </L>
-                )}
-              </Button>
-            </CopyToClipboard>
-          </div>
+          showBody ? (
+            <div className={styles.root}>
+              <TextField
+                defaultValue={commentId}
+                className={styles.textField}
+              />
+              <CopyToClipboard text={commentId} onCopy={this.onCopy}>
+                <Button primary>
+                  {copied ? (
+                    <L id="copied">
+                      <span>Copied!</span>
+                    </L>
+                  ) : (
+                    <L id="copy">
+                      <span>Copy</span>
+                    </L>
+                  )}
+                </Button>
+              </CopyToClipboard>
+            </div>
+          ) : null
         }
       >
         <button className={styles.shareButton} onClick={this.onClick}>
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 84be78c8f..eec4cf5d8 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -3,9 +3,8 @@ import { Manager, Popper, Reference } from "react-popper";
 import * as styles from "./Popover.css";
 
 interface InnerProps {
-  body: React.ReactElement<any>;
+  body: React.ReactElement<any> | null;
   children: React.ReactElement<any>;
-  showBody: boolean;
   placement?:
     | "auto-start"
     | "auto"
@@ -26,28 +25,27 @@ interface InnerProps {
 
 class Popover extends React.Component<InnerProps> {
   public render() {
-    const { children, body, placement = "top", showBody = true } = this.props;
+    const { children, body, placement = "top" } = this.props;
     return (
       <Manager>
         <Reference>
           {({ ref }) => React.cloneElement(children, { ref })}
         </Reference>
-        {showBody && (
-          <Popper
-            placement={placement}
-            modifiers={{ preventOverflow: { enabled: false } }}
-            eventsEnabled
-            positionFixed={false}
-          >
-            {({ ref, style }) =>
-              React.cloneElement(body, {
-                ref,
-                style,
-                className: styles.root,
-              })
-            }
-          </Popper>
-        )}
+
+        <Popper
+          placement={placement}
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {({ ref, style }) =>
+            React.cloneElement(body, {
+              ref,
+              style,
+              className: styles.root,
+            })
+          }
+        </Popper>
       </Manager>
     );
   }

From 4db619d8252ebc74edc60e9275f7f3df1178ca29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 16 Jul 2018 14:25:56 -0300
Subject: [PATCH 17/69] merge conflicts

---
 package-lock.json                             | 716 +++++++++---------
 package.json                                  |  11 +-
 .../components/Comment/Comment.spec.tsx       |  18 +-
 .../stream/components/PermalinkPopover.tsx    |   6 +-
 .../stream/containers/CommentContainer.tsx    |   9 +-
 .../{withForwardRef.ts => withForwardRef.tsx} |   1 +
 src/locales/en-US/stream.ftl                  |  11 +-
 7 files changed, 374 insertions(+), 398 deletions(-)
 rename src/core/client/ui/hocs/{withForwardRef.ts => withForwardRef.tsx} (94%)

diff --git a/package-lock.json b/package-lock.json
index 573b9bc4e..2854a2155 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1338,14 +1338,14 @@
       "dev": true
     },
     "@emotion/babel-utils": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.5.tgz",
-      "integrity": "sha1-NNeETrUy0Rdcj8cBdb63TQcb++s=",
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.7.tgz",
+      "integrity": "sha512-U6iTV9HurrZ0ye8VOTIGcV4tMdDtAIGbfCH58L/NdOhW05pV/KVlNmbXsHp01VMSM+pgmSkGqHSLLE8zdDYJvA==",
       "dev": true,
       "requires": {
-        "@emotion/hash": "^0.6.3",
-        "@emotion/memoize": "^0.6.3",
-        "@emotion/serialize": "^0.8.3",
+        "@emotion/hash": "^0.6.5",
+        "@emotion/memoize": "^0.6.5",
+        "@emotion/serialize": "^0.8.5",
         "convert-source-map": "^1.5.1",
         "find-root": "^1.1.0",
         "source-map": "^0.7.2"
@@ -1360,54 +1360,54 @@
       }
     },
     "@emotion/hash": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.3.tgz",
-      "integrity": "sha1-DnpWBGJvxsbUrEBhovWsgNUCYqQ=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.5.tgz",
+      "integrity": "sha512-JlZbn5+adseTdDPTUkx/O1/UZbhaGR5fCLLWQDCIJ4eP9fJcVdP/qjlTveEX6mkNoJHWFbZ47wArWQQ0Qk6nMA==",
       "dev": true
     },
     "@emotion/is-prop-valid": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.3.tgz",
-      "integrity": "sha1-sElW4tZVAn/ojGI0Zp/XBk+wccw=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.5.tgz",
+      "integrity": "sha512-pfjQHT3FCZkAPxqY+sI6MmMTPMCKGIV3DcC1qhf68XkE9pGtKqb5WNN2vfmLgTMGnNVXnaFyx/VjdDYmGFcRaw==",
       "dev": true,
       "requires": {
-        "@emotion/memoize": "^0.6.3"
+        "@emotion/memoize": "^0.6.5"
       }
     },
     "@emotion/memoize": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.3.tgz",
-      "integrity": "sha1-ZDeaHWr2+NT+i9bv6dnoJOpLItg=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.5.tgz",
+      "integrity": "sha512-n1USr7yICA4LFIv7z6kKsXM8rZJxd1btKCBmDewlit+3OJ2j4bDfgXTAxTHYbPkHS/eztHmFWfsbxW2Pu5mDqA==",
       "dev": true
     },
     "@emotion/serialize": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.8.3.tgz",
-      "integrity": "sha1-D61Vual/lSPmsf1vtvdLbLQcf4s=",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.8.5.tgz",
+      "integrity": "sha512-NObUNfK7lqxFpSJWHRwJeeGSZaElEgMn5eR76ift06yx9FdwIfFY47ffapkf2lJUoIUx4ffP55fPSVPMgv0Qgw==",
       "dev": true,
       "requires": {
-        "@emotion/hash": "^0.6.3",
-        "@emotion/memoize": "^0.6.3",
-        "@emotion/unitless": "^0.6.3",
-        "@emotion/utils": "^0.7.1"
+        "@emotion/hash": "^0.6.5",
+        "@emotion/memoize": "^0.6.5",
+        "@emotion/unitless": "^0.6.5",
+        "@emotion/utils": "^0.7.3"
       }
     },
     "@emotion/stylis": {
-      "version": "0.6.10",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.6.10.tgz",
-      "integrity": "sha1-fTIeY568i6I6zlmQwg6U3Ou4890=",
+      "version": "0.6.12",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.6.12.tgz",
+      "integrity": "sha512-yS+t7l5FeYeiIyADyqjFBJvdotpphHb2S3mP4qak5BpV7ODvxuyAVF24IchEslW+A1MWHAhn5SiOW6GZIumiEQ==",
       "dev": true
     },
     "@emotion/unitless": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.3.tgz",
-      "integrity": "sha1-ZWguaKgnAccO77ONf5QaLAv6kN4=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.5.tgz",
+      "integrity": "sha512-kAFHWyQTMLcOvse+RfEfJ6uwwOlVFZcUOMX0wuBvEMwnF3Zb/6VQ/xDgbx9fNlp3I6AAmijAtUtIyT2qVldpnA==",
       "dev": true
     },
     "@emotion/utils": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.7.1.tgz",
-      "integrity": "sha1-5E5ZbQPJ8WujsSetMzqKByvLWgo=",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.7.3.tgz",
+      "integrity": "sha512-1bGqG9IYJETOOqQEjWinGx1deLlAW/Fcew4GyrzZx0dJIgAjivZTmwzjrhB+Vhj7TgjMr0aTyj5byHmZezisZQ==",
       "dev": true
     },
     "@mdx-js/loader": {
@@ -1538,9 +1538,9 @@
       "dev": true
     },
     "@types/bluebird": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.21.tgz",
-      "integrity": "sha512-6UNEwyw+6SGMC/WMI0ld0PS4st7Qq51qgguFrFizOSpGvZiqe9iswztFSdZvwJBEhLOy2JaxNE6VC7yMAlbfyQ==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.22.tgz",
+      "integrity": "sha512-wQamz3CYZCz9QVxhPOF+Odu2jZifcXkGJDff7580sx/TCR6/9Zsgv+iGe2/o4Upcs0RDFLVJuEtYSEFeAqDTSA==",
       "dev": true
     },
     "@types/body-parser": {
@@ -1690,9 +1690,9 @@
       "dev": true
     },
     "@types/ioredis": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/@types/ioredis/-/ioredis-3.2.12.tgz",
-      "integrity": "sha512-n1jXNSx4CFcDSmuV1Zchb6YpmcovMgCZtsboqGExlDRR6DWKorS9Dy44ekaM5Txq0CYlZhqJSj86gG0/nW/EBA==",
+      "version": "3.2.13",
+      "resolved": "https://registry.npmjs.org/@types/ioredis/-/ioredis-3.2.13.tgz",
+      "integrity": "sha512-38qPXqV4oEzucMcdl0yhqN9JCGYOjspvfQyOL4T4HpMcD4VIj4RfuumuM2mwTtK12jiHF0oxjyU8EvnLfHD+TA==",
       "dev": true,
       "requires": {
         "@types/bluebird": "*",
@@ -1700,9 +1700,9 @@
       }
     },
     "@types/jest": {
-      "version": "23.1.5",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.1.5.tgz",
-      "integrity": "sha512-GlN74UAcT2i+G4BzVVI/aHip0HDXZaiY11VEjHzAz74+dB3hIeM5lJmnnZx4acxxinK9lT+uEH1Vsa5aWj6w4Q==",
+      "version": "23.1.6",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.1.6.tgz",
+      "integrity": "sha512-lBu2tjrfGuj0gARErNmHZJrnWBdRrYk2XqlBY3LRv8Dqxk3w3461uuFMKmwfDDiOa5kzXocUnunCBBacGwF3+A==",
       "dev": true
     },
     "@types/joi": {
@@ -1724,9 +1724,9 @@
       }
     },
     "@types/lodash": {
-      "version": "4.14.111",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.111.tgz",
-      "integrity": "sha512-t2FwnkdqdZNYPJHTEF+Zf//j5d2I7UbM2Ng+vqqmUCE2RuiVVINJi9RlVdpKvqPqVItsJa0X+ra/tvmwLzlcgg==",
+      "version": "4.14.112",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.112.tgz",
+      "integrity": "sha512-jDD7sendv3V7iwyRXSlECOR8HCtMN2faVA9ngLdHHihSVIwY7nbfsKl2kA6fimUDU1i5l/zgpG3aevwWnN3zCQ==",
       "dev": true
     },
     "@types/luxon": {
@@ -2310,14 +2310,6 @@
         "acorn": "^5.0.0"
       }
     },
-    "add-dom-event-listener": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.0.2.tgz",
-      "integrity": "sha1-j67SxBAIchzxEdodMNmVuFvkK+0=",
-      "requires": {
-        "object-assign": "4.x"
-      }
-    },
     "address": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
@@ -2635,7 +2627,8 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true
     },
     "asn1": {
       "version": "0.2.3",
@@ -2693,9 +2686,9 @@
       "dev": true
     },
     "ast-types": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.10.1.tgz",
-      "integrity": "sha512-UY7+9DPzlJ9VM8eY0b2TUZcZvF+1pO0hzMtAyjBYKhOmnvRlqYNYnWdtsMj0V16CGaMlpL0G1jnLbLo4AyotuQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.11.5.tgz",
+      "integrity": "sha512-oJjo+5e7/vEc2FBK8gUalV0pba4L3VdBIs2EKhOLHLcOd2FgQIVQN9xb0eZ9IjEWyAL7vq6fGJxOvVvdCHNyMw==",
       "dev": true
     },
     "astral-regex": {
@@ -2981,9 +2974,9 @@
       }
     },
     "babel-plugin-emotion": {
-      "version": "9.2.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.5.tgz",
-      "integrity": "sha1-AEbgO+XBYnb4U4BHb4jJ/L98lTY=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.6.tgz",
+      "integrity": "sha512-aCRXUPm2pwaUqUtpQ2Gzbn5EeOD2RyUDTQDJl5Yqwg1RLQPs3OvnB6Xt6GUrMomMISxuwFrxuWfBMajHv74UjQ==",
       "dev": true,
       "requires": {
         "@babel/helper-module-imports": "7.0.0-beta.51",
@@ -2991,6 +2984,7 @@
         "@emotion/hash": "^0.6.2",
         "@emotion/memoize": "^0.6.1",
         "@emotion/stylis": "^0.6.10",
+        "babel-core": "^6.26.3",
         "babel-plugin-macros": "^2.0.0",
         "babel-plugin-syntax-jsx": "^6.18.0",
         "convert-source-map": "^1.5.0",
@@ -3020,6 +3014,45 @@
             "lodash": "^4.17.5",
             "to-fast-properties": "^2.0.0"
           }
+        },
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
         }
       }
     },
@@ -4436,6 +4469,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -5372,7 +5406,8 @@
     "classnames": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==",
+      "dev": true
     },
     "clean-css": {
       "version": "4.1.11",
@@ -5656,25 +5691,12 @@
       "integrity": "sha512-MAAAIOdi2s4Gl6rZ76PNcUa9IOYB+5ICdT41o5uMRf09aEu/F9RK+qhe8RjXNPwcTjGV7KU7h2P/fljThFVqyQ==",
       "dev": true
     },
-    "component-classes": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz",
-      "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
-      "requires": {
-        "component-indexof": "0.0.3"
-      }
-    },
     "component-emitter": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
       "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
       "dev": true
     },
-    "component-indexof": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
-      "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
-    },
     "compressible": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.14.tgz",
@@ -5869,6 +5891,7 @@
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz",
       "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==",
+      "dev": true,
       "requires": {
         "toggle-selection": "^1.0.3"
       }
@@ -6139,9 +6162,9 @@
       }
     },
     "create-emotion": {
-      "version": "9.2.5",
-      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.5.tgz",
-      "integrity": "sha1-XbTwbZNgJeQ70xJFOj7pRuTV5ds=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.6.tgz",
+      "integrity": "sha512-4g46va26lw6DPfKF7HeWY3OI/qoaNSwpvO+li8dMydZfC6f6+ZffwlYHeIyAhGR8Z8C8c0H9J1pJbQRtb9LScw==",
       "dev": true,
       "requires": {
         "@emotion/hash": "^0.6.2",
@@ -6154,9 +6177,9 @@
       }
     },
     "create-emotion-styled": {
-      "version": "9.2.5",
-      "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.2.5.tgz",
-      "integrity": "sha1-P1VTZXECM/DyaDHR7PC473YNSyo=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.2.6.tgz",
+      "integrity": "sha512-Kk6qWuEiHY9iptLsxzoJztHM237yedoY2Zhmc79HwkRkC+wZ7W8IFt5gP6AAGx6eN44hc3Zwc+WA5N7ku3QJfg==",
       "dev": true,
       "requires": {
         "@emotion/is-prop-valid": "^0.6.1"
@@ -6202,10 +6225,7 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
       "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
-<<<<<<< HEAD
-=======
       "dev": true,
->>>>>>> abfa39529ff398007bb67cd814c4217a97bdb38b
       "requires": {
         "fbjs": "^0.8.0",
         "gud": "^1.0.0"
@@ -6258,15 +6278,6 @@
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=",
       "dev": true
     },
-    "css-animation": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.4.1.tgz",
-      "integrity": "sha1-W4gTEl3g+7uwu+G0cq6EIhRpt6g=",
-      "requires": {
-        "babel-runtime": "6.x",
-        "component-classes": "^1.2.5"
-      }
-    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -7628,6 +7639,16 @@
             "tapable": "^1.0.0"
           }
         },
+        "eslint-scope": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz",
+          "integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        },
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -7719,9 +7740,9 @@
           }
         },
         "webpack": {
-          "version": "4.16.0",
-          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.0.tgz",
-          "integrity": "sha512-oNx9djAd6uAcccyfqN3hyXLNMjZHiRySZmBQ4c8FNmf1SNJGhx7n9TSvHNyXxgToRdH65g/Q97s94Ip9N6F7xg==",
+          "version": "4.16.1",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.1.tgz",
+          "integrity": "sha512-6jpzObU18y7lXDJz7XCLvzgrqcJ0rZ2jhKvnTivza9gM2GvPW93xxtmEll2GgmdC0zVQAtbHrH/9BtyMjSDZfA==",
           "dev": true,
           "requires": {
             "@webassemblyjs/ast": "1.5.13",
@@ -7735,7 +7756,7 @@
             "ajv-keywords": "^3.1.0",
             "chrome-trace-event": "^1.0.0",
             "enhanced-resolve": "^4.1.0",
-            "eslint-scope": "^3.7.1",
+            "eslint-scope": "^4.0.0",
             "json-parse-better-errors": "^1.0.2",
             "loader-runner": "^2.3.0",
             "loader-utils": "^1.1.0",
@@ -7751,15 +7772,6 @@
             "webpack-sources": "^1.0.1"
           }
         },
-        "ws": {
-          "version": "5.2.2",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
-          "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0"
-          }
-        },
         "yargs": {
           "version": "12.0.1",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.1.tgz",
@@ -7817,11 +7829,6 @@
         "webfontloader": "^1.6.28"
       }
     },
-    "dom-align": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.8.0.tgz",
-      "integrity": "sha512-B85D4ef2Gj5lw0rK0KM2+D5/pH7yqNxg2mB+E8uzFaolpm7RQmsxEfjyEuNiF8UBBkffumYDeKRzTzc3LePP+w=="
-    },
     "dom-converter": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
@@ -8015,19 +8022,19 @@
       "dev": true
     },
     "emotion": {
-      "version": "9.2.5",
-      "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.5.tgz",
-      "integrity": "sha1-Zm+xUaacJcdYL/PeBvYPjYSPdKo=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.6.tgz",
+      "integrity": "sha512-95/EiWkADklxyy1y1qlJeX5Cepa7WfpJBJSBgbLkDCBzOnP4maluvz52xcV5UaObBTfVnEBq77Go6/bgF7+xaA==",
       "dev": true,
       "requires": {
-        "babel-plugin-emotion": "^9.2.5",
-        "create-emotion": "^9.2.5"
+        "babel-plugin-emotion": "^9.2.6",
+        "create-emotion": "^9.2.6"
       }
     },
     "emotion-theming": {
-      "version": "9.2.5",
-      "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-9.2.5.tgz",
-      "integrity": "sha1-8z8hDxHIDhE2QbNK7J4L+eBMvYk=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-9.2.6.tgz",
+      "integrity": "sha512-sbZStubPmaDuMhs3+saH4XegnoMgbVtEY2giD1MP+maDinCnJdzf/1Apcip1wo5HMAN7vrjvpmcY13pH34xR6g==",
       "dev": true,
       "requires": {
         "hoist-non-react-statics": "^2.3.1"
@@ -8042,6 +8049,7 @@
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "dev": true,
       "requires": {
         "iconv-lite": "~0.4.13"
       }
@@ -8286,9 +8294,9 @@
       }
     },
     "esm": {
-      "version": "3.0.69",
-      "resolved": "https://registry.npmjs.org/esm/-/esm-3.0.69.tgz",
-      "integrity": "sha512-ECQbEBAzGE15NJXO+ediu/Zdk7rtxIkPAlFbgoJbLM96lAJEKC0XfmN2PmFHNvh6k6m+wAJUffL3E49KO7xCLg==",
+      "version": "3.0.71",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.0.71.tgz",
+      "integrity": "sha512-RAgyznLvtK17ld4IQBp+wEsVp3JAHb9Nnbu5fGevnFpKeKVPuh/WexdqUuanhez5s9NJD2+iEtM8LfFu0jL8Rw==",
       "dev": true
     },
     "esprima": {
@@ -8776,6 +8784,7 @@
       "version": "0.8.17",
       "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
       "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "dev": true,
       "requires": {
         "core-js": "^1.0.0",
         "isomorphic-fetch": "^2.1.1",
@@ -8789,7 +8798,8 @@
         "core-js": {
           "version": "1.2.7",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
+          "dev": true
         }
       }
     },
@@ -8984,6 +8994,13 @@
       "dev": true,
       "requires": {
         "intl-pluralrules": "github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b"
+      },
+      "dependencies": {
+        "intl-pluralrules": {
+          "version": "github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b",
+          "from": "github:projectfluent/IntlPluralRules#module",
+          "dev": true
+        }
       }
     },
     "fluent-langneg": {
@@ -9178,24 +9195,28 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9205,12 +9226,14 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
           "requires": {
             "balanced-match": "^1.0.0",
@@ -9219,34 +9242,40 @@
         },
         "chownr": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
           "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true,
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9255,25 +9284,29 @@
         },
         "deep-extend": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==",
           "dev": true,
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "dev": true,
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9282,13 +9315,15 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "dev": true,
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9304,7 +9339,8 @@
         },
         "glob": {
           "version": "7.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9318,13 +9354,15 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.21",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9333,7 +9371,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9342,7 +9381,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9352,18 +9392,21 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "dev": true
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -9371,13 +9414,15 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -9385,12 +9430,14 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "minipass": {
           "version": "2.2.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
           "requires": {
             "safe-buffer": "^5.1.1",
@@ -9399,7 +9446,8 @@
         },
         "minizlib": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9408,7 +9456,8 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
             "minimist": "0.0.8"
@@ -9416,13 +9465,15 @@
         },
         "ms": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true,
           "optional": true
         },
         "needle": {
           "version": "2.2.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9433,7 +9484,8 @@
         },
         "node-pre-gyp": {
           "version": "0.10.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9451,7 +9503,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9461,13 +9514,15 @@
         },
         "npm-bundled": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
           "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.1.10",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9477,7 +9532,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9489,18 +9545,21 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
           "requires": {
             "wrappy": "1"
@@ -9508,19 +9567,22 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9530,19 +9592,22 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.7",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9554,7 +9619,8 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "dev": true,
               "optional": true
             }
@@ -9562,7 +9628,8 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9577,7 +9644,8 @@
         },
         "rimraf": {
           "version": "2.6.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9586,42 +9654,49 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
           "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.5.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
             "code-point-at": "^1.0.0",
@@ -9631,7 +9706,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9640,7 +9716,8 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -9648,13 +9725,15 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "dev": true,
           "optional": true
         },
         "tar": {
           "version": "4.4.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9669,13 +9748,15 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -9684,12 +9765,14 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "dev": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
           "dev": true
         }
       }
@@ -10122,12 +10205,8 @@
     "gud": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-<<<<<<< HEAD
-      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
-=======
       "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==",
       "dev": true
->>>>>>> abfa39529ff398007bb67cd814c4217a97bdb38b
     },
     "gzip-size": {
       "version": "3.0.0",
@@ -11046,11 +11125,6 @@
       "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=",
       "dev": true
     },
-    "intl-pluralrules": {
-      "version": "github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b",
-      "from": "intl-pluralrules@github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b",
-      "dev": true
-    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -11499,7 +11573,8 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+      "dev": true
     },
     "is-string": {
       "version": "1.0.4",
@@ -11621,6 +11696,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
       "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "dev": true,
       "requires": {
         "node-fetch": "^1.0.1",
         "whatwg-fetch": ">=0.10.0"
@@ -11630,6 +11706,7 @@
           "version": "1.7.3",
           "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
           "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+          "dev": true,
           "requires": {
             "encoding": "^0.1.11",
             "is-stream": "^1.0.1"
@@ -13489,7 +13566,8 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+      "dev": true
     },
     "js-yaml": {
       "version": "3.12.0",
@@ -14000,11 +14078,6 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
       "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
-    "lodash._getnative": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
-    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -14081,16 +14154,6 @@
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
-    "lodash.isarguments": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
-      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
-    },
-    "lodash.isarray": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
-      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
-    },
     "lodash.isempty": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
@@ -14238,6 +14301,7 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
+      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0"
       }
@@ -15208,7 +15272,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -15810,7 +15875,8 @@
     "popper.js": {
       "version": "1.14.3",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
-      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU="
+      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU=",
+      "dev": true
     },
     "portfinder": {
       "version": "1.0.13",
@@ -15966,12 +16032,12 @@
       }
     },
     "postcss-color-functional-notation": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-1.0.1.tgz",
-      "integrity": "sha512-8ECwUd75SwcjLMzFdRVRBqjVoHwGeWpLQKCNIQo9T+QeCrUNKI1NJ6rgpni5vo7iZ7MZy21qKqUieMM3D0wHYQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-1.0.2.tgz",
+      "integrity": "sha512-FxkEr+s/KCrcrTxUhHcDMKGZmnLjUKK7pl2gDjnEoAJaVcbThdDWLhuASu02qdA3Ys7np/BwJgwc72JrURTvJQ==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.22",
+        "postcss": "^6.0.23",
         "postcss-values-parser": "^1.5.0"
       }
     },
@@ -17263,6 +17329,15 @@
         }
       }
     },
+    "postcss-nesting": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-6.0.0.tgz",
+      "integrity": "sha512-Yoglsy6eZbDCbRIXoYSmnIt9ao4xyg07iFwVBd7WyIkDzMSeRxIqUk8xEAdkeJQ7eGfWo6RufrTU7FSUjZ22fg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.22"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
@@ -17532,18 +17607,18 @@
       }
     },
     "postcss-preset-env": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-5.2.1.tgz",
-      "integrity": "sha512-zsGFBKtTyCY5YxOq6Q/WR4oa9/LOKawEWMxJ7UpMtfj1t50OWeGZadRQp/i7DSSWjKus+eJKLIHDxLaobwhidQ==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-5.2.2.tgz",
+      "integrity": "sha512-ehhyyssfRLv6N5zysA09lTgL1KgGOt9RMuXEOrB8CV+aH6Ky1fz1OMmEv9YK+JQ6okRIeQTktOZ+STfTZj2ckw==",
       "dev": true,
       "requires": {
-        "autoprefixer": "^8.6.3",
+        "autoprefixer": "^8.6.5",
         "browserslist": "^3.2.8",
-        "caniuse-lite": "^1.0.30000859",
+        "caniuse-lite": "^1.0.30000865",
         "cssdb": "^3.1.0",
         "postcss": "^6.0.23",
         "postcss-attribute-case-insensitive": "^3.0.1",
-        "postcss-color-functional-notation": "^1.0.1",
+        "postcss-color-functional-notation": "^1.0.2",
         "postcss-color-hex-alpha": "^3.0.0",
         "postcss-color-mod-function": "^2.4.2",
         "postcss-color-rebeccapurple": "^3.1.0",
@@ -17572,14 +17647,11 @@
         "postcss-selector-not": "^3.0.1"
       },
       "dependencies": {
-        "postcss-nesting": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-6.0.0.tgz",
-          "integrity": "sha512-Yoglsy6eZbDCbRIXoYSmnIt9ao4xyg07iFwVBd7WyIkDzMSeRxIqUk8xEAdkeJQ7eGfWo6RufrTU7FSUjZ22fg==",
-          "dev": true,
-          "requires": {
-            "postcss": "^6.0.22"
-          }
+        "caniuse-lite": {
+          "version": "1.0.30000865",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
+          "integrity": "sha512-vs79o1mOSKRGv/1pSkp4EXgl4ZviWeYReXw60XfacPU64uQWZwJT6vZNmxRF9O+6zu71sJwMxLK5JXxbzuVrLw==",
+          "dev": true
         }
       }
     },
@@ -18147,6 +18219,7 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dev": true,
       "requires": {
         "asap": "~2.0.3"
       }
@@ -18171,6 +18244,7 @@
       "version": "15.6.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
       "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.3.1",
         "object-assign": "^4.1.1"
@@ -18433,81 +18507,6 @@
         "strip-json-comments": "~2.0.1"
       }
     },
-    "rc-align": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-2.4.3.tgz",
-      "integrity": "sha512-h5KgyB5IXYR7iKpYFcMr54cuQ2eozPCZ11kbXPG5+6CWvmyJ+c0R/yjndVndiNk2G3MKcTMbJNdDv5DIckLAxQ==",
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "dom-align": "^1.7.0",
-        "prop-types": "^15.5.8",
-        "rc-util": "^4.0.4"
-      }
-    },
-    "rc-animate": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.4.4.tgz",
-      "integrity": "sha512-DjJLTUQj7XKKcuS8cczN0uOLfuSmgrVXFGieP1SZc87xUUTFGh8B/KjNmEtlfvxkSrSuVfb2rrEPER4SqKUtEA==",
-      "requires": {
-        "babel-runtime": "6.x",
-        "css-animation": "^1.3.2",
-        "prop-types": "15.x"
-      }
-    },
-    "rc-tooltip": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.2.tgz",
-      "integrity": "sha512-vsF29ohlfgr7lEP12aJ5j4U/4hzqSBYjWQo8I09re+q95v1o4nDjH1q/B3qFkf9aml2FbgdkJw9KYz/zXUgApA==",
-      "requires": {
-        "babel-runtime": "6.x",
-        "prop-types": "^15.5.8",
-        "rc-trigger": "^2.2.2"
-      }
-    },
-    "rc-trigger": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.5.4.tgz",
-      "integrity": "sha512-clgXOdazDW2qg4vTZSAExpvOuojPNuMoamG+SxAm5Ih+rpVcrtEiDlDZWY4yUHyfEWJZBzgbrr4np/z2FK6RfA==",
-      "requires": {
-        "babel-runtime": "6.x",
-        "classnames": "^2.2.6",
-        "prop-types": "15.x",
-        "rc-align": "^2.4.0",
-        "rc-animate": "2.x",
-        "rc-util": "^4.4.0"
-      }
-    },
-    "rc-util": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.5.1.tgz",
-      "integrity": "sha512-PdCmHyBBodZdw6Oaikt0l+/R79IcRXpYkTrqD/Rbl4ZdoOi61t5TtEe40Q+A7rkWG5U1xjcN+h8j9H6GdtnICw==",
-      "requires": {
-        "add-dom-event-listener": "1.x",
-        "babel-runtime": "6.x",
-        "prop-types": "^15.5.10",
-        "shallowequal": "^0.2.2"
-      },
-      "dependencies": {
-        "lodash.keys": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
-          "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
-          "requires": {
-            "lodash._getnative": "^3.0.0",
-            "lodash.isarguments": "^3.0.0",
-            "lodash.isarray": "^3.0.0"
-          }
-        },
-        "shallowequal": {
-          "version": "0.2.2",
-          "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
-          "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",
-          "requires": {
-            "lodash.keys": "^3.1.2"
-          }
-        }
-      }
-    },
     "react": {
       "version": "16.4.1",
       "resolved": "https://registry.npmjs.org/react/-/react-16.4.1.tgz",
@@ -18520,17 +18519,6 @@
         "prop-types": "^15.6.0"
       }
     },
-<<<<<<< HEAD
-    "react-copy-to-clipboard": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
-      "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==",
-      "requires": {
-        "copy-to-clipboard": "^3",
-        "prop-types": "^15.5.8"
-      }
-    },
-=======
     "react-adopt": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/react-adopt/-/react-adopt-0.6.0.tgz",
@@ -18577,7 +18565,16 @@
       "integrity": "sha512-9Fv10F6rrzFDIT04aoRsw3dbN6l6onNXbBvCpt4OjXZFGDz/P65laNIujHVTlVjcqErut9d4BL0aplVByyGcJw==",
       "dev": true
     },
->>>>>>> abfa39529ff398007bb67cd814c4217a97bdb38b
+    "react-copy-to-clipboard": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
+      "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==",
+      "dev": true,
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dev-utils": {
       "version": "6.0.0-next.3e165448",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-6.0.0-next.3e165448.tgz",
@@ -18775,18 +18772,26 @@
       "dev": true
     },
     "react-docgen": {
-      "version": "3.0.0-beta9",
-      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-3.0.0-beta9.tgz",
-      "integrity": "sha512-3UqwxygAP/eZdDtOKum6vClKWUlceZ7RBVQ3Fe122l1WBYOqHcBzoUZIwN8feaLVo+s2eB/q+NkBfanLgvmt+w==",
+      "version": "3.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-3.0.0-rc.0.tgz",
+      "integrity": "sha512-quhNeAo5LeACZ31LDAifq2Knyz2XE+Zm9QLo4EHgw+NifxBzH8FCQ5PyAPORqaAhWMiPOwYoIZ0biZVGqEkYag==",
       "dev": true,
       "requires": {
+        "@babel/parser": "7.0.0-beta.53",
         "async": "^2.1.4",
         "babel-runtime": "^6.9.2",
-        "babylon": "7.0.0-beta.31",
         "commander": "^2.9.0",
         "doctrine": "^2.0.0",
         "node-dir": "^0.1.10",
-        "recast": "^0.12.6"
+        "recast": "^0.15.0"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.53.tgz",
+          "integrity": "sha1-H0XrYXv5Rj1IKywE00nZ5O2/SJI=",
+          "dev": true
+        }
       }
     },
     "react-docgen-typescript": {
@@ -18818,13 +18823,13 @@
       }
     },
     "react-emotion": {
-      "version": "9.2.5",
-      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.2.5.tgz",
-      "integrity": "sha1-DkDt8GLX7qJg1DJ6n+JyiOyDg14=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.2.6.tgz",
+      "integrity": "sha512-3GwLQ0Vib/X0G7KWY7N1F/7NmfoBLkkg3g9Jd8t6By5QUH0PyCSUVdDmfFBbgVKsAcpkjA0vcsMbiWeZusaRrA==",
       "dev": true,
       "requires": {
-        "babel-plugin-emotion": "^9.2.5",
-        "create-emotion-styled": "^9.2.5"
+        "babel-plugin-emotion": "^9.2.6",
+        "create-emotion-styled": "^9.2.6"
       }
     },
     "react-error-overlay": {
@@ -18878,9 +18883,10 @@
       "dev": true
     },
     "react-popper": {
-      "version": "1.0.0-beta.6",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0-beta.6.tgz",
-      "integrity": "sha1-yyeirFatzLr1+cQTI4cokGkkCDQ=",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
+      "integrity": "sha1-uZRSFE6P5KzHf6PZWajHngemUIQ=",
+      "dev": true,
       "requires": {
         "babel-runtime": "6.x.x",
         "create-react-context": "^0.2.1",
@@ -18894,6 +18900,7 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
           "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "dev": true,
           "requires": {
             "loose-envify": "^1.0.0"
           }
@@ -19021,24 +19028,12 @@
         "react-is": "^16.4.1"
       }
     },
-<<<<<<< HEAD
-<<<<<<< HEAD
-    "react-tooltip": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-3.6.1.tgz",
-      "integrity": "sha512-4NVjHNIx1ZazFYBNP044DHW0cr95Qaq0DSwWbrEQ7VyE8AxemHDjp0DoYvV8wilK9vR9jMlSwDW6ebRgbk3aHw==",
-      "requires": {
-        "classnames": "^2.2.5",
-        "prop-types": "^15.6.0"
-=======
-=======
     "react-timeago": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/react-timeago/-/react-timeago-4.1.9.tgz",
       "integrity": "sha512-MKucv9nU65BOPqIrClAFxqvpGCC4RdRpqp0P1YIb7C3yT6TQVdcoOlr0k4TDHvLQhbkwd3nbTxiDQMa3iDlZxg==",
       "dev": true
     },
->>>>>>> abfa39529ff398007bb67cd814c4217a97bdb38b
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -19054,7 +19049,6 @@
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         }
->>>>>>> cac0afa61e79b19ddcae873f543a6910b83c92e7
       }
     },
     "read-pkg": {
@@ -19115,13 +19109,12 @@
       }
     },
     "recast": {
-      "version": "0.12.9",
-      "resolved": "https://registry.npmjs.org/recast/-/recast-0.12.9.tgz",
-      "integrity": "sha512-y7ANxCWmMW8xLOaiopiRDlyjQ9ajKRENBH+2wjntIbk3A6ZR1+BLQttkmSHMY7Arl+AAZFwJ10grg2T6f1WI8A==",
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.15.2.tgz",
+      "integrity": "sha512-L4f/GqxjlEJ5IZ+tdll/l+6dVi2ylysWbkgFJbMuldD6Jklgfv6zJnCpuAZDfjwHhfcd/De0dDKelsTEPQ29qA==",
       "dev": true,
       "requires": {
-        "ast-types": "0.10.1",
-        "core-js": "^2.4.1",
+        "ast-types": "0.11.5",
         "esprima": "~4.0.0",
         "private": "~0.1.5",
         "source-map": "~0.6.1"
@@ -19243,7 +19236,8 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.12.4",
@@ -20281,7 +20275,8 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
+      "dev": true
     },
     "setprototypeof": {
       "version": "1.1.0",
@@ -21384,7 +21379,8 @@
     "toggle-selection": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
-      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
+      "dev": true
     },
     "topo": {
       "version": "3.0.0",
@@ -21951,7 +21947,8 @@
     "typed-styles": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
-      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw=="
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==",
+      "dev": true
     },
     "typedarray": {
       "version": "0.0.6",
@@ -21968,7 +21965,8 @@
     "ua-parser-js": {
       "version": "0.7.18",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
-      "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
+      "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==",
+      "dev": true
     },
     "uglify-js": {
       "version": "3.4.2",
@@ -23314,9 +23312,9 @@
       }
     },
     "ws": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.0.tgz",
-      "integrity": "sha512-c18dMeW+PEQdDFzkhDsnBAlS4Z8KGStBQQUcQ5mf7Nf689jyGk0594L+i9RaQuf4gog6SvWLJorz2NfSaqxZ7w==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
+      "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
       "requires": {
         "async-limiter": "~1.0.0"
       }
diff --git a/package.json b/package.json
index a3c765903..e625312da 100644
--- a/package.json
+++ b/package.json
@@ -47,17 +47,8 @@
     "mongodb": "^3.1.1",
     "passport": "^0.4.0",
     "performance-now": "^2.1.0",
-<<<<<<< HEAD
-    "rc-tooltip": "^3.7.2",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-popper": "^1.0.0-beta.6",
-    "react-tooltip": "^3.6.1",
-    "subscriptions-transport-ws": "^0.9.11",
-    "uuid": "^3.2.1"
-=======
     "subscriptions-transport-ws": "^0.9.12",
     "uuid": "^3.3.2"
->>>>>>> abfa39529ff398007bb67cd814c4217a97bdb38b
   },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.49",
@@ -148,6 +139,8 @@
     "react-responsive": "^4.1.0",
     "react-test-renderer": "^16.4.1",
     "react-timeago": "^4.1.9",
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-popper": "^1.0.0-beta.6",
     "recompose": "^0.27.1",
     "relay-compiler": "github:coralproject/patched#relay-compiler",
     "relay-compiler-language-typescript": "github:coralproject/patched#relay-compiler-language-typescript",
diff --git a/src/core/client/stream/components/Comment/Comment.spec.tsx b/src/core/client/stream/components/Comment/Comment.spec.tsx
index 12c1686ed..a6183e7ac 100644
--- a/src/core/client/stream/components/Comment/Comment.spec.tsx
+++ b/src/core/client/stream/components/Comment/Comment.spec.tsx
@@ -6,24 +6,8 @@ import { PropTypesOf } from "talk-framework/types";
 import Comment from "./Comment";
 
 it("renders username and body", () => {
-<<<<<<< HEAD:src/core/client/stream/components/Comment.spec.tsx
-  const props = {
-    id: "id",
-    author: {
-      username: "Marvin",
-    },
-    body: "Woof",
-  };
-  const wrapper = shallow(<Comment {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
-
-it("renders with gutterBottom", () => {
-  const props = {
-    id: "id",
-=======
   const props: PropTypesOf<typeof Comment> = {
->>>>>>> abfa39529ff398007bb67cd814c4217a97bdb38b:src/core/client/stream/components/Comment/Comment.spec.tsx
+    id: "comment-ID",
     author: {
       username: "Marvin",
     },
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index 282030d20..0f7e19ba7 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -55,11 +55,11 @@ class PermalinkPopover extends React.Component<InnerProps> {
               <CopyToClipboard text={commentId} onCopy={this.onCopy}>
                 <Button primary>
                   {copied ? (
-                    <L id="copied">
+                    <L id="comments-permalink-copied">
                       <span>Copied!</span>
                     </L>
                   ) : (
-                    <L id="copy">
+                    <L id="comments-permalink-copy">
                       <span>Copy</span>
                     </L>
                   )}
@@ -70,7 +70,7 @@ class PermalinkPopover extends React.Component<InnerProps> {
         }
       >
         <button className={styles.shareButton} onClick={this.onClick}>
-          <L id="share">
+          <L id="comments-permalink-share">
             <span>Share</span>
           </L>
         </button>
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 0196f6b2e..0316112d1 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -2,16 +2,19 @@ import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
 
 import withFragmentContainer from "talk-framework/lib/relay/withFragmentContainer";
-import { Omit, PropTypesOf } from "talk-framework/types";
+import { PropTypesOf } from "talk-framework/types";
 import { CommentContainer as Data } from "talk-stream/__generated__/CommentContainer.graphql";
 
-import Comment, { CommentProps } from "../components/Comment";
+import Comment from "../components/Comment";
 
-type InnerProps = { data: Data } & Omit<CommentProps, keyof Data>;
+interface InnerProps {
+  data: Data;
+}
 
 // tslint:disable-next-line:no-unused-expression
 graphql`
   fragment CommentContainer_comment on Comment {
+    id
     author {
       username
     }
diff --git a/src/core/client/ui/hocs/withForwardRef.ts b/src/core/client/ui/hocs/withForwardRef.tsx
similarity index 94%
rename from src/core/client/ui/hocs/withForwardRef.ts
rename to src/core/client/ui/hocs/withForwardRef.tsx
index 66b9660e9..e3eb9fe10 100644
--- a/src/core/client/ui/hocs/withForwardRef.ts
+++ b/src/core/client/ui/hocs/withForwardRef.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import {
   InferableComponentEnhancerWithProps,
   withPropsOnChange,
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 758f49f22..08a397cc1 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -1,9 +1,3 @@
-<<<<<<< HEAD
-postCommentForm-submit = Post
-share = Share
-copy = Copy
-copied = Copied
-=======
 ### Localization for Embed Stream
 
 ## Comments Tab
@@ -11,4 +5,7 @@ copied = Copied
 comments-postCommentForm-post = Post
 comments-stream-loadMore = Load more
 comments-replyList-showAll = Show all
->>>>>>> cac0afa61e79b19ddcae873f543a6910b83c92e7
+
+comments-permalink-share = Share
+comments-permalink-copy = Copy
+comments-permalink-copied = Copied

From 7c88c251ea961b551574ae6b89340d31ddfab58f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 16 Jul 2018 16:14:56 -0300
Subject: [PATCH 18/69] progress

---
 .../components/Comment/Comment.spec.tsx       |  2 +-
 .../stream/components/Comment/Comment.tsx     | 13 +++-
 .../stream/components/PermalinkPopover.tsx    | 71 +++++++------------
 .../ui/components/Attachment/Attachment.tsx   |  6 +-
 .../client/ui/components/Popover/Popover.tsx  | 32 +++++++--
 src/core/client/ui/hocs/withForwardRef.tsx    |  6 +-
 6 files changed, 72 insertions(+), 58 deletions(-)

diff --git a/src/core/client/stream/components/Comment/Comment.spec.tsx b/src/core/client/stream/components/Comment/Comment.spec.tsx
index a6183e7ac..8b409adeb 100644
--- a/src/core/client/stream/components/Comment/Comment.spec.tsx
+++ b/src/core/client/stream/components/Comment/Comment.spec.tsx
@@ -7,7 +7,7 @@ import Comment from "./Comment";
 
 it("renders username and body", () => {
   const props: PropTypesOf<typeof Comment> = {
-    id: "comment-ID",
+    id: "comment-id",
     author: {
       username: "Marvin",
     },
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index a3f763c08..0765a2a79 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -1,6 +1,7 @@
+import { Localized } from "fluent-react/compat";
 import React from "react";
 import { StatelessComponent } from "react";
-import { Typography } from "talk-ui/components";
+import { Popover, Typography } from "talk-ui/components";
 import PermalinkPopover from "../PermalinkPopover";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
@@ -25,7 +26,15 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div>
-        <PermalinkPopover commentId={props.id} />
+        <Popover body={<PermalinkPopover commentId={props.id} />}>
+          {({ toggleShow }) => (
+            <button onClick={toggleShow}>
+              <Localized id="comments-permalink-share">
+                <span>Share</span>
+              </Localized>
+            </button>
+          )}
+        </Popover>
       </div>
     </div>
   );
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index 0f7e19ba7..85e3bdd06 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -1,22 +1,22 @@
-import { Localized as L } from "fluent-react/compat";
-import React from "react";
+import { Localized } from "fluent-react/compat";
+import React, { CSSProperties } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { Button, Popover, TextField } from "talk-ui/components";
+import { Button, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   commentId: string;
+  ref?: any;
+  style?: CSSProperties;
 }
 
 interface State {
   copied: boolean;
-  showBody: boolean;
 }
 
 class PermalinkPopover extends React.Component<InnerProps> {
   public state: State = {
     copied: false,
-    showBody: false,
   };
 
   public onCopy = async () => {
@@ -26,14 +26,6 @@ class PermalinkPopover extends React.Component<InnerProps> {
     }, 800);
   };
 
-  public onClick = () => this.toggleShow();
-
-  public toggleShow = () => {
-    this.setState((state: State) => ({
-      showBody: !state.showBody,
-    }));
-  };
-
   public toggleCopied = () => {
     this.setState((state: State) => ({
       copied: !state.copied,
@@ -41,40 +33,27 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { commentId } = this.props;
-    const { copied, showBody } = this.state;
+    const { commentId, ref, style } = this.props;
+    const { copied } = this.state;
+
+    console.log(this.props, "props");
     return (
-      <Popover
-        body={
-          showBody ? (
-            <div className={styles.root}>
-              <TextField
-                defaultValue={commentId}
-                className={styles.textField}
-              />
-              <CopyToClipboard text={commentId} onCopy={this.onCopy}>
-                <Button primary>
-                  {copied ? (
-                    <L id="comments-permalink-copied">
-                      <span>Copied!</span>
-                    </L>
-                  ) : (
-                    <L id="comments-permalink-copy">
-                      <span>Copy</span>
-                    </L>
-                  )}
-                </Button>
-              </CopyToClipboard>
-            </div>
-          ) : null
-        }
-      >
-        <button className={styles.shareButton} onClick={this.onClick}>
-          <L id="comments-permalink-share">
-            <span>Share</span>
-          </L>
-        </button>
-      </Popover>
+      <div className={styles.root} ref={ref} style={style}>
+        <TextField defaultValue={commentId} className={styles.textField} />
+        <CopyToClipboard text={commentId} onCopy={this.onCopy}>
+          <Button primary>
+            {copied ? (
+              <Localized id="comments-permalink-copied">
+                <span>Copied!</span>
+              </Localized>
+            ) : (
+              <Localized id="comments-permalink-copy">
+                <span>Copy</span>
+              </Localized>
+            )}
+          </Button>
+        </CopyToClipboard>
+      </div>
     );
   }
 }
diff --git a/src/core/client/ui/components/Attachment/Attachment.tsx b/src/core/client/ui/components/Attachment/Attachment.tsx
index 19dbdb2b6..5af459729 100644
--- a/src/core/client/ui/components/Attachment/Attachment.tsx
+++ b/src/core/client/ui/components/Attachment/Attachment.tsx
@@ -25,13 +25,17 @@ interface InnerProps {
     | "left-start";
 }
 
+interface Props {
+  ref: any;
+}
+
 class Attachment extends React.Component<InnerProps> {
   public render() {
     const { children, body, placement = "top", className } = this.props;
     return (
       <Manager>
         <Reference>
-          {({ ref }) => React.cloneElement(children, { ref })}
+          {(props: Props) => React.cloneElement(children, { ref: props.ref })}
         </Reference>
 
         <Popper
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index e11017b6c..3605dc3b2 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -2,17 +2,41 @@ import React from "react";
 import Attachment from "../Attachment";
 import * as styles from "./Popover.css";
 
+interface RenderProps {
+  toggleShow: () => void;
+}
+
 interface InnerProps {
-  body: React.ReactElement<any> | null;
-  children: React.ReactElement<any>;
+  body: React.ReactElement<Props> | null;
+  children: (props: RenderProps) => React.ReactElement<any>;
+}
+
+interface Props {
+  ref: any;
+}
+
+interface State {
+  show: false;
 }
 
 class Popover extends React.Component<InnerProps> {
+  public state: State = {
+    show: false,
+  };
+
+  public toggleShow = () => {
+    this.setState((state: State) => ({
+      show: !state.show,
+    }));
+  };
+
   public render() {
-    const { body, children: reference } = this.props;
+    const { body, children } = this.props;
+    // const { show } = this.state;
+    console.log(children);
     return (
       <Attachment body={body} className={styles.root}>
-        {reference}
+        {({ ref }) => children({ toggleShow: this.toggleShow, ref })}
       </Attachment>
     );
   }
diff --git a/src/core/client/ui/hocs/withForwardRef.tsx b/src/core/client/ui/hocs/withForwardRef.tsx
index e3eb9fe10..6b48b928b 100644
--- a/src/core/client/ui/hocs/withForwardRef.tsx
+++ b/src/core/client/ui/hocs/withForwardRef.tsx
@@ -9,14 +9,12 @@ import {
  * the `React.forwardRef` api.
  */
 function withForwardRef<T>(): InferableComponentEnhancerWithProps<
-  { forwardRef: any },
+  { forwardRef: Ref<any> },
   {}
 > {
   return WrappedComponent => {
     return React.forwardRef((props, ref) => (
-      ref as button={ref} className="FancyButton">
-        {props.children}
-      </button>
+      <WrappedComponent forwardRef={ref} />
     ));
   };
 }

From 22f9631cb8066a209c1285e428f902563b40bb02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 16 Jul 2018 16:42:24 -0300
Subject: [PATCH 19/69] Any

---
 .../stream/components/PermalinkPopover.tsx    |  1 -
 .../ui/components/Attachment/Attachment.tsx   | 32 +++++++++----------
 .../client/ui/components/Popover/Popover.tsx  | 14 ++++----
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index 85e3bdd06..6a85ffcad 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -36,7 +36,6 @@ class PermalinkPopover extends React.Component<InnerProps> {
     const { commentId, ref, style } = this.props;
     const { copied } = this.state;
 
-    console.log(this.props, "props");
     return (
       <div className={styles.root} ref={ref} style={style}>
         <TextField defaultValue={commentId} className={styles.textField} />
diff --git a/src/core/client/ui/components/Attachment/Attachment.tsx b/src/core/client/ui/components/Attachment/Attachment.tsx
index 5af459729..2a44bcac1 100644
--- a/src/core/client/ui/components/Attachment/Attachment.tsx
+++ b/src/core/client/ui/components/Attachment/Attachment.tsx
@@ -1,11 +1,14 @@
-import cn from "classnames";
-import React from "react";
-import { Manager, Popper, Reference } from "react-popper";
-import * as styles from "./Attachment.css";
+import React, { CSSProperties } from "react";
+import { Manager, Popper, Reference, RefHandler } from "react-popper";
+
+interface RenderProps {
+  ref: RefHandler;
+  style?: CSSProperties;
+}
 
 interface InnerProps {
   body: React.ReactElement<any> | null;
-  children: React.ReactElement<any>;
+  children: (props: RenderProps) => React.ReactElement<any>;
   className?: string;
   placement?:
     | "auto-start"
@@ -31,13 +34,10 @@ interface Props {
 
 class Attachment extends React.Component<InnerProps> {
   public render() {
-    const { children, body, placement = "top", className } = this.props;
+    const { children, body, placement = "top" } = this.props;
     return (
       <Manager>
-        <Reference>
-          {(props: Props) => React.cloneElement(children, { ref: props.ref })}
-        </Reference>
-
+        <Reference>{(props: Props) => children({ ref: props.ref })}</Reference>
         <Popper
           placement={placement}
           modifiers={{ preventOverflow: { enabled: false } }}
@@ -45,12 +45,12 @@ class Attachment extends React.Component<InnerProps> {
           positionFixed={false}
         >
           {({ ref, style }) =>
-            body &&
-            React.cloneElement(body, {
-              ref,
-              style,
-              className: cn(styles.root, className),
-            })
+            body
+              ? React.cloneElement(body, {
+                  ref,
+                  style,
+                })
+              : null
           }
         </Popper>
       </Manager>
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 3605dc3b2..e9f054de3 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -1,18 +1,16 @@
 import React from "react";
+import { RefHandler } from "react-popper";
 import Attachment from "../Attachment";
 import * as styles from "./Popover.css";
 
 interface RenderProps {
-  toggleShow: () => void;
+  toggleShow?: () => void;
+  ref?: RefHandler;
 }
 
 interface InnerProps {
-  body: React.ReactElement<Props> | null;
-  children: (props: RenderProps) => React.ReactElement<any>;
-}
-
-interface Props {
-  ref: any;
+  body: React.ReactElement<any> | null;
+  children: (props: RenderProps) => any;
 }
 
 interface State {
@@ -33,7 +31,7 @@ class Popover extends React.Component<InnerProps> {
   public render() {
     const { body, children } = this.props;
     // const { show } = this.state;
-    console.log(children);
+    // console.log(children);
     return (
       <Attachment body={body} className={styles.root}>
         {({ ref }) => children({ toggleShow: this.toggleShow, ref })}

From 0cc705d71b5fc3317618363eae8f9041e6df33c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 16 Jul 2018 18:10:57 -0300
Subject: [PATCH 20/69] Working

---
 src/core/client/stream/components/Comment/Comment.tsx   | 4 ++--
 src/core/client/stream/components/PermalinkPopover.tsx  | 8 ++++----
 src/core/client/ui/components/Attachment/Attachment.tsx | 7 ++++---
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 0765a2a79..6d4065126 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -27,8 +27,8 @@ const Comment: StatelessComponent<CommentProps> = props => {
       <Typography>{props.body}</Typography>
       <div>
         <Popover body={<PermalinkPopover commentId={props.id} />}>
-          {({ toggleShow }) => (
-            <button onClick={toggleShow}>
+          {({ toggleShow, ref }) => (
+            <button onClick={toggleShow} style={{ color: "red" }} ref={ref}>
               <Localized id="comments-permalink-share">
                 <span>Share</span>
               </Localized>
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index 6a85ffcad..a4d8feca2 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -1,13 +1,14 @@
 import { Localized } from "fluent-react/compat";
 import React, { CSSProperties } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
+import { RefHandler } from "react-popper";
 import { Button, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   commentId: string;
-  ref?: any;
   style?: CSSProperties;
+  innerRef?: RefHandler;
 }
 
 interface State {
@@ -33,11 +34,10 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { commentId, ref, style } = this.props;
+    const { commentId, style, innerRef } = this.props;
     const { copied } = this.state;
-
     return (
-      <div className={styles.root} ref={ref} style={style}>
+      <div className={styles.root} style={style} ref={innerRef}>
         <TextField defaultValue={commentId} className={styles.textField} />
         <CopyToClipboard text={commentId} onCopy={this.onCopy}>
           <Button primary>
diff --git a/src/core/client/ui/components/Attachment/Attachment.tsx b/src/core/client/ui/components/Attachment/Attachment.tsx
index 2a44bcac1..549787707 100644
--- a/src/core/client/ui/components/Attachment/Attachment.tsx
+++ b/src/core/client/ui/components/Attachment/Attachment.tsx
@@ -30,6 +30,7 @@ interface InnerProps {
 
 interface Props {
   ref: any;
+  style: CSSProperties;
 }
 
 class Attachment extends React.Component<InnerProps> {
@@ -44,11 +45,11 @@ class Attachment extends React.Component<InnerProps> {
           eventsEnabled
           positionFixed={false}
         >
-          {({ ref, style }) =>
+          {(props: Props) =>
             body
               ? React.cloneElement(body, {
-                  ref,
-                  style,
+                  innerRef: props.ref,
+                  style: props.style,
                 })
               : null
           }

From 4982d8d83e184b6674091f7cdeb466a0daec9ec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 16 Jul 2018 18:19:21 -0300
Subject: [PATCH 21/69] Support for refs

---
 src/core/client/stream/components/Comment/Comment.tsx  | 10 +++++++---
 src/core/client/stream/components/PermalinkPopover.css |  6 ------
 .../client/ui/components/BaseButton/BaseButton.tsx     |  5 ++++-
 src/core/client/ui/components/Button/Button.tsx        |  4 ++++
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 6d4065126..9216e8b14 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React from "react";
 import { StatelessComponent } from "react";
-import { Popover, Typography } from "talk-ui/components";
+import { Button, Popover, Typography } from "talk-ui/components";
 import PermalinkPopover from "../PermalinkPopover";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
@@ -28,11 +28,15 @@ const Comment: StatelessComponent<CommentProps> = props => {
       <div>
         <Popover body={<PermalinkPopover commentId={props.id} />}>
           {({ toggleShow, ref }) => (
-            <button onClick={toggleShow} style={{ color: "red" }} ref={ref}>
+            <Button
+              onClick={toggleShow}
+              style={{ color: "red" }}
+              innerRef={ref}
+            >
               <Localized id="comments-permalink-share">
                 <span>Share</span>
               </Localized>
-            </button>
+            </Button>
           )}
         </Popover>
       </div>
diff --git a/src/core/client/stream/components/PermalinkPopover.css b/src/core/client/stream/components/PermalinkPopover.css
index ffc0a1b6c..ee4ef4d5c 100644
--- a/src/core/client/stream/components/PermalinkPopover.css
+++ b/src/core/client/stream/components/PermalinkPopover.css
@@ -1,9 +1,3 @@
-.shareButton {
-  composes: button from "talk-ui/shared/typography.css";
-  composes: buttonReset from "talk-ui/shared/buttonReset.css";
-  padding: 10px 0;
-}
-
 .textField {
   margin-right: 5px;
 }
diff --git a/src/core/client/ui/components/BaseButton/BaseButton.tsx b/src/core/client/ui/components/BaseButton/BaseButton.tsx
index 1d97a9d0c..81819b184 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.tsx
+++ b/src/core/client/ui/components/BaseButton/BaseButton.tsx
@@ -19,6 +19,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** This is passed by the `withKeyboardFocus` HOC */
   keyboardFocus: boolean;
+
+  innerRef?: React.RefObject<HTMLDivElement> | any;
 }
 
 /**
@@ -31,6 +33,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   classes,
   keyboardFocus,
   type: typeProp,
+  innerRef,
   ...rest
 }) => {
   let Element = "button";
@@ -53,7 +56,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
     [classes.keyboardFocus]: keyboardFocus,
   });
 
-  return <Element {...rest} className={rootClassName} />;
+  return <Element {...rest} className={rootClassName} ref={innerRef} />;
 };
 
 const enhanced = withStyles(styles)(withKeyboardFocus(BaseButton));
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index dadb7a35d..ded844b87 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -28,6 +28,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** If set renders a button with secondary colors */
   secondary?: boolean;
+
+  innerRef?: React.RefObject<HTMLDivElement> | any;
 }
 
 class Button extends React.Component<InnerProps> {
@@ -39,6 +41,7 @@ class Button extends React.Component<InnerProps> {
       invert,
       primary,
       secondary,
+      innerRef,
       ...rest
     } = this.props;
 
@@ -53,6 +56,7 @@ class Button extends React.Component<InnerProps> {
       <BaseButton
         className={rootClassName}
         classes={pick(classes, "keyboardFocus")}
+        innerRef={innerRef}
         {...rest}
       />
     );

From 31113e7ecfa7511fa9c0cf277a5349001515ea1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 16 Jul 2018 18:23:44 -0300
Subject: [PATCH 22/69] Ready

---
 src/core/client/stream/components/Comment/Comment.tsx  | 6 +-----
 src/core/client/stream/components/PermalinkPopover.css | 8 +++++++-
 src/core/client/ui/components/Popover/Popover.tsx      | 5 ++---
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 9216e8b14..d77b6c4ad 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -28,11 +28,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       <div>
         <Popover body={<PermalinkPopover commentId={props.id} />}>
           {({ toggleShow, ref }) => (
-            <Button
-              onClick={toggleShow}
-              style={{ color: "red" }}
-              innerRef={ref}
-            >
+            <Button onClick={toggleShow} innerRef={ref} primary>
               <Localized id="comments-permalink-share">
                 <span>Share</span>
               </Localized>
diff --git a/src/core/client/stream/components/PermalinkPopover.css b/src/core/client/stream/components/PermalinkPopover.css
index ee4ef4d5c..2d5f33fd2 100644
--- a/src/core/client/stream/components/PermalinkPopover.css
+++ b/src/core/client/stream/components/PermalinkPopover.css
@@ -3,5 +3,11 @@
 }
 
 .root {
-  background-color: #fff;
+  background-color: #ffffff;
+  border: 1px solid #c9cacb;
+  box-sizing: border-box;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 1px;
+  padding: 6px 10px;
+  display: flex;
 }
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index e9f054de3..7f02fac3c 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -30,10 +30,9 @@ class Popover extends React.Component<InnerProps> {
 
   public render() {
     const { body, children } = this.props;
-    // const { show } = this.state;
-    // console.log(children);
+    const { show } = this.state;
     return (
-      <Attachment body={body} className={styles.root}>
+      <Attachment body={show ? body : null} className={styles.root}>
         {({ ref }) => children({ toggleShow: this.toggleShow, ref })}
       </Attachment>
     );

From b1cb624e4fae3193b2caa7ee3ad82e8b4aaaa14b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 16 Jul 2018 18:31:06 -0300
Subject: [PATCH 23/69] feat: added support for --only flag

Merge pull request #1731 from coralproject/next-watcher-flags

Watcher --only
Use JSDocs comments (#1727)


Merge branch 'next' into prevent-compile-loop-relay
Merge pull request #1726 from coralproject/prevent-compile-loop-relay

[next] Adapt relay watch config
[next] Remove nodemon (#1725)

* Remove old nodemon configs

* Remove nodemon

[next] Jest implementation for React Components (#1733)

* Make jest testing work with custom path and css modules

* Add first test

* feat: added unit tests to ci

* fix: updated package-lock.json

* Update cssTransform.js

* Update cssTransform.js

* Fix test in ci

Adapt files.exclude (#1736)


Permalink ui

Adding Copy to clipboard functionality

WIP

clean request

wip

progress

progress

work in progress

wip

ui functionality

Translations :/

wip

Merge branch 'permalink' of github.com:coralproject/talk into permalink

* 'permalink' of github.com:coralproject/talk: (42 commits)
  [next] Support server side jest testing (#1747)
  Update snapshots
  Add comments
  Remove precss
  Move react-responsive to dev deps
  Remove comment
  Mobile first approach
  Support standard css variables, dynamically set spacing-unit
  Add docs
  Fully implement Flex and MatchMedia
  Responsive Components <3
  fix: linting
  fix: adjusted pageInfo
  Remove obsoloe snapshot
  Move jsdom to dev deps
  Mark comments as always returning a value
  Add comment
  Fix unit tests
  Translate, concept for translation and id strings
  Add aria props
  ...

Adding Attachment and Popover Component

merge conflicts

progress

Any

Working

Support for refs

Ready
---
 .circleci/config.yml                          |   17 +
 .prettierignore                               |    1 +
 .vscode/settings.json                         |    8 +-
 config/jest-client.config.js                  |   40 +
 config/jest-server.config.js                  |   19 +
 config/jest.config.js                         |   38 +-
 config/jest/cssTransform.js                   |  107 +-
 config/nodemon/relay-stream.json              |    8 -
 config/nodemon/server.json                    |   10 -
 config/paths.js                               |    1 +
 config/postcss.config.js                      |   64 +-
 config/tsconfig.jest.json                     |    7 +
 config/watcher.ts                             |   25 +-
 config/webpack.config.dev.js                  |    8 +-
 config/webpackDevServer.config.js             |    3 +-
 doczrc.js                                     |    2 +-
 package-lock.json                             | 5422 ++++++++++++-----
 package.json                                  |   96 +-
 scripts/test.js                               |    2 +-
 scripts/watcher/ChokidarWatcher.ts            |   67 +-
 scripts/watcher/CommandExecutor.ts            |   11 +-
 scripts/watcher/LongRunningExecutor.ts        |   56 +-
 scripts/watcher/SaneWatcher.ts                |  101 +
 scripts/watcher/bin/watcher.ts                |   40 +-
 scripts/watcher/types.ts                      |   28 +-
 scripts/watcher/types/pstree.remy.d.ts        |    6 +
 scripts/watcher/watch.ts                      |  104 +-
 src/core/client/.babelrc.js                   |    3 +
 .../framework/lib/bootstrap/TalkContext.tsx   |    9 +-
 .../{createContext.ts => createContext.tsx}   |   23 +
 .../framework/lib/bootstrap/withContext.tsx   |   22 +-
 src/core/client/framework/lib/messages.tsx    |    2 +-
 .../framework/lib/relay/QueryRenderer.tsx     |   28 +-
 .../lib/relay/createMutationContainer.tsx     |   12 +-
 src/core/client/framework/lib/relay/index.ts  |    1 +
 .../lib/relay/withFragmentContainer.ts        |    2 +-
 .../lib/relay/withLocalStateContainer.tsx     |   11 +-
 .../lib/relay/withPaginationContainer.ts      |   10 +-
 .../lib/relay/withRefetchContainer.ts         |    2 +-
 .../lib/relay/wrapFetchWithLogger.ts          |   25 +
 src/core/client/stream/.babelrc.js            |    1 -
 src/core/client/stream/components/App.css     |   14 +
 .../client/stream/components/App.spec.tsx     |   22 +
 src/core/client/stream/components/App.tsx     |   25 +-
 .../client/stream/components/AssetList.tsx    |   16 -
 src/core/client/stream/components/Comment.css |   11 -
 src/core/client/stream/components/Comment.tsx |   32 -
 .../components/Comment/Comment.spec.tsx       |   19 +
 .../stream/components/Comment/Comment.tsx     |   43 +
 .../stream/components/Comment/Timestamp.css   |    3 +
 .../components/Comment/Timestamp.spec.tsx     |   14 +
 .../stream/components/Comment/Timestamp.tsx   |   16 +
 .../stream/components/Comment/TopBar.css      |    3 +
 .../stream/components/Comment/TopBar.spec.tsx |   45 +
 .../stream/components/Comment/TopBar.tsx      |   32 +
 .../stream/components/Comment/Username.css    |    3 +
 .../components/Comment/Username.spec.tsx      |   45 +
 .../stream/components/Comment/Username.tsx    |   28 +
 .../__snapshots__/Comment.spec.tsx.snap       |   19 +
 .../__snapshots__/Timestamp.spec.tsx.snap     |    8 +
 .../__snapshots__/TopBar.spec.tsx.snap        |   21 +
 .../__snapshots__/Username.spec.tsx.snap      |   17 +
 .../client/stream/components/Comment/index.ts |    1 +
 src/core/client/stream/components/Indent.css  |    8 +
 .../client/stream/components/Indent.spec.tsx  |   14 +
 src/core/client/stream/components/Indent.tsx  |   15 +
 .../client/stream/components/Permalink.tsx    |    0
 .../stream/components/PermalinkPopover.css    |   13 +
 .../stream/components/PermalinkPopover.tsx    |   60 +
 .../stream/components/PostCommentForm.css     |   10 +-
 .../stream/components/PostCommentForm.tsx     |   12 +-
 .../stream/components/ReplyList.spec.tsx      |   42 +
 .../client/stream/components/ReplyList.tsx    |   50 +
 src/core/client/stream/components/Stream.css  |    4 +
 .../client/stream/components/Stream.spec.tsx  |   47 +
 src/core/client/stream/components/Stream.tsx  |   48 +-
 .../__snapshots__/App.spec.tsx.snap           |   18 +
 .../__snapshots__/Indent.spec.tsx.snap        |   11 +
 .../__snapshots__/ReplyList.spec.tsx.snap     |   72 +
 .../__snapshots__/Stream.spec.tsx.snap        |  214 +
 .../stream/containers/AppContainer.spec.tsx   |   16 +
 .../client/stream/containers/AppContainer.tsx |   26 +-
 .../stream/containers/AssetListContainer.tsx  |   33 -
 .../containers/CommentContainer.spec.tsx      |   21 +
 .../stream/containers/CommentContainer.tsx    |   35 +-
 .../containers/PostCommentFormContainer.tsx   |    2 +
 .../containers/ReplyListContainer.spec.tsx    |   86 +
 .../stream/containers/ReplyListContainer.tsx  |  135 +
 .../containers/StreamContainer.spec.tsx       |   73 +
 .../stream/containers/StreamContainer.tsx     |  136 +-
 .../__snapshots__/AppContainer.spec.tsx.snap  |    7 +
 .../CommentContainer.spec.tsx.snap            |   13 +
 .../ReplyListContainer.spec.tsx.snap          |   78 +
 .../StreamContainer.spec.tsx.snap             |   80 +
 .../client/stream/queries/AppQuery.spec.tsx   |   31 +
 src/core/client/stream/queries/AppQuery.tsx   |   14 +-
 .../__snapshots__/AppQuery.spec.tsx.snap      |   19 +
 .../test/__snapshots__/loadMore.spec.tsx.snap |  256 +
 .../__snapshots__/renderReplies.spec.tsx.snap |  168 +
 .../__snapshots__/renderStream.spec.tsx.snap  |  108 +
 .../showAllReplies.spec.tsx.snap              |  264 +
 .../client/stream/test/createEnvironment.ts   |   49 +
 src/core/client/stream/test/fixtures.ts       |   81 +
 src/core/client/stream/test/loadMore.spec.tsx |   98 +
 .../client/stream/test/renderReplies.spec.tsx |   47 +
 .../client/stream/test/renderStream.spec.tsx  |   47 +
 .../stream/test/showAllReplies.spec.tsx       |  114 +
 src/core/client/test/enzyme.ts                |    5 +
 src/core/client/test/jsdom.ts                 |   27 +
 src/core/client/test/setup.ts                 |   24 +
 src/core/client/tsconfig.json                 |   42 +-
 src/core/client/tslint.json                   |   19 +-
 .../ui/components/Attachment/Attachment.css   |    2 +
 .../ui/components/Attachment/Attachment.tsx   |   62 +
 .../client/ui/components/Attachment/index.ts  |    2 +
 .../ui/components/BaseButton/BaseButton.tsx   |    5 +-
 .../client/ui/components/Button/Button.css    |  111 +-
 .../client/ui/components/Button/Button.mdx    |   19 +-
 .../client/ui/components/Button/Button.tsx    |    4 +
 .../client/ui/components/Center/Center.css    |    6 -
 .../client/ui/components/Center/Center.tsx    |   30 -
 src/core/client/ui/components/Center/index.ts |    2 -
 src/core/client/ui/components/Flex/Flex.css   |   99 +
 src/core/client/ui/components/Flex/Flex.mdx   |   16 +
 .../client/ui/components/Flex/Flex.spec.tsx   |   20 +
 src/core/client/ui/components/Flex/Flex.tsx   |   57 +
 .../Flex/__snapshots__/Flex.spec.tsx.snap     |   11 +
 src/core/client/ui/components/Flex/index.ts   |    2 +
 .../ui/components/MatchMedia/MatchMedia.mdx   |   40 +
 .../components/MatchMedia/MatchMedia.spec.tsx |   27 +
 .../ui/components/MatchMedia/MatchMedia.tsx   |   47 +
 .../__snapshots__/MatchMedia.spec.tsx.snap    |   26 +
 .../client/ui/components/MatchMedia/index.ts  |    2 +
 .../client/ui/components/Popover/Popover.css  |   15 +
 .../client/ui/components/Popover/Popover.tsx  |   42 +
 .../client/ui/components/Popover/index.ts     |    2 +
 .../components/RelativeTime/RelativeTime.css  |    4 +
 .../components/RelativeTime/RelativeTime.mdx  |   17 +
 .../RelativeTime/RelativeTime.spec.tsx        |   42 +
 .../components/RelativeTime/RelativeTime.tsx  |   42 +
 .../__snapshots__/RelativeTime.spec.tsx.snap  |   31 +
 .../ui/components/RelativeTime/index.ts       |    2 +
 .../ui/components/TextField/TextField.css     |   11 +
 .../ui/components/TextField/TextField.d.ts    |    1 +
 .../ui/components/TextField/TextField.tsx     |   14 +
 .../client/ui/components/TextField/index.ts   |    2 +
 .../ui/components/Typography/Typography.css   |   24 +-
 .../ui/components/Typography/Typography.tsx   |    6 +-
 .../ui/components/UIContext/UIContext.ts      |   12 +
 .../client/ui/components/UIContext/index.ts   |    1 +
 src/core/client/ui/components/index.ts        |    7 +-
 src/core/client/ui/hocs/withForwardRef.tsx    |   22 +
 src/core/client/ui/shared/typography.css      |   55 +-
 src/core/client/ui/theme/variables.css        |   16 +
 src/core/client/ui/theme/variables.ts         |   21 +-
 src/core/client/ui/types.ts                   |    4 +-
 src/core/common/.babelrc.js                   |    5 +
 src/core/common/graphql/index.ts              |    1 +
 .../index.ts => common/graphql/loadSchema.ts} |    0
 src/core/common/utils/index.ts                |    2 +
 src/core/common/utils/pascalCase.ts           |    5 +
 src/core/common/utils/timeout.ts              |    4 +
 src/core/server/config.ts                     |    4 +-
 .../server/graph/management/schema/index.ts   |    2 +-
 .../server/graph/tenant/resolvers/comment.ts  |    2 +
 src/core/server/graph/tenant/schema/index.ts  |    2 +-
 .../server/graph/tenant/schema/schema.graphql |   24 +-
 src/core/server/models/comment.ts             |  101 +-
 src/core/server/models/connection.spec.ts     |   59 +
 src/core/server/models/connection.ts          |   55 +-
 src/core/server/services/mongodb/index.ts     |    5 +-
 src/locales/de/framework.ftl                  |   40 +
 src/locales/de/stream.ftl                     |    8 +-
 src/locales/en-US/framework.ftl               |   47 +
 src/locales/en-US/stream.ftl                  |   12 +-
 src/locales/es/common.ftl                     |    0
 src/locales/es/framework.ftl                  |   42 +
 src/locales/es/stream.ftl                     |    3 +
 src/tsconfig.json                             |   25 +-
 src/types/react-timeago.d.ts                  |   55 +
 src/types/relay-local-schema.d.ts             |   16 +
 tsconfig.json                                 |   12 +-
 tslint.json                                   |   11 +-
 183 files changed, 8963 insertions(+), 2233 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 config/jest-client.config.js
 create mode 100644 config/jest-server.config.js
 delete mode 100644 config/nodemon/relay-stream.json
 delete mode 100644 config/nodemon/server.json
 create mode 100644 config/tsconfig.jest.json
 create mode 100644 scripts/watcher/SaneWatcher.ts
 create mode 100644 scripts/watcher/types/pstree.remy.d.ts
 rename src/core/client/framework/lib/bootstrap/{createContext.ts => createContext.tsx} (71%)
 create mode 100644 src/core/client/framework/lib/relay/wrapFetchWithLogger.ts
 create mode 100644 src/core/client/stream/components/App.css
 create mode 100644 src/core/client/stream/components/App.spec.tsx
 delete mode 100644 src/core/client/stream/components/AssetList.tsx
 delete mode 100644 src/core/client/stream/components/Comment.css
 delete mode 100644 src/core/client/stream/components/Comment.tsx
 create mode 100644 src/core/client/stream/components/Comment/Comment.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/Comment.tsx
 create mode 100644 src/core/client/stream/components/Comment/Timestamp.css
 create mode 100644 src/core/client/stream/components/Comment/Timestamp.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/Timestamp.tsx
 create mode 100644 src/core/client/stream/components/Comment/TopBar.css
 create mode 100644 src/core/client/stream/components/Comment/TopBar.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/TopBar.tsx
 create mode 100644 src/core/client/stream/components/Comment/Username.css
 create mode 100644 src/core/client/stream/components/Comment/Username.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/Username.tsx
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/Comment/index.ts
 create mode 100644 src/core/client/stream/components/Indent.css
 create mode 100644 src/core/client/stream/components/Indent.spec.tsx
 create mode 100644 src/core/client/stream/components/Indent.tsx
 create mode 100644 src/core/client/stream/components/Permalink.tsx
 create mode 100644 src/core/client/stream/components/PermalinkPopover.css
 create mode 100644 src/core/client/stream/components/PermalinkPopover.tsx
 create mode 100644 src/core/client/stream/components/ReplyList.spec.tsx
 create mode 100644 src/core/client/stream/components/ReplyList.tsx
 create mode 100644 src/core/client/stream/components/Stream.css
 create mode 100644 src/core/client/stream/components/Stream.spec.tsx
 create mode 100644 src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
 create mode 100644 src/core/client/stream/containers/AppContainer.spec.tsx
 delete mode 100644 src/core/client/stream/containers/AssetListContainer.tsx
 create mode 100644 src/core/client/stream/containers/CommentContainer.spec.tsx
 create mode 100644 src/core/client/stream/containers/ReplyListContainer.spec.tsx
 create mode 100644 src/core/client/stream/containers/ReplyListContainer.tsx
 create mode 100644 src/core/client/stream/containers/StreamContainer.spec.tsx
 create mode 100644 src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
 create mode 100644 src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
 create mode 100644 src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
 create mode 100644 src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
 create mode 100644 src/core/client/stream/queries/AppQuery.spec.tsx
 create mode 100644 src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/createEnvironment.ts
 create mode 100644 src/core/client/stream/test/fixtures.ts
 create mode 100644 src/core/client/stream/test/loadMore.spec.tsx
 create mode 100644 src/core/client/stream/test/renderReplies.spec.tsx
 create mode 100644 src/core/client/stream/test/renderStream.spec.tsx
 create mode 100644 src/core/client/stream/test/showAllReplies.spec.tsx
 create mode 100644 src/core/client/test/enzyme.ts
 create mode 100644 src/core/client/test/jsdom.ts
 create mode 100644 src/core/client/test/setup.ts
 create mode 100644 src/core/client/ui/components/Attachment/Attachment.css
 create mode 100644 src/core/client/ui/components/Attachment/Attachment.tsx
 create mode 100644 src/core/client/ui/components/Attachment/index.ts
 delete mode 100644 src/core/client/ui/components/Center/Center.css
 delete mode 100644 src/core/client/ui/components/Center/Center.tsx
 delete mode 100644 src/core/client/ui/components/Center/index.ts
 create mode 100644 src/core/client/ui/components/Flex/Flex.css
 create mode 100644 src/core/client/ui/components/Flex/Flex.mdx
 create mode 100644 src/core/client/ui/components/Flex/Flex.spec.tsx
 create mode 100644 src/core/client/ui/components/Flex/Flex.tsx
 create mode 100644 src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/Flex/index.ts
 create mode 100644 src/core/client/ui/components/MatchMedia/MatchMedia.mdx
 create mode 100644 src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
 create mode 100644 src/core/client/ui/components/MatchMedia/MatchMedia.tsx
 create mode 100644 src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/MatchMedia/index.ts
 create mode 100644 src/core/client/ui/components/Popover/Popover.css
 create mode 100644 src/core/client/ui/components/Popover/Popover.tsx
 create mode 100644 src/core/client/ui/components/Popover/index.ts
 create mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.css
 create mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.mdx
 create mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx
 create mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.tsx
 create mode 100644 src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/RelativeTime/index.ts
 create mode 100644 src/core/client/ui/components/TextField/TextField.css
 create mode 100644 src/core/client/ui/components/TextField/TextField.d.ts
 create mode 100644 src/core/client/ui/components/TextField/TextField.tsx
 create mode 100644 src/core/client/ui/components/TextField/index.ts
 create mode 100644 src/core/client/ui/components/UIContext/UIContext.ts
 create mode 100644 src/core/client/ui/components/UIContext/index.ts
 create mode 100644 src/core/client/ui/hocs/withForwardRef.tsx
 create mode 100644 src/core/client/ui/theme/variables.css
 create mode 100644 src/core/common/.babelrc.js
 create mode 100644 src/core/common/graphql/index.ts
 rename src/core/{server/graph/common/schema/index.ts => common/graphql/loadSchema.ts} (100%)
 create mode 100644 src/core/common/utils/index.ts
 create mode 100644 src/core/common/utils/pascalCase.ts
 create mode 100644 src/core/common/utils/timeout.ts
 create mode 100644 src/core/server/models/connection.spec.ts
 create mode 100644 src/locales/es/common.ftl
 create mode 100644 src/types/react-timeago.d.ts
 create mode 100644 src/types/relay-local-schema.d.ts

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 908210e13..bd7493f6b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -43,6 +43,20 @@ jobs:
           name: Perform linting
           command: npm run lint
 
+  # unit_tests will run the unit tests.
+  unit_tests:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - run:
+          name: Compile schemas and types
+          command: npm run compile
+      - run:
+          name: Perform testing
+          command: npm run test
+
   # build will build the static assets and server typescript files.
   build:
     <<: *job_defaults
@@ -74,6 +88,9 @@ workflows:
       - lint:
           requires:
             - npm_dependencies
+      - unit_tests:
+          requires:
+            - npm_dependencies
       - build:
           requires:
             - npm_dependencies
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..3c3629e64
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 195b73de5..4dd5d1b72 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,12 +9,10 @@
     "**/.hg": true,
     "**/CVS": true,
     "**/.DS_Store": true,
-    "node_modules": true,
-    "dist": true,
-    ".vscode": true,
-    "package-lock.json": true
+    ".vs": true
   },
+  "tslint.exclude": "**/node_modules/**",
   "tslint.autoFixOnSave": true,
   "tslint.jsEnable": true,
   "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file
+}
diff --git a/config/jest-client.config.js b/config/jest-client.config.js
new file mode 100644
index 000000000..3bfbd195c
--- /dev/null
+++ b/config/jest-client.config.js
@@ -0,0 +1,40 @@
+const path = require("path");
+
+module.exports = {
+  displayName: "client",
+  rootDir: "../",
+  roots: ["<rootDir>/src/core/client"],
+  collectCoverageFrom: ["**/*.{js,jsx,mjs,ts,tsx}"],
+  coveragePathIgnorePatterns: ["/node_modules/"],
+  setupFiles: [
+    "<rootDir>/config/polyfills.js",
+    "<rootDir>/src/core/client/test/setup.ts",
+  ],
+  testMatch: ["**/*.spec.{js,jsx,mjs,ts,tsx}"],
+  testEnvironment: "node",
+  testURL: "http://localhost",
+  transform: {
+    "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest",
+    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+    "^(?!.*\\.(js|jsx|mjs|ts|tsx|css|json|ftl)$)":
+      "<rootDir>/config/jest/fileTransform.js",
+  },
+  transformIgnorePatterns: [
+    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$",
+  ],
+  moduleNameMapper: {
+    "^talk-admin/(.*)$": "<rootDir>/src/core/client/admin/$1",
+    "^talk-ui/(.*)$": "<rootDir>/src/core/client/ui/$1",
+    "^talk-stream/(.*)$": "<rootDir>/src/core/client/stream/$1",
+    "^talk-framework/(.*)$": "<rootDir>/src/core/client/framework/$1",
+    "^talk-common/(.*)$": "<rootDir>/src/core/common/$1",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+  globals: {
+    "ts-jest": {
+      useBabelrc: true,
+      tsConfigFile: path.resolve(__dirname, "tsconfig.jest.json"),
+    },
+  },
+};
diff --git a/config/jest-server.config.js b/config/jest-server.config.js
new file mode 100644
index 000000000..6ac9556bf
--- /dev/null
+++ b/config/jest-server.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  displayName: "server",
+  rootDir: "../",
+  roots: ["<rootDir>/src"],
+  collectCoverageFrom: ["**/*.{js,jsx,mjs,ts,tsx}"],
+  coveragePathIgnorePatterns: ["/node_modules/"],
+  testMatch: ["**/*.spec.{js,jsx,mjs,ts,tsx}"],
+  testPathIgnorePatterns: ["/node_modules/", "/client/"],
+  testEnvironment: "node",
+  testURL: "http://localhost",
+  transform: {
+    "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest",
+  },
+  moduleNameMapper: {
+    "^talk-server/(.*)$": "<rootDir>/src/core/server/$1",
+    "^talk-common/(.*)$": "<rootDir>/src/core/common/$1",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+};
diff --git a/config/jest.config.js b/config/jest.config.js
index 682a2c8a4..3e7166a29 100644
--- a/config/jest.config.js
+++ b/config/jest.config.js
@@ -1,38 +1,6 @@
-const paths = require("./paths");
-
 module.exports = {
-  rootDir: "../",
-  roots: ["<rootDir>/src", "<rootDir>/scripts"],
-  collectCoverageFrom: ["src/**/*.{js,jsx,mjs,ts,tsx}"],
-  coveragePathIgnorePatterns: ["/node_modules/"],
-  setupFiles: ["<rootDir>/config/polyfills.js"],
-  testMatch: [
-    "**/__tests__/**/*.{js,jsx,mjs,ts,tsx}",
-    "**/*.(spec|test).{js,jsx,mjs,ts,tsx}",
-  ],
-  testEnvironment: "node",
-  testURL: "http://localhost",
-  transform: {
-    "^.+\\.(js|jsx|mjs|ts|tsx)$": "<rootDir>/node_modules/ts-jest",
-    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-    "^(?!.*\\.(js|jsx|mjs|css|json|ftl)$)":
-      "<rootDir>/config/jest/fileTransform.js",
-  },
-  transformIgnorePatterns: [
-    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$",
-  ],
-  moduleNameMapper: {
-    "^react-native$": "react-native-web",
-  },
-  moduleFileExtensions: [
-    "web.js",
-    "js",
-    "json",
-    "web.jsx",
-    "jsx",
-    "node",
-    "mjs",
-    "ts",
-    "tsx",
+  projects: [
+    "<rootDir>/jest-client.config.js",
+    "<rootDir>/jest-server.config.js",
   ],
 };
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
index 606cc276b..98d4e9a36 100644
--- a/config/jest/cssTransform.js
+++ b/config/jest/cssTransform.js
@@ -1,14 +1,105 @@
 "use strict";
 
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
+// Adapted version of https://github.com/Connormiha/jest-css-modules-transform
+// Copyright https://github.com/Connormiha/jest-css-modules-transform/graphs/contributors
+// This oututs `module.exports = cssObject` instead of `module.exports = { default: cssObject }`;
+
+const { sep: pathSep, resolve, basename, extname } = require("path");
+const postcss = require("postcss");
+const postcssNested = postcss([require("postcss-nested")]);
+
+const REG_EXP_NAME_BREAK_CHAR = /[\s,.{/#[:]/;
+
+const getCSSSelectors = (css, path) => {
+  const end = css.length;
+  let i = 0;
+  let char;
+  let bracketsCount = 0;
+  const result = {};
+
+  while (i < end) {
+    if (i === -1) {
+      throw Error(`Parse error ${path}`);
+    }
+    if (css.indexOf("/*", i) === i) {
+      i = css.indexOf("*/", i + 2);
+      // Unclosed comment. Break to avoid infinity loop
+      if (i === -1) {
+        // Don't parse, but save collected result
+        return result;
+      }
+      continue;
+    }
+    char = css[i];
+    if (char === "{") {
+      bracketsCount++;
+      i++;
+      continue;
+    }
+    if (char === "}") {
+      bracketsCount--;
+      i++;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      do {
+        i = css.indexOf(char, i + 1);
+        // Syntax error since this line. Don't parse, but save collected result
+        if (i === -1) {
+          return result;
+        }
+      } while (css[i - 1] === "\\");
+      i++;
+      continue;
+    }
+    if (bracketsCount > 0) {
+      i++;
+      continue;
+    }
+    if (char === "." || char === "#") {
+      i++;
+      const startWord = i;
+      while (!REG_EXP_NAME_BREAK_CHAR.test(css[i])) {
+        i++;
+      }
+      const word = css.slice(startWord, i);
+      result[word] = word;
+      continue;
+    }
+    if (css.indexOf("@keyframes", i) === i) {
+      i += 10;
+      while (REG_EXP_NAME_BREAK_CHAR.test(css[i])) {
+        i++;
+      }
+      const startWord = i;
+      while (!REG_EXP_NAME_BREAK_CHAR.test(css[i])) {
+        i++;
+      }
+      const word = css.slice(startWord, i);
+      result[word] = word;
+      continue;
+    }
+    i++;
+  }
+  return result;
+};
 
 module.exports = {
-  process() {
-    return "module.exports = {};";
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return "cssTransform";
+  process(src, path, config) {
+    const filename = path.slice(path.lastIndexOf(pathSep) + 1);
+    const textCSS = postcssNested.process(src).css;
+    const selectors = getCSSSelectors(textCSS, path);
+    const component = basename(path, extname(path));
+
+    // Prefix class names with component name.
+    Object.keys(selectors).forEach(k => {
+      selectors[k] = selectors[k]
+        .split(/\s+/)
+        .map(v => `${component}-${v}`)
+        .join(" ");
+    });
+
+    const exprt = JSON.stringify(selectors);
+    return `module.exports = ${exprt}`;
   },
 };
diff --git a/config/nodemon/relay-stream.json b/config/nodemon/relay-stream.json
deleted file mode 100644
index dc9556823..000000000
--- a/config/nodemon/relay-stream.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "exec": "npm-run-all compile:relay-stream",
-  "ext": "ts,tsx,graphql",
-  "watch": [
-    "./src/core/client/stream",
-    "./src/core/**/*.graphql"
-  ]
-}
diff --git a/config/nodemon/server.json b/config/nodemon/server.json
deleted file mode 100644
index 08472086e..000000000
--- a/config/nodemon/server.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "exec": "npm run start:development",
-  "ext": "ts,graphql",
-  "watch": [
-    "./src"
-  ],
-  "ignore": [
-    "./src/client"
-  ]
-}
diff --git a/config/paths.js b/config/paths.js
index 4d852d0f6..7d98ac998 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -53,6 +53,7 @@ module.exports = {
   appTsconfig: resolveApp("src/core/client/tsconfig.json"),
   appLocales: resolveApp("src/locales"),
   appThemeVariables: resolveApp("src/core/client/ui/theme/variables.ts"),
+  appThemeVariablesCSS: resolveApp("src/core/client/ui/theme/variables.css"),
   testsSetup: resolveApp("src/setupTests.js"),
   appNodeModules: resolveApp("node_modules"),
 
diff --git a/config/postcss.config.js b/config/postcss.config.js
index 4de2da6b2..da91c22b2 100644
--- a/config/postcss.config.js
+++ b/config/postcss.config.js
@@ -1,27 +1,73 @@
-const precss = require("precss");
-const autoprefixer = require("autoprefixer");
-const fontMagician = require("postcss-font-magician");
+// Allow importing typescript files.
+require("ts-node/register");
+
 const kebabCase = require("lodash/kebabCase");
 const mapKeys = require("lodash/mapKeys");
+const mapValues = require("lodash/mapValues");
+const pickBy = require("lodash/pickBy");
 const flat = require("flat");
-const flexbugsFixes = require("postcss-flexbugs-fixes");
 const paths = require("./paths");
+const autoprefixer = require("autoprefixer");
+const postcssFontMagician = require("postcss-font-magician");
+const postcssFlexbugsFixes = require("postcss-flexbugs-fixes");
+const postcssVariables = require("postcss-css-variables");
+const postcssPresetEnv = require("postcss-preset-env");
+const postcssNested = require("postcss-nested");
+const postcssImport = require("postcss-import");
+const postcssPrependImports = require("postcss-prepend-imports");
+const postcssAdvancedVariables = require("postcss-advanced-variables");
 
 delete require.cache[paths.appThemeVariables];
-const variables = require(paths.appThemeVariables);
+const variables = require(paths.appThemeVariables).default;
 const flatKebabVariables = mapKeys(
-  flat(variables, { delimiter: "-" }),
+  mapValues(flat(variables, { delimiter: "-" }), v => v.toString()),
   (_, k) => kebabCase(k)
 );
 
+// These are the default css standard variables.
+const cssVariables = pickBy(
+  flatKebabVariables,
+  (v, k) => !k.startsWith("breakpoints-")
+);
+
+// These are sass style variables used in media queries.
+const mediaQueryVariables = mapValues(
+  pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),
+  // Add unit to breakpoints.
+  // Add 1 to support mobile first approach where we start
+  // with the smallest screen and gradually add styling for the
+  // next bigger screen. This is realized using `min-width` without
+  // ever using `max-width`.
+  v => `${Number.parseInt(v) + 1}px`
+);
+
 module.exports = {
   // Necessary for external CSS imports to work
   // https://github.com/facebookincubator/create-react-app/issues/2677
   ident: "postcss",
   plugins: [
-    precss({ variables: flatKebabVariables }),
-    fontMagician(),
-    flexbugsFixes,
+    // This allows us to define dynamic css variables.
+    postcssPrependImports({
+      path: "",
+      files: [paths.appThemeVariablesCSS],
+    }),
+    // Needed by above plugin.
+    postcssImport(),
+    // Support nesting.
+    postcssNested(),
+    // Sass style variables to be used in media queries.
+    postcssAdvancedVariables({ variables: mediaQueryVariables }),
+    // CSS standard variables for everything else.
+    postcssVariables({
+      variables: cssVariables,
+    }),
+    // Provides a modern CSS environment.
+    postcssPresetEnv(),
+    // Does all the font handling logic.
+    postcssFontMagician(),
+    // Fix known flexbox bugs.
+    postcssFlexbugsFixes,
+    // Vendor prefixing.
     autoprefixer({
       browsers: [
         ">1%",
diff --git a/config/tsconfig.jest.json b/config/tsconfig.jest.json
new file mode 100644
index 000000000..d457255e7
--- /dev/null
+++ b/config/tsconfig.jest.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "es2015"
+  }
+}
diff --git a/config/watcher.ts b/config/watcher.ts
index 305193045..f974e4283 100644
--- a/config/watcher.ts
+++ b/config/watcher.ts
@@ -13,9 +13,14 @@ const config: Config = {
         "core/client/stream/**/*.ts",
         "core/client/stream/**/*.tsx",
         "core/client/stream/**/*.graphql",
-        "core/client/server/**/*.graphql",
+        "core/server/**/*.graphql",
+      ],
+      ignore: [
+        "core/**/*.d.ts",
+        "core/**/*.graphql.ts",
+        "**/test/**/*",
+        "core/**/*.spec.*",
       ],
-      ignore: ["core/**/*.d.ts"],
       executor: new CommandExecutor("npm run compile:relay-stream", {
         runOnInit: true,
       }),
@@ -35,6 +40,22 @@ const config: Config = {
       paths: [],
       executor: new LongRunningExecutor("npm run start:webpackDevServer"),
     },
+    runDocz: {
+      paths: [],
+      executor: new LongRunningExecutor("npm run docz -- dev"),
+    },
+  },
+  defaultSet: "client",
+  sets: {
+    server: ["runServer"],
+    client: [
+      "runServer",
+      "runWebpackDevServer",
+      "compileCSSTypes",
+      "compileRelayStream",
+    ],
+    docz: ["runDocz", "compileCSSTypes"],
+    compile: ["compileCSSTypes", "compileRelayStream"],
   },
 };
 
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 80872c5a4..359d53f7b 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -180,7 +180,7 @@ module.exports = {
 
                   // All available locales can be loadable on demand.
                   // To restrict available locales set:
-                  // availableLocales: ["en-US"]
+                  // availableLocales: ["en-US"],
                 },
               },
             ],
@@ -224,6 +224,11 @@ module.exports = {
                     jsx: "preserve",
                     noEmit: false,
                   },
+
+                  // Overwrites the behavior of `include` and `exclude` to only
+                  // include files that are actually being imported and which
+                  // are necessary to compile the bundle.
+                  onlyCompileBundledFiles: true,
                 },
               },
             ],
@@ -242,6 +247,7 @@ module.exports = {
                 options: {
                   modules: true,
                   importLoaders: 1,
+                  localIdentName: "[name]-[local]-[hash:base64:5]",
                 },
               },
               {
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index 668433652..b3e6f1578 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -9,6 +9,7 @@ const paths = require("./paths");
 const protocol = process.env.HTTPS === "true" ? "https" : "http";
 const host = process.env.HOST || "0.0.0.0";
 const serverPort = process.env.PORT || 3000;
+const doczPort = process.env.DOCZ_PORT || 3030;
 
 module.exports = function(proxy, allowedHost) {
   return {
@@ -81,8 +82,8 @@ module.exports = function(proxy, allowedHost) {
       disableDotRule: true,
     },
     public: allowedHost,
-    // Proxy to the graphql server.
     proxy: proxy || {
+      // Proxy to the graphql server.
       "/api": {
         target: `http://localhost:${serverPort}`,
       },
diff --git a/doczrc.js b/doczrc.js
index 19542a6b6..9d7ef1b12 100644
--- a/doczrc.js
+++ b/doczrc.js
@@ -14,7 +14,7 @@ export default {
   source: "./src",
   typescript: true,
   host: process.env.HOST || "0.0.0.0",
-  port: parseInt(process.env.DOCZ_PORT, 10) || 3000,
+  port: parseInt(process.env.DOCZ_PORT, 10) || 3030,
   modifyBundlerConfig: config => {
     config.module.rules.push({
       test: /\.css$/,
diff --git a/package-lock.json b/package-lock.json
index b3622a48d..2854a2155 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -597,18 +597,18 @@
       }
     },
     "@babel/plugin-syntax-typescript": {
-      "version": "7.0.0-beta.51",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.0.0-beta.51.tgz",
-      "integrity": "sha1-ovJwH/ZdAGJoy8hK0buO6rY4sMQ=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.0.0-beta.53.tgz",
+      "integrity": "sha1-V1oWPLFEsJS09yQOQ0utrYMexFU=",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "7.0.0-beta.51"
+        "@babel/helper-plugin-utils": "7.0.0-beta.53"
       },
       "dependencies": {
         "@babel/helper-plugin-utils": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.51.tgz",
-          "integrity": "sha1-D2pfK20cZERBP4+rYJQNebY8IDE=",
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.53.tgz",
+          "integrity": "sha1-1kRYY2/8JYtCcUqd2Trrb4uM8+0=",
           "dev": true
         }
       }
@@ -773,14 +773,115 @@
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.0.0-beta.49",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.0.0-beta.49.tgz",
-      "integrity": "sha1-Cfs0XVknwro72J582xOlUGftOaA=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.0.0-beta.53.tgz",
+      "integrity": "sha1-68P7ocWmyHQ7kJQD7NPn42gcr6U=",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "7.0.0-beta.49",
-        "@babel/helper-plugin-utils": "7.0.0-beta.49",
-        "@babel/helper-simple-access": "7.0.0-beta.49"
+        "@babel/helper-module-transforms": "7.0.0-beta.53",
+        "@babel/helper-plugin-utils": "7.0.0-beta.53",
+        "@babel/helper-simple-access": "7.0.0-beta.53"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.53.tgz",
+          "integrity": "sha1-mA0VYLhjV1v1o3eSUDfgEy71kh4=",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "7.0.0-beta.53"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.53.tgz",
+          "integrity": "sha1-5zXmqjClBLD52Fw4ptRwqfSqgdk=",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.53",
+            "lodash": "^4.17.5"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.0.0-beta.53.tgz",
+          "integrity": "sha1-e6IUzcyPhiPy0Xl96v8f80mqzhM=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "7.0.0-beta.53",
+            "@babel/helper-simple-access": "7.0.0-beta.53",
+            "@babel/helper-split-export-declaration": "7.0.0-beta.53",
+            "@babel/template": "7.0.0-beta.53",
+            "@babel/types": "7.0.0-beta.53",
+            "lodash": "^4.17.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.53.tgz",
+          "integrity": "sha1-1kRYY2/8JYtCcUqd2Trrb4uM8+0=",
+          "dev": true
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.0.0-beta.53.tgz",
+          "integrity": "sha1-cvbbmr5C+GgfpvAo79WdgVRHUrM=",
+          "dev": true,
+          "requires": {
+            "@babel/template": "7.0.0-beta.53",
+            "@babel/types": "7.0.0-beta.53",
+            "lodash": "^4.17.5"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.53.tgz",
+          "integrity": "sha1-rvVLix+ZYW6jfJhHhxajeAJjMls=",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.53"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.53.tgz",
+          "integrity": "sha1-9OlS2tF4fSBeGI0+OEzc5JyjaPs=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.0",
+            "esutils": "^2.0.2",
+            "js-tokens": "^3.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.53.tgz",
+          "integrity": "sha1-H0XrYXv5Rj1IKywE00nZ5O2/SJI=",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.53.tgz",
+          "integrity": "sha1-MyIpCQDQsYewpxdDgeHzu3EFDS4=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "7.0.0-beta.53",
+            "@babel/parser": "7.0.0-beta.53",
+            "@babel/types": "7.0.0-beta.53",
+            "lodash": "^4.17.5"
+          }
+        },
+        "@babel/types": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.53.tgz",
+          "integrity": "sha1-GaRhwNpRVZXftnQLS0Xce7Dms3U=",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
@@ -1007,19 +1108,19 @@
       }
     },
     "@babel/plugin-transform-typescript": {
-      "version": "7.0.0-beta.51",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.0.0-beta.51.tgz",
-      "integrity": "sha1-HZ5bp7+T/jdIPMMh28mn67pf81s=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.0.0-beta.53.tgz",
+      "integrity": "sha1-d10qU+Rv1KdWLzFP5nSmrS+Dc8A=",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "7.0.0-beta.51",
-        "@babel/plugin-syntax-typescript": "7.0.0-beta.51"
+        "@babel/helper-plugin-utils": "7.0.0-beta.53",
+        "@babel/plugin-syntax-typescript": "7.0.0-beta.53"
       },
       "dependencies": {
         "@babel/helper-plugin-utils": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.51.tgz",
-          "integrity": "sha1-D2pfK20cZERBP4+rYJQNebY8IDE=",
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.53.tgz",
+          "integrity": "sha1-1kRYY2/8JYtCcUqd2Trrb4uM8+0=",
           "dev": true
         }
       }
@@ -1090,6 +1191,19 @@
         "browserslist": "^3.0.0",
         "invariant": "^2.2.2",
         "semver": "^5.3.0"
+      },
+      "dependencies": {
+        "@babel/plugin-transform-modules-commonjs": {
+          "version": "7.0.0-beta.49",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.0.0-beta.49.tgz",
+          "integrity": "sha1-Cfs0XVknwro72J582xOlUGftOaA=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "7.0.0-beta.49",
+            "@babel/helper-plugin-utils": "7.0.0-beta.49",
+            "@babel/helper-simple-access": "7.0.0-beta.49"
+          }
+        }
       }
     },
     "@babel/preset-flow": {
@@ -1124,31 +1238,39 @@
       }
     },
     "@babel/preset-typescript": {
-      "version": "7.0.0-beta.51",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.0.0-beta.51.tgz",
-      "integrity": "sha1-lVELKxSTxrIQpJm3PoDNip4vitE=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.0.0-beta.53.tgz",
+      "integrity": "sha1-Ffrd7M4nuQYrpQ4aE8IB4s4qubA=",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "7.0.0-beta.51",
-        "@babel/plugin-transform-typescript": "7.0.0-beta.51"
+        "@babel/helper-plugin-utils": "7.0.0-beta.53",
+        "@babel/plugin-transform-typescript": "7.0.0-beta.53"
       },
       "dependencies": {
         "@babel/helper-plugin-utils": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.51.tgz",
-          "integrity": "sha1-D2pfK20cZERBP4+rYJQNebY8IDE=",
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.53.tgz",
+          "integrity": "sha1-1kRYY2/8JYtCcUqd2Trrb4uM8+0=",
           "dev": true
         }
       }
     },
     "@babel/runtime": {
-      "version": "7.0.0-beta.51",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.51.tgz",
-      "integrity": "sha1-SLjtGDBwNMZiD2Q1FGUMoszAFlo=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.53.tgz",
+      "integrity": "sha1-nfIq40gjzon3kAYFlLg+5XLixdI=",
       "dev": true,
       "requires": {
         "core-js": "^2.5.7",
-        "regenerator-runtime": "^0.11.1"
+        "regenerator-runtime": "^0.12.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.0",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.0.tgz",
+          "integrity": "sha512-SpV2LhF5Dm9UYMEprB3WwsBnWwqTrmjrm2UZb42cl2G02WVGgx7Mg8aa9pdLEKp6hZ+/abcMc2NxKA8f02EG2w==",
+          "dev": true
+        }
       }
     },
     "@babel/template": {
@@ -1209,16 +1331,6 @@
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
       "dev": true
     },
-    "@csstools/postcss-image-set-function": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-image-set-function/-/postcss-image-set-function-1.0.0.tgz",
-      "integrity": "sha512-B+uThZhN3rTRV7mjw3c+GCxIrBkHIAihnfZEb5Ig3+hauQMWGARD3j8UoMX7Hk6w4pBpMbm3Ggs9TVKvtn/kkA==",
-      "dev": true,
-      "requires": {
-        "postcss": "^6.0.20",
-        "postcss-value-parser": "^3.3.0"
-      }
-    },
     "@csstools/sass-import-resolve": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/sass-import-resolve/-/sass-import-resolve-1.0.0.tgz",
@@ -1226,14 +1338,14 @@
       "dev": true
     },
     "@emotion/babel-utils": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.4.tgz",
-      "integrity": "sha1-Lqxp6zGulE++SioOc2o121+BCGY=",
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.7.tgz",
+      "integrity": "sha512-U6iTV9HurrZ0ye8VOTIGcV4tMdDtAIGbfCH58L/NdOhW05pV/KVlNmbXsHp01VMSM+pgmSkGqHSLLE8zdDYJvA==",
       "dev": true,
       "requires": {
-        "@emotion/hash": "^0.6.3",
-        "@emotion/memoize": "^0.6.2",
-        "@emotion/serialize": "^0.8.2",
+        "@emotion/hash": "^0.6.5",
+        "@emotion/memoize": "^0.6.5",
+        "@emotion/serialize": "^0.8.5",
         "convert-source-map": "^1.5.1",
         "find-root": "^1.1.0",
         "source-map": "^0.7.2"
@@ -1248,69 +1360,69 @@
       }
     },
     "@emotion/hash": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.3.tgz",
-      "integrity": "sha1-DnpWBGJvxsbUrEBhovWsgNUCYqQ=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.5.tgz",
+      "integrity": "sha512-JlZbn5+adseTdDPTUkx/O1/UZbhaGR5fCLLWQDCIJ4eP9fJcVdP/qjlTveEX6mkNoJHWFbZ47wArWQQ0Qk6nMA==",
       "dev": true
     },
     "@emotion/is-prop-valid": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.2.tgz",
-      "integrity": "sha1-p2oWsXT/A/jjon+vYlm6zSGgKtw=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.5.tgz",
+      "integrity": "sha512-pfjQHT3FCZkAPxqY+sI6MmMTPMCKGIV3DcC1qhf68XkE9pGtKqb5WNN2vfmLgTMGnNVXnaFyx/VjdDYmGFcRaw==",
       "dev": true,
       "requires": {
-        "@emotion/memoize": "^0.6.2"
+        "@emotion/memoize": "^0.6.5"
       }
     },
     "@emotion/memoize": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.2.tgz",
-      "integrity": "sha1-E44AszLVGbTjB73tYVnlukiro64=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.5.tgz",
+      "integrity": "sha512-n1USr7yICA4LFIv7z6kKsXM8rZJxd1btKCBmDewlit+3OJ2j4bDfgXTAxTHYbPkHS/eztHmFWfsbxW2Pu5mDqA==",
       "dev": true
     },
     "@emotion/serialize": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.8.2.tgz",
-      "integrity": "sha1-07LK3fyTEH1jx5/Gu8EeVV47di4=",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.8.5.tgz",
+      "integrity": "sha512-NObUNfK7lqxFpSJWHRwJeeGSZaElEgMn5eR76ift06yx9FdwIfFY47ffapkf2lJUoIUx4ffP55fPSVPMgv0Qgw==",
       "dev": true,
       "requires": {
-        "@emotion/hash": "^0.6.3",
-        "@emotion/memoize": "^0.6.2",
-        "@emotion/unitless": "^0.6.3",
-        "@emotion/utils": "^0.7.1"
+        "@emotion/hash": "^0.6.5",
+        "@emotion/memoize": "^0.6.5",
+        "@emotion/unitless": "^0.6.5",
+        "@emotion/utils": "^0.7.3"
       }
     },
     "@emotion/stylis": {
-      "version": "0.6.10",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.6.10.tgz",
-      "integrity": "sha1-fTIeY568i6I6zlmQwg6U3Ou4890=",
+      "version": "0.6.12",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.6.12.tgz",
+      "integrity": "sha512-yS+t7l5FeYeiIyADyqjFBJvdotpphHb2S3mP4qak5BpV7ODvxuyAVF24IchEslW+A1MWHAhn5SiOW6GZIumiEQ==",
       "dev": true
     },
     "@emotion/unitless": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.3.tgz",
-      "integrity": "sha1-ZWguaKgnAccO77ONf5QaLAv6kN4=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.5.tgz",
+      "integrity": "sha512-kAFHWyQTMLcOvse+RfEfJ6uwwOlVFZcUOMX0wuBvEMwnF3Zb/6VQ/xDgbx9fNlp3I6AAmijAtUtIyT2qVldpnA==",
       "dev": true
     },
     "@emotion/utils": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.7.1.tgz",
-      "integrity": "sha1-5E5ZbQPJ8WujsSetMzqKByvLWgo=",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.7.3.tgz",
+      "integrity": "sha512-1bGqG9IYJETOOqQEjWinGx1deLlAW/Fcew4GyrzZx0dJIgAjivZTmwzjrhB+Vhj7TgjMr0aTyj5byHmZezisZQ==",
       "dev": true
     },
     "@mdx-js/loader": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-0.11.1.tgz",
-      "integrity": "sha512-6RSmpiePjo+UMdx0wMMIq5P14WhlytdMSJ6vRO1ARc7dF8893RjVTvfXxFvZoYlFPyTEH4Ikxg8MZoiEFvPBmw==",
+      "version": "0.13.1-1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-0.13.1-1.tgz",
+      "integrity": "sha512-jOz477iknGVwfOdw8TAHsPkErRXppICDpZZvKf8C/8YLGTDhpkebU5gawWM0YwQtI0k8MfexgcricIvd4iJu8w==",
       "dev": true,
       "requires": {
-        "@mdx-js/tag": "^0.11.0"
+        "@mdx-js/tag": "^0.13.1-1"
       }
     },
     "@mdx-js/mdx": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-0.10.1.tgz",
-      "integrity": "sha512-2Mip8+44opmpPcJ5h7dtZ31pW9/ntslCEOsZk5xuP+SaafQzUjTRlDh6ifgp5+MDBgvjMzdAuHv3WgO2jj0Zyw==",
+      "version": "0.13.1-1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-0.13.1-1.tgz",
+      "integrity": "sha512-XofSLeW49U/OIIybhVfwmy+tTXekGzb+Bf90G5dM0AVn2eC65O1ozIwxgpTzdBDNCD4Hfu9SxSlt8208mv2w2w==",
       "dev": true,
       "requires": {
         "@mdx-js/mdxast": "^0.10.0",
@@ -1347,11 +1459,12 @@
       }
     },
     "@mdx-js/tag": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@mdx-js/tag/-/tag-0.11.0.tgz",
-      "integrity": "sha512-o//BoBPtlyYC5HdohjpaQ9+4epL2a9o5JYYWhRzwF6pMJnjyDnmulz88178Yu5GuI8AVxwqwbCHZ0qvXSUSDEg==",
+      "version": "0.13.1-1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/tag/-/tag-0.13.1-1.tgz",
+      "integrity": "sha512-ke76StkCSy10wj2fAX/HK6yOtZy62Eq52ECKhJYm+E6SdfKNPbX8CkNfJ/VjinjCfMOHx7n6UyA8Zpb6M7mhqw==",
       "dev": true,
       "requires": {
+        "create-react-context": "^0.2.2",
         "prop-types": "^15.6.1"
       }
     },
@@ -1393,6 +1506,12 @@
         "debug": "^2.6.8"
       }
     },
+    "@sindresorhus/is": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
+      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
+      "dev": true
+    },
     "@sindresorhus/slugify": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-0.3.0.tgz",
@@ -1403,10 +1522,25 @@
         "lodash.deburr": "^4.1.0"
       }
     },
+    "@sinonjs/formatio": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
+      "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
+      "dev": true,
+      "requires": {
+        "samsam": "1.3.0"
+      }
+    },
+    "@sinonjs/samsam": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-2.0.0.tgz",
+      "integrity": "sha512-D7VxhADdZbDJ0HjUTMnSQ5xIGb4H2yWpg8k9Sf1T08zfFiQYlaxM8LZydpR4FQ2E6LZJX8IlabNZ5io4vdChwg==",
+      "dev": true
+    },
     "@types/bluebird": {
-      "version": "3.5.20",
-      "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.20.tgz",
-      "integrity": "sha512-Wk41MVdF+cHBfVXj/ufUHJeO3BlIQr1McbHZANErMykaCWeDSZbH5erGjNBw2/3UlRdSxZbLfSuQTzFmPOYFsA==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.22.tgz",
+      "integrity": "sha512-wQamz3CYZCz9QVxhPOF+Odu2jZifcXkGJDff7580sx/TCR6/9Zsgv+iGe2/o4Upcs0RDFLVJuEtYSEFeAqDTSA==",
       "dev": true
     },
     "@types/body-parser": {
@@ -1420,9 +1554,9 @@
       }
     },
     "@types/bson": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/bson/-/bson-1.0.8.tgz",
-      "integrity": "sha512-PMa4nkRhLaqwsXQDDTzGbTyCIpej0ERznyAP9fyuGnlsmUbcC4Y25mdqjibYjkOPNyK/BWWUKneruaKHcS3Q8g==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/bson/-/bson-1.0.10.tgz",
+      "integrity": "sha512-gRf+Qy5Qiyjz28ZkPRP37bDHtGG67op/lV2qcIMhWUq4vIMJ6/j13ajeYH7LFhJ5RNflyLHmdANPGDXZ5a8EzQ==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -1438,6 +1572,12 @@
         "@types/node": "*"
       }
     },
+    "@types/cheerio": {
+      "version": "0.22.8",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.8.tgz",
+      "integrity": "sha512-LzF540VOFabhS2TR2yYFz2Mu/fTfkA+5AwYddtJbOJGwnYrr2e7fHadT7/Z3jNGJJdCRlO3ySxmW26NgRdwhNA==",
+      "dev": true
+    },
     "@types/chokidar": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/@types/chokidar/-/chokidar-1.7.5.tgz",
@@ -1496,6 +1636,25 @@
         "@types/node": "*"
       }
     },
+    "@types/enzyme": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.1.11.tgz",
+      "integrity": "sha512-abPTpLuveNVd2ibafCjwoZT9MerzgnBKd6ijNKdtlfJREGKXk5dxzKAXGoY9IuiYarH2YXTc197WeyIVQUFjQg==",
+      "dev": true,
+      "requires": {
+        "@types/cheerio": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/enzyme-adapter-react-16": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.2.tgz",
+      "integrity": "sha512-/oEtlwJyFIT9metXC2A90XnjfHwBDYxhFoJwqNjNDG5K2CCqp7xneQbAp4u5j280bOmalFYUDjfmmxNQG3S4Og==",
+      "dev": true,
+      "requires": {
+        "@types/enzyme": "*"
+      }
+    },
     "@types/events": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-1.2.0.tgz",
@@ -1525,15 +1684,15 @@
       }
     },
     "@types/graphql": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.13.1.tgz",
-      "integrity": "sha512-a6vRcP4M6+7Lqev1JeF3hGFmC3FNBIJ5cRnaSN/z1LtGVr/CaY6nqSlQbnFr2j8ucDlUAQU43LCnJrz6uLUyHg==",
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.13.3.tgz",
+      "integrity": "sha512-YNGkX5HtcDtufyQquww05yoWYiDdZPPubLafXqukYqGmpawHjodAXwufhTemqDdgGk48WU7RX2Ouj0VTc9b3AA==",
       "dev": true
     },
     "@types/ioredis": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/@types/ioredis/-/ioredis-3.2.8.tgz",
-      "integrity": "sha512-L2Qoq7Di43X0V7eccmSHn3ECLyxzS5810YKiV9Z5bLTNNuD/3xlaipywbynrkxAi29UIh7NIGikXm6OJNlM9hg==",
+      "version": "3.2.13",
+      "resolved": "https://registry.npmjs.org/@types/ioredis/-/ioredis-3.2.13.tgz",
+      "integrity": "sha512-38qPXqV4oEzucMcdl0yhqN9JCGYOjspvfQyOL4T4HpMcD4VIj4RfuumuM2mwTtK12jiHF0oxjyU8EvnLfHD+TA==",
       "dev": true,
       "requires": {
         "@types/bluebird": "*",
@@ -1541,9 +1700,9 @@
       }
     },
     "@types/jest": {
-      "version": "23.1.2",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.1.2.tgz",
-      "integrity": "sha512-qXPAaH+1KJBCRtQub2cd7GOnKfWkgRr++luya81ksUs+DA8QG2nMNZuved5K4Nb4enR61aS64CocEJNsjCKwog==",
+      "version": "23.1.6",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.1.6.tgz",
+      "integrity": "sha512-lBu2tjrfGuj0gARErNmHZJrnWBdRrYk2XqlBY3LRv8Dqxk3w3461uuFMKmwfDDiOa5kzXocUnunCBBacGwF3+A==",
       "dev": true
     },
     "@types/joi": {
@@ -1552,10 +1711,22 @@
       "integrity": "sha512-nOnsbHvoo5DsQEh8VGlbQlfg9+/iFSxE5RQKLNkAODIqyupdEkBCZf6RCNxR+9X0egMIkJ43NnwkEJKxLogsIA==",
       "dev": true
     },
+    "@types/jsdom": {
+      "version": "11.0.6",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-11.0.6.tgz",
+      "integrity": "sha512-6sw9iNdXak3Dk4iN1osdZeZcV8cTe2SNIVwbnt8MjFFAI8+nBWDNcDfjUgZZqycF3Twlr7xXlKntnOrruxNRvg==",
+      "dev": true,
+      "requires": {
+        "@types/events": "*",
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^4.0.0"
+      }
+    },
     "@types/lodash": {
-      "version": "4.14.109",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.109.tgz",
-      "integrity": "sha512-hop8SdPUEzbcJm6aTsmuwjIYQo1tqLseKCM+s2bBqTU2gErwI4fE+aqUVOlscPSQbKHKgtMMPoC+h4AIGOJYvw==",
+      "version": "4.14.112",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.112.tgz",
+      "integrity": "sha512-jDD7sendv3V7iwyRXSlECOR8HCtMN2faVA9ngLdHHihSVIwY7nbfsKl2kA6fimUDU1i5l/zgpG3aevwWnN3zCQ==",
       "dev": true
     },
     "@types/luxon": {
@@ -1571,9 +1742,9 @@
       "dev": true
     },
     "@types/mongodb": {
-      "version": "3.0.19",
-      "resolved": "https://registry.npmjs.org/@types/mongodb/-/mongodb-3.0.19.tgz",
-      "integrity": "sha512-KK30PZmGuCqSJQgb3tozzjy5hpQswMsAuqkO+T8vCUh9bSz1sZGx1nAOu79IzVNh2vBy1Xj46vk4A0PUHN5yBg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mongodb/-/mongodb-3.1.1.tgz",
+      "integrity": "sha512-lHEH+OwYNeuC28jlmdPT/wBAVMuB6M1sHjZKAtaho/LeJf78ILJPYUq2OD7mWVj9QR7uYiKVt4ExGkXegHFCJQ==",
       "dev": true,
       "requires": {
         "@types/bson": "*",
@@ -1582,9 +1753,9 @@
       }
     },
     "@types/node": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.1.tgz",
-      "integrity": "sha512-IsX9aDHDzJohkm3VCDB8tkzl5RQ34E/PFA29TQk6uDGb7Oc869ZBtmdKVDBzY3+h9GnXB8ssrRXEPVZrlIOPOw==",
+      "version": "10.5.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.5.2.tgz",
+      "integrity": "sha512-m9zXmifkZsMHZBOyxZWilMwmTlpC8x5Ty360JKTiXvlXZfBWYpsg9ZZvP/Ye+iZUh+Q+MxDLjItVTWIsfwz+8Q==",
       "dev": true
     },
     "@types/passport": {
@@ -1612,11 +1783,18 @@
       "version": "16.4.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.2.tgz",
       "integrity": "sha512-oVcVteCDNiVc/fkDjowRfAZQDEOR76j3CJ3FvwXNvfV6zJguhghy1lMgpAzYox+9AZsWch+JPV6Imml3wvIUeg==",
-      "dev": true,
       "requires": {
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-copy-to-clipboard": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.2.5.tgz",
+      "integrity": "sha512-5LggaWWlMcgehfeDmr4FZmK8MXntzxLYERFdrXk72ye6QwpoZpyYFGgUM+xGVVtIP2WXlor8twZTXK1xckEDYw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "16.0.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.6.tgz",
@@ -1628,13 +1806,34 @@
       }
     },
     "@types/react-relay": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@types/react-relay/-/react-relay-1.3.6.tgz",
-      "integrity": "sha512-X0qv3nGlE4TStFLLKxgj+6MgHZEExB1N/RDcVcyCauAojV5byD0c6VhuqAluYaTKaL2FBuxdtDL405IhIIjEbQ==",
+      "version": "github:coralproject/patched#ba4c8d01bb737e5f073534b32d870294e39cc5a8",
+      "from": "github:coralproject/patched#types/react-relay",
+      "dev": true
+    },
+    "@types/react-responsive": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-responsive/-/react-responsive-3.0.1.tgz",
+      "integrity": "sha512-ti7MKe0AuWCGpNkRzRsRB8ExS7NZotXtDtD27rX4HiZML37SetbIp3cw5FDXIeqIC7a3TzWuPjv/I9Qcu4YL3w==",
       "dev": true,
       "requires": {
-        "@types/react": "*",
-        "@types/relay-runtime": "*"
+        "@types/react": "*"
+      }
+    },
+    "@types/react-test-renderer": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.0.1.tgz",
+      "integrity": "sha512-kmNh8g67Ck/y/vp6KX+4JTJXiTGLZBylNhu+R7sm7zcvsrnIGVO6J1zew5inVg428j9f8yHpl68RcYOZXVborQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-tooltip": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-tooltip/-/react-tooltip-3.3.5.tgz",
+      "integrity": "sha512-wpWzjtMWBPymIoYjqZTeWX1v5dJe4V1akmcTM6iZwSS/cL8jdi6dFt4BoLXDOxgL5tEe/9yVBlQD+MAYvexBfw==",
+      "requires": {
+        "@types/react": "*"
       }
     },
     "@types/recompose": {
@@ -1651,6 +1850,15 @@
       "from": "github:coralproject/patched#types/relay-runtime",
       "dev": true
     },
+    "@types/sane": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/sane/-/sane-2.0.0.tgz",
+      "integrity": "sha512-6o/YMfcKcWIK5IAxeo/1DEoVnGKBkPSPj9odxczz2i1gFY78GvguqgtNo28nyKgJUiKEWuFj11acpgdRmRFz7A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/serve-static": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.2.tgz",
@@ -1661,6 +1869,18 @@
         "@types/mime": "*"
       }
     },
+    "@types/sinon": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-5.0.1.tgz",
+      "integrity": "sha512-yxzBCIjE3lp9lYjfBbIK/LRCoXgCLLbIIBIje7eNCcUIIR2CZZtyX5uto2hVoMSMqLrsRrT6mwwUEd0yFgOwpA==",
+      "dev": true
+    },
+    "@types/tough-cookie": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-2.3.3.tgz",
+      "integrity": "sha512-MDQLxNFRLasqS4UlkWMSACMKeSm1x4Q3TxzUC7KQUsh6RK1ZrQ0VEyE3yzXcBu+K8ejVj4wuX32eUG02yNp+YQ==",
+      "dev": true
+    },
     "@types/uuid": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-3.4.3.tgz",
@@ -1931,15 +2151,59 @@
         "long": "^3.2.0"
       }
     },
+    "@webpack-contrib/cli-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-contrib/cli-utils/-/cli-utils-1.0.2.tgz",
+      "integrity": "sha512-ZuV0pTi7x0Xd8MVZPIcDXbu7pg5+sNdrkdpmiW8mVto8+ru2+E0n8Opx36UxlDchBSiI6HouvaYcxmGOIS5yQA==",
+      "dev": true,
+      "requires": {
+        "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
+        "camelize": "^1.0.0",
+        "chalk": "^2.4.1",
+        "decamelize": "^2.0.0",
+        "loader-utils": "^1.1.0",
+        "meant": "^1.0.1",
+        "strip-ansi": "^4.0.0",
+        "text-table": "^0.2.0",
+        "webpack-log": "^1.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "decamelize": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
+          "dev": true,
+          "requires": {
+            "xregexp": "4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "@webpack-contrib/config-loader": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@webpack-contrib/config-loader/-/config-loader-1.1.3.tgz",
-      "integrity": "sha512-lOliuisjrh24MfhOYE5ljqyFlKfzyWGFrn3bbR0KlXQHY90j3pXWfFtEl4gNvqz69tJsM+1s7PUGJrK9CF46ng==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@webpack-contrib/config-loader/-/config-loader-1.2.1.tgz",
+      "integrity": "sha512-C7XsS6bXft0aRlyt7YCLg+fm97Mb3tWd+i5fVVlEl0NW5HKy8LoXVKj3mB7ECcEHNEEdHhgzg8gxP+Or8cMj8Q==",
       "dev": true,
       "requires": {
         "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
         "chalk": "^2.1.0",
         "cosmiconfig": "^5.0.2",
+        "is-plain-obj": "^1.1.0",
         "loud-rejection": "^1.6.0",
         "merge-options": "^1.0.1",
         "minimist": "^1.2.0",
@@ -2162,19 +2426,19 @@
       }
     },
     "apollo-link": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.1.tgz",
-      "integrity": "sha512-6Ghf+j3cQLCIvjXd2dJrLw+16HZbWbwmB1qlTc41BviB2hv+rK1nJr17Y9dWK0UD4p3i9Hfddx3tthpMKrueHg==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.2.tgz",
+      "integrity": "sha512-Uk/BC09dm61DZRDSu52nGq0nFhq7mcBPTjy5EEH1eunJndtCaNXQhQz/BjkI2NdrfGI+B+i5he6YSoRBhYizdw==",
       "requires": {
-        "@types/node": "^9.4.6",
+        "@types/graphql": "0.12.6",
         "apollo-utilities": "^1.0.0",
-        "zen-observable-ts": "^0.8.6"
+        "zen-observable-ts": "^0.8.9"
       },
       "dependencies": {
-        "@types/node": {
-          "version": "9.6.22",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.22.tgz",
-          "integrity": "sha512-RIg9EkxzVMkNH0M4sLRngK23f5QiigJC0iODQmu4nopzstt8AjegYund3r82iMrd2BNCjcZVnklaItvKHaGfBA=="
+        "@types/graphql": {
+          "version": "0.12.6",
+          "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.12.6.tgz",
+          "integrity": "sha512-wXAVyLfkG1UMkKOdMijVWFky39+OD/41KftzqfX1Oejd0Gm6dOIKjCihSVECg6X7PHjftxXmfOKA/d1H79ZfvQ=="
         }
       }
     },
@@ -2422,9 +2686,9 @@
       "dev": true
     },
     "ast-types": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.10.1.tgz",
-      "integrity": "sha512-UY7+9DPzlJ9VM8eY0b2TUZcZvF+1pO0hzMtAyjBYKhOmnvRlqYNYnWdtsMj0V16CGaMlpL0G1jnLbLo4AyotuQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.11.5.tgz",
+      "integrity": "sha512-oJjo+5e7/vEc2FBK8gUalV0pba4L3VdBIs2EKhOLHLcOd2FgQIVQN9xb0eZ9IjEWyAL7vq6fGJxOvVvdCHNyMw==",
       "dev": true
     },
     "astral-regex": {
@@ -2466,17 +2730,25 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "8.6.4",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.4.tgz",
-      "integrity": "sha512-9D0OoxWCqq9Okp9wD+igaCf6ZaNjYNFSCKxgMLAxAGqXwpapaZ+D0PBv265VHQLgam8a7gld4E6KgJJM6SKfQQ==",
+      "version": "8.6.5",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.5.tgz",
+      "integrity": "sha512-PLWJN3Xo/rycNkx+mp8iBDMTm3FeWe4VmYaZDSqL5QQB9sLsQkG5k8n+LNDFnhh9kdq2K+egL/icpctOmDHwig==",
       "dev": true,
       "requires": {
         "browserslist": "^3.2.8",
-        "caniuse-lite": "^1.0.30000859",
+        "caniuse-lite": "^1.0.30000864",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
         "postcss": "^6.0.23",
         "postcss-value-parser": "^3.2.3"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30000865",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
+          "integrity": "sha512-vs79o1mOSKRGv/1pSkp4EXgl4ZviWeYReXw60XfacPU64uQWZwJT6vZNmxRF9O+6zu71sJwMxLK5JXxbzuVrLw==",
+          "dev": true
+        }
       }
     },
     "aws-sign2": {
@@ -2524,45 +2796,10 @@
       }
     },
     "babel-core": {
-      "version": "6.26.3",
-      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
-      "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
-      "dev": true,
-      "requires": {
-        "babel-code-frame": "^6.26.0",
-        "babel-generator": "^6.26.0",
-        "babel-helpers": "^6.24.1",
-        "babel-messages": "^6.23.0",
-        "babel-register": "^6.26.0",
-        "babel-runtime": "^6.26.0",
-        "babel-template": "^6.26.0",
-        "babel-traverse": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "convert-source-map": "^1.5.1",
-        "debug": "^2.6.9",
-        "json5": "^0.5.1",
-        "lodash": "^4.17.4",
-        "minimatch": "^3.0.4",
-        "path-is-absolute": "^1.0.1",
-        "private": "^0.1.8",
-        "slash": "^1.0.0",
-        "source-map": "^0.5.7"
-      },
-      "dependencies": {
-        "babylon": {
-          "version": "6.18.0",
-          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
-          "dev": true
-        },
-        "json5": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
-          "dev": true
-        }
-      }
+      "version": "7.0.0-bridge.0",
+      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
+      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
+      "dev": true
     },
     "babel-generator": {
       "version": "6.26.1",
@@ -2737,16 +2974,17 @@
       }
     },
     "babel-plugin-emotion": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.4.tgz",
-      "integrity": "sha1-pOVKgJf2ugbLvHqQY5J6+v6f5zo=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.6.tgz",
+      "integrity": "sha512-aCRXUPm2pwaUqUtpQ2Gzbn5EeOD2RyUDTQDJl5Yqwg1RLQPs3OvnB6Xt6GUrMomMISxuwFrxuWfBMajHv74UjQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "7.0.0-beta.40",
+        "@babel/helper-module-imports": "7.0.0-beta.51",
         "@emotion/babel-utils": "^0.6.4",
         "@emotion/hash": "^0.6.2",
         "@emotion/memoize": "^0.6.1",
         "@emotion/stylis": "^0.6.10",
+        "babel-core": "^6.26.3",
         "babel-plugin-macros": "^2.0.0",
         "babel-plugin-syntax-jsx": "^6.18.0",
         "convert-source-map": "^1.5.0",
@@ -2757,34 +2995,64 @@
       },
       "dependencies": {
         "@babel/helper-module-imports": {
-          "version": "7.0.0-beta.40",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.40.tgz",
-          "integrity": "sha512-QFOskAKWbqJSBbGIl/Y1igJI4mW0A+wD5NFqsgDJj85KSvj/dHM4wNGIeqCi85nN9aMa4DgTBBrzUK4zSMsN2Q==",
+          "version": "7.0.0-beta.51",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.51.tgz",
+          "integrity": "sha1-zgBCgEX7t9XrwOp7+DV4nxU2arI=",
           "dev": true,
           "requires": {
-            "@babel/types": "7.0.0-beta.40",
-            "lodash": "^4.2.0"
+            "@babel/types": "7.0.0-beta.51",
+            "lodash": "^4.17.5"
           }
         },
         "@babel/types": {
-          "version": "7.0.0-beta.40",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.40.tgz",
-          "integrity": "sha512-uXCGCzTgMZxcSUzutCPtZmXbVC+cvENgS2e0tRuhn+Y1hZnMb8IHP0Trq7Q2MB/eFmG5pKrAeTIUfQIe5kA4Tg==",
+          "version": "7.0.0-beta.51",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.51.tgz",
+          "integrity": "sha1-2AK3tUO1g2x3iqaReXq/APPZfqk=",
           "dev": true,
           "requires": {
             "esutils": "^2.0.2",
-            "lodash": "^4.2.0",
+            "lodash": "^4.17.5",
             "to-fast-properties": "^2.0.0"
           }
         },
-        "touch": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/touch/-/touch-1.0.0.tgz",
-          "integrity": "sha1-RJy+LbrlqMgDjjDXH6D/RklHxN4=",
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
           "dev": true,
           "requires": {
-            "nopt": "~1.0.10"
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
           }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
         }
       }
     },
@@ -4147,6 +4415,45 @@
         "source-map-support": "^0.4.15"
       },
       "dependencies": {
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
         "source-map-support": {
           "version": "0.4.18",
           "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
@@ -4330,9 +4637,9 @@
       "dev": true
     },
     "bcrypt-pbkdf": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
-      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
       "dev": true,
       "optional": true,
       "requires": {
@@ -4457,43 +4764,6 @@
         "string-width": "^2.0.0",
         "term-size": "^1.2.0",
         "widest-line": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "brace-expansion": {
@@ -4785,6 +5055,16 @@
         "unset-value": "^1.0.0"
       }
     },
+    "cache-content-type": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cache-content-type/-/cache-content-type-1.0.0.tgz",
+      "integrity": "sha512-cVbmz0rAnsK3jPcQAlK4IDUUPaYAe4yl7MAfiKftHAcrW/azF1yikn2wE/8VAcC3yWtXi3lvXwsF1akK27Vo7w==",
+      "dev": true,
+      "requires": {
+        "mime-types": "^2.1.18",
+        "ylru": "^1.2.0"
+      }
+    },
     "call-me-maybe": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
@@ -4823,6 +5103,12 @@
         "quick-lru": "^1.0.0"
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
+      "dev": true
+    },
     "caniuse-api": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
@@ -4970,6 +5256,54 @@
       "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=",
       "dev": true
     },
+    "cheerio": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
+      "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=",
+      "dev": true,
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.0",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash": "^4.15.0",
+        "parse5": "^3.0.1"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+          "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "1"
+          }
+        },
+        "htmlparser2": {
+          "version": "3.9.2",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",
+          "integrity": "sha1-G9+HrMoPP55T+k/M6w9LTLsAszg=",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "domhandler": "^2.3.0",
+            "domutils": "^1.5.1",
+            "entities": "^1.1.1",
+            "inherits": "^2.0.1",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "parse5": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+          "dev": true,
+          "requires": {
+            "@types/node": "*"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
@@ -5127,6 +5461,17 @@
         "execa": "^0.8.0"
       },
       "dependencies": {
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
         "execa": {
           "version": "0.8.0",
           "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
@@ -5140,19 +5485,6 @@
             "p-finally": "^1.0.0",
             "signal-exit": "^3.0.0",
             "strip-eof": "^1.0.0"
-          },
-          "dependencies": {
-            "cross-spawn": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-              "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-              "dev": true,
-              "requires": {
-                "lru-cache": "^4.0.1",
-                "shebang-command": "^1.2.0",
-                "which": "^1.2.9"
-              }
-            }
           }
         }
       }
@@ -5238,12 +5570,6 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
-    "clorox": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/clorox/-/clorox-1.0.3.tgz",
-      "integrity": "sha512-w3gKAUKMJYmmaJyc+p+iDrDtLvsFasrx/y6/zWo2U1TZfsz3y4Vl4T9PHCZrOwk1eMTOSRI6xHdpDR4PhTdy8Q==",
-      "dev": true
-    },
     "cluster-key-slot": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.0.12.tgz",
@@ -5484,9 +5810,9 @@
       "dev": true
     },
     "convict": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/convict/-/convict-4.3.0.tgz",
-      "integrity": "sha512-R13duHXr424EDWO1dg/r43G5KF8IlN8O1gHJ140v/R6Mi8CWMSruLgRTUk0n4C5SoyQB22DQ7LKl5Lhni9hQ7w==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/convict/-/convict-4.3.1.tgz",
+      "integrity": "sha512-BLgyHUJREKCHVZ8rbXKIuNTDX/Is2GB/HZyUqh1IwvV0EeYBWtX+54OCG8tkIiAxB2yKowdP19+RHY5kCQ/SOg==",
       "requires": {
         "depd": "1.1.2",
         "json5": "1.0.1",
@@ -5561,6 +5887,15 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "copy-to-clipboard": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz",
+      "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==",
+      "dev": true,
+      "requires": {
+        "toggle-selection": "^1.0.3"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.5.2.tgz",
@@ -5600,6 +5935,19 @@
         "require-from-string": "^2.0.1"
       }
     },
+    "cp-file": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cp-file/-/cp-file-6.0.0.tgz",
+      "integrity": "sha512-OtHMgPugkgwHlbph25wlMKd358lZNhX1Y2viUpPoFmlBPlEiPIRhztYWha11grbGPnlM+urp5saVmwsChCIOEg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^1.0.0",
+        "nested-error-stacks": "^2.0.0",
+        "pify": "^3.0.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "cpx": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/cpx/-/cpx-1.5.0.tgz",
@@ -5760,6 +6108,49 @@
         }
       }
     },
+    "cpy": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cpy/-/cpy-7.0.1.tgz",
+      "integrity": "sha512-Zo52tXKLJcgy/baacn6KaNoRAakkl2wb+R4u6qJ4wlD0uchncwRQcIk66PlGlkzuToCJO6A6PWX27Tdwc8LU2g==",
+      "dev": true,
+      "requires": {
+        "arrify": "^1.0.1",
+        "cp-file": "^6.0.0",
+        "globby": "^8.0.1",
+        "nested-error-stacks": "^2.0.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "globby": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
+          "integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "dir-glob": "^2.0.0",
+            "fast-glob": "^2.0.2",
+            "glob": "^7.1.2",
+            "ignore": "^3.3.5",
+            "pify": "^3.0.0",
+            "slash": "^1.0.0"
+          }
+        }
+      }
+    },
     "create-ecdh": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
@@ -5771,9 +6162,9 @@
       }
     },
     "create-emotion": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.4.tgz",
-      "integrity": "sha1-CkN59r8HCMVP4mv81ra9NZLozyM=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.6.tgz",
+      "integrity": "sha512-4g46va26lw6DPfKF7HeWY3OI/qoaNSwpvO+li8dMydZfC6f6+ZffwlYHeIyAhGR8Z8C8c0H9J1pJbQRtb9LScw==",
       "dev": true,
       "requires": {
         "@emotion/hash": "^0.6.2",
@@ -5786,9 +6177,9 @@
       }
     },
     "create-emotion-styled": {
-      "version": "9.2.3",
-      "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.2.3.tgz",
-      "integrity": "sha1-F/sTs65MFl6m5aETVquLnKHa2cU=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.2.6.tgz",
+      "integrity": "sha512-Kk6qWuEiHY9iptLsxzoJztHM237yedoY2Zhmc79HwkRkC+wZ7W8IFt5gP6AAGx6eN44hc3Zwc+WA5N7ku3QJfg==",
       "dev": true,
       "requires": {
         "@emotion/is-prop-valid": "^0.6.1"
@@ -5830,6 +6221,16 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+      "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+      "dev": true,
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-fetch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-2.0.0.tgz",
@@ -5955,6 +6356,12 @@
         }
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=",
+      "dev": true
+    },
     "css-modules-loader-core": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
@@ -6091,9 +6498,9 @@
       "dev": true
     },
     "cssdb": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-1.6.0.tgz",
-      "integrity": "sha512-KBxrzWDyY0aFA3DkAH0SDWhIKp1or83pBLqacXq4VWNrOCwf/G9An+VDXIW8qAGJz11o9nO8mQezq1ZJOdaF8A==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-3.1.0.tgz",
+      "integrity": "sha512-9+ASPG9O+d876YfZJjStXszOGn3EEOp5scMeCwZb/+TwTZfadQFshz/Vsh1vGET9HzaXvsfV+1O0ShFb52DddA==",
       "dev": true
     },
     "cssesc": {
@@ -6227,9 +6634,9 @@
       }
     },
     "cssom": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.2.tgz",
-      "integrity": "sha1-uANhcMefB6kP8vFuIihAJ6JDhIs=",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.4.tgz",
+      "integrity": "sha512-+7prCSORpXNeR4/fUP3rL+TzqtiFfhMvTd7uEqMdgPvLPt4+uzFUeufx5RHjGTACCargg/DiEt/moMQmvnfkog==",
       "dev": true
     },
     "cssstyle": {
@@ -6244,8 +6651,7 @@
     "csstype": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.5.tgz",
-      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==",
-      "dev": true
+      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -6611,6 +7017,12 @@
         "is-woff2": "^1.0.0"
       }
     },
+    "discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
+      "dev": true
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -6646,46 +7058,134 @@
       }
     },
     "docz": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/docz/-/docz-0.2.11.tgz",
-      "integrity": "sha1-JpQDcirdfoTG52+0o1G/QP6nZrU=",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/docz/-/docz-0.5.8.tgz",
+      "integrity": "sha1-lnwx+TjQ/Z8eMbp6TJVujF9HGpM=",
       "dev": true,
       "requires": {
-        "@mdx-js/tag": "^0.11.0",
+        "@mdx-js/tag": "^0.13.1-1",
         "@sindresorhus/slugify": "^0.3.0",
+        "create-react-context": "^0.2.2",
         "deepmerge": "^2.1.1",
-        "docz-core": "^0.2.11",
-        "docz-theme-default": "^0.2.11",
+        "docz-core": "^0.5.7",
+        "docz-theme-default": "^0.5.8",
         "invariant": "^2.2.4",
         "loadable-components": "^2.2.2",
         "pascalcase": "^0.1.1",
-        "react": "^16.4.1",
-        "react-dom": "^16.4.1",
+        "react": "^16.2.0",
+        "react-dom": "^16.2.0",
         "react-router-dom": "^4.3.1",
-        "yargs": "^11.0.0"
+        "react-router-hash-link": "^1.2.0",
+        "yargs": "^12.0.1"
+      },
+      "dependencies": {
+        "decamelize": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
+          "dev": true,
+          "requires": {
+            "xregexp": "4.0.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
+          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
+          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "12.0.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.1.tgz",
+          "integrity": "sha512-B0vRAp1hRX4jgIOWFtjfNjd9OA9RWYZ6tqGA9/I/IrTMsxmKvtWy+ersM+jzpQqbC3YfLzeABPdeTgcJ9eu1qQ==",
+          "dev": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^2.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^10.1.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
+          "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^4.1.0"
+          }
+        }
       }
     },
     "docz-core": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/docz-core/-/docz-core-0.2.11.tgz",
-      "integrity": "sha1-53tAf2iKg1T/DHs2iPFJLHOVyfc=",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/docz-core/-/docz-core-0.5.7.tgz",
+      "integrity": "sha1-mXx8AXsEx6w3nEjgVvSGB6cpNII=",
       "dev": true,
       "requires": {
-        "@babel/core": "7.0.0-beta.51",
-        "@babel/preset-typescript": "^7.0.0-beta.51",
-        "@babel/runtime": "^7.0.0-beta.51",
-        "@mdx-js/loader": "^0.11.0",
-        "@mdx-js/mdx": "^0.10.1",
+        "@babel/core": "7.0.0-beta.52",
+        "@babel/preset-typescript": "^7.0.0-beta.52",
+        "@babel/runtime": "^7.0.0-beta.52",
+        "@mdx-js/loader": "^0.13.1-1",
+        "@mdx-js/mdx": "^0.13.1-1",
         "@mdx-js/mdxast": "^0.10.0",
         "@sindresorhus/slugify": "^0.3.0",
         "art-template": "^4.12.2",
-        "babel-loader": "^8.0.0-beta.3",
+        "babel-loader": "^8.0.0-beta.4",
         "babel-plugin-react-docgen": "^2.0.0-rc.1",
         "babel-polyfill": "^7.0.0-beta.3",
         "babel-preset-react-app": "^4.0.0-next.b2fd8db8",
+        "babel-traverse": "^6.26.0",
+        "babylon": "^6.18.0",
         "chalk": "^2.4.1",
         "chokidar": "^2.0.4",
         "connect-history-api-fallback": "^1.5.0",
+        "cpy": "^7.0.1",
         "deepmerge": "^2.1.1",
         "detect-port": "^1.2.3",
         "express": "^4.16.3",
@@ -6700,9 +7200,9 @@
         "koa-connect": "^2.0.1",
         "koa-mount": "^3.0.0",
         "koa-static": "^5.0.0",
-        "load-cfg": "^0.2.8",
+        "load-cfg": "^0.5.6",
         "lodash.get": "^4.4.2",
-        "prettier": "^1.13.5",
+        "prettier": "^1.13.7",
         "react-dev-utils": "^5.0.1",
         "react-docgen-typescript-loader": "^2.1.1",
         "react-hot-loader": "4.3.3",
@@ -6714,8 +7214,10 @@
         "remark-slug": "^5.0.0",
         "resolve": "^1.8.1",
         "signale": "^1.2.1",
+        "strip-indent": "^2.0.0",
+        "titleize": "^1.0.1",
         "to-vfile": "^5.0.0",
-        "uglifyjs-webpack-plugin": "^1.2.6",
+        "uglifyjs-webpack-plugin": "^1.2.7",
         "ulid": "^2.3.0",
         "unified": "^7.0.0",
         "unist-util-find": "^1.0.1",
@@ -6723,38 +7225,39 @@
         "unist-util-remove": "^1.0.1",
         "unist-util-visit": "^1.3.1",
         "url-loader": "^1.0.1",
-        "webpack": "^4.12.0",
+        "webpack": "^4.15.1",
         "webpack-chain": "^4.8.0",
-        "webpack-hot-client": "^4.0.3",
+        "webpack-hot-client": "^4.1.1",
         "webpack-manifest-plugin": "^2.0.3",
-        "webpack-serve": "^1.0.4",
+        "webpack-serve": "^2.0.2",
+        "webpack-serve-waitpage": "^1.0.0",
         "webpackbar": "^2.6.1",
-        "ws": "^5.2.0",
-        "yargs": "^11.0.0"
+        "ws": "^5.2.1",
+        "yargs": "^12.0.1"
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.51.tgz",
-          "integrity": "sha1-vXHZsZKvl435FYKdOdQJRFZDmgw=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.52.tgz",
+          "integrity": "sha1-GSSDv6DR5GfBAVccIQKcy3SvKAE=",
           "dev": true,
           "requires": {
-            "@babel/highlight": "7.0.0-beta.51"
+            "@babel/highlight": "7.0.0-beta.52"
           }
         },
         "@babel/core": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.0.0-beta.51.tgz",
-          "integrity": "sha1-DlS9a2OHNrKuWTwxpH8JaeKyuW0=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.0.0-beta.52.tgz",
+          "integrity": "sha1-8nqaRo+M+chgqryl9ghPpS+8blU=",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "7.0.0-beta.51",
-            "@babel/generator": "7.0.0-beta.51",
-            "@babel/helpers": "7.0.0-beta.51",
-            "@babel/parser": "7.0.0-beta.51",
-            "@babel/template": "7.0.0-beta.51",
-            "@babel/traverse": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51",
+            "@babel/code-frame": "7.0.0-beta.52",
+            "@babel/generator": "7.0.0-beta.52",
+            "@babel/helpers": "7.0.0-beta.52",
+            "@babel/parser": "7.0.0-beta.52",
+            "@babel/template": "7.0.0-beta.52",
+            "@babel/traverse": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52",
             "convert-source-map": "^1.1.0",
             "debug": "^3.1.0",
             "json5": "^0.5.0",
@@ -6766,12 +7269,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.51.tgz",
-          "integrity": "sha1-bHV1/952HQdIXgS67cA5LG2eMPY=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.52.tgz",
+          "integrity": "sha1-JpaPEvrYGM2XTISbKGtDfh6MzZE=",
           "dev": true,
           "requires": {
-            "@babel/types": "7.0.0-beta.51",
+            "@babel/types": "7.0.0-beta.52",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.5",
             "source-map": "^0.5.0",
@@ -6779,49 +7282,49 @@
           }
         },
         "@babel/helper-function-name": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.51.tgz",
-          "integrity": "sha1-IbSHSiJ8+Z7K/MMKkDAtpaJkBWE=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.52.tgz",
+          "integrity": "sha1-qGelj/VxsldysteZsyhmBYVzxFA=",
           "dev": true,
           "requires": {
-            "@babel/helper-get-function-arity": "7.0.0-beta.51",
-            "@babel/template": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51"
+            "@babel/helper-get-function-arity": "7.0.0-beta.52",
+            "@babel/template": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52"
           }
         },
         "@babel/helper-get-function-arity": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.51.tgz",
-          "integrity": "sha1-MoGy0EWvlcFyzpGyCCXYXqRnZBE=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.52.tgz",
+          "integrity": "sha1-HAzaWOC3X0XpLq+9j+GJpO7pK3Q=",
           "dev": true,
           "requires": {
-            "@babel/types": "7.0.0-beta.51"
+            "@babel/types": "7.0.0-beta.52"
           }
         },
         "@babel/helper-split-export-declaration": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.51.tgz",
-          "integrity": "sha1-imw/ZsTSZTUvwHdIT59ugKUauXg=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.52.tgz",
+          "integrity": "sha1-SqxPMOpjhK82duBLUkZydjLkYN8=",
           "dev": true,
           "requires": {
-            "@babel/types": "7.0.0-beta.51"
+            "@babel/types": "7.0.0-beta.52"
           }
         },
         "@babel/helpers": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.0.0-beta.51.tgz",
-          "integrity": "sha1-lScr4qtGNNaCBCX4klAxqSiRg5c=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.0.0-beta.52.tgz",
+          "integrity": "sha1-ib7r5OT9ayL111QHFgJ2KUCMSmM=",
           "dev": true,
           "requires": {
-            "@babel/template": "7.0.0-beta.51",
-            "@babel/traverse": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51"
+            "@babel/template": "7.0.0-beta.52",
+            "@babel/traverse": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52"
           }
         },
         "@babel/highlight": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.51.tgz",
-          "integrity": "sha1-6IRK4loVlcz9QriWI7Q3bKBtIl0=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.52.tgz",
+          "integrity": "sha1-7ySTFDLwYVXnvDnNuKaze0oos9A=",
           "dev": true,
           "requires": {
             "chalk": "^2.0.0",
@@ -6830,35 +7333,35 @@
           }
         },
         "@babel/parser": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.51.tgz",
-          "integrity": "sha1-J87C30Cd9gr1gnDtj2qlVAnqhvY=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.52.tgz",
+          "integrity": "sha1-TpNbYs2b+HK9N7zx9j2C/nsCN6I=",
           "dev": true
         },
         "@babel/template": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.51.tgz",
-          "integrity": "sha1-lgKkCuvPNXrpZ34lMu9fyBD1+/8=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.52.tgz",
+          "integrity": "sha1-ROGPrDglH1f5JRHWdI8JWrAvmW4=",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "7.0.0-beta.51",
-            "@babel/parser": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51",
+            "@babel/code-frame": "7.0.0-beta.52",
+            "@babel/parser": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52",
             "lodash": "^4.17.5"
           }
         },
         "@babel/traverse": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.51.tgz",
-          "integrity": "sha1-mB2vLOw0emIx06odnhgDsDqqpKg=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.52.tgz",
+          "integrity": "sha1-m4uplPcmTZhHhYrS/uzCc4xeLvM=",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "7.0.0-beta.51",
-            "@babel/generator": "7.0.0-beta.51",
-            "@babel/helper-function-name": "7.0.0-beta.51",
-            "@babel/helper-split-export-declaration": "7.0.0-beta.51",
-            "@babel/parser": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51",
+            "@babel/code-frame": "7.0.0-beta.52",
+            "@babel/generator": "7.0.0-beta.52",
+            "@babel/helper-function-name": "7.0.0-beta.52",
+            "@babel/helper-split-export-declaration": "7.0.0-beta.52",
+            "@babel/parser": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52",
             "debug": "^3.1.0",
             "globals": "^11.1.0",
             "invariant": "^2.2.0",
@@ -6866,9 +7369,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.51.tgz",
-          "integrity": "sha1-2AK3tUO1g2x3iqaReXq/APPZfqk=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.52.tgz",
+          "integrity": "sha1-o+ViCxU0slOlCrzyIitSDiOxbaI=",
           "dev": true,
           "requires": {
             "esutils": "^2.0.2",
@@ -6876,25 +7379,214 @@
             "to-fast-properties": "^2.0.0"
           }
         },
-        "chokidar": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
-          "integrity": "sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==",
+        "@webassemblyjs/ast": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.5.13.tgz",
+          "integrity": "sha512-49nwvW/Hx9i+OYHg+mRhKZfAlqThr11Dqz8TsrvqGKMhdI2ijy3KBJOun2Z4770TPjrIJhR6KxChQIDaz8clDA==",
           "dev": true,
           "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.0",
-            "braces": "^2.3.0",
-            "fsevents": "^1.2.2",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.1",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "lodash.debounce": "^4.0.8",
-            "normalize-path": "^2.1.1",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.0.0",
-            "upath": "^1.0.5"
+            "@webassemblyjs/helper-module-context": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/wast-parser": "1.5.13",
+            "debug": "^3.1.0",
+            "mamacro": "^0.0.3"
+          }
+        },
+        "@webassemblyjs/floating-point-hex-parser": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.5.13.tgz",
+          "integrity": "sha512-vrvvB18Kh4uyghSKb0NTv+2WZx871WL2NzwMj61jcq2bXkyhRC+8Q0oD7JGVf0+5i/fKQYQSBCNMMsDMRVAMqA==",
+          "dev": true
+        },
+        "@webassemblyjs/helper-api-error": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.5.13.tgz",
+          "integrity": "sha512-dBh2CWYqjaDlvMmRP/kudxpdh30uXjIbpkLj9HQe+qtYlwvYjPRjdQXrq1cTAAOUSMTtzqbXIxEdEZmyKfcwsg==",
+          "dev": true
+        },
+        "@webassemblyjs/helper-buffer": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.5.13.tgz",
+          "integrity": "sha512-v7igWf1mHcpJNbn4m7e77XOAWXCDT76Xe7Is1VQFXc4K5jRcFrl9D0NrqM4XifQ0bXiuTSkTKMYqDxu5MhNljA==",
+          "dev": true,
+          "requires": {
+            "debug": "^3.1.0"
+          }
+        },
+        "@webassemblyjs/helper-code-frame": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.5.13.tgz",
+          "integrity": "sha512-yN6ScQQDFCiAXnVctdVO/J5NQRbwyTbQzsGzEgXsAnrxhjp0xihh+nNHQTMrq5UhOqTb5LykpJAvEv9AT0jnAQ==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/wast-printer": "1.5.13"
+          }
+        },
+        "@webassemblyjs/helper-fsm": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.5.13.tgz",
+          "integrity": "sha512-hSIKzbXjVMRvy3Jzhgu+vDd/aswJ+UMEnLRCkZDdknZO3Z9e6rp1DAs0tdLItjCFqkz9+0BeOPK/mk3eYvVzZg==",
+          "dev": true
+        },
+        "@webassemblyjs/helper-module-context": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.5.13.tgz",
+          "integrity": "sha512-zxJXULGPLB7r+k+wIlvGlXpT4CYppRz8fLUM/xobGHc9Z3T6qlmJD9ySJ2jknuktuuiR9AjnNpKYDECyaiX+QQ==",
+          "dev": true,
+          "requires": {
+            "debug": "^3.1.0",
+            "mamacro": "^0.0.3"
+          }
+        },
+        "@webassemblyjs/helper-wasm-bytecode": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.5.13.tgz",
+          "integrity": "sha512-0n3SoNGLvbJIZPhtMFq0XmmnA/YmQBXaZKQZcW8maGKwLpVcgjNrxpFZHEOLKjXJYVN5Il8vSfG7nRX50Zn+aw==",
+          "dev": true
+        },
+        "@webassemblyjs/helper-wasm-section": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.5.13.tgz",
+          "integrity": "sha512-IJ/goicOZ5TT1axZFSnlAtz4m8KEjYr12BNOANAwGFPKXM4byEDaMNXYowHMG0yKV9a397eU/NlibFaLwr1fbw==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-buffer": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/wasm-gen": "1.5.13",
+            "debug": "^3.1.0"
+          }
+        },
+        "@webassemblyjs/ieee754": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.5.13.tgz",
+          "integrity": "sha512-TseswvXEPpG5TCBKoLx9tT7+/GMACjC1ruo09j46ULRZWYm8XHpDWaosOjTnI7kr4SRJFzA6MWoUkAB+YCGKKg==",
+          "dev": true,
+          "requires": {
+            "ieee754": "^1.1.11"
+          }
+        },
+        "@webassemblyjs/leb128": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.5.13.tgz",
+          "integrity": "sha512-0NRMxrL+GG3eISGZBmLBLAVjphbN8Si15s7jzThaw1UE9e5BY1oH49/+MA1xBzxpf1OW5sf9OrPDOclk9wj2yg==",
+          "dev": true,
+          "requires": {
+            "long": "4.0.0"
+          },
+          "dependencies": {
+            "long": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+              "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==",
+              "dev": true
+            }
+          }
+        },
+        "@webassemblyjs/utf8": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.5.13.tgz",
+          "integrity": "sha512-Ve1ilU2N48Ew0lVGB8FqY7V7hXjaC4+PeZM+vDYxEd+R2iQ0q+Wb3Rw8v0Ri0+rxhoz6gVGsnQNb4FjRiEH/Ng==",
+          "dev": true
+        },
+        "@webassemblyjs/wasm-edit": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.5.13.tgz",
+          "integrity": "sha512-X7ZNW4+Hga4f2NmqENnHke2V/mGYK/xnybJSIXImt1ulxbCOEs/A+ZK/Km2jgihjyVxp/0z0hwIcxC6PrkWtgw==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-buffer": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/helper-wasm-section": "1.5.13",
+            "@webassemblyjs/wasm-gen": "1.5.13",
+            "@webassemblyjs/wasm-opt": "1.5.13",
+            "@webassemblyjs/wasm-parser": "1.5.13",
+            "@webassemblyjs/wast-printer": "1.5.13",
+            "debug": "^3.1.0"
+          }
+        },
+        "@webassemblyjs/wasm-gen": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.5.13.tgz",
+          "integrity": "sha512-yfv94Se8R73zmr8GAYzezFHc3lDwE/lBXQddSiIZEKZFuqy7yWtm3KMwA1uGbv5G1WphimJxboXHR80IgX1hQA==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/ieee754": "1.5.13",
+            "@webassemblyjs/leb128": "1.5.13",
+            "@webassemblyjs/utf8": "1.5.13"
+          }
+        },
+        "@webassemblyjs/wasm-opt": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.5.13.tgz",
+          "integrity": "sha512-IkXSkgzVhQ0QYAdIayuCWMmXSYx0dHGU8Ah/AxJf1gBvstMWVnzJnBwLsXLyD87VSBIcsqkmZ28dVb0mOC3oBg==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-buffer": "1.5.13",
+            "@webassemblyjs/wasm-gen": "1.5.13",
+            "@webassemblyjs/wasm-parser": "1.5.13",
+            "debug": "^3.1.0"
+          }
+        },
+        "@webassemblyjs/wasm-parser": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.5.13.tgz",
+          "integrity": "sha512-XnYoIcu2iqq8/LrtmdnN3T+bRjqYFjRHqWbqK3osD/0r/Fcv4d9ecRzjVtC29ENEuNTK4mQ9yyxCBCbK8S/cpg==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-api-error": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/ieee754": "1.5.13",
+            "@webassemblyjs/leb128": "1.5.13",
+            "@webassemblyjs/utf8": "1.5.13"
+          }
+        },
+        "@webassemblyjs/wast-parser": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.5.13.tgz",
+          "integrity": "sha512-Lbz65T0LQ1LgzKiUytl34CwuhMNhaCLgrh0JW4rJBN6INnBB8NMwUfQM+FxTnLY9qJ+lHJL/gCM5xYhB9oWi4A==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/floating-point-hex-parser": "1.5.13",
+            "@webassemblyjs/helper-api-error": "1.5.13",
+            "@webassemblyjs/helper-code-frame": "1.5.13",
+            "@webassemblyjs/helper-fsm": "1.5.13",
+            "long": "^3.2.0",
+            "mamacro": "^0.0.3"
+          }
+        },
+        "@webassemblyjs/wast-printer": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.5.13.tgz",
+          "integrity": "sha512-QcwogrdqcBh8Z+eUF8SG+ag5iwQSXxQJELBEHmLkk790wgQgnIMmntT2sMAMw53GiFNckArf5X0bsCA44j3lWQ==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/wast-parser": "1.5.13",
+            "long": "^3.2.0"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
           }
         },
         "debug": {
@@ -6906,6 +7598,15 @@
             "ms": "2.0.0"
           }
         },
+        "decamelize": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
+          "dev": true,
+          "requires": {
+            "xregexp": "4.0.0"
+          }
+        },
         "detect-port-alt": {
           "version": "1.1.6",
           "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -6927,16 +7628,74 @@
             }
           }
         },
+        "enhanced-resolve": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
+          "integrity": "sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "memory-fs": "^0.4.0",
+            "tapable": "^1.0.0"
+          }
+        },
+        "eslint-scope": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz",
+          "integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
         "json5": {
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
           "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
           "dev": true
         },
-        "prettier": {
-          "version": "1.13.6",
-          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.6.tgz",
-          "integrity": "sha512-p5eqCNiohWZN++7aJXUVj0JgLqHCPLf9GLIcLBHGNWs4Y9FJOPs6+KNO2WT0udJIQJTbeZFrJkjzjcb8fkAYYQ==",
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
+          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
+          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
           "dev": true
         },
         "react-dev-utils": {
@@ -6977,41 +7736,96 @@
                 "strip-ansi": "^3.0.0",
                 "supports-color": "^2.0.0"
               }
-            },
-            "cross-spawn": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-              "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-              "dev": true,
-              "requires": {
-                "lru-cache": "^4.0.1",
-                "shebang-command": "^1.2.0",
-                "which": "^1.2.9"
-              }
             }
           }
+        },
+        "webpack": {
+          "version": "4.16.1",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.1.tgz",
+          "integrity": "sha512-6jpzObU18y7lXDJz7XCLvzgrqcJ0rZ2jhKvnTivza9gM2GvPW93xxtmEll2GgmdC0zVQAtbHrH/9BtyMjSDZfA==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-module-context": "1.5.13",
+            "@webassemblyjs/wasm-edit": "1.5.13",
+            "@webassemblyjs/wasm-opt": "1.5.13",
+            "@webassemblyjs/wasm-parser": "1.5.13",
+            "acorn": "^5.6.2",
+            "acorn-dynamic-import": "^3.0.0",
+            "ajv": "^6.1.0",
+            "ajv-keywords": "^3.1.0",
+            "chrome-trace-event": "^1.0.0",
+            "enhanced-resolve": "^4.1.0",
+            "eslint-scope": "^4.0.0",
+            "json-parse-better-errors": "^1.0.2",
+            "loader-runner": "^2.3.0",
+            "loader-utils": "^1.1.0",
+            "memory-fs": "~0.4.1",
+            "micromatch": "^3.1.8",
+            "mkdirp": "~0.5.0",
+            "neo-async": "^2.5.0",
+            "node-libs-browser": "^2.0.0",
+            "schema-utils": "^0.4.4",
+            "tapable": "^1.0.0",
+            "uglifyjs-webpack-plugin": "^1.2.4",
+            "watchpack": "^1.5.0",
+            "webpack-sources": "^1.0.1"
+          }
+        },
+        "yargs": {
+          "version": "12.0.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.1.tgz",
+          "integrity": "sha512-B0vRAp1hRX4jgIOWFtjfNjd9OA9RWYZ6tqGA9/I/IrTMsxmKvtWy+ersM+jzpQqbC3YfLzeABPdeTgcJ9eu1qQ==",
+          "dev": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^2.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^10.1.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
+          "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^4.1.0"
+          }
         }
       }
     },
     "docz-theme-default": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/docz-theme-default/-/docz-theme-default-0.2.11.tgz",
-      "integrity": "sha1-fMKeebffxnqPyQpkWfNkaeJ0BH8=",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/docz-theme-default/-/docz-theme-default-0.5.8.tgz",
+      "integrity": "sha1-brlkb7d7v8eY4s3lO2ubY+aZjME=",
       "dev": true,
       "requires": {
-        "docz": "^0.2.11",
-        "emotion": "^9.2.3",
-        "emotion-theming": "^9.2.3",
+        "docz": "^0.5.8",
+        "emotion": "^9.2.5",
+        "emotion-theming": "^9.2.5",
+        "facepaint": "^1.2.1",
         "fast-deep-equal": "^2.0.1",
+        "fuse.js": "^3.2.1",
         "prismjs": "^1.15.0",
         "prop-types": "15.6.2",
-        "react": "^16.4.1",
-        "react-dom": "^16.4.1",
-        "react-emotion": "^9.2.3",
-        "react-feather": "^1.1.0",
+        "react": "^16.2.0",
+        "react-adopt": "^0.6.0",
+        "react-breakpoints": "^3.0.0",
+        "react-content-loader": "^3.1.2",
+        "react-dom": "^16.2.0",
+        "react-emotion": "^9.2.5",
+        "react-feather": "^1.1.1",
         "react-lightweight-tooltip": "^1.0.0",
-        "react-powerplug": "^0.1.6",
-        "react-spinners": "^0.3.2",
+        "react-powerplug": "^1.0.0-rc.1",
         "webfontloader": "^1.6.28"
       }
     },
@@ -7168,6 +7982,12 @@
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
+    "ejs": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz",
+      "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==",
+      "dev": true
+    },
     "electron-to-chromium": {
       "version": "1.3.50",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.50.tgz",
@@ -7202,19 +8022,19 @@
       "dev": true
     },
     "emotion": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.4.tgz",
-      "integrity": "sha1-ATnnzBVLKEX0ua+qmW3U3hO7kOM=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.6.tgz",
+      "integrity": "sha512-95/EiWkADklxyy1y1qlJeX5Cepa7WfpJBJSBgbLkDCBzOnP4maluvz52xcV5UaObBTfVnEBq77Go6/bgF7+xaA==",
       "dev": true,
       "requires": {
-        "babel-plugin-emotion": "^9.2.4",
-        "create-emotion": "^9.2.4"
+        "babel-plugin-emotion": "^9.2.6",
+        "create-emotion": "^9.2.6"
       }
     },
     "emotion-theming": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-9.2.4.tgz",
-      "integrity": "sha1-l1g3hh7yAocEoBSmDGTr+r1DJ1U=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-9.2.6.tgz",
+      "integrity": "sha512-sbZStubPmaDuMhs3+saH4XegnoMgbVtEY2giD1MP+maDinCnJdzf/1Apcip1wo5HMAN7vrjvpmcY13pH34xR6g==",
       "dev": true,
       "requires": {
         "hoist-non-react-statics": "^2.3.1"
@@ -7260,6 +8080,65 @@
       "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
       "dev": true
     },
+    "enzyme": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.3.0.tgz",
+      "integrity": "sha512-l8csyPyLmtxskTz6pX9W8eDOyH1ckEtDttXk/vlFWCjv00SkjTjtoUrogqp4yEvMyneU9dUJoOLnqFoiHb8IHA==",
+      "dev": true,
+      "requires": {
+        "cheerio": "^1.0.0-rc.2",
+        "function.prototype.name": "^1.0.3",
+        "has": "^1.0.1",
+        "is-boolean-object": "^1.0.0",
+        "is-callable": "^1.1.3",
+        "is-number-object": "^1.0.3",
+        "is-string": "^1.0.4",
+        "is-subset": "^0.1.1",
+        "lodash": "^4.17.4",
+        "object-inspect": "^1.5.0",
+        "object-is": "^1.0.1",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.0.4",
+        "object.values": "^1.0.4",
+        "raf": "^3.4.0",
+        "rst-selector-parser": "^2.2.3"
+      }
+    },
+    "enzyme-adapter-react-16": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz",
+      "integrity": "sha512-kC8pAtU2Jk3OJ0EG8Y2813dg9Ol0TXi7UNxHzHiWs30Jo/hj7alc//G1YpKUsPP1oKl9X+Lkx+WlGJpPYA+nvw==",
+      "dev": true,
+      "requires": {
+        "enzyme-adapter-utils": "^1.3.0",
+        "lodash": "^4.17.4",
+        "object.assign": "^4.0.4",
+        "object.values": "^1.0.4",
+        "prop-types": "^15.6.0",
+        "react-reconciler": "^0.7.0",
+        "react-test-renderer": "^16.0.0-0"
+      }
+    },
+    "enzyme-adapter-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.3.0.tgz",
+      "integrity": "sha512-vVXSt6uDv230DIv+ebCG66T1Pm36Kv+m74L1TrF4kaE7e1V7Q/LcxO0QRkajk5cA6R3uu9wJf5h13wOTezTbjA==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.4",
+        "object.assign": "^4.0.4",
+        "prop-types": "^15.6.0"
+      }
+    },
+    "enzyme-to-json": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.4.tgz",
+      "integrity": "sha1-Z8YEDpMRgvGDQYry659DIyWKp38=",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.4"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -7415,9 +8294,9 @@
       }
     },
     "esm": {
-      "version": "3.0.55",
-      "resolved": "https://registry.npmjs.org/esm/-/esm-3.0.55.tgz",
-      "integrity": "sha512-YmOhwp5znUfxH5UCfAjXg3CP5ihWa5QgG24gS0GON4DI/B+fkYTK/t7WTpMwPMqJLzPTRUKcQJ31MtRgkHPXcg==",
+      "version": "3.0.71",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.0.71.tgz",
+      "integrity": "sha512-RAgyznLvtK17ld4IQBp+wEsVp3JAHb9Nnbu5fGevnFpKeKVPuh/WexdqUuanhez5s9NJD2+iEtM8LfFu0jL8Rw==",
       "dev": true
     },
     "esprima": {
@@ -7635,17 +8514,17 @@
       }
     },
     "expect": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-23.2.0.tgz",
-      "integrity": "sha1-U6fhNeNv4n51hnsReP8IqqzCsN0=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-23.3.0.tgz",
+      "integrity": "sha1-7LBRrcvcQKxNtXbBYGfxL9sTzGE=",
       "dev": true,
       "requires": {
         "ansi-styles": "^3.2.0",
         "jest-diff": "^23.2.0",
         "jest-get-type": "^22.1.0",
         "jest-matcher-utils": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-regex-util": "^23.0.0"
+        "jest-message-util": "^23.3.0",
+        "jest-regex-util": "^23.3.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -7825,6 +8704,12 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
+    "facepaint": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/facepaint/-/facepaint-1.2.1.tgz",
+      "integrity": "sha512-oNvBekbhsm/0PNSOWca5raHNAi6dG960Bx6LJgxDPNF59WpuspgQ17bN5MKwOr7JcFdQYc7StW3VZ28DBZLavQ==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
@@ -8069,12 +8954,20 @@
       }
     },
     "flat": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/flat/-/flat-4.0.0.tgz",
-      "integrity": "sha512-ji/WMv2jdsE+LaznpkIF9Haax0sdpTBozrz/Dtg4qSRMfbs8oVg4ypJunIRYPiMLvH/ed6OflXbnbTIKJhtgeg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.0.tgz",
+      "integrity": "sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==",
       "dev": true,
       "requires": {
-        "is-buffer": "~1.1.5"
+        "is-buffer": "~2.0.3"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==",
+          "dev": true
+        }
       }
     },
     "flatten": {
@@ -8101,6 +8994,13 @@
       "dev": true,
       "requires": {
         "intl-pluralrules": "github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b"
+      },
+      "dependencies": {
+        "intl-pluralrules": {
+          "version": "github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b",
+          "from": "github:projectfluent/IntlPluralRules#module",
+          "dev": true
+        }
       }
     },
     "fluent-langneg": {
@@ -8295,24 +9195,28 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8322,12 +9226,14 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
           "requires": {
             "balanced-match": "^1.0.0",
@@ -8336,34 +9242,40 @@
         },
         "chownr": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
           "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true,
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8372,25 +9284,29 @@
         },
         "deep-extend": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==",
           "dev": true,
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "dev": true,
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8399,13 +9315,15 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "dev": true,
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8421,7 +9339,8 @@
         },
         "glob": {
           "version": "7.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8435,13 +9354,15 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.21",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8450,7 +9371,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8459,7 +9381,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8469,18 +9392,21 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "dev": true
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -8488,13 +9414,15 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -8502,12 +9430,14 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "minipass": {
           "version": "2.2.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
           "requires": {
             "safe-buffer": "^5.1.1",
@@ -8516,7 +9446,8 @@
         },
         "minizlib": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8525,7 +9456,8 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
             "minimist": "0.0.8"
@@ -8533,13 +9465,15 @@
         },
         "ms": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true,
           "optional": true
         },
         "needle": {
           "version": "2.2.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8550,7 +9484,8 @@
         },
         "node-pre-gyp": {
           "version": "0.10.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8568,7 +9503,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8578,13 +9514,15 @@
         },
         "npm-bundled": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
           "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.1.10",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8594,7 +9532,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8606,18 +9545,21 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
           "requires": {
             "wrappy": "1"
@@ -8625,19 +9567,22 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8647,19 +9592,22 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.7",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8671,7 +9619,8 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "dev": true,
               "optional": true
             }
@@ -8679,7 +9628,8 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8694,7 +9644,8 @@
         },
         "rimraf": {
           "version": "2.6.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8703,42 +9654,49 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
           "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.5.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
             "code-point-at": "^1.0.0",
@@ -8748,7 +9706,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8757,7 +9716,8 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -8765,13 +9725,15 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "dev": true,
           "optional": true
         },
         "tar": {
           "version": "4.4.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8786,13 +9748,15 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8801,12 +9765,14 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "dev": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
           "dev": true
         }
       }
@@ -8817,6 +9783,23 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "function.prototype.name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.0.tgz",
+      "integrity": "sha512-Bs0VRrTz4ghD8pTmbJQD1mZ8A/mN0ur/jGz+A6FBxPDUPkm1tNfF6bhTYPA7i7aF4lZJVr+OXTNNrnnIl58Wfg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "function-bind": "^1.1.1",
+        "is-callable": "^1.1.3"
+      }
+    },
+    "fuse.js": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.2.1.tgz",
+      "integrity": "sha1-YyDLlM5W7JdVyJred1vNuwNY1CU=",
+      "dev": true
+    },
     "get-caller-file": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
@@ -9167,9 +10150,9 @@
       }
     },
     "graphql-playground-middleware-express": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.7.0.tgz",
-      "integrity": "sha512-t5MxpVvAyZBGEGUv+p/GZgh10oEBhGH5pNtJlpLNc448wX2718fwWMJSfGhQkXlSm+nst4tdLoYu5TI1/HpGAQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.7.2.tgz",
+      "integrity": "sha512-JvKsVOR/U5QguBtEvTt0ozQ49uh1C6cW8O1xR6krQpJZIxjLYqpgusLUddTiVkka6Q/A4/AXBohY85jPudxYDg==",
       "dev": true,
       "requires": {
         "graphql-playground-html": "1.6.0"
@@ -9202,11 +10185,11 @@
       }
     },
     "graphql-tools": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/graphql-tools/-/graphql-tools-3.0.2.tgz",
-      "integrity": "sha512-bhDGrvmSgcJBFX3EZEYagmKPk/EJ9vZIcF1WtSFveWfvSsh7crMFSQ9ldftuIXC9UeRwfutpGf3A1q4UpVLaRg==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/graphql-tools/-/graphql-tools-3.0.5.tgz",
+      "integrity": "sha512-MawfVPwaqy+L48IiP4QXHpFFOgCH+vWmB9oeU70lckac22nOpDLwbkKtddtdodoTHV54EKbkTpPdW6u6bcjjFA==",
       "requires": {
-        "apollo-link": "1.2.1",
+        "apollo-link": "1.2.2",
         "apollo-utilities": "^1.0.1",
         "deprecated-decorator": "^0.1.6",
         "iterall": "^1.1.3",
@@ -9219,6 +10202,12 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==",
+      "dev": true
+    },
     "gzip-size": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
@@ -9782,6 +10771,12 @@
         "decamelize": "^1.0.0"
       }
     },
+    "hyphenate-style-name": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es=",
+      "dev": true
+    },
     "iconv-lite": {
       "version": "0.4.19",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
@@ -9820,18 +10815,38 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
-    "ignore-by-default": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
-      "dev": true
-    },
     "immutable": {
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
       "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks=",
       "dev": true
     },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dev": true,
+      "requires": {
+        "import-from": "^2.1.0"
+      }
+    },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+          "dev": true
+        }
+      }
+    },
     "import-lazy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -10110,11 +11125,6 @@
       "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=",
       "dev": true
     },
-    "intl-pluralrules": {
-      "version": "github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b",
-      "from": "intl-pluralrules@github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b",
-      "dev": true
-    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -10228,6 +11238,12 @@
         "binary-extensions": "^1.0.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.0.0.tgz",
+      "integrity": "sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=",
+      "dev": true
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -10432,6 +11448,12 @@
         }
       }
     },
+    "is-number-object": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.3.tgz",
+      "integrity": "sha1-8mWrian0RQNO9q/xWo8AsA9VF5k=",
+      "dev": true
+    },
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
@@ -10554,6 +11576,18 @@
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
       "dev": true
     },
+    "is-string": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.4.tgz",
+      "integrity": "sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ=",
+      "dev": true
+    },
+    "is-subset": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
+      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=",
+      "dev": true
+    },
     "is-svg": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-2.1.0.tgz",
@@ -10841,13 +11875,13 @@
       "dev": true
     },
     "jest": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-23.2.0.tgz",
-      "integrity": "sha1-govzGgltRdzwaCTR6gMBOve8/CA=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-23.4.1.tgz",
+      "integrity": "sha512-HTOuA9epknN7RKdzhmp9qrbP0z3TibAMXI+sluLOcrEoF54ZCG8/urFB2DK/sOINcMeyX6epMUqka8i0+d0xOA==",
       "dev": true,
       "requires": {
         "import-local": "^1.0.0",
-        "jest-cli": "^23.2.0"
+        "jest-cli": "^23.4.1"
       },
       "dependencies": {
         "ansi-regex": {
@@ -10856,6 +11890,116 @@
           "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babel-jest": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-23.4.0.tgz",
+          "integrity": "sha1-IsNMOS4hdvakw2eZKn/P9p0uhVc=",
+          "dev": true,
+          "requires": {
+            "babel-plugin-istanbul": "^4.1.6",
+            "babel-preset-jest": "^23.2.0"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "expect": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-23.4.0.tgz",
+          "integrity": "sha1-baTsyZwUcSU+cogziYOtHrrbYMM=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "jest-diff": "^23.2.0",
+            "jest-get-type": "^22.1.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-regex-util": "^23.3.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@@ -10870,10 +12014,25 @@
             "path-is-absolute": "^1.0.0"
           }
         },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
         "jest-cli": {
-          "version": "23.2.0",
-          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-23.2.0.tgz",
-          "integrity": "sha1-O1Q6PaUUXdiTeTEBcoI3n8aWxFs=",
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-23.4.1.tgz",
+          "integrity": "sha512-Cmd7bex+kYmMGwGrIh/crwUieUFr+4PCTaK32tEA0dm0wklXV8zGgWh8n+8WbhsFPNzacolxdtcfBKIorcV5FQ==",
           "dev": true,
           "requires": {
             "ansi-escapes": "^3.0.0",
@@ -10887,22 +12046,22 @@
             "istanbul-lib-coverage": "^1.2.0",
             "istanbul-lib-instrument": "^1.10.1",
             "istanbul-lib-source-maps": "^1.2.4",
-            "jest-changed-files": "^23.2.0",
-            "jest-config": "^23.2.0",
-            "jest-environment-jsdom": "^23.2.0",
+            "jest-changed-files": "^23.4.0",
+            "jest-config": "^23.4.1",
+            "jest-environment-jsdom": "^23.4.0",
             "jest-get-type": "^22.1.0",
-            "jest-haste-map": "^23.2.0",
-            "jest-message-util": "^23.2.0",
-            "jest-regex-util": "^23.0.0",
-            "jest-resolve-dependencies": "^23.2.0",
-            "jest-runner": "^23.2.0",
-            "jest-runtime": "^23.2.0",
-            "jest-snapshot": "^23.2.0",
-            "jest-util": "^23.2.0",
-            "jest-validate": "^23.2.0",
-            "jest-watcher": "^23.2.0",
+            "jest-haste-map": "^23.4.1",
+            "jest-message-util": "^23.4.0",
+            "jest-regex-util": "^23.3.0",
+            "jest-resolve-dependencies": "^23.4.1",
+            "jest-runner": "^23.4.1",
+            "jest-runtime": "^23.4.1",
+            "jest-snapshot": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "jest-validate": "^23.4.0",
+            "jest-watcher": "^23.4.0",
             "jest-worker": "^23.2.0",
-            "micromatch": "^3.1.10",
+            "micromatch": "^2.3.11",
             "node-notifier": "^5.2.1",
             "prompts": "^0.1.9",
             "realpath-native": "^1.0.0",
@@ -10914,6 +12073,192 @@
             "yargs": "^11.0.0"
           }
         },
+        "jest-config": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.4.1.tgz",
+          "integrity": "sha512-OT29qlcw9Iw7u0PC04wD9tjLJL4vpGdMZrrHMFwYSO3HxOikbHywjmtQ7rntW4qvBcpbi7iCMTPPRmpDjImQEw==",
+          "dev": true,
+          "requires": {
+            "babel-core": "^6.0.0",
+            "babel-jest": "^23.4.0",
+            "chalk": "^2.0.1",
+            "glob": "^7.1.1",
+            "jest-environment-jsdom": "^23.4.0",
+            "jest-environment-node": "^23.4.0",
+            "jest-get-type": "^22.1.0",
+            "jest-jasmine2": "^23.4.1",
+            "jest-regex-util": "^23.3.0",
+            "jest-resolve": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "jest-validate": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-each": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-23.4.0.tgz",
+          "integrity": "sha1-L6nt2J2qGk7cn/m/YGKja3E0UUM=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-environment-jsdom": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz",
+          "integrity": "sha1-BWp5UrP+pROsYqFAosNox52eYCM=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0",
+            "jsdom": "^11.5.1"
+          }
+        },
+        "jest-environment-node": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.4.0.tgz",
+          "integrity": "sha1-V+gO0IQd6jAxZ8zozXlSHeuv3hA=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0"
+          }
+        },
+        "jest-jasmine2": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.4.1.tgz",
+          "integrity": "sha512-nHmRgTtM9fuaK3RBz2z4j9mYVEJwB7FdoflQSvrwHV8mCT5z4DeHoKCvPp2R27F8fZTYJUYVMb36xn+ydg0tfA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "co": "^4.6.0",
+            "expect": "^23.4.0",
+            "is-generator-fn": "^1.0.0",
+            "jest-diff": "^23.2.0",
+            "jest-each": "^23.4.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-snapshot": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-message-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
+          "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0-beta.35",
+            "chalk": "^2.0.1",
+            "micromatch": "^2.3.11",
+            "slash": "^1.0.0",
+            "stack-utils": "^1.0.1"
+          }
+        },
+        "jest-resolve": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.1.tgz",
+          "integrity": "sha512-VNk4YRNR5gsHhNS0Lp46/DzTT11e+ecbUC61ikE593cKbtdrhrMO+zXkOJaE8YDD5sHxH9W6OfssNn4FkZBzZQ==",
+          "dev": true,
+          "requires": {
+            "browser-resolve": "^1.11.3",
+            "chalk": "^2.0.1",
+            "realpath-native": "^1.0.0"
+          }
+        },
+        "jest-snapshot": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.1.tgz",
+          "integrity": "sha512-oMjaQ4vB4uT211zx00X0R7hg+oLVRDvhVKiC6+vSg7Be9S/AmkDMCVUoaPcLRK/0NkZBTzrh4WCzrSZgUEZW3g==",
+          "dev": true,
+          "requires": {
+            "babel-traverse": "^6.0.0",
+            "babel-types": "^6.0.0",
+            "chalk": "^2.0.1",
+            "jest-diff": "^23.2.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-resolve": "^23.4.1",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "pretty-format": "^23.2.0",
+            "semver": "^5.5.0"
+          }
+        },
+        "jest-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.4.0.tgz",
+          "integrity": "sha1-TQY8uSe68KI4Mf9hvsLLv0l5NWE=",
+          "dev": true,
+          "requires": {
+            "callsites": "^2.0.0",
+            "chalk": "^2.0.1",
+            "graceful-fs": "^4.1.11",
+            "is-ci": "^1.0.10",
+            "jest-message-util": "^23.4.0",
+            "mkdirp": "^0.5.1",
+            "slash": "^1.0.0",
+            "source-map": "^0.6.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
+          }
+        },
+        "jest-validate": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.4.0.tgz",
+          "integrity": "sha1-2W7t4B7wOskJwAnpyORVGX1IwgE=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "jest-get-type": "^22.1.0",
+            "leven": "^2.1.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
+        },
         "rimraf": {
           "version": "2.6.2",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
@@ -10935,35 +12280,68 @@
       }
     },
     "jest-changed-files": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-23.2.0.tgz",
-      "integrity": "sha1-oUWm5LZtASn8fJnO4TTck3pkPZw=",
+      "version": "23.4.0",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-23.4.0.tgz",
+      "integrity": "sha1-8bME+YwjWvXZox7FJCYsXk3jxv8=",
       "dev": true,
       "requires": {
         "throat": "^4.0.0"
       }
     },
     "jest-config": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.2.0.tgz",
-      "integrity": "sha1-0vtVb9WioZw561bROdzKXa0qHIg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.3.0.tgz",
+      "integrity": "sha1-u01Ttw+VAPr933GNImq7U7E7gyM=",
       "dev": true,
       "requires": {
         "babel-core": "^6.0.0",
         "babel-jest": "^23.2.0",
         "chalk": "^2.0.1",
         "glob": "^7.1.1",
-        "jest-environment-jsdom": "^23.2.0",
-        "jest-environment-node": "^23.2.0",
+        "jest-environment-jsdom": "^23.3.0",
+        "jest-environment-node": "^23.3.0",
         "jest-get-type": "^22.1.0",
-        "jest-jasmine2": "^23.2.0",
-        "jest-regex-util": "^23.0.0",
+        "jest-jasmine2": "^23.3.0",
+        "jest-regex-util": "^23.3.0",
         "jest-resolve": "^23.2.0",
-        "jest-util": "^23.2.0",
-        "jest-validate": "^23.2.0",
+        "jest-util": "^23.3.0",
+        "jest-validate": "^23.3.0",
         "pretty-format": "^23.2.0"
       },
       "dependencies": {
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@@ -10977,6 +12355,12 @@
             "once": "^1.3.0",
             "path-is-absolute": "^1.0.0"
           }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
         }
       }
     },
@@ -11009,24 +12393,24 @@
       }
     },
     "jest-environment-jsdom": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.2.0.tgz",
-      "integrity": "sha1-NjRgOgipdbDKimWDIPVqVKjgRVg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.3.0.tgz",
+      "integrity": "sha1-GQRX+RyeYVRUxBhgVgZdtu16Tio=",
       "dev": true,
       "requires": {
         "jest-mock": "^23.2.0",
-        "jest-util": "^23.2.0",
+        "jest-util": "^23.3.0",
         "jsdom": "^11.5.1"
       }
     },
     "jest-environment-node": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.2.0.tgz",
-      "integrity": "sha1-tv5BNy44IJO7bz2b32wcTsClDxg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.3.0.tgz",
+      "integrity": "sha1-Ho3yHIR6pdA7dlc/DcFvzeUDTDI=",
       "dev": true,
       "requires": {
         "jest-mock": "^23.2.0",
-        "jest-util": "^23.2.0"
+        "jest-util": "^23.3.0"
       }
     },
     "jest-get-type": {
@@ -11036,9 +12420,9 @@
       "dev": true
     },
     "jest-haste-map": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-23.2.0.tgz",
-      "integrity": "sha1-0Qy6wAfGlZSMjvGCGisu0tTy1Ng=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-23.4.1.tgz",
+      "integrity": "sha512-PGQxOEGAfRbTyJkmZeOKkVSs+KVeWgG625p89KUuq+sIIchY5P8iPIIc+Hw2tJJPBzahU3qopw1kF/qyhDdNBw==",
       "dev": true,
       "requires": {
         "fb-watchman": "^2.0.0",
@@ -11046,10 +12430,69 @@
         "jest-docblock": "^23.2.0",
         "jest-serializer": "^23.0.1",
         "jest-worker": "^23.2.0",
-        "micromatch": "^3.1.10",
+        "micromatch": "^2.3.11",
         "sane": "^2.0.0"
       },
       "dependencies": {
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
         "jest-docblock": {
           "version": "23.2.0",
           "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-23.2.0.tgz",
@@ -11058,25 +12501,55 @@
           "requires": {
             "detect-newline": "^2.1.0"
           }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
         }
       }
     },
     "jest-jasmine2": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.2.0.tgz",
-      "integrity": "sha1-qmcM2x5NX47HdMlN2l4QX+M9i7Q=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.3.0.tgz",
+      "integrity": "sha1-qHBrqsI8ihMNWqjvVGSp1JCW0bU=",
       "dev": true,
       "requires": {
         "chalk": "^2.0.1",
         "co": "^4.6.0",
-        "expect": "^23.2.0",
+        "expect": "^23.3.0",
         "is-generator-fn": "^1.0.0",
         "jest-diff": "^23.2.0",
         "jest-each": "^23.2.0",
         "jest-matcher-utils": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-snapshot": "^23.2.0",
-        "jest-util": "^23.2.0",
+        "jest-message-util": "^23.3.0",
+        "jest-snapshot": "^23.3.0",
+        "jest-util": "^23.3.0",
         "pretty-format": "^23.2.0"
       }
     },
@@ -11101,9 +12574,9 @@
       }
     },
     "jest-message-util": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.2.0.tgz",
-      "integrity": "sha1-WR6BSP/2nPibBBSAnHIXVuvv50Q=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.3.0.tgz",
+      "integrity": "sha1-vAexHOxpcftd2d4t+2DrwiFQwWA=",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0-beta.35",
@@ -11120,9 +12593,9 @@
       "dev": true
     },
     "jest-regex-util": {
-      "version": "23.0.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-23.0.0.tgz",
-      "integrity": "sha1-3Vwf3gxG9DcTFM8Q96dRoj9Oj3Y=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-23.3.0.tgz",
+      "integrity": "sha1-X4ZylUfCeFxAAs6qj4Sf6MpHG8U=",
       "dev": true
     },
     "jest-resolve": {
@@ -11137,36 +12610,330 @@
       }
     },
     "jest-resolve-dependencies": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-23.2.0.tgz",
-      "integrity": "sha1-bfjVcJxkBmOc0H9Uv/B04BtcBFg=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-23.4.1.tgz",
+      "integrity": "sha512-Jp0wgNJg3OYPvXJfNVX4k4/niwGS6ARuKacum/vue48+4A1XPJ2H3aVFuNb3gUaiB/6Le7Zyl8AUb4MELBfcmg==",
       "dev": true,
       "requires": {
-        "jest-regex-util": "^23.0.0",
-        "jest-snapshot": "^23.2.0"
+        "jest-regex-util": "^23.3.0",
+        "jest-snapshot": "^23.4.1"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "jest-message-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
+          "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0-beta.35",
+            "chalk": "^2.0.1",
+            "micromatch": "^2.3.11",
+            "slash": "^1.0.0",
+            "stack-utils": "^1.0.1"
+          }
+        },
+        "jest-resolve": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.1.tgz",
+          "integrity": "sha512-VNk4YRNR5gsHhNS0Lp46/DzTT11e+ecbUC61ikE593cKbtdrhrMO+zXkOJaE8YDD5sHxH9W6OfssNn4FkZBzZQ==",
+          "dev": true,
+          "requires": {
+            "browser-resolve": "^1.11.3",
+            "chalk": "^2.0.1",
+            "realpath-native": "^1.0.0"
+          }
+        },
+        "jest-snapshot": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.1.tgz",
+          "integrity": "sha512-oMjaQ4vB4uT211zx00X0R7hg+oLVRDvhVKiC6+vSg7Be9S/AmkDMCVUoaPcLRK/0NkZBTzrh4WCzrSZgUEZW3g==",
+          "dev": true,
+          "requires": {
+            "babel-traverse": "^6.0.0",
+            "babel-types": "^6.0.0",
+            "chalk": "^2.0.1",
+            "jest-diff": "^23.2.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-resolve": "^23.4.1",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "pretty-format": "^23.2.0",
+            "semver": "^5.5.0"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
+        }
       }
     },
     "jest-runner": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-23.2.0.tgz",
-      "integrity": "sha1-DZGWfqgvcrDHBZEJJghtIFXOda8=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-23.4.1.tgz",
+      "integrity": "sha512-78KyhObsx0VEuUQ74ikGt68NpP6PApTjGpJPSyZ7AvwOFRqFlxdHpCU/lFPQxW/fLEghl4irz9OHjRLGcGFNyQ==",
       "dev": true,
       "requires": {
         "exit": "^0.1.2",
         "graceful-fs": "^4.1.11",
-        "jest-config": "^23.2.0",
+        "jest-config": "^23.4.1",
         "jest-docblock": "^23.2.0",
-        "jest-haste-map": "^23.2.0",
-        "jest-jasmine2": "^23.2.0",
+        "jest-haste-map": "^23.4.1",
+        "jest-jasmine2": "^23.4.1",
         "jest-leak-detector": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-runtime": "^23.2.0",
-        "jest-util": "^23.2.0",
+        "jest-message-util": "^23.4.0",
+        "jest-runtime": "^23.4.1",
+        "jest-util": "^23.4.0",
         "jest-worker": "^23.2.0",
         "source-map-support": "^0.5.6",
         "throat": "^4.0.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babel-jest": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-23.4.0.tgz",
+          "integrity": "sha1-IsNMOS4hdvakw2eZKn/P9p0uhVc=",
+          "dev": true,
+          "requires": {
+            "babel-plugin-istanbul": "^4.1.6",
+            "babel-preset-jest": "^23.2.0"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "expect": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-23.4.0.tgz",
+          "integrity": "sha1-baTsyZwUcSU+cogziYOtHrrbYMM=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "jest-diff": "^23.2.0",
+            "jest-get-type": "^22.1.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-regex-util": "^23.3.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "jest-config": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.4.1.tgz",
+          "integrity": "sha512-OT29qlcw9Iw7u0PC04wD9tjLJL4vpGdMZrrHMFwYSO3HxOikbHywjmtQ7rntW4qvBcpbi7iCMTPPRmpDjImQEw==",
+          "dev": true,
+          "requires": {
+            "babel-core": "^6.0.0",
+            "babel-jest": "^23.4.0",
+            "chalk": "^2.0.1",
+            "glob": "^7.1.1",
+            "jest-environment-jsdom": "^23.4.0",
+            "jest-environment-node": "^23.4.0",
+            "jest-get-type": "^22.1.0",
+            "jest-jasmine2": "^23.4.1",
+            "jest-regex-util": "^23.3.0",
+            "jest-resolve": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "jest-validate": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
         "jest-docblock": {
           "version": "23.2.0",
           "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-23.2.0.tgz",
@@ -11175,13 +12942,178 @@
           "requires": {
             "detect-newline": "^2.1.0"
           }
+        },
+        "jest-each": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-23.4.0.tgz",
+          "integrity": "sha1-L6nt2J2qGk7cn/m/YGKja3E0UUM=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-environment-jsdom": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz",
+          "integrity": "sha1-BWp5UrP+pROsYqFAosNox52eYCM=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0",
+            "jsdom": "^11.5.1"
+          }
+        },
+        "jest-environment-node": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.4.0.tgz",
+          "integrity": "sha1-V+gO0IQd6jAxZ8zozXlSHeuv3hA=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0"
+          }
+        },
+        "jest-jasmine2": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.4.1.tgz",
+          "integrity": "sha512-nHmRgTtM9fuaK3RBz2z4j9mYVEJwB7FdoflQSvrwHV8mCT5z4DeHoKCvPp2R27F8fZTYJUYVMb36xn+ydg0tfA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "co": "^4.6.0",
+            "expect": "^23.4.0",
+            "is-generator-fn": "^1.0.0",
+            "jest-diff": "^23.2.0",
+            "jest-each": "^23.4.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-snapshot": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-message-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
+          "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0-beta.35",
+            "chalk": "^2.0.1",
+            "micromatch": "^2.3.11",
+            "slash": "^1.0.0",
+            "stack-utils": "^1.0.1"
+          }
+        },
+        "jest-resolve": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.1.tgz",
+          "integrity": "sha512-VNk4YRNR5gsHhNS0Lp46/DzTT11e+ecbUC61ikE593cKbtdrhrMO+zXkOJaE8YDD5sHxH9W6OfssNn4FkZBzZQ==",
+          "dev": true,
+          "requires": {
+            "browser-resolve": "^1.11.3",
+            "chalk": "^2.0.1",
+            "realpath-native": "^1.0.0"
+          }
+        },
+        "jest-snapshot": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.1.tgz",
+          "integrity": "sha512-oMjaQ4vB4uT211zx00X0R7hg+oLVRDvhVKiC6+vSg7Be9S/AmkDMCVUoaPcLRK/0NkZBTzrh4WCzrSZgUEZW3g==",
+          "dev": true,
+          "requires": {
+            "babel-traverse": "^6.0.0",
+            "babel-types": "^6.0.0",
+            "chalk": "^2.0.1",
+            "jest-diff": "^23.2.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-resolve": "^23.4.1",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "pretty-format": "^23.2.0",
+            "semver": "^5.5.0"
+          }
+        },
+        "jest-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.4.0.tgz",
+          "integrity": "sha1-TQY8uSe68KI4Mf9hvsLLv0l5NWE=",
+          "dev": true,
+          "requires": {
+            "callsites": "^2.0.0",
+            "chalk": "^2.0.1",
+            "graceful-fs": "^4.1.11",
+            "is-ci": "^1.0.10",
+            "jest-message-util": "^23.4.0",
+            "mkdirp": "^0.5.1",
+            "slash": "^1.0.0",
+            "source-map": "^0.6.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
+          }
+        },
+        "jest-validate": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.4.0.tgz",
+          "integrity": "sha1-2W7t4B7wOskJwAnpyORVGX1IwgE=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "jest-get-type": "^22.1.0",
+            "leven": "^2.1.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
         }
       }
     },
     "jest-runtime": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-23.2.0.tgz",
-      "integrity": "sha1-YtywF2ahxMZGltwJAgnnbOGq3Lw=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-23.4.1.tgz",
+      "integrity": "sha512-fnInrsEAbLpNctQa+RLnKZyQLMmb5u4YdoT9CbRKWhjMY7q6ledOu+x+ORZ3glQOK/vJIS701RaJRp1pc5ziaA==",
       "dev": true,
       "requires": {
         "babel-core": "^6.0.0",
@@ -11191,20 +13123,347 @@
         "exit": "^0.1.2",
         "fast-json-stable-stringify": "^2.0.0",
         "graceful-fs": "^4.1.11",
-        "jest-config": "^23.2.0",
-        "jest-haste-map": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-regex-util": "^23.0.0",
-        "jest-resolve": "^23.2.0",
-        "jest-snapshot": "^23.2.0",
-        "jest-util": "^23.2.0",
-        "jest-validate": "^23.2.0",
-        "micromatch": "^3.1.10",
+        "jest-config": "^23.4.1",
+        "jest-haste-map": "^23.4.1",
+        "jest-message-util": "^23.4.0",
+        "jest-regex-util": "^23.3.0",
+        "jest-resolve": "^23.4.1",
+        "jest-snapshot": "^23.4.1",
+        "jest-util": "^23.4.0",
+        "jest-validate": "^23.4.0",
+        "micromatch": "^2.3.11",
         "realpath-native": "^1.0.0",
         "slash": "^1.0.0",
         "strip-bom": "3.0.0",
         "write-file-atomic": "^2.1.0",
         "yargs": "^11.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babel-jest": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-23.4.0.tgz",
+          "integrity": "sha1-IsNMOS4hdvakw2eZKn/P9p0uhVc=",
+          "dev": true,
+          "requires": {
+            "babel-plugin-istanbul": "^4.1.6",
+            "babel-preset-jest": "^23.2.0"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "expect": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-23.4.0.tgz",
+          "integrity": "sha1-baTsyZwUcSU+cogziYOtHrrbYMM=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "jest-diff": "^23.2.0",
+            "jest-get-type": "^22.1.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-regex-util": "^23.3.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "jest-config": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.4.1.tgz",
+          "integrity": "sha512-OT29qlcw9Iw7u0PC04wD9tjLJL4vpGdMZrrHMFwYSO3HxOikbHywjmtQ7rntW4qvBcpbi7iCMTPPRmpDjImQEw==",
+          "dev": true,
+          "requires": {
+            "babel-core": "^6.0.0",
+            "babel-jest": "^23.4.0",
+            "chalk": "^2.0.1",
+            "glob": "^7.1.1",
+            "jest-environment-jsdom": "^23.4.0",
+            "jest-environment-node": "^23.4.0",
+            "jest-get-type": "^22.1.0",
+            "jest-jasmine2": "^23.4.1",
+            "jest-regex-util": "^23.3.0",
+            "jest-resolve": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "jest-validate": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-each": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-23.4.0.tgz",
+          "integrity": "sha1-L6nt2J2qGk7cn/m/YGKja3E0UUM=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-environment-jsdom": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz",
+          "integrity": "sha1-BWp5UrP+pROsYqFAosNox52eYCM=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0",
+            "jsdom": "^11.5.1"
+          }
+        },
+        "jest-environment-node": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.4.0.tgz",
+          "integrity": "sha1-V+gO0IQd6jAxZ8zozXlSHeuv3hA=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0"
+          }
+        },
+        "jest-jasmine2": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.4.1.tgz",
+          "integrity": "sha512-nHmRgTtM9fuaK3RBz2z4j9mYVEJwB7FdoflQSvrwHV8mCT5z4DeHoKCvPp2R27F8fZTYJUYVMb36xn+ydg0tfA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "co": "^4.6.0",
+            "expect": "^23.4.0",
+            "is-generator-fn": "^1.0.0",
+            "jest-diff": "^23.2.0",
+            "jest-each": "^23.4.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-snapshot": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-message-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
+          "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0-beta.35",
+            "chalk": "^2.0.1",
+            "micromatch": "^2.3.11",
+            "slash": "^1.0.0",
+            "stack-utils": "^1.0.1"
+          }
+        },
+        "jest-resolve": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.1.tgz",
+          "integrity": "sha512-VNk4YRNR5gsHhNS0Lp46/DzTT11e+ecbUC61ikE593cKbtdrhrMO+zXkOJaE8YDD5sHxH9W6OfssNn4FkZBzZQ==",
+          "dev": true,
+          "requires": {
+            "browser-resolve": "^1.11.3",
+            "chalk": "^2.0.1",
+            "realpath-native": "^1.0.0"
+          }
+        },
+        "jest-snapshot": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.1.tgz",
+          "integrity": "sha512-oMjaQ4vB4uT211zx00X0R7hg+oLVRDvhVKiC6+vSg7Be9S/AmkDMCVUoaPcLRK/0NkZBTzrh4WCzrSZgUEZW3g==",
+          "dev": true,
+          "requires": {
+            "babel-traverse": "^6.0.0",
+            "babel-types": "^6.0.0",
+            "chalk": "^2.0.1",
+            "jest-diff": "^23.2.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-resolve": "^23.4.1",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "pretty-format": "^23.2.0",
+            "semver": "^5.5.0"
+          }
+        },
+        "jest-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.4.0.tgz",
+          "integrity": "sha1-TQY8uSe68KI4Mf9hvsLLv0l5NWE=",
+          "dev": true,
+          "requires": {
+            "callsites": "^2.0.0",
+            "chalk": "^2.0.1",
+            "graceful-fs": "^4.1.11",
+            "is-ci": "^1.0.10",
+            "jest-message-util": "^23.4.0",
+            "mkdirp": "^0.5.1",
+            "slash": "^1.0.0",
+            "source-map": "^0.6.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
+          }
+        },
+        "jest-validate": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.4.0.tgz",
+          "integrity": "sha1-2W7t4B7wOskJwAnpyORVGX1IwgE=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "jest-get-type": "^22.1.0",
+            "leven": "^2.1.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
+        }
       }
     },
     "jest-serializer": {
@@ -11214,30 +13473,35 @@
       "dev": true
     },
     "jest-snapshot": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.2.0.tgz",
-      "integrity": "sha1-x6PQFxd7utYMillYac+QqHguan4=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.3.0.tgz",
+      "integrity": "sha1-/E6fgeRUMtEFB+J/ULzmD0TYFCQ=",
       "dev": true,
       "requires": {
+        "babel-traverse": "^6.0.0",
+        "babel-types": "^6.0.0",
         "chalk": "^2.0.1",
         "jest-diff": "^23.2.0",
         "jest-matcher-utils": "^23.2.0",
+        "jest-message-util": "^23.3.0",
+        "jest-resolve": "^23.2.0",
         "mkdirp": "^0.5.1",
         "natural-compare": "^1.4.0",
-        "pretty-format": "^23.2.0"
+        "pretty-format": "^23.2.0",
+        "semver": "^5.5.0"
       }
     },
     "jest-util": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.2.0.tgz",
-      "integrity": "sha1-YrdwdXaW2W4JSgS48cNzylClqy4=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.3.0.tgz",
+      "integrity": "sha1-efNbsMMBAO9hHZY+5riPjthzqB0=",
       "dev": true,
       "requires": {
         "callsites": "^2.0.0",
         "chalk": "^2.0.1",
         "graceful-fs": "^4.1.11",
         "is-ci": "^1.0.10",
-        "jest-message-util": "^23.2.0",
+        "jest-message-util": "^23.3.0",
         "mkdirp": "^0.5.1",
         "slash": "^1.0.0",
         "source-map": "^0.6.0"
@@ -11252,9 +13516,9 @@
       }
     },
     "jest-validate": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.2.0.tgz",
-      "integrity": "sha1-Z8i5CeEa8XAXZSOIlMZ6wykbGV4=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.3.0.tgz",
+      "integrity": "sha1-1Jvqaq2YwwrNLLtUJDR5igzBP3Y=",
       "dev": true,
       "requires": {
         "chalk": "^2.0.1",
@@ -11264,9 +13528,9 @@
       }
     },
     "jest-watcher": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-23.2.0.tgz",
-      "integrity": "sha1-Z46FKJbpGenZoOtLi68a4nliDqk=",
+      "version": "23.4.0",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-23.4.0.tgz",
+      "integrity": "sha1-0uKM50+NrWxq/JIrksq+9u0FyRw=",
       "dev": true,
       "requires": {
         "ansi-escapes": "^3.0.0",
@@ -11437,6 +13701,12 @@
         "verror": "1.10.0"
       }
     },
+    "just-extend": {
+      "version": "1.1.27",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-1.1.27.tgz",
+      "integrity": "sha512-mJVp13Ix6gFo3SBAy9U/kL+oeZqzlYYYLQBwXVBlVzIsZwBqGREnOro24oC/8s8aox+rJhtZ2DiQof++IrkA+g==",
+      "dev": true
+    },
     "keygrip": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.0.2.tgz",
@@ -11464,43 +13734,64 @@
         "graceful-fs": "^4.1.9"
       }
     },
+    "kleur": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-1.0.1.tgz",
+      "integrity": "sha512-8srIZ5BK5PCJw1L/JN741xgNfSjuQNK9ImYbYzv7ZUD3WPfuywaY+yd7lQOphJ+2vwXnMLnRZoAh5X+orRt4LQ==",
+      "dev": true
+    },
     "koa": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/koa/-/koa-2.5.1.tgz",
-      "integrity": "sha512-cchwbMeG2dv3E2xTAmheDAuvR53tPgJZN/Hf1h7bTzJLSPcFZp8/t5+bNKJ6GaQZoydhZQ+1GNruhKdj3lIrug==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/koa/-/koa-2.5.2.tgz",
+      "integrity": "sha512-MoVGWre9g3p35pCqXNhOT/a4trwK5CGvalIoPi7qOA2RCZaep3GCsa/G/tD9QMjQI7bmVWn3XF3SOau8RkPh6w==",
       "dev": true,
       "requires": {
-        "accepts": "^1.2.2",
-        "content-disposition": "~0.5.0",
-        "content-type": "^1.0.0",
-        "cookies": "~0.7.0",
-        "debug": "*",
+        "accepts": "^1.3.5",
+        "cache-content-type": "^1.0.0",
+        "content-disposition": "~0.5.2",
+        "content-type": "^1.0.4",
+        "cookies": "~0.7.1",
+        "debug": "^3.1.0",
         "delegates": "^1.0.0",
-        "depd": "^1.1.0",
-        "destroy": "^1.0.3",
-        "error-inject": "~1.0.0",
-        "escape-html": "~1.0.1",
-        "fresh": "^0.5.2",
-        "http-assert": "^1.1.0",
-        "http-errors": "^1.2.8",
-        "is-generator-function": "^1.0.3",
-        "koa-compose": "^4.0.0",
+        "depd": "^1.1.2",
+        "destroy": "^1.0.4",
+        "error-inject": "^1.0.0",
+        "escape-html": "^1.0.3",
+        "fresh": "~0.5.2",
+        "http-assert": "^1.3.0",
+        "http-errors": "^1.6.3",
+        "is-generator-function": "^1.0.7",
+        "koa-compose": "^4.1.0",
         "koa-convert": "^1.2.0",
         "koa-is-json": "^1.0.0",
-        "mime-types": "^2.0.7",
-        "on-finished": "^2.1.0",
-        "only": "0.0.2",
-        "parseurl": "^1.3.0",
-        "statuses": "^1.2.0",
-        "type-is": "^1.5.5",
-        "vary": "^1.0.0"
+        "on-finished": "^2.3.0",
+        "only": "~0.0.2",
+        "parseurl": "^1.3.2",
+        "statuses": "^1.5.0",
+        "type-is": "^1.6.16",
+        "vary": "^1.1.2"
       },
       "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
         "koa-compose": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-4.1.0.tgz",
           "integrity": "sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==",
           "dev": true
+        },
+        "statuses": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+          "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+          "dev": true
         }
       }
     },
@@ -11590,57 +13881,18 @@
       }
     },
     "koa-webpack": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/koa-webpack/-/koa-webpack-4.0.0.tgz",
-      "integrity": "sha512-P+j2TzeZAqFwscd/dlLykk/sxwr6wQ5Tp3FYDhqv1+y9aRIffTPnu2zK+1BhfM+Kyh8bepU1jFR420maE+Vajw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/koa-webpack/-/koa-webpack-5.1.0.tgz",
+      "integrity": "sha512-XNqqtPpMvccXK3tAs0vW6YoO4+uYaxarutsgCZjNi3NyvmmVBvIH6l6xGk0NtiJR1m0oa53gFHLSiT19ZseOCw==",
       "dev": true,
       "requires": {
+        "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
         "app-root-path": "^2.0.1",
+        "loud-rejection": "^1.6.0",
         "merge-options": "^1.0.0",
         "webpack-dev-middleware": "^3.0.0",
-        "webpack-hot-client": "^3.0.0",
+        "webpack-hot-client": "^4.1.0",
         "webpack-log": "^1.1.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        },
-        "webpack-hot-client": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/webpack-hot-client/-/webpack-hot-client-3.0.0.tgz",
-          "integrity": "sha512-6k91015hZ4Okkz8u6OzRgJygEL+3J3ay6HVZhWBF3tT2P0rZJ0mgca39dotJxngggUm3S8707c0vrcynn1IzEQ==",
-          "dev": true,
-          "requires": {
-            "json-stringify-safe": "^5.0.1",
-            "loglevelnext": "^1.0.2",
-            "strip-ansi": "^4.0.0",
-            "uuid": "^3.1.0",
-            "webpack-log": "^1.1.1",
-            "ws": "^4.0.0"
-          }
-        },
-        "ws": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
-          "integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0",
-            "safe-buffer": "~5.1.0"
-          }
-        }
       }
     },
     "latest-version": {
@@ -11697,13 +13949,13 @@
       }
     },
     "load-cfg": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/load-cfg/-/load-cfg-0.2.8.tgz",
-      "integrity": "sha1-ax/0kaY/AE4NMfuTz+FZet2li4k=",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/load-cfg/-/load-cfg-0.5.6.tgz",
+      "integrity": "sha1-N40Q2lw4JLEMC1463cVVukYZofE=",
       "dev": true,
       "requires": {
         "deepmerge": "^2.1.1",
-        "esm": "^3.0.52",
+        "esm": "^3.0.66",
         "find-up": "^3.0.0"
       },
       "dependencies": {
@@ -11885,6 +14137,12 @@
       "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
       "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
     },
+    "lodash.flattendeep": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
+      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
+      "dev": true
+    },
     "lodash.foreach": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
@@ -11901,16 +14159,6 @@
       "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
       "integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4="
     },
-    "lodash.isobject": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
-      "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
-    },
-    "lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-    },
     "lodash.iteratee": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz",
@@ -12025,6 +14273,12 @@
         "object.assign": "^4.1.0"
       }
     },
+    "lolex": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/lolex/-/lolex-2.7.1.tgz",
+      "integrity": "sha512-Oo2Si3RMKV3+lV5MsSWplDQFoTClz/24S0MMHYcgGWWmFXr6TMlqcqk/l1GtH+d5wLBwNRiqGnwDRMirtFalJw==",
+      "dev": true
+    },
     "long": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
@@ -12085,9 +14339,9 @@
       }
     },
     "luxon": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.2.1.tgz",
-      "integrity": "sha512-ymX+7rWJjYw6jfmtkLqHJmXo+FYC69icT60x+utlzjIOc/U4SNXljUITwH4C1RDP0ZukWf4apHT/d1Ux/4eHPg=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.3.1.tgz",
+      "integrity": "sha512-GnX4PVEfDcTZT3xDQhm2jvEyZTxfi2b0gOmkJuwrrggA1b46e8ZshmPYePA6gdAT6mvvOxYnGFfb3iE9ZsWn9g=="
     },
     "make-dir": {
       "version": "1.3.0",
@@ -12158,6 +14412,15 @@
       "integrity": "sha1-iQwsGzv+g/sA5BKbjkz+ZFJw+dE=",
       "dev": true
     },
+    "matchmediaquery": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz",
+      "integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=",
+      "dev": true,
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -12229,6 +14492,12 @@
       "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
       "dev": true
     },
+    "meant": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/meant/-/meant-1.0.1.tgz",
+      "integrity": "sha512-UakVLFjKkbbUwNWJ2frVLnnAtbb7D7DsloxRd3s/gDpI8rdv8W5Hp3NaDb+POBI1fQdeussER6NB8vpcRURvlg==",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -12492,20 +14761,21 @@
       "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
     },
     "mongodb": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.0.10.tgz",
-      "integrity": "sha512-jy9s4FgcM4rl8sHNETYHGeWcuRh9AlwQCUuMiTj041t/HD02HwyFgmm2VZdd9/mA9YNHaUJLqj0tzBx2QFivtg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.1.1.tgz",
+      "integrity": "sha512-GU9oWK4pi8PC7NyGiwjFMwZyMqwGWoMEMvM0LZh7UKW/FFAqgmZKjjriD+5MEOCDUJE2dtHX93/K5UtDxO0otg==",
       "requires": {
-        "mongodb-core": "3.0.9"
+        "mongodb-core": "3.1.0"
       }
     },
     "mongodb-core": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-3.0.9.tgz",
-      "integrity": "sha512-buOWjdLLBlEqjHDeHYSXqXx173wHMVp7bafhdHxSjxWdB9V6Ri4myTqxjYZwL/eGFZxvd8oRQSuhwuIDbaaB+g==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-3.1.0.tgz",
+      "integrity": "sha512-qRjG62Fu//CZhkgn0jA/k8jh5MhACIq8cOJUryH6sck87pgt+C222MSD02tsCq5zNo/B6ZFHtNodZ2qpf8E86g==",
       "requires": {
         "bson": "~1.0.4",
-        "require_optional": "^1.0.1"
+        "require_optional": "^1.0.1",
+        "saslprep": "^1.0.0"
       }
     },
     "move-concurrently": {
@@ -12647,12 +14917,6 @@
         "nanoassert": "^1.1.0"
       }
     },
-    "nanoseconds": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/nanoseconds/-/nanoseconds-1.0.1.tgz",
-      "integrity": "sha512-fLbtBoaFlCdjq+LNaDTLXHQh8U3rKDUGRBY0BO2Xjgi1vt+X/6xF6gOkNbYolZboYAeM8o3eOZCOcDJZdogCEg==",
-      "dev": true
-    },
     "nanotiming": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/nanotiming/-/nanotiming-7.3.1.tgz",
@@ -12675,6 +14939,18 @@
       "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=",
       "optional": true
     },
+    "nearley": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.13.0.tgz",
+      "integrity": "sha512-ioYYogSaZhFlCpRizQgY3UT3G1qFXmHGY/5ozoFE3dMfiCRAeJfh+IPE3/eh9gCZvqLhPCWb4bLt7Bqzo+1mLQ==",
+      "dev": true,
+      "requires": {
+        "nomnom": "~1.6.2",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6",
+        "semver": "^5.4.1"
+      }
+    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
@@ -12686,6 +14962,12 @@
       "integrity": "sha512-3KL3fvuRkZ7s4IFOMfztb7zJp3QaVWnBeGoJlgB38XnCRPj/0tLzzLG5IB8NYOHbJ8g8UGrgZv44GLDk6CxTxA==",
       "dev": true
     },
+    "nested-error-stacks": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.0.1.tgz",
+      "integrity": "sha512-SrQrok4CATudVzBS7coSz26QRSmlK9TzzoFbeKfcPBUFPjcQM9Rqvr/DlJkOrwI/0KcgvMub1n1g5Jt9EgRn4A==",
+      "dev": true
+    },
     "next-tick": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
@@ -12698,6 +14980,36 @@
       "integrity": "sha512-2NpiFHqC87y/zFke0fC0spBXL3bBsoh/p5H1EFhshxjCR5+0g2d6BiXbUFz9v1sAcxsk2htp2eQnNIci2dIYcA==",
       "dev": true
     },
+    "nise": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/nise/-/nise-1.4.2.tgz",
+      "integrity": "sha512-BxH/DxoQYYdhKgVAfqVy4pzXRZELHOIewzoesxpjYvpU+7YOalQhGNPf7wAx8pLrTNPrHRDlLOkAl8UI0ZpXjw==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/formatio": "^2.0.0",
+        "just-extend": "^1.1.27",
+        "lolex": "^2.3.2",
+        "path-to-regexp": "^1.7.0",
+        "text-encoding": "^0.6.4"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "dev": true,
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
@@ -12790,47 +15102,27 @@
         "which": "^1.3.0"
       }
     },
-    "nodemon": {
-      "version": "1.17.5",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-1.17.5.tgz",
-      "integrity": "sha512-FG2mWJU1Y58a9ktgMJ/RZpsiPz3b7ge77t/okZHEa4NbrlXGKZ8s1A6Q+C7+JPXohAfcPALRwvxcAn8S874pmw==",
+    "node-version": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/node-version/-/node-version-1.2.0.tgz",
+      "integrity": "sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ==",
+      "dev": true
+    },
+    "nomnom": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.6.2.tgz",
+      "integrity": "sha1-hKZqJgF0QI/Ft3oY+IjszET7aXE=",
       "dev": true,
       "requires": {
-        "chokidar": "^2.0.2",
-        "debug": "^3.1.0",
-        "ignore-by-default": "^1.0.1",
-        "minimatch": "^3.0.4",
-        "pstree.remy": "^1.1.0",
-        "semver": "^5.5.0",
-        "supports-color": "^5.2.0",
-        "touch": "^3.1.0",
-        "undefsafe": "^2.0.2",
-        "update-notifier": "^2.3.0"
+        "colors": "0.5.x",
+        "underscore": "~1.4.4"
       },
       "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+        "colors": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-0.5.1.tgz",
+          "integrity": "sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=",
           "dev": true
-        },
-        "supports-color": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
         }
       }
     },
@@ -13014,6 +15306,18 @@
         }
       }
     },
+    "object-inspect": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz",
+      "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==",
+      "dev": true
+    },
+    "object-is": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
+      "integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
+      "dev": true
+    },
     "object-keys": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
@@ -13041,6 +15345,18 @@
         "object-keys": "^1.0.11"
       }
     },
+    "object.entries": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.0.4.tgz",
+      "integrity": "sha1-G/mk3SKI9bM/Opk9JXZh8F0WGl8=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.6.1",
+        "function-bind": "^1.1.0",
+        "has": "^1.0.1"
+      }
+    },
     "object.getownpropertydescriptors": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
@@ -13070,6 +15386,18 @@
         "isobject": "^3.0.1"
       }
     },
+    "object.values": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.0.4.tgz",
+      "integrity": "sha1-5STaCbT2b/Bd9FdUbscqyZ8TBpo=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.6.1",
+        "function-bind": "^1.1.0",
+        "has": "^1.0.1"
+      }
+    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -13198,12 +15526,24 @@
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
+      "dev": true
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
       "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
       "dev": true
     },
+    "p-is-promise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
+      "dev": true
+    },
     "p-limit": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
@@ -13228,6 +15568,22 @@
       "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==",
       "dev": true
     },
+    "p-reduce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-1.0.0.tgz",
+      "integrity": "sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=",
+      "dev": true
+    },
+    "p-series": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-series/-/p-series-1.1.0.tgz",
+      "integrity": "sha512-356covArc9UCfj2twY/sxCJKGMzzO+pJJtucizsPC6aS1xKSTBc9PQrQhvFR3+7F+fa2KBKdJjdIcv6NEWDcIQ==",
+      "dev": true,
+      "requires": {
+        "@sindresorhus/is": "^0.7.0",
+        "p-reduce": "^1.0.0"
+      }
+    },
     "p-try": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
@@ -13516,6 +15872,12 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
+      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU=",
+      "dev": true
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -13579,92 +15941,33 @@
         "postcss": "^6"
       }
     },
-    "postcss-apply": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/postcss-apply/-/postcss-apply-0.9.0.tgz",
-      "integrity": "sha512-Ysel7CyF7FiZQno9oADqKXsfZw4DvTcQXtFvN1nLZQA3woRiVYV2M5kGJSrqQVWGjp/zqNUjUpXHs24TgxFjxg==",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.23.0",
-        "balanced-match": "^0.4.2",
-        "postcss": "^6.0.0"
-      },
-      "dependencies": {
-        "balanced-match": {
-          "version": "0.4.2",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
-          "dev": true
-        }
-      }
-    },
-    "postcss-atroot": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-atroot/-/postcss-atroot-0.1.3.tgz",
-      "integrity": "sha1-Z1LAIwx0UUBUk0WysOMOvtoBpAU=",
-      "dev": true,
-      "requires": {
-        "postcss": "^5.0.5"
-      },
-      "dependencies": {
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-              "dev": true
-            }
-          }
-        },
-        "has-flag": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-          "dev": true
-        },
-        "postcss": {
-          "version": "5.2.18",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
-          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^1.1.3",
-            "js-base64": "^2.1.9",
-            "source-map": "^0.5.6",
-            "supports-color": "^3.2.3"
-          }
-        },
-        "supports-color": {
-          "version": "3.2.3",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-          "dev": true,
-          "requires": {
-            "has-flag": "^1.0.0"
-          }
-        }
-      }
-    },
     "postcss-attribute-case-insensitive": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz",
-      "integrity": "sha1-lNxCLI+QmX8WvTOjZUu77AhJY7Q=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-3.0.1.tgz",
+      "integrity": "sha512-X/viSS9YrAoDnRa2R4sElsAmW+scOWeVW11FjWQN8m+FW1YY0jdIA9fuBSSF1pKsJTYXJXGJ1oAjFHl8cqcmKw==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.0",
-        "postcss-selector-parser": "^2.2.3"
+        "postcss": "^6.0.23",
+        "postcss-selector-parser": "^4.0.0"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
+          "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
+          "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^1.0.1",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
       }
     },
     "postcss-calc": {
@@ -13728,6 +16031,16 @@
         }
       }
     },
+    "postcss-color-functional-notation": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-1.0.2.tgz",
+      "integrity": "sha512-FxkEr+s/KCrcrTxUhHcDMKGZmnLjUKK7pl2gDjnEoAJaVcbThdDWLhuASu02qdA3Ys7np/BwJgwc72JrURTvJQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.23",
+        "postcss-values-parser": "^1.5.0"
+      }
+    },
     "postcss-color-hex-alpha": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-3.0.0.tgz",
@@ -13782,16 +16095,6 @@
         "postcss-values-parser": "^1.5.0"
       }
     },
-    "postcss-color-rgb": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-color-rgb/-/postcss-color-rgb-2.0.0.tgz",
-      "integrity": "sha1-FFOcinExSUtILg3RzCZf9lFLUmM=",
-      "dev": true,
-      "requires": {
-        "postcss": "^6.0.1",
-        "postcss-value-parser": "^3.3.0"
-      }
-    },
     "postcss-colormin": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-2.2.2.tgz",
@@ -13913,6 +16216,17 @@
         }
       }
     },
+    "postcss-css-variables": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.9.0.tgz",
+      "integrity": "sha512-pSNj57bdBaFnyDzt96SZOidMMWY7Q5OySQdKsTxaxehYO6EtNC5SAKIwjah/poh5vUmNthkrlOd03bP+HNGuCA==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.3",
+        "extend": "^3.0.1",
+        "postcss": "^6.0.8"
+      }
+    },
     "postcss-custom-media": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz",
@@ -13943,22 +16257,28 @@
       }
     },
     "postcss-dir-pseudo-class": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-3.0.0.tgz",
-      "integrity": "sha512-iEVgue59Xs6vz9CQZtlyonW/BmVfpqWglcUyIP2rQaBpH1a2T8Iax61eXY2NjTAq5r3Xjxwk4lrA84acoAiWHw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-4.0.0.tgz",
+      "integrity": "sha512-ZAeXMIyZukHHeDt5IFchWB+okPzasb8YnpkXIgTiJl4216X1IplMrODjihZIBDXNE2RdJRBCAOx8uGzCnGSxTA==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.20",
-        "postcss-selector-parser": "^3.1.1"
+        "postcss": "^6.0.22",
+        "postcss-selector-parser": "^4.0.0"
       },
       "dependencies": {
+        "cssesc": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
+          "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
+          "dev": true
+        },
         "postcss-selector-parser": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
-          "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
+          "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
           "dev": true,
           "requires": {
-            "dot-prop": "^4.1.1",
+            "cssesc": "^1.0.1",
             "indexes-of": "^1.0.1",
             "uniq": "^1.0.1"
           }
@@ -14261,14 +16581,14 @@
         }
       }
     },
-    "postcss-extend-rule": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-extend-rule/-/postcss-extend-rule-1.1.0.tgz",
-      "integrity": "sha512-+NXtLOY49Xcx9173SJAYj41esTRTpihSLoKpj5yzoBki9PZK4HF37AH9AVyCeLFJL9fzhh0YFuk/3eyeZ9d/jw==",
+    "postcss-env-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-1.0.0.tgz",
+      "integrity": "sha512-UVkdbVCRAEr79XkS6uxMRWIHYrFNuhXmjw6gxyesCBXzzHIvYOoz5UKTWM39xX3j9vGO5waVzxq/VzEiZgsM0g==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.11",
-        "postcss-nesting": "^4.2.1"
+        "postcss": "^6.0.22",
+        "postcss-values-parser": "^1.5.0"
       }
     },
     "postcss-filter-plugins": {
@@ -14340,14 +16660,23 @@
       }
     },
     "postcss-focus-visible": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-2.0.0.tgz",
-      "integrity": "sha512-nJaq5CK2YBWB1fu1SeK0qXAk0TJncY3Ms7iwFov+J3sNetecvTeCQuSxQCf9U9T9Vjusnb3zzThBs5XwP/eb/g==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-3.0.0.tgz",
+      "integrity": "sha512-6i3HsOrWNelxBYPh/HWAXF9lPwCFAfFVlUTZqsLRXYMPhcXH1eXdItozRBvT9l5pYF4ddJJbgk4JOp0au0QToA==",
       "dev": true,
       "requires": {
         "postcss": "^6.0"
       }
     },
+    "postcss-focus-within": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-2.0.0.tgz",
+      "integrity": "sha512-LTbT/dxZ3FahpOv1XZMyRLNnBk5QWVU4HL/p82iFkzoPNVhNQazaYIujHXTOAKea5clgjbj6GdFj7mU7qzy1kQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.21"
+      }
+    },
     "postcss-font-family-system-ui": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-family-system-ui/-/postcss-font-family-system-ui-3.0.0.tgz",
@@ -14378,6 +16707,37 @@
         "postcss": "^6.0.1"
       }
     },
+    "postcss-gap-properties": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-1.0.0.tgz",
+      "integrity": "sha512-snL2k0Nie72J0uCsKgfO2Sd5rs3Wlhsk+k9uVzyMaeBH9gouNPPY7tZ4bopRJmBISbZEUtvF8Gchat6nOFQHdg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.22"
+      }
+    },
+    "postcss-image-set-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-2.0.0.tgz",
+      "integrity": "sha512-2bpCIj2wFhIhpyM1G/ZZgBJM8K/VKbEcQ0SX5MI9MTGv4giPMnuXMa/sX3bHXHhi1PL4v2WRfqD1+w5T9EhFqg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.22",
+        "postcss-values-parser": "^1.5.0"
+      }
+    },
+    "postcss-import": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz",
+      "integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1",
+        "postcss-value-parser": "^3.2.3",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
     "postcss-initial": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-2.0.0.tgz",
@@ -14388,143 +16748,60 @@
         "postcss": "^6.0.1"
       }
     },
+    "postcss-lab-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-1.0.1.tgz",
+      "integrity": "sha512-kxaHXTRjlBLDpJUMsrGM0GnVgBrMqQz1HfaXdv3VNpz2EwwUhrU9uVfqv/NAtiWt6ZkD7IK2MUlncRoj024lIA==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^6.0.22",
+        "postcss-values-parser": "^1.5.0"
+      }
+    },
     "postcss-load-config": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz",
-      "integrity": "sha1-U56a/J3chiASHr+djDZz4M5Q0oo=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
+      "integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
       "dev": true,
       "requires": {
-        "cosmiconfig": "^2.1.0",
-        "object-assign": "^4.1.0",
-        "postcss-load-options": "^1.2.0",
-        "postcss-load-plugins": "^2.3.0"
+        "cosmiconfig": "^4.0.0",
+        "import-cwd": "^2.0.0"
       },
       "dependencies": {
         "cosmiconfig": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
-          "integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
+          "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
           "dev": true,
           "requires": {
             "is-directory": "^0.3.1",
-            "js-yaml": "^3.4.3",
-            "minimist": "^1.2.0",
-            "object-assign": "^4.1.0",
-            "os-homedir": "^1.0.1",
-            "parse-json": "^2.2.0",
-            "require-from-string": "^1.1.0"
+            "js-yaml": "^3.9.0",
+            "parse-json": "^4.0.0",
+            "require-from-string": "^2.0.1"
           }
         },
         "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
           "dev": true,
           "requires": {
-            "error-ex": "^1.2.0"
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
           }
-        },
-        "require-from-string": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-1.2.1.tgz",
-          "integrity": "sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=",
-          "dev": true
-        }
-      }
-    },
-    "postcss-load-options": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-options/-/postcss-load-options-1.2.0.tgz",
-      "integrity": "sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw=",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^2.1.0",
-        "object-assign": "^4.1.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
-          "integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==",
-          "dev": true,
-          "requires": {
-            "is-directory": "^0.3.1",
-            "js-yaml": "^3.4.3",
-            "minimist": "^1.2.0",
-            "object-assign": "^4.1.0",
-            "os-homedir": "^1.0.1",
-            "parse-json": "^2.2.0",
-            "require-from-string": "^1.1.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "require-from-string": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-1.2.1.tgz",
-          "integrity": "sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=",
-          "dev": true
-        }
-      }
-    },
-    "postcss-load-plugins": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz",
-      "integrity": "sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI=",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^2.1.1",
-        "object-assign": "^4.1.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
-          "integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==",
-          "dev": true,
-          "requires": {
-            "is-directory": "^0.3.1",
-            "js-yaml": "^3.4.3",
-            "minimist": "^1.2.0",
-            "object-assign": "^4.1.0",
-            "os-homedir": "^1.0.1",
-            "parse-json": "^2.2.0",
-            "require-from-string": "^1.1.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "require-from-string": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-1.2.1.tgz",
-          "integrity": "sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=",
-          "dev": true
         }
       }
     },
     "postcss-loader": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.5.tgz",
-      "integrity": "sha512-pV7kB5neJ0/1tZ8L1uGOBNTVBCSCXQoIsZMsrwvO8V2rKGa2tBl/f80GGVxow2jJnRJ2w1ocx693EKhZAb9Isg==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.6.tgz",
+      "integrity": "sha512-hgiWSc13xVQAq25cVw80CH0l49ZKlAnU1hKPOdRrNj89bokRr/bZF2nT+hebPPF9c9xs8c3gw3Fr2nxtmXYnNg==",
       "dev": true,
       "requires": {
         "loader-utils": "^1.1.0",
         "postcss": "^6.0.0",
-        "postcss-load-config": "^1.2.0",
+        "postcss-load-config": "^2.0.0",
         "schema-utils": "^0.4.0"
       }
     },
@@ -15053,12 +17330,12 @@
       }
     },
     "postcss-nesting": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-4.2.1.tgz",
-      "integrity": "sha512-IkyWXICwagCnlaviRexi7qOdwPw3+xVVjgFfGsxmztvRVaNxAlrypOIKqDE5mxY+BVxnId1rnUKBRQoNE2VDaA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-6.0.0.tgz",
+      "integrity": "sha512-Yoglsy6eZbDCbRIXoYSmnIt9ao4xyg07iFwVBd7WyIkDzMSeRxIqUk8xEAdkeJQ7eGfWo6RufrTU7FSUjZ22fg==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.11"
+        "postcss": "^6.0.22"
       }
     },
     "postcss-normalize-charset": {
@@ -15242,6 +17519,15 @@
         }
       }
     },
+    "postcss-overflow-shorthand": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-1.0.1.tgz",
+      "integrity": "sha512-QeJk23W8dLP2DrWYSKTwfFfh4Tcy5Msr58vuuxCPcCijX/07jva0OGNKtUH9vZ6NnXB2WEsnfIIg5M0ScPEWeQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.22"
+      }
+    },
     "postcss-page-break": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-1.0.0.tgz",
@@ -15251,60 +17537,151 @@
         "postcss": "^6.0.16"
       }
     },
-    "postcss-preset-env": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-3.5.0.tgz",
-      "integrity": "sha512-1I7ve+XzmNLJMZDORLOjSpY28t2H1qADEUcp2tQzuLBxAsbWMBUTDpSPsCKBduoqd4zWuH4bI/04W4T4hveHQw==",
+    "postcss-place": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-3.0.1.tgz",
+      "integrity": "sha512-6Cg0z39zBU4FOS85Z6+Us+GCIW7UqKdOGH/9j26LwMzZ3L909wG7NP3BF+L12AEeIL5XfI8Q5SWu9Or3nJTS8g==",
       "dev": true,
       "requires": {
-        "@csstools/postcss-image-set-function": "^1.0.0",
-        "browserslist": "^3.2.4",
-        "caniuse-lite": "^1.0.30000823",
-        "cssdb": "^1.6.0",
-        "postcss": "^6.0.21",
-        "postcss-apply": "^0.9.0",
-        "postcss-attribute-case-insensitive": "^2.0.0",
+        "postcss": "^6.0.22",
+        "postcss-values-parser": "^1.5.0"
+      }
+    },
+    "postcss-prepend-imports": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-prepend-imports/-/postcss-prepend-imports-1.0.1.tgz",
+      "integrity": "sha1-v0WBiAhcM/82mVzJbJFojWSYjig=",
+      "dev": true,
+      "requires": {
+        "postcss": "^5.0.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "5.2.18",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
+          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^1.1.3",
+            "js-base64": "^2.1.9",
+            "source-map": "^0.5.6",
+            "supports-color": "^3.2.3"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^1.0.0"
+          }
+        }
+      }
+    },
+    "postcss-preset-env": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-5.2.2.tgz",
+      "integrity": "sha512-ehhyyssfRLv6N5zysA09lTgL1KgGOt9RMuXEOrB8CV+aH6Ky1fz1OMmEv9YK+JQ6okRIeQTktOZ+STfTZj2ckw==",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "^8.6.5",
+        "browserslist": "^3.2.8",
+        "caniuse-lite": "^1.0.30000865",
+        "cssdb": "^3.1.0",
+        "postcss": "^6.0.23",
+        "postcss-attribute-case-insensitive": "^3.0.1",
+        "postcss-color-functional-notation": "^1.0.2",
         "postcss-color-hex-alpha": "^3.0.0",
         "postcss-color-mod-function": "^2.4.2",
-        "postcss-color-rebeccapurple": "^3.0.0",
-        "postcss-color-rgb": "^2.0.0",
+        "postcss-color-rebeccapurple": "^3.1.0",
         "postcss-custom-media": "^6.0.0",
         "postcss-custom-properties": "^7.0.0",
         "postcss-custom-selectors": "^4.0.1",
-        "postcss-dir-pseudo-class": "^3.0.0",
-        "postcss-focus-visible": "^2.0.0",
+        "postcss-dir-pseudo-class": "^4.0.0",
+        "postcss-env-function": "^1.0.0",
+        "postcss-focus-visible": "^3.0.0",
+        "postcss-focus-within": "^2.0.0",
         "postcss-font-family-system-ui": "^3.0.0",
         "postcss-font-variant": "^3.0.0",
+        "postcss-gap-properties": "^1.0.0",
+        "postcss-image-set-function": "^2.0.0",
         "postcss-initial": "^2.0.0",
+        "postcss-lab-function": "^1.0.1",
         "postcss-logical": "^1.1.1",
         "postcss-media-minmax": "^3.0.0",
-        "postcss-nesting": "^4.2.1",
+        "postcss-nesting": "^6.0.0",
+        "postcss-overflow-shorthand": "^1.0.1",
         "postcss-page-break": "^1.0.0",
-        "postcss-pseudo-class-any-link": "^4.0.0",
+        "postcss-place": "^3.0.1",
+        "postcss-pseudo-class-any-link": "^5.0.0",
         "postcss-replace-overflow-wrap": "^2.0.0",
         "postcss-selector-matches": "^3.0.1",
         "postcss-selector-not": "^3.0.1"
-      }
-    },
-    "postcss-property-lookup": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-property-lookup/-/postcss-property-lookup-2.0.0.tgz",
-      "integrity": "sha512-KUb53a7UZWDMVb0SRODOonc4H1wlbgQ0VfYwmJaR1xWPorhariEz0U7x0ri3W/imFs6HqLYWP7hl2yMvi5Ty+w==",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.0.1",
-        "postcss": "^6.0.6",
-        "tcomb": "^3.2.21"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30000865",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
+          "integrity": "sha512-vs79o1mOSKRGv/1pSkp4EXgl4ZviWeYReXw60XfacPU64uQWZwJT6vZNmxRF9O+6zu71sJwMxLK5JXxbzuVrLw==",
+          "dev": true
+        }
       }
     },
     "postcss-pseudo-class-any-link": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz",
-      "integrity": "sha1-kVKgYT00UHIFE+iJKFS65C0O5o4=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-5.0.0.tgz",
+      "integrity": "sha512-rA5grdRhLLMMI654eOZVuKGr4fUBQNGSH0K+7j5839CiBA/IvNt/Ewt7aIrkGZPySKI3nqzs34HefO8U0Fxahg==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.1",
-        "postcss-selector-parser": "^2.2.3"
+        "postcss": "^6.0.22",
+        "postcss-selector-parser": "^4.0.0"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
+          "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
+          "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^1.0.1",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
       }
     },
     "postcss-reduce-idents": {
@@ -15744,21 +18121,6 @@
         }
       }
     },
-    "precss": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/precss/-/precss-3.1.2.tgz",
-      "integrity": "sha512-TAEKJjzNyKIwyDeJ3yuaTl1x0CoFw+VyycR3dO18Kl2rGU/rPNocCYH1cry1sstWwGKl3RpJhDfZ2ZdzscM0IQ==",
-      "dev": true,
-      "requires": {
-        "postcss": "^6.0.19",
-        "postcss-advanced-variables": "^2.3.3",
-        "postcss-atroot": "^0.1.3",
-        "postcss-extend-rule": "^1.1.0",
-        "postcss-nested": "^3.0.0",
-        "postcss-preset-env": "^3.2.2",
-        "postcss-property-lookup": "^2.0.0"
-      }
-    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -15778,9 +18140,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.4.tgz",
-      "integrity": "sha512-emsEZ2bAigL1lq6ssgkpPm1MIBqgeTvcp90NxOP5XDqprub/V/WS2Hfgih3mS7/1dqTUvhG+sxx1Dv8crnVexA==",
+      "version": "1.13.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.7.tgz",
+      "integrity": "sha512-KIU72UmYPGk4MujZGYMFwinB7lOf2LsDNGSOC8ufevsrPLISrZbNJlWstRi3m0AMuszbH+EFSQ/r6w56RSPK6w==",
       "dev": true
     },
     "pretty-error": {
@@ -15821,22 +18183,10 @@
       }
     },
     "pretty-time": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.0.0.tgz",
-      "integrity": "sha512-+8bAuWoeG7CBA4Yz5NrcN8NyjD86YcrlxquWlYRLgfwxzXtbHXUnPWeXW5jzTsBwaEf89KNM0luWnRXh6l02EA==",
-      "dev": true,
-      "requires": {
-        "is-number": "^5.0.0",
-        "nanoseconds": "^1.0.0"
-      },
-      "dependencies": {
-        "is-number": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-5.0.0.tgz",
-          "integrity": "sha512-LmVHHP5dTJwrwZg2Jjqp7K5jpvcnYvYD1LMpvGadMsMv5+WXoDSLBQ0+zmuBJmuZGh2J2K845ygj/YukxUnr4A==",
-          "dev": true
-        }
-      }
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
+      "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==",
+      "dev": true
     },
     "prismjs": {
       "version": "1.15.0",
@@ -15881,13 +18231,13 @@
       "dev": true
     },
     "prompts": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.9.tgz",
-      "integrity": "sha512-RMRvwAUDVUMhP/z3YfDW6igMwT0UnL+w3XCUUNxxHjgwJnVEdHWYJVjM7hQMPub8HCk12xZYAqWlbgLBnqebwg==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.12.tgz",
+      "integrity": "sha512-pgR1GE1JM8q8UsHVIgjdK62DPwvrf0kvaKWJ/mfMoCm2lwfIReX/giQ1p0AlMoUXNhQap/8UiOdqi3bOROm/eg==",
       "dev": true,
       "requires": {
-        "clorox": "^1.0.1",
-        "sisteransi": "^0.1.0"
+        "kleur": "^1.0.0",
+        "sisteransi": "^0.1.1"
       }
     },
     "prop-types": {
@@ -16037,6 +18387,31 @@
       "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==",
+      "dev": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=",
+      "dev": true
+    },
+    "randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "dev": true,
+      "requires": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      }
+    },
     "randomatic": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz",
@@ -16144,6 +18519,62 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-adopt": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/react-adopt/-/react-adopt-0.6.0.tgz",
+      "integrity": "sha1-5f+QOmVdMIIhf4K8nVAzpLZPr60=",
+      "dev": true,
+      "requires": {
+        "hoist-non-react-statics": "^2.5.0",
+        "react": "^16.3.2",
+        "react-display-name": "^0.2.4"
+      }
+    },
+    "react-breakpoints": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-breakpoints/-/react-breakpoints-3.0.0.tgz",
+      "integrity": "sha512-NyFWlbjUpRXZyooKABokMLkpbAZ4YiWPURv7oWqf9uYyH/wow08YlKUMF864IBLHOSrFmRISe0/uiu7SYl7E8A==",
+      "dev": true,
+      "requires": {
+        "create-react-context": "0.2.1",
+        "hoist-non-react-statics": "2.5.0",
+        "lodash.debounce": "4.0.8"
+      },
+      "dependencies": {
+        "create-react-context": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.1.tgz",
+          "integrity": "sha512-dmGgrAJ/nKoQRRcoonkqWWM9uxk6ClzCHUDKZ8zGdc4MxDwvLVG8s/gzIXtWET7lTAoFSXkeCQ113L1p3QSFmw==",
+          "dev": true,
+          "requires": {
+            "fbjs": "^0.8.0",
+            "gud": "^1.0.0"
+          }
+        },
+        "hoist-non-react-statics": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz",
+          "integrity": "sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w==",
+          "dev": true
+        }
+      }
+    },
+    "react-content-loader": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-3.1.2.tgz",
+      "integrity": "sha512-9Fv10F6rrzFDIT04aoRsw3dbN6l6onNXbBvCpt4OjXZFGDz/P65laNIujHVTlVjcqErut9d4BL0aplVByyGcJw==",
+      "dev": true
+    },
+    "react-copy-to-clipboard": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
+      "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==",
+      "dev": true,
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dev-utils": {
       "version": "6.0.0-next.3e165448",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-6.0.0-next.3e165448.tgz",
@@ -16334,25 +18765,39 @@
         }
       }
     },
+    "react-display-name": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.4.tgz",
+      "integrity": "sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA==",
+      "dev": true
+    },
     "react-docgen": {
-      "version": "3.0.0-beta9",
-      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-3.0.0-beta9.tgz",
-      "integrity": "sha512-3UqwxygAP/eZdDtOKum6vClKWUlceZ7RBVQ3Fe122l1WBYOqHcBzoUZIwN8feaLVo+s2eB/q+NkBfanLgvmt+w==",
+      "version": "3.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-3.0.0-rc.0.tgz",
+      "integrity": "sha512-quhNeAo5LeACZ31LDAifq2Knyz2XE+Zm9QLo4EHgw+NifxBzH8FCQ5PyAPORqaAhWMiPOwYoIZ0biZVGqEkYag==",
       "dev": true,
       "requires": {
+        "@babel/parser": "7.0.0-beta.53",
         "async": "^2.1.4",
         "babel-runtime": "^6.9.2",
-        "babylon": "7.0.0-beta.31",
         "commander": "^2.9.0",
         "doctrine": "^2.0.0",
         "node-dir": "^0.1.10",
-        "recast": "^0.12.6"
+        "recast": "^0.15.0"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.53.tgz",
+          "integrity": "sha1-H0XrYXv5Rj1IKywE00nZ5O2/SJI=",
+          "dev": true
+        }
       }
     },
     "react-docgen-typescript": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-1.6.1.tgz",
-      "integrity": "sha512-GNjoMwGfksDcPKnMMJ8LKElV/gWZ478B3cJMDNp3MnZ6Dd49jicpmlVg11/IpuycwWAfCyDiyv2VJNNJ55q5zA==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-1.6.2.tgz",
+      "integrity": "sha512-H4UmLjzEEhDZEfv9eewaZg5+36Xa3fmaOpYRF2l/DjOdLioaM8LRsMRnpGCTiCUfP9yNKSAqmPfixay8NTMVLg==",
       "dev": true
     },
     "react-docgen-typescript-loader": {
@@ -16378,13 +18823,13 @@
       }
     },
     "react-emotion": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.2.4.tgz",
-      "integrity": "sha1-mOAPcM4spO4TkjRgEj52PkksATo=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.2.6.tgz",
+      "integrity": "sha512-3GwLQ0Vib/X0G7KWY7N1F/7NmfoBLkkg3g9Jd8t6By5QUH0PyCSUVdDmfFBbgVKsAcpkjA0vcsMbiWeZusaRrA==",
       "dev": true,
       "requires": {
-        "babel-plugin-emotion": "^9.2.4",
-        "create-emotion-styled": "^9.2.3"
+        "babel-plugin-emotion": "^9.2.6",
+        "create-emotion-styled": "^9.2.6"
       }
     },
     "react-error-overlay": {
@@ -16394,15 +18839,15 @@
       "dev": true
     },
     "react-feather": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-1.1.0.tgz",
-      "integrity": "sha512-JlLSN6NyWWue/ZJ0pYOx0cfMWvIWFHnFkLKxOoM58RpVk2wjkr9GWtMKDx6EbnqyYP1e+JFp1W/eABfvP5rIGQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-1.1.1.tgz",
+      "integrity": "sha512-bF147qQQfFHki5RSOOhKQ1V7e30tW7xT5zd0x72KfyWi9iErzH1cM5FpqkGz5xylMbBsbzfv/AuwGp95TQwumA==",
       "dev": true
     },
     "react-final-form": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-3.6.2.tgz",
-      "integrity": "sha512-6gr+xOtOfRvoUwNwjZBSuc9M4p1kgMrGVI31zwPVac5U3k2uzkUOTgP7a54CzRiiRDajmPZVGDF2fQOv23dcsA==",
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-3.6.4.tgz",
+      "integrity": "sha512-7eVR5Qfls4fyL7dXQiUkr55zqM73WTnlPMhi8gm91UzeY6RI3SK9OTBUpQBIKWacMrt1nDs4uRdcvdVBTFJTag==",
       "dev": true
     },
     "react-hot-loader": {
@@ -16419,6 +18864,12 @@
         "shallowequal": "^1.0.2"
       }
     },
+    "react-is": {
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.1.tgz",
+      "integrity": "sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ==",
+      "dev": true
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -16431,11 +18882,63 @@
       "integrity": "sha512-OQvgdiPfWbAjudT8Q+V2aWsySCJW0aQ3wNjfOw1ooamydEQkDxRfWqfnEhCYLneCz67d+r3kBYoZlpAx5S+VWA==",
       "dev": true
     },
+    "react-popper": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
+      "integrity": "sha1-uZRSFE6P5KzHf6PZWajHngemUIQ=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-powerplug": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/react-powerplug/-/react-powerplug-0.1.6.tgz",
-      "integrity": "sha512-2bBoBaulpNnmXvM4nTQL3KKdsyzcufHI9ebpzoWlFZAplM0gn7Z0cBOcw2H8FFHGI38OMzo8CSpKYJaOJ8e/KA==",
-      "dev": true
+      "version": "1.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/react-powerplug/-/react-powerplug-1.0.0-rc.1.tgz",
+      "integrity": "sha512-TqeC/QT0xJ1gAI0SlqorHwzT9QD8z2tI+hQ/FFFiK6wZdRq4iQetYGcbgmcw7mpblOA8lIKwBgpk00Ja4VwncA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.0.0-beta.49"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0-beta.49",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.49.tgz",
+          "integrity": "sha1-A7O/B+uYIHLI6FHdLd1RECguYb8=",
+          "dev": true,
+          "requires": {
+            "core-js": "^2.5.6",
+            "regenerator-runtime": "^0.11.1"
+          }
+        }
+      }
+    },
+    "react-reconciler": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.7.0.tgz",
+      "integrity": "sha512-50JwZ3yNyMS8fchN+jjWEJOH3Oze7UmhxeoJLn2j6f3NjpfCRbcmih83XTWmzqtar/ivd5f7tvQhvvhism2fgg==",
+      "dev": true,
+      "requires": {
+        "fbjs": "^0.8.16",
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.0"
+      }
     },
     "react-relay": {
       "version": "github:coralproject/patched#aad037f8cbcd9c14d5f6fd96cfafb24c39eab937",
@@ -16447,6 +18950,17 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-responsive": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz",
+      "integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==",
+      "dev": true,
+      "requires": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.2.1",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
@@ -16493,29 +19007,47 @@
         "warning": "^4.0.1"
       }
     },
-    "react-spinners": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.3.2.tgz",
-      "integrity": "sha512-SZzc99QqKLq85uGWYvkVeHTEPMEpLwnvQOyY62vNqAT9WWdkGJgHKt4H7Z68ALiWYZGKT5oIclh/cdBX20546w==",
+    "react-router-hash-link": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-1.2.0.tgz",
+      "integrity": "sha1-zoJMxfBQLOmwaGu23ZwIZZskCUw=",
       "dev": true,
       "requires": {
-        "emotion": "^9.1.1",
-        "prop-types": "^15.5.10",
-        "react-emotion": "^9.1.1",
-        "recompose": "0.26.0"
+        "prop-types": "^15.6.0"
+      }
+    },
+    "react-test-renderer": {
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.1.tgz",
+      "integrity": "sha512-wyyiPxRZOTpKnNIgUBOB6xPLTpIzwcQMIURhZvzUqZzezvHjaGNsDPBhMac5fIY3Jf5NuKxoGvV64zDSOECPPQ==",
+      "dev": true,
+      "requires": {
+        "fbjs": "^0.8.16",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.0",
+        "react-is": "^16.4.1"
+      }
+    },
+    "react-timeago": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/react-timeago/-/react-timeago-4.1.9.tgz",
+      "integrity": "sha512-MKucv9nU65BOPqIrClAFxqvpGCC4RdRpqp0P1YIb7C3yT6TQVdcoOlr0k4TDHvLQhbkwd3nbTxiDQMa3iDlZxg==",
+      "dev": true
+    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
       },
       "dependencies": {
-        "recompose": {
-          "version": "0.26.0",
-          "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
-          "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
-          "dev": true,
-          "requires": {
-            "change-emitter": "^0.1.2",
-            "fbjs": "^0.8.1",
-            "hoist-non-react-statics": "^2.3.1",
-            "symbol-observable": "^1.0.4"
-          }
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
         }
       }
     },
@@ -16568,22 +19100,21 @@
       }
     },
     "realpath-native": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.0.0.tgz",
-      "integrity": "sha512-XJtlRJ9jf0E1H1SLeJyQ9PGzQD7S65h1pRXEcAeK48doKOnKxcgPeNohJvD5u/2sI9J1oke6E8bZHS/fmW1UiQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.0.1.tgz",
+      "integrity": "sha512-W14EcXuqUvKP8dkWkD7B95iMy77lpMnlFXbbk409bQtNCbeu0kvRE5reo+yIZ3JXxg6frbGsz2DLQ39lrCB40g==",
       "dev": true,
       "requires": {
         "util.promisify": "^1.0.0"
       }
     },
     "recast": {
-      "version": "0.12.9",
-      "resolved": "https://registry.npmjs.org/recast/-/recast-0.12.9.tgz",
-      "integrity": "sha512-y7ANxCWmMW8xLOaiopiRDlyjQ9ajKRENBH+2wjntIbk3A6ZR1+BLQttkmSHMY7Arl+AAZFwJ10grg2T6f1WI8A==",
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.15.2.tgz",
+      "integrity": "sha512-L4f/GqxjlEJ5IZ+tdll/l+6dVi2ylysWbkgFJbMuldD6Jklgfv6zJnCpuAZDfjwHhfcd/De0dDKelsTEPQ29qA==",
       "dev": true,
       "requires": {
-        "ast-types": "0.10.1",
-        "core-js": "^2.4.1",
+        "ast-types": "0.11.5",
         "esprima": "~4.0.0",
         "private": "~0.1.5",
         "source-map": "~0.6.1"
@@ -17035,6 +19566,12 @@
         "invariant": "^2.2.2"
       }
     },
+    "relay-local-schema": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/relay-local-schema/-/relay-local-schema-0.7.0.tgz",
+      "integrity": "sha1-onxxcMYUi5Fu0PhNbDAAm6MyoOQ=",
+      "dev": true
+    },
     "relay-runtime": {
       "version": "github:coralproject/patched#9dda7718393cb3aa6647bd3badf574c025f79d12",
       "from": "github:coralproject/patched#relay-runtime",
@@ -17469,6 +20006,16 @@
         "inherits": "^2.0.1"
       }
     },
+    "rst-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
+      "dev": true,
+      "requires": {
+        "lodash.flattendeep": "^4.4.0",
+        "nearley": "^2.7.10"
+      }
+    },
     "rsvp": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz",
@@ -17551,6 +20098,12 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "samsam": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.3.0.tgz",
+      "integrity": "sha512-1HwIYD/8UlOtFS3QO3w7ey+SdSDFE4HRNLZoZRYVQefrOY3l17epswImeB1ijgJFQJodIaHcwkp3r/myBjFVbg==",
+      "dev": true
+    },
     "sane": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/sane/-/sane-2.5.2.tgz",
@@ -17568,6 +20121,12 @@
         "watch": "~0.18.0"
       }
     },
+    "saslprep": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.0.tgz",
+      "integrity": "sha512-5lvKUEQ7lAN5/vPl5d3k8FQeDbEamu9kizfATfLLWV5h6Mkh1xcieR1FSsJkcSRUk49lF2tAW8gzXWVwtwZVhw==",
+      "optional": true
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -17813,10 +20372,37 @@
         }
       }
     },
+    "sinon": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-6.1.3.tgz",
+      "integrity": "sha512-yeTza8xIZZdiXntCHJAzKll/sSYE+DuJOS8hiSapzaLqdW8eCNVVC9je9SZYYTkPm2bLts9x6UYxwuMAVVrM6Q==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/formatio": "^2.0.0",
+        "@sinonjs/samsam": "^2.0.0",
+        "diff": "^3.5.0",
+        "lodash.get": "^4.4.2",
+        "lolex": "^2.4.2",
+        "nise": "^1.3.3",
+        "supports-color": "^5.4.0",
+        "type-detect": "^4.0.8"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "sisteransi": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-0.1.0.tgz",
-      "integrity": "sha512-kHXcIr0Z9FM6d7pwFDDIMQKGndIEtIF1oBSMXWtItpx4mrH1jhANVNT35GVekBekXl6J+5i7lJMIGq3Gm7pIdA==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-0.1.1.tgz",
+      "integrity": "sha512-PmGOd02bM9YO5ifxpw36nrNMBTptEtfRl4qUYl9SndkolplkrZZOW7PGHjrZL53QvMVj9nQ+TKqUnRsw4tJa4g==",
       "dev": true
     },
     "slash": {
@@ -18187,9 +20773,9 @@
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
     },
     "std-env": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-1.3.0.tgz",
-      "integrity": "sha512-3uwAVIQQYFiDRBoYuHE/5YnEuOnQjEWvL1ZMKSq+BGFkG2IK9ONFAIYn77h3Kzr3qd0SILi9/5Cu9BbZxaeNnA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-1.3.1.tgz",
+      "integrity": "sha512-KI2F2pPJpd3lHjng+QLezu0eq+QDtXcv1um016mhOPAJFHKL+09ykK5PUBWta2pZDC8BVV0VPya08A15bUXSLQ==",
       "dev": true,
       "requires": {
         "is-ci": "^1.1.0"
@@ -18385,9 +20971,9 @@
       }
     },
     "stylis": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.1.tgz",
-      "integrity": "sha512-yM4PyeHuwhIOUHNJxi1/Mbq8kVLv4AkyE7IYLP/LK0lIFcr3tRa2H1iZlBYKIxOlf+/jruBTe8DdKSyQX9w4OA==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.3.tgz",
+      "integrity": "sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ==",
       "dev": true
     },
     "stylis-rule-sheet": {
@@ -18406,16 +20992,13 @@
       }
     },
     "subscriptions-transport-ws": {
-      "version": "0.9.11",
-      "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.11.tgz",
-      "integrity": "sha512-B8fwTIJy2buUcBXM6Ffbax30XcEqvCqL8RXwbivBAiB3X9ezrTcF5nYMmNGZ47sxrDYA1XfQ5W3aTgJEm8BFJA==",
+      "version": "0.9.12",
+      "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.12.tgz",
+      "integrity": "sha512-57Ar8hjr/63fCx1kM3kyDr64FAPQITMguuFuTGgYVx2v1JOaPoTeZyTIenVPgv+7mDYt7E+h+Jyxvznb+UKVWw==",
       "requires": {
         "backo2": "^1.0.2",
         "eventemitter3": "^3.1.0",
         "iterall": "^1.2.1",
-        "lodash.assign": "^4.2.0",
-        "lodash.isobject": "^3.0.2",
-        "lodash.isstring": "^4.0.1",
         "symbol-observable": "^1.0.4",
         "ws": "^5.2.0"
       }
@@ -18490,12 +21073,6 @@
       "integrity": "sha512-dQRhbNQkRnaqauC7WqSJ21EEksgT0fYZX2lqXzGkpo8JNig9zGZTYoMGvyI2nWmXlE2VSVXVDu7wLVGu/mQEsg==",
       "dev": true
     },
-    "tcomb": {
-      "version": "3.2.27",
-      "resolved": "https://registry.npmjs.org/tcomb/-/tcomb-3.2.27.tgz",
-      "integrity": "sha512-XWdJW7F/M3YzXhDEUP8ycmNWoYymBtsHwCHoda0YF44RthJsls95TqDrmpAlC1sB/KXaCvkdBlcNRq+AaV6klA==",
-      "dev": true
-    },
     "term-size": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
@@ -18608,6 +21185,12 @@
         }
       }
     },
+    "text-encoding": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.6.4.tgz",
+      "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk=",
+      "dev": true
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -18688,6 +21271,12 @@
       "dev": true,
       "optional": true
     },
+    "titleize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/titleize/-/titleize-1.0.1.tgz",
+      "integrity": "sha512-rUwGDruKq1gX+FFHbTl5qjI7teVO7eOe+C8IcQ7QT+1BK3eEUXJqbZcBOeaRP4FwSC/C1A5jDoIVta0nIQ9yew==",
+      "dev": true
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -18787,6 +21376,12 @@
         }
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
+      "dev": true
+    },
     "topo": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/topo/-/topo-3.0.0.tgz",
@@ -18802,9 +21397,9 @@
       "dev": true
     },
     "touch": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
-      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-1.0.0.tgz",
+      "integrity": "sha1-RJy+LbrlqMgDjjDXH6D/RklHxN4=",
       "dev": true,
       "requires": {
         "nopt": "~1.0.10"
@@ -18874,364 +21469,117 @@
       "dev": true
     },
     "ts-jest": {
-      "version": "22.4.6",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-22.4.6.tgz",
-      "integrity": "sha512-kYQ6g1G1AU+bOO9rv+SSQXg4WTcni6Wx3AM48iHni0nP1vIuhdNRjKTE9Cxx36Ix/IOV7L85iKu07dgXJzH2pQ==",
+      "version": "23.0.0",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-23.0.0.tgz",
+      "integrity": "sha512-drIjGaoIfXgNi0UUxu963M57kgf+NE2xw386UmD/Ai2hmVpKPCcF2xRwnNMobnVfLQw4v6HSblTKuBg6v+pEBQ==",
       "dev": true,
       "requires": {
-        "babel-core": "^6.26.3",
         "babel-plugin-istanbul": "^4.1.6",
-        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-        "babel-preset-jest": "^22.4.3",
+        "babel-preset-jest": "^23.0.0",
         "cpx": "^1.5.0",
-        "fs-extra": "6.0.0",
-        "jest-config": "^22.4.3",
+        "fs-extra": "6.0.1",
+        "jest-config": "^23.0.0",
         "lodash": "^4.17.10",
-        "pkg-dir": "^2.0.0",
-        "source-map-support": "^0.5.5",
-        "yargs": "^11.0.0"
+        "pkg-dir": "^3.0.0",
+        "yargs": "^12.0.1"
       },
       "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "arr-diff": {
+        "decamelize": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
-          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
           "dev": true,
           "requires": {
-            "arr-flatten": "^1.0.1"
+            "xregexp": "4.0.0"
           }
         },
-        "array-unique": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
+          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
+          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
           "dev": true
         },
-        "babel-plugin-jest-hoist": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.4.tgz",
-          "integrity": "sha512-DUvGfYaAIlkdnygVIEl0O4Av69NtuQWcrjMOv6DODPuhuGLDnbsARz3AwiiI/EkIMMlxQDUcrZ9yoyJvTNjcVQ==",
-          "dev": true
-        },
-        "babel-preset-jest": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-22.4.4.tgz",
-          "integrity": "sha512-+dxMtOFwnSYWfum0NaEc0O03oSdwBsjx4tMSChRDPGwu/4wSY6Q6ANW3wkjKpJzzguaovRs/DODcT4hbSN8yiA==",
+        "pkg-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
           "dev": true,
           "requires": {
-            "babel-plugin-jest-hoist": "^22.4.4",
-            "babel-plugin-syntax-object-rest-spread": "^6.13.0"
+            "find-up": "^3.0.0"
           }
         },
-        "braces": {
-          "version": "1.8.5",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
-          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+        "yargs": {
+          "version": "12.0.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.1.tgz",
+          "integrity": "sha512-B0vRAp1hRX4jgIOWFtjfNjd9OA9RWYZ6tqGA9/I/IrTMsxmKvtWy+ersM+jzpQqbC3YfLzeABPdeTgcJ9eu1qQ==",
           "dev": true,
           "requires": {
-            "expand-range": "^1.8.1",
-            "preserve": "^0.2.0",
-            "repeat-element": "^1.1.2"
+            "cliui": "^4.0.0",
+            "decamelize": "^2.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^10.1.0"
           }
         },
-        "expand-brackets": {
-          "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
-          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+        "yargs-parser": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
+          "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
           "dev": true,
           "requires": {
-            "is-posix-bracket": "^0.1.0"
+            "camelcase": "^4.1.0"
           }
-        },
-        "expect": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/expect/-/expect-22.4.3.tgz",
-          "integrity": "sha512-XcNXEPehqn8b/jm8FYotdX0YrXn36qp4HWlrVT4ktwQas1l1LPxiVWncYnnL2eyMtKAmVIaG0XAp0QlrqJaxaA==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "jest-diff": "^22.4.3",
-            "jest-get-type": "^22.4.3",
-            "jest-matcher-utils": "^22.4.3",
-            "jest-message-util": "^22.4.3",
-            "jest-regex-util": "^22.4.3"
-          }
-        },
-        "extglob": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
-          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^1.0.0"
-          }
-        },
-        "fs-extra": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-6.0.0.tgz",
-          "integrity": "sha512-lk2cUCo8QzbiEWEbt7Cw3m27WMiRG321xsssbcIpfMhpRjrlC08WBOVQqj1/nQYYNnPtyIhP1oqLO3QwT2tPCw==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "is-extglob": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
-        },
-        "is-glob": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^1.0.0"
-          }
-        },
-        "jest-config": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-22.4.4.tgz",
-          "integrity": "sha512-9CKfo1GC4zrXSoMLcNeDvQBfgtqGTB1uP8iDIZ97oB26RCUb886KkKWhVcpyxVDOUxbhN+uzcBCeFe7w+Iem4A==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "glob": "^7.1.1",
-            "jest-environment-jsdom": "^22.4.1",
-            "jest-environment-node": "^22.4.1",
-            "jest-get-type": "^22.1.0",
-            "jest-jasmine2": "^22.4.4",
-            "jest-regex-util": "^22.1.0",
-            "jest-resolve": "^22.4.2",
-            "jest-util": "^22.4.1",
-            "jest-validate": "^22.4.4",
-            "pretty-format": "^22.4.0"
-          }
-        },
-        "jest-diff": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-22.4.3.tgz",
-          "integrity": "sha512-/QqGvCDP5oZOF6PebDuLwrB2BMD8ffJv6TAGAdEVuDx1+uEgrHpSFrfrOiMRx2eJ1hgNjlQrOQEHetVwij90KA==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "diff": "^3.2.0",
-            "jest-get-type": "^22.4.3",
-            "pretty-format": "^22.4.3"
-          }
-        },
-        "jest-environment-jsdom": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-22.4.3.tgz",
-          "integrity": "sha512-FviwfR+VyT3Datf13+ULjIMO5CSeajlayhhYQwpzgunswoaLIPutdbrnfUHEMyJCwvqQFaVtTmn9+Y8WCt6n1w==",
-          "dev": true,
-          "requires": {
-            "jest-mock": "^22.4.3",
-            "jest-util": "^22.4.3",
-            "jsdom": "^11.5.1"
-          }
-        },
-        "jest-environment-node": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-22.4.3.tgz",
-          "integrity": "sha512-reZl8XF6t/lMEuPWwo9OLfttyC26A5AMgDyEQ6DBgZuyfyeNUzYT8BFo6uxCCP/Av/b7eb9fTi3sIHFPBzmlRA==",
-          "dev": true,
-          "requires": {
-            "jest-mock": "^22.4.3",
-            "jest-util": "^22.4.3"
-          }
-        },
-        "jest-jasmine2": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-22.4.4.tgz",
-          "integrity": "sha512-nK3vdUl50MuH7vj/8at7EQVjPGWCi3d5+6aCi7Gxy/XMWdOdbH1qtO/LjKbqD8+8dUAEH+BVVh7HkjpCWC1CSw==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "co": "^4.6.0",
-            "expect": "^22.4.0",
-            "graceful-fs": "^4.1.11",
-            "is-generator-fn": "^1.0.0",
-            "jest-diff": "^22.4.0",
-            "jest-matcher-utils": "^22.4.0",
-            "jest-message-util": "^22.4.0",
-            "jest-snapshot": "^22.4.0",
-            "jest-util": "^22.4.1",
-            "source-map-support": "^0.5.0"
-          }
-        },
-        "jest-matcher-utils": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-22.4.3.tgz",
-          "integrity": "sha512-lsEHVaTnKzdAPR5t4B6OcxXo9Vy4K+kRRbG5gtddY8lBEC+Mlpvm1CJcsMESRjzUhzkz568exMV1hTB76nAKbA==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "jest-get-type": "^22.4.3",
-            "pretty-format": "^22.4.3"
-          }
-        },
-        "jest-message-util": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-22.4.3.tgz",
-          "integrity": "sha512-iAMeKxhB3Se5xkSjU0NndLLCHtP4n+GtCqV0bISKA5dmOXQfEbdEmYiu2qpnWBDCQdEafNDDU6Q+l6oBMd/+BA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0-beta.35",
-            "chalk": "^2.0.1",
-            "micromatch": "^2.3.11",
-            "slash": "^1.0.0",
-            "stack-utils": "^1.0.1"
-          }
-        },
-        "jest-mock": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-22.4.3.tgz",
-          "integrity": "sha512-+4R6mH5M1G4NK16CKg9N1DtCaFmuxhcIqF4lQK/Q1CIotqMs/XBemfpDPeVZBFow6iyUNu6EBT9ugdNOTT5o5Q==",
-          "dev": true
-        },
-        "jest-regex-util": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-22.4.3.tgz",
-          "integrity": "sha512-LFg1gWr3QinIjb8j833bq7jtQopiwdAs67OGfkPrvy7uNUbVMfTXXcOKXJaeY5GgjobELkKvKENqq1xrUectWg==",
-          "dev": true
-        },
-        "jest-resolve": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-22.4.3.tgz",
-          "integrity": "sha512-u3BkD/MQBmwrOJDzDIaxpyqTxYH+XqAXzVJP51gt29H8jpj3QgKof5GGO2uPGKGeA1yTMlpbMs1gIQ6U4vcRhw==",
-          "dev": true,
-          "requires": {
-            "browser-resolve": "^1.11.2",
-            "chalk": "^2.0.1"
-          }
-        },
-        "jest-snapshot": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-22.4.3.tgz",
-          "integrity": "sha512-JXA0gVs5YL0HtLDCGa9YxcmmV2LZbwJ+0MfyXBBc5qpgkEYITQFJP7XNhcHFbUvRiniRpRbGVfJrOoYhhGE0RQ==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "jest-diff": "^22.4.3",
-            "jest-matcher-utils": "^22.4.3",
-            "mkdirp": "^0.5.1",
-            "natural-compare": "^1.4.0",
-            "pretty-format": "^22.4.3"
-          }
-        },
-        "jest-util": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-22.4.3.tgz",
-          "integrity": "sha512-rfDfG8wyC5pDPNdcnAlZgwKnzHvZDu8Td2NJI/jAGKEGxJPYiE4F0ss/gSAkG4778Y23Hvbz+0GMrDJTeo7RjQ==",
-          "dev": true,
-          "requires": {
-            "callsites": "^2.0.0",
-            "chalk": "^2.0.1",
-            "graceful-fs": "^4.1.11",
-            "is-ci": "^1.0.10",
-            "jest-message-util": "^22.4.3",
-            "mkdirp": "^0.5.1",
-            "source-map": "^0.6.0"
-          }
-        },
-        "jest-validate": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-22.4.4.tgz",
-          "integrity": "sha512-dmlf4CIZRGvkaVg3fa0uetepcua44DHtktHm6rcoNVtYlpwe6fEJRkMFsaUVcFHLzbuBJ2cPw9Gl9TKfnzMVwg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "jest-config": "^22.4.4",
-            "jest-get-type": "^22.1.0",
-            "leven": "^2.1.0",
-            "pretty-format": "^22.4.0"
-          }
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        },
-        "micromatch": {
-          "version": "2.3.11",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
-          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
-          "dev": true,
-          "requires": {
-            "arr-diff": "^2.0.0",
-            "array-unique": "^0.2.1",
-            "braces": "^1.8.2",
-            "expand-brackets": "^0.1.4",
-            "extglob": "^0.3.1",
-            "filename-regex": "^2.0.0",
-            "is-extglob": "^1.0.0",
-            "is-glob": "^2.0.1",
-            "kind-of": "^3.0.2",
-            "normalize-path": "^2.0.1",
-            "object.omit": "^2.0.0",
-            "parse-glob": "^3.0.4",
-            "regex-cache": "^0.4.2"
-          }
-        },
-        "pretty-format": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-22.4.3.tgz",
-          "integrity": "sha512-S4oT9/sT6MN7/3COoOy+ZJeA92VmOnveLHgrwBE3Z1W5N9S2A1QGNYiE1z75DAENbJrXXUb+OWXhpJcg05QKQQ==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^3.0.0",
-            "ansi-styles": "^3.2.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
         }
       }
     },
     "ts-loader": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-4.4.1.tgz",
-      "integrity": "sha512-PvL6jgVEt4RurczrTOR8uI6uRmKRfRXiv3CyMRX8+MSQLlbedfbXtbJIdkhdpbqrsumb+Lc3qrxfmXHCmODyAg==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-4.4.2.tgz",
+      "integrity": "sha512-Z3Y1a7A0KZZ1s/mAZkt74l1NAF7Y5xUhD1V9VB8/1eUlUOk8Qa/oo46tO2Uu5kQ3wXypOlbv77lLQySjXEDcdw==",
       "dev": true,
       "requires": {
         "chalk": "^2.3.0",
@@ -19242,12 +21590,13 @@
       }
     },
     "ts-node": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-6.1.1.tgz",
-      "integrity": "sha512-79FnymLGDBd/nXoiak1L6w6fd9Zz9Ge/x8/Aglaeh31KkqRLDzbfT1vBGlO5dqc76WzufTlW4IYl7e01CVUF5A==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-6.2.0.tgz",
+      "integrity": "sha512-ZNT+OEGfUNVMGkpIaDJJ44Zq3Yr0bkU/ugN1PHbU+/01Z7UV1fsELRiTx1KuQNvQ1A3pGh3y25iYF6jXgxV21A==",
       "dev": true,
       "requires": {
         "arrify": "^1.0.0",
+        "buffer-from": "^1.1.0",
         "diff": "^3.1.0",
         "make-error": "^1.1.1",
         "minimist": "^1.2.0",
@@ -19257,9 +21606,9 @@
       }
     },
     "tsconfig-paths": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.4.0.tgz",
-      "integrity": "sha512-HrPwxZj+9zAY/rvaPGwjk/2bOjM9ItfwaHV4wEs+9RdrMJN6Xv3d3y9W/LXt/GhRx3FutAlTMz5Ztb4copBmLw==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.4.2.tgz",
+      "integrity": "sha512-2BzUwQG7iUES+xNkRXivgejCpH9ru7n/khgv9Gl0FxP0tYvlPIMp2NspeYOXg8Wjh08Yyo/sSTlo4slNO3IFLg==",
       "dev": true,
       "requires": {
         "deepmerge": "^2.0.1",
@@ -19399,6 +21748,12 @@
         "prelude-ls": "~1.1.2"
       }
     },
+    "type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true
+    },
     "type-is": {
       "version": "1.6.16",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
@@ -19589,6 +21944,12 @@
         }
       }
     },
+    "typed-styles": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==",
+      "dev": true
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -19596,9 +21957,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.1.tgz",
-      "integrity": "sha512-h6pM2f/GDchCFlldnriOhs1QHuwbnmj6/v7499eMHqPeW4V2G0elua2eIc2nu8v2NdHV0Gm+tzX83Hr6nUFjQA==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+      "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
       "dev": true
     },
     "ua-parser-js": {
@@ -19684,14 +22045,11 @@
       "integrity": "sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==",
       "dev": true
     },
-    "undefsafe": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
-      "integrity": "sha1-Il9rngM3Zj4Njnz9aG/Cg2zKznY=",
-      "dev": true,
-      "requires": {
-        "debug": "^2.2.0"
-      }
+    "underscore": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
+      "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ=",
+      "dev": true
     },
     "unherit": {
       "version": "1.1.1",
@@ -19997,43 +22355,6 @@
         "latest-version": "^3.0.0",
         "semver-diff": "^2.0.0",
         "xdg-basedir": "^3.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "upper-case": {
@@ -20076,9 +22397,9 @@
       }
     },
     "url-join": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/url-join/-/url-join-3.0.0.tgz",
-      "integrity": "sha1-JugROs4ZXqMND8OBhuRUAPnOpnI=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz",
+      "integrity": "sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo=",
       "dev": true
     },
     "url-loader": {
@@ -20165,9 +22486,9 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
-      "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
     "v8-compile-cache": {
       "version": "2.0.0",
@@ -20609,9 +22930,9 @@
       }
     },
     "webpack-hot-client": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/webpack-hot-client/-/webpack-hot-client-4.0.3.tgz",
-      "integrity": "sha512-NbBzN6BkVDMhYKX2Hc6FLbC28oeh6suLgK614n0MsvALJlkSqMBGTh5fw8ms9Euvkm/+VB2XnlaYs391RLGVow==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/webpack-hot-client/-/webpack-hot-client-4.1.1.tgz",
+      "integrity": "sha512-Gu3hEkFJIsvC+2Dg86FvAzIL8KSR88Ptk0QnV4wEucObB0c9aMIYbjSA9oPTV4X5OZRH6ftrk4FcSGsZmTLiWA==",
       "dev": true,
       "requires": {
         "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
@@ -20699,34 +23020,41 @@
       }
     },
     "webpack-serve": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/webpack-serve/-/webpack-serve-1.0.4.tgz",
-      "integrity": "sha512-WhI9PMY2YLFliZhDsQFE5Os/On5Py6DGZpeBJyDM8xl0cspxgvXmWFywACn2YWWDgowqIxRqveyGh2RwdFWTNQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/webpack-serve/-/webpack-serve-2.0.2.tgz",
+      "integrity": "sha512-KQra2vayPKE2gooZRr2jF0Cs9AcQrS60Dmc6gMlFn4DmPkk/EmCuCODiAw008XedjwMBt8kUapDXJVu4gDH9Mg==",
       "dev": true,
       "requires": {
         "@shellscape/koa-static": "^4.0.4",
+        "@webpack-contrib/cli-utils": "^1.0.2",
         "@webpack-contrib/config-loader": "^1.1.1",
+        "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
         "chalk": "^2.3.0",
         "clipboardy": "^1.2.2",
         "cosmiconfig": "^5.0.2",
         "debug": "^3.1.0",
-        "find-up": "^2.1.0",
+        "decamelize": "^2.0.0",
         "get-port": "^3.2.0",
         "import-local": "^1.0.0",
+        "is-plain-obj": "^1.1.0",
         "killable": "^1.0.0",
         "koa": "^2.4.1",
-        "koa-webpack": "^4.0.0",
-        "lodash": "^4.17.5",
+        "koa-webpack": "^5.1.0",
         "loud-rejection": "^1.6.0",
+        "mem": "^3.0.0",
         "meow": "^5.0.0",
+        "merge-options": "^1.0.1",
         "nanobus": "^4.3.1",
+        "node-version": "^1.1.3",
         "opn": "^5.1.0",
+        "p-defer": "^1.0.0",
+        "p-series": "^1.1.0",
         "resolve": "^1.6.0",
+        "strip-ansi": "^4.0.0",
         "time-fix-plugin": "^2.0.0",
         "update-notifier": "^2.3.0",
-        "url-join": "3.0.0",
+        "url-join": "^4.0.0",
         "v8-compile-cache": "^2.0.0",
-        "webpack-hot-client": "^3.0.0",
         "webpack-log": "^1.1.2"
       },
       "dependencies": {
@@ -20756,6 +23084,25 @@
             "ms": "2.0.0"
           }
         },
+        "decamelize": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
+          "dev": true,
+          "requires": {
+            "xregexp": "4.0.0"
+          }
+        },
+        "mem": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/mem/-/mem-3.0.1.tgz",
+          "integrity": "sha512-QKs47bslvOE0NbXOqG6lMxn6Bk0Iuw0vfrIeLykmQle2LkCw1p48dZDdzE+D88b/xqRJcZGcMNeDvSVma+NuIQ==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^1.0.0",
+            "p-is-promise": "^1.1.0"
+          }
+        },
         "parse-json": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -20774,33 +23121,18 @@
           "requires": {
             "ansi-regex": "^3.0.0"
           }
-        },
-        "webpack-hot-client": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/webpack-hot-client/-/webpack-hot-client-3.0.0.tgz",
-          "integrity": "sha512-6k91015hZ4Okkz8u6OzRgJygEL+3J3ay6HVZhWBF3tT2P0rZJ0mgca39dotJxngggUm3S8707c0vrcynn1IzEQ==",
-          "dev": true,
-          "requires": {
-            "json-stringify-safe": "^5.0.1",
-            "loglevelnext": "^1.0.2",
-            "strip-ansi": "^4.0.0",
-            "uuid": "^3.1.0",
-            "webpack-log": "^1.1.1",
-            "ws": "^4.0.0"
-          }
-        },
-        "ws": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
-          "integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0",
-            "safe-buffer": "~5.1.0"
-          }
         }
       }
     },
+    "webpack-serve-waitpage": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-serve-waitpage/-/webpack-serve-waitpage-1.0.0.tgz",
+      "integrity": "sha512-KWkHQIqowGaMkbzld3mMbR0LMLBGCmlpk8gBQhhv3VAmpRD+to2/wkOBsKIMR8IedFVcwdGev2k/lruSmV4aWA==",
+      "dev": true,
+      "requires": {
+        "ejs": "^2.6.1"
+      }
+    },
     "webpack-sources": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz",
@@ -20980,9 +23312,9 @@
       }
     },
     "ws": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.0.tgz",
-      "integrity": "sha512-c18dMeW+PEQdDFzkhDsnBAlS4Z8KGStBQQUcQ5mf7Nf689jyGk0594L+i9RaQuf4gog6SvWLJorz2NfSaqxZ7w==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
+      "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
       "requires": {
         "async-limiter": "~1.0.0"
       }
@@ -21005,6 +23337,12 @@
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
       "dev": true
     },
+    "xregexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
+      "integrity": "sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==",
+      "dev": true
+    },
     "xtend": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
@@ -21068,6 +23406,12 @@
         "camelcase": "^4.1.0"
       }
     },
+    "ylru": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ylru/-/ylru-1.2.1.tgz",
+      "integrity": "sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ==",
+      "dev": true
+    },
     "yn": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",
diff --git a/package.json b/package.json
index 5f615b41f..e625312da 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,11 @@
   "scripts": {
     "start": "node dist/index.js",
     "test": "node scripts/test.js --env=jsdom",
-    "build": "npm-run-all --parallel compile:* && npm-run-all --parallel build:*",
+    "build": "npm-run-all compile --parallel build:*",
     "build:client": "node ./scripts/build.js",
     "build:server": "tsc -p ./src/tsconfig.json",
-    "watch": "NODE_ENV=development ts-node ./scripts/watcher/bin/watcher.ts ./config/watcher.ts",
+    "watch": "NODE_ENV=development ts-node ./scripts/watcher/bin/watcher.ts --config ./config/watcher.ts",
+    "compile": "npm-run-all --parallel compile:*",
     "compile:css-types": "tcm src/core/client/",
     "compile:relay-stream": "relay-compiler --src ./src/core/client/stream --schema $(ts-node ./scripts/schemaPath.ts tenant) --language typescript --artifactDirectory ./src/core/client/stream/__generated__ --no-watchman",
     "start:development": "NODE_ENV=development ts-node --project ./src/tsconfig.json -r tsconfig-paths/register ./src/index.ts",
@@ -18,14 +19,16 @@
     "lint:server": "tslint --project ./src/tsconfig.json",
     "lint:client": "tslint --project ./src/core/client/tsconfig.json",
     "lint:scripts": "tslint --project ./tsconfig.json",
-    "docz:watch": "docz dev"
+    "docz": "docz"
   },
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
+    "@types/react-copy-to-clipboard": "^4.2.5",
+    "@types/react-tooltip": "^3.3.5",
     "apollo-server-express": "^1.3.6",
     "bunyan": "^1.8.12",
-    "convict": "^4.3.0",
+    "convict": "^4.3.1",
     "dataloader": "^1.4.0",
     "dotenv": "^6.0.0",
     "dotenv-expand": "^4.2.0",
@@ -36,20 +39,21 @@
     "graphql": "^0.13.2",
     "graphql-config": "^2.0.1",
     "graphql-redis-subscriptions": "^1.5.0",
-    "graphql-tools": "^3.0.2",
+    "graphql-tools": "^3.0.5",
     "ioredis": "^3.2.2",
     "joi": "^13.4.0",
     "lodash": "^4.17.10",
-    "luxon": "^1.2.1",
-    "mongodb": "^3.0.10",
+    "luxon": "^1.3.1",
+    "mongodb": "^3.1.1",
     "passport": "^0.4.0",
     "performance-now": "^2.1.0",
-    "subscriptions-transport-ws": "^0.9.11",
-    "uuid": "^3.2.1"
+    "subscriptions-transport-ws": "^0.9.12",
+    "uuid": "^3.3.2"
   },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.49",
     "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.49",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0-beta.53",
     "@babel/polyfill": "7.0.0-beta.49",
     "@babel/preset-env": "7.0.0-beta.49",
     "@babel/preset-react": "7.0.0-beta.49",
@@ -60,24 +64,32 @@
     "@types/convict": "^4.2.0",
     "@types/cross-spawn": "^6.0.0",
     "@types/dotenv": "^4.0.3",
+    "@types/enzyme": "^3.1.11",
+    "@types/enzyme-adapter-react-16": "^1.0.2",
     "@types/express": "^4.16.0",
-    "@types/graphql": "^0.13.1",
-    "@types/ioredis": "^3.2.8",
-    "@types/jest": "^23.1.1",
+    "@types/graphql": "^0.13.3",
+    "@types/ioredis": "^3.2.12",
+    "@types/jest": "^23.1.5",
     "@types/joi": "^13.0.8",
-    "@types/lodash": "^4.14.109",
+    "@types/jsdom": "^11.0.6",
+    "@types/lodash": "^4.14.111",
     "@types/luxon": "^0.5.3",
-    "@types/mongodb": "^3.0.19",
-    "@types/node": "^10.3.1",
+    "@types/mongodb": "^3.1.1",
+    "@types/node": "^10.5.2",
     "@types/passport": "^0.4.5",
     "@types/query-string": "^6.1.0",
     "@types/react-dom": "^16.0.6",
-    "@types/react-relay": "^1.3.6",
+    "@types/react-relay": "github:coralproject/patched#types/react-relay",
+    "@types/react-responsive": "^3.0.1",
+    "@types/react-test-renderer": "^16.0.1",
     "@types/recompose": "^0.26.1",
     "@types/relay-runtime": "github:coralproject/patched#types/relay-runtime",
+    "@types/sane": "^2.0.0",
+    "@types/sinon": "^5.0.1",
     "@types/uuid": "^3.4.3",
     "@types/ws": "^5.1.2",
-    "autoprefixer": "^8.6.0",
+    "autoprefixer": "^8.6.5",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.0-beta",
     "babel-plugin-relay": "github:coralproject/patched#babel-plugin-relay",
     "babel-preset-react-optimize": "^1.0.1",
@@ -89,43 +101,59 @@
     "copy-webpack-plugin": "^4.5.1",
     "cross-spawn": "^6.0.5",
     "css-loader": "^0.28.11",
-    "docz": "^0.2.6",
-    "docz-theme-default": "^0.2.10",
+    "docz": "^0.5.8",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "final-form": "^4.8.1",
-    "flat": "^4.0.0",
+    "flat": "^4.1.0",
     "fluent": "^0.6.4",
     "fluent-intl-polyfill": "^0.1.0",
     "fluent-langneg": "^0.1.0",
     "fluent-react": "^0.7.0",
-    "graphql-playground-middleware-express": "^1.7.0",
+    "graphql-playground-middleware-express": "^1.7.2",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.2.0",
+    "jest": "^23.4.1",
+    "jsdom": "^11.11.0",
     "loader-utils": "^1.1.0",
-    "nodemon": "^1.17.5",
     "npm-run-all": "^4.1.3",
+    "postcss-advanced-variables": "^2.3.3",
+    "postcss-css-variables": "^0.9.0",
     "postcss-flexbugs-fixes": "^3.3.1",
     "postcss-font-magician": "^2.2.1",
-    "postcss-loader": "^2.1.5",
-    "precss": "^3.1.2",
-    "prettier": "^1.13.4",
+    "postcss-import": "^11.1.0",
+    "postcss-loader": "^2.1.6",
+    "postcss-nested": "^3.0.0",
+    "postcss-prepend-imports": "^1.0.1",
+    "postcss-preset-env": "^5.2.1",
+    "prettier": "^1.13.7",
+    "pstree.remy": "^1.1.0",
     "query-string": "^6.1.0",
     "raw-loader": "^0.5.1",
     "react": "^16.4.0",
     "react-dev-utils": "6.0.0-next.3e165448",
     "react-dom": "^16.4.0",
-    "react-final-form": "^3.6.0",
+    "react-final-form": "^3.6.4",
     "react-relay": "github:coralproject/patched#react-relay",
+    "react-responsive": "^4.1.0",
+    "react-test-renderer": "^16.4.1",
+    "react-timeago": "^4.1.9",
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-popper": "^1.0.0-beta.6",
     "recompose": "^0.27.1",
     "relay-compiler": "github:coralproject/patched#relay-compiler",
     "relay-compiler-language-typescript": "github:coralproject/patched#relay-compiler-language-typescript",
+    "relay-local-schema": "^0.7.0",
     "relay-runtime": "github:coralproject/patched#relay-runtime",
     "relay-test-utils": "github:coralproject/patched#relay-test-utils",
+    "sane": "^2.5.2",
+    "sinon": "^6.1.3",
     "style-loader": "^0.21.0",
-    "ts-jest": "^22.4.6",
-    "ts-loader": "^4.3.1",
-    "ts-node": "^6.1.0",
-    "tsconfig-paths": "^3.4.0",
+    "ts-jest": "^23.0.0",
+    "ts-loader": "^4.4.2",
+    "ts-node": "^6.2.0",
+    "tsconfig-paths": "^3.4.2",
     "tsconfig-paths-webpack-plugin": "^3.1.4",
     "tslint": "^5.10.0",
     "tslint-config-prettier": "^1.13.0",
@@ -133,12 +161,12 @@
     "tslint-plugin-prettier": "^1.3.0",
     "tslint-react": "^3.6.0",
     "typed-css-modules": "^0.3.4",
-    "typescript": "^2.9.1",
+    "typescript": "^2.9.2",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "4.12.0",
     "webpack-cli": "^3.0.2",
     "webpack-dev-server": "^3.1.4",
-    "webpack-hot-client": "^4.0.3",
+    "webpack-hot-client": "^4.1.1",
     "webpack-manifest-plugin": "^2.0.3"
   }
-}
\ No newline at end of file
+}
diff --git a/scripts/test.js b/scripts/test.js
index 1ac08fd2e..f08b18de6 100644
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -19,11 +19,11 @@ const paths = require("../config/paths");
 
 const jest = require("jest");
 let argv = process.argv.slice(2);
+argv.push("--config", paths.appJestConfig);
 
 // Watch unless on CI or in coverage mode
 if (!process.env.CI && argv.indexOf("--coverage") < 0) {
   argv.push("--watch");
-  argv.push("--config", paths.appJestConfig);
 }
 
 jest.run(argv);
diff --git a/scripts/watcher/ChokidarWatcher.ts b/scripts/watcher/ChokidarWatcher.ts
index cbc91d705..65a6ad701 100644
--- a/scripts/watcher/ChokidarWatcher.ts
+++ b/scripts/watcher/ChokidarWatcher.ts
@@ -1,14 +1,22 @@
 import chokidar from "chokidar";
+import path from "path";
 import { Watcher, WatchOptions } from "./types";
 
+function prependRootDir(
+  prepend: string,
+  paths: ReadonlyArray<string>
+): string[] {
+  const prependFunc = (p: string) => path.resolve(prepend, p);
+  return paths.map(prependFunc);
+}
+
 export default class ChokidarWatcher implements Watcher {
   public watch(
+    rootDir: string,
     paths: ReadonlyArray<string>,
     options: WatchOptions = {}
   ): AsyncIterable<string> {
-    const client = chokidar.watch(paths as string[], {
-      ignored: options.ignore,
-    });
+    const resolvedPaths = prependRootDir(rootDir, paths);
 
     // An array to hold all changes, that has not yet been yield.
     const queue: string[] = [];
@@ -19,31 +27,38 @@ export default class ChokidarWatcher implements Watcher {
       | ({ resolve: (result: string) => void; reject: (error: Error) => void })
       | null = null;
 
-    // Listen for errors
-    client.on("error", (error: Error) => {
-      // Resolve pending request.
-      if (pending) {
-        pending.reject(error);
-        pending = null;
-        return;
-      }
-      if (!firstError) {
-        firstError = error;
-      }
-    });
+    // Only start client if we have something to watch.
+    if (paths.length) {
+      const client = chokidar.watch(resolvedPaths, {
+        ignored: options.ignore && prependRootDir(rootDir, options.ignore),
+      });
 
-    // Listen for changes
-    client.on("change", (pathFile: string) => {
-      // Resolve pending request.
-      if (pending) {
-        pending.resolve(pathFile);
-        pending = null;
-        return;
-      }
+      // Listen for errors
+      client.on("error", (error: Error) => {
+        // Resolve pending request.
+        if (pending) {
+          pending.reject(error);
+          pending = null;
+          return;
+        }
+        if (!firstError) {
+          firstError = error;
+        }
+      });
 
-      // There is no pending request, save it into the queue.
-      queue.unshift(pathFile);
-    });
+      // Listen for changes
+      client.on("change", (pathFile: string) => {
+        // Resolve pending request.
+        if (pending) {
+          pending.resolve(pathFile);
+          pending = null;
+          return;
+        }
+
+        // There is no pending request, save it into the queue.
+        queue.unshift(pathFile);
+      });
+    }
     return {
       [Symbol.asyncIterator]() {
         return {
diff --git a/scripts/watcher/CommandExecutor.ts b/scripts/watcher/CommandExecutor.ts
index 60cf15e6a..195fcdcff 100644
--- a/scripts/watcher/CommandExecutor.ts
+++ b/scripts/watcher/CommandExecutor.ts
@@ -1,3 +1,4 @@
+import chalk from "chalk";
 import spawn from "cross-spawn";
 import { Cancelable, debounce } from "lodash";
 
@@ -5,13 +6,13 @@ import { Executor } from "./types";
 
 interface CommandExecutorOptions {
   args?: ReadonlyArray<string>;
-  // If true, allow spawning multiple processes.
+  /** If true, allow spawning multiple processes. */
   spawnMutiple?: boolean;
 
-  // Specify the period in which the process is started at max once.
+  /** Specify the period in which the process is started at max once. */
   debounce?: number | false;
 
-  // If true, will run command upon initialization.
+  /** If true, will run command upon initialization. */
   runOnInit?: boolean;
 }
 
@@ -65,9 +66,9 @@ export default class CommandExecutor implements Executor {
 
     child.on("close", (code: number) => {
       this.isRunning = false;
-      if (code !== 0) {
+      if (code !== 0 && code !== null) {
         // tslint:disable-next-line: no-console
-        console.log(`We had an error building ${code}`);
+        console.log(chalk.red(`Command exited with ${code}`));
       }
       if (this.shouldRespawn) {
         this.spawnProcessPotentiallyDebounced();
diff --git a/scripts/watcher/LongRunningExecutor.ts b/scripts/watcher/LongRunningExecutor.ts
index cffe6f7db..358821b46 100644
--- a/scripts/watcher/LongRunningExecutor.ts
+++ b/scripts/watcher/LongRunningExecutor.ts
@@ -1,12 +1,15 @@
+import chalk from "chalk";
 import { ChildProcess } from "child_process";
 import spawn from "cross-spawn";
 import { Cancelable, debounce } from "lodash";
+import psTree from "pstree.remy";
+
 import { Executor } from "./types";
 
 interface LongRunningExecutorOptions {
   args?: ReadonlyArray<string>;
 
-  // Specify the period in which the process is restarted at max once.
+  /** Specify the period in which the process is restarted at max once. */
   debounce?: number;
 }
 
@@ -31,9 +34,6 @@ export default class LongRunningExecutor implements Executor {
     this.isRunning = true;
     this.process = spawn(this.cmd, this.args as string[], {
       stdio: "inherit",
-      // Have all child processes in their own group.
-      // See `process.kill` below.
-      detached: true,
       shell: !this.args,
     });
 
@@ -42,27 +42,53 @@ export default class LongRunningExecutor implements Executor {
 
       if (code !== 0 && code !== null) {
         // tslint:disable-next-line: no-console
-        console.error(`Exit code returned ${code}`);
+        console.log(chalk.red(`Command exited with ${code}`));
         return;
       }
       if (this.shouldRestart) {
+        this.shouldRestart = false;
         this.spawnProcess();
       }
     });
   }
 
-  private restart(): void {
+  private restart() {
     this.shouldRestart = true;
-    // Using the `-` will kill all child procceses in the group.
-    // See: https://azimi.me/2014/12/31/kill-child_process-node-js.html
-    process.kill(-this.process!.pid, "SIGTERM");
+    return this.internalKill();
   }
 
-  private kill(): void {
+  private kill() {
     this.shouldRestart = false;
-    // Using the `-` will kill all child procceses in the group.
-    // See: https://azimi.me/2014/12/31/kill-child_process-node-js.html
-    process.kill(-this.process!.pid, "SIGTERM");
+    return this.internalKill();
+  }
+
+  private async internalKill(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const signal = "SIGTERM";
+      if (process.platform === "win32") {
+        // Force kill (/F) the whole child tree (/T) by PID
+        spawn.sync("taskkill", [
+          "/pid",
+          this.process!.pid.toString(),
+          "/T",
+          "/F",
+        ]);
+        resolve();
+        return;
+      }
+
+      psTree(this.process!.pid, (err, kids) => {
+        if (err) {
+          reject(err);
+        }
+        spawn.sync("kill", [
+          `-${signal}`,
+          this.process!.pid.toString(),
+          ...kids.map(p => p.PID.toString()),
+        ]);
+        resolve();
+      });
+    });
   }
 
   // This is called before watching starts.
@@ -71,10 +97,10 @@ export default class LongRunningExecutor implements Executor {
   }
 
   // This is called before exiting.
-  public onCleanup() {
+  public async onCleanup() {
     this.restartDebounced.cancel();
     if (this.isRunning) {
-      this.kill();
+      await this.kill();
     }
   }
 
diff --git a/scripts/watcher/SaneWatcher.ts b/scripts/watcher/SaneWatcher.ts
new file mode 100644
index 000000000..1b2cbf098
--- /dev/null
+++ b/scripts/watcher/SaneWatcher.ts
@@ -0,0 +1,101 @@
+import chalk from "chalk";
+import { execSync } from "child_process";
+import sane from "sane";
+
+import { Watcher, WatchOptions } from "./types";
+
+interface SaneWatcherOptions {
+  /**
+   * Set to true to use watchman, false to disabled, and undefined
+   * for automatic detection.
+   */
+  watchman?: boolean;
+  /** Use polling, this might be required for network file systems. */
+  poll?: boolean;
+}
+
+function canUseWatchman(): boolean {
+  try {
+    execSync("watchman --version", { stdio: ["ignore"] });
+    return true;
+    // tslint:disable-next-line:no-empty
+  } catch (e) {}
+  return false;
+}
+
+export default class SaneWatcher implements Watcher {
+  private watchman?: boolean;
+  private poll: boolean;
+
+  constructor(options: SaneWatcherOptions = {}) {
+    this.watchman = options.watchman;
+    this.poll = options.poll || false;
+
+    // Autodetect watchman.
+    if (this.watchman === undefined && canUseWatchman()) {
+      this.watchman = true;
+      // tslint:disable-next-line:no-console
+      console.log(chalk.grey(`Watchman detected`));
+    }
+  }
+
+  public watch(
+    rootDir: string,
+    paths: ReadonlyArray<string>,
+    options: WatchOptions = {}
+  ): AsyncIterable<string> {
+    // An array to hold all changes, that has not yet been yield.
+    const queue: string[] = [];
+
+    // If this is set, a pending promise is waiting for the next result.
+    let pending: ({ resolve: (result: string) => void }) | null = null;
+
+    // Only start client if we have something to watch.
+    if (paths.length) {
+      // Setup client
+      const client = sane(rootDir, {
+        glob: paths as string[],
+        ignored: options.ignore as string[],
+        watchman: this.watchman,
+        poll: this.poll,
+      });
+
+      // Listen for changes
+      client.on("change", (pathFile: string) => {
+        // Resolve pending request.
+        if (pending) {
+          pending.resolve(pathFile);
+          pending = null;
+          return;
+        }
+
+        // There is no pending request, save it into the queue.
+        queue.unshift(pathFile);
+      });
+    }
+
+    return {
+      [Symbol.asyncIterator]() {
+        return {
+          next: () =>
+            new Promise<IteratorResult<string>>((resolve, reject) => {
+              const wrapped = {
+                resolve: (pathFile: string) =>
+                  resolve({
+                    done: false,
+                    value: pathFile,
+                  }),
+              };
+
+              if (queue.length) {
+                wrapped.resolve(queue.pop()!);
+                return;
+              }
+              // We need to wait for the next change event.
+              pending = wrapped;
+            }),
+        };
+      },
+    };
+  }
+}
diff --git a/scripts/watcher/bin/watcher.ts b/scripts/watcher/bin/watcher.ts
index 32209c064..c8126a2ec 100644
--- a/scripts/watcher/bin/watcher.ts
+++ b/scripts/watcher/bin/watcher.ts
@@ -4,16 +4,36 @@ import program from "commander";
 import path from "path";
 import watch from "../";
 
-program
+async function run(
+  args: ReadonlyArray<string>,
+  options: Record<string, string>
+) {
+  const only = args;
+  const { config: configFile = "" } = options;
+  if (!configFile) {
+    throw new Error("Config file not specified");
+  }
+
+  // tslint:disable-next-line:no-var-requires
+  let config: any = require(path.resolve(configFile));
+  if (config.__esModule) {
+    config = config.default;
+  }
+
+  try {
+    await watch(config, { only });
+  } catch (err) {
+    // tslint:disable-next-line:no-console
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+const cmd = program
   .version("0.1.0")
-  .usage("<configFile>")
-  .arguments("<configFile>")
+  .usage("[watchers or sets]")
+  .option("-c, --config <configFile>", "Use given config file")
   .description("Run watchers defined in <configFile>")
-  .action(configFile => {
-    let config: any = require(path.resolve(configFile));
-    if (config.__esModule) {
-      config = config.default;
-    }
-    watch(config);
-  })
   .parse(process.argv);
+
+run(cmd.args, cmd.opts());
diff --git a/scripts/watcher/types.ts b/scripts/watcher/types.ts
index f78daee24..fc099b9b2 100644
--- a/scripts/watcher/types.ts
+++ b/scripts/watcher/types.ts
@@ -5,24 +5,31 @@ export interface WatchOptions {
 }
 
 export interface Watcher {
+  onInit?(): void | Promise<void>;
+  onCleanup?(): void | Promise<void>;
   watch(
+    rootDir: string,
     paths: ReadonlyArray<string>,
     options?: WatchOptions
   ): AsyncIterable<string>;
 }
 
 export interface Executor {
-  onInit?(): void;
-  onCleanup?(): void;
+  onInit?(): void | Promise<void>;
+  onCleanup?(): void | Promise<void>;
   execute(filePath: string): void;
 }
 
+export interface Options {
+  only?: ReadonlyArray<string>;
+}
+
 export interface Config {
   rootDir?: string;
   backend?: Watcher;
-  watchers: {
-    [key: string]: WatchConfig;
-  };
+  watchers: Record<string, WatchConfig>;
+  defaultSet?: string;
+  sets?: Record<string, ReadonlyArray<string>>;
 }
 
 export interface WatchConfig {
@@ -47,4 +54,13 @@ export const configSchema = Joi.object({
       executor: Joi.object(),
     })
   ),
-});
+  defaultSet: Joi.string().optional(),
+  sets: Joi.object()
+    .pattern(
+      /.*/,
+      Joi.array()
+        .items(Joi.string())
+        .unique()
+    )
+    .optional(),
+}).with("defaultSet", "sets");
diff --git a/scripts/watcher/types/pstree.remy.d.ts b/scripts/watcher/types/pstree.remy.d.ts
new file mode 100644
index 000000000..4cca7eff8
--- /dev/null
+++ b/scripts/watcher/types/pstree.remy.d.ts
@@ -0,0 +1,6 @@
+declare module "pstree.remy" {
+  export default function psTree(
+    pid: number,
+    callback: (err: Error, kids: Array<{ PID: number }>) => void
+  ): void;
+}
diff --git a/scripts/watcher/watch.ts b/scripts/watcher/watch.ts
index 572f7107b..63ed48fd4 100644
--- a/scripts/watcher/watch.ts
+++ b/scripts/watcher/watch.ts
@@ -1,58 +1,106 @@
+import chalk from "chalk";
 import Joi from "joi";
-import path from "path";
+import { pickBy } from "lodash";
 
-import ChokidarWatcher from "./ChokidarWatcher";
-import { Config, configSchema, WatchConfig, Watcher } from "./types";
+import SaneWatcher from "./SaneWatcher";
+import { Config, configSchema, Options, WatchConfig, Watcher } from "./types";
 
 // Polyfill the asyncIterator symbol.
 if (Symbol.asyncIterator === undefined) {
   (Symbol as any).asyncIterator = Symbol.for("asyncIterator");
 }
 
-async function beginWatch(watcher: Watcher, key: string, config: WatchConfig) {
+async function beginWatch(
+  watcher: Watcher,
+  key: string,
+  config: WatchConfig,
+  rootDir: string
+) {
   const { paths, ignore, executor } = config;
   if (executor.onInit) {
-    executor.onInit();
+    await executor.onInit();
   }
-  for await (const filePath of watcher.watch(paths, { ignore })) {
+  for await (const filePath of watcher.watch(rootDir, paths, { ignore })) {
     // tslint:disable-next-line:no-console
-    console.log(`Execute "${key}"`);
+    console.log(chalk.cyanBright(`Execute "${key}"`));
     executor.execute(filePath);
   }
 }
 
-function prependRootDir(prepend: string, cfg: WatchConfig): WatchConfig {
-  const prependFunc = (p: string) => path.resolve(prepend, p);
-  return {
-    ...cfg,
-    paths: cfg.paths.map(prependFunc),
-    ignore: cfg.ignore ? cfg.ignore.map(prependFunc) : undefined,
-  };
-}
-
-function setupCleanup(config: Config) {
+function setupCleanup(watcher: Watcher, config: Config) {
   ["SIGINT", "SIGTERM"].forEach(signal =>
-    process.once(signal as any, () => {
+    process.once(signal as any, async () => {
+      const cleanups = [];
+      if (watcher.onCleanup) {
+        cleanups.push(watcher.onCleanup());
+      }
       for (const key of Object.keys(config.watchers)) {
         if (config.watchers[key].executor.onCleanup) {
-          config.watchers[key].executor.onCleanup!();
+          cleanups.push(config.watchers[key].executor.onCleanup!());
         }
       }
+      await Promise.all(cleanups);
       process.exit(0);
     })
   );
 }
 
-export default async function watch(config: Config) {
+function resolveSets(
+  sets: Record<string, ReadonlyArray<string>>,
+  value: ReadonlyArray<string>
+) {
+  const resolved: string[] = [];
+  value.forEach(v => {
+    if (v in sets) {
+      resolved.push(...sets[v]);
+      return;
+    }
+    resolved.push(v);
+  });
+  return resolved;
+}
+
+function filterOnly(
+  watchers: Config["watchers"],
+  only: ReadonlyArray<string>,
+  sets?: Record<string, ReadonlyArray<string>>
+): Config["watchers"] {
+  const resolved = sets ? resolveSets(sets, only) : only;
+  const unknown = resolved.filter(r => !(r in watchers));
+  if (unknown.length) {
+    throw new Error(`Watcher Configuration or Set for ${unknown} not found`);
+  }
+  return pickBy(watchers, (value, key) => {
+    if (resolved.indexOf(key) === -1) {
+      // tslint:disable-next-line:no-console
+      console.log(chalk.grey(`Disabled watcher "${key}"`));
+      return false;
+    }
+    return true;
+  }) as Config["watchers"];
+}
+
+export default async function watch(config: Config, options: Options = {}) {
   Joi.assert(config, configSchema);
-  const watcher = config.backend || new ChokidarWatcher();
-  setupCleanup(config);
-  for (const key of Object.keys(config.watchers)) {
+  const watcher: Watcher = config.backend || new SaneWatcher();
+  const rootDir = config.rootDir || process.cwd();
+  const defaultSet = config.defaultSet && [config.defaultSet];
+  const only = options.only && options.only.length ? options.only : defaultSet;
+
+  let watchersConfigs = config.watchers;
+  if (only) {
+    watchersConfigs = filterOnly(watchersConfigs, only, config.sets);
+  }
+
+  setupCleanup(watcher, config);
+  if (watcher.onInit) {
+    await watcher.onInit();
+  }
+
+  for (const key of Object.keys(watchersConfigs)) {
     // tslint:disable-next-line:no-console
-    console.log(`Start watcher "${key}"`);
-    const watcherConfig = config.rootDir
-      ? prependRootDir(config.rootDir, config.watchers[key])
-      : config.watchers[key];
-    beginWatch(watcher, key, watcherConfig);
+    console.log(chalk.cyanBright(`Start watcher "${key}"`));
+    const watcherConfig = watchersConfigs[key];
+    beginWatch(watcher, key, watcherConfig, rootDir);
   }
 }
diff --git a/src/core/client/.babelrc.js b/src/core/client/.babelrc.js
index 6650ad9c9..02fdffd71 100644
--- a/src/core/client/.babelrc.js
+++ b/src/core/client/.babelrc.js
@@ -8,5 +8,8 @@ module.exports = {
     production: {
       plugins: [],
     },
+    test: {
+      plugins: ["@babel/transform-modules-commonjs"],
+    },
   },
 };
diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
index 93bc84c43..d14c245f5 100644
--- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
@@ -1,7 +1,9 @@
 import { LocalizationProvider } from "fluent-react/compat";
 import { MessageContext } from "fluent/compat";
 import React, { StatelessComponent } from "react";
+import { Formatter } from "react-timeago";
 import { Environment } from "relay-runtime";
+import { UIContext } from "talk-ui/components";
 
 export interface TalkContext {
   // relayEnvironment for our relay framework.
@@ -9,6 +11,9 @@ export interface TalkContext {
 
   // localMessages for our i18n framework.
   localeMessages: MessageContext[];
+
+  // formatter for timeago.
+  timeagoFormatter?: Formatter;
 }
 
 const { Provider, Consumer } = React.createContext<TalkContext>({} as any);
@@ -27,7 +32,9 @@ export const TalkContextProvider: StatelessComponent<{
 }> = ({ value, children }) => (
   <Provider value={value}>
     <LocalizationProvider messages={value.localeMessages}>
-      {children}
+      <UIContext.Provider value={{ timeagoFormatter: value.timeagoFormatter }}>
+        {children}
+      </UIContext.Provider>
     </LocalizationProvider>
   </Provider>
 );
diff --git a/src/core/client/framework/lib/bootstrap/createContext.ts b/src/core/client/framework/lib/bootstrap/createContext.tsx
similarity index 71%
rename from src/core/client/framework/lib/bootstrap/createContext.ts
rename to src/core/client/framework/lib/bootstrap/createContext.tsx
index 764d09214..6043eacb9 100644
--- a/src/core/client/framework/lib/bootstrap/createContext.ts
+++ b/src/core/client/framework/lib/bootstrap/createContext.tsx
@@ -1,4 +1,7 @@
+import { Localized } from "fluent-react/compat";
 import { noop } from "lodash";
+import React from "react";
+import { Formatter } from "react-timeago";
 import { Environment, Network, RecordSource, Store } from "relay-runtime";
 
 import { generateMessages, LocalesData, negotiateLanguages } from "../i18n";
@@ -16,6 +19,25 @@ interface CreateContextArguments {
   init?: ((context: TalkContext) => void | Promise<void>);
 }
 
+/**
+ * timeagoFormatter integrates timeago into our translation
+ * framework. It gets injected into the UIContext.
+ */
+export const timeagoFormatter: Formatter = (value, unit, suffix) => {
+  // We use 'in' instead of 'from now' for language consistency
+  const ourSuffix = suffix === "from now" ? "in" : suffix;
+  return (
+    <Localized
+      id="framework-timeago"
+      $value={value}
+      $unit={unit}
+      $suffix={ourSuffix}
+    >
+      <span>now</span>
+    </Localized>
+  );
+};
+
 /**
  * `createContext` manages the dependencies of our framework
  * and returns a `TalkContext` that can be passed to the
@@ -46,6 +68,7 @@ export default async function createContext({
   const context = {
     relayEnvironment,
     localeMessages,
+    timeagoFormatter,
   };
 
   // Run custom initializations.
diff --git a/src/core/client/framework/lib/bootstrap/withContext.tsx b/src/core/client/framework/lib/bootstrap/withContext.tsx
index 82ae2695f..677da236a 100644
--- a/src/core/client/framework/lib/bootstrap/withContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/withContext.tsx
@@ -1,5 +1,9 @@
 import * as React from "react";
-import { hoistStatics, InferableComponentEnhancer } from "recompose";
+import {
+  hoistStatics,
+  InferableComponentEnhancer,
+  wrapDisplayName,
+} from "recompose";
 
 import { TalkContext, TalkContextConsumer } from "./TalkContext";
 
@@ -12,11 +16,17 @@ function withContext<T>(
   propsCallback: (context: TalkContext) => T
 ): InferableComponentEnhancer<T> {
   return hoistStatics<T>(
-    <U extends T>(WrappedComponent: React.ComponentType<U>) => (props: any) => (
-      <TalkContextConsumer>
-        {context => <WrappedComponent {...props} {...propsCallback(context)} />}
-      </TalkContextConsumer>
-    )
+    <U extends T>(WrappedComponent: React.ComponentType<U>) => {
+      const Component: React.StatelessComponent<any> = props => (
+        <TalkContextConsumer>
+          {context => (
+            <WrappedComponent {...props} {...propsCallback(context)} />
+          )}
+        </TalkContextConsumer>
+      );
+      Component.displayName = wrapDisplayName(WrappedComponent, "withContext");
+      return Component;
+    }
   );
 }
 
diff --git a/src/core/client/framework/lib/messages.tsx b/src/core/client/framework/lib/messages.tsx
index c8234c670..316cd6e8a 100644
--- a/src/core/client/framework/lib/messages.tsx
+++ b/src/core/client/framework/lib/messages.tsx
@@ -13,7 +13,7 @@ export const VALIDATION_REQUIRED = () => (
 );
 
 export const VALIDATION_TOO_SHORT = () => (
-  <Localized id="framework-validation-too-short">
+  <Localized id="framework-validation-tooShort">
     <span>This field is too short.</span>
   </Localized>
 );
diff --git a/src/core/client/framework/lib/relay/QueryRenderer.tsx b/src/core/client/framework/lib/relay/QueryRenderer.tsx
index 30a42dbe0..a5845c0b6 100644
--- a/src/core/client/framework/lib/relay/QueryRenderer.tsx
+++ b/src/core/client/framework/lib/relay/QueryRenderer.tsx
@@ -1,24 +1,18 @@
 import React, { Component } from "react";
-import { QueryRenderer } from "react-relay";
-import { CacheConfig, GraphQLTaggedNode, RerunParam } from "relay-runtime";
+import {
+  QueryRenderer,
+  QueryRendererProps as QueryRendererPropsOrig,
+} from "react-relay";
+
+import { Omit } from "talk-framework/types";
 
 import { TalkContextConsumer } from "../bootstrap/TalkContext";
 
-// Taken from relay types and added Generic support for Variables and Response
-export interface QueryRendererProps<V, R> {
-  cacheConfig?: CacheConfig;
-  query?: GraphQLTaggedNode | null;
-  render(readyState: ReadyState<R>): React.ReactElement<any> | undefined | null;
-  variables: V;
-  rerunParamExperimental?: RerunParam;
-}
-
-// Taken from relay types and added Generic support for Variables and Response
-export interface ReadyState<R> {
-  error: Error | undefined | null;
-  props: R | undefined | null;
-  retry?(): void;
-}
+// Omit environment as we are passing this from the context.
+export type QueryRendererProps<V, R> = Omit<
+  QueryRendererPropsOrig<V, R>,
+  "environment"
+>;
 
 /**
  * TalkQueryRenderer is a wrappper around  Relay's `QueryRenderer`.
diff --git a/src/core/client/framework/lib/relay/createMutationContainer.tsx b/src/core/client/framework/lib/relay/createMutationContainer.tsx
index 3e3d8bf60..d0a91e92d 100644
--- a/src/core/client/framework/lib/relay/createMutationContainer.tsx
+++ b/src/core/client/framework/lib/relay/createMutationContainer.tsx
@@ -1,5 +1,10 @@
 import * as React from "react";
-import { compose, hoistStatics, InferableComponentEnhancer } from "recompose";
+import {
+  compose,
+  hoistStatics,
+  InferableComponentEnhancer,
+  wrapDisplayName,
+} from "recompose";
 import { Environment } from "relay-runtime";
 
 import { withContext } from "../bootstrap";
@@ -19,6 +24,11 @@ function createMutationContainer<T extends string, I, R>(
     withContext(({ relayEnvironment }) => ({ relayEnvironment })),
     hoistStatics((WrappedComponent: React.ComponentType<any>) => {
       class CreateMutationContainer extends React.Component<any> {
+        public static displayName = wrapDisplayName(
+          WrappedComponent,
+          "createMutationContainer"
+        );
+
         private commit = (input: I) => {
           return commit(this.props.relayEnvironment, input);
         };
diff --git a/src/core/client/framework/lib/relay/index.ts b/src/core/client/framework/lib/relay/index.ts
index e55279f7c..43dca5178 100644
--- a/src/core/client/framework/lib/relay/index.ts
+++ b/src/core/client/framework/lib/relay/index.ts
@@ -7,6 +7,7 @@ export { default as QueryRenderer } from "./QueryRenderer";
 export * from "./QueryRenderer";
 export { default as createMutationContainer } from "./createMutationContainer";
 export { default as createAndRetain } from "./createAndRetain";
+export { default as wrapFetchWithLogger } from "./wrapFetchWithLogger";
 export {
   commitMutationPromise,
   commitMutationPromiseNormalized,
diff --git a/src/core/client/framework/lib/relay/withFragmentContainer.ts b/src/core/client/framework/lib/relay/withFragmentContainer.ts
index c4636fe3c..2541b2001 100644
--- a/src/core/client/framework/lib/relay/withFragmentContainer.ts
+++ b/src/core/client/framework/lib/relay/withFragmentContainer.ts
@@ -6,7 +6,7 @@ import { InferableComponentEnhancerWithProps } from "recompose";
  * from Relay.
  */
 export default <T>(
-  fragmentSpec: GraphQLTaggedNode
+  fragmentSpec: { [P in keyof T]: GraphQLTaggedNode }
 ): InferableComponentEnhancerWithProps<T, { [P in keyof T]: any }> => (
   component: React.ComponentType<any>
 ) => createFragmentContainer(component, fragmentSpec) as any;
diff --git a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
index d08aa5d55..9de4180bb 100644
--- a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
+++ b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
@@ -1,6 +1,11 @@
 import * as React from "react";
 import { compose, hoistStatics, InferableComponentEnhancer } from "recompose";
-import { CSelector, CSnapshot, Environment } from "relay-runtime";
+import {
+  CSelector,
+  CSnapshot,
+  Environment,
+  GraphQLTaggedNode,
+} from "relay-runtime";
 
 import { withContext } from "../bootstrap";
 
@@ -25,7 +30,7 @@ export const LOCAL_ID = "client:root.local";
  * must have the `LOCAL_ID`.
  */
 function withLocalStateContainer<T>(
-  fragmentSpec: any
+  fragmentSpec: GraphQLTaggedNode
 ): InferableComponentEnhancer<{ local: T }> {
   return compose(
     withContext(({ relayEnvironment }) => ({ relayEnvironment })),
@@ -33,7 +38,7 @@ function withLocalStateContainer<T>(
       class LocalStateContainer extends React.Component<Props, any> {
         constructor(props: Props) {
           super(props);
-          const fragment = fragmentSpec.data().default;
+          const fragment = (fragmentSpec as any).data().default;
           if (fragment.kind !== "Fragment") {
             throw new Error("Expected fragment");
           }
diff --git a/src/core/client/framework/lib/relay/withPaginationContainer.ts b/src/core/client/framework/lib/relay/withPaginationContainer.ts
index 5f768c0a7..bb2740d01 100644
--- a/src/core/client/framework/lib/relay/withPaginationContainer.ts
+++ b/src/core/client/framework/lib/relay/withPaginationContainer.ts
@@ -10,9 +10,13 @@ import { InferableComponentEnhancerWithProps } from "recompose";
  * withPaginationContainer is a curried version of `createPaginationContainers`
  * from Relay.
  */
-export default <T, InnerProps>(
-  fragmentSpec: GraphQLTaggedNode,
-  connectionConfig: ConnectionConfig<InnerProps>
+export default <T, InnerProps, FragmentVariables, QueryVariables>(
+  fragmentSpec: { [P in keyof T]: GraphQLTaggedNode },
+  connectionConfig: ConnectionConfig<
+    InnerProps,
+    FragmentVariables,
+    QueryVariables
+  >
 ): InferableComponentEnhancerWithProps<
   T & { relay: RelayPaginationProp },
   { [P in keyof T]: any }
diff --git a/src/core/client/framework/lib/relay/withRefetchContainer.ts b/src/core/client/framework/lib/relay/withRefetchContainer.ts
index 7d11e0e16..9e9989758 100644
--- a/src/core/client/framework/lib/relay/withRefetchContainer.ts
+++ b/src/core/client/framework/lib/relay/withRefetchContainer.ts
@@ -10,7 +10,7 @@ import { InferableComponentEnhancerWithProps } from "recompose";
  * from Relay.
  */
 export default <T>(
-  fragmentSpec: GraphQLTaggedNode,
+  fragmentSpec: { [P in keyof T]: GraphQLTaggedNode },
   refetchQuery: GraphQLTaggedNode
 ): InferableComponentEnhancerWithProps<
   T & { relay: RelayRefetchProp },
diff --git a/src/core/client/framework/lib/relay/wrapFetchWithLogger.ts b/src/core/client/framework/lib/relay/wrapFetchWithLogger.ts
new file mode 100644
index 000000000..d320e8ab0
--- /dev/null
+++ b/src/core/client/framework/lib/relay/wrapFetchWithLogger.ts
@@ -0,0 +1,25 @@
+import { FetchFunction } from "relay-runtime";
+
+/**
+ * Decorates the fetch function with error logging.
+ * Intended for testing purposes.
+ */
+export default function wrapFetchWithLogger(
+  fetch: FetchFunction,
+  logResult?: boolean
+): FetchFunction {
+  return async (...args: any[]) => {
+    try {
+      const result = await (fetch as any)(...args);
+      if (logResult) {
+        // tslint:disable-next-line:no-console
+        console.log(JSON.stringify(result));
+      }
+      return result;
+    } catch (err) {
+      // tslint:disable-next-line:no-console
+      console.error(err);
+      throw err;
+    }
+  };
+}
diff --git a/src/core/client/stream/.babelrc.js b/src/core/client/stream/.babelrc.js
index d2601c757..11bf9a670 100644
--- a/src/core/client/stream/.babelrc.js
+++ b/src/core/client/stream/.babelrc.js
@@ -1,5 +1,4 @@
 const path = require("path");
-
 module.exports = {
   extends: "../.babelrc.js",
   plugins: [
diff --git a/src/core/client/stream/components/App.css b/src/core/client/stream/components/App.css
new file mode 100644
index 000000000..68c4e29c4
--- /dev/null
+++ b/src/core/client/stream/components/App.css
@@ -0,0 +1,14 @@
+/* Here we add global stylings for body and document */
+:global {
+  body {
+    margin: "0";
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.root {
+}
diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx
new file mode 100644
index 000000000..9b91a8974
--- /dev/null
+++ b/src/core/client/stream/components/App.spec.tsx
@@ -0,0 +1,22 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import App from "./App";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof App> = {
+    asset: {},
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders correctly when asset is null", () => {
+  const props: PropTypesOf<typeof App> = {
+    asset: null,
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index dde8e386c..14659585a 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -1,33 +1,22 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Center } from "talk-ui/components";
+import { Flex } from "talk-ui/components";
 
-import AssetListContainer from "../containers/AssetListContainer";
-import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import StreamContainer from "../containers/StreamContainer";
-import Logo from "./Logo";
+
+import * as styles from "./App.css";
 
 export interface AppProps {
-  assets?: any | null;
-  asset?: {
-    id: string;
-    isClosed: boolean;
-    comments: any | null;
-  } | null;
+  asset: {} | null;
 }
 
 const App: StatelessComponent<AppProps> = props => {
-  if (props.assets) {
-    return <AssetListContainer assets={props.assets} />;
-  }
   if (props.asset) {
     return (
-      <Center>
-        <Logo gutterBottom />
-        <StreamContainer comments={props.asset.comments} />
-        <PostCommentFormContainer assetID={props.asset.id} />
-      </Center>
+      <Flex justifyContent="center" className={styles.root}>
+        <StreamContainer asset={props.asset} />
+      </Flex>
     );
   }
   return <div>Asset not found </div>;
diff --git a/src/core/client/stream/components/AssetList.tsx b/src/core/client/stream/components/AssetList.tsx
deleted file mode 100644
index a82c34fe6..000000000
--- a/src/core/client/stream/components/AssetList.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
-export interface AssetListProps {
-  assets: ReadonlyArray<{ id: string; title: string | null }>;
-}
-
-const AssetList: StatelessComponent<AssetListProps> = props => {
-  return (
-    <div>
-      {props.assets.map(asset => <div key={asset.id}>{asset.title}</div>)}
-    </div>
-  );
-};
-
-export default AssetList;
diff --git a/src/core/client/stream/components/Comment.css b/src/core/client/stream/components/Comment.css
deleted file mode 100644
index d43780d8f..000000000
--- a/src/core/client/stream/components/Comment.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.root {
-  width: 400px;
-}
-
-.gutterBottom {
-  margin-bottom: calc(2px * $spacing-unit);
-}
-
-.author {
-  font-weight: $font-weight-medium;
-}
diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
deleted file mode 100644
index c1b3f9303..000000000
--- a/src/core/client/stream/components/Comment.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import cn from "classnames";
-import React from "react";
-import { StatelessComponent } from "react";
-
-import { Typography } from "talk-ui/components";
-
-import * as styles from "./Comment.css";
-
-export interface CommentProps {
-  className?: string;
-  author: {
-    username: string;
-  } | null;
-  body: string | null;
-  gutterBottom?: boolean;
-}
-
-const Comment: StatelessComponent<CommentProps> = props => {
-  const rootClassName = cn(styles.root, props.className, {
-    [styles.gutterBottom]: props.gutterBottom,
-  });
-  return (
-    <div className={rootClassName}>
-      <Typography className={styles.author} gutterBottom>
-        {props.author && props.author.username}
-      </Typography>
-      <Typography>{props.body}</Typography>
-    </div>
-  );
-};
-
-export default Comment;
diff --git a/src/core/client/stream/components/Comment/Comment.spec.tsx b/src/core/client/stream/components/Comment/Comment.spec.tsx
new file mode 100644
index 000000000..8b409adeb
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Comment.spec.tsx
@@ -0,0 +1,19 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Comment from "./Comment";
+
+it("renders username and body", () => {
+  const props: PropTypesOf<typeof Comment> = {
+    id: "comment-id",
+    author: {
+      username: "Marvin",
+    },
+    body: "Woof",
+    createdAt: "1995-12-17T03:24:00.000Z",
+  };
+  const wrapper = shallow(<Comment {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
new file mode 100644
index 000000000..d77b6c4ad
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -0,0 +1,43 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+import { StatelessComponent } from "react";
+import { Button, Popover, Typography } from "talk-ui/components";
+import PermalinkPopover from "../PermalinkPopover";
+import Timestamp from "./Timestamp";
+import TopBar from "./TopBar";
+import Username from "./Username";
+
+export interface CommentProps {
+  id: string;
+  className?: string;
+  author: {
+    username: string;
+  } | null;
+  body: string | null;
+  createdAt: string;
+}
+
+const Comment: StatelessComponent<CommentProps> = props => {
+  return (
+    <div role="article">
+      <TopBar>
+        {props.author && <Username>{props.author.username}</Username>}
+        <Timestamp>{props.createdAt}</Timestamp>
+      </TopBar>
+      <Typography>{props.body}</Typography>
+      <div>
+        <Popover body={<PermalinkPopover commentId={props.id} />}>
+          {({ toggleShow, ref }) => (
+            <Button onClick={toggleShow} innerRef={ref} primary>
+              <Localized id="comments-permalink-share">
+                <span>Share</span>
+              </Localized>
+            </Button>
+          )}
+        </Popover>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;
diff --git a/src/core/client/stream/components/Comment/Timestamp.css b/src/core/client/stream/components/Comment/Timestamp.css
new file mode 100644
index 000000000..f2d263ad4
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Timestamp.css
@@ -0,0 +1,3 @@
+.root {
+  composes: timestamp from "talk-ui/shared/typography.css";
+}
diff --git a/src/core/client/stream/components/Comment/Timestamp.spec.tsx b/src/core/client/stream/components/Comment/Timestamp.spec.tsx
new file mode 100644
index 000000000..4a276b762
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Timestamp.spec.tsx
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Timestamp from "./Timestamp";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Timestamp> = {
+    children: "1995-12-17T03:24:00.000Z",
+  };
+  const wrapper = shallow(<Timestamp {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/Timestamp.tsx b/src/core/client/stream/components/Comment/Timestamp.tsx
new file mode 100644
index 000000000..e6228416f
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Timestamp.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { RelativeTime } from "talk-ui/components";
+
+import * as styles from "./Timestamp.css";
+
+export interface TimestampProps {
+  children: string;
+}
+
+const Timestamp: StatelessComponent<TimestampProps> = props => (
+  <RelativeTime className={styles.root} date={props.children} />
+);
+
+export default Timestamp;
diff --git a/src/core/client/stream/components/Comment/TopBar.css b/src/core/client/stream/components/Comment/TopBar.css
new file mode 100644
index 000000000..dff9c8a74
--- /dev/null
+++ b/src/core/client/stream/components/Comment/TopBar.css
@@ -0,0 +1,3 @@
+.root {
+  margin-bottom: calc(0.5 * var(--spacing-unit));
+}
diff --git a/src/core/client/stream/components/Comment/TopBar.spec.tsx b/src/core/client/stream/components/Comment/TopBar.spec.tsx
new file mode 100644
index 000000000..5ee691f70
--- /dev/null
+++ b/src/core/client/stream/components/Comment/TopBar.spec.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-framework/types";
+import { UIContext, UIContextProps } from "talk-ui/components";
+
+import TopBar from "./TopBar";
+
+it("renders correctly on small screens", () => {
+  const props: PropTypesOf<typeof TopBar> = {
+    children: <div>Hello World</div>,
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 320,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <TopBar {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly on big screens", () => {
+  const props: PropTypesOf<typeof TopBar> = {
+    children: <div>Hello World</div>,
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 1600,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <TopBar {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/TopBar.tsx b/src/core/client/stream/components/Comment/TopBar.tsx
new file mode 100644
index 000000000..2dfe6419d
--- /dev/null
+++ b/src/core/client/stream/components/Comment/TopBar.tsx
@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex, MatchMedia } from "talk-ui/components";
+
+import * as styles from "./TopBar.css";
+
+export interface TopBarProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const TopBar: StatelessComponent<TopBarProps> = props => {
+  const rootClassName = cn(styles.root, props.className);
+  return (
+    <MatchMedia minWidth="xs">
+      {matches => (
+        <Flex
+          className={rootClassName}
+          alignItems="baseline"
+          direction={matches ? "row" : "column"}
+          itemGutter={matches ? true : "half"}
+        >
+          {props.children}
+        </Flex>
+      )}
+    </MatchMedia>
+  );
+};
+
+export default TopBar;
diff --git a/src/core/client/stream/components/Comment/Username.css b/src/core/client/stream/components/Comment/Username.css
new file mode 100644
index 000000000..e2dd79a8e
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Username.css
@@ -0,0 +1,3 @@
+.root {
+  line-height: 1;
+}
diff --git a/src/core/client/stream/components/Comment/Username.spec.tsx b/src/core/client/stream/components/Comment/Username.spec.tsx
new file mode 100644
index 000000000..1a10e4012
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Username.spec.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-framework/types";
+import { UIContext, UIContextProps } from "talk-ui/components";
+
+import Username from "./Username";
+
+it("renders correctly on small screens", () => {
+  const props: PropTypesOf<typeof Username> = {
+    children: "Marvin",
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 320,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <Username {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly on big screens", () => {
+  const props: PropTypesOf<typeof Username> = {
+    children: "Marvin",
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 1600,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <Username {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/Username.tsx b/src/core/client/stream/components/Comment/Username.tsx
new file mode 100644
index 000000000..ada04c8ec
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Username.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { MatchMedia, Typography } from "talk-ui/components";
+
+import * as styles from "./Username.css";
+
+export interface UsernameProps {
+  children: string;
+}
+
+const Username: StatelessComponent<UsernameProps> = props => {
+  return (
+    <MatchMedia minWidth="xs">
+      {matches => (
+        <Typography
+          variant={matches ? "heading2" : "heading3"}
+          className={styles.root}
+          component="span"
+        >
+          {props.children}
+        </Typography>
+      )}
+    </MatchMedia>
+  );
+};
+
+export default Username;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
new file mode 100644
index 000000000..2d047c200
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders username and body 1`] = `
+<div
+  role="article"
+>
+  <TopBar>
+    <Username>
+      Marvin
+    </Username>
+    <Timestamp>
+      1995-12-17T03:24:00.000Z
+    </Timestamp>
+  </TopBar>
+  <withPropsOnChange(Typography)>
+    Woof
+  </withPropsOnChange(Typography)>
+</div>
+`;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap
new file mode 100644
index 000000000..862d6cad7
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(RelativeTime)
+  className="Timestamp-root"
+  date="1995-12-17T03:24:00.000Z"
+/>
+`;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
new file mode 100644
index 000000000..9253404bd
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly on big screens 1`] = `
+<div
+  className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders correctly on small screens 1`] = `
+<div
+  className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
new file mode 100644
index 000000000..ab0e141e6
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly on big screens 1`] = `
+<span
+  className="Typography-root Typography-heading2 Username-root"
+>
+  Marvin
+</span>
+`;
+
+exports[`renders correctly on small screens 1`] = `
+<span
+  className="Typography-root Typography-heading3 Username-root"
+>
+  Marvin
+</span>
+`;
diff --git a/src/core/client/stream/components/Comment/index.ts b/src/core/client/stream/components/Comment/index.ts
new file mode 100644
index 000000000..173033df9
--- /dev/null
+++ b/src/core/client/stream/components/Comment/index.ts
@@ -0,0 +1 @@
+export { default, default as Comment, CommentProps } from "./Comment";
diff --git a/src/core/client/stream/components/Indent.css b/src/core/client/stream/components/Indent.css
new file mode 100644
index 000000000..c675b03a6
--- /dev/null
+++ b/src/core/client/stream/components/Indent.css
@@ -0,0 +1,8 @@
+.root {
+  border-left: 3px solid;
+  padding-left: var(--spacing-unit);
+}
+
+.level0 {
+  border-color: var(--palette-secondary-darkest);
+}
diff --git a/src/core/client/stream/components/Indent.spec.tsx b/src/core/client/stream/components/Indent.spec.tsx
new file mode 100644
index 000000000..3108ba209
--- /dev/null
+++ b/src/core/client/stream/components/Indent.spec.tsx
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Indent from "./Indent";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Indent> = {
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<Indent {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Indent.tsx b/src/core/client/stream/components/Indent.tsx
new file mode 100644
index 000000000..7ea8fddf3
--- /dev/null
+++ b/src/core/client/stream/components/Indent.tsx
@@ -0,0 +1,15 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+
+import * as styles from "./Indent.css";
+
+export interface IndentProps {
+  level?: number;
+  children: React.ReactNode;
+}
+
+const Indent: StatelessComponent<IndentProps> = props => {
+  return <div className={cn(styles.root, styles.level0)}>{props.children}</div>;
+};
+
+export default Indent;
diff --git a/src/core/client/stream/components/Permalink.tsx b/src/core/client/stream/components/Permalink.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/stream/components/PermalinkPopover.css b/src/core/client/stream/components/PermalinkPopover.css
new file mode 100644
index 000000000..2d5f33fd2
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkPopover.css
@@ -0,0 +1,13 @@
+.textField {
+  margin-right: 5px;
+}
+
+.root {
+  background-color: #ffffff;
+  border: 1px solid #c9cacb;
+  box-sizing: border-box;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 1px;
+  padding: 6px 10px;
+  display: flex;
+}
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
new file mode 100644
index 000000000..a4d8feca2
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -0,0 +1,60 @@
+import { Localized } from "fluent-react/compat";
+import React, { CSSProperties } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { RefHandler } from "react-popper";
+import { Button, TextField } from "talk-ui/components";
+import * as styles from "./PermalinkPopover.css";
+
+interface InnerProps {
+  commentId: string;
+  style?: CSSProperties;
+  innerRef?: RefHandler;
+}
+
+interface State {
+  copied: boolean;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
+  public state: State = {
+    copied: false,
+  };
+
+  public onCopy = async () => {
+    await this.toggleCopied();
+    setTimeout(() => {
+      this.toggleCopied();
+    }, 800);
+  };
+
+  public toggleCopied = () => {
+    this.setState((state: State) => ({
+      copied: !state.copied,
+    }));
+  };
+
+  public render() {
+    const { commentId, style, innerRef } = this.props;
+    const { copied } = this.state;
+    return (
+      <div className={styles.root} style={style} ref={innerRef}>
+        <TextField defaultValue={commentId} className={styles.textField} />
+        <CopyToClipboard text={commentId} onCopy={this.onCopy}>
+          <Button primary>
+            {copied ? (
+              <Localized id="comments-permalink-copied">
+                <span>Copied!</span>
+              </Localized>
+            ) : (
+              <Localized id="comments-permalink-copy">
+                <span>Copy</span>
+              </Localized>
+            )}
+          </Button>
+        </CopyToClipboard>
+      </div>
+    );
+  }
+}
+
+export default PermalinkPopover;
diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index a536dcc8b..df045285d 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/src/core/client/stream/components/PostCommentForm.css
@@ -3,10 +3,12 @@
 
   display: block;
   height: 100px;
-  width: 400px;
-  margin-bottom: calc(2px * $spacing-unit);
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: var(--spacing-unit);
 }
 
-.postButton {
-  float: right;
+.postButtonContainer {
+  display: flex;
+  justify-content: flex-end;
 }
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 2187994be..09db70e39 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -39,11 +39,13 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             </div>
           )}
         </Field>
-        <Localized id="postCommentForm-submit">
-          <Button className={styles.postButton} disabled={submitting} primary>
-            Post
-          </Button>
-        </Localized>
+        <div className={styles.postButtonContainer}>
+          <Localized id="comments-postCommentForm-post">
+            <Button disabled={submitting} primary>
+              Post
+            </Button>
+          </Localized>
+        </div>
       </form>
     )}
   </Form>
diff --git a/src/core/client/stream/components/ReplyList.spec.tsx b/src/core/client/stream/components/ReplyList.spec.tsx
new file mode 100644
index 000000000..093d96049
--- /dev/null
+++ b/src/core/client/stream/components/ReplyList.spec.tsx
@@ -0,0 +1,42 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+import sinon, { SinonSpy } from "sinon";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ReplyList from "./ReplyList";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ReplyList> = {
+    commentID: "comment-id",
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onShowAll: noop,
+    hasMore: false,
+    disableShowAll: false,
+  };
+  const wrapper = shallow(<ReplyList {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when there is more", () => {
+  const props: PropTypesOf<typeof ReplyList> = {
+    commentID: "comment-id",
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onShowAll: sinon.spy(),
+    hasMore: true,
+    disableShowAll: false,
+  };
+
+  const wrapper = shallow(<ReplyList {...props} />);
+  it("renders a load more button", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("calls onLoadMore", () => {
+    wrapper
+      .find("#talk-comments-replyList-showAll--comment-id")
+      .simulate("click");
+    expect((props.onShowAll as SinonSpy).calledOnce).toBe(true);
+  });
+});
diff --git a/src/core/client/stream/components/ReplyList.tsx b/src/core/client/stream/components/ReplyList.tsx
new file mode 100644
index 000000000..17ad32ed2
--- /dev/null
+++ b/src/core/client/stream/components/ReplyList.tsx
@@ -0,0 +1,50 @@
+import { Localized } from "fluent-react/compat";
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { Button, Flex } from "talk-ui/components";
+
+import CommentContainer from "../containers/CommentContainer";
+import Indent from "./Indent";
+
+export interface ReplyListProps {
+  commentID: string;
+  comments: ReadonlyArray<{ id: string }>;
+  onShowAll: () => void;
+  hasMore: boolean;
+  disableShowAll: boolean;
+}
+
+const ReplyList: StatelessComponent<ReplyListProps> = props => {
+  return (
+    <Indent>
+      <Flex
+        direction="column"
+        id={`talk-comments-replyList-log--${props.commentID}`}
+        role="log"
+        itemGutter
+      >
+        {props.comments.map(comment => (
+          <CommentContainer key={comment.id} data={comment} />
+        ))}
+        {props.hasMore && (
+          <Localized id="comments-replyList-showAll">
+            <Button
+              id={`talk-comments-replyList-showAll--${props.commentID}`}
+              aria-controls={`talk-comments-replyList-log--${props.commentID}`}
+              onClick={props.onShowAll}
+              disabled={props.disableShowAll}
+              secondary
+              invert
+              fullWidth
+            >
+              Show All Replies
+            </Button>
+          </Localized>
+        )}
+      </Flex>
+    </Indent>
+  );
+};
+
+export default ReplyList;
diff --git a/src/core/client/stream/components/Stream.css b/src/core/client/stream/components/Stream.css
new file mode 100644
index 000000000..13c90d031
--- /dev/null
+++ b/src/core/client/stream/components/Stream.css
@@ -0,0 +1,4 @@
+.root {
+  width: 100%;
+  max-width: 400px;
+}
diff --git a/src/core/client/stream/components/Stream.spec.tsx b/src/core/client/stream/components/Stream.spec.tsx
new file mode 100644
index 000000000..335f8fe27
--- /dev/null
+++ b/src/core/client/stream/components/Stream.spec.tsx
@@ -0,0 +1,47 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+import sinon, { SinonSpy } from "sinon";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Stream from "./Stream";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Stream> = {
+    assetID: "asset-id",
+    isClosed: false,
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onLoadMore: noop,
+    disableLoadMore: false,
+    hasMore: false,
+  };
+  const wrapper = shallow(<Stream {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when there is more", () => {
+  const props: PropTypesOf<typeof Stream> = {
+    assetID: "asset-id",
+    isClosed: false,
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onLoadMore: sinon.spy(),
+    disableLoadMore: false,
+    hasMore: true,
+  };
+
+  const wrapper = shallow(<Stream {...props} />);
+  it("renders a load more button", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("calls onLoadMore", () => {
+    wrapper.find("#talk-comments-stream-loadMore").simulate("click");
+    expect((props.onLoadMore as SinonSpy).calledOnce).toBe(true);
+  });
+
+  const wrapperDisabledButton = shallow(<Stream {...props} disableLoadMore />);
+  it("disables load more button", () => {
+    expect(wrapperDisabledButton).toMatchSnapshot();
+  });
+});
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index c42bb21b3..da55050f5 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -1,18 +1,58 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
+import { Button, Flex } from "talk-ui/components";
+
 import CommentContainer from "../containers/CommentContainer";
+import PostCommentFormContainer from "../containers/PostCommentFormContainer";
+import ReplyListContainer from "../containers/ReplyListContainer";
+import Logo from "./Logo";
+import * as styles from "./Stream.css";
 
 export interface StreamProps {
+  assetID: string;
+  isClosed: boolean;
   comments: ReadonlyArray<{ id: string }>;
+  onLoadMore: () => void;
+  hasMore: boolean;
+  disableLoadMore: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <div>
-      {props.comments.map(comment => (
-        <CommentContainer key={comment.id} data={comment} gutterBottom />
-      ))}
+    <div className={styles.root}>
+      <Logo gutterBottom />
+      <PostCommentFormContainer assetID={props.assetID} />
+      <Flex
+        direction="column"
+        id="talk-comments-stream-log"
+        role="log"
+        aria-live="polite"
+        itemGutter
+      >
+        {props.comments.map(comment => (
+          <Flex direction="column" key={comment.id} itemGutter>
+            <CommentContainer data={comment} />
+            <ReplyListContainer comment={comment} />
+          </Flex>
+        ))}
+        {props.hasMore && (
+          <Localized id="comments-stream-loadMore">
+            <Button
+              id={"talk-comments-stream-loadMore"}
+              onClick={props.onLoadMore}
+              secondary
+              invert
+              fullWidth
+              disabled={props.disableLoadMore}
+              aria-controls="talk-comments-stream-log"
+            >
+              Load More
+            </Button>
+          </Localized>
+        )}
+      </Flex>
     </div>
   );
 };
diff --git a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
new file mode 100644
index 000000000..6a12e4e09
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Flex
+  className="App-root"
+  justifyContent="center"
+>
+  <Relay(StreamContainer)
+    asset={Object {}}
+  />
+</Flex>
+`;
+
+exports[`renders correctly when asset is null 1`] = `
+<div>
+  Asset not found 
+</div>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
new file mode 100644
index 000000000..910c819b2
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Indent-root Indent-level0"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
new file mode 100644
index 000000000..e48482470
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Indent>
+  <Flex
+    direction="column"
+    id="talk-comments-replyList-log--comment-id"
+    itemGutter={true}
+    role="log"
+  >
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-1",
+        }
+      }
+      key="comment-1"
+    />
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-2",
+        }
+      }
+      key="comment-2"
+    />
+  </Flex>
+</Indent>
+`;
+
+exports[`when there is more renders a load more button 1`] = `
+<Indent>
+  <Flex
+    direction="column"
+    id="talk-comments-replyList-log--comment-id"
+    itemGutter={true}
+    role="log"
+  >
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-1",
+        }
+      }
+      key="comment-1"
+    />
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-2",
+        }
+      }
+      key="comment-2"
+    />
+    <Localized
+      id="comments-replyList-showAll"
+    >
+      <withPropsOnChange(Button)
+        aria-controls="talk-comments-replyList-log--comment-id"
+        disabled={false}
+        fullWidth={true}
+        id="talk-comments-replyList-showAll--comment-id"
+        invert={true}
+        onClick={[Function]}
+        secondary={true}
+      >
+        Show All Replies
+      </withPropsOnChange(Button)>
+    </Localized>
+  </Flex>
+</Indent>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
new file mode 100644
index 000000000..a8210fd99
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
@@ -0,0 +1,214 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Stream-root"
+>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Flex
+    aria-live="polite"
+    direction="column"
+    id="talk-comments-stream-log"
+    itemGutter={true}
+    role="log"
+  >
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </Flex>
+  </Flex>
+</div>
+`;
+
+exports[`when there is more disables load more button 1`] = `
+<div
+  className="Stream-root"
+>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Flex
+    aria-live="polite"
+    direction="column"
+    id="talk-comments-stream-log"
+    itemGutter={true}
+    role="log"
+  >
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </Flex>
+    <Localized
+      id="comments-stream-loadMore"
+    >
+      <withPropsOnChange(Button)
+        aria-controls="talk-comments-stream-log"
+        disabled={true}
+        fullWidth={true}
+        id="talk-comments-stream-loadMore"
+        invert={true}
+        onClick={[Function]}
+        secondary={true}
+      >
+        Load More
+      </withPropsOnChange(Button)>
+    </Localized>
+  </Flex>
+</div>
+`;
+
+exports[`when there is more renders a load more button 1`] = `
+<div
+  className="Stream-root"
+>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Flex
+    aria-live="polite"
+    direction="column"
+    id="talk-comments-stream-log"
+    itemGutter={true}
+    role="log"
+  >
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </Flex>
+    <Localized
+      id="comments-stream-loadMore"
+    >
+      <withPropsOnChange(Button)
+        aria-controls="talk-comments-stream-log"
+        disabled={false}
+        fullWidth={true}
+        id="talk-comments-stream-loadMore"
+        invert={true}
+        onClick={[Function]}
+        secondary={true}
+      >
+        Load More
+      </withPropsOnChange(Button)>
+    </Localized>
+  </Flex>
+</div>
+`;
diff --git a/src/core/client/stream/containers/AppContainer.spec.tsx b/src/core/client/stream/containers/AppContainer.spec.tsx
new file mode 100644
index 000000000..17a0a676d
--- /dev/null
+++ b/src/core/client/stream/containers/AppContainer.spec.tsx
@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { AppContainer } from "./AppContainer";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof AppContainer> = {
+    data: {
+      asset: {},
+    },
+  };
+  const wrapper = shallow(<AppContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index 02abbf314..90eb1e1c6 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -11,30 +11,20 @@ interface InnerProps {
   data: Data;
 }
 
-const AppContainer: StatelessComponent<InnerProps> = props => {
+export const AppContainer: StatelessComponent<InnerProps> = props => {
   return <App {...props.data} />;
 };
 
-const enhanced = withFragmentContainer<{ data: Data }>(
-  graphql`
+const enhanced = withFragmentContainer<{ data: Data }>({
+  data: graphql`
     fragment AppContainer on Query
-      @argumentDefinitions(
-        assetID: { type: "ID!" }
-        showAssetList: { type: "Boolean!" }
-      ) {
-      assets @include(if: $showAssetList) {
-        ...AssetListContainer_assets
-      }
-      asset(id: $assetID) @skip(if: $showAssetList) {
-        id
-        isClosed
-        comments {
-          ...StreamContainer_comments
-        }
+      @argumentDefinitions(assetID: { type: "ID!" }) {
+      asset(id: $assetID) {
+        ...StreamContainer_asset
       }
     }
-  `
-)(AppContainer);
+  `,
+})(AppContainer);
 
 export type AppContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/stream/containers/AssetListContainer.tsx b/src/core/client/stream/containers/AssetListContainer.tsx
deleted file mode 100644
index 6e441f00e..000000000
--- a/src/core/client/stream/containers/AssetListContainer.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { StatelessComponent } from "react";
-import { graphql } from "react-relay";
-
-import { withFragmentContainer } from "talk-framework/lib/relay";
-import { PropTypesOf } from "talk-framework/types";
-import { AssetListContainer_assets as Data } from "talk-stream/__generated__/AssetListContainer_assets.graphql";
-
-import AssetList from "../components/AssetList";
-
-interface InnerProps {
-  assets: Data;
-}
-
-const AssetListContainer: StatelessComponent<InnerProps> = props => {
-  const assets = props.assets.edges.map(edge => edge.node);
-  return <AssetList assets={assets} />;
-};
-
-const enhanced = withFragmentContainer<{ assets: Data }>(
-  graphql`
-    fragment AssetListContainer_assets on AssetsConnection {
-      edges {
-        node {
-          id
-          title
-        }
-      }
-    }
-  `
-)(AssetListContainer);
-
-export type AssetListContainerProps = PropTypesOf<typeof enhanced>;
-export default enhanced;
diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
new file mode 100644
index 000000000..98612be38
--- /dev/null
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -0,0 +1,21 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { CommentContainer } from "./CommentContainer";
+
+it("renders username and body", () => {
+  const props: PropTypesOf<typeof CommentContainer> = {
+    data: {
+      author: {
+        username: "Marvin",
+      },
+      body: "Woof",
+      createdAt: "1995-12-17T03:24:00.000Z",
+    },
+  };
+
+  const wrapper = shallow(<CommentContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 9a4d03cd8..0316112d1 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -2,28 +2,39 @@ import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
 
 import withFragmentContainer from "talk-framework/lib/relay/withFragmentContainer";
-import { Omit, PropTypesOf } from "talk-framework/types";
+import { PropTypesOf } from "talk-framework/types";
 import { CommentContainer as Data } from "talk-stream/__generated__/CommentContainer.graphql";
 
-import Comment, { CommentProps } from "../components/Comment";
+import Comment from "../components/Comment";
 
-type InnerProps = { data: Data } & Omit<CommentProps, keyof Data>;
+interface InnerProps {
+  data: Data;
+}
 
-const CommentContainer: StatelessComponent<InnerProps> = props => {
+// tslint:disable-next-line:no-unused-expression
+graphql`
+  fragment CommentContainer_comment on Comment {
+    id
+    author {
+      username
+    }
+    body
+    createdAt
+  }
+`;
+
+export const CommentContainer: StatelessComponent<InnerProps> = props => {
   const { data, ...rest } = props;
   return <Comment {...rest} {...props.data} />;
 };
 
-const enhanced = withFragmentContainer<{ data: Data }>(
-  graphql`
+const enhanced = withFragmentContainer<{ data: Data }>({
+  data: graphql`
     fragment CommentContainer on Comment {
-      author {
-        username
-      }
-      body
+      ...CommentContainer_comment @relay(mask: false)
     }
-  `
-)(CommentContainer);
+  `,
+})(CommentContainer);
 
 export type CommentContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/stream/containers/PostCommentFormContainer.tsx b/src/core/client/stream/containers/PostCommentFormContainer.tsx
index d2da26f64..bf4ab8cf9 100644
--- a/src/core/client/stream/containers/PostCommentFormContainer.tsx
+++ b/src/core/client/stream/containers/PostCommentFormContainer.tsx
@@ -25,6 +25,8 @@ class PostCommentFormContainer extends Component<InnerProps> {
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
       }
+      // tslint:disable-next-line:no-console
+      console.error(error);
     }
     return undefined;
   };
diff --git a/src/core/client/stream/containers/ReplyListContainer.spec.tsx b/src/core/client/stream/containers/ReplyListContainer.spec.tsx
new file mode 100644
index 000000000..3a414dd51
--- /dev/null
+++ b/src/core/client/stream/containers/ReplyListContainer.spec.tsx
@@ -0,0 +1,86 @@
+import { shallow, ShallowWrapper } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ReplyList from "../components/ReplyList";
+import { ReplyListContainer } from "./ReplyListContainer";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ReplyListContainer> = {
+    comment: {
+      id: "comment-id",
+      replies: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: noop,
+      isLoading: noop,
+    } as any,
+  };
+  const wrapper = shallow(<ReplyListContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders correctly when replies are null", () => {
+  const props: PropTypesOf<typeof ReplyListContainer> = {
+    comment: {
+      id: "comment-id",
+      replies: null,
+    },
+    relay: {
+      hasMore: noop,
+      isLoading: noop,
+    } as any,
+  };
+  const wrapper = shallow(<ReplyListContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when has more replies", () => {
+  let finishLoading: ((error?: Error) => void) | null = null;
+  const props: PropTypesOf<ReplyListContainer> = {
+    comment: {
+      id: "comment-id",
+      replies: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: () => true,
+      isLoading: () => false,
+      loadMore: (_: any, callback: () => void) => (finishLoading = callback),
+    } as any,
+  };
+
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => (wrapper = shallow(<ReplyListContainer {...props} />)));
+
+  it("renders hasMore", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe("when showing all", () => {
+    beforeAll(() => {
+      wrapper
+        .find(ReplyList)
+        .props()
+        .onShowAll();
+    });
+    it("calls relay loadMore", () => {
+      expect(finishLoading).not.toBeNull();
+    });
+    it("disables show all button", () => {
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+    it("enable show all button after loading is done", () => {
+      finishLoading!();
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/core/client/stream/containers/ReplyListContainer.tsx b/src/core/client/stream/containers/ReplyListContainer.tsx
new file mode 100644
index 000000000..48db9645a
--- /dev/null
+++ b/src/core/client/stream/containers/ReplyListContainer.tsx
@@ -0,0 +1,135 @@
+import React from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import { withPaginationContainer } from "talk-framework/lib/relay";
+import { PropTypesOf } from "talk-framework/types";
+import { ReplyListContainer_comment as Data } from "talk-stream/__generated__/ReplyListContainer_comment.graphql";
+import {
+  COMMENT_SORT,
+  ReplyListContainerPaginationQueryVariables,
+} from "talk-stream/__generated__/ReplyListContainerPaginationQuery.graphql";
+
+import ReplyList from "../components/ReplyList";
+
+export interface InnerProps {
+  comment: Data;
+  relay: RelayPaginationProp;
+}
+
+export class ReplyListContainer extends React.Component<InnerProps> {
+  public state = {
+    disableShowAll: false,
+  };
+
+  public render() {
+    if (
+      this.props.comment.replies === null ||
+      this.props.comment.replies.edges.length === 0
+    ) {
+      return null;
+    }
+    const comments = this.props.comment.replies.edges.map(edge => edge.node);
+    return (
+      <ReplyList
+        commentID={this.props.comment.id}
+        comments={comments}
+        onShowAll={this.showAll}
+        hasMore={this.props.relay.hasMore()}
+        disableShowAll={this.state.disableShowAll}
+      />
+    );
+  }
+
+  private showAll = () => {
+    if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
+      return;
+    }
+
+    this.setState({ disableShowAll: true });
+    this.props.relay.loadMore(
+      999999999, // Fetch All Replies
+      error => {
+        this.setState({ disableShowAll: false });
+        if (error) {
+          // tslint:disable-next-line:no-console
+          console.error(error);
+        }
+      }
+    );
+  };
+}
+
+// TODO: (cvle) This should be autogenerated.
+interface FragmentVariables {
+  count: number;
+  cursor?: string;
+  orderBy: COMMENT_SORT;
+}
+
+const enhanced = withPaginationContainer<
+  { comment: Data },
+  InnerProps,
+  FragmentVariables,
+  ReplyListContainerPaginationQueryVariables
+>(
+  {
+    comment: graphql`
+      fragment ReplyListContainer_comment on Comment
+        @argumentDefinitions(
+          count: { type: "Int!", defaultValue: 5 }
+          cursor: { type: "Cursor" }
+          orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_ASC }
+        ) {
+        id
+        replies(first: $count, after: $cursor, orderBy: $orderBy)
+          @connection(key: "ReplyList_replies") {
+          edges {
+            node {
+              id
+              ...CommentContainer
+            }
+          }
+        }
+      }
+    `,
+  },
+  {
+    direction: "forward",
+    getConnectionFromProps(props) {
+      return props.comment && props.comment.replies;
+    },
+    // This is also the default implementation of `getFragmentVariables` if it isn't provided.
+    getFragmentVariables(prevVars, totalCount) {
+      return {
+        ...prevVars,
+        count: totalCount,
+      };
+    },
+    getVariables(props, { count, cursor }, fragmentVariables) {
+      return {
+        count,
+        cursor,
+        orderBy: fragmentVariables.orderBy,
+        commentID: props.comment.id,
+      };
+    },
+    query: graphql`
+      # Pagination query to be fetched upon calling 'loadMore'.
+      # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
+      query ReplyListContainerPaginationQuery(
+        $count: Int!
+        $cursor: Cursor
+        $orderBy: COMMENT_SORT!
+        $commentID: ID!
+      ) {
+        comment(id: $commentID) {
+          ...ReplyListContainer_comment
+            @arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
+        }
+      }
+    `,
+  }
+)(ReplyListContainer);
+
+export type ReplyListContainerProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/stream/containers/StreamContainer.spec.tsx b/src/core/client/stream/containers/StreamContainer.spec.tsx
new file mode 100644
index 000000000..2e19bda86
--- /dev/null
+++ b/src/core/client/stream/containers/StreamContainer.spec.tsx
@@ -0,0 +1,73 @@
+import { shallow, ShallowWrapper } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Stream from "../components/Stream";
+import { StreamContainer } from "./StreamContainer";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<StreamContainer> = {
+    asset: {
+      id: "asset-id",
+      isClosed: false,
+      comments: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: noop,
+      isLoading: noop,
+    } as any,
+  };
+  const wrapper = shallow(<StreamContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when has more comments", () => {
+  let finishLoading: ((error?: Error) => void) | null = null;
+  const props: PropTypesOf<StreamContainer> = {
+    asset: {
+      id: "asset-id",
+      isClosed: false,
+      comments: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: () => true,
+      isLoading: () => false,
+      loadMore: (_: any, callback: () => void) => (finishLoading = callback),
+    } as any,
+  };
+
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => (wrapper = shallow(<StreamContainer {...props} />)));
+
+  it("renders hasMore", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe("when loading more", () => {
+    beforeAll(() => {
+      wrapper
+        .find(Stream)
+        .props()
+        .onLoadMore();
+    });
+    it("calls relay loadMore", () => {
+      expect(finishLoading).not.toBeNull();
+    });
+    it("disables load more button", () => {
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+    it("enable load more button after loading is done", () => {
+      finishLoading!();
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx
index 771c25efa..d81319deb 100644
--- a/src/core/client/stream/containers/StreamContainer.tsx
+++ b/src/core/client/stream/containers/StreamContainer.tsx
@@ -1,32 +1,132 @@
-import React, { StatelessComponent } from "react";
-import { graphql } from "react-relay";
+import React from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
 
-import { withFragmentContainer } from "talk-framework/lib/relay";
+import { withPaginationContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
-import { StreamContainer_comments as Data } from "talk-stream/__generated__/StreamContainer_comments.graphql";
+import { StreamContainer_asset as Data } from "talk-stream/__generated__/StreamContainer_asset.graphql";
+import {
+  COMMENT_SORT,
+  StreamContainerPaginationQueryVariables,
+} from "talk-stream/__generated__/StreamContainerPaginationQuery.graphql";
 
 import Stream from "../components/Stream";
 
 interface InnerProps {
-  comments: Data;
+  asset: Data;
+  relay: RelayPaginationProp;
 }
 
-const StreamContainer: StatelessComponent<InnerProps> = props => {
-  const comments = props.comments.edges.map(edge => edge.node);
-  return <Stream comments={comments} />;
-};
+export class StreamContainer extends React.Component<InnerProps> {
+  public state = {
+    disableLoadMore: false,
+  };
 
-const enhanced = withFragmentContainer<{ comments: Data }>(
-  graphql`
-    fragment StreamContainer_comments on CommentsConnection {
-      edges {
-        node {
-          id
-          ...CommentContainer
+  public render() {
+    const comments = this.props.asset.comments.edges.map(edge => edge.node);
+    return (
+      <Stream
+        assetID={this.props.asset.id}
+        isClosed={this.props.asset.isClosed}
+        comments={comments}
+        onLoadMore={this.loadMore}
+        hasMore={this.props.relay.hasMore()}
+        disableLoadMore={this.state.disableLoadMore}
+      />
+    );
+  }
+
+  private loadMore = () => {
+    if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
+      return;
+    }
+    this.setState({ disableLoadMore: true });
+    this.props.relay.loadMore(
+      10, // Fetch the next 10 feed items
+      error => {
+        this.setState({ disableLoadMore: false });
+        if (error) {
+          // tslint:disable-next-line:no-console
+          console.error(error);
         }
       }
-    }
-  `
+    );
+  };
+}
+
+// TODO: (cvle) This should be autogenerated.
+interface FragmentVariables {
+  count: number;
+  cursor?: string;
+  orderBy: COMMENT_SORT;
+}
+
+const enhanced = withPaginationContainer<
+  { asset: Data },
+  InnerProps,
+  FragmentVariables,
+  StreamContainerPaginationQueryVariables
+>(
+  {
+    asset: graphql`
+      fragment StreamContainer_asset on Asset
+        @argumentDefinitions(
+          count: { type: "Int!", defaultValue: 5 }
+          cursor: { type: "Cursor" }
+          orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
+        ) {
+        id
+        isClosed
+        comments(first: $count, after: $cursor, orderBy: $orderBy)
+          @connection(key: "Stream_comments") {
+          edges {
+            node {
+              id
+              ...CommentContainer
+              ...ReplyListContainer_comment
+            }
+          }
+        }
+      }
+    `,
+  },
+  {
+    direction: "forward",
+    getConnectionFromProps(props) {
+      return props.asset && props.asset.comments;
+    },
+    // This is also the default implementation of `getFragmentVariables` if it isn't provided.
+    getFragmentVariables(prevVars, totalCount) {
+      return {
+        ...prevVars,
+        count: totalCount,
+      };
+    },
+    getVariables(props, { count, cursor }, fragmentVariables) {
+      return {
+        count,
+        cursor,
+        orderBy: fragmentVariables.orderBy,
+        // assetID isn't specified as an @argument for the fragment, but it should be a
+        // variable available for the fragment under the query root.
+        assetID: props.asset.id,
+      };
+    },
+    query: graphql`
+      # Pagination query to be fetched upon calling 'loadMore'.
+      # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
+      query StreamContainerPaginationQuery(
+        $count: Int!
+        $cursor: Cursor
+        $orderBy: COMMENT_SORT!
+        $assetID: ID!
+      ) {
+        asset(id: $assetID) {
+          ...StreamContainer_asset
+            @arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
+        }
+      }
+    `,
+  }
 )(StreamContainer);
 
 export type StreamContainerProps = PropTypesOf<typeof enhanced>;
diff --git a/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
new file mode 100644
index 000000000..f9a5c5316
--- /dev/null
+++ b/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<App
+  asset={Object {}}
+/>
+`;
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
new file mode 100644
index 000000000..9e2476f37
--- /dev/null
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders username and body 1`] = `
+<Comment
+  author={
+    Object {
+      "username": "Marvin",
+    }
+  }
+  body="Woof"
+  createdAt="1995-12-17T03:24:00.000Z"
+/>
+`;
diff --git a/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
new file mode 100644
index 000000000..52aa9c57b
--- /dev/null
+++ b/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={false}
+  onShowAll={[Function]}
+/>
+`;
+
+exports[`renders correctly when replies are null 1`] = `""`;
+
+exports[`when has more replies renders hasMore 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={false}
+  hasMore={true}
+  onShowAll={[Function]}
+/>
+`;
+
+exports[`when has more replies when showing all disables show all button 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={true}
+  hasMore={true}
+  onShowAll={[Function]}
+/>
+`;
+
+exports[`when has more replies when showing all enable show all button after loading is done 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={false}
+  hasMore={true}
+  onShowAll={[Function]}
+/>
+`;
diff --git a/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
new file mode 100644
index 000000000..e3813397c
--- /dev/null
+++ b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={false}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
+
+exports[`when has more comments renders hasMore 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={false}
+  hasMore={true}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
+
+exports[`when has more comments when loading more disables load more button 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={true}
+  hasMore={true}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
+
+exports[`when has more comments when loading more enable load more button after loading is done 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={false}
+  hasMore={true}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
diff --git a/src/core/client/stream/queries/AppQuery.spec.tsx b/src/core/client/stream/queries/AppQuery.spec.tsx
new file mode 100644
index 000000000..a301a76b7
--- /dev/null
+++ b/src/core/client/stream/queries/AppQuery.spec.tsx
@@ -0,0 +1,31 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { render } from "./AppQuery";
+
+it("renders app", () => {
+  const data = {
+    props: {} as any,
+    error: null,
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders loading", () => {
+  const data = {
+    props: null,
+    error: null,
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders error", () => {
+  const data = {
+    props: null,
+    error: new Error("error"),
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 4dc61115c..3fe95b6d9 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
+import { ReadyState } from "react-relay";
 
 import {
   graphql,
   QueryRenderer,
-  ReadyState,
   withLocalStateContainer,
 } from "talk-framework/lib/relay";
 import {
@@ -15,7 +15,7 @@ import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.
 
 import AppContainer from "../containers/AppContainer";
 
-const render = ({ error, props }: ReadyState<AppQueryResponse>) => {
+export const render = ({ error, props }: ReadyState<AppQueryResponse>) => {
   if (error) {
     return <div>{error.message}</div>;
   }
@@ -33,16 +33,12 @@ const AppQuery: StatelessComponent<InnerProps> = props => {
   return (
     <QueryRenderer<AppQueryVariables, AppQueryResponse>
       query={graphql`
-        query AppQuery($showAssetList: Boolean!, $assetID: ID!) {
-          ...AppContainer
-            @arguments(showAssetList: $showAssetList, assetID: $assetID)
+        query AppQuery($assetID: ID!) {
+          ...AppContainer @arguments(assetID: $assetID)
         }
       `}
       variables={{
-        // We cast `null` to any due to restrictions of the current graphql syntax.
-        assetID: props.local.assetID || (null as any),
-        // TODO: This is set to false, as server does not support querying assets yet.
-        showAssetList: !props.local.assetID && false,
+        assetID: props.local.assetID,
       }}
       render={render}
     />
diff --git a/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
new file mode 100644
index 000000000..dbd2ad45a
--- /dev/null
+++ b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders app 1`] = `
+<Relay(AppContainer)
+  data={Object {}}
+/>
+`;
+
+exports[`renders error 1`] = `
+<div>
+  error
+</div>
+`;
+
+exports[`renders loading 1`] = `
+<div>
+  Loading
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
new file mode 100644
index 000000000..b3d193c41
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -0,0 +1,256 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loads more comments 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
+            >
+              2018-07-06T18:20:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            What's up?
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Isabelle
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:14:00.000Z"
+              title="2018-07-06T18:14:00.000Z"
+            >
+              2018-07-06T18:14:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Hey!
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
+            >
+              2018-07-06T18:20:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            What's up?
+          </p>
+        </div>
+      </div>
+      <button
+        aria-controls="talk-comments-stream-log"
+        className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
+        disabled={false}
+        id="talk-comments-stream-loadMore"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+      >
+        Load More
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
new file mode 100644
index 000000000..24fe4fe1d
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            I like yoghurt
+          </p>
+        </div>
+        <div
+          className="Indent-root Indent-level0"
+        >
+          <div
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            id="talk-comments-replyList-log--comment-with-replies"
+            role="log"
+          >
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                Joining Too
+              </p>
+            </div>
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                What's up?
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
new file mode 100644
index 000000000..3a3599547
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
+            >
+              2018-07-06T18:20:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            What's up?
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
new file mode 100644
index 000000000..2762b7dae
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -0,0 +1,264 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+        <div
+          className="Indent-root Indent-level0"
+        >
+          <div
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
+          >
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                What's up?
+              </p>
+            </div>
+            <button
+              aria-controls="talk-comments-replyList-log--comment-0"
+              className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
+              disabled={false}
+              id="talk-comments-replyList-showAll--comment-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+            >
+              Show All Replies
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`show all replies 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+        <div
+          className="Indent-root Indent-level0"
+        >
+          <div
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
+          >
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                What's up?
+              </p>
+            </div>
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Isabelle
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:14:00.000Z"
+                  title="2018-07-06T18:14:00.000Z"
+                >
+                  2018-07-06T18:14:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                Hey!
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/createEnvironment.ts b/src/core/client/stream/test/createEnvironment.ts
new file mode 100644
index 000000000..0276c0b4e
--- /dev/null
+++ b/src/core/client/stream/test/createEnvironment.ts
@@ -0,0 +1,49 @@
+import { IResolvers } from "graphql-tools";
+import { createFetch } from "relay-local-schema";
+import {
+  commitLocalUpdate,
+  Environment,
+  Network,
+  RecordProxy,
+  RecordSource,
+  Store,
+} from "relay-runtime";
+
+import { loadSchema } from "talk-common/graphql";
+import {
+  createAndRetain,
+  LOCAL_ID,
+  LOCAL_TYPE,
+  wrapFetchWithLogger,
+} from "talk-framework/lib/relay";
+
+export interface CreateEnvironmentParams {
+  /** graphql resolvers */
+  resolvers: IResolvers<any, any>;
+  /** Allows to set initial state for Local state */
+  initLocalState?: (local: RecordProxy) => void;
+  /** If enabled, graphql responses will be logged to the console */
+  logNetwork?: boolean;
+}
+
+/**
+ * create Relay environment for integration tests.
+ */
+export default function createEnvironment(params: CreateEnvironmentParams) {
+  const schema = loadSchema("tenant", params.resolvers);
+  const environment = new Environment({
+    network: Network.create(
+      wrapFetchWithLogger(createFetch({ schema }), params.logNetwork)
+    ),
+    store: new Store(new RecordSource()),
+  });
+  if (params.initLocalState) {
+    commitLocalUpdate(environment, s => {
+      const root = s.getRoot();
+      const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
+      root.setLinkedRecord(localRecord, "local");
+      params.initLocalState!(localRecord);
+    });
+  }
+  return environment;
+}
diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
new file mode 100644
index 000000000..aa14af2e2
--- /dev/null
+++ b/src/core/client/stream/test/fixtures.ts
@@ -0,0 +1,81 @@
+export const users = [
+  {
+    id: "user-0",
+    username: "Markus",
+  },
+  {
+    id: "user-1",
+    username: "Lukas",
+  },
+  {
+    id: "user-2",
+    username: "Isabelle",
+  },
+];
+
+export const comments = [
+  {
+    id: "comment-0",
+    author: users[0],
+    body: "Joining Too",
+    createdAt: "2018-07-06T18:24:00.000Z",
+  },
+  {
+    id: "comment-1",
+    author: users[1],
+    body: "What's up?",
+    createdAt: "2018-07-06T18:20:00.000Z",
+  },
+  {
+    id: "comment-2",
+    author: users[2],
+    body: "Hey!",
+    createdAt: "2018-07-06T18:14:00.000Z",
+  },
+];
+
+export const assets = [
+  {
+    id: "asset-1",
+    isClosed: false,
+    comments: {
+      edges: [
+        { node: comments[0], cursor: comments[0].createdAt },
+        { node: comments[1], cursor: comments[1].createdAt },
+      ],
+      pageInfo: {
+        hasNextPage: false,
+      },
+    },
+  },
+];
+
+export const commentWithReplies = {
+  id: "comment-with-replies",
+  author: users[0],
+  body: "I like yoghurt",
+  createdAt: "2018-07-06T18:24:00.000Z",
+  replies: {
+    edges: [
+      { node: comments[0], cursor: comments[0].createdAt },
+      { node: comments[1], cursor: comments[1].createdAt },
+    ],
+    pageInfo: {
+      hasNextPage: false,
+    },
+  },
+};
+
+export const assetWithReplies = {
+  id: "asset-with-replies",
+  isClosed: false,
+  comments: {
+    edges: [
+      { node: comments[0], cursor: comments[0].createdAt },
+      { node: commentWithReplies, cursor: commentWithReplies.createdAt },
+    ],
+    pageInfo: {
+      hasNextPage: false,
+    },
+  },
+};
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx
new file mode 100644
index 000000000..6f63edcfc
--- /dev/null
+++ b/src/core/client/stream/test/loadMore.spec.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppQuery from "talk-stream/queries/AppQuery";
+
+import createEnvironment from "./createEnvironment";
+import { assets, comments } from "./fixtures";
+
+const connectionStub = sinon.stub().throws();
+connectionStub.withArgs({ first: 5, orderBy: "CREATED_AT_DESC" }).returns({
+  edges: [
+    {
+      node: comments[0],
+      cursor: comments[0].createdAt,
+    },
+    {
+      node: comments[1],
+      cursor: comments[1].createdAt,
+    },
+  ],
+  pageInfo: {
+    endCursor: comments[1].createdAt,
+    hasNextPage: true,
+  },
+});
+connectionStub
+  .withArgs({
+    first: 10,
+    orderBy: "CREATED_AT_DESC",
+    after: comments[1].createdAt,
+  })
+  .returns({
+    edges: [
+      {
+        node: comments[2],
+        cursor: comments[2].createdAt,
+      },
+    ],
+    pageInfo: {
+      endCursor: comments[2].createdAt,
+      hasNextPage: false,
+    },
+  });
+
+const assetStub = {
+  ...assets[0],
+  comments: connectionStub,
+};
+
+const resolvers = {
+  Query: {
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assetStub.id })
+      .returns(assetStub),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assetStub.id, "assetID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppQuery />
+  </TalkContextProvider>
+);
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("loads more comments", async () => {
+  testRenderer.root
+    .findByProps({ id: "talk-comments-stream-loadMore" })
+    .props.onClick();
+
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx
new file mode 100644
index 000000000..9c535520f
--- /dev/null
+++ b/src/core/client/stream/test/renderReplies.spec.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppQuery from "talk-stream/queries/AppQuery";
+
+import createEnvironment from "./createEnvironment";
+import { assetWithReplies } from "./fixtures";
+
+const resolvers = {
+  Query: {
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assetWithReplies.id })
+      .returns(assetWithReplies),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assetWithReplies.id, "assetID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppQuery />
+  </TalkContextProvider>
+);
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx
new file mode 100644
index 000000000..998058cce
--- /dev/null
+++ b/src/core/client/stream/test/renderStream.spec.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppQuery from "talk-stream/queries/AppQuery";
+
+import createEnvironment from "./createEnvironment";
+import { assets } from "./fixtures";
+
+const resolvers = {
+  Query: {
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assets[0].id })
+      .returns(assets[0]),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assets[0].id, "assetID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppQuery />
+  </TalkContextProvider>
+);
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx
new file mode 100644
index 000000000..3e929b5b0
--- /dev/null
+++ b/src/core/client/stream/test/showAllReplies.spec.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppQuery from "talk-stream/queries/AppQuery";
+
+import createEnvironment from "./createEnvironment";
+import { assets, comments } from "./fixtures";
+
+const connectionStub = sinon.stub().throws();
+connectionStub.withArgs({ first: 5, orderBy: "CREATED_AT_ASC" }).returns({
+  edges: [
+    {
+      node: comments[1],
+      cursor: comments[1].createdAt,
+    },
+  ],
+  pageInfo: {
+    endCursor: comments[1].createdAt,
+    hasNextPage: true,
+  },
+});
+connectionStub
+  .withArgs({
+    first: sinon.match(n => n > 10000),
+    orderBy: "CREATED_AT_ASC",
+    after: comments[1].createdAt,
+  })
+  .returns({
+    edges: [
+      {
+        node: comments[2],
+        cursor: comments[2].createdAt,
+      },
+    ],
+    pageInfo: {
+      endCursor: comments[2].createdAt,
+      hasNextPage: false,
+    },
+  });
+
+const commentStub = {
+  ...comments[0],
+  replies: connectionStub,
+};
+
+const assetStub = {
+  ...assets[0],
+  comments: {
+    pageInfo: {
+      hasNextPage: false,
+    },
+    edges: [
+      {
+        node: commentStub,
+        cursor: commentStub.createdAt,
+      },
+    ],
+  },
+};
+
+const resolvers = {
+  Query: {
+    comment: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: commentStub.id })
+      .returns(commentStub),
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assetStub.id })
+      .returns(assetStub),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assetStub.id, "assetID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppQuery />
+  </TalkContextProvider>
+);
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("show all replies", async () => {
+  testRenderer.root
+    .findByProps({ id: `talk-comments-replyList-showAll--${comments[0].id}` })
+    .props.onClick();
+
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/test/enzyme.ts b/src/core/client/test/enzyme.ts
new file mode 100644
index 000000000..7884768e1
--- /dev/null
+++ b/src/core/client/test/enzyme.ts
@@ -0,0 +1,5 @@
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+// React 16 Enzyme adapter
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/src/core/client/test/jsdom.ts b/src/core/client/test/jsdom.ts
new file mode 100644
index 000000000..9e5518731
--- /dev/null
+++ b/src/core/client/test/jsdom.ts
@@ -0,0 +1,27 @@
+import { JSDOM } from "jsdom";
+
+declare var global: any;
+
+const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
+const { window } = jsdom;
+
+function copyProps(src: any, target: any) {
+  const props = Object.getOwnPropertyNames(src)
+    .filter(prop => typeof target[prop] === "undefined")
+    .reduce(
+      (result, prop) => ({
+        ...result,
+        [prop]: Object.getOwnPropertyDescriptor(src, prop),
+      }),
+      {}
+    );
+  Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = (window as any).document;
+global.navigator = {
+  userAgent: "node.js",
+};
+
+copyProps(window, global);
diff --git a/src/core/client/test/setup.ts b/src/core/client/test/setup.ts
new file mode 100644
index 000000000..1609f2653
--- /dev/null
+++ b/src/core/client/test/setup.ts
@@ -0,0 +1,24 @@
+import "./enzyme";
+import "./jsdom";
+
+// TODO: Remove when fixed.
+// Mock React.createContext because of https://github.com/airbnb/enzyme/issues/1509.
+function mockReact() {
+  const originalReact = require.requireActual("react");
+  return {
+    ...originalReact,
+    createContext: jest.fn(defaultValue => {
+      let value = defaultValue;
+      const Provider = (props: any) => {
+        value = props.value;
+        return props.children;
+      };
+      const Consumer = (props: any) => props.children(value);
+      return {
+        Provider,
+        Consumer,
+      };
+    }),
+  };
+}
+jest.mock("react", () => mockReact());
diff --git a/src/core/client/tsconfig.json b/src/core/client/tsconfig.json
index ffb2142b6..a62cea6c5 100644
--- a/src/core/client/tsconfig.json
+++ b/src/core/client/tsconfig.json
@@ -5,40 +5,16 @@
     "module": "esnext",
     "jsx": "preserve",
     "allowJs": false,
-    "lib": [
-      "dom",
-      "es7",
-      "scripthost",
-      "es2015",
-      "esnext.asynciterable"
-    ],
+    "lib": ["dom", "es7", "scripthost", "es2015", "esnext.asynciterable"],
     "baseUrl": "./",
     "paths": {
-      "talk-admin/*": [
-        "./admin/*"
-      ],
-      "talk-stream/*": [
-        "./stream/*"
-      ],
-      "talk-framework/*": [
-        "./framework/*"
-      ],
-      "talk-ui/*": [
-        "./ui/*"
-      ],
-      "talk-common/*": [
-        "../common/*"
-      ],
-      "talk-locales/*": [
-        "../../locales/*"
-      ]
+      "talk-admin/*": ["./admin/*"],
+      "talk-stream/*": ["./stream/*"],
+      "talk-framework/*": ["./framework/*"],
+      "talk-ui/*": ["./ui/*"],
+      "talk-common/*": ["../common/*"]
     }
   },
-  "include": [
-    "./**/*",
-    "../../types/**/*.d.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
\ No newline at end of file
+  "include": ["./**/*", "../../types/**/*.d.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/src/core/client/tslint.json b/src/core/client/tslint.json
index 9abc9b921..0079a6de1 100644
--- a/src/core/client/tslint.json
+++ b/src/core/client/tslint.json
@@ -1,20 +1,13 @@
 {
-  "extends": [
-    "../../../tslint.json",
-    "tslint-react"
-  ],
+  "extends": ["../../../tslint.json", "tslint-react"],
   "rules": {
+    "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [
-      true,
-      "never"
-    ]
+    "jsx-boolean-value": [true, "never"]
   },
   "jsRules": {
+    "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [
-      true,
-      "never"
-    ]
+    "jsx-boolean-value": [true, "never"]
   }
-}
\ No newline at end of file
+}
diff --git a/src/core/client/ui/components/Attachment/Attachment.css b/src/core/client/ui/components/Attachment/Attachment.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/ui/components/Attachment/Attachment.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/ui/components/Attachment/Attachment.tsx b/src/core/client/ui/components/Attachment/Attachment.tsx
new file mode 100644
index 000000000..549787707
--- /dev/null
+++ b/src/core/client/ui/components/Attachment/Attachment.tsx
@@ -0,0 +1,62 @@
+import React, { CSSProperties } from "react";
+import { Manager, Popper, Reference, RefHandler } from "react-popper";
+
+interface RenderProps {
+  ref: RefHandler;
+  style?: CSSProperties;
+}
+
+interface InnerProps {
+  body: React.ReactElement<any> | null;
+  children: (props: RenderProps) => React.ReactElement<any>;
+  className?: string;
+  placement?:
+    | "auto-start"
+    | "auto"
+    | "auto-end"
+    | "top-start"
+    | "top"
+    | "top-end"
+    | "right-start"
+    | "right"
+    | "right-end"
+    | "bottom-end"
+    | "bottom"
+    | "bottom-start"
+    | "left-end"
+    | "left"
+    | "left-start";
+}
+
+interface Props {
+  ref: any;
+  style: CSSProperties;
+}
+
+class Attachment extends React.Component<InnerProps> {
+  public render() {
+    const { children, body, placement = "top" } = this.props;
+    return (
+      <Manager>
+        <Reference>{(props: Props) => children({ ref: props.ref })}</Reference>
+        <Popper
+          placement={placement}
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {(props: Props) =>
+            body
+              ? React.cloneElement(body, {
+                  innerRef: props.ref,
+                  style: props.style,
+                })
+              : null
+          }
+        </Popper>
+      </Manager>
+    );
+  }
+}
+
+export default Attachment;
diff --git a/src/core/client/ui/components/Attachment/index.ts b/src/core/client/ui/components/Attachment/index.ts
new file mode 100644
index 000000000..b3b8d5f4a
--- /dev/null
+++ b/src/core/client/ui/components/Attachment/index.ts
@@ -0,0 +1,2 @@
+export * from "./Attachment";
+export { default } from "./Attachment";
diff --git a/src/core/client/ui/components/BaseButton/BaseButton.tsx b/src/core/client/ui/components/BaseButton/BaseButton.tsx
index 1d97a9d0c..81819b184 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.tsx
+++ b/src/core/client/ui/components/BaseButton/BaseButton.tsx
@@ -19,6 +19,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** This is passed by the `withKeyboardFocus` HOC */
   keyboardFocus: boolean;
+
+  innerRef?: React.RefObject<HTMLDivElement> | any;
 }
 
 /**
@@ -31,6 +33,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   classes,
   keyboardFocus,
   type: typeProp,
+  innerRef,
   ...rest
 }) => {
   let Element = "button";
@@ -53,7 +56,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
     [classes.keyboardFocus]: keyboardFocus,
   });
 
-  return <Element {...rest} className={rootClassName} />;
+  return <Element {...rest} className={rootClassName} ref={innerRef} />;
 };
 
 const enhanced = withStyles(styles)(withKeyboardFocus(BaseButton));
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 4ec1a20d5..17283a819 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -1,78 +1,99 @@
 .root {
   composes: button from "talk-ui/shared/typography.css";
-  padding: 5px 20px;
-  border-radius: $round-corners;
-  background-color: transparent;
-  /* TODO: hover styles for the default button */
+
+  &:enabled,
+  &:disabled {
+    padding: 5px 20px;
+    border-radius: var(--round-corners);
+    background-color: transparent;
+    /* TODO: hover styles for the default button */
+  }
 }
 
-.fullWidth {
+.root:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.fullWidth:enabled,
+.fullWidth:disabled {
   display: block;
   width: 100%;
   box-sizing: border-box;
 }
 
-.primary {
-  background-color: $palette-primary-main;
+.primary:enabled,
+.primary:disabled {
+  background-color: var(--palette-primary-main);
   color: #fff;
+}
 
+.primary:enabled {
   &:hover {
-    background-color: $palette-primary-light;
+    background-color: var(--palette-primary-light);
   }
 
   &:active {
-    background-color: $palette-primary-lighter;
-  }
-
-  &.invert {
-    background-color: transparent;
-    border: 1px solid $palette-primary-main;
-    color: $palette-primary-main;
-
-    &:hover {
-      border-color: $palette-primary-light;
-      color: $palette-primary-light;
-    }
-
-    &:active {
-      border-color: $palette-primary-lighter;
-      color: $palette-primary-lighter;
-    }
+    background-color: var(--palette-primary-lighter);
   }
 }
 
-.secondary {
-  background-color: $palette-secondary-main;
-  color: #fff;
+.primary:enabled.invert,
+.primary:disabled.invert {
+  background-color: transparent;
+  border: 1px solid var(--palette-primary-main);
+  color: var(--palette-primary-main);
+}
 
+.primary:enabled.invert {
   &:hover {
-    background-color: $palette-secondary-light;
+    border-color: var(--palette-primary-light);
+    color: var(--palette-primary-light);
   }
 
   &:active {
-    background-color: $palette-secondary-lighter;
+    border-color: var(--palette-primary-lighter);
+    color: var(--palette-primary-lighter);
+  }
+}
+
+.secondary:enabled,
+.secondary:disabled {
+  background-color: var(--palette-secondary-main);
+  color: #fff;
+}
+
+.secondary:enabled {
+  &:hover {
+    background-color: var(--palette-secondary-light);
+  }
+  &:active {
+    background-color: var(--palette-secondary-lighter);
+  }
+}
+
+.secondary:enabled.invert,
+.secondary:disabled.invert {
+  background-color: transparent;
+  border: 1px solid var(--palette-secondary-main);
+  color: var(--palette-secondary-main);
+}
+
+.secondary:enabled.invert {
+  &:hover {
+    border-color: var(--palette-secondary-light);
+    color: var(--palette-secondary-light);
   }
 
-  &.invert {
-    background-color: transparent;
-    border: 1px solid $palette-secondary-main;
-    color: $palette-secondary-main;
-
-    &:hover {
-      border-color: $palette-secondary-light;
-      color: $palette-secondary-light;
-    }
-
-    &:active {
-      border-color: $palette-secondary-lighter;
-      color: $palette-secondary-lighter;
-    }
+  &:active {
+    border-color: var(--palette-secondary-lighter);
+    color: var(--palette-secondary-lighter);
   }
 }
 
 /**
  * This seems to be the best way to target modern touch device browsers.
  */
-@media (-moz-touch-enabled: 1), (pointer:coarse) {
+@media (-moz-touch-enabled: 1), (pointer: coarse) {
   /* TODO: Remove hover styles */
 }
diff --git a/src/core/client/ui/components/Button/Button.mdx b/src/core/client/ui/components/Button/Button.mdx
index 6382ac02f..5be82c540 100644
--- a/src/core/client/ui/components/Button/Button.mdx
+++ b/src/core/client/ui/components/Button/Button.mdx
@@ -10,11 +10,18 @@ import Button from './Button'
 
 ## Basic usage
 <Playground>
-  <Button style={{marginRight: "10px"}}>Push Me</Button>
-  <Button style={{marginRight: "10px"}} anchor>I'm an Anchor Tag</Button>
-  <Button style={{marginRight: "10px"}} primary>Primary</Button>
-  <Button style={{marginRight: "10px"}} secondary>Secondary</Button>
-  <Button style={{marginTop: "10px"}} primary fullWidth>Full Width</Button>
-  <Button style={{marginTop: "10px"}} primary invert fullWidth>Full Width Invert</Button>
+  <Button style={{margin: "0 10px 10px 0"}}>Push Me</Button>
+  <Button style={{margin: "0 10px 10px 0"}} disabled>Push Me</Button>
+  <Button style={{margin: "0 10px 10px 0"}} anchor>I'm an Anchor Tag</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary disabled>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary>Secondary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary disabled>Secondary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary invert>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary invert disabled>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary invert>Secondary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary invert disabled>Secondary</Button>
+  <Button style={{marginBottom: "10px"}} primary fullWidth>Full Width</Button>
+  <Button style={{marginBottom: "10px"}} primary invert fullWidth>Full Width Invert</Button>
 </Playground>
 
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index dadb7a35d..ded844b87 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -28,6 +28,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** If set renders a button with secondary colors */
   secondary?: boolean;
+
+  innerRef?: React.RefObject<HTMLDivElement> | any;
 }
 
 class Button extends React.Component<InnerProps> {
@@ -39,6 +41,7 @@ class Button extends React.Component<InnerProps> {
       invert,
       primary,
       secondary,
+      innerRef,
       ...rest
     } = this.props;
 
@@ -53,6 +56,7 @@ class Button extends React.Component<InnerProps> {
       <BaseButton
         className={rootClassName}
         classes={pick(classes, "keyboardFocus")}
+        innerRef={innerRef}
         {...rest}
       />
     );
diff --git a/src/core/client/ui/components/Center/Center.css b/src/core/client/ui/components/Center/Center.css
deleted file mode 100644
index 67d72755f..000000000
--- a/src/core/client/ui/components/Center/Center.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
diff --git a/src/core/client/ui/components/Center/Center.tsx b/src/core/client/ui/components/Center/Center.tsx
deleted file mode 100644
index 892277ac6..000000000
--- a/src/core/client/ui/components/Center/Center.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import cn from "classnames";
-import * as React from "react";
-import { ReactNode, StatelessComponent } from "react";
-
-import { withStyles } from "talk-ui/hocs";
-import { PropTypesOf } from "talk-ui/types";
-
-import * as styles from "./Center.css";
-
-interface InnerProps {
-  /**
-   * This prop can be used to add custom classnames.
-   * It is handled by the `withStyles `HOC.
-   */
-  classes: Partial<typeof styles>;
-  className?: string;
-  children: ReactNode;
-}
-
-const Center: StatelessComponent<InnerProps> = props => {
-  return (
-    <div className={cn(props.className, props.classes.root)}>
-      {props.children}
-    </div>
-  );
-};
-
-const enhanced = withStyles(styles)(Center);
-export type CenterProps = PropTypesOf<typeof enhanced>;
-export default enhanced;
diff --git a/src/core/client/ui/components/Center/index.ts b/src/core/client/ui/components/Center/index.ts
deleted file mode 100644
index 47237abf5..000000000
--- a/src/core/client/ui/components/Center/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Center";
-export { default } from "./Center";
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
new file mode 100644
index 000000000..13cb05be5
--- /dev/null
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -0,0 +1,99 @@
+.root {
+  display: flex;
+}
+
+.halfItemGutter {
+  & > * {
+    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 calc(0.5 * var(--spacing-unit));
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 calc(0.5 * var(--spacing-unit)) 0;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: calc(0.5 * var(--spacing-unit)) 0 0 0;
+    }
+  }
+  & > *:last-child {
+    margin: 0;
+  }
+}
+
+.itemGutter {
+  & > * {
+    margin: 0 var(--spacing-unit) 0 0;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-unit);
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-unit) 0;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: var(--spacing-unit) 0 0 0;
+    }
+  }
+  & > *:last-child {
+    margin: 0;
+  }
+}
+
+.justifyFlexStart {
+  justify-content: flex-start;
+}
+.justifyFlexEnd {
+  justify-content: flex-end;
+}
+.justifyCenter {
+  justify-content: center;
+}
+.justifySpaceBetween {
+  justify-content: space-between;
+}
+.justifySpaceAround {
+  justify-content: space-around;
+}
+.justifySpaceEvenly {
+  justify-content: space-evenly;
+}
+
+.alignFlexStart {
+  align-items: flex-start;
+}
+.alignFlexEnd {
+  align-items: flex-end;
+}
+.alignCenter {
+  align-items: center;
+}
+.alignBaseline {
+  align-items: baseline;
+}
+.alignStretch {
+  align-items: stretch;
+}
+
+.directionRow {
+  flex-direction: row;
+}
+.directionColumn {
+  flex-direction: column;
+}
+.directionRowReverse {
+  flex-direction: row-reverse;
+}
+.directionColumnReverse {
+  flex-direction: column-reverse;
+}
diff --git a/src/core/client/ui/components/Flex/Flex.mdx b/src/core/client/ui/components/Flex/Flex.mdx
new file mode 100644
index 000000000..b0d8e4d23
--- /dev/null
+++ b/src/core/client/ui/components/Flex/Flex.mdx
@@ -0,0 +1,16 @@
+---
+name: Flex
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import Flex from './Flex'
+
+# Flex
+
+`Flex` is a wrapper around `flexbox`.
+
+## Basic usage
+<Playground>
+  <Flex justifyContent="center">I'm centered</Flex>
+</Playground>
diff --git a/src/core/client/ui/components/Flex/Flex.spec.tsx b/src/core/client/ui/components/Flex/Flex.spec.tsx
new file mode 100644
index 000000000..b774d9961
--- /dev/null
+++ b/src/core/client/ui/components/Flex/Flex.spec.tsx
@@ -0,0 +1,20 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import Flex from "./Flex";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    justifyContent: "center",
+    alignItems: "center",
+    direction: "row",
+  };
+  const wrapper = shallow(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
new file mode 100644
index 000000000..bfba06d05
--- /dev/null
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -0,0 +1,57 @@
+import cn from "classnames";
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { pascalCase } from "talk-common/utils";
+
+import * as styles from "./Flex.css";
+
+interface InnerProps {
+  id?: string;
+  role?: string;
+  justifyContent?:
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-around"
+    | "space-between"
+    | "space-evenly";
+  alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
+  itemGutter?: boolean | "half";
+  className?: string;
+}
+
+const Flex: StatelessComponent<InnerProps> = props => {
+  const {
+    className,
+    justifyContent,
+    alignItems,
+    direction,
+    itemGutter,
+    ...rest
+  } = props;
+
+  const classObject: Record<string, boolean> = {
+    [styles.itemGutter]: itemGutter === true,
+    [styles.halfItemGutter]: itemGutter === "half",
+  };
+
+  if (justifyContent) {
+    classObject[(styles as any)[`justify${pascalCase(justifyContent)}`]] = true;
+  }
+
+  if (alignItems) {
+    classObject[(styles as any)[`align${pascalCase(alignItems)}`]] = true;
+  }
+
+  if (direction) {
+    classObject[(styles as any)[`direction${pascalCase(direction)}`]] = true;
+  }
+
+  const classNames: string = cn(styles.root, className, classObject);
+
+  return <div className={classNames} {...rest} />;
+};
+
+export default Flex;
diff --git a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
new file mode 100644
index 000000000..90ef93c13
--- /dev/null
+++ b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Flex-root Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/ui/components/Flex/index.ts b/src/core/client/ui/components/Flex/index.ts
new file mode 100644
index 000000000..27e09f37b
--- /dev/null
+++ b/src/core/client/ui/components/Flex/index.ts
@@ -0,0 +1,2 @@
+export * from "./Flex";
+export { default } from "./Flex";
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.mdx b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
new file mode 100644
index 000000000..3f3186bb6
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
@@ -0,0 +1,40 @@
+---
+name: MatchMedia
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import MatchMedia from './MatchMedia'
+
+# MatchMedia
+
+`MatchMedia` uses media queries to provide responsive rendering.
+
+## Basic usage
+<Playground>
+  <MatchMedia maxWidth="xs">
+    I'm a very small screen
+  </MatchMedia>
+  <MatchMedia minWidth="xs" maxWidth="sm">
+    I'm a small screen
+  </MatchMedia>
+  <MatchMedia minWidth="sm" maxWidth="md">
+    I'm a medium screen
+  </MatchMedia>
+  <MatchMedia minWidth="md" maxWidth="lg">
+    I'm a large screen
+  </MatchMedia>
+  <MatchMedia minWidth="lg" maxWidth="xl">
+    I'm a very large screen
+  </MatchMedia>
+  <MatchMedia minWidth="xl">
+    I'm a super large screen
+  </MatchMedia>
+</Playground>
+
+## Using render props
+<Playground>
+  <MatchMedia minWidth="lg">
+    {matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
+  </MatchMedia>
+</Playground>
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
new file mode 100644
index 000000000..1e600dd76
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
@@ -0,0 +1,27 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import { MatchMedia } from "./MatchMedia";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof MatchMedia> = {
+    minWidth: "xs",
+    maxWidth: "sm",
+    component: "div",
+    screen: true,
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<MatchMedia {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("map new speech prop to older aural prop", () => {
+  const props: PropTypesOf<typeof MatchMedia> = {
+    speech: true,
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<MatchMedia {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
new file mode 100644
index 000000000..43d900dfe
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { ReactNode, StatelessComponent } from "react";
+import Responsive, { MediaQueryMatchers } from "react-responsive";
+
+import theme from "../../theme/variables";
+import UIContext from "../UIContext";
+
+type Breakpoints = keyof typeof theme.breakpoints;
+
+interface InnerProps {
+  minWidth?: Breakpoints;
+  maxWidth?: Breakpoints;
+  children: ReactNode | ((matches: boolean) => React.ReactNode);
+  className?: string;
+  component?:
+    | string
+    | React.SFC<any>
+    | React.ClassType<any, any, any>
+    | React.ComponentClass<any>;
+  all?: boolean;
+  print?: boolean;
+  screen?: boolean;
+  speech?: boolean;
+  values?: Partial<MediaQueryMatchers>;
+}
+
+export const MatchMedia: StatelessComponent<InnerProps> = props => {
+  const { speech, minWidth, maxWidth, ...rest } = props;
+  const mapped = {
+    // TODO: Temporarily map newer speech to older aural type until
+    // react-responsive supports the speech prop.
+    aural: speech,
+    minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
+    maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
+  };
+  return <Responsive {...rest} {...mapped} />;
+};
+
+const MatchMediaWithContext: StatelessComponent<InnerProps> = props => (
+  <UIContext.Consumer>
+    {({ mediaQueryValues }) => (
+      <MatchMedia {...props} values={mediaQueryValues} />
+    )}
+  </UIContext.Consumer>
+);
+
+export default MatchMediaWithContext;
diff --git a/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap b/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
new file mode 100644
index 000000000..a128d4ba0
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`map new speech prop to older aural prop 1`] = `
+<MediaQuery
+  aural={true}
+  values={Object {}}
+>
+  <div>
+    Hello World
+  </div>
+</MediaQuery>
+`;
+
+exports[`renders correctly 1`] = `
+<MediaQuery
+  component="div"
+  maxWidth={640}
+  minWidth={321}
+  screen={true}
+  values={Object {}}
+>
+  <div>
+    Hello World
+  </div>
+</MediaQuery>
+`;
diff --git a/src/core/client/ui/components/MatchMedia/index.ts b/src/core/client/ui/components/MatchMedia/index.ts
new file mode 100644
index 000000000..71f16f6f8
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/index.ts
@@ -0,0 +1,2 @@
+export * from "./MatchMedia";
+export { default } from "./MatchMedia";
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
new file mode 100644
index 000000000..708964cdb
--- /dev/null
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -0,0 +1,15 @@
+.root {
+  padding: 6px 10px;
+  background: #ffffff !important;
+  border: 1px solid #c9cacb;
+  box-sizing: border-box;
+  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 1px;
+  color: #222 !important;
+  display: flex !important;
+
+  &:after,
+  &::before {
+    border-top-color: transparent !important;
+  }
+}
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
new file mode 100644
index 000000000..7f02fac3c
--- /dev/null
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { RefHandler } from "react-popper";
+import Attachment from "../Attachment";
+import * as styles from "./Popover.css";
+
+interface RenderProps {
+  toggleShow?: () => void;
+  ref?: RefHandler;
+}
+
+interface InnerProps {
+  body: React.ReactElement<any> | null;
+  children: (props: RenderProps) => any;
+}
+
+interface State {
+  show: false;
+}
+
+class Popover extends React.Component<InnerProps> {
+  public state: State = {
+    show: false,
+  };
+
+  public toggleShow = () => {
+    this.setState((state: State) => ({
+      show: !state.show,
+    }));
+  };
+
+  public render() {
+    const { body, children } = this.props;
+    const { show } = this.state;
+    return (
+      <Attachment body={show ? body : null} className={styles.root}>
+        {({ ref }) => children({ toggleShow: this.toggleShow, ref })}
+      </Attachment>
+    );
+  }
+}
+
+export default Popover;
diff --git a/src/core/client/ui/components/Popover/index.ts b/src/core/client/ui/components/Popover/index.ts
new file mode 100644
index 000000000..7e46e3708
--- /dev/null
+++ b/src/core/client/ui/components/Popover/index.ts
@@ -0,0 +1,2 @@
+export * from "./Popover";
+export { default } from "./Popover";
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.css b/src/core/client/ui/components/RelativeTime/RelativeTime.css
new file mode 100644
index 000000000..3faa5e162
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.css
@@ -0,0 +1,4 @@
+.root {
+  composes: body1 from "talk-ui/shared/typography.css";
+  background-color: transparent;
+}
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.mdx b/src/core/client/ui/components/RelativeTime/RelativeTime.mdx
new file mode 100644
index 000000000..3122e8806
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.mdx
@@ -0,0 +1,17 @@
+---
+name: RelativeTime
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import RelativeTime from './RelativeTime'
+
+# RelativeTime
+
+Renders relative time until given `date`.
+
+## Basic usage
+<Playground>
+  <RelativeTime date="2018-07-04T12:14"
+    formatter={(value, unit, suffix, timestamp) => "".concat(value, " ", unit, " ", suffix)} />
+</Playground>
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx b/src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx
new file mode 100644
index 000000000..92d0c547d
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import UIContext from "../UIContext";
+import RelativeTime from "./RelativeTime";
+
+it("uses default formatter", () => {
+  const props = {
+    date: "2018-12-17T03:24:00.000Z",
+  };
+  const tree = create(<RelativeTime {...props} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("uses formatter from context", () => {
+  const context: any = {
+    timeagoFormatter: () => "My Context Formatter",
+  };
+  const props: PropTypesOf<typeof RelativeTime> = {
+    date: "2018-12-17T03:24:00.000Z",
+  };
+  const tree = create(
+    <UIContext.Provider value={context}>
+      <RelativeTime {...props} />
+    </UIContext.Provider>
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("uses formatter from props", () => {
+  const props = {
+    date: "2018-12-17T03:24:00.000Z",
+    formatter: () => "My Props Formatter",
+  };
+  const tree = create(<RelativeTime {...props} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.tsx b/src/core/client/ui/components/RelativeTime/RelativeTime.tsx
new file mode 100644
index 000000000..3a8022656
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.tsx
@@ -0,0 +1,42 @@
+import cn from "classnames";
+import React from "react";
+import TimeAgo, { Formatter } from "react-timeago";
+
+import { UIContext } from "talk-ui/components";
+import { withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./RelativeTime.css";
+
+interface InnerProps {
+  date: string;
+  live?: boolean;
+  classes: typeof styles;
+  className?: string;
+  formatter?: Formatter;
+}
+
+const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
+  new Date(timestamp).toISOString();
+
+class RelativeTime extends React.Component<InnerProps> {
+  public render() {
+    const { date, classes, live, className, formatter } = this.props;
+    return (
+      <UIContext.Consumer>
+        {({ timeagoFormatter }) => (
+          <TimeAgo
+            date={date}
+            className={cn(className, classes.root)}
+            live={live}
+            formatter={timeagoFormatter || formatter || defaultFormatter}
+          />
+        )}
+      </UIContext.Consumer>
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(RelativeTime);
+export type RelativeTimeProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap b/src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
new file mode 100644
index 000000000..6d9388e87
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`uses default formatter 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2018-12-17T03:24:00.000Z"
+  title="2018-12-17T03:24:00.000Z"
+>
+  2018-12-17T03:24:00.000Z
+</time>
+`;
+
+exports[`uses formatter from context 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2018-12-17T03:24:00.000Z"
+  title="2018-12-17T03:24:00.000Z"
+>
+  My Context Formatter
+</time>
+`;
+
+exports[`uses formatter from props 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2018-12-17T03:24:00.000Z"
+  title="2018-12-17T03:24:00.000Z"
+>
+  My Context Formatter
+</time>
+`;
diff --git a/src/core/client/ui/components/RelativeTime/index.ts b/src/core/client/ui/components/RelativeTime/index.ts
new file mode 100644
index 000000000..8bc2dfb5e
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/index.ts
@@ -0,0 +1,2 @@
+export * from "./RelativeTime";
+export { default } from "./RelativeTime";
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
new file mode 100644
index 000000000..4d2e9e88a
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -0,0 +1,11 @@
+.root {
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: calc(0.57em / 16);
+  background: #ffffff;
+  border: 1px solid #979797;
+  box-sizing: border-box;
+  border-radius: 1px;
+  padding: 5px 20px;
+}
diff --git a/src/core/client/ui/components/TextField/TextField.d.ts b/src/core/client/ui/components/TextField/TextField.d.ts
new file mode 100644
index 000000000..f99662ba2
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.d.ts
@@ -0,0 +1 @@
+export const root: string;
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
new file mode 100644
index 000000000..ac980b102
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { InputHTMLAttributes, StatelessComponent } from "react";
+
+import * as styles from "./TextField.css";
+
+interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
+  classes?: typeof styles;
+}
+
+const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+  return <input {...rest} className={cn(styles.root, className)} />;
+};
+
+export default Input;
diff --git a/src/core/client/ui/components/TextField/index.ts b/src/core/client/ui/components/TextField/index.ts
new file mode 100644
index 000000000..e38acd4ea
--- /dev/null
+++ b/src/core/client/ui/components/TextField/index.ts
@@ -0,0 +1,2 @@
+export * from "./TextField";
+export { default } from "./TextField";
diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css
index e026c61ee..a3c19a400 100644
--- a/src/core/client/ui/components/Typography/Typography.css
+++ b/src/core/client/ui/components/Typography/Typography.css
@@ -11,19 +11,19 @@
   composes: heading2 from "talk-ui/shared/typography.css";
 }
 
-.heading3  {
+.heading3 {
   composes: heading3 from "talk-ui/shared/typography.css";
 }
 
-.heading4  {
+.heading4 {
   composes: heading4 from "talk-ui/shared/typography.css";
 }
 
-.subtitle1  {
+.subtitle1 {
   composes: subtitle1 from "talk-ui/shared/typography.css";
 }
 
-.subtitle2  {
+.subtitle2 {
   composes: subtitle2 from "talk-ui/shared/typography.css";
 }
 
@@ -31,7 +31,7 @@
   composes: body1 from "talk-ui/shared/typography.css";
 }
 
-.body2  {
+.body2 {
   composes: body2 from "talk-ui/shared/typography.css";
 }
 
@@ -43,6 +43,10 @@
   composes: overline from "talk-ui/shared/typography.css";
 }
 
+.timestamp {
+  composes: timestamp from "talk-ui/shared/typography.css";
+}
+
 .alignLeft {
   text-align: left;
 }
@@ -70,7 +74,7 @@
 }
 
 .paragraph {
-  margin-bottom: calc(2px * $spacing-unit);
+  margin-bottom: var(--spacing-unit);
 }
 
 .colorInherit {
@@ -78,17 +82,17 @@
 }
 
 .colorPrimary {
-  color: $palette-primary-main;
+  color: var(--palette-primary-main);
 }
 
 .colorSecondary {
-  color: $palette-secondary-main;
+  color: var(--palette-secondary-main);
 }
 
 .colorTextSecondary {
-  color: $palette-text-secondary;
+  color: var(--palette-text-secondary);
 }
 
 .colorError {
-  color: $palette-error-main;
+  color: var(--palette-error-main);
 }
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index 7292a672f..b743305e6 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -16,7 +16,8 @@ type Variant =
   | "subtitle2"
   | "body1"
   | "body2"
-  | "button";
+  | "button"
+  | "timestamp";
 
 // Based on Typography Component of Material UI.
 // https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/Typography/Typography.js
@@ -99,6 +100,8 @@ const Typography: StatelessComponent<InnerProps> = props => {
     {
       [classes.colorPrimary]: color === "primary",
       [classes.colorSecondary]: color === "secondary",
+      [classes.colorError]: color === "error",
+      [classes.colorTextSecondary]: color === "textSecondary",
       [classes.noWrap]: noWrap,
       [classes.gutterBottom]: gutterBottom,
       [classes.paragraph]: paragraph,
@@ -129,6 +132,7 @@ Typography.defaultProps = {
     subtitle2: "h3",
     body1: "p",
     body2: "aside",
+    timestamp: "span",
   },
   noWrap: false,
   paragraph: false,
diff --git a/src/core/client/ui/components/UIContext/UIContext.ts b/src/core/client/ui/components/UIContext/UIContext.ts
new file mode 100644
index 000000000..b8372d1f3
--- /dev/null
+++ b/src/core/client/ui/components/UIContext/UIContext.ts
@@ -0,0 +1,12 @@
+import React from "react";
+import { MediaQueryMatchers } from "react-responsive";
+import { Formatter } from "react-timeago";
+
+export interface UIContextProps {
+  timeagoFormatter?: Formatter | null;
+  mediaQueryValues?: Partial<MediaQueryMatchers>;
+}
+
+const UIContext = React.createContext<UIContextProps>({} as any);
+
+export default UIContext;
diff --git a/src/core/client/ui/components/UIContext/index.ts b/src/core/client/ui/components/UIContext/index.ts
new file mode 100644
index 000000000..86504f205
--- /dev/null
+++ b/src/core/client/ui/components/UIContext/index.ts
@@ -0,0 +1 @@
+export { default, UIContextProps } from "./UIContext";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 54643cb2a..9b1594d70 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -1,4 +1,9 @@
 export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
-export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
+export { default as Popover } from "./Popover";
+export { default as TextField } from "./TextField";
+export { default as RelativeTime } from "./RelativeTime";
+export { default as UIContext, UIContextProps } from "./UIContext";
+export { default as Flex } from "./Flex";
+export { default as MatchMedia } from "./MatchMedia";
diff --git a/src/core/client/ui/hocs/withForwardRef.tsx b/src/core/client/ui/hocs/withForwardRef.tsx
new file mode 100644
index 000000000..6b48b928b
--- /dev/null
+++ b/src/core/client/ui/hocs/withForwardRef.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import {
+  InferableComponentEnhancerWithProps,
+  withPropsOnChange,
+} from "recompose";
+
+/**
+ * withForwardRef provides a property called `forwardRef` using
+ * the `React.forwardRef` api.
+ */
+function withForwardRef<T>(): InferableComponentEnhancerWithProps<
+  { forwardRef: Ref<any> },
+  {}
+> {
+  return WrappedComponent => {
+    return React.forwardRef((props, ref) => (
+      <WrappedComponent forwardRef={ref} />
+    ));
+  };
+}
+
+export default withForwardRef;
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 649460503..3cb483cd2 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -1,59 +1,72 @@
 .heading1 {
-  font-size: calc(24rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(24rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(32em / 24);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .heading2 {
-  font-size: calc(20rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(20rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(24em / 20);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .heading3 {
-  font-size: calc(18rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(18rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(20em / 18);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .heading4 {
-  font-size: calc(16rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(16rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
-.subtitle1 {}
+.subtitle1 {
+}
 
-.subtitle2 {}
+.subtitle2 {
+}
 
-.body2 {}
+.body2 {
+}
 
 .body1 {
-  font-size: calc(16rem / $rem-base);
-  font-weight: $font-weight-regular;
+  font-size: calc(16rem / var(--rem-base));
+  font-weight: var(--font-weight-regular);
   font-family: "Source Sans Pro";
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .button {
-  color: $palette-text-secondary;
+  color: var(--palette-text-secondary);
   font-family: "Source Sans Pro";
-  font-weight: $font-weight-medium;
+  font-weight: var(--font-weight-medium);
   font-size: 16px;
   letter-spacing: calc(0.57em / 16);
 }
 
-.overline {}
+.overline {
+}
+
+.timestamp {
+  color: var(--palette-text-secondary);
+  font-family: "Source Sans Pro";
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  line-height: calc(18em / 16);
+  letter-spacing: calc(0.2em / 16);
+}
diff --git a/src/core/client/ui/theme/variables.css b/src/core/client/ui/theme/variables.css
new file mode 100644
index 000000000..ad0215b77
--- /dev/null
+++ b/src/core/client/ui/theme/variables.css
@@ -0,0 +1,16 @@
+/*
+  Variables defined in `variables.ts` are already available
+  flattened and in kebab case.
+
+  These are additionally variables we define.
+*/
+
+:root {
+  --spacing-unit: calc(1px * var(--spacing-unit-small));
+}
+
+@media (min-width: $breakpoints-xs) {
+  :root {
+    --spacing-unit: calc(1px * var(--spacing-unit-large));
+  }
+}
diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts
index dc5fd9ed7..d68b88a41 100644
--- a/src/core/client/ui/theme/variables.ts
+++ b/src/core/client/ui/theme/variables.ts
@@ -7,7 +7,7 @@ const variables = {
   palette: {
     /* Primary colors */
     primary: {
-      darker: "#0D5B8F",
+      darkest: "#0D5B8F",
       dark: "#2B7EB5",
       main: "#3498DB",
       light: "#67B2E4",
@@ -15,7 +15,7 @@ const variables = {
     },
     /* Secondary colors */
     secondary: {
-      darker: "#404345",
+      darkest: "#404345",
       dark: "#65696B",
       main: "#787D80",
       light: "#9A9DA0",
@@ -23,7 +23,7 @@ const variables = {
     },
     /* Success colors */
     success: {
-      darker: "#03AB61",
+      darkest: "#03AB61",
       dark: "#02BD6B",
       main: "#00CD73",
       light: "#40D996",
@@ -31,7 +31,7 @@ const variables = {
     },
     /* Error colors */
     error: {
-      darker: "#F50F0C",
+      darkest: "#F50F0C",
       dark: "#FF1F1C",
       main: "#FA4643",
       light: "#F26563",
@@ -58,7 +58,8 @@ const variables = {
     },
   },
   /* gitter and spacing */
-  spacingUnit: 5,
+  spacingUnitSmall: 5,
+  spacingUnitLarge: 10,
   /* Borders */
   roundCorners: "2px",
   /* Typography */
@@ -68,6 +69,14 @@ const variables = {
   fontWeightLight: 300,
   fontWeightRegular: 400,
   fontWeightMedium: 550,
+  /* Breakpoints */
+  breakpoints: {
+    xs: 320,
+    sm: 640,
+    md: 1024,
+    lg: 1400,
+    xl: 1600,
+  },
 };
 
-module.exports = variables;
+export default variables;
diff --git a/src/core/client/ui/types.ts b/src/core/client/ui/types.ts
index 061b7d3d5..576b881c3 100644
--- a/src/core/client/ui/types.ts
+++ b/src/core/client/ui/types.ts
@@ -29,4 +29,6 @@ export type Overwrite<T, U> = Pick<T, Diff<keyof T, keyof U>> & U;
  *
  * E.g. type ButtonProps = ReturnPropTypes<Button>;
  */
-export type PropTypesOf<T> = T extends React.ComponentType<infer R> ? R : {};
+export type PropTypesOf<T> = T extends React.ComponentType<infer R>
+  ? R
+  : T extends React.Component<infer S> ? S : {};
diff --git a/src/core/common/.babelrc.js b/src/core/common/.babelrc.js
new file mode 100644
index 000000000..fad0a6230
--- /dev/null
+++ b/src/core/common/.babelrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    ["@babel/env", { targets: "last 2 versions, ie 11", modules: "commonjs" }],
+  ],
+};
diff --git a/src/core/common/graphql/index.ts b/src/core/common/graphql/index.ts
new file mode 100644
index 000000000..396d9f22a
--- /dev/null
+++ b/src/core/common/graphql/index.ts
@@ -0,0 +1 @@
+export { default as loadSchema } from "./loadSchema";
diff --git a/src/core/server/graph/common/schema/index.ts b/src/core/common/graphql/loadSchema.ts
similarity index 100%
rename from src/core/server/graph/common/schema/index.ts
rename to src/core/common/graphql/loadSchema.ts
diff --git a/src/core/common/utils/index.ts b/src/core/common/utils/index.ts
new file mode 100644
index 000000000..e91489017
--- /dev/null
+++ b/src/core/common/utils/index.ts
@@ -0,0 +1,2 @@
+export { default as timeout } from "./timeout";
+export { default as pascalCase } from "./pascalCase";
diff --git a/src/core/common/utils/pascalCase.ts b/src/core/common/utils/pascalCase.ts
new file mode 100644
index 000000000..de0bbace8
--- /dev/null
+++ b/src/core/common/utils/pascalCase.ts
@@ -0,0 +1,5 @@
+import { camelCase } from "lodash";
+
+export default function pascalCase(value: string) {
+  return value[0].toUpperCase() + camelCase(value).slice(1);
+}
diff --git a/src/core/common/utils/timeout.ts b/src/core/common/utils/timeout.ts
new file mode 100644
index 000000000..006fb1ee8
--- /dev/null
+++ b/src/core/common/utils/timeout.ts
@@ -0,0 +1,4 @@
+/** A promisified timeout. */
+export default function timeout(ms: number = 0) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
diff --git a/src/core/server/config.ts b/src/core/server/config.ts
index fd200db91..f82bb46b8 100644
--- a/src/core/server/config.ts
+++ b/src/core/server/config.ts
@@ -49,14 +49,14 @@ const config = convict({
   mongodb: {
     doc: "The MongoDB database to connect to.",
     format: "mongo-uri",
-    default: "mongodb://localhost/talk",
+    default: "mongodb://127.0.0.1:27017/talk",
     env: "MONGODB",
     arg: "mongodb",
   },
   redis: {
     doc: "The Redis database to connect to.",
     format: "redis-uri",
-    default: "redis://localhost:6379",
+    default: "redis://127.0.0.1:6379",
     env: "REDIS",
     arg: "redis",
   },
diff --git a/src/core/server/graph/management/schema/index.ts b/src/core/server/graph/management/schema/index.ts
index ab7cd2856..6dccc1c9c 100644
--- a/src/core/server/graph/management/schema/index.ts
+++ b/src/core/server/graph/management/schema/index.ts
@@ -1,4 +1,4 @@
-import loadSchema from "talk-server/graph/common/schema";
+import { loadSchema } from "talk-common/graphql";
 import resolvers from "talk-server/graph/management/resolvers";
 
 export default function getManagementSchema() {
diff --git a/src/core/server/graph/tenant/resolvers/comment.ts b/src/core/server/graph/tenant/resolvers/comment.ts
index 22f72b5e5..d4033e0cb 100644
--- a/src/core/server/graph/tenant/resolvers/comment.ts
+++ b/src/core/server/graph/tenant/resolvers/comment.ts
@@ -2,6 +2,8 @@ import Context from "talk-server/graph/tenant/context";
 import { Comment, ConnectionInput } from "talk-server/models/comment";
 
 export default {
+  createdAt: async (comment: Comment, _: any, ctx: Context) =>
+    comment.created_at,
   author: async (comment: Comment, _: any, ctx: Context) =>
     ctx.loaders.Users.user.load(comment.author_id),
   replies: async (comment: Comment, input: ConnectionInput, ctx: Context) =>
diff --git a/src/core/server/graph/tenant/schema/index.ts b/src/core/server/graph/tenant/schema/index.ts
index 93641ac66..844e9a4b4 100644
--- a/src/core/server/graph/tenant/schema/index.ts
+++ b/src/core/server/graph/tenant/schema/index.ts
@@ -1,4 +1,4 @@
-import loadSchema from "talk-server/graph/common/schema";
+import { loadSchema } from "talk-common/graphql";
 import resolvers from "talk-server/graph/tenant/resolvers";
 
 export default function getTenantSchema() {
diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql
index eb060b6a4..5270f26fd 100644
--- a/src/core/server/graph/tenant/schema/schema.graphql
+++ b/src/core/server/graph/tenant/schema/schema.graphql
@@ -202,6 +202,11 @@ type Comment {
   """
   body: String
 
+  """
+  createdAt is the date in which the comment was created.
+  """
+  createdAt: Time
+
   """
   author is the User that authored the Comment.
   """
@@ -232,7 +237,22 @@ type PageInfo {
   """
   Indicates that there are more nodes after this subset.
   """
-  hasNextPage: Boolean!
+  hasNextPage: Boolean
+
+  """
+  Included for legacy Relay reasons. Always set to false.
+  """
+  hasPreviousPage: Boolean
+
+  """
+  Included for legacy Relay reasons. Always set to null.
+  """
+  startCursor: Cursor
+
+  """
+  Specifies the last node's cursor for forwards pagination.
+  """
+  endCursor: Cursor
 }
 
 """
@@ -302,7 +322,7 @@ type Asset {
     first: Int = 10
     orderBy: COMMENT_SORT = CREATED_AT_DESC
     after: Cursor
-  ): CommentsConnection
+  ): CommentsConnection!
 
   """
   author is the authors listed in the meta tags for the Asset.
diff --git a/src/core/server/models/comment.ts b/src/core/server/models/comment.ts
index 81d046159..43c588509 100644
--- a/src/core/server/models/comment.ts
+++ b/src/core/server/models/comment.ts
@@ -2,7 +2,13 @@ import { merge } from "lodash";
 import { Db } from "mongodb";
 import { Omit, Sub } from "talk-common/types";
 import { ActionCounts } from "talk-server/models/actions";
-import { Connection, Cursor } from "talk-server/models/connection";
+import {
+  Connection,
+  Cursor,
+  getPageInfo,
+  nodesToEdges,
+  NodeToCursorTransformer,
+} from "talk-server/models/connection";
 import Query from "talk-server/models/query";
 import { TenantResource } from "talk-server/models/tenant";
 import uuid from "uuid";
@@ -134,31 +140,18 @@ export interface ConnectionInput {
   after?: Cursor;
 }
 
-/**
- * nodesToEdge converts a set of nodes and configuration options into a set of
- * edges.
- *
- * @param input connection configuration
- * @param nodes nodes returned from the query
- */
-function nodesToEdge(input: ConnectionInput, nodes: Comment[]) {
-  let getCursor: (comment: Comment, index: number) => Cursor;
+function cursorGetterFactory(
+  input: ConnectionInput
+): NodeToCursorTransformer<Comment> {
   switch (input.orderBy) {
     case CommentSort.CREATED_AT_DESC:
     case CommentSort.CREATED_AT_ASC:
-      getCursor = comment => comment.created_at;
-      break;
+      return comment => comment.created_at;
     case CommentSort.REPLIES_DESC:
     case CommentSort.RESPECT_DESC:
-      getCursor = (_, index) =>
+      return (_, index) =>
         (input.after ? (input.after as number) : 0) + index + 1;
-      break;
   }
-
-  return nodes.map((comment, index) => ({
-    node: comment,
-    cursor: getCursor(comment, index),
-  }));
 }
 
 /**
@@ -223,8 +216,43 @@ export async function retrieveAssetConnection(
 async function retrieveConnection(
   input: ConnectionInput,
   query: Query<Comment>
-) {
+): Promise<Readonly<Connection<Readonly<Comment>>>> {
   // Apply some sorting options.
+  applyInputToQuery(input, query);
+
+  // We load one more than the limit so we can determine if there is
+  // another page of entries. This gets trimmed off below after we've checked to
+  // see if this constitutes another page of edges.
+  query.first(input.first + 1);
+
+  // Get the cursor.
+  const cursor = await query.exec();
+
+  // Get the comments from the cursor.
+  const nodes = await cursor.toArray();
+
+  // Convert the nodes to edges (which will include the extra edge we don't need
+  // if there is more results).
+  const edges = nodesToEdges(nodes, cursorGetterFactory(input));
+
+  // Get the pageInfo for the connection. We will use this to also determine if
+  // we need to trim off the extra edge that we requested by comparing its
+  // hasNextPage parameter.
+  const pageInfo = getPageInfo(input, edges);
+  if (pageInfo.hasNextPage) {
+    // Because this means that we got one more than expected, we should trim off
+    // the extra edge that was retrieved.
+    edges.splice(input.first, 1);
+  }
+
+  // Return the connection.
+  return {
+    edges,
+    pageInfo,
+  };
+}
+
+function applyInputToQuery(input: ConnectionInput, query: Query<Comment>) {
   switch (input.orderBy) {
     case CommentSort.CREATED_AT_DESC:
       query.orderBy({ created_at: -1 });
@@ -251,37 +279,4 @@ async function retrieveConnection(
       }
       break;
   }
-
-  // We load one more than the limit so we can determine if there is
-  // another page of entries.
-  query.first(input.first + 1);
-
-  // Get the cursor.
-  const cursor = await query.exec();
-
-  // Get the comments from the cursor.
-  const nodes = await cursor.toArray();
-
-  // The hasNextPage is always handled the same (ask for one more than we need,
-  // if there is one more, than there is more).
-  let hasNextPage = false;
-  if (input.first >= 0 && nodes.length > input.first) {
-    // There was one more than we expected! Set hasNextPage = true and remove
-    // the last item from the array that we requested.
-    hasNextPage = true;
-    nodes.splice(input.first, 1);
-  }
-
-  // Convert the nodes to edges.
-  const edges = nodesToEdge(input, nodes);
-
-  // Return the connection.
-  const connection: Readonly<Connection<Readonly<Comment>>> = {
-    edges,
-    pageInfo: {
-      hasNextPage,
-    },
-  };
-
-  return connection;
 }
diff --git a/src/core/server/models/connection.spec.ts b/src/core/server/models/connection.spec.ts
new file mode 100644
index 000000000..cf4cf8af1
--- /dev/null
+++ b/src/core/server/models/connection.spec.ts
@@ -0,0 +1,59 @@
+import { getPageInfo } from "./connection";
+
+it("handles when there is none requested", () => {
+  const pageInfo = getPageInfo({ first: 0 }, []);
+
+  expect(pageInfo).toEqual({
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: null,
+  });
+});
+
+it("handles when there is no edges", () => {
+  const pageInfo = getPageInfo({ first: 10 }, []);
+
+  expect(pageInfo).toEqual({
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: null,
+  });
+});
+
+it("handles when there is more edges than requested", () => {
+  const pageInfo = getPageInfo({ first: 1 }, [
+    {
+      node: null,
+      cursor: 1,
+    },
+    {
+      node: null,
+      cursor: 2,
+    },
+  ]);
+
+  expect(pageInfo).toEqual({
+    hasNextPage: true,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: 1,
+  });
+});
+
+it("handles when there is exactly as many edges as requested", () => {
+  const pageInfo = getPageInfo({ first: 1 }, [
+    {
+      node: null,
+      cursor: 1,
+    },
+  ]);
+
+  expect(pageInfo).toEqual({
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: 1,
+  });
+});
diff --git a/src/core/server/models/connection.ts b/src/core/server/models/connection.ts
index 9ed8cac2b..e45e9657a 100644
--- a/src/core/server/models/connection.ts
+++ b/src/core/server/models/connection.ts
@@ -6,10 +6,63 @@ export interface Edge<T> {
 }
 
 export interface PageInfo {
-  hasNextPage: boolean;
+  hasNextPage?: boolean;
+  hasPreviousPage?: boolean;
+  startCursor?: Cursor;
+  endCursor?: Cursor;
 }
 
 export interface Connection<T> {
   edges: Array<Edge<T>>;
   pageInfo: PageInfo;
 }
+
+export interface PaginationArgs {
+  first: number;
+}
+
+export function getPageInfo<T>(args: PaginationArgs, edges: Array<Edge<T>>) {
+  const pageInfo: PageInfo = {
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: null,
+  };
+
+  if (edges.length === 0) {
+    // If there are no edges, then there's nothing to paginate!
+    return pageInfo;
+  }
+
+  // The hasNextPage is always handled the same (ask for one more than we need,
+  // if there is one more, than there is more).
+  if (args.first >= 0 && edges.length > args.first) {
+    // There was one more than we expected! Set hasNextPage = true.
+    pageInfo.hasNextPage = true;
+  }
+
+  if (pageInfo.hasNextPage && edges.length > 1) {
+    // There was more than one expected, and there is two entries in the edges
+    // array. We should grab the second last one because the last one will have
+    // to be trimmed off after.
+    pageInfo.endCursor = edges[edges.length - 2].cursor;
+  } else {
+    // There was not more than expected, so we should just grab the last edge to
+    // get the endCursor.
+    pageInfo.endCursor = edges[edges.length - 1].cursor;
+  }
+
+  return pageInfo;
+}
+
+export type NodeToCursorTransformer<T> = (node: T, index: number) => Cursor;
+
+export function nodesToEdges<T>(
+  nodes: T[],
+  transformer: NodeToCursorTransformer<T>
+): Array<Edge<T>> {
+  return nodes.map((node, index) => ({
+    node,
+    cursor: transformer(node, index),
+  }));
+}
diff --git a/src/core/server/services/mongodb/index.ts b/src/core/server/services/mongodb/index.ts
index efaf8bcba..03f4d21a6 100644
--- a/src/core/server/services/mongodb/index.ts
+++ b/src/core/server/services/mongodb/index.ts
@@ -8,7 +8,10 @@ import { Config } from "talk-server/config";
  */
 export async function createMongoDB(config: Config): Promise<Db> {
   // Connect and create a client for MongoDB.
-  const client = await MongoClient.connect(config.get("mongodb"));
+  const client = await MongoClient.connect(
+    config.get("mongodb"),
+    { useNewUrlParser: true }
+  );
 
   // Return the database handle, which defaults to the database name provided
   // in the config connection string.
diff --git a/src/locales/de/framework.ftl b/src/locales/de/framework.ftl
index fbb6cb340..2f5a6d472 100644
--- a/src/locales/de/framework.ftl
+++ b/src/locales/de/framework.ftl
@@ -2,4 +2,44 @@
 ### All keys must start with `framework` because this file is shared
 ### among different targets.
 
+## Validation
+
 framework-validation-required = Dies ist ein Pflichtpfeld.
+
+framework-timeago =
+  { $suffix ->
+    [ago] vor
+    [in] in
+  }
+  { $value }
+  { $unit ->
+    [second] { $value ->
+       [1] Sekunde
+      *[other] Sekunden
+    }
+    [minuto] { $value ->
+       [1] Minute
+      *[other] Minuten
+    }
+    [hour] { $value ->
+       [0] Stunde
+      *[other] Stunden
+    }
+    [day] { $value ->
+       [1] Tag
+      *[other] Tage
+    }
+    [week] { $value ->
+       [1] Woche
+      *[other] Wochen
+    }
+    [month] { $value ->
+      [1] Monat
+      *[other] Monate
+    }
+    [year] { $value ->
+       [1] Jahr
+      *[other] Jahre
+    }
+    *[other] unknown unit
+  }
diff --git a/src/locales/de/stream.ftl b/src/locales/de/stream.ftl
index d8f1f5f11..c4eb3040a 100644
--- a/src/locales/de/stream.ftl
+++ b/src/locales/de/stream.ftl
@@ -1 +1,7 @@
-postCommentForm-submit = Posten
+### Localization for Embed Stream
+
+## Comments Tab
+
+comments-postCommentForm-post = Posten
+comments-stream-loadMore = Mehr laden
+comments-replyList-showAll = Alle anzeigen
diff --git a/src/locales/en-US/framework.ftl b/src/locales/en-US/framework.ftl
index d50f28b07..5d88f9a7e 100644
--- a/src/locales/en-US/framework.ftl
+++ b/src/locales/en-US/framework.ftl
@@ -2,4 +2,51 @@
 ### All keys must start with `framework` because this file is shared
 ### among different targets.
 
+## Validation
+
 framework-validation-required = This field is required.
+
+framework-timeago-time =
+  { $value }
+  { $unit ->
+    [second] { $value ->
+      [1] second
+      *[other] seconds
+    }
+    [minute] { $value ->
+      [1] minute
+      *[other] minutes
+    }
+    [hour] { $value ->
+      [0] hour
+      *[other] hours
+    }
+    [day] { $value ->
+      [1] day
+      *[other] days
+    }
+    [week] { $value ->
+      [1] week
+      *[other] weeks
+    }
+    [month] { $value ->
+      [1] month
+      *[other] months
+    }
+    [year] { $value ->
+      [1] year
+      *[other] years
+    }
+    *[other] unknown unit
+  }
+
+framework-timeago =
+  { $value ->
+    [0] now
+    *[other]
+      { $suffix ->
+        [ago] {framework-timeago-time} ago
+        [in] in {framework-timeago-time}
+        *[other] unknown suffix
+      }
+  }
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 4d79869a5..08a397cc1 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -1 +1,11 @@
-postCommentForm-submit = Post
+### Localization for Embed Stream
+
+## Comments Tab
+
+comments-postCommentForm-post = Post
+comments-stream-loadMore = Load more
+comments-replyList-showAll = Show all
+
+comments-permalink-share = Share
+comments-permalink-copy = Copy
+comments-permalink-copied = Copied
diff --git a/src/locales/es/common.ftl b/src/locales/es/common.ftl
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/locales/es/framework.ftl b/src/locales/es/framework.ftl
index 9cfdf012f..2b95d944c 100644
--- a/src/locales/es/framework.ftl
+++ b/src/locales/es/framework.ftl
@@ -2,3 +2,45 @@
 ### All keys must start with `framework` because this file is shared
 ### among different targets.
 
+framework-timeago =
+  { $value ->
+    [0] ahora
+    *[other]
+      { $suffix ->
+        [ago] hace
+        [in] en
+        *[other] unknown suffix
+      }
+      { $value }
+      { $unit ->
+        [second] { $value ->
+          [1] segundo
+          *[other] segundos
+        }
+        [minute] { $value ->
+          [1] minuto
+          *[other] minutos
+        }
+        [hour] { $value ->
+          [0] hora
+          *[other] horas
+        }
+        [day] { $value ->
+          [1] dia
+          *[other] dias
+        }
+        [week] { $value ->
+          [1] semana
+          *[other] semanas
+        }
+        [month] { $value ->
+          [1] mes
+          *[other] meses
+        }
+        [year] { $value ->
+          [1] año
+          *[other] años
+        }
+        *[other] unknown unit
+      }
+  }
diff --git a/src/locales/es/stream.ftl b/src/locales/es/stream.ftl
index e69de29bb..30a906cb1 100644
--- a/src/locales/es/stream.ftl
+++ b/src/locales/es/stream.ftl
@@ -0,0 +1,3 @@
+share = Compartir
+copy = Copiar
+copied = Copiado
diff --git a/src/tsconfig.json b/src/tsconfig.json
index eddf98d29..857892f4d 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -9,26 +9,13 @@
     "outDir": "../dist",
     // See https://github.com/prismagraphql/graphql-request/issues/26 for why we
     // have to include "dom" here.
-    "lib": [
-      "es6",
-      "esnext.asynciterable",
-      "dom"
-    ],
+    "lib": ["es6", "esnext.asynciterable", "dom"],
     "baseUrl": "./",
     "paths": {
-      "talk-server/*": [
-        "./core/server/*"
-      ],
-      "talk-common/*": [
-        "./core/common/*"
-      ]
+      "talk-server/*": ["./core/server/*"],
+      "talk-common/*": ["./core/common/*"]
     }
   },
-  "include": [
-    "./**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "./core/client"
-  ]
-}
\ No newline at end of file
+  "include": ["./**/*"],
+  "exclude": ["node_modules", "./core/client"]
+}
diff --git a/src/types/react-timeago.d.ts b/src/types/react-timeago.d.ts
new file mode 100644
index 000000000..431bbf88e
--- /dev/null
+++ b/src/types/react-timeago.d.ts
@@ -0,0 +1,55 @@
+declare module "react-timeago" {
+  import React from "react";
+
+  export type Formatter = (
+    value: number,
+    unit: "second" | "minute" | "hour" | "day" | "week" | "month" | "year",
+    suffix: "ago" | "from now",
+    epochMiliseconds: string
+  ) => string | React.ReactElement<any>;
+
+  export interface LocaleDefinition {
+    prefixAgo?: string;
+    prefixFromNow?: string;
+    suffixAgo?: string;
+    suffixFromNow?: string;
+    second?: string;
+    seconds?: string;
+    minute?: string;
+    minutes?: string;
+    hour?: string;
+    hours?: string;
+    day?: string;
+    days?: string;
+    week?: string;
+    weeks?: string;
+    month?: string;
+    months?: string;
+    year?: string;
+    years?: string;
+    wordSeparator?: string;
+    numbers?: number[];
+  }
+
+  export interface TimeAgoProps {
+    date: string;
+    live?: boolean;
+    className: string;
+    formatter?: Formatter;
+  }
+
+  const TimeAgo: React.ComponentType<TimeAgoProps>;
+  export default TimeAgo;
+}
+
+declare module "react-timeago/lib/formatters/buildFormatter" {
+  import { Formatter, LocaleDefinition } from "react-timeago";
+  function buildFormatter(localeInput: LocaleDefinition): Formatter;
+  export default buildFormatter;
+}
+
+declare module "react-timeago/lib/language-strings/*" {
+  import { LocaleDefinition } from "react-timeago";
+  const localeStrings: LocaleDefinition;
+  export default localeStrings;
+}
diff --git a/src/types/relay-local-schema.d.ts b/src/types/relay-local-schema.d.ts
new file mode 100644
index 000000000..b8b637f72
--- /dev/null
+++ b/src/types/relay-local-schema.d.ts
@@ -0,0 +1,16 @@
+declare module "relay-local-schema" {
+  import { GraphQLSchema } from "graphql";
+  import { Network as RelayNetwork, FetchFunction } from "relay-runtime";
+
+  interface CreateArguments {
+    schema: GraphQLSchema;
+    rootValue?: any;
+    contextValue?: any;
+  }
+
+  export class Network {
+    static create(data: CreateArguments): RelayNetwork;
+  }
+
+  export function createFetch(data: CreateArguments): FetchFunction;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 8e15c0223..dbb50ebf7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,18 +13,14 @@
     "noImplicitAny": true,
     "strictNullChecks": true,
     "noErrorTruncation": true,
-    "lib": [
-      "es6",
-      "esnext.asynciterable"
-    ]
+    "lib": ["es6", "esnext.asynciterable"]
   },
   "include": [
     "./src/**/.*.js",
     "./scripts/**/*",
     "./config/**/*",
+    "./test/**/*",
     "*.js"
   ],
-  "exclude": [
-    "node_modules"
-  ]
-}
\ No newline at end of file
+  "exclude": ["node_modules"]
+}
diff --git a/tslint.json b/tslint.json
index 68001f8c6..853208eb0 100644
--- a/tslint.json
+++ b/tslint.json
@@ -7,10 +7,7 @@
   "rules": {
     "prettier": true,
     "object-literal-sort-keys": false,
-    "interface-name": [
-      true,
-      "never-prefix"
-    ],
+    "interface-name": [true, "never-prefix"],
     "no-switch-case-fall-through": true,
     "member-ordering": false,
     "variable-name": [
@@ -35,8 +32,6 @@
     ]
   },
   "linterOptions": {
-    "exclude": [
-      "**/node_modules/**/*"
-    ]
+    "exclude": ["**/node_modules/**/*"]
   }
-}
\ No newline at end of file
+}

From b9a8fdb77b0a3a8e62c2564029ae59312213dfa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 16 Jul 2018 18:36:21 -0300
Subject: [PATCH 24/69] feat: added support for --only flag

Merge pull request #1731 from coralproject/next-watcher-flags

Watcher --only
Use JSDocs comments (#1727)


Merge branch 'next' into prevent-compile-loop-relay
Merge pull request #1726 from coralproject/prevent-compile-loop-relay

[next] Adapt relay watch config
[next] Remove nodemon (#1725)

* Remove old nodemon configs

* Remove nodemon

[next] Jest implementation for React Components (#1733)

* Make jest testing work with custom path and css modules

* Add first test

* feat: added unit tests to ci

* fix: updated package-lock.json

* Update cssTransform.js

* Update cssTransform.js

* Fix test in ci

Adapt files.exclude (#1736)


Permalink ui

Adding Copy to clipboard functionality

WIP

clean request

wip

progress

progress

work in progress

wip

ui functionality

Translations :/

wip

Merge branch 'permalink' of github.com:coralproject/talk into permalink

* 'permalink' of github.com:coralproject/talk: (42 commits)
  [next] Support server side jest testing (#1747)
  Update snapshots
  Add comments
  Remove precss
  Move react-responsive to dev deps
  Remove comment
  Mobile first approach
  Support standard css variables, dynamically set spacing-unit
  Add docs
  Fully implement Flex and MatchMedia
  Responsive Components <3
  fix: linting
  fix: adjusted pageInfo
  Remove obsoloe snapshot
  Move jsdom to dev deps
  Mark comments as always returning a value
  Add comment
  Fix unit tests
  Translate, concept for translation and id strings
  Add aria props
  ...

Adding Attachment and Popover Component

merge conflicts

progress

Any

Working

Support for refs

Ready

Merge branch 'permalink' of github.com:coralproject/talk into permalink

* 'permalink' of github.com:coralproject/talk: (101 commits)
  Ready
  Support for refs
  Working
  Any
  progress
  merge conflicts
  Make timeagoFormatter optional
  More colors
  Colors
  Short circuit endless respawn
  fix: new mongo parser
  Remove jest from watcher config, as it doesnt run well inside
  Add jest set
  Apply suggestions
  Move react-timeago to dev
  Upgrade docz
  Cleanup docz scripts
  Support watcher sets
  [next] Support server side jest testing (#1747)
  Make filter only a pure function
  ...
---
 .circleci/config.yml                          |   17 +
 .prettierignore                               |    1 +
 .vscode/settings.json                         |    8 +-
 config/jest-client.config.js                  |   40 +
 config/jest-server.config.js                  |   19 +
 config/jest.config.js                         |   38 +-
 config/jest/cssTransform.js                   |  107 +-
 config/nodemon/relay-stream.json              |    8 -
 config/nodemon/server.json                    |   10 -
 config/paths.js                               |    1 +
 config/postcss.config.js                      |   64 +-
 config/tsconfig.jest.json                     |    7 +
 config/watcher.ts                             |   25 +-
 config/webpack.config.dev.js                  |    8 +-
 config/webpackDevServer.config.js             |    3 +-
 doczrc.js                                     |    2 +-
 package-lock.json                             | 5422 ++++++++++++-----
 package.json                                  |   96 +-
 scripts/test.js                               |    2 +-
 scripts/watcher/ChokidarWatcher.ts            |   67 +-
 scripts/watcher/CommandExecutor.ts            |   11 +-
 scripts/watcher/LongRunningExecutor.ts        |   56 +-
 scripts/watcher/SaneWatcher.ts                |  101 +
 scripts/watcher/bin/watcher.ts                |   40 +-
 scripts/watcher/types.ts                      |   28 +-
 scripts/watcher/types/pstree.remy.d.ts        |    6 +
 scripts/watcher/watch.ts                      |  104 +-
 src/core/client/.babelrc.js                   |    3 +
 .../framework/lib/bootstrap/TalkContext.tsx   |    9 +-
 .../{createContext.ts => createContext.tsx}   |   23 +
 .../framework/lib/bootstrap/withContext.tsx   |   22 +-
 src/core/client/framework/lib/messages.tsx    |    2 +-
 .../framework/lib/relay/QueryRenderer.tsx     |   28 +-
 .../lib/relay/createMutationContainer.tsx     |   12 +-
 src/core/client/framework/lib/relay/index.ts  |    1 +
 .../lib/relay/withFragmentContainer.ts        |    2 +-
 .../lib/relay/withLocalStateContainer.tsx     |   11 +-
 .../lib/relay/withPaginationContainer.ts      |   10 +-
 .../lib/relay/withRefetchContainer.ts         |    2 +-
 .../lib/relay/wrapFetchWithLogger.ts          |   25 +
 src/core/client/stream/.babelrc.js            |    1 -
 src/core/client/stream/components/App.css     |   14 +
 .../client/stream/components/App.spec.tsx     |   22 +
 src/core/client/stream/components/App.tsx     |   25 +-
 .../client/stream/components/AssetList.tsx    |   16 -
 src/core/client/stream/components/Comment.css |   11 -
 src/core/client/stream/components/Comment.tsx |   32 -
 .../components/Comment/Comment.spec.tsx       |   19 +
 .../stream/components/Comment/Comment.tsx     |   43 +
 .../stream/components/Comment/Timestamp.css   |    3 +
 .../components/Comment/Timestamp.spec.tsx     |   14 +
 .../stream/components/Comment/Timestamp.tsx   |   16 +
 .../stream/components/Comment/TopBar.css      |    3 +
 .../stream/components/Comment/TopBar.spec.tsx |   45 +
 .../stream/components/Comment/TopBar.tsx      |   32 +
 .../stream/components/Comment/Username.css    |    3 +
 .../components/Comment/Username.spec.tsx      |   45 +
 .../stream/components/Comment/Username.tsx    |   28 +
 .../__snapshots__/Comment.spec.tsx.snap       |   19 +
 .../__snapshots__/Timestamp.spec.tsx.snap     |    8 +
 .../__snapshots__/TopBar.spec.tsx.snap        |   21 +
 .../__snapshots__/Username.spec.tsx.snap      |   17 +
 .../client/stream/components/Comment/index.ts |    1 +
 src/core/client/stream/components/Indent.css  |    8 +
 .../client/stream/components/Indent.spec.tsx  |   14 +
 src/core/client/stream/components/Indent.tsx  |   15 +
 .../client/stream/components/Permalink.tsx    |    0
 .../stream/components/PermalinkPopover.css    |   13 +
 .../stream/components/PermalinkPopover.tsx    |   60 +
 .../stream/components/PostCommentForm.css     |   10 +-
 .../stream/components/PostCommentForm.tsx     |   12 +-
 .../stream/components/ReplyList.spec.tsx      |   42 +
 .../client/stream/components/ReplyList.tsx    |   50 +
 src/core/client/stream/components/Stream.css  |    4 +
 .../client/stream/components/Stream.spec.tsx  |   47 +
 src/core/client/stream/components/Stream.tsx  |   48 +-
 .../__snapshots__/App.spec.tsx.snap           |   18 +
 .../__snapshots__/Indent.spec.tsx.snap        |   11 +
 .../__snapshots__/ReplyList.spec.tsx.snap     |   72 +
 .../__snapshots__/Stream.spec.tsx.snap        |  214 +
 .../stream/containers/AppContainer.spec.tsx   |   16 +
 .../client/stream/containers/AppContainer.tsx |   26 +-
 .../stream/containers/AssetListContainer.tsx  |   33 -
 .../containers/CommentContainer.spec.tsx      |   21 +
 .../stream/containers/CommentContainer.tsx    |   35 +-
 .../containers/PostCommentFormContainer.tsx   |    2 +
 .../containers/ReplyListContainer.spec.tsx    |   86 +
 .../stream/containers/ReplyListContainer.tsx  |  135 +
 .../containers/StreamContainer.spec.tsx       |   73 +
 .../stream/containers/StreamContainer.tsx     |  136 +-
 .../__snapshots__/AppContainer.spec.tsx.snap  |    7 +
 .../CommentContainer.spec.tsx.snap            |   13 +
 .../ReplyListContainer.spec.tsx.snap          |   78 +
 .../StreamContainer.spec.tsx.snap             |   80 +
 .../client/stream/queries/AppQuery.spec.tsx   |   31 +
 src/core/client/stream/queries/AppQuery.tsx   |   14 +-
 .../__snapshots__/AppQuery.spec.tsx.snap      |   19 +
 .../test/__snapshots__/loadMore.spec.tsx.snap |  256 +
 .../__snapshots__/renderReplies.spec.tsx.snap |  168 +
 .../__snapshots__/renderStream.spec.tsx.snap  |  108 +
 .../showAllReplies.spec.tsx.snap              |  264 +
 .../client/stream/test/createEnvironment.ts   |   49 +
 src/core/client/stream/test/fixtures.ts       |   81 +
 src/core/client/stream/test/loadMore.spec.tsx |   98 +
 .../client/stream/test/renderReplies.spec.tsx |   47 +
 .../client/stream/test/renderStream.spec.tsx  |   47 +
 .../stream/test/showAllReplies.spec.tsx       |  114 +
 src/core/client/test/enzyme.ts                |    5 +
 src/core/client/test/jsdom.ts                 |   27 +
 src/core/client/test/setup.ts                 |   24 +
 src/core/client/tsconfig.json                 |   42 +-
 src/core/client/tslint.json                   |   19 +-
 .../ui/components/Attachment/Attachment.css   |    2 +
 .../ui/components/Attachment/Attachment.tsx   |   62 +
 .../client/ui/components/Attachment/index.ts  |    2 +
 .../ui/components/BaseButton/BaseButton.tsx   |    5 +-
 .../client/ui/components/Button/Button.css    |  111 +-
 .../client/ui/components/Button/Button.mdx    |   19 +-
 .../client/ui/components/Button/Button.tsx    |    4 +
 .../client/ui/components/Center/Center.css    |    6 -
 .../client/ui/components/Center/Center.tsx    |   30 -
 src/core/client/ui/components/Center/index.ts |    2 -
 src/core/client/ui/components/Flex/Flex.css   |   99 +
 src/core/client/ui/components/Flex/Flex.mdx   |   16 +
 .../client/ui/components/Flex/Flex.spec.tsx   |   20 +
 src/core/client/ui/components/Flex/Flex.tsx   |   57 +
 .../Flex/__snapshots__/Flex.spec.tsx.snap     |   11 +
 src/core/client/ui/components/Flex/index.ts   |    2 +
 .../ui/components/MatchMedia/MatchMedia.mdx   |   40 +
 .../components/MatchMedia/MatchMedia.spec.tsx |   27 +
 .../ui/components/MatchMedia/MatchMedia.tsx   |   47 +
 .../__snapshots__/MatchMedia.spec.tsx.snap    |   26 +
 .../client/ui/components/MatchMedia/index.ts  |    2 +
 .../client/ui/components/Popover/Popover.css  |   15 +
 .../client/ui/components/Popover/Popover.tsx  |   42 +
 .../client/ui/components/Popover/index.ts     |    2 +
 .../components/RelativeTime/RelativeTime.css  |    4 +
 .../components/RelativeTime/RelativeTime.mdx  |   17 +
 .../RelativeTime/RelativeTime.spec.tsx        |   42 +
 .../components/RelativeTime/RelativeTime.tsx  |   42 +
 .../__snapshots__/RelativeTime.spec.tsx.snap  |   31 +
 .../ui/components/RelativeTime/index.ts       |    2 +
 .../ui/components/TextField/TextField.css     |   11 +
 .../ui/components/TextField/TextField.d.ts    |    1 +
 .../ui/components/TextField/TextField.tsx     |   14 +
 .../client/ui/components/TextField/index.ts   |    2 +
 .../ui/components/Typography/Typography.css   |   24 +-
 .../ui/components/Typography/Typography.tsx   |    6 +-
 .../ui/components/UIContext/UIContext.ts      |   12 +
 .../client/ui/components/UIContext/index.ts   |    1 +
 src/core/client/ui/components/index.ts        |    7 +-
 src/core/client/ui/hocs/withForwardRef.tsx    |   22 +
 src/core/client/ui/shared/typography.css      |   55 +-
 src/core/client/ui/theme/variables.css        |   16 +
 src/core/client/ui/theme/variables.ts         |   21 +-
 src/core/client/ui/types.ts                   |    4 +-
 src/core/common/.babelrc.js                   |    5 +
 src/core/common/graphql/index.ts              |    1 +
 .../index.ts => common/graphql/loadSchema.ts} |    0
 src/core/common/utils/index.ts                |    2 +
 src/core/common/utils/pascalCase.ts           |    5 +
 src/core/common/utils/timeout.ts              |    4 +
 src/core/server/config.ts                     |    4 +-
 .../server/graph/management/schema/index.ts   |    2 +-
 .../server/graph/tenant/resolvers/comment.ts  |    2 +
 src/core/server/graph/tenant/schema/index.ts  |    2 +-
 .../server/graph/tenant/schema/schema.graphql |   24 +-
 src/core/server/models/comment.ts             |  101 +-
 src/core/server/models/connection.spec.ts     |   59 +
 src/core/server/models/connection.ts          |   55 +-
 src/core/server/services/mongodb/index.ts     |    5 +-
 src/locales/de/framework.ftl                  |   40 +
 src/locales/de/stream.ftl                     |    8 +-
 src/locales/en-US/framework.ftl               |   47 +
 src/locales/en-US/stream.ftl                  |   12 +-
 src/locales/es/common.ftl                     |    0
 src/locales/es/framework.ftl                  |   42 +
 src/locales/es/stream.ftl                     |    3 +
 src/tsconfig.json                             |   25 +-
 src/types/react-timeago.d.ts                  |   55 +
 src/types/relay-local-schema.d.ts             |   16 +
 tsconfig.json                                 |   12 +-
 tslint.json                                   |   11 +-
 183 files changed, 8963 insertions(+), 2233 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 config/jest-client.config.js
 create mode 100644 config/jest-server.config.js
 delete mode 100644 config/nodemon/relay-stream.json
 delete mode 100644 config/nodemon/server.json
 create mode 100644 config/tsconfig.jest.json
 create mode 100644 scripts/watcher/SaneWatcher.ts
 create mode 100644 scripts/watcher/types/pstree.remy.d.ts
 rename src/core/client/framework/lib/bootstrap/{createContext.ts => createContext.tsx} (71%)
 create mode 100644 src/core/client/framework/lib/relay/wrapFetchWithLogger.ts
 create mode 100644 src/core/client/stream/components/App.css
 create mode 100644 src/core/client/stream/components/App.spec.tsx
 delete mode 100644 src/core/client/stream/components/AssetList.tsx
 delete mode 100644 src/core/client/stream/components/Comment.css
 delete mode 100644 src/core/client/stream/components/Comment.tsx
 create mode 100644 src/core/client/stream/components/Comment/Comment.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/Comment.tsx
 create mode 100644 src/core/client/stream/components/Comment/Timestamp.css
 create mode 100644 src/core/client/stream/components/Comment/Timestamp.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/Timestamp.tsx
 create mode 100644 src/core/client/stream/components/Comment/TopBar.css
 create mode 100644 src/core/client/stream/components/Comment/TopBar.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/TopBar.tsx
 create mode 100644 src/core/client/stream/components/Comment/Username.css
 create mode 100644 src/core/client/stream/components/Comment/Username.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/Username.tsx
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/Comment/index.ts
 create mode 100644 src/core/client/stream/components/Indent.css
 create mode 100644 src/core/client/stream/components/Indent.spec.tsx
 create mode 100644 src/core/client/stream/components/Indent.tsx
 create mode 100644 src/core/client/stream/components/Permalink.tsx
 create mode 100644 src/core/client/stream/components/PermalinkPopover.css
 create mode 100644 src/core/client/stream/components/PermalinkPopover.tsx
 create mode 100644 src/core/client/stream/components/ReplyList.spec.tsx
 create mode 100644 src/core/client/stream/components/ReplyList.tsx
 create mode 100644 src/core/client/stream/components/Stream.css
 create mode 100644 src/core/client/stream/components/Stream.spec.tsx
 create mode 100644 src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
 create mode 100644 src/core/client/stream/containers/AppContainer.spec.tsx
 delete mode 100644 src/core/client/stream/containers/AssetListContainer.tsx
 create mode 100644 src/core/client/stream/containers/CommentContainer.spec.tsx
 create mode 100644 src/core/client/stream/containers/ReplyListContainer.spec.tsx
 create mode 100644 src/core/client/stream/containers/ReplyListContainer.tsx
 create mode 100644 src/core/client/stream/containers/StreamContainer.spec.tsx
 create mode 100644 src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
 create mode 100644 src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
 create mode 100644 src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
 create mode 100644 src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
 create mode 100644 src/core/client/stream/queries/AppQuery.spec.tsx
 create mode 100644 src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/createEnvironment.ts
 create mode 100644 src/core/client/stream/test/fixtures.ts
 create mode 100644 src/core/client/stream/test/loadMore.spec.tsx
 create mode 100644 src/core/client/stream/test/renderReplies.spec.tsx
 create mode 100644 src/core/client/stream/test/renderStream.spec.tsx
 create mode 100644 src/core/client/stream/test/showAllReplies.spec.tsx
 create mode 100644 src/core/client/test/enzyme.ts
 create mode 100644 src/core/client/test/jsdom.ts
 create mode 100644 src/core/client/test/setup.ts
 create mode 100644 src/core/client/ui/components/Attachment/Attachment.css
 create mode 100644 src/core/client/ui/components/Attachment/Attachment.tsx
 create mode 100644 src/core/client/ui/components/Attachment/index.ts
 delete mode 100644 src/core/client/ui/components/Center/Center.css
 delete mode 100644 src/core/client/ui/components/Center/Center.tsx
 delete mode 100644 src/core/client/ui/components/Center/index.ts
 create mode 100644 src/core/client/ui/components/Flex/Flex.css
 create mode 100644 src/core/client/ui/components/Flex/Flex.mdx
 create mode 100644 src/core/client/ui/components/Flex/Flex.spec.tsx
 create mode 100644 src/core/client/ui/components/Flex/Flex.tsx
 create mode 100644 src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/Flex/index.ts
 create mode 100644 src/core/client/ui/components/MatchMedia/MatchMedia.mdx
 create mode 100644 src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
 create mode 100644 src/core/client/ui/components/MatchMedia/MatchMedia.tsx
 create mode 100644 src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/MatchMedia/index.ts
 create mode 100644 src/core/client/ui/components/Popover/Popover.css
 create mode 100644 src/core/client/ui/components/Popover/Popover.tsx
 create mode 100644 src/core/client/ui/components/Popover/index.ts
 create mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.css
 create mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.mdx
 create mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx
 create mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.tsx
 create mode 100644 src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/RelativeTime/index.ts
 create mode 100644 src/core/client/ui/components/TextField/TextField.css
 create mode 100644 src/core/client/ui/components/TextField/TextField.d.ts
 create mode 100644 src/core/client/ui/components/TextField/TextField.tsx
 create mode 100644 src/core/client/ui/components/TextField/index.ts
 create mode 100644 src/core/client/ui/components/UIContext/UIContext.ts
 create mode 100644 src/core/client/ui/components/UIContext/index.ts
 create mode 100644 src/core/client/ui/hocs/withForwardRef.tsx
 create mode 100644 src/core/client/ui/theme/variables.css
 create mode 100644 src/core/common/.babelrc.js
 create mode 100644 src/core/common/graphql/index.ts
 rename src/core/{server/graph/common/schema/index.ts => common/graphql/loadSchema.ts} (100%)
 create mode 100644 src/core/common/utils/index.ts
 create mode 100644 src/core/common/utils/pascalCase.ts
 create mode 100644 src/core/common/utils/timeout.ts
 create mode 100644 src/core/server/models/connection.spec.ts
 create mode 100644 src/locales/es/common.ftl
 create mode 100644 src/types/react-timeago.d.ts
 create mode 100644 src/types/relay-local-schema.d.ts

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 908210e13..bd7493f6b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -43,6 +43,20 @@ jobs:
           name: Perform linting
           command: npm run lint
 
+  # unit_tests will run the unit tests.
+  unit_tests:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - run:
+          name: Compile schemas and types
+          command: npm run compile
+      - run:
+          name: Perform testing
+          command: npm run test
+
   # build will build the static assets and server typescript files.
   build:
     <<: *job_defaults
@@ -74,6 +88,9 @@ workflows:
       - lint:
           requires:
             - npm_dependencies
+      - unit_tests:
+          requires:
+            - npm_dependencies
       - build:
           requires:
             - npm_dependencies
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..3c3629e64
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 195b73de5..4dd5d1b72 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,12 +9,10 @@
     "**/.hg": true,
     "**/CVS": true,
     "**/.DS_Store": true,
-    "node_modules": true,
-    "dist": true,
-    ".vscode": true,
-    "package-lock.json": true
+    ".vs": true
   },
+  "tslint.exclude": "**/node_modules/**",
   "tslint.autoFixOnSave": true,
   "tslint.jsEnable": true,
   "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file
+}
diff --git a/config/jest-client.config.js b/config/jest-client.config.js
new file mode 100644
index 000000000..3bfbd195c
--- /dev/null
+++ b/config/jest-client.config.js
@@ -0,0 +1,40 @@
+const path = require("path");
+
+module.exports = {
+  displayName: "client",
+  rootDir: "../",
+  roots: ["<rootDir>/src/core/client"],
+  collectCoverageFrom: ["**/*.{js,jsx,mjs,ts,tsx}"],
+  coveragePathIgnorePatterns: ["/node_modules/"],
+  setupFiles: [
+    "<rootDir>/config/polyfills.js",
+    "<rootDir>/src/core/client/test/setup.ts",
+  ],
+  testMatch: ["**/*.spec.{js,jsx,mjs,ts,tsx}"],
+  testEnvironment: "node",
+  testURL: "http://localhost",
+  transform: {
+    "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest",
+    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+    "^(?!.*\\.(js|jsx|mjs|ts|tsx|css|json|ftl)$)":
+      "<rootDir>/config/jest/fileTransform.js",
+  },
+  transformIgnorePatterns: [
+    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$",
+  ],
+  moduleNameMapper: {
+    "^talk-admin/(.*)$": "<rootDir>/src/core/client/admin/$1",
+    "^talk-ui/(.*)$": "<rootDir>/src/core/client/ui/$1",
+    "^talk-stream/(.*)$": "<rootDir>/src/core/client/stream/$1",
+    "^talk-framework/(.*)$": "<rootDir>/src/core/client/framework/$1",
+    "^talk-common/(.*)$": "<rootDir>/src/core/common/$1",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+  globals: {
+    "ts-jest": {
+      useBabelrc: true,
+      tsConfigFile: path.resolve(__dirname, "tsconfig.jest.json"),
+    },
+  },
+};
diff --git a/config/jest-server.config.js b/config/jest-server.config.js
new file mode 100644
index 000000000..6ac9556bf
--- /dev/null
+++ b/config/jest-server.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  displayName: "server",
+  rootDir: "../",
+  roots: ["<rootDir>/src"],
+  collectCoverageFrom: ["**/*.{js,jsx,mjs,ts,tsx}"],
+  coveragePathIgnorePatterns: ["/node_modules/"],
+  testMatch: ["**/*.spec.{js,jsx,mjs,ts,tsx}"],
+  testPathIgnorePatterns: ["/node_modules/", "/client/"],
+  testEnvironment: "node",
+  testURL: "http://localhost",
+  transform: {
+    "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest",
+  },
+  moduleNameMapper: {
+    "^talk-server/(.*)$": "<rootDir>/src/core/server/$1",
+    "^talk-common/(.*)$": "<rootDir>/src/core/common/$1",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+};
diff --git a/config/jest.config.js b/config/jest.config.js
index 682a2c8a4..3e7166a29 100644
--- a/config/jest.config.js
+++ b/config/jest.config.js
@@ -1,38 +1,6 @@
-const paths = require("./paths");
-
 module.exports = {
-  rootDir: "../",
-  roots: ["<rootDir>/src", "<rootDir>/scripts"],
-  collectCoverageFrom: ["src/**/*.{js,jsx,mjs,ts,tsx}"],
-  coveragePathIgnorePatterns: ["/node_modules/"],
-  setupFiles: ["<rootDir>/config/polyfills.js"],
-  testMatch: [
-    "**/__tests__/**/*.{js,jsx,mjs,ts,tsx}",
-    "**/*.(spec|test).{js,jsx,mjs,ts,tsx}",
-  ],
-  testEnvironment: "node",
-  testURL: "http://localhost",
-  transform: {
-    "^.+\\.(js|jsx|mjs|ts|tsx)$": "<rootDir>/node_modules/ts-jest",
-    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-    "^(?!.*\\.(js|jsx|mjs|css|json|ftl)$)":
-      "<rootDir>/config/jest/fileTransform.js",
-  },
-  transformIgnorePatterns: [
-    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$",
-  ],
-  moduleNameMapper: {
-    "^react-native$": "react-native-web",
-  },
-  moduleFileExtensions: [
-    "web.js",
-    "js",
-    "json",
-    "web.jsx",
-    "jsx",
-    "node",
-    "mjs",
-    "ts",
-    "tsx",
+  projects: [
+    "<rootDir>/jest-client.config.js",
+    "<rootDir>/jest-server.config.js",
   ],
 };
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
index 606cc276b..98d4e9a36 100644
--- a/config/jest/cssTransform.js
+++ b/config/jest/cssTransform.js
@@ -1,14 +1,105 @@
 "use strict";
 
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
+// Adapted version of https://github.com/Connormiha/jest-css-modules-transform
+// Copyright https://github.com/Connormiha/jest-css-modules-transform/graphs/contributors
+// This oututs `module.exports = cssObject` instead of `module.exports = { default: cssObject }`;
+
+const { sep: pathSep, resolve, basename, extname } = require("path");
+const postcss = require("postcss");
+const postcssNested = postcss([require("postcss-nested")]);
+
+const REG_EXP_NAME_BREAK_CHAR = /[\s,.{/#[:]/;
+
+const getCSSSelectors = (css, path) => {
+  const end = css.length;
+  let i = 0;
+  let char;
+  let bracketsCount = 0;
+  const result = {};
+
+  while (i < end) {
+    if (i === -1) {
+      throw Error(`Parse error ${path}`);
+    }
+    if (css.indexOf("/*", i) === i) {
+      i = css.indexOf("*/", i + 2);
+      // Unclosed comment. Break to avoid infinity loop
+      if (i === -1) {
+        // Don't parse, but save collected result
+        return result;
+      }
+      continue;
+    }
+    char = css[i];
+    if (char === "{") {
+      bracketsCount++;
+      i++;
+      continue;
+    }
+    if (char === "}") {
+      bracketsCount--;
+      i++;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      do {
+        i = css.indexOf(char, i + 1);
+        // Syntax error since this line. Don't parse, but save collected result
+        if (i === -1) {
+          return result;
+        }
+      } while (css[i - 1] === "\\");
+      i++;
+      continue;
+    }
+    if (bracketsCount > 0) {
+      i++;
+      continue;
+    }
+    if (char === "." || char === "#") {
+      i++;
+      const startWord = i;
+      while (!REG_EXP_NAME_BREAK_CHAR.test(css[i])) {
+        i++;
+      }
+      const word = css.slice(startWord, i);
+      result[word] = word;
+      continue;
+    }
+    if (css.indexOf("@keyframes", i) === i) {
+      i += 10;
+      while (REG_EXP_NAME_BREAK_CHAR.test(css[i])) {
+        i++;
+      }
+      const startWord = i;
+      while (!REG_EXP_NAME_BREAK_CHAR.test(css[i])) {
+        i++;
+      }
+      const word = css.slice(startWord, i);
+      result[word] = word;
+      continue;
+    }
+    i++;
+  }
+  return result;
+};
 
 module.exports = {
-  process() {
-    return "module.exports = {};";
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return "cssTransform";
+  process(src, path, config) {
+    const filename = path.slice(path.lastIndexOf(pathSep) + 1);
+    const textCSS = postcssNested.process(src).css;
+    const selectors = getCSSSelectors(textCSS, path);
+    const component = basename(path, extname(path));
+
+    // Prefix class names with component name.
+    Object.keys(selectors).forEach(k => {
+      selectors[k] = selectors[k]
+        .split(/\s+/)
+        .map(v => `${component}-${v}`)
+        .join(" ");
+    });
+
+    const exprt = JSON.stringify(selectors);
+    return `module.exports = ${exprt}`;
   },
 };
diff --git a/config/nodemon/relay-stream.json b/config/nodemon/relay-stream.json
deleted file mode 100644
index dc9556823..000000000
--- a/config/nodemon/relay-stream.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "exec": "npm-run-all compile:relay-stream",
-  "ext": "ts,tsx,graphql",
-  "watch": [
-    "./src/core/client/stream",
-    "./src/core/**/*.graphql"
-  ]
-}
diff --git a/config/nodemon/server.json b/config/nodemon/server.json
deleted file mode 100644
index 08472086e..000000000
--- a/config/nodemon/server.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "exec": "npm run start:development",
-  "ext": "ts,graphql",
-  "watch": [
-    "./src"
-  ],
-  "ignore": [
-    "./src/client"
-  ]
-}
diff --git a/config/paths.js b/config/paths.js
index 4d852d0f6..7d98ac998 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -53,6 +53,7 @@ module.exports = {
   appTsconfig: resolveApp("src/core/client/tsconfig.json"),
   appLocales: resolveApp("src/locales"),
   appThemeVariables: resolveApp("src/core/client/ui/theme/variables.ts"),
+  appThemeVariablesCSS: resolveApp("src/core/client/ui/theme/variables.css"),
   testsSetup: resolveApp("src/setupTests.js"),
   appNodeModules: resolveApp("node_modules"),
 
diff --git a/config/postcss.config.js b/config/postcss.config.js
index 4de2da6b2..da91c22b2 100644
--- a/config/postcss.config.js
+++ b/config/postcss.config.js
@@ -1,27 +1,73 @@
-const precss = require("precss");
-const autoprefixer = require("autoprefixer");
-const fontMagician = require("postcss-font-magician");
+// Allow importing typescript files.
+require("ts-node/register");
+
 const kebabCase = require("lodash/kebabCase");
 const mapKeys = require("lodash/mapKeys");
+const mapValues = require("lodash/mapValues");
+const pickBy = require("lodash/pickBy");
 const flat = require("flat");
-const flexbugsFixes = require("postcss-flexbugs-fixes");
 const paths = require("./paths");
+const autoprefixer = require("autoprefixer");
+const postcssFontMagician = require("postcss-font-magician");
+const postcssFlexbugsFixes = require("postcss-flexbugs-fixes");
+const postcssVariables = require("postcss-css-variables");
+const postcssPresetEnv = require("postcss-preset-env");
+const postcssNested = require("postcss-nested");
+const postcssImport = require("postcss-import");
+const postcssPrependImports = require("postcss-prepend-imports");
+const postcssAdvancedVariables = require("postcss-advanced-variables");
 
 delete require.cache[paths.appThemeVariables];
-const variables = require(paths.appThemeVariables);
+const variables = require(paths.appThemeVariables).default;
 const flatKebabVariables = mapKeys(
-  flat(variables, { delimiter: "-" }),
+  mapValues(flat(variables, { delimiter: "-" }), v => v.toString()),
   (_, k) => kebabCase(k)
 );
 
+// These are the default css standard variables.
+const cssVariables = pickBy(
+  flatKebabVariables,
+  (v, k) => !k.startsWith("breakpoints-")
+);
+
+// These are sass style variables used in media queries.
+const mediaQueryVariables = mapValues(
+  pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),
+  // Add unit to breakpoints.
+  // Add 1 to support mobile first approach where we start
+  // with the smallest screen and gradually add styling for the
+  // next bigger screen. This is realized using `min-width` without
+  // ever using `max-width`.
+  v => `${Number.parseInt(v) + 1}px`
+);
+
 module.exports = {
   // Necessary for external CSS imports to work
   // https://github.com/facebookincubator/create-react-app/issues/2677
   ident: "postcss",
   plugins: [
-    precss({ variables: flatKebabVariables }),
-    fontMagician(),
-    flexbugsFixes,
+    // This allows us to define dynamic css variables.
+    postcssPrependImports({
+      path: "",
+      files: [paths.appThemeVariablesCSS],
+    }),
+    // Needed by above plugin.
+    postcssImport(),
+    // Support nesting.
+    postcssNested(),
+    // Sass style variables to be used in media queries.
+    postcssAdvancedVariables({ variables: mediaQueryVariables }),
+    // CSS standard variables for everything else.
+    postcssVariables({
+      variables: cssVariables,
+    }),
+    // Provides a modern CSS environment.
+    postcssPresetEnv(),
+    // Does all the font handling logic.
+    postcssFontMagician(),
+    // Fix known flexbox bugs.
+    postcssFlexbugsFixes,
+    // Vendor prefixing.
     autoprefixer({
       browsers: [
         ">1%",
diff --git a/config/tsconfig.jest.json b/config/tsconfig.jest.json
new file mode 100644
index 000000000..d457255e7
--- /dev/null
+++ b/config/tsconfig.jest.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "es2015"
+  }
+}
diff --git a/config/watcher.ts b/config/watcher.ts
index 305193045..f974e4283 100644
--- a/config/watcher.ts
+++ b/config/watcher.ts
@@ -13,9 +13,14 @@ const config: Config = {
         "core/client/stream/**/*.ts",
         "core/client/stream/**/*.tsx",
         "core/client/stream/**/*.graphql",
-        "core/client/server/**/*.graphql",
+        "core/server/**/*.graphql",
+      ],
+      ignore: [
+        "core/**/*.d.ts",
+        "core/**/*.graphql.ts",
+        "**/test/**/*",
+        "core/**/*.spec.*",
       ],
-      ignore: ["core/**/*.d.ts"],
       executor: new CommandExecutor("npm run compile:relay-stream", {
         runOnInit: true,
       }),
@@ -35,6 +40,22 @@ const config: Config = {
       paths: [],
       executor: new LongRunningExecutor("npm run start:webpackDevServer"),
     },
+    runDocz: {
+      paths: [],
+      executor: new LongRunningExecutor("npm run docz -- dev"),
+    },
+  },
+  defaultSet: "client",
+  sets: {
+    server: ["runServer"],
+    client: [
+      "runServer",
+      "runWebpackDevServer",
+      "compileCSSTypes",
+      "compileRelayStream",
+    ],
+    docz: ["runDocz", "compileCSSTypes"],
+    compile: ["compileCSSTypes", "compileRelayStream"],
   },
 };
 
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 80872c5a4..359d53f7b 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -180,7 +180,7 @@ module.exports = {
 
                   // All available locales can be loadable on demand.
                   // To restrict available locales set:
-                  // availableLocales: ["en-US"]
+                  // availableLocales: ["en-US"],
                 },
               },
             ],
@@ -224,6 +224,11 @@ module.exports = {
                     jsx: "preserve",
                     noEmit: false,
                   },
+
+                  // Overwrites the behavior of `include` and `exclude` to only
+                  // include files that are actually being imported and which
+                  // are necessary to compile the bundle.
+                  onlyCompileBundledFiles: true,
                 },
               },
             ],
@@ -242,6 +247,7 @@ module.exports = {
                 options: {
                   modules: true,
                   importLoaders: 1,
+                  localIdentName: "[name]-[local]-[hash:base64:5]",
                 },
               },
               {
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index 668433652..b3e6f1578 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -9,6 +9,7 @@ const paths = require("./paths");
 const protocol = process.env.HTTPS === "true" ? "https" : "http";
 const host = process.env.HOST || "0.0.0.0";
 const serverPort = process.env.PORT || 3000;
+const doczPort = process.env.DOCZ_PORT || 3030;
 
 module.exports = function(proxy, allowedHost) {
   return {
@@ -81,8 +82,8 @@ module.exports = function(proxy, allowedHost) {
       disableDotRule: true,
     },
     public: allowedHost,
-    // Proxy to the graphql server.
     proxy: proxy || {
+      // Proxy to the graphql server.
       "/api": {
         target: `http://localhost:${serverPort}`,
       },
diff --git a/doczrc.js b/doczrc.js
index 19542a6b6..9d7ef1b12 100644
--- a/doczrc.js
+++ b/doczrc.js
@@ -14,7 +14,7 @@ export default {
   source: "./src",
   typescript: true,
   host: process.env.HOST || "0.0.0.0",
-  port: parseInt(process.env.DOCZ_PORT, 10) || 3000,
+  port: parseInt(process.env.DOCZ_PORT, 10) || 3030,
   modifyBundlerConfig: config => {
     config.module.rules.push({
       test: /\.css$/,
diff --git a/package-lock.json b/package-lock.json
index b3622a48d..2854a2155 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -597,18 +597,18 @@
       }
     },
     "@babel/plugin-syntax-typescript": {
-      "version": "7.0.0-beta.51",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.0.0-beta.51.tgz",
-      "integrity": "sha1-ovJwH/ZdAGJoy8hK0buO6rY4sMQ=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.0.0-beta.53.tgz",
+      "integrity": "sha1-V1oWPLFEsJS09yQOQ0utrYMexFU=",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "7.0.0-beta.51"
+        "@babel/helper-plugin-utils": "7.0.0-beta.53"
       },
       "dependencies": {
         "@babel/helper-plugin-utils": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.51.tgz",
-          "integrity": "sha1-D2pfK20cZERBP4+rYJQNebY8IDE=",
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.53.tgz",
+          "integrity": "sha1-1kRYY2/8JYtCcUqd2Trrb4uM8+0=",
           "dev": true
         }
       }
@@ -773,14 +773,115 @@
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.0.0-beta.49",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.0.0-beta.49.tgz",
-      "integrity": "sha1-Cfs0XVknwro72J582xOlUGftOaA=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.0.0-beta.53.tgz",
+      "integrity": "sha1-68P7ocWmyHQ7kJQD7NPn42gcr6U=",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "7.0.0-beta.49",
-        "@babel/helper-plugin-utils": "7.0.0-beta.49",
-        "@babel/helper-simple-access": "7.0.0-beta.49"
+        "@babel/helper-module-transforms": "7.0.0-beta.53",
+        "@babel/helper-plugin-utils": "7.0.0-beta.53",
+        "@babel/helper-simple-access": "7.0.0-beta.53"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.53.tgz",
+          "integrity": "sha1-mA0VYLhjV1v1o3eSUDfgEy71kh4=",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "7.0.0-beta.53"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.53.tgz",
+          "integrity": "sha1-5zXmqjClBLD52Fw4ptRwqfSqgdk=",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.53",
+            "lodash": "^4.17.5"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.0.0-beta.53.tgz",
+          "integrity": "sha1-e6IUzcyPhiPy0Xl96v8f80mqzhM=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "7.0.0-beta.53",
+            "@babel/helper-simple-access": "7.0.0-beta.53",
+            "@babel/helper-split-export-declaration": "7.0.0-beta.53",
+            "@babel/template": "7.0.0-beta.53",
+            "@babel/types": "7.0.0-beta.53",
+            "lodash": "^4.17.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.53.tgz",
+          "integrity": "sha1-1kRYY2/8JYtCcUqd2Trrb4uM8+0=",
+          "dev": true
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.0.0-beta.53.tgz",
+          "integrity": "sha1-cvbbmr5C+GgfpvAo79WdgVRHUrM=",
+          "dev": true,
+          "requires": {
+            "@babel/template": "7.0.0-beta.53",
+            "@babel/types": "7.0.0-beta.53",
+            "lodash": "^4.17.5"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.53.tgz",
+          "integrity": "sha1-rvVLix+ZYW6jfJhHhxajeAJjMls=",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.53"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.53.tgz",
+          "integrity": "sha1-9OlS2tF4fSBeGI0+OEzc5JyjaPs=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.0",
+            "esutils": "^2.0.2",
+            "js-tokens": "^3.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.53.tgz",
+          "integrity": "sha1-H0XrYXv5Rj1IKywE00nZ5O2/SJI=",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.53.tgz",
+          "integrity": "sha1-MyIpCQDQsYewpxdDgeHzu3EFDS4=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "7.0.0-beta.53",
+            "@babel/parser": "7.0.0-beta.53",
+            "@babel/types": "7.0.0-beta.53",
+            "lodash": "^4.17.5"
+          }
+        },
+        "@babel/types": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.53.tgz",
+          "integrity": "sha1-GaRhwNpRVZXftnQLS0Xce7Dms3U=",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
@@ -1007,19 +1108,19 @@
       }
     },
     "@babel/plugin-transform-typescript": {
-      "version": "7.0.0-beta.51",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.0.0-beta.51.tgz",
-      "integrity": "sha1-HZ5bp7+T/jdIPMMh28mn67pf81s=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.0.0-beta.53.tgz",
+      "integrity": "sha1-d10qU+Rv1KdWLzFP5nSmrS+Dc8A=",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "7.0.0-beta.51",
-        "@babel/plugin-syntax-typescript": "7.0.0-beta.51"
+        "@babel/helper-plugin-utils": "7.0.0-beta.53",
+        "@babel/plugin-syntax-typescript": "7.0.0-beta.53"
       },
       "dependencies": {
         "@babel/helper-plugin-utils": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.51.tgz",
-          "integrity": "sha1-D2pfK20cZERBP4+rYJQNebY8IDE=",
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.53.tgz",
+          "integrity": "sha1-1kRYY2/8JYtCcUqd2Trrb4uM8+0=",
           "dev": true
         }
       }
@@ -1090,6 +1191,19 @@
         "browserslist": "^3.0.0",
         "invariant": "^2.2.2",
         "semver": "^5.3.0"
+      },
+      "dependencies": {
+        "@babel/plugin-transform-modules-commonjs": {
+          "version": "7.0.0-beta.49",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.0.0-beta.49.tgz",
+          "integrity": "sha1-Cfs0XVknwro72J582xOlUGftOaA=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "7.0.0-beta.49",
+            "@babel/helper-plugin-utils": "7.0.0-beta.49",
+            "@babel/helper-simple-access": "7.0.0-beta.49"
+          }
+        }
       }
     },
     "@babel/preset-flow": {
@@ -1124,31 +1238,39 @@
       }
     },
     "@babel/preset-typescript": {
-      "version": "7.0.0-beta.51",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.0.0-beta.51.tgz",
-      "integrity": "sha1-lVELKxSTxrIQpJm3PoDNip4vitE=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.0.0-beta.53.tgz",
+      "integrity": "sha1-Ffrd7M4nuQYrpQ4aE8IB4s4qubA=",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "7.0.0-beta.51",
-        "@babel/plugin-transform-typescript": "7.0.0-beta.51"
+        "@babel/helper-plugin-utils": "7.0.0-beta.53",
+        "@babel/plugin-transform-typescript": "7.0.0-beta.53"
       },
       "dependencies": {
         "@babel/helper-plugin-utils": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.51.tgz",
-          "integrity": "sha1-D2pfK20cZERBP4+rYJQNebY8IDE=",
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.53.tgz",
+          "integrity": "sha1-1kRYY2/8JYtCcUqd2Trrb4uM8+0=",
           "dev": true
         }
       }
     },
     "@babel/runtime": {
-      "version": "7.0.0-beta.51",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.51.tgz",
-      "integrity": "sha1-SLjtGDBwNMZiD2Q1FGUMoszAFlo=",
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.53.tgz",
+      "integrity": "sha1-nfIq40gjzon3kAYFlLg+5XLixdI=",
       "dev": true,
       "requires": {
         "core-js": "^2.5.7",
-        "regenerator-runtime": "^0.11.1"
+        "regenerator-runtime": "^0.12.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.0",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.0.tgz",
+          "integrity": "sha512-SpV2LhF5Dm9UYMEprB3WwsBnWwqTrmjrm2UZb42cl2G02WVGgx7Mg8aa9pdLEKp6hZ+/abcMc2NxKA8f02EG2w==",
+          "dev": true
+        }
       }
     },
     "@babel/template": {
@@ -1209,16 +1331,6 @@
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
       "dev": true
     },
-    "@csstools/postcss-image-set-function": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-image-set-function/-/postcss-image-set-function-1.0.0.tgz",
-      "integrity": "sha512-B+uThZhN3rTRV7mjw3c+GCxIrBkHIAihnfZEb5Ig3+hauQMWGARD3j8UoMX7Hk6w4pBpMbm3Ggs9TVKvtn/kkA==",
-      "dev": true,
-      "requires": {
-        "postcss": "^6.0.20",
-        "postcss-value-parser": "^3.3.0"
-      }
-    },
     "@csstools/sass-import-resolve": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/sass-import-resolve/-/sass-import-resolve-1.0.0.tgz",
@@ -1226,14 +1338,14 @@
       "dev": true
     },
     "@emotion/babel-utils": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.4.tgz",
-      "integrity": "sha1-Lqxp6zGulE++SioOc2o121+BCGY=",
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.7.tgz",
+      "integrity": "sha512-U6iTV9HurrZ0ye8VOTIGcV4tMdDtAIGbfCH58L/NdOhW05pV/KVlNmbXsHp01VMSM+pgmSkGqHSLLE8zdDYJvA==",
       "dev": true,
       "requires": {
-        "@emotion/hash": "^0.6.3",
-        "@emotion/memoize": "^0.6.2",
-        "@emotion/serialize": "^0.8.2",
+        "@emotion/hash": "^0.6.5",
+        "@emotion/memoize": "^0.6.5",
+        "@emotion/serialize": "^0.8.5",
         "convert-source-map": "^1.5.1",
         "find-root": "^1.1.0",
         "source-map": "^0.7.2"
@@ -1248,69 +1360,69 @@
       }
     },
     "@emotion/hash": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.3.tgz",
-      "integrity": "sha1-DnpWBGJvxsbUrEBhovWsgNUCYqQ=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.5.tgz",
+      "integrity": "sha512-JlZbn5+adseTdDPTUkx/O1/UZbhaGR5fCLLWQDCIJ4eP9fJcVdP/qjlTveEX6mkNoJHWFbZ47wArWQQ0Qk6nMA==",
       "dev": true
     },
     "@emotion/is-prop-valid": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.2.tgz",
-      "integrity": "sha1-p2oWsXT/A/jjon+vYlm6zSGgKtw=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.5.tgz",
+      "integrity": "sha512-pfjQHT3FCZkAPxqY+sI6MmMTPMCKGIV3DcC1qhf68XkE9pGtKqb5WNN2vfmLgTMGnNVXnaFyx/VjdDYmGFcRaw==",
       "dev": true,
       "requires": {
-        "@emotion/memoize": "^0.6.2"
+        "@emotion/memoize": "^0.6.5"
       }
     },
     "@emotion/memoize": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.2.tgz",
-      "integrity": "sha1-E44AszLVGbTjB73tYVnlukiro64=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.5.tgz",
+      "integrity": "sha512-n1USr7yICA4LFIv7z6kKsXM8rZJxd1btKCBmDewlit+3OJ2j4bDfgXTAxTHYbPkHS/eztHmFWfsbxW2Pu5mDqA==",
       "dev": true
     },
     "@emotion/serialize": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.8.2.tgz",
-      "integrity": "sha1-07LK3fyTEH1jx5/Gu8EeVV47di4=",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.8.5.tgz",
+      "integrity": "sha512-NObUNfK7lqxFpSJWHRwJeeGSZaElEgMn5eR76ift06yx9FdwIfFY47ffapkf2lJUoIUx4ffP55fPSVPMgv0Qgw==",
       "dev": true,
       "requires": {
-        "@emotion/hash": "^0.6.3",
-        "@emotion/memoize": "^0.6.2",
-        "@emotion/unitless": "^0.6.3",
-        "@emotion/utils": "^0.7.1"
+        "@emotion/hash": "^0.6.5",
+        "@emotion/memoize": "^0.6.5",
+        "@emotion/unitless": "^0.6.5",
+        "@emotion/utils": "^0.7.3"
       }
     },
     "@emotion/stylis": {
-      "version": "0.6.10",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.6.10.tgz",
-      "integrity": "sha1-fTIeY568i6I6zlmQwg6U3Ou4890=",
+      "version": "0.6.12",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.6.12.tgz",
+      "integrity": "sha512-yS+t7l5FeYeiIyADyqjFBJvdotpphHb2S3mP4qak5BpV7ODvxuyAVF24IchEslW+A1MWHAhn5SiOW6GZIumiEQ==",
       "dev": true
     },
     "@emotion/unitless": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.3.tgz",
-      "integrity": "sha1-ZWguaKgnAccO77ONf5QaLAv6kN4=",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.5.tgz",
+      "integrity": "sha512-kAFHWyQTMLcOvse+RfEfJ6uwwOlVFZcUOMX0wuBvEMwnF3Zb/6VQ/xDgbx9fNlp3I6AAmijAtUtIyT2qVldpnA==",
       "dev": true
     },
     "@emotion/utils": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.7.1.tgz",
-      "integrity": "sha1-5E5ZbQPJ8WujsSetMzqKByvLWgo=",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.7.3.tgz",
+      "integrity": "sha512-1bGqG9IYJETOOqQEjWinGx1deLlAW/Fcew4GyrzZx0dJIgAjivZTmwzjrhB+Vhj7TgjMr0aTyj5byHmZezisZQ==",
       "dev": true
     },
     "@mdx-js/loader": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-0.11.1.tgz",
-      "integrity": "sha512-6RSmpiePjo+UMdx0wMMIq5P14WhlytdMSJ6vRO1ARc7dF8893RjVTvfXxFvZoYlFPyTEH4Ikxg8MZoiEFvPBmw==",
+      "version": "0.13.1-1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-0.13.1-1.tgz",
+      "integrity": "sha512-jOz477iknGVwfOdw8TAHsPkErRXppICDpZZvKf8C/8YLGTDhpkebU5gawWM0YwQtI0k8MfexgcricIvd4iJu8w==",
       "dev": true,
       "requires": {
-        "@mdx-js/tag": "^0.11.0"
+        "@mdx-js/tag": "^0.13.1-1"
       }
     },
     "@mdx-js/mdx": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-0.10.1.tgz",
-      "integrity": "sha512-2Mip8+44opmpPcJ5h7dtZ31pW9/ntslCEOsZk5xuP+SaafQzUjTRlDh6ifgp5+MDBgvjMzdAuHv3WgO2jj0Zyw==",
+      "version": "0.13.1-1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-0.13.1-1.tgz",
+      "integrity": "sha512-XofSLeW49U/OIIybhVfwmy+tTXekGzb+Bf90G5dM0AVn2eC65O1ozIwxgpTzdBDNCD4Hfu9SxSlt8208mv2w2w==",
       "dev": true,
       "requires": {
         "@mdx-js/mdxast": "^0.10.0",
@@ -1347,11 +1459,12 @@
       }
     },
     "@mdx-js/tag": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@mdx-js/tag/-/tag-0.11.0.tgz",
-      "integrity": "sha512-o//BoBPtlyYC5HdohjpaQ9+4epL2a9o5JYYWhRzwF6pMJnjyDnmulz88178Yu5GuI8AVxwqwbCHZ0qvXSUSDEg==",
+      "version": "0.13.1-1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/tag/-/tag-0.13.1-1.tgz",
+      "integrity": "sha512-ke76StkCSy10wj2fAX/HK6yOtZy62Eq52ECKhJYm+E6SdfKNPbX8CkNfJ/VjinjCfMOHx7n6UyA8Zpb6M7mhqw==",
       "dev": true,
       "requires": {
+        "create-react-context": "^0.2.2",
         "prop-types": "^15.6.1"
       }
     },
@@ -1393,6 +1506,12 @@
         "debug": "^2.6.8"
       }
     },
+    "@sindresorhus/is": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
+      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
+      "dev": true
+    },
     "@sindresorhus/slugify": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-0.3.0.tgz",
@@ -1403,10 +1522,25 @@
         "lodash.deburr": "^4.1.0"
       }
     },
+    "@sinonjs/formatio": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
+      "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
+      "dev": true,
+      "requires": {
+        "samsam": "1.3.0"
+      }
+    },
+    "@sinonjs/samsam": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-2.0.0.tgz",
+      "integrity": "sha512-D7VxhADdZbDJ0HjUTMnSQ5xIGb4H2yWpg8k9Sf1T08zfFiQYlaxM8LZydpR4FQ2E6LZJX8IlabNZ5io4vdChwg==",
+      "dev": true
+    },
     "@types/bluebird": {
-      "version": "3.5.20",
-      "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.20.tgz",
-      "integrity": "sha512-Wk41MVdF+cHBfVXj/ufUHJeO3BlIQr1McbHZANErMykaCWeDSZbH5erGjNBw2/3UlRdSxZbLfSuQTzFmPOYFsA==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.22.tgz",
+      "integrity": "sha512-wQamz3CYZCz9QVxhPOF+Odu2jZifcXkGJDff7580sx/TCR6/9Zsgv+iGe2/o4Upcs0RDFLVJuEtYSEFeAqDTSA==",
       "dev": true
     },
     "@types/body-parser": {
@@ -1420,9 +1554,9 @@
       }
     },
     "@types/bson": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/bson/-/bson-1.0.8.tgz",
-      "integrity": "sha512-PMa4nkRhLaqwsXQDDTzGbTyCIpej0ERznyAP9fyuGnlsmUbcC4Y25mdqjibYjkOPNyK/BWWUKneruaKHcS3Q8g==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/bson/-/bson-1.0.10.tgz",
+      "integrity": "sha512-gRf+Qy5Qiyjz28ZkPRP37bDHtGG67op/lV2qcIMhWUq4vIMJ6/j13ajeYH7LFhJ5RNflyLHmdANPGDXZ5a8EzQ==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -1438,6 +1572,12 @@
         "@types/node": "*"
       }
     },
+    "@types/cheerio": {
+      "version": "0.22.8",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.8.tgz",
+      "integrity": "sha512-LzF540VOFabhS2TR2yYFz2Mu/fTfkA+5AwYddtJbOJGwnYrr2e7fHadT7/Z3jNGJJdCRlO3ySxmW26NgRdwhNA==",
+      "dev": true
+    },
     "@types/chokidar": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/@types/chokidar/-/chokidar-1.7.5.tgz",
@@ -1496,6 +1636,25 @@
         "@types/node": "*"
       }
     },
+    "@types/enzyme": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.1.11.tgz",
+      "integrity": "sha512-abPTpLuveNVd2ibafCjwoZT9MerzgnBKd6ijNKdtlfJREGKXk5dxzKAXGoY9IuiYarH2YXTc197WeyIVQUFjQg==",
+      "dev": true,
+      "requires": {
+        "@types/cheerio": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/enzyme-adapter-react-16": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.2.tgz",
+      "integrity": "sha512-/oEtlwJyFIT9metXC2A90XnjfHwBDYxhFoJwqNjNDG5K2CCqp7xneQbAp4u5j280bOmalFYUDjfmmxNQG3S4Og==",
+      "dev": true,
+      "requires": {
+        "@types/enzyme": "*"
+      }
+    },
     "@types/events": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-1.2.0.tgz",
@@ -1525,15 +1684,15 @@
       }
     },
     "@types/graphql": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.13.1.tgz",
-      "integrity": "sha512-a6vRcP4M6+7Lqev1JeF3hGFmC3FNBIJ5cRnaSN/z1LtGVr/CaY6nqSlQbnFr2j8ucDlUAQU43LCnJrz6uLUyHg==",
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.13.3.tgz",
+      "integrity": "sha512-YNGkX5HtcDtufyQquww05yoWYiDdZPPubLafXqukYqGmpawHjodAXwufhTemqDdgGk48WU7RX2Ouj0VTc9b3AA==",
       "dev": true
     },
     "@types/ioredis": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/@types/ioredis/-/ioredis-3.2.8.tgz",
-      "integrity": "sha512-L2Qoq7Di43X0V7eccmSHn3ECLyxzS5810YKiV9Z5bLTNNuD/3xlaipywbynrkxAi29UIh7NIGikXm6OJNlM9hg==",
+      "version": "3.2.13",
+      "resolved": "https://registry.npmjs.org/@types/ioredis/-/ioredis-3.2.13.tgz",
+      "integrity": "sha512-38qPXqV4oEzucMcdl0yhqN9JCGYOjspvfQyOL4T4HpMcD4VIj4RfuumuM2mwTtK12jiHF0oxjyU8EvnLfHD+TA==",
       "dev": true,
       "requires": {
         "@types/bluebird": "*",
@@ -1541,9 +1700,9 @@
       }
     },
     "@types/jest": {
-      "version": "23.1.2",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.1.2.tgz",
-      "integrity": "sha512-qXPAaH+1KJBCRtQub2cd7GOnKfWkgRr++luya81ksUs+DA8QG2nMNZuved5K4Nb4enR61aS64CocEJNsjCKwog==",
+      "version": "23.1.6",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.1.6.tgz",
+      "integrity": "sha512-lBu2tjrfGuj0gARErNmHZJrnWBdRrYk2XqlBY3LRv8Dqxk3w3461uuFMKmwfDDiOa5kzXocUnunCBBacGwF3+A==",
       "dev": true
     },
     "@types/joi": {
@@ -1552,10 +1711,22 @@
       "integrity": "sha512-nOnsbHvoo5DsQEh8VGlbQlfg9+/iFSxE5RQKLNkAODIqyupdEkBCZf6RCNxR+9X0egMIkJ43NnwkEJKxLogsIA==",
       "dev": true
     },
+    "@types/jsdom": {
+      "version": "11.0.6",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-11.0.6.tgz",
+      "integrity": "sha512-6sw9iNdXak3Dk4iN1osdZeZcV8cTe2SNIVwbnt8MjFFAI8+nBWDNcDfjUgZZqycF3Twlr7xXlKntnOrruxNRvg==",
+      "dev": true,
+      "requires": {
+        "@types/events": "*",
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^4.0.0"
+      }
+    },
     "@types/lodash": {
-      "version": "4.14.109",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.109.tgz",
-      "integrity": "sha512-hop8SdPUEzbcJm6aTsmuwjIYQo1tqLseKCM+s2bBqTU2gErwI4fE+aqUVOlscPSQbKHKgtMMPoC+h4AIGOJYvw==",
+      "version": "4.14.112",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.112.tgz",
+      "integrity": "sha512-jDD7sendv3V7iwyRXSlECOR8HCtMN2faVA9ngLdHHihSVIwY7nbfsKl2kA6fimUDU1i5l/zgpG3aevwWnN3zCQ==",
       "dev": true
     },
     "@types/luxon": {
@@ -1571,9 +1742,9 @@
       "dev": true
     },
     "@types/mongodb": {
-      "version": "3.0.19",
-      "resolved": "https://registry.npmjs.org/@types/mongodb/-/mongodb-3.0.19.tgz",
-      "integrity": "sha512-KK30PZmGuCqSJQgb3tozzjy5hpQswMsAuqkO+T8vCUh9bSz1sZGx1nAOu79IzVNh2vBy1Xj46vk4A0PUHN5yBg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mongodb/-/mongodb-3.1.1.tgz",
+      "integrity": "sha512-lHEH+OwYNeuC28jlmdPT/wBAVMuB6M1sHjZKAtaho/LeJf78ILJPYUq2OD7mWVj9QR7uYiKVt4ExGkXegHFCJQ==",
       "dev": true,
       "requires": {
         "@types/bson": "*",
@@ -1582,9 +1753,9 @@
       }
     },
     "@types/node": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.1.tgz",
-      "integrity": "sha512-IsX9aDHDzJohkm3VCDB8tkzl5RQ34E/PFA29TQk6uDGb7Oc869ZBtmdKVDBzY3+h9GnXB8ssrRXEPVZrlIOPOw==",
+      "version": "10.5.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.5.2.tgz",
+      "integrity": "sha512-m9zXmifkZsMHZBOyxZWilMwmTlpC8x5Ty360JKTiXvlXZfBWYpsg9ZZvP/Ye+iZUh+Q+MxDLjItVTWIsfwz+8Q==",
       "dev": true
     },
     "@types/passport": {
@@ -1612,11 +1783,18 @@
       "version": "16.4.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.2.tgz",
       "integrity": "sha512-oVcVteCDNiVc/fkDjowRfAZQDEOR76j3CJ3FvwXNvfV6zJguhghy1lMgpAzYox+9AZsWch+JPV6Imml3wvIUeg==",
-      "dev": true,
       "requires": {
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-copy-to-clipboard": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.2.5.tgz",
+      "integrity": "sha512-5LggaWWlMcgehfeDmr4FZmK8MXntzxLYERFdrXk72ye6QwpoZpyYFGgUM+xGVVtIP2WXlor8twZTXK1xckEDYw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "16.0.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.6.tgz",
@@ -1628,13 +1806,34 @@
       }
     },
     "@types/react-relay": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@types/react-relay/-/react-relay-1.3.6.tgz",
-      "integrity": "sha512-X0qv3nGlE4TStFLLKxgj+6MgHZEExB1N/RDcVcyCauAojV5byD0c6VhuqAluYaTKaL2FBuxdtDL405IhIIjEbQ==",
+      "version": "github:coralproject/patched#ba4c8d01bb737e5f073534b32d870294e39cc5a8",
+      "from": "github:coralproject/patched#types/react-relay",
+      "dev": true
+    },
+    "@types/react-responsive": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-responsive/-/react-responsive-3.0.1.tgz",
+      "integrity": "sha512-ti7MKe0AuWCGpNkRzRsRB8ExS7NZotXtDtD27rX4HiZML37SetbIp3cw5FDXIeqIC7a3TzWuPjv/I9Qcu4YL3w==",
       "dev": true,
       "requires": {
-        "@types/react": "*",
-        "@types/relay-runtime": "*"
+        "@types/react": "*"
+      }
+    },
+    "@types/react-test-renderer": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.0.1.tgz",
+      "integrity": "sha512-kmNh8g67Ck/y/vp6KX+4JTJXiTGLZBylNhu+R7sm7zcvsrnIGVO6J1zew5inVg428j9f8yHpl68RcYOZXVborQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-tooltip": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-tooltip/-/react-tooltip-3.3.5.tgz",
+      "integrity": "sha512-wpWzjtMWBPymIoYjqZTeWX1v5dJe4V1akmcTM6iZwSS/cL8jdi6dFt4BoLXDOxgL5tEe/9yVBlQD+MAYvexBfw==",
+      "requires": {
+        "@types/react": "*"
       }
     },
     "@types/recompose": {
@@ -1651,6 +1850,15 @@
       "from": "github:coralproject/patched#types/relay-runtime",
       "dev": true
     },
+    "@types/sane": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/sane/-/sane-2.0.0.tgz",
+      "integrity": "sha512-6o/YMfcKcWIK5IAxeo/1DEoVnGKBkPSPj9odxczz2i1gFY78GvguqgtNo28nyKgJUiKEWuFj11acpgdRmRFz7A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/serve-static": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.2.tgz",
@@ -1661,6 +1869,18 @@
         "@types/mime": "*"
       }
     },
+    "@types/sinon": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-5.0.1.tgz",
+      "integrity": "sha512-yxzBCIjE3lp9lYjfBbIK/LRCoXgCLLbIIBIje7eNCcUIIR2CZZtyX5uto2hVoMSMqLrsRrT6mwwUEd0yFgOwpA==",
+      "dev": true
+    },
+    "@types/tough-cookie": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-2.3.3.tgz",
+      "integrity": "sha512-MDQLxNFRLasqS4UlkWMSACMKeSm1x4Q3TxzUC7KQUsh6RK1ZrQ0VEyE3yzXcBu+K8ejVj4wuX32eUG02yNp+YQ==",
+      "dev": true
+    },
     "@types/uuid": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-3.4.3.tgz",
@@ -1931,15 +2151,59 @@
         "long": "^3.2.0"
       }
     },
+    "@webpack-contrib/cli-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-contrib/cli-utils/-/cli-utils-1.0.2.tgz",
+      "integrity": "sha512-ZuV0pTi7x0Xd8MVZPIcDXbu7pg5+sNdrkdpmiW8mVto8+ru2+E0n8Opx36UxlDchBSiI6HouvaYcxmGOIS5yQA==",
+      "dev": true,
+      "requires": {
+        "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
+        "camelize": "^1.0.0",
+        "chalk": "^2.4.1",
+        "decamelize": "^2.0.0",
+        "loader-utils": "^1.1.0",
+        "meant": "^1.0.1",
+        "strip-ansi": "^4.0.0",
+        "text-table": "^0.2.0",
+        "webpack-log": "^1.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "decamelize": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
+          "dev": true,
+          "requires": {
+            "xregexp": "4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "@webpack-contrib/config-loader": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@webpack-contrib/config-loader/-/config-loader-1.1.3.tgz",
-      "integrity": "sha512-lOliuisjrh24MfhOYE5ljqyFlKfzyWGFrn3bbR0KlXQHY90j3pXWfFtEl4gNvqz69tJsM+1s7PUGJrK9CF46ng==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@webpack-contrib/config-loader/-/config-loader-1.2.1.tgz",
+      "integrity": "sha512-C7XsS6bXft0aRlyt7YCLg+fm97Mb3tWd+i5fVVlEl0NW5HKy8LoXVKj3mB7ECcEHNEEdHhgzg8gxP+Or8cMj8Q==",
       "dev": true,
       "requires": {
         "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
         "chalk": "^2.1.0",
         "cosmiconfig": "^5.0.2",
+        "is-plain-obj": "^1.1.0",
         "loud-rejection": "^1.6.0",
         "merge-options": "^1.0.1",
         "minimist": "^1.2.0",
@@ -2162,19 +2426,19 @@
       }
     },
     "apollo-link": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.1.tgz",
-      "integrity": "sha512-6Ghf+j3cQLCIvjXd2dJrLw+16HZbWbwmB1qlTc41BviB2hv+rK1nJr17Y9dWK0UD4p3i9Hfddx3tthpMKrueHg==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.2.tgz",
+      "integrity": "sha512-Uk/BC09dm61DZRDSu52nGq0nFhq7mcBPTjy5EEH1eunJndtCaNXQhQz/BjkI2NdrfGI+B+i5he6YSoRBhYizdw==",
       "requires": {
-        "@types/node": "^9.4.6",
+        "@types/graphql": "0.12.6",
         "apollo-utilities": "^1.0.0",
-        "zen-observable-ts": "^0.8.6"
+        "zen-observable-ts": "^0.8.9"
       },
       "dependencies": {
-        "@types/node": {
-          "version": "9.6.22",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.22.tgz",
-          "integrity": "sha512-RIg9EkxzVMkNH0M4sLRngK23f5QiigJC0iODQmu4nopzstt8AjegYund3r82iMrd2BNCjcZVnklaItvKHaGfBA=="
+        "@types/graphql": {
+          "version": "0.12.6",
+          "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.12.6.tgz",
+          "integrity": "sha512-wXAVyLfkG1UMkKOdMijVWFky39+OD/41KftzqfX1Oejd0Gm6dOIKjCihSVECg6X7PHjftxXmfOKA/d1H79ZfvQ=="
         }
       }
     },
@@ -2422,9 +2686,9 @@
       "dev": true
     },
     "ast-types": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.10.1.tgz",
-      "integrity": "sha512-UY7+9DPzlJ9VM8eY0b2TUZcZvF+1pO0hzMtAyjBYKhOmnvRlqYNYnWdtsMj0V16CGaMlpL0G1jnLbLo4AyotuQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.11.5.tgz",
+      "integrity": "sha512-oJjo+5e7/vEc2FBK8gUalV0pba4L3VdBIs2EKhOLHLcOd2FgQIVQN9xb0eZ9IjEWyAL7vq6fGJxOvVvdCHNyMw==",
       "dev": true
     },
     "astral-regex": {
@@ -2466,17 +2730,25 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "8.6.4",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.4.tgz",
-      "integrity": "sha512-9D0OoxWCqq9Okp9wD+igaCf6ZaNjYNFSCKxgMLAxAGqXwpapaZ+D0PBv265VHQLgam8a7gld4E6KgJJM6SKfQQ==",
+      "version": "8.6.5",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.5.tgz",
+      "integrity": "sha512-PLWJN3Xo/rycNkx+mp8iBDMTm3FeWe4VmYaZDSqL5QQB9sLsQkG5k8n+LNDFnhh9kdq2K+egL/icpctOmDHwig==",
       "dev": true,
       "requires": {
         "browserslist": "^3.2.8",
-        "caniuse-lite": "^1.0.30000859",
+        "caniuse-lite": "^1.0.30000864",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
         "postcss": "^6.0.23",
         "postcss-value-parser": "^3.2.3"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30000865",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
+          "integrity": "sha512-vs79o1mOSKRGv/1pSkp4EXgl4ZviWeYReXw60XfacPU64uQWZwJT6vZNmxRF9O+6zu71sJwMxLK5JXxbzuVrLw==",
+          "dev": true
+        }
       }
     },
     "aws-sign2": {
@@ -2524,45 +2796,10 @@
       }
     },
     "babel-core": {
-      "version": "6.26.3",
-      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
-      "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
-      "dev": true,
-      "requires": {
-        "babel-code-frame": "^6.26.0",
-        "babel-generator": "^6.26.0",
-        "babel-helpers": "^6.24.1",
-        "babel-messages": "^6.23.0",
-        "babel-register": "^6.26.0",
-        "babel-runtime": "^6.26.0",
-        "babel-template": "^6.26.0",
-        "babel-traverse": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "convert-source-map": "^1.5.1",
-        "debug": "^2.6.9",
-        "json5": "^0.5.1",
-        "lodash": "^4.17.4",
-        "minimatch": "^3.0.4",
-        "path-is-absolute": "^1.0.1",
-        "private": "^0.1.8",
-        "slash": "^1.0.0",
-        "source-map": "^0.5.7"
-      },
-      "dependencies": {
-        "babylon": {
-          "version": "6.18.0",
-          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
-          "dev": true
-        },
-        "json5": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
-          "dev": true
-        }
-      }
+      "version": "7.0.0-bridge.0",
+      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
+      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
+      "dev": true
     },
     "babel-generator": {
       "version": "6.26.1",
@@ -2737,16 +2974,17 @@
       }
     },
     "babel-plugin-emotion": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.4.tgz",
-      "integrity": "sha1-pOVKgJf2ugbLvHqQY5J6+v6f5zo=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.6.tgz",
+      "integrity": "sha512-aCRXUPm2pwaUqUtpQ2Gzbn5EeOD2RyUDTQDJl5Yqwg1RLQPs3OvnB6Xt6GUrMomMISxuwFrxuWfBMajHv74UjQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "7.0.0-beta.40",
+        "@babel/helper-module-imports": "7.0.0-beta.51",
         "@emotion/babel-utils": "^0.6.4",
         "@emotion/hash": "^0.6.2",
         "@emotion/memoize": "^0.6.1",
         "@emotion/stylis": "^0.6.10",
+        "babel-core": "^6.26.3",
         "babel-plugin-macros": "^2.0.0",
         "babel-plugin-syntax-jsx": "^6.18.0",
         "convert-source-map": "^1.5.0",
@@ -2757,34 +2995,64 @@
       },
       "dependencies": {
         "@babel/helper-module-imports": {
-          "version": "7.0.0-beta.40",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.40.tgz",
-          "integrity": "sha512-QFOskAKWbqJSBbGIl/Y1igJI4mW0A+wD5NFqsgDJj85KSvj/dHM4wNGIeqCi85nN9aMa4DgTBBrzUK4zSMsN2Q==",
+          "version": "7.0.0-beta.51",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.51.tgz",
+          "integrity": "sha1-zgBCgEX7t9XrwOp7+DV4nxU2arI=",
           "dev": true,
           "requires": {
-            "@babel/types": "7.0.0-beta.40",
-            "lodash": "^4.2.0"
+            "@babel/types": "7.0.0-beta.51",
+            "lodash": "^4.17.5"
           }
         },
         "@babel/types": {
-          "version": "7.0.0-beta.40",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.40.tgz",
-          "integrity": "sha512-uXCGCzTgMZxcSUzutCPtZmXbVC+cvENgS2e0tRuhn+Y1hZnMb8IHP0Trq7Q2MB/eFmG5pKrAeTIUfQIe5kA4Tg==",
+          "version": "7.0.0-beta.51",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.51.tgz",
+          "integrity": "sha1-2AK3tUO1g2x3iqaReXq/APPZfqk=",
           "dev": true,
           "requires": {
             "esutils": "^2.0.2",
-            "lodash": "^4.2.0",
+            "lodash": "^4.17.5",
             "to-fast-properties": "^2.0.0"
           }
         },
-        "touch": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/touch/-/touch-1.0.0.tgz",
-          "integrity": "sha1-RJy+LbrlqMgDjjDXH6D/RklHxN4=",
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
           "dev": true,
           "requires": {
-            "nopt": "~1.0.10"
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
           }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
         }
       }
     },
@@ -4147,6 +4415,45 @@
         "source-map-support": "^0.4.15"
       },
       "dependencies": {
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
         "source-map-support": {
           "version": "0.4.18",
           "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
@@ -4330,9 +4637,9 @@
       "dev": true
     },
     "bcrypt-pbkdf": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
-      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
       "dev": true,
       "optional": true,
       "requires": {
@@ -4457,43 +4764,6 @@
         "string-width": "^2.0.0",
         "term-size": "^1.2.0",
         "widest-line": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "brace-expansion": {
@@ -4785,6 +5055,16 @@
         "unset-value": "^1.0.0"
       }
     },
+    "cache-content-type": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cache-content-type/-/cache-content-type-1.0.0.tgz",
+      "integrity": "sha512-cVbmz0rAnsK3jPcQAlK4IDUUPaYAe4yl7MAfiKftHAcrW/azF1yikn2wE/8VAcC3yWtXi3lvXwsF1akK27Vo7w==",
+      "dev": true,
+      "requires": {
+        "mime-types": "^2.1.18",
+        "ylru": "^1.2.0"
+      }
+    },
     "call-me-maybe": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
@@ -4823,6 +5103,12 @@
         "quick-lru": "^1.0.0"
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
+      "dev": true
+    },
     "caniuse-api": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
@@ -4970,6 +5256,54 @@
       "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=",
       "dev": true
     },
+    "cheerio": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
+      "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=",
+      "dev": true,
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.0",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash": "^4.15.0",
+        "parse5": "^3.0.1"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+          "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "1"
+          }
+        },
+        "htmlparser2": {
+          "version": "3.9.2",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",
+          "integrity": "sha1-G9+HrMoPP55T+k/M6w9LTLsAszg=",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "domhandler": "^2.3.0",
+            "domutils": "^1.5.1",
+            "entities": "^1.1.1",
+            "inherits": "^2.0.1",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "parse5": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+          "dev": true,
+          "requires": {
+            "@types/node": "*"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
@@ -5127,6 +5461,17 @@
         "execa": "^0.8.0"
       },
       "dependencies": {
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
         "execa": {
           "version": "0.8.0",
           "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
@@ -5140,19 +5485,6 @@
             "p-finally": "^1.0.0",
             "signal-exit": "^3.0.0",
             "strip-eof": "^1.0.0"
-          },
-          "dependencies": {
-            "cross-spawn": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-              "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-              "dev": true,
-              "requires": {
-                "lru-cache": "^4.0.1",
-                "shebang-command": "^1.2.0",
-                "which": "^1.2.9"
-              }
-            }
           }
         }
       }
@@ -5238,12 +5570,6 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
-    "clorox": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/clorox/-/clorox-1.0.3.tgz",
-      "integrity": "sha512-w3gKAUKMJYmmaJyc+p+iDrDtLvsFasrx/y6/zWo2U1TZfsz3y4Vl4T9PHCZrOwk1eMTOSRI6xHdpDR4PhTdy8Q==",
-      "dev": true
-    },
     "cluster-key-slot": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.0.12.tgz",
@@ -5484,9 +5810,9 @@
       "dev": true
     },
     "convict": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/convict/-/convict-4.3.0.tgz",
-      "integrity": "sha512-R13duHXr424EDWO1dg/r43G5KF8IlN8O1gHJ140v/R6Mi8CWMSruLgRTUk0n4C5SoyQB22DQ7LKl5Lhni9hQ7w==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/convict/-/convict-4.3.1.tgz",
+      "integrity": "sha512-BLgyHUJREKCHVZ8rbXKIuNTDX/Is2GB/HZyUqh1IwvV0EeYBWtX+54OCG8tkIiAxB2yKowdP19+RHY5kCQ/SOg==",
       "requires": {
         "depd": "1.1.2",
         "json5": "1.0.1",
@@ -5561,6 +5887,15 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "copy-to-clipboard": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz",
+      "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==",
+      "dev": true,
+      "requires": {
+        "toggle-selection": "^1.0.3"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.5.2.tgz",
@@ -5600,6 +5935,19 @@
         "require-from-string": "^2.0.1"
       }
     },
+    "cp-file": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cp-file/-/cp-file-6.0.0.tgz",
+      "integrity": "sha512-OtHMgPugkgwHlbph25wlMKd358lZNhX1Y2viUpPoFmlBPlEiPIRhztYWha11grbGPnlM+urp5saVmwsChCIOEg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^1.0.0",
+        "nested-error-stacks": "^2.0.0",
+        "pify": "^3.0.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "cpx": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/cpx/-/cpx-1.5.0.tgz",
@@ -5760,6 +6108,49 @@
         }
       }
     },
+    "cpy": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cpy/-/cpy-7.0.1.tgz",
+      "integrity": "sha512-Zo52tXKLJcgy/baacn6KaNoRAakkl2wb+R4u6qJ4wlD0uchncwRQcIk66PlGlkzuToCJO6A6PWX27Tdwc8LU2g==",
+      "dev": true,
+      "requires": {
+        "arrify": "^1.0.1",
+        "cp-file": "^6.0.0",
+        "globby": "^8.0.1",
+        "nested-error-stacks": "^2.0.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "globby": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
+          "integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "dir-glob": "^2.0.0",
+            "fast-glob": "^2.0.2",
+            "glob": "^7.1.2",
+            "ignore": "^3.3.5",
+            "pify": "^3.0.0",
+            "slash": "^1.0.0"
+          }
+        }
+      }
+    },
     "create-ecdh": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
@@ -5771,9 +6162,9 @@
       }
     },
     "create-emotion": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.4.tgz",
-      "integrity": "sha1-CkN59r8HCMVP4mv81ra9NZLozyM=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.6.tgz",
+      "integrity": "sha512-4g46va26lw6DPfKF7HeWY3OI/qoaNSwpvO+li8dMydZfC6f6+ZffwlYHeIyAhGR8Z8C8c0H9J1pJbQRtb9LScw==",
       "dev": true,
       "requires": {
         "@emotion/hash": "^0.6.2",
@@ -5786,9 +6177,9 @@
       }
     },
     "create-emotion-styled": {
-      "version": "9.2.3",
-      "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.2.3.tgz",
-      "integrity": "sha1-F/sTs65MFl6m5aETVquLnKHa2cU=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.2.6.tgz",
+      "integrity": "sha512-Kk6qWuEiHY9iptLsxzoJztHM237yedoY2Zhmc79HwkRkC+wZ7W8IFt5gP6AAGx6eN44hc3Zwc+WA5N7ku3QJfg==",
       "dev": true,
       "requires": {
         "@emotion/is-prop-valid": "^0.6.1"
@@ -5830,6 +6221,16 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+      "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+      "dev": true,
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-fetch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-2.0.0.tgz",
@@ -5955,6 +6356,12 @@
         }
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=",
+      "dev": true
+    },
     "css-modules-loader-core": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
@@ -6091,9 +6498,9 @@
       "dev": true
     },
     "cssdb": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-1.6.0.tgz",
-      "integrity": "sha512-KBxrzWDyY0aFA3DkAH0SDWhIKp1or83pBLqacXq4VWNrOCwf/G9An+VDXIW8qAGJz11o9nO8mQezq1ZJOdaF8A==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-3.1.0.tgz",
+      "integrity": "sha512-9+ASPG9O+d876YfZJjStXszOGn3EEOp5scMeCwZb/+TwTZfadQFshz/Vsh1vGET9HzaXvsfV+1O0ShFb52DddA==",
       "dev": true
     },
     "cssesc": {
@@ -6227,9 +6634,9 @@
       }
     },
     "cssom": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.2.tgz",
-      "integrity": "sha1-uANhcMefB6kP8vFuIihAJ6JDhIs=",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.4.tgz",
+      "integrity": "sha512-+7prCSORpXNeR4/fUP3rL+TzqtiFfhMvTd7uEqMdgPvLPt4+uzFUeufx5RHjGTACCargg/DiEt/moMQmvnfkog==",
       "dev": true
     },
     "cssstyle": {
@@ -6244,8 +6651,7 @@
     "csstype": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.5.tgz",
-      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==",
-      "dev": true
+      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -6611,6 +7017,12 @@
         "is-woff2": "^1.0.0"
       }
     },
+    "discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
+      "dev": true
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -6646,46 +7058,134 @@
       }
     },
     "docz": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/docz/-/docz-0.2.11.tgz",
-      "integrity": "sha1-JpQDcirdfoTG52+0o1G/QP6nZrU=",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/docz/-/docz-0.5.8.tgz",
+      "integrity": "sha1-lnwx+TjQ/Z8eMbp6TJVujF9HGpM=",
       "dev": true,
       "requires": {
-        "@mdx-js/tag": "^0.11.0",
+        "@mdx-js/tag": "^0.13.1-1",
         "@sindresorhus/slugify": "^0.3.0",
+        "create-react-context": "^0.2.2",
         "deepmerge": "^2.1.1",
-        "docz-core": "^0.2.11",
-        "docz-theme-default": "^0.2.11",
+        "docz-core": "^0.5.7",
+        "docz-theme-default": "^0.5.8",
         "invariant": "^2.2.4",
         "loadable-components": "^2.2.2",
         "pascalcase": "^0.1.1",
-        "react": "^16.4.1",
-        "react-dom": "^16.4.1",
+        "react": "^16.2.0",
+        "react-dom": "^16.2.0",
         "react-router-dom": "^4.3.1",
-        "yargs": "^11.0.0"
+        "react-router-hash-link": "^1.2.0",
+        "yargs": "^12.0.1"
+      },
+      "dependencies": {
+        "decamelize": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
+          "dev": true,
+          "requires": {
+            "xregexp": "4.0.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
+          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
+          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "12.0.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.1.tgz",
+          "integrity": "sha512-B0vRAp1hRX4jgIOWFtjfNjd9OA9RWYZ6tqGA9/I/IrTMsxmKvtWy+ersM+jzpQqbC3YfLzeABPdeTgcJ9eu1qQ==",
+          "dev": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^2.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^10.1.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
+          "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^4.1.0"
+          }
+        }
       }
     },
     "docz-core": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/docz-core/-/docz-core-0.2.11.tgz",
-      "integrity": "sha1-53tAf2iKg1T/DHs2iPFJLHOVyfc=",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/docz-core/-/docz-core-0.5.7.tgz",
+      "integrity": "sha1-mXx8AXsEx6w3nEjgVvSGB6cpNII=",
       "dev": true,
       "requires": {
-        "@babel/core": "7.0.0-beta.51",
-        "@babel/preset-typescript": "^7.0.0-beta.51",
-        "@babel/runtime": "^7.0.0-beta.51",
-        "@mdx-js/loader": "^0.11.0",
-        "@mdx-js/mdx": "^0.10.1",
+        "@babel/core": "7.0.0-beta.52",
+        "@babel/preset-typescript": "^7.0.0-beta.52",
+        "@babel/runtime": "^7.0.0-beta.52",
+        "@mdx-js/loader": "^0.13.1-1",
+        "@mdx-js/mdx": "^0.13.1-1",
         "@mdx-js/mdxast": "^0.10.0",
         "@sindresorhus/slugify": "^0.3.0",
         "art-template": "^4.12.2",
-        "babel-loader": "^8.0.0-beta.3",
+        "babel-loader": "^8.0.0-beta.4",
         "babel-plugin-react-docgen": "^2.0.0-rc.1",
         "babel-polyfill": "^7.0.0-beta.3",
         "babel-preset-react-app": "^4.0.0-next.b2fd8db8",
+        "babel-traverse": "^6.26.0",
+        "babylon": "^6.18.0",
         "chalk": "^2.4.1",
         "chokidar": "^2.0.4",
         "connect-history-api-fallback": "^1.5.0",
+        "cpy": "^7.0.1",
         "deepmerge": "^2.1.1",
         "detect-port": "^1.2.3",
         "express": "^4.16.3",
@@ -6700,9 +7200,9 @@
         "koa-connect": "^2.0.1",
         "koa-mount": "^3.0.0",
         "koa-static": "^5.0.0",
-        "load-cfg": "^0.2.8",
+        "load-cfg": "^0.5.6",
         "lodash.get": "^4.4.2",
-        "prettier": "^1.13.5",
+        "prettier": "^1.13.7",
         "react-dev-utils": "^5.0.1",
         "react-docgen-typescript-loader": "^2.1.1",
         "react-hot-loader": "4.3.3",
@@ -6714,8 +7214,10 @@
         "remark-slug": "^5.0.0",
         "resolve": "^1.8.1",
         "signale": "^1.2.1",
+        "strip-indent": "^2.0.0",
+        "titleize": "^1.0.1",
         "to-vfile": "^5.0.0",
-        "uglifyjs-webpack-plugin": "^1.2.6",
+        "uglifyjs-webpack-plugin": "^1.2.7",
         "ulid": "^2.3.0",
         "unified": "^7.0.0",
         "unist-util-find": "^1.0.1",
@@ -6723,38 +7225,39 @@
         "unist-util-remove": "^1.0.1",
         "unist-util-visit": "^1.3.1",
         "url-loader": "^1.0.1",
-        "webpack": "^4.12.0",
+        "webpack": "^4.15.1",
         "webpack-chain": "^4.8.0",
-        "webpack-hot-client": "^4.0.3",
+        "webpack-hot-client": "^4.1.1",
         "webpack-manifest-plugin": "^2.0.3",
-        "webpack-serve": "^1.0.4",
+        "webpack-serve": "^2.0.2",
+        "webpack-serve-waitpage": "^1.0.0",
         "webpackbar": "^2.6.1",
-        "ws": "^5.2.0",
-        "yargs": "^11.0.0"
+        "ws": "^5.2.1",
+        "yargs": "^12.0.1"
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.51.tgz",
-          "integrity": "sha1-vXHZsZKvl435FYKdOdQJRFZDmgw=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.52.tgz",
+          "integrity": "sha1-GSSDv6DR5GfBAVccIQKcy3SvKAE=",
           "dev": true,
           "requires": {
-            "@babel/highlight": "7.0.0-beta.51"
+            "@babel/highlight": "7.0.0-beta.52"
           }
         },
         "@babel/core": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.0.0-beta.51.tgz",
-          "integrity": "sha1-DlS9a2OHNrKuWTwxpH8JaeKyuW0=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.0.0-beta.52.tgz",
+          "integrity": "sha1-8nqaRo+M+chgqryl9ghPpS+8blU=",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "7.0.0-beta.51",
-            "@babel/generator": "7.0.0-beta.51",
-            "@babel/helpers": "7.0.0-beta.51",
-            "@babel/parser": "7.0.0-beta.51",
-            "@babel/template": "7.0.0-beta.51",
-            "@babel/traverse": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51",
+            "@babel/code-frame": "7.0.0-beta.52",
+            "@babel/generator": "7.0.0-beta.52",
+            "@babel/helpers": "7.0.0-beta.52",
+            "@babel/parser": "7.0.0-beta.52",
+            "@babel/template": "7.0.0-beta.52",
+            "@babel/traverse": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52",
             "convert-source-map": "^1.1.0",
             "debug": "^3.1.0",
             "json5": "^0.5.0",
@@ -6766,12 +7269,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.51.tgz",
-          "integrity": "sha1-bHV1/952HQdIXgS67cA5LG2eMPY=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.52.tgz",
+          "integrity": "sha1-JpaPEvrYGM2XTISbKGtDfh6MzZE=",
           "dev": true,
           "requires": {
-            "@babel/types": "7.0.0-beta.51",
+            "@babel/types": "7.0.0-beta.52",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.5",
             "source-map": "^0.5.0",
@@ -6779,49 +7282,49 @@
           }
         },
         "@babel/helper-function-name": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.51.tgz",
-          "integrity": "sha1-IbSHSiJ8+Z7K/MMKkDAtpaJkBWE=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.52.tgz",
+          "integrity": "sha1-qGelj/VxsldysteZsyhmBYVzxFA=",
           "dev": true,
           "requires": {
-            "@babel/helper-get-function-arity": "7.0.0-beta.51",
-            "@babel/template": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51"
+            "@babel/helper-get-function-arity": "7.0.0-beta.52",
+            "@babel/template": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52"
           }
         },
         "@babel/helper-get-function-arity": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.51.tgz",
-          "integrity": "sha1-MoGy0EWvlcFyzpGyCCXYXqRnZBE=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.52.tgz",
+          "integrity": "sha1-HAzaWOC3X0XpLq+9j+GJpO7pK3Q=",
           "dev": true,
           "requires": {
-            "@babel/types": "7.0.0-beta.51"
+            "@babel/types": "7.0.0-beta.52"
           }
         },
         "@babel/helper-split-export-declaration": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.51.tgz",
-          "integrity": "sha1-imw/ZsTSZTUvwHdIT59ugKUauXg=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.52.tgz",
+          "integrity": "sha1-SqxPMOpjhK82duBLUkZydjLkYN8=",
           "dev": true,
           "requires": {
-            "@babel/types": "7.0.0-beta.51"
+            "@babel/types": "7.0.0-beta.52"
           }
         },
         "@babel/helpers": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.0.0-beta.51.tgz",
-          "integrity": "sha1-lScr4qtGNNaCBCX4klAxqSiRg5c=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.0.0-beta.52.tgz",
+          "integrity": "sha1-ib7r5OT9ayL111QHFgJ2KUCMSmM=",
           "dev": true,
           "requires": {
-            "@babel/template": "7.0.0-beta.51",
-            "@babel/traverse": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51"
+            "@babel/template": "7.0.0-beta.52",
+            "@babel/traverse": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52"
           }
         },
         "@babel/highlight": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.51.tgz",
-          "integrity": "sha1-6IRK4loVlcz9QriWI7Q3bKBtIl0=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.52.tgz",
+          "integrity": "sha1-7ySTFDLwYVXnvDnNuKaze0oos9A=",
           "dev": true,
           "requires": {
             "chalk": "^2.0.0",
@@ -6830,35 +7333,35 @@
           }
         },
         "@babel/parser": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.51.tgz",
-          "integrity": "sha1-J87C30Cd9gr1gnDtj2qlVAnqhvY=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.52.tgz",
+          "integrity": "sha1-TpNbYs2b+HK9N7zx9j2C/nsCN6I=",
           "dev": true
         },
         "@babel/template": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.51.tgz",
-          "integrity": "sha1-lgKkCuvPNXrpZ34lMu9fyBD1+/8=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.52.tgz",
+          "integrity": "sha1-ROGPrDglH1f5JRHWdI8JWrAvmW4=",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "7.0.0-beta.51",
-            "@babel/parser": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51",
+            "@babel/code-frame": "7.0.0-beta.52",
+            "@babel/parser": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52",
             "lodash": "^4.17.5"
           }
         },
         "@babel/traverse": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.51.tgz",
-          "integrity": "sha1-mB2vLOw0emIx06odnhgDsDqqpKg=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.52.tgz",
+          "integrity": "sha1-m4uplPcmTZhHhYrS/uzCc4xeLvM=",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "7.0.0-beta.51",
-            "@babel/generator": "7.0.0-beta.51",
-            "@babel/helper-function-name": "7.0.0-beta.51",
-            "@babel/helper-split-export-declaration": "7.0.0-beta.51",
-            "@babel/parser": "7.0.0-beta.51",
-            "@babel/types": "7.0.0-beta.51",
+            "@babel/code-frame": "7.0.0-beta.52",
+            "@babel/generator": "7.0.0-beta.52",
+            "@babel/helper-function-name": "7.0.0-beta.52",
+            "@babel/helper-split-export-declaration": "7.0.0-beta.52",
+            "@babel/parser": "7.0.0-beta.52",
+            "@babel/types": "7.0.0-beta.52",
             "debug": "^3.1.0",
             "globals": "^11.1.0",
             "invariant": "^2.2.0",
@@ -6866,9 +7369,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.0.0-beta.51",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.51.tgz",
-          "integrity": "sha1-2AK3tUO1g2x3iqaReXq/APPZfqk=",
+          "version": "7.0.0-beta.52",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.52.tgz",
+          "integrity": "sha1-o+ViCxU0slOlCrzyIitSDiOxbaI=",
           "dev": true,
           "requires": {
             "esutils": "^2.0.2",
@@ -6876,25 +7379,214 @@
             "to-fast-properties": "^2.0.0"
           }
         },
-        "chokidar": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
-          "integrity": "sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==",
+        "@webassemblyjs/ast": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.5.13.tgz",
+          "integrity": "sha512-49nwvW/Hx9i+OYHg+mRhKZfAlqThr11Dqz8TsrvqGKMhdI2ijy3KBJOun2Z4770TPjrIJhR6KxChQIDaz8clDA==",
           "dev": true,
           "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.0",
-            "braces": "^2.3.0",
-            "fsevents": "^1.2.2",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.1",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "lodash.debounce": "^4.0.8",
-            "normalize-path": "^2.1.1",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.0.0",
-            "upath": "^1.0.5"
+            "@webassemblyjs/helper-module-context": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/wast-parser": "1.5.13",
+            "debug": "^3.1.0",
+            "mamacro": "^0.0.3"
+          }
+        },
+        "@webassemblyjs/floating-point-hex-parser": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.5.13.tgz",
+          "integrity": "sha512-vrvvB18Kh4uyghSKb0NTv+2WZx871WL2NzwMj61jcq2bXkyhRC+8Q0oD7JGVf0+5i/fKQYQSBCNMMsDMRVAMqA==",
+          "dev": true
+        },
+        "@webassemblyjs/helper-api-error": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.5.13.tgz",
+          "integrity": "sha512-dBh2CWYqjaDlvMmRP/kudxpdh30uXjIbpkLj9HQe+qtYlwvYjPRjdQXrq1cTAAOUSMTtzqbXIxEdEZmyKfcwsg==",
+          "dev": true
+        },
+        "@webassemblyjs/helper-buffer": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.5.13.tgz",
+          "integrity": "sha512-v7igWf1mHcpJNbn4m7e77XOAWXCDT76Xe7Is1VQFXc4K5jRcFrl9D0NrqM4XifQ0bXiuTSkTKMYqDxu5MhNljA==",
+          "dev": true,
+          "requires": {
+            "debug": "^3.1.0"
+          }
+        },
+        "@webassemblyjs/helper-code-frame": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.5.13.tgz",
+          "integrity": "sha512-yN6ScQQDFCiAXnVctdVO/J5NQRbwyTbQzsGzEgXsAnrxhjp0xihh+nNHQTMrq5UhOqTb5LykpJAvEv9AT0jnAQ==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/wast-printer": "1.5.13"
+          }
+        },
+        "@webassemblyjs/helper-fsm": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.5.13.tgz",
+          "integrity": "sha512-hSIKzbXjVMRvy3Jzhgu+vDd/aswJ+UMEnLRCkZDdknZO3Z9e6rp1DAs0tdLItjCFqkz9+0BeOPK/mk3eYvVzZg==",
+          "dev": true
+        },
+        "@webassemblyjs/helper-module-context": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.5.13.tgz",
+          "integrity": "sha512-zxJXULGPLB7r+k+wIlvGlXpT4CYppRz8fLUM/xobGHc9Z3T6qlmJD9ySJ2jknuktuuiR9AjnNpKYDECyaiX+QQ==",
+          "dev": true,
+          "requires": {
+            "debug": "^3.1.0",
+            "mamacro": "^0.0.3"
+          }
+        },
+        "@webassemblyjs/helper-wasm-bytecode": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.5.13.tgz",
+          "integrity": "sha512-0n3SoNGLvbJIZPhtMFq0XmmnA/YmQBXaZKQZcW8maGKwLpVcgjNrxpFZHEOLKjXJYVN5Il8vSfG7nRX50Zn+aw==",
+          "dev": true
+        },
+        "@webassemblyjs/helper-wasm-section": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.5.13.tgz",
+          "integrity": "sha512-IJ/goicOZ5TT1axZFSnlAtz4m8KEjYr12BNOANAwGFPKXM4byEDaMNXYowHMG0yKV9a397eU/NlibFaLwr1fbw==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-buffer": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/wasm-gen": "1.5.13",
+            "debug": "^3.1.0"
+          }
+        },
+        "@webassemblyjs/ieee754": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.5.13.tgz",
+          "integrity": "sha512-TseswvXEPpG5TCBKoLx9tT7+/GMACjC1ruo09j46ULRZWYm8XHpDWaosOjTnI7kr4SRJFzA6MWoUkAB+YCGKKg==",
+          "dev": true,
+          "requires": {
+            "ieee754": "^1.1.11"
+          }
+        },
+        "@webassemblyjs/leb128": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.5.13.tgz",
+          "integrity": "sha512-0NRMxrL+GG3eISGZBmLBLAVjphbN8Si15s7jzThaw1UE9e5BY1oH49/+MA1xBzxpf1OW5sf9OrPDOclk9wj2yg==",
+          "dev": true,
+          "requires": {
+            "long": "4.0.0"
+          },
+          "dependencies": {
+            "long": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+              "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==",
+              "dev": true
+            }
+          }
+        },
+        "@webassemblyjs/utf8": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.5.13.tgz",
+          "integrity": "sha512-Ve1ilU2N48Ew0lVGB8FqY7V7hXjaC4+PeZM+vDYxEd+R2iQ0q+Wb3Rw8v0Ri0+rxhoz6gVGsnQNb4FjRiEH/Ng==",
+          "dev": true
+        },
+        "@webassemblyjs/wasm-edit": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.5.13.tgz",
+          "integrity": "sha512-X7ZNW4+Hga4f2NmqENnHke2V/mGYK/xnybJSIXImt1ulxbCOEs/A+ZK/Km2jgihjyVxp/0z0hwIcxC6PrkWtgw==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-buffer": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/helper-wasm-section": "1.5.13",
+            "@webassemblyjs/wasm-gen": "1.5.13",
+            "@webassemblyjs/wasm-opt": "1.5.13",
+            "@webassemblyjs/wasm-parser": "1.5.13",
+            "@webassemblyjs/wast-printer": "1.5.13",
+            "debug": "^3.1.0"
+          }
+        },
+        "@webassemblyjs/wasm-gen": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.5.13.tgz",
+          "integrity": "sha512-yfv94Se8R73zmr8GAYzezFHc3lDwE/lBXQddSiIZEKZFuqy7yWtm3KMwA1uGbv5G1WphimJxboXHR80IgX1hQA==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/ieee754": "1.5.13",
+            "@webassemblyjs/leb128": "1.5.13",
+            "@webassemblyjs/utf8": "1.5.13"
+          }
+        },
+        "@webassemblyjs/wasm-opt": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.5.13.tgz",
+          "integrity": "sha512-IkXSkgzVhQ0QYAdIayuCWMmXSYx0dHGU8Ah/AxJf1gBvstMWVnzJnBwLsXLyD87VSBIcsqkmZ28dVb0mOC3oBg==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-buffer": "1.5.13",
+            "@webassemblyjs/wasm-gen": "1.5.13",
+            "@webassemblyjs/wasm-parser": "1.5.13",
+            "debug": "^3.1.0"
+          }
+        },
+        "@webassemblyjs/wasm-parser": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.5.13.tgz",
+          "integrity": "sha512-XnYoIcu2iqq8/LrtmdnN3T+bRjqYFjRHqWbqK3osD/0r/Fcv4d9ecRzjVtC29ENEuNTK4mQ9yyxCBCbK8S/cpg==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-api-error": "1.5.13",
+            "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
+            "@webassemblyjs/ieee754": "1.5.13",
+            "@webassemblyjs/leb128": "1.5.13",
+            "@webassemblyjs/utf8": "1.5.13"
+          }
+        },
+        "@webassemblyjs/wast-parser": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.5.13.tgz",
+          "integrity": "sha512-Lbz65T0LQ1LgzKiUytl34CwuhMNhaCLgrh0JW4rJBN6INnBB8NMwUfQM+FxTnLY9qJ+lHJL/gCM5xYhB9oWi4A==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/floating-point-hex-parser": "1.5.13",
+            "@webassemblyjs/helper-api-error": "1.5.13",
+            "@webassemblyjs/helper-code-frame": "1.5.13",
+            "@webassemblyjs/helper-fsm": "1.5.13",
+            "long": "^3.2.0",
+            "mamacro": "^0.0.3"
+          }
+        },
+        "@webassemblyjs/wast-printer": {
+          "version": "1.5.13",
+          "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.5.13.tgz",
+          "integrity": "sha512-QcwogrdqcBh8Z+eUF8SG+ag5iwQSXxQJELBEHmLkk790wgQgnIMmntT2sMAMw53GiFNckArf5X0bsCA44j3lWQ==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/wast-parser": "1.5.13",
+            "long": "^3.2.0"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
           }
         },
         "debug": {
@@ -6906,6 +7598,15 @@
             "ms": "2.0.0"
           }
         },
+        "decamelize": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
+          "dev": true,
+          "requires": {
+            "xregexp": "4.0.0"
+          }
+        },
         "detect-port-alt": {
           "version": "1.1.6",
           "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -6927,16 +7628,74 @@
             }
           }
         },
+        "enhanced-resolve": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
+          "integrity": "sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "memory-fs": "^0.4.0",
+            "tapable": "^1.0.0"
+          }
+        },
+        "eslint-scope": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz",
+          "integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
         "json5": {
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
           "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
           "dev": true
         },
-        "prettier": {
-          "version": "1.13.6",
-          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.6.tgz",
-          "integrity": "sha512-p5eqCNiohWZN++7aJXUVj0JgLqHCPLf9GLIcLBHGNWs4Y9FJOPs6+KNO2WT0udJIQJTbeZFrJkjzjcb8fkAYYQ==",
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
+          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
+          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
           "dev": true
         },
         "react-dev-utils": {
@@ -6977,41 +7736,96 @@
                 "strip-ansi": "^3.0.0",
                 "supports-color": "^2.0.0"
               }
-            },
-            "cross-spawn": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-              "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-              "dev": true,
-              "requires": {
-                "lru-cache": "^4.0.1",
-                "shebang-command": "^1.2.0",
-                "which": "^1.2.9"
-              }
             }
           }
+        },
+        "webpack": {
+          "version": "4.16.1",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.1.tgz",
+          "integrity": "sha512-6jpzObU18y7lXDJz7XCLvzgrqcJ0rZ2jhKvnTivza9gM2GvPW93xxtmEll2GgmdC0zVQAtbHrH/9BtyMjSDZfA==",
+          "dev": true,
+          "requires": {
+            "@webassemblyjs/ast": "1.5.13",
+            "@webassemblyjs/helper-module-context": "1.5.13",
+            "@webassemblyjs/wasm-edit": "1.5.13",
+            "@webassemblyjs/wasm-opt": "1.5.13",
+            "@webassemblyjs/wasm-parser": "1.5.13",
+            "acorn": "^5.6.2",
+            "acorn-dynamic-import": "^3.0.0",
+            "ajv": "^6.1.0",
+            "ajv-keywords": "^3.1.0",
+            "chrome-trace-event": "^1.0.0",
+            "enhanced-resolve": "^4.1.0",
+            "eslint-scope": "^4.0.0",
+            "json-parse-better-errors": "^1.0.2",
+            "loader-runner": "^2.3.0",
+            "loader-utils": "^1.1.0",
+            "memory-fs": "~0.4.1",
+            "micromatch": "^3.1.8",
+            "mkdirp": "~0.5.0",
+            "neo-async": "^2.5.0",
+            "node-libs-browser": "^2.0.0",
+            "schema-utils": "^0.4.4",
+            "tapable": "^1.0.0",
+            "uglifyjs-webpack-plugin": "^1.2.4",
+            "watchpack": "^1.5.0",
+            "webpack-sources": "^1.0.1"
+          }
+        },
+        "yargs": {
+          "version": "12.0.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.1.tgz",
+          "integrity": "sha512-B0vRAp1hRX4jgIOWFtjfNjd9OA9RWYZ6tqGA9/I/IrTMsxmKvtWy+ersM+jzpQqbC3YfLzeABPdeTgcJ9eu1qQ==",
+          "dev": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^2.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^10.1.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
+          "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^4.1.0"
+          }
         }
       }
     },
     "docz-theme-default": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/docz-theme-default/-/docz-theme-default-0.2.11.tgz",
-      "integrity": "sha1-fMKeebffxnqPyQpkWfNkaeJ0BH8=",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/docz-theme-default/-/docz-theme-default-0.5.8.tgz",
+      "integrity": "sha1-brlkb7d7v8eY4s3lO2ubY+aZjME=",
       "dev": true,
       "requires": {
-        "docz": "^0.2.11",
-        "emotion": "^9.2.3",
-        "emotion-theming": "^9.2.3",
+        "docz": "^0.5.8",
+        "emotion": "^9.2.5",
+        "emotion-theming": "^9.2.5",
+        "facepaint": "^1.2.1",
         "fast-deep-equal": "^2.0.1",
+        "fuse.js": "^3.2.1",
         "prismjs": "^1.15.0",
         "prop-types": "15.6.2",
-        "react": "^16.4.1",
-        "react-dom": "^16.4.1",
-        "react-emotion": "^9.2.3",
-        "react-feather": "^1.1.0",
+        "react": "^16.2.0",
+        "react-adopt": "^0.6.0",
+        "react-breakpoints": "^3.0.0",
+        "react-content-loader": "^3.1.2",
+        "react-dom": "^16.2.0",
+        "react-emotion": "^9.2.5",
+        "react-feather": "^1.1.1",
         "react-lightweight-tooltip": "^1.0.0",
-        "react-powerplug": "^0.1.6",
-        "react-spinners": "^0.3.2",
+        "react-powerplug": "^1.0.0-rc.1",
         "webfontloader": "^1.6.28"
       }
     },
@@ -7168,6 +7982,12 @@
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
+    "ejs": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz",
+      "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==",
+      "dev": true
+    },
     "electron-to-chromium": {
       "version": "1.3.50",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.50.tgz",
@@ -7202,19 +8022,19 @@
       "dev": true
     },
     "emotion": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.4.tgz",
-      "integrity": "sha1-ATnnzBVLKEX0ua+qmW3U3hO7kOM=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.6.tgz",
+      "integrity": "sha512-95/EiWkADklxyy1y1qlJeX5Cepa7WfpJBJSBgbLkDCBzOnP4maluvz52xcV5UaObBTfVnEBq77Go6/bgF7+xaA==",
       "dev": true,
       "requires": {
-        "babel-plugin-emotion": "^9.2.4",
-        "create-emotion": "^9.2.4"
+        "babel-plugin-emotion": "^9.2.6",
+        "create-emotion": "^9.2.6"
       }
     },
     "emotion-theming": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-9.2.4.tgz",
-      "integrity": "sha1-l1g3hh7yAocEoBSmDGTr+r1DJ1U=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-9.2.6.tgz",
+      "integrity": "sha512-sbZStubPmaDuMhs3+saH4XegnoMgbVtEY2giD1MP+maDinCnJdzf/1Apcip1wo5HMAN7vrjvpmcY13pH34xR6g==",
       "dev": true,
       "requires": {
         "hoist-non-react-statics": "^2.3.1"
@@ -7260,6 +8080,65 @@
       "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
       "dev": true
     },
+    "enzyme": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.3.0.tgz",
+      "integrity": "sha512-l8csyPyLmtxskTz6pX9W8eDOyH1ckEtDttXk/vlFWCjv00SkjTjtoUrogqp4yEvMyneU9dUJoOLnqFoiHb8IHA==",
+      "dev": true,
+      "requires": {
+        "cheerio": "^1.0.0-rc.2",
+        "function.prototype.name": "^1.0.3",
+        "has": "^1.0.1",
+        "is-boolean-object": "^1.0.0",
+        "is-callable": "^1.1.3",
+        "is-number-object": "^1.0.3",
+        "is-string": "^1.0.4",
+        "is-subset": "^0.1.1",
+        "lodash": "^4.17.4",
+        "object-inspect": "^1.5.0",
+        "object-is": "^1.0.1",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.0.4",
+        "object.values": "^1.0.4",
+        "raf": "^3.4.0",
+        "rst-selector-parser": "^2.2.3"
+      }
+    },
+    "enzyme-adapter-react-16": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz",
+      "integrity": "sha512-kC8pAtU2Jk3OJ0EG8Y2813dg9Ol0TXi7UNxHzHiWs30Jo/hj7alc//G1YpKUsPP1oKl9X+Lkx+WlGJpPYA+nvw==",
+      "dev": true,
+      "requires": {
+        "enzyme-adapter-utils": "^1.3.0",
+        "lodash": "^4.17.4",
+        "object.assign": "^4.0.4",
+        "object.values": "^1.0.4",
+        "prop-types": "^15.6.0",
+        "react-reconciler": "^0.7.0",
+        "react-test-renderer": "^16.0.0-0"
+      }
+    },
+    "enzyme-adapter-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.3.0.tgz",
+      "integrity": "sha512-vVXSt6uDv230DIv+ebCG66T1Pm36Kv+m74L1TrF4kaE7e1V7Q/LcxO0QRkajk5cA6R3uu9wJf5h13wOTezTbjA==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.4",
+        "object.assign": "^4.0.4",
+        "prop-types": "^15.6.0"
+      }
+    },
+    "enzyme-to-json": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.4.tgz",
+      "integrity": "sha1-Z8YEDpMRgvGDQYry659DIyWKp38=",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.4"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -7415,9 +8294,9 @@
       }
     },
     "esm": {
-      "version": "3.0.55",
-      "resolved": "https://registry.npmjs.org/esm/-/esm-3.0.55.tgz",
-      "integrity": "sha512-YmOhwp5znUfxH5UCfAjXg3CP5ihWa5QgG24gS0GON4DI/B+fkYTK/t7WTpMwPMqJLzPTRUKcQJ31MtRgkHPXcg==",
+      "version": "3.0.71",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.0.71.tgz",
+      "integrity": "sha512-RAgyznLvtK17ld4IQBp+wEsVp3JAHb9Nnbu5fGevnFpKeKVPuh/WexdqUuanhez5s9NJD2+iEtM8LfFu0jL8Rw==",
       "dev": true
     },
     "esprima": {
@@ -7635,17 +8514,17 @@
       }
     },
     "expect": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-23.2.0.tgz",
-      "integrity": "sha1-U6fhNeNv4n51hnsReP8IqqzCsN0=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-23.3.0.tgz",
+      "integrity": "sha1-7LBRrcvcQKxNtXbBYGfxL9sTzGE=",
       "dev": true,
       "requires": {
         "ansi-styles": "^3.2.0",
         "jest-diff": "^23.2.0",
         "jest-get-type": "^22.1.0",
         "jest-matcher-utils": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-regex-util": "^23.0.0"
+        "jest-message-util": "^23.3.0",
+        "jest-regex-util": "^23.3.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -7825,6 +8704,12 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
+    "facepaint": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/facepaint/-/facepaint-1.2.1.tgz",
+      "integrity": "sha512-oNvBekbhsm/0PNSOWca5raHNAi6dG960Bx6LJgxDPNF59WpuspgQ17bN5MKwOr7JcFdQYc7StW3VZ28DBZLavQ==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
@@ -8069,12 +8954,20 @@
       }
     },
     "flat": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/flat/-/flat-4.0.0.tgz",
-      "integrity": "sha512-ji/WMv2jdsE+LaznpkIF9Haax0sdpTBozrz/Dtg4qSRMfbs8oVg4ypJunIRYPiMLvH/ed6OflXbnbTIKJhtgeg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.0.tgz",
+      "integrity": "sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==",
       "dev": true,
       "requires": {
-        "is-buffer": "~1.1.5"
+        "is-buffer": "~2.0.3"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==",
+          "dev": true
+        }
       }
     },
     "flatten": {
@@ -8101,6 +8994,13 @@
       "dev": true,
       "requires": {
         "intl-pluralrules": "github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b"
+      },
+      "dependencies": {
+        "intl-pluralrules": {
+          "version": "github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b",
+          "from": "github:projectfluent/IntlPluralRules#module",
+          "dev": true
+        }
       }
     },
     "fluent-langneg": {
@@ -8295,24 +9195,28 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8322,12 +9226,14 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
           "requires": {
             "balanced-match": "^1.0.0",
@@ -8336,34 +9242,40 @@
         },
         "chownr": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
           "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true,
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8372,25 +9284,29 @@
         },
         "deep-extend": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==",
           "dev": true,
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "dev": true,
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8399,13 +9315,15 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "dev": true,
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8421,7 +9339,8 @@
         },
         "glob": {
           "version": "7.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8435,13 +9354,15 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.21",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8450,7 +9371,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8459,7 +9381,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8469,18 +9392,21 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "dev": true
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -8488,13 +9414,15 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -8502,12 +9430,14 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "minipass": {
           "version": "2.2.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
           "requires": {
             "safe-buffer": "^5.1.1",
@@ -8516,7 +9446,8 @@
         },
         "minizlib": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8525,7 +9456,8 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
             "minimist": "0.0.8"
@@ -8533,13 +9465,15 @@
         },
         "ms": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true,
           "optional": true
         },
         "needle": {
           "version": "2.2.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8550,7 +9484,8 @@
         },
         "node-pre-gyp": {
           "version": "0.10.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8568,7 +9503,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8578,13 +9514,15 @@
         },
         "npm-bundled": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
           "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.1.10",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8594,7 +9532,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8606,18 +9545,21 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
           "requires": {
             "wrappy": "1"
@@ -8625,19 +9567,22 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8647,19 +9592,22 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.7",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8671,7 +9619,8 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "dev": true,
               "optional": true
             }
@@ -8679,7 +9628,8 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8694,7 +9644,8 @@
         },
         "rimraf": {
           "version": "2.6.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8703,42 +9654,49 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
           "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.5.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
             "code-point-at": "^1.0.0",
@@ -8748,7 +9706,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8757,7 +9716,8 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -8765,13 +9725,15 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "dev": true,
           "optional": true
         },
         "tar": {
           "version": "4.4.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8786,13 +9748,15 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8801,12 +9765,14 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "dev": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
           "dev": true
         }
       }
@@ -8817,6 +9783,23 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "function.prototype.name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.0.tgz",
+      "integrity": "sha512-Bs0VRrTz4ghD8pTmbJQD1mZ8A/mN0ur/jGz+A6FBxPDUPkm1tNfF6bhTYPA7i7aF4lZJVr+OXTNNrnnIl58Wfg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "function-bind": "^1.1.1",
+        "is-callable": "^1.1.3"
+      }
+    },
+    "fuse.js": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.2.1.tgz",
+      "integrity": "sha1-YyDLlM5W7JdVyJred1vNuwNY1CU=",
+      "dev": true
+    },
     "get-caller-file": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
@@ -9167,9 +10150,9 @@
       }
     },
     "graphql-playground-middleware-express": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.7.0.tgz",
-      "integrity": "sha512-t5MxpVvAyZBGEGUv+p/GZgh10oEBhGH5pNtJlpLNc448wX2718fwWMJSfGhQkXlSm+nst4tdLoYu5TI1/HpGAQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.7.2.tgz",
+      "integrity": "sha512-JvKsVOR/U5QguBtEvTt0ozQ49uh1C6cW8O1xR6krQpJZIxjLYqpgusLUddTiVkka6Q/A4/AXBohY85jPudxYDg==",
       "dev": true,
       "requires": {
         "graphql-playground-html": "1.6.0"
@@ -9202,11 +10185,11 @@
       }
     },
     "graphql-tools": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/graphql-tools/-/graphql-tools-3.0.2.tgz",
-      "integrity": "sha512-bhDGrvmSgcJBFX3EZEYagmKPk/EJ9vZIcF1WtSFveWfvSsh7crMFSQ9ldftuIXC9UeRwfutpGf3A1q4UpVLaRg==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/graphql-tools/-/graphql-tools-3.0.5.tgz",
+      "integrity": "sha512-MawfVPwaqy+L48IiP4QXHpFFOgCH+vWmB9oeU70lckac22nOpDLwbkKtddtdodoTHV54EKbkTpPdW6u6bcjjFA==",
       "requires": {
-        "apollo-link": "1.2.1",
+        "apollo-link": "1.2.2",
         "apollo-utilities": "^1.0.1",
         "deprecated-decorator": "^0.1.6",
         "iterall": "^1.1.3",
@@ -9219,6 +10202,12 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==",
+      "dev": true
+    },
     "gzip-size": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
@@ -9782,6 +10771,12 @@
         "decamelize": "^1.0.0"
       }
     },
+    "hyphenate-style-name": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es=",
+      "dev": true
+    },
     "iconv-lite": {
       "version": "0.4.19",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
@@ -9820,18 +10815,38 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
-    "ignore-by-default": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
-      "dev": true
-    },
     "immutable": {
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
       "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks=",
       "dev": true
     },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dev": true,
+      "requires": {
+        "import-from": "^2.1.0"
+      }
+    },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+          "dev": true
+        }
+      }
+    },
     "import-lazy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -10110,11 +11125,6 @@
       "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=",
       "dev": true
     },
-    "intl-pluralrules": {
-      "version": "github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b",
-      "from": "intl-pluralrules@github:projectfluent/IntlPluralRules#94cb0fa1c23ad943bc5aafef43cea132fa51d68b",
-      "dev": true
-    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -10228,6 +11238,12 @@
         "binary-extensions": "^1.0.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.0.0.tgz",
+      "integrity": "sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=",
+      "dev": true
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -10432,6 +11448,12 @@
         }
       }
     },
+    "is-number-object": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.3.tgz",
+      "integrity": "sha1-8mWrian0RQNO9q/xWo8AsA9VF5k=",
+      "dev": true
+    },
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
@@ -10554,6 +11576,18 @@
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
       "dev": true
     },
+    "is-string": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.4.tgz",
+      "integrity": "sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ=",
+      "dev": true
+    },
+    "is-subset": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
+      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=",
+      "dev": true
+    },
     "is-svg": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-2.1.0.tgz",
@@ -10841,13 +11875,13 @@
       "dev": true
     },
     "jest": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-23.2.0.tgz",
-      "integrity": "sha1-govzGgltRdzwaCTR6gMBOve8/CA=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-23.4.1.tgz",
+      "integrity": "sha512-HTOuA9epknN7RKdzhmp9qrbP0z3TibAMXI+sluLOcrEoF54ZCG8/urFB2DK/sOINcMeyX6epMUqka8i0+d0xOA==",
       "dev": true,
       "requires": {
         "import-local": "^1.0.0",
-        "jest-cli": "^23.2.0"
+        "jest-cli": "^23.4.1"
       },
       "dependencies": {
         "ansi-regex": {
@@ -10856,6 +11890,116 @@
           "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babel-jest": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-23.4.0.tgz",
+          "integrity": "sha1-IsNMOS4hdvakw2eZKn/P9p0uhVc=",
+          "dev": true,
+          "requires": {
+            "babel-plugin-istanbul": "^4.1.6",
+            "babel-preset-jest": "^23.2.0"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "expect": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-23.4.0.tgz",
+          "integrity": "sha1-baTsyZwUcSU+cogziYOtHrrbYMM=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "jest-diff": "^23.2.0",
+            "jest-get-type": "^22.1.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-regex-util": "^23.3.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@@ -10870,10 +12014,25 @@
             "path-is-absolute": "^1.0.0"
           }
         },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
         "jest-cli": {
-          "version": "23.2.0",
-          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-23.2.0.tgz",
-          "integrity": "sha1-O1Q6PaUUXdiTeTEBcoI3n8aWxFs=",
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-23.4.1.tgz",
+          "integrity": "sha512-Cmd7bex+kYmMGwGrIh/crwUieUFr+4PCTaK32tEA0dm0wklXV8zGgWh8n+8WbhsFPNzacolxdtcfBKIorcV5FQ==",
           "dev": true,
           "requires": {
             "ansi-escapes": "^3.0.0",
@@ -10887,22 +12046,22 @@
             "istanbul-lib-coverage": "^1.2.0",
             "istanbul-lib-instrument": "^1.10.1",
             "istanbul-lib-source-maps": "^1.2.4",
-            "jest-changed-files": "^23.2.0",
-            "jest-config": "^23.2.0",
-            "jest-environment-jsdom": "^23.2.0",
+            "jest-changed-files": "^23.4.0",
+            "jest-config": "^23.4.1",
+            "jest-environment-jsdom": "^23.4.0",
             "jest-get-type": "^22.1.0",
-            "jest-haste-map": "^23.2.0",
-            "jest-message-util": "^23.2.0",
-            "jest-regex-util": "^23.0.0",
-            "jest-resolve-dependencies": "^23.2.0",
-            "jest-runner": "^23.2.0",
-            "jest-runtime": "^23.2.0",
-            "jest-snapshot": "^23.2.0",
-            "jest-util": "^23.2.0",
-            "jest-validate": "^23.2.0",
-            "jest-watcher": "^23.2.0",
+            "jest-haste-map": "^23.4.1",
+            "jest-message-util": "^23.4.0",
+            "jest-regex-util": "^23.3.0",
+            "jest-resolve-dependencies": "^23.4.1",
+            "jest-runner": "^23.4.1",
+            "jest-runtime": "^23.4.1",
+            "jest-snapshot": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "jest-validate": "^23.4.0",
+            "jest-watcher": "^23.4.0",
             "jest-worker": "^23.2.0",
-            "micromatch": "^3.1.10",
+            "micromatch": "^2.3.11",
             "node-notifier": "^5.2.1",
             "prompts": "^0.1.9",
             "realpath-native": "^1.0.0",
@@ -10914,6 +12073,192 @@
             "yargs": "^11.0.0"
           }
         },
+        "jest-config": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.4.1.tgz",
+          "integrity": "sha512-OT29qlcw9Iw7u0PC04wD9tjLJL4vpGdMZrrHMFwYSO3HxOikbHywjmtQ7rntW4qvBcpbi7iCMTPPRmpDjImQEw==",
+          "dev": true,
+          "requires": {
+            "babel-core": "^6.0.0",
+            "babel-jest": "^23.4.0",
+            "chalk": "^2.0.1",
+            "glob": "^7.1.1",
+            "jest-environment-jsdom": "^23.4.0",
+            "jest-environment-node": "^23.4.0",
+            "jest-get-type": "^22.1.0",
+            "jest-jasmine2": "^23.4.1",
+            "jest-regex-util": "^23.3.0",
+            "jest-resolve": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "jest-validate": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-each": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-23.4.0.tgz",
+          "integrity": "sha1-L6nt2J2qGk7cn/m/YGKja3E0UUM=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-environment-jsdom": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz",
+          "integrity": "sha1-BWp5UrP+pROsYqFAosNox52eYCM=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0",
+            "jsdom": "^11.5.1"
+          }
+        },
+        "jest-environment-node": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.4.0.tgz",
+          "integrity": "sha1-V+gO0IQd6jAxZ8zozXlSHeuv3hA=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0"
+          }
+        },
+        "jest-jasmine2": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.4.1.tgz",
+          "integrity": "sha512-nHmRgTtM9fuaK3RBz2z4j9mYVEJwB7FdoflQSvrwHV8mCT5z4DeHoKCvPp2R27F8fZTYJUYVMb36xn+ydg0tfA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "co": "^4.6.0",
+            "expect": "^23.4.0",
+            "is-generator-fn": "^1.0.0",
+            "jest-diff": "^23.2.0",
+            "jest-each": "^23.4.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-snapshot": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-message-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
+          "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0-beta.35",
+            "chalk": "^2.0.1",
+            "micromatch": "^2.3.11",
+            "slash": "^1.0.0",
+            "stack-utils": "^1.0.1"
+          }
+        },
+        "jest-resolve": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.1.tgz",
+          "integrity": "sha512-VNk4YRNR5gsHhNS0Lp46/DzTT11e+ecbUC61ikE593cKbtdrhrMO+zXkOJaE8YDD5sHxH9W6OfssNn4FkZBzZQ==",
+          "dev": true,
+          "requires": {
+            "browser-resolve": "^1.11.3",
+            "chalk": "^2.0.1",
+            "realpath-native": "^1.0.0"
+          }
+        },
+        "jest-snapshot": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.1.tgz",
+          "integrity": "sha512-oMjaQ4vB4uT211zx00X0R7hg+oLVRDvhVKiC6+vSg7Be9S/AmkDMCVUoaPcLRK/0NkZBTzrh4WCzrSZgUEZW3g==",
+          "dev": true,
+          "requires": {
+            "babel-traverse": "^6.0.0",
+            "babel-types": "^6.0.0",
+            "chalk": "^2.0.1",
+            "jest-diff": "^23.2.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-resolve": "^23.4.1",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "pretty-format": "^23.2.0",
+            "semver": "^5.5.0"
+          }
+        },
+        "jest-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.4.0.tgz",
+          "integrity": "sha1-TQY8uSe68KI4Mf9hvsLLv0l5NWE=",
+          "dev": true,
+          "requires": {
+            "callsites": "^2.0.0",
+            "chalk": "^2.0.1",
+            "graceful-fs": "^4.1.11",
+            "is-ci": "^1.0.10",
+            "jest-message-util": "^23.4.0",
+            "mkdirp": "^0.5.1",
+            "slash": "^1.0.0",
+            "source-map": "^0.6.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
+          }
+        },
+        "jest-validate": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.4.0.tgz",
+          "integrity": "sha1-2W7t4B7wOskJwAnpyORVGX1IwgE=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "jest-get-type": "^22.1.0",
+            "leven": "^2.1.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
+        },
         "rimraf": {
           "version": "2.6.2",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
@@ -10935,35 +12280,68 @@
       }
     },
     "jest-changed-files": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-23.2.0.tgz",
-      "integrity": "sha1-oUWm5LZtASn8fJnO4TTck3pkPZw=",
+      "version": "23.4.0",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-23.4.0.tgz",
+      "integrity": "sha1-8bME+YwjWvXZox7FJCYsXk3jxv8=",
       "dev": true,
       "requires": {
         "throat": "^4.0.0"
       }
     },
     "jest-config": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.2.0.tgz",
-      "integrity": "sha1-0vtVb9WioZw561bROdzKXa0qHIg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.3.0.tgz",
+      "integrity": "sha1-u01Ttw+VAPr933GNImq7U7E7gyM=",
       "dev": true,
       "requires": {
         "babel-core": "^6.0.0",
         "babel-jest": "^23.2.0",
         "chalk": "^2.0.1",
         "glob": "^7.1.1",
-        "jest-environment-jsdom": "^23.2.0",
-        "jest-environment-node": "^23.2.0",
+        "jest-environment-jsdom": "^23.3.0",
+        "jest-environment-node": "^23.3.0",
         "jest-get-type": "^22.1.0",
-        "jest-jasmine2": "^23.2.0",
-        "jest-regex-util": "^23.0.0",
+        "jest-jasmine2": "^23.3.0",
+        "jest-regex-util": "^23.3.0",
         "jest-resolve": "^23.2.0",
-        "jest-util": "^23.2.0",
-        "jest-validate": "^23.2.0",
+        "jest-util": "^23.3.0",
+        "jest-validate": "^23.3.0",
         "pretty-format": "^23.2.0"
       },
       "dependencies": {
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@@ -10977,6 +12355,12 @@
             "once": "^1.3.0",
             "path-is-absolute": "^1.0.0"
           }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
         }
       }
     },
@@ -11009,24 +12393,24 @@
       }
     },
     "jest-environment-jsdom": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.2.0.tgz",
-      "integrity": "sha1-NjRgOgipdbDKimWDIPVqVKjgRVg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.3.0.tgz",
+      "integrity": "sha1-GQRX+RyeYVRUxBhgVgZdtu16Tio=",
       "dev": true,
       "requires": {
         "jest-mock": "^23.2.0",
-        "jest-util": "^23.2.0",
+        "jest-util": "^23.3.0",
         "jsdom": "^11.5.1"
       }
     },
     "jest-environment-node": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.2.0.tgz",
-      "integrity": "sha1-tv5BNy44IJO7bz2b32wcTsClDxg=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.3.0.tgz",
+      "integrity": "sha1-Ho3yHIR6pdA7dlc/DcFvzeUDTDI=",
       "dev": true,
       "requires": {
         "jest-mock": "^23.2.0",
-        "jest-util": "^23.2.0"
+        "jest-util": "^23.3.0"
       }
     },
     "jest-get-type": {
@@ -11036,9 +12420,9 @@
       "dev": true
     },
     "jest-haste-map": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-23.2.0.tgz",
-      "integrity": "sha1-0Qy6wAfGlZSMjvGCGisu0tTy1Ng=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-23.4.1.tgz",
+      "integrity": "sha512-PGQxOEGAfRbTyJkmZeOKkVSs+KVeWgG625p89KUuq+sIIchY5P8iPIIc+Hw2tJJPBzahU3qopw1kF/qyhDdNBw==",
       "dev": true,
       "requires": {
         "fb-watchman": "^2.0.0",
@@ -11046,10 +12430,69 @@
         "jest-docblock": "^23.2.0",
         "jest-serializer": "^23.0.1",
         "jest-worker": "^23.2.0",
-        "micromatch": "^3.1.10",
+        "micromatch": "^2.3.11",
         "sane": "^2.0.0"
       },
       "dependencies": {
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
         "jest-docblock": {
           "version": "23.2.0",
           "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-23.2.0.tgz",
@@ -11058,25 +12501,55 @@
           "requires": {
             "detect-newline": "^2.1.0"
           }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
         }
       }
     },
     "jest-jasmine2": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.2.0.tgz",
-      "integrity": "sha1-qmcM2x5NX47HdMlN2l4QX+M9i7Q=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.3.0.tgz",
+      "integrity": "sha1-qHBrqsI8ihMNWqjvVGSp1JCW0bU=",
       "dev": true,
       "requires": {
         "chalk": "^2.0.1",
         "co": "^4.6.0",
-        "expect": "^23.2.0",
+        "expect": "^23.3.0",
         "is-generator-fn": "^1.0.0",
         "jest-diff": "^23.2.0",
         "jest-each": "^23.2.0",
         "jest-matcher-utils": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-snapshot": "^23.2.0",
-        "jest-util": "^23.2.0",
+        "jest-message-util": "^23.3.0",
+        "jest-snapshot": "^23.3.0",
+        "jest-util": "^23.3.0",
         "pretty-format": "^23.2.0"
       }
     },
@@ -11101,9 +12574,9 @@
       }
     },
     "jest-message-util": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.2.0.tgz",
-      "integrity": "sha1-WR6BSP/2nPibBBSAnHIXVuvv50Q=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.3.0.tgz",
+      "integrity": "sha1-vAexHOxpcftd2d4t+2DrwiFQwWA=",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0-beta.35",
@@ -11120,9 +12593,9 @@
       "dev": true
     },
     "jest-regex-util": {
-      "version": "23.0.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-23.0.0.tgz",
-      "integrity": "sha1-3Vwf3gxG9DcTFM8Q96dRoj9Oj3Y=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-23.3.0.tgz",
+      "integrity": "sha1-X4ZylUfCeFxAAs6qj4Sf6MpHG8U=",
       "dev": true
     },
     "jest-resolve": {
@@ -11137,36 +12610,330 @@
       }
     },
     "jest-resolve-dependencies": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-23.2.0.tgz",
-      "integrity": "sha1-bfjVcJxkBmOc0H9Uv/B04BtcBFg=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-23.4.1.tgz",
+      "integrity": "sha512-Jp0wgNJg3OYPvXJfNVX4k4/niwGS6ARuKacum/vue48+4A1XPJ2H3aVFuNb3gUaiB/6Le7Zyl8AUb4MELBfcmg==",
       "dev": true,
       "requires": {
-        "jest-regex-util": "^23.0.0",
-        "jest-snapshot": "^23.2.0"
+        "jest-regex-util": "^23.3.0",
+        "jest-snapshot": "^23.4.1"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "jest-message-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
+          "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0-beta.35",
+            "chalk": "^2.0.1",
+            "micromatch": "^2.3.11",
+            "slash": "^1.0.0",
+            "stack-utils": "^1.0.1"
+          }
+        },
+        "jest-resolve": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.1.tgz",
+          "integrity": "sha512-VNk4YRNR5gsHhNS0Lp46/DzTT11e+ecbUC61ikE593cKbtdrhrMO+zXkOJaE8YDD5sHxH9W6OfssNn4FkZBzZQ==",
+          "dev": true,
+          "requires": {
+            "browser-resolve": "^1.11.3",
+            "chalk": "^2.0.1",
+            "realpath-native": "^1.0.0"
+          }
+        },
+        "jest-snapshot": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.1.tgz",
+          "integrity": "sha512-oMjaQ4vB4uT211zx00X0R7hg+oLVRDvhVKiC6+vSg7Be9S/AmkDMCVUoaPcLRK/0NkZBTzrh4WCzrSZgUEZW3g==",
+          "dev": true,
+          "requires": {
+            "babel-traverse": "^6.0.0",
+            "babel-types": "^6.0.0",
+            "chalk": "^2.0.1",
+            "jest-diff": "^23.2.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-resolve": "^23.4.1",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "pretty-format": "^23.2.0",
+            "semver": "^5.5.0"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
+        }
       }
     },
     "jest-runner": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-23.2.0.tgz",
-      "integrity": "sha1-DZGWfqgvcrDHBZEJJghtIFXOda8=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-23.4.1.tgz",
+      "integrity": "sha512-78KyhObsx0VEuUQ74ikGt68NpP6PApTjGpJPSyZ7AvwOFRqFlxdHpCU/lFPQxW/fLEghl4irz9OHjRLGcGFNyQ==",
       "dev": true,
       "requires": {
         "exit": "^0.1.2",
         "graceful-fs": "^4.1.11",
-        "jest-config": "^23.2.0",
+        "jest-config": "^23.4.1",
         "jest-docblock": "^23.2.0",
-        "jest-haste-map": "^23.2.0",
-        "jest-jasmine2": "^23.2.0",
+        "jest-haste-map": "^23.4.1",
+        "jest-jasmine2": "^23.4.1",
         "jest-leak-detector": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-runtime": "^23.2.0",
-        "jest-util": "^23.2.0",
+        "jest-message-util": "^23.4.0",
+        "jest-runtime": "^23.4.1",
+        "jest-util": "^23.4.0",
         "jest-worker": "^23.2.0",
         "source-map-support": "^0.5.6",
         "throat": "^4.0.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babel-jest": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-23.4.0.tgz",
+          "integrity": "sha1-IsNMOS4hdvakw2eZKn/P9p0uhVc=",
+          "dev": true,
+          "requires": {
+            "babel-plugin-istanbul": "^4.1.6",
+            "babel-preset-jest": "^23.2.0"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "expect": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-23.4.0.tgz",
+          "integrity": "sha1-baTsyZwUcSU+cogziYOtHrrbYMM=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "jest-diff": "^23.2.0",
+            "jest-get-type": "^22.1.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-regex-util": "^23.3.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "jest-config": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.4.1.tgz",
+          "integrity": "sha512-OT29qlcw9Iw7u0PC04wD9tjLJL4vpGdMZrrHMFwYSO3HxOikbHywjmtQ7rntW4qvBcpbi7iCMTPPRmpDjImQEw==",
+          "dev": true,
+          "requires": {
+            "babel-core": "^6.0.0",
+            "babel-jest": "^23.4.0",
+            "chalk": "^2.0.1",
+            "glob": "^7.1.1",
+            "jest-environment-jsdom": "^23.4.0",
+            "jest-environment-node": "^23.4.0",
+            "jest-get-type": "^22.1.0",
+            "jest-jasmine2": "^23.4.1",
+            "jest-regex-util": "^23.3.0",
+            "jest-resolve": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "jest-validate": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
         "jest-docblock": {
           "version": "23.2.0",
           "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-23.2.0.tgz",
@@ -11175,13 +12942,178 @@
           "requires": {
             "detect-newline": "^2.1.0"
           }
+        },
+        "jest-each": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-23.4.0.tgz",
+          "integrity": "sha1-L6nt2J2qGk7cn/m/YGKja3E0UUM=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-environment-jsdom": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz",
+          "integrity": "sha1-BWp5UrP+pROsYqFAosNox52eYCM=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0",
+            "jsdom": "^11.5.1"
+          }
+        },
+        "jest-environment-node": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.4.0.tgz",
+          "integrity": "sha1-V+gO0IQd6jAxZ8zozXlSHeuv3hA=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0"
+          }
+        },
+        "jest-jasmine2": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.4.1.tgz",
+          "integrity": "sha512-nHmRgTtM9fuaK3RBz2z4j9mYVEJwB7FdoflQSvrwHV8mCT5z4DeHoKCvPp2R27F8fZTYJUYVMb36xn+ydg0tfA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "co": "^4.6.0",
+            "expect": "^23.4.0",
+            "is-generator-fn": "^1.0.0",
+            "jest-diff": "^23.2.0",
+            "jest-each": "^23.4.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-snapshot": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-message-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
+          "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0-beta.35",
+            "chalk": "^2.0.1",
+            "micromatch": "^2.3.11",
+            "slash": "^1.0.0",
+            "stack-utils": "^1.0.1"
+          }
+        },
+        "jest-resolve": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.1.tgz",
+          "integrity": "sha512-VNk4YRNR5gsHhNS0Lp46/DzTT11e+ecbUC61ikE593cKbtdrhrMO+zXkOJaE8YDD5sHxH9W6OfssNn4FkZBzZQ==",
+          "dev": true,
+          "requires": {
+            "browser-resolve": "^1.11.3",
+            "chalk": "^2.0.1",
+            "realpath-native": "^1.0.0"
+          }
+        },
+        "jest-snapshot": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.1.tgz",
+          "integrity": "sha512-oMjaQ4vB4uT211zx00X0R7hg+oLVRDvhVKiC6+vSg7Be9S/AmkDMCVUoaPcLRK/0NkZBTzrh4WCzrSZgUEZW3g==",
+          "dev": true,
+          "requires": {
+            "babel-traverse": "^6.0.0",
+            "babel-types": "^6.0.0",
+            "chalk": "^2.0.1",
+            "jest-diff": "^23.2.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-resolve": "^23.4.1",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "pretty-format": "^23.2.0",
+            "semver": "^5.5.0"
+          }
+        },
+        "jest-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.4.0.tgz",
+          "integrity": "sha1-TQY8uSe68KI4Mf9hvsLLv0l5NWE=",
+          "dev": true,
+          "requires": {
+            "callsites": "^2.0.0",
+            "chalk": "^2.0.1",
+            "graceful-fs": "^4.1.11",
+            "is-ci": "^1.0.10",
+            "jest-message-util": "^23.4.0",
+            "mkdirp": "^0.5.1",
+            "slash": "^1.0.0",
+            "source-map": "^0.6.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
+          }
+        },
+        "jest-validate": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.4.0.tgz",
+          "integrity": "sha1-2W7t4B7wOskJwAnpyORVGX1IwgE=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "jest-get-type": "^22.1.0",
+            "leven": "^2.1.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
         }
       }
     },
     "jest-runtime": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-23.2.0.tgz",
-      "integrity": "sha1-YtywF2ahxMZGltwJAgnnbOGq3Lw=",
+      "version": "23.4.1",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-23.4.1.tgz",
+      "integrity": "sha512-fnInrsEAbLpNctQa+RLnKZyQLMmb5u4YdoT9CbRKWhjMY7q6ledOu+x+ORZ3glQOK/vJIS701RaJRp1pc5ziaA==",
       "dev": true,
       "requires": {
         "babel-core": "^6.0.0",
@@ -11191,20 +13123,347 @@
         "exit": "^0.1.2",
         "fast-json-stable-stringify": "^2.0.0",
         "graceful-fs": "^4.1.11",
-        "jest-config": "^23.2.0",
-        "jest-haste-map": "^23.2.0",
-        "jest-message-util": "^23.2.0",
-        "jest-regex-util": "^23.0.0",
-        "jest-resolve": "^23.2.0",
-        "jest-snapshot": "^23.2.0",
-        "jest-util": "^23.2.0",
-        "jest-validate": "^23.2.0",
-        "micromatch": "^3.1.10",
+        "jest-config": "^23.4.1",
+        "jest-haste-map": "^23.4.1",
+        "jest-message-util": "^23.4.0",
+        "jest-regex-util": "^23.3.0",
+        "jest-resolve": "^23.4.1",
+        "jest-snapshot": "^23.4.1",
+        "jest-util": "^23.4.0",
+        "jest-validate": "^23.4.0",
+        "micromatch": "^2.3.11",
         "realpath-native": "^1.0.0",
         "slash": "^1.0.0",
         "strip-bom": "3.0.0",
         "write-file-atomic": "^2.1.0",
         "yargs": "^11.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "babel-core": {
+          "version": "6.26.3",
+          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+          "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "babel-generator": "^6.26.0",
+            "babel-helpers": "^6.24.1",
+            "babel-messages": "^6.23.0",
+            "babel-register": "^6.26.0",
+            "babel-runtime": "^6.26.0",
+            "babel-template": "^6.26.0",
+            "babel-traverse": "^6.26.0",
+            "babel-types": "^6.26.0",
+            "babylon": "^6.18.0",
+            "convert-source-map": "^1.5.1",
+            "debug": "^2.6.9",
+            "json5": "^0.5.1",
+            "lodash": "^4.17.4",
+            "minimatch": "^3.0.4",
+            "path-is-absolute": "^1.0.1",
+            "private": "^0.1.8",
+            "slash": "^1.0.0",
+            "source-map": "^0.5.7"
+          }
+        },
+        "babel-jest": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-23.4.0.tgz",
+          "integrity": "sha1-IsNMOS4hdvakw2eZKn/P9p0uhVc=",
+          "dev": true,
+          "requires": {
+            "babel-plugin-istanbul": "^4.1.6",
+            "babel-preset-jest": "^23.2.0"
+          }
+        },
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "^1.8.1",
+            "preserve": "^0.2.0",
+            "repeat-element": "^1.1.2"
+          }
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "^0.1.0"
+          }
+        },
+        "expect": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-23.4.0.tgz",
+          "integrity": "sha1-baTsyZwUcSU+cogziYOtHrrbYMM=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "jest-diff": "^23.2.0",
+            "jest-get-type": "^22.1.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-regex-util": "^23.3.0"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        },
+        "jest-config": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.4.1.tgz",
+          "integrity": "sha512-OT29qlcw9Iw7u0PC04wD9tjLJL4vpGdMZrrHMFwYSO3HxOikbHywjmtQ7rntW4qvBcpbi7iCMTPPRmpDjImQEw==",
+          "dev": true,
+          "requires": {
+            "babel-core": "^6.0.0",
+            "babel-jest": "^23.4.0",
+            "chalk": "^2.0.1",
+            "glob": "^7.1.1",
+            "jest-environment-jsdom": "^23.4.0",
+            "jest-environment-node": "^23.4.0",
+            "jest-get-type": "^22.1.0",
+            "jest-jasmine2": "^23.4.1",
+            "jest-regex-util": "^23.3.0",
+            "jest-resolve": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "jest-validate": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-each": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-23.4.0.tgz",
+          "integrity": "sha1-L6nt2J2qGk7cn/m/YGKja3E0UUM=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-environment-jsdom": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz",
+          "integrity": "sha1-BWp5UrP+pROsYqFAosNox52eYCM=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0",
+            "jsdom": "^11.5.1"
+          }
+        },
+        "jest-environment-node": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.4.0.tgz",
+          "integrity": "sha1-V+gO0IQd6jAxZ8zozXlSHeuv3hA=",
+          "dev": true,
+          "requires": {
+            "jest-mock": "^23.2.0",
+            "jest-util": "^23.4.0"
+          }
+        },
+        "jest-jasmine2": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.4.1.tgz",
+          "integrity": "sha512-nHmRgTtM9fuaK3RBz2z4j9mYVEJwB7FdoflQSvrwHV8mCT5z4DeHoKCvPp2R27F8fZTYJUYVMb36xn+ydg0tfA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "co": "^4.6.0",
+            "expect": "^23.4.0",
+            "is-generator-fn": "^1.0.0",
+            "jest-diff": "^23.2.0",
+            "jest-each": "^23.4.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-snapshot": "^23.4.1",
+            "jest-util": "^23.4.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "jest-message-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
+          "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0-beta.35",
+            "chalk": "^2.0.1",
+            "micromatch": "^2.3.11",
+            "slash": "^1.0.0",
+            "stack-utils": "^1.0.1"
+          }
+        },
+        "jest-resolve": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.1.tgz",
+          "integrity": "sha512-VNk4YRNR5gsHhNS0Lp46/DzTT11e+ecbUC61ikE593cKbtdrhrMO+zXkOJaE8YDD5sHxH9W6OfssNn4FkZBzZQ==",
+          "dev": true,
+          "requires": {
+            "browser-resolve": "^1.11.3",
+            "chalk": "^2.0.1",
+            "realpath-native": "^1.0.0"
+          }
+        },
+        "jest-snapshot": {
+          "version": "23.4.1",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.1.tgz",
+          "integrity": "sha512-oMjaQ4vB4uT211zx00X0R7hg+oLVRDvhVKiC6+vSg7Be9S/AmkDMCVUoaPcLRK/0NkZBTzrh4WCzrSZgUEZW3g==",
+          "dev": true,
+          "requires": {
+            "babel-traverse": "^6.0.0",
+            "babel-types": "^6.0.0",
+            "chalk": "^2.0.1",
+            "jest-diff": "^23.2.0",
+            "jest-matcher-utils": "^23.2.0",
+            "jest-message-util": "^23.4.0",
+            "jest-resolve": "^23.4.1",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "pretty-format": "^23.2.0",
+            "semver": "^5.5.0"
+          }
+        },
+        "jest-util": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.4.0.tgz",
+          "integrity": "sha1-TQY8uSe68KI4Mf9hvsLLv0l5NWE=",
+          "dev": true,
+          "requires": {
+            "callsites": "^2.0.0",
+            "chalk": "^2.0.1",
+            "graceful-fs": "^4.1.11",
+            "is-ci": "^1.0.10",
+            "jest-message-util": "^23.4.0",
+            "mkdirp": "^0.5.1",
+            "slash": "^1.0.0",
+            "source-map": "^0.6.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
+          }
+        },
+        "jest-validate": {
+          "version": "23.4.0",
+          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.4.0.tgz",
+          "integrity": "sha1-2W7t4B7wOskJwAnpyORVGX1IwgE=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "jest-get-type": "^22.1.0",
+            "leven": "^2.1.0",
+            "pretty-format": "^23.2.0"
+          }
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^2.0.0",
+            "array-unique": "^0.2.1",
+            "braces": "^1.8.2",
+            "expand-brackets": "^0.1.4",
+            "extglob": "^0.3.1",
+            "filename-regex": "^2.0.0",
+            "is-extglob": "^1.0.0",
+            "is-glob": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "normalize-path": "^2.0.1",
+            "object.omit": "^2.0.0",
+            "parse-glob": "^3.0.4",
+            "regex-cache": "^0.4.2"
+          }
+        }
       }
     },
     "jest-serializer": {
@@ -11214,30 +13473,35 @@
       "dev": true
     },
     "jest-snapshot": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.2.0.tgz",
-      "integrity": "sha1-x6PQFxd7utYMillYac+QqHguan4=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.3.0.tgz",
+      "integrity": "sha1-/E6fgeRUMtEFB+J/ULzmD0TYFCQ=",
       "dev": true,
       "requires": {
+        "babel-traverse": "^6.0.0",
+        "babel-types": "^6.0.0",
         "chalk": "^2.0.1",
         "jest-diff": "^23.2.0",
         "jest-matcher-utils": "^23.2.0",
+        "jest-message-util": "^23.3.0",
+        "jest-resolve": "^23.2.0",
         "mkdirp": "^0.5.1",
         "natural-compare": "^1.4.0",
-        "pretty-format": "^23.2.0"
+        "pretty-format": "^23.2.0",
+        "semver": "^5.5.0"
       }
     },
     "jest-util": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.2.0.tgz",
-      "integrity": "sha1-YrdwdXaW2W4JSgS48cNzylClqy4=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.3.0.tgz",
+      "integrity": "sha1-efNbsMMBAO9hHZY+5riPjthzqB0=",
       "dev": true,
       "requires": {
         "callsites": "^2.0.0",
         "chalk": "^2.0.1",
         "graceful-fs": "^4.1.11",
         "is-ci": "^1.0.10",
-        "jest-message-util": "^23.2.0",
+        "jest-message-util": "^23.3.0",
         "mkdirp": "^0.5.1",
         "slash": "^1.0.0",
         "source-map": "^0.6.0"
@@ -11252,9 +13516,9 @@
       }
     },
     "jest-validate": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.2.0.tgz",
-      "integrity": "sha1-Z8i5CeEa8XAXZSOIlMZ6wykbGV4=",
+      "version": "23.3.0",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.3.0.tgz",
+      "integrity": "sha1-1Jvqaq2YwwrNLLtUJDR5igzBP3Y=",
       "dev": true,
       "requires": {
         "chalk": "^2.0.1",
@@ -11264,9 +13528,9 @@
       }
     },
     "jest-watcher": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-23.2.0.tgz",
-      "integrity": "sha1-Z46FKJbpGenZoOtLi68a4nliDqk=",
+      "version": "23.4.0",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-23.4.0.tgz",
+      "integrity": "sha1-0uKM50+NrWxq/JIrksq+9u0FyRw=",
       "dev": true,
       "requires": {
         "ansi-escapes": "^3.0.0",
@@ -11437,6 +13701,12 @@
         "verror": "1.10.0"
       }
     },
+    "just-extend": {
+      "version": "1.1.27",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-1.1.27.tgz",
+      "integrity": "sha512-mJVp13Ix6gFo3SBAy9U/kL+oeZqzlYYYLQBwXVBlVzIsZwBqGREnOro24oC/8s8aox+rJhtZ2DiQof++IrkA+g==",
+      "dev": true
+    },
     "keygrip": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.0.2.tgz",
@@ -11464,43 +13734,64 @@
         "graceful-fs": "^4.1.9"
       }
     },
+    "kleur": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-1.0.1.tgz",
+      "integrity": "sha512-8srIZ5BK5PCJw1L/JN741xgNfSjuQNK9ImYbYzv7ZUD3WPfuywaY+yd7lQOphJ+2vwXnMLnRZoAh5X+orRt4LQ==",
+      "dev": true
+    },
     "koa": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/koa/-/koa-2.5.1.tgz",
-      "integrity": "sha512-cchwbMeG2dv3E2xTAmheDAuvR53tPgJZN/Hf1h7bTzJLSPcFZp8/t5+bNKJ6GaQZoydhZQ+1GNruhKdj3lIrug==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/koa/-/koa-2.5.2.tgz",
+      "integrity": "sha512-MoVGWre9g3p35pCqXNhOT/a4trwK5CGvalIoPi7qOA2RCZaep3GCsa/G/tD9QMjQI7bmVWn3XF3SOau8RkPh6w==",
       "dev": true,
       "requires": {
-        "accepts": "^1.2.2",
-        "content-disposition": "~0.5.0",
-        "content-type": "^1.0.0",
-        "cookies": "~0.7.0",
-        "debug": "*",
+        "accepts": "^1.3.5",
+        "cache-content-type": "^1.0.0",
+        "content-disposition": "~0.5.2",
+        "content-type": "^1.0.4",
+        "cookies": "~0.7.1",
+        "debug": "^3.1.0",
         "delegates": "^1.0.0",
-        "depd": "^1.1.0",
-        "destroy": "^1.0.3",
-        "error-inject": "~1.0.0",
-        "escape-html": "~1.0.1",
-        "fresh": "^0.5.2",
-        "http-assert": "^1.1.0",
-        "http-errors": "^1.2.8",
-        "is-generator-function": "^1.0.3",
-        "koa-compose": "^4.0.0",
+        "depd": "^1.1.2",
+        "destroy": "^1.0.4",
+        "error-inject": "^1.0.0",
+        "escape-html": "^1.0.3",
+        "fresh": "~0.5.2",
+        "http-assert": "^1.3.0",
+        "http-errors": "^1.6.3",
+        "is-generator-function": "^1.0.7",
+        "koa-compose": "^4.1.0",
         "koa-convert": "^1.2.0",
         "koa-is-json": "^1.0.0",
-        "mime-types": "^2.0.7",
-        "on-finished": "^2.1.0",
-        "only": "0.0.2",
-        "parseurl": "^1.3.0",
-        "statuses": "^1.2.0",
-        "type-is": "^1.5.5",
-        "vary": "^1.0.0"
+        "on-finished": "^2.3.0",
+        "only": "~0.0.2",
+        "parseurl": "^1.3.2",
+        "statuses": "^1.5.0",
+        "type-is": "^1.6.16",
+        "vary": "^1.1.2"
       },
       "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
         "koa-compose": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-4.1.0.tgz",
           "integrity": "sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==",
           "dev": true
+        },
+        "statuses": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+          "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+          "dev": true
         }
       }
     },
@@ -11590,57 +13881,18 @@
       }
     },
     "koa-webpack": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/koa-webpack/-/koa-webpack-4.0.0.tgz",
-      "integrity": "sha512-P+j2TzeZAqFwscd/dlLykk/sxwr6wQ5Tp3FYDhqv1+y9aRIffTPnu2zK+1BhfM+Kyh8bepU1jFR420maE+Vajw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/koa-webpack/-/koa-webpack-5.1.0.tgz",
+      "integrity": "sha512-XNqqtPpMvccXK3tAs0vW6YoO4+uYaxarutsgCZjNi3NyvmmVBvIH6l6xGk0NtiJR1m0oa53gFHLSiT19ZseOCw==",
       "dev": true,
       "requires": {
+        "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
         "app-root-path": "^2.0.1",
+        "loud-rejection": "^1.6.0",
         "merge-options": "^1.0.0",
         "webpack-dev-middleware": "^3.0.0",
-        "webpack-hot-client": "^3.0.0",
+        "webpack-hot-client": "^4.1.0",
         "webpack-log": "^1.1.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        },
-        "webpack-hot-client": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/webpack-hot-client/-/webpack-hot-client-3.0.0.tgz",
-          "integrity": "sha512-6k91015hZ4Okkz8u6OzRgJygEL+3J3ay6HVZhWBF3tT2P0rZJ0mgca39dotJxngggUm3S8707c0vrcynn1IzEQ==",
-          "dev": true,
-          "requires": {
-            "json-stringify-safe": "^5.0.1",
-            "loglevelnext": "^1.0.2",
-            "strip-ansi": "^4.0.0",
-            "uuid": "^3.1.0",
-            "webpack-log": "^1.1.1",
-            "ws": "^4.0.0"
-          }
-        },
-        "ws": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
-          "integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0",
-            "safe-buffer": "~5.1.0"
-          }
-        }
       }
     },
     "latest-version": {
@@ -11697,13 +13949,13 @@
       }
     },
     "load-cfg": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/load-cfg/-/load-cfg-0.2.8.tgz",
-      "integrity": "sha1-ax/0kaY/AE4NMfuTz+FZet2li4k=",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/load-cfg/-/load-cfg-0.5.6.tgz",
+      "integrity": "sha1-N40Q2lw4JLEMC1463cVVukYZofE=",
       "dev": true,
       "requires": {
         "deepmerge": "^2.1.1",
-        "esm": "^3.0.52",
+        "esm": "^3.0.66",
         "find-up": "^3.0.0"
       },
       "dependencies": {
@@ -11885,6 +14137,12 @@
       "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
       "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
     },
+    "lodash.flattendeep": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
+      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
+      "dev": true
+    },
     "lodash.foreach": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
@@ -11901,16 +14159,6 @@
       "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
       "integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4="
     },
-    "lodash.isobject": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
-      "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
-    },
-    "lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-    },
     "lodash.iteratee": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz",
@@ -12025,6 +14273,12 @@
         "object.assign": "^4.1.0"
       }
     },
+    "lolex": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/lolex/-/lolex-2.7.1.tgz",
+      "integrity": "sha512-Oo2Si3RMKV3+lV5MsSWplDQFoTClz/24S0MMHYcgGWWmFXr6TMlqcqk/l1GtH+d5wLBwNRiqGnwDRMirtFalJw==",
+      "dev": true
+    },
     "long": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
@@ -12085,9 +14339,9 @@
       }
     },
     "luxon": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.2.1.tgz",
-      "integrity": "sha512-ymX+7rWJjYw6jfmtkLqHJmXo+FYC69icT60x+utlzjIOc/U4SNXljUITwH4C1RDP0ZukWf4apHT/d1Ux/4eHPg=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.3.1.tgz",
+      "integrity": "sha512-GnX4PVEfDcTZT3xDQhm2jvEyZTxfi2b0gOmkJuwrrggA1b46e8ZshmPYePA6gdAT6mvvOxYnGFfb3iE9ZsWn9g=="
     },
     "make-dir": {
       "version": "1.3.0",
@@ -12158,6 +14412,15 @@
       "integrity": "sha1-iQwsGzv+g/sA5BKbjkz+ZFJw+dE=",
       "dev": true
     },
+    "matchmediaquery": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz",
+      "integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=",
+      "dev": true,
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -12229,6 +14492,12 @@
       "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
       "dev": true
     },
+    "meant": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/meant/-/meant-1.0.1.tgz",
+      "integrity": "sha512-UakVLFjKkbbUwNWJ2frVLnnAtbb7D7DsloxRd3s/gDpI8rdv8W5Hp3NaDb+POBI1fQdeussER6NB8vpcRURvlg==",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -12492,20 +14761,21 @@
       "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
     },
     "mongodb": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.0.10.tgz",
-      "integrity": "sha512-jy9s4FgcM4rl8sHNETYHGeWcuRh9AlwQCUuMiTj041t/HD02HwyFgmm2VZdd9/mA9YNHaUJLqj0tzBx2QFivtg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.1.1.tgz",
+      "integrity": "sha512-GU9oWK4pi8PC7NyGiwjFMwZyMqwGWoMEMvM0LZh7UKW/FFAqgmZKjjriD+5MEOCDUJE2dtHX93/K5UtDxO0otg==",
       "requires": {
-        "mongodb-core": "3.0.9"
+        "mongodb-core": "3.1.0"
       }
     },
     "mongodb-core": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-3.0.9.tgz",
-      "integrity": "sha512-buOWjdLLBlEqjHDeHYSXqXx173wHMVp7bafhdHxSjxWdB9V6Ri4myTqxjYZwL/eGFZxvd8oRQSuhwuIDbaaB+g==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-3.1.0.tgz",
+      "integrity": "sha512-qRjG62Fu//CZhkgn0jA/k8jh5MhACIq8cOJUryH6sck87pgt+C222MSD02tsCq5zNo/B6ZFHtNodZ2qpf8E86g==",
       "requires": {
         "bson": "~1.0.4",
-        "require_optional": "^1.0.1"
+        "require_optional": "^1.0.1",
+        "saslprep": "^1.0.0"
       }
     },
     "move-concurrently": {
@@ -12647,12 +14917,6 @@
         "nanoassert": "^1.1.0"
       }
     },
-    "nanoseconds": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/nanoseconds/-/nanoseconds-1.0.1.tgz",
-      "integrity": "sha512-fLbtBoaFlCdjq+LNaDTLXHQh8U3rKDUGRBY0BO2Xjgi1vt+X/6xF6gOkNbYolZboYAeM8o3eOZCOcDJZdogCEg==",
-      "dev": true
-    },
     "nanotiming": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/nanotiming/-/nanotiming-7.3.1.tgz",
@@ -12675,6 +14939,18 @@
       "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=",
       "optional": true
     },
+    "nearley": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.13.0.tgz",
+      "integrity": "sha512-ioYYogSaZhFlCpRizQgY3UT3G1qFXmHGY/5ozoFE3dMfiCRAeJfh+IPE3/eh9gCZvqLhPCWb4bLt7Bqzo+1mLQ==",
+      "dev": true,
+      "requires": {
+        "nomnom": "~1.6.2",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6",
+        "semver": "^5.4.1"
+      }
+    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
@@ -12686,6 +14962,12 @@
       "integrity": "sha512-3KL3fvuRkZ7s4IFOMfztb7zJp3QaVWnBeGoJlgB38XnCRPj/0tLzzLG5IB8NYOHbJ8g8UGrgZv44GLDk6CxTxA==",
       "dev": true
     },
+    "nested-error-stacks": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.0.1.tgz",
+      "integrity": "sha512-SrQrok4CATudVzBS7coSz26QRSmlK9TzzoFbeKfcPBUFPjcQM9Rqvr/DlJkOrwI/0KcgvMub1n1g5Jt9EgRn4A==",
+      "dev": true
+    },
     "next-tick": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
@@ -12698,6 +14980,36 @@
       "integrity": "sha512-2NpiFHqC87y/zFke0fC0spBXL3bBsoh/p5H1EFhshxjCR5+0g2d6BiXbUFz9v1sAcxsk2htp2eQnNIci2dIYcA==",
       "dev": true
     },
+    "nise": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/nise/-/nise-1.4.2.tgz",
+      "integrity": "sha512-BxH/DxoQYYdhKgVAfqVy4pzXRZELHOIewzoesxpjYvpU+7YOalQhGNPf7wAx8pLrTNPrHRDlLOkAl8UI0ZpXjw==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/formatio": "^2.0.0",
+        "just-extend": "^1.1.27",
+        "lolex": "^2.3.2",
+        "path-to-regexp": "^1.7.0",
+        "text-encoding": "^0.6.4"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "dev": true,
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
@@ -12790,47 +15102,27 @@
         "which": "^1.3.0"
       }
     },
-    "nodemon": {
-      "version": "1.17.5",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-1.17.5.tgz",
-      "integrity": "sha512-FG2mWJU1Y58a9ktgMJ/RZpsiPz3b7ge77t/okZHEa4NbrlXGKZ8s1A6Q+C7+JPXohAfcPALRwvxcAn8S874pmw==",
+    "node-version": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/node-version/-/node-version-1.2.0.tgz",
+      "integrity": "sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ==",
+      "dev": true
+    },
+    "nomnom": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.6.2.tgz",
+      "integrity": "sha1-hKZqJgF0QI/Ft3oY+IjszET7aXE=",
       "dev": true,
       "requires": {
-        "chokidar": "^2.0.2",
-        "debug": "^3.1.0",
-        "ignore-by-default": "^1.0.1",
-        "minimatch": "^3.0.4",
-        "pstree.remy": "^1.1.0",
-        "semver": "^5.5.0",
-        "supports-color": "^5.2.0",
-        "touch": "^3.1.0",
-        "undefsafe": "^2.0.2",
-        "update-notifier": "^2.3.0"
+        "colors": "0.5.x",
+        "underscore": "~1.4.4"
       },
       "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+        "colors": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-0.5.1.tgz",
+          "integrity": "sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=",
           "dev": true
-        },
-        "supports-color": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
         }
       }
     },
@@ -13014,6 +15306,18 @@
         }
       }
     },
+    "object-inspect": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz",
+      "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==",
+      "dev": true
+    },
+    "object-is": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
+      "integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
+      "dev": true
+    },
     "object-keys": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
@@ -13041,6 +15345,18 @@
         "object-keys": "^1.0.11"
       }
     },
+    "object.entries": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.0.4.tgz",
+      "integrity": "sha1-G/mk3SKI9bM/Opk9JXZh8F0WGl8=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.6.1",
+        "function-bind": "^1.1.0",
+        "has": "^1.0.1"
+      }
+    },
     "object.getownpropertydescriptors": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
@@ -13070,6 +15386,18 @@
         "isobject": "^3.0.1"
       }
     },
+    "object.values": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.0.4.tgz",
+      "integrity": "sha1-5STaCbT2b/Bd9FdUbscqyZ8TBpo=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.6.1",
+        "function-bind": "^1.1.0",
+        "has": "^1.0.1"
+      }
+    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -13198,12 +15526,24 @@
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
+      "dev": true
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
       "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
       "dev": true
     },
+    "p-is-promise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
+      "dev": true
+    },
     "p-limit": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
@@ -13228,6 +15568,22 @@
       "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==",
       "dev": true
     },
+    "p-reduce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-1.0.0.tgz",
+      "integrity": "sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=",
+      "dev": true
+    },
+    "p-series": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-series/-/p-series-1.1.0.tgz",
+      "integrity": "sha512-356covArc9UCfj2twY/sxCJKGMzzO+pJJtucizsPC6aS1xKSTBc9PQrQhvFR3+7F+fa2KBKdJjdIcv6NEWDcIQ==",
+      "dev": true,
+      "requires": {
+        "@sindresorhus/is": "^0.7.0",
+        "p-reduce": "^1.0.0"
+      }
+    },
     "p-try": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
@@ -13516,6 +15872,12 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
+      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU=",
+      "dev": true
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -13579,92 +15941,33 @@
         "postcss": "^6"
       }
     },
-    "postcss-apply": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/postcss-apply/-/postcss-apply-0.9.0.tgz",
-      "integrity": "sha512-Ysel7CyF7FiZQno9oADqKXsfZw4DvTcQXtFvN1nLZQA3woRiVYV2M5kGJSrqQVWGjp/zqNUjUpXHs24TgxFjxg==",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.23.0",
-        "balanced-match": "^0.4.2",
-        "postcss": "^6.0.0"
-      },
-      "dependencies": {
-        "balanced-match": {
-          "version": "0.4.2",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
-          "dev": true
-        }
-      }
-    },
-    "postcss-atroot": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-atroot/-/postcss-atroot-0.1.3.tgz",
-      "integrity": "sha1-Z1LAIwx0UUBUk0WysOMOvtoBpAU=",
-      "dev": true,
-      "requires": {
-        "postcss": "^5.0.5"
-      },
-      "dependencies": {
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-              "dev": true
-            }
-          }
-        },
-        "has-flag": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-          "dev": true
-        },
-        "postcss": {
-          "version": "5.2.18",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
-          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^1.1.3",
-            "js-base64": "^2.1.9",
-            "source-map": "^0.5.6",
-            "supports-color": "^3.2.3"
-          }
-        },
-        "supports-color": {
-          "version": "3.2.3",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-          "dev": true,
-          "requires": {
-            "has-flag": "^1.0.0"
-          }
-        }
-      }
-    },
     "postcss-attribute-case-insensitive": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz",
-      "integrity": "sha1-lNxCLI+QmX8WvTOjZUu77AhJY7Q=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-3.0.1.tgz",
+      "integrity": "sha512-X/viSS9YrAoDnRa2R4sElsAmW+scOWeVW11FjWQN8m+FW1YY0jdIA9fuBSSF1pKsJTYXJXGJ1oAjFHl8cqcmKw==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.0",
-        "postcss-selector-parser": "^2.2.3"
+        "postcss": "^6.0.23",
+        "postcss-selector-parser": "^4.0.0"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
+          "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
+          "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^1.0.1",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
       }
     },
     "postcss-calc": {
@@ -13728,6 +16031,16 @@
         }
       }
     },
+    "postcss-color-functional-notation": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-1.0.2.tgz",
+      "integrity": "sha512-FxkEr+s/KCrcrTxUhHcDMKGZmnLjUKK7pl2gDjnEoAJaVcbThdDWLhuASu02qdA3Ys7np/BwJgwc72JrURTvJQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.23",
+        "postcss-values-parser": "^1.5.0"
+      }
+    },
     "postcss-color-hex-alpha": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-3.0.0.tgz",
@@ -13782,16 +16095,6 @@
         "postcss-values-parser": "^1.5.0"
       }
     },
-    "postcss-color-rgb": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-color-rgb/-/postcss-color-rgb-2.0.0.tgz",
-      "integrity": "sha1-FFOcinExSUtILg3RzCZf9lFLUmM=",
-      "dev": true,
-      "requires": {
-        "postcss": "^6.0.1",
-        "postcss-value-parser": "^3.3.0"
-      }
-    },
     "postcss-colormin": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-2.2.2.tgz",
@@ -13913,6 +16216,17 @@
         }
       }
     },
+    "postcss-css-variables": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.9.0.tgz",
+      "integrity": "sha512-pSNj57bdBaFnyDzt96SZOidMMWY7Q5OySQdKsTxaxehYO6EtNC5SAKIwjah/poh5vUmNthkrlOd03bP+HNGuCA==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.3",
+        "extend": "^3.0.1",
+        "postcss": "^6.0.8"
+      }
+    },
     "postcss-custom-media": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz",
@@ -13943,22 +16257,28 @@
       }
     },
     "postcss-dir-pseudo-class": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-3.0.0.tgz",
-      "integrity": "sha512-iEVgue59Xs6vz9CQZtlyonW/BmVfpqWglcUyIP2rQaBpH1a2T8Iax61eXY2NjTAq5r3Xjxwk4lrA84acoAiWHw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-4.0.0.tgz",
+      "integrity": "sha512-ZAeXMIyZukHHeDt5IFchWB+okPzasb8YnpkXIgTiJl4216X1IplMrODjihZIBDXNE2RdJRBCAOx8uGzCnGSxTA==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.20",
-        "postcss-selector-parser": "^3.1.1"
+        "postcss": "^6.0.22",
+        "postcss-selector-parser": "^4.0.0"
       },
       "dependencies": {
+        "cssesc": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
+          "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
+          "dev": true
+        },
         "postcss-selector-parser": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
-          "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
+          "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
           "dev": true,
           "requires": {
-            "dot-prop": "^4.1.1",
+            "cssesc": "^1.0.1",
             "indexes-of": "^1.0.1",
             "uniq": "^1.0.1"
           }
@@ -14261,14 +16581,14 @@
         }
       }
     },
-    "postcss-extend-rule": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-extend-rule/-/postcss-extend-rule-1.1.0.tgz",
-      "integrity": "sha512-+NXtLOY49Xcx9173SJAYj41esTRTpihSLoKpj5yzoBki9PZK4HF37AH9AVyCeLFJL9fzhh0YFuk/3eyeZ9d/jw==",
+    "postcss-env-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-1.0.0.tgz",
+      "integrity": "sha512-UVkdbVCRAEr79XkS6uxMRWIHYrFNuhXmjw6gxyesCBXzzHIvYOoz5UKTWM39xX3j9vGO5waVzxq/VzEiZgsM0g==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.11",
-        "postcss-nesting": "^4.2.1"
+        "postcss": "^6.0.22",
+        "postcss-values-parser": "^1.5.0"
       }
     },
     "postcss-filter-plugins": {
@@ -14340,14 +16660,23 @@
       }
     },
     "postcss-focus-visible": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-2.0.0.tgz",
-      "integrity": "sha512-nJaq5CK2YBWB1fu1SeK0qXAk0TJncY3Ms7iwFov+J3sNetecvTeCQuSxQCf9U9T9Vjusnb3zzThBs5XwP/eb/g==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-3.0.0.tgz",
+      "integrity": "sha512-6i3HsOrWNelxBYPh/HWAXF9lPwCFAfFVlUTZqsLRXYMPhcXH1eXdItozRBvT9l5pYF4ddJJbgk4JOp0au0QToA==",
       "dev": true,
       "requires": {
         "postcss": "^6.0"
       }
     },
+    "postcss-focus-within": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-2.0.0.tgz",
+      "integrity": "sha512-LTbT/dxZ3FahpOv1XZMyRLNnBk5QWVU4HL/p82iFkzoPNVhNQazaYIujHXTOAKea5clgjbj6GdFj7mU7qzy1kQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.21"
+      }
+    },
     "postcss-font-family-system-ui": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-family-system-ui/-/postcss-font-family-system-ui-3.0.0.tgz",
@@ -14378,6 +16707,37 @@
         "postcss": "^6.0.1"
       }
     },
+    "postcss-gap-properties": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-1.0.0.tgz",
+      "integrity": "sha512-snL2k0Nie72J0uCsKgfO2Sd5rs3Wlhsk+k9uVzyMaeBH9gouNPPY7tZ4bopRJmBISbZEUtvF8Gchat6nOFQHdg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.22"
+      }
+    },
+    "postcss-image-set-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-2.0.0.tgz",
+      "integrity": "sha512-2bpCIj2wFhIhpyM1G/ZZgBJM8K/VKbEcQ0SX5MI9MTGv4giPMnuXMa/sX3bHXHhi1PL4v2WRfqD1+w5T9EhFqg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.22",
+        "postcss-values-parser": "^1.5.0"
+      }
+    },
+    "postcss-import": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz",
+      "integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1",
+        "postcss-value-parser": "^3.2.3",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
     "postcss-initial": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-2.0.0.tgz",
@@ -14388,143 +16748,60 @@
         "postcss": "^6.0.1"
       }
     },
+    "postcss-lab-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-1.0.1.tgz",
+      "integrity": "sha512-kxaHXTRjlBLDpJUMsrGM0GnVgBrMqQz1HfaXdv3VNpz2EwwUhrU9uVfqv/NAtiWt6ZkD7IK2MUlncRoj024lIA==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^6.0.22",
+        "postcss-values-parser": "^1.5.0"
+      }
+    },
     "postcss-load-config": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz",
-      "integrity": "sha1-U56a/J3chiASHr+djDZz4M5Q0oo=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
+      "integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
       "dev": true,
       "requires": {
-        "cosmiconfig": "^2.1.0",
-        "object-assign": "^4.1.0",
-        "postcss-load-options": "^1.2.0",
-        "postcss-load-plugins": "^2.3.0"
+        "cosmiconfig": "^4.0.0",
+        "import-cwd": "^2.0.0"
       },
       "dependencies": {
         "cosmiconfig": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
-          "integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
+          "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
           "dev": true,
           "requires": {
             "is-directory": "^0.3.1",
-            "js-yaml": "^3.4.3",
-            "minimist": "^1.2.0",
-            "object-assign": "^4.1.0",
-            "os-homedir": "^1.0.1",
-            "parse-json": "^2.2.0",
-            "require-from-string": "^1.1.0"
+            "js-yaml": "^3.9.0",
+            "parse-json": "^4.0.0",
+            "require-from-string": "^2.0.1"
           }
         },
         "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
           "dev": true,
           "requires": {
-            "error-ex": "^1.2.0"
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
           }
-        },
-        "require-from-string": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-1.2.1.tgz",
-          "integrity": "sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=",
-          "dev": true
-        }
-      }
-    },
-    "postcss-load-options": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-options/-/postcss-load-options-1.2.0.tgz",
-      "integrity": "sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw=",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^2.1.0",
-        "object-assign": "^4.1.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
-          "integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==",
-          "dev": true,
-          "requires": {
-            "is-directory": "^0.3.1",
-            "js-yaml": "^3.4.3",
-            "minimist": "^1.2.0",
-            "object-assign": "^4.1.0",
-            "os-homedir": "^1.0.1",
-            "parse-json": "^2.2.0",
-            "require-from-string": "^1.1.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "require-from-string": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-1.2.1.tgz",
-          "integrity": "sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=",
-          "dev": true
-        }
-      }
-    },
-    "postcss-load-plugins": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz",
-      "integrity": "sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI=",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^2.1.1",
-        "object-assign": "^4.1.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
-          "integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==",
-          "dev": true,
-          "requires": {
-            "is-directory": "^0.3.1",
-            "js-yaml": "^3.4.3",
-            "minimist": "^1.2.0",
-            "object-assign": "^4.1.0",
-            "os-homedir": "^1.0.1",
-            "parse-json": "^2.2.0",
-            "require-from-string": "^1.1.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "require-from-string": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-1.2.1.tgz",
-          "integrity": "sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=",
-          "dev": true
         }
       }
     },
     "postcss-loader": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.5.tgz",
-      "integrity": "sha512-pV7kB5neJ0/1tZ8L1uGOBNTVBCSCXQoIsZMsrwvO8V2rKGa2tBl/f80GGVxow2jJnRJ2w1ocx693EKhZAb9Isg==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.6.tgz",
+      "integrity": "sha512-hgiWSc13xVQAq25cVw80CH0l49ZKlAnU1hKPOdRrNj89bokRr/bZF2nT+hebPPF9c9xs8c3gw3Fr2nxtmXYnNg==",
       "dev": true,
       "requires": {
         "loader-utils": "^1.1.0",
         "postcss": "^6.0.0",
-        "postcss-load-config": "^1.2.0",
+        "postcss-load-config": "^2.0.0",
         "schema-utils": "^0.4.0"
       }
     },
@@ -15053,12 +17330,12 @@
       }
     },
     "postcss-nesting": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-4.2.1.tgz",
-      "integrity": "sha512-IkyWXICwagCnlaviRexi7qOdwPw3+xVVjgFfGsxmztvRVaNxAlrypOIKqDE5mxY+BVxnId1rnUKBRQoNE2VDaA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-6.0.0.tgz",
+      "integrity": "sha512-Yoglsy6eZbDCbRIXoYSmnIt9ao4xyg07iFwVBd7WyIkDzMSeRxIqUk8xEAdkeJQ7eGfWo6RufrTU7FSUjZ22fg==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.11"
+        "postcss": "^6.0.22"
       }
     },
     "postcss-normalize-charset": {
@@ -15242,6 +17519,15 @@
         }
       }
     },
+    "postcss-overflow-shorthand": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-1.0.1.tgz",
+      "integrity": "sha512-QeJk23W8dLP2DrWYSKTwfFfh4Tcy5Msr58vuuxCPcCijX/07jva0OGNKtUH9vZ6NnXB2WEsnfIIg5M0ScPEWeQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.22"
+      }
+    },
     "postcss-page-break": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-1.0.0.tgz",
@@ -15251,60 +17537,151 @@
         "postcss": "^6.0.16"
       }
     },
-    "postcss-preset-env": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-3.5.0.tgz",
-      "integrity": "sha512-1I7ve+XzmNLJMZDORLOjSpY28t2H1qADEUcp2tQzuLBxAsbWMBUTDpSPsCKBduoqd4zWuH4bI/04W4T4hveHQw==",
+    "postcss-place": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-3.0.1.tgz",
+      "integrity": "sha512-6Cg0z39zBU4FOS85Z6+Us+GCIW7UqKdOGH/9j26LwMzZ3L909wG7NP3BF+L12AEeIL5XfI8Q5SWu9Or3nJTS8g==",
       "dev": true,
       "requires": {
-        "@csstools/postcss-image-set-function": "^1.0.0",
-        "browserslist": "^3.2.4",
-        "caniuse-lite": "^1.0.30000823",
-        "cssdb": "^1.6.0",
-        "postcss": "^6.0.21",
-        "postcss-apply": "^0.9.0",
-        "postcss-attribute-case-insensitive": "^2.0.0",
+        "postcss": "^6.0.22",
+        "postcss-values-parser": "^1.5.0"
+      }
+    },
+    "postcss-prepend-imports": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-prepend-imports/-/postcss-prepend-imports-1.0.1.tgz",
+      "integrity": "sha1-v0WBiAhcM/82mVzJbJFojWSYjig=",
+      "dev": true,
+      "requires": {
+        "postcss": "^5.0.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "5.2.18",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
+          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^1.1.3",
+            "js-base64": "^2.1.9",
+            "source-map": "^0.5.6",
+            "supports-color": "^3.2.3"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^1.0.0"
+          }
+        }
+      }
+    },
+    "postcss-preset-env": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-5.2.2.tgz",
+      "integrity": "sha512-ehhyyssfRLv6N5zysA09lTgL1KgGOt9RMuXEOrB8CV+aH6Ky1fz1OMmEv9YK+JQ6okRIeQTktOZ+STfTZj2ckw==",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "^8.6.5",
+        "browserslist": "^3.2.8",
+        "caniuse-lite": "^1.0.30000865",
+        "cssdb": "^3.1.0",
+        "postcss": "^6.0.23",
+        "postcss-attribute-case-insensitive": "^3.0.1",
+        "postcss-color-functional-notation": "^1.0.2",
         "postcss-color-hex-alpha": "^3.0.0",
         "postcss-color-mod-function": "^2.4.2",
-        "postcss-color-rebeccapurple": "^3.0.0",
-        "postcss-color-rgb": "^2.0.0",
+        "postcss-color-rebeccapurple": "^3.1.0",
         "postcss-custom-media": "^6.0.0",
         "postcss-custom-properties": "^7.0.0",
         "postcss-custom-selectors": "^4.0.1",
-        "postcss-dir-pseudo-class": "^3.0.0",
-        "postcss-focus-visible": "^2.0.0",
+        "postcss-dir-pseudo-class": "^4.0.0",
+        "postcss-env-function": "^1.0.0",
+        "postcss-focus-visible": "^3.0.0",
+        "postcss-focus-within": "^2.0.0",
         "postcss-font-family-system-ui": "^3.0.0",
         "postcss-font-variant": "^3.0.0",
+        "postcss-gap-properties": "^1.0.0",
+        "postcss-image-set-function": "^2.0.0",
         "postcss-initial": "^2.0.0",
+        "postcss-lab-function": "^1.0.1",
         "postcss-logical": "^1.1.1",
         "postcss-media-minmax": "^3.0.0",
-        "postcss-nesting": "^4.2.1",
+        "postcss-nesting": "^6.0.0",
+        "postcss-overflow-shorthand": "^1.0.1",
         "postcss-page-break": "^1.0.0",
-        "postcss-pseudo-class-any-link": "^4.0.0",
+        "postcss-place": "^3.0.1",
+        "postcss-pseudo-class-any-link": "^5.0.0",
         "postcss-replace-overflow-wrap": "^2.0.0",
         "postcss-selector-matches": "^3.0.1",
         "postcss-selector-not": "^3.0.1"
-      }
-    },
-    "postcss-property-lookup": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-property-lookup/-/postcss-property-lookup-2.0.0.tgz",
-      "integrity": "sha512-KUb53a7UZWDMVb0SRODOonc4H1wlbgQ0VfYwmJaR1xWPorhariEz0U7x0ri3W/imFs6HqLYWP7hl2yMvi5Ty+w==",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.0.1",
-        "postcss": "^6.0.6",
-        "tcomb": "^3.2.21"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30000865",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
+          "integrity": "sha512-vs79o1mOSKRGv/1pSkp4EXgl4ZviWeYReXw60XfacPU64uQWZwJT6vZNmxRF9O+6zu71sJwMxLK5JXxbzuVrLw==",
+          "dev": true
+        }
       }
     },
     "postcss-pseudo-class-any-link": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz",
-      "integrity": "sha1-kVKgYT00UHIFE+iJKFS65C0O5o4=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-5.0.0.tgz",
+      "integrity": "sha512-rA5grdRhLLMMI654eOZVuKGr4fUBQNGSH0K+7j5839CiBA/IvNt/Ewt7aIrkGZPySKI3nqzs34HefO8U0Fxahg==",
       "dev": true,
       "requires": {
-        "postcss": "^6.0.1",
-        "postcss-selector-parser": "^2.2.3"
+        "postcss": "^6.0.22",
+        "postcss-selector-parser": "^4.0.0"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
+          "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
+          "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^1.0.1",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
       }
     },
     "postcss-reduce-idents": {
@@ -15744,21 +18121,6 @@
         }
       }
     },
-    "precss": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/precss/-/precss-3.1.2.tgz",
-      "integrity": "sha512-TAEKJjzNyKIwyDeJ3yuaTl1x0CoFw+VyycR3dO18Kl2rGU/rPNocCYH1cry1sstWwGKl3RpJhDfZ2ZdzscM0IQ==",
-      "dev": true,
-      "requires": {
-        "postcss": "^6.0.19",
-        "postcss-advanced-variables": "^2.3.3",
-        "postcss-atroot": "^0.1.3",
-        "postcss-extend-rule": "^1.1.0",
-        "postcss-nested": "^3.0.0",
-        "postcss-preset-env": "^3.2.2",
-        "postcss-property-lookup": "^2.0.0"
-      }
-    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -15778,9 +18140,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.4.tgz",
-      "integrity": "sha512-emsEZ2bAigL1lq6ssgkpPm1MIBqgeTvcp90NxOP5XDqprub/V/WS2Hfgih3mS7/1dqTUvhG+sxx1Dv8crnVexA==",
+      "version": "1.13.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.7.tgz",
+      "integrity": "sha512-KIU72UmYPGk4MujZGYMFwinB7lOf2LsDNGSOC8ufevsrPLISrZbNJlWstRi3m0AMuszbH+EFSQ/r6w56RSPK6w==",
       "dev": true
     },
     "pretty-error": {
@@ -15821,22 +18183,10 @@
       }
     },
     "pretty-time": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.0.0.tgz",
-      "integrity": "sha512-+8bAuWoeG7CBA4Yz5NrcN8NyjD86YcrlxquWlYRLgfwxzXtbHXUnPWeXW5jzTsBwaEf89KNM0luWnRXh6l02EA==",
-      "dev": true,
-      "requires": {
-        "is-number": "^5.0.0",
-        "nanoseconds": "^1.0.0"
-      },
-      "dependencies": {
-        "is-number": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-5.0.0.tgz",
-          "integrity": "sha512-LmVHHP5dTJwrwZg2Jjqp7K5jpvcnYvYD1LMpvGadMsMv5+WXoDSLBQ0+zmuBJmuZGh2J2K845ygj/YukxUnr4A==",
-          "dev": true
-        }
-      }
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
+      "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==",
+      "dev": true
     },
     "prismjs": {
       "version": "1.15.0",
@@ -15881,13 +18231,13 @@
       "dev": true
     },
     "prompts": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.9.tgz",
-      "integrity": "sha512-RMRvwAUDVUMhP/z3YfDW6igMwT0UnL+w3XCUUNxxHjgwJnVEdHWYJVjM7hQMPub8HCk12xZYAqWlbgLBnqebwg==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.12.tgz",
+      "integrity": "sha512-pgR1GE1JM8q8UsHVIgjdK62DPwvrf0kvaKWJ/mfMoCm2lwfIReX/giQ1p0AlMoUXNhQap/8UiOdqi3bOROm/eg==",
       "dev": true,
       "requires": {
-        "clorox": "^1.0.1",
-        "sisteransi": "^0.1.0"
+        "kleur": "^1.0.0",
+        "sisteransi": "^0.1.1"
       }
     },
     "prop-types": {
@@ -16037,6 +18387,31 @@
       "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==",
+      "dev": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=",
+      "dev": true
+    },
+    "randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "dev": true,
+      "requires": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      }
+    },
     "randomatic": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz",
@@ -16144,6 +18519,62 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-adopt": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/react-adopt/-/react-adopt-0.6.0.tgz",
+      "integrity": "sha1-5f+QOmVdMIIhf4K8nVAzpLZPr60=",
+      "dev": true,
+      "requires": {
+        "hoist-non-react-statics": "^2.5.0",
+        "react": "^16.3.2",
+        "react-display-name": "^0.2.4"
+      }
+    },
+    "react-breakpoints": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-breakpoints/-/react-breakpoints-3.0.0.tgz",
+      "integrity": "sha512-NyFWlbjUpRXZyooKABokMLkpbAZ4YiWPURv7oWqf9uYyH/wow08YlKUMF864IBLHOSrFmRISe0/uiu7SYl7E8A==",
+      "dev": true,
+      "requires": {
+        "create-react-context": "0.2.1",
+        "hoist-non-react-statics": "2.5.0",
+        "lodash.debounce": "4.0.8"
+      },
+      "dependencies": {
+        "create-react-context": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.1.tgz",
+          "integrity": "sha512-dmGgrAJ/nKoQRRcoonkqWWM9uxk6ClzCHUDKZ8zGdc4MxDwvLVG8s/gzIXtWET7lTAoFSXkeCQ113L1p3QSFmw==",
+          "dev": true,
+          "requires": {
+            "fbjs": "^0.8.0",
+            "gud": "^1.0.0"
+          }
+        },
+        "hoist-non-react-statics": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz",
+          "integrity": "sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w==",
+          "dev": true
+        }
+      }
+    },
+    "react-content-loader": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-3.1.2.tgz",
+      "integrity": "sha512-9Fv10F6rrzFDIT04aoRsw3dbN6l6onNXbBvCpt4OjXZFGDz/P65laNIujHVTlVjcqErut9d4BL0aplVByyGcJw==",
+      "dev": true
+    },
+    "react-copy-to-clipboard": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
+      "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==",
+      "dev": true,
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dev-utils": {
       "version": "6.0.0-next.3e165448",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-6.0.0-next.3e165448.tgz",
@@ -16334,25 +18765,39 @@
         }
       }
     },
+    "react-display-name": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.4.tgz",
+      "integrity": "sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA==",
+      "dev": true
+    },
     "react-docgen": {
-      "version": "3.0.0-beta9",
-      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-3.0.0-beta9.tgz",
-      "integrity": "sha512-3UqwxygAP/eZdDtOKum6vClKWUlceZ7RBVQ3Fe122l1WBYOqHcBzoUZIwN8feaLVo+s2eB/q+NkBfanLgvmt+w==",
+      "version": "3.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-3.0.0-rc.0.tgz",
+      "integrity": "sha512-quhNeAo5LeACZ31LDAifq2Knyz2XE+Zm9QLo4EHgw+NifxBzH8FCQ5PyAPORqaAhWMiPOwYoIZ0biZVGqEkYag==",
       "dev": true,
       "requires": {
+        "@babel/parser": "7.0.0-beta.53",
         "async": "^2.1.4",
         "babel-runtime": "^6.9.2",
-        "babylon": "7.0.0-beta.31",
         "commander": "^2.9.0",
         "doctrine": "^2.0.0",
         "node-dir": "^0.1.10",
-        "recast": "^0.12.6"
+        "recast": "^0.15.0"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.0.0-beta.53",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.53.tgz",
+          "integrity": "sha1-H0XrYXv5Rj1IKywE00nZ5O2/SJI=",
+          "dev": true
+        }
       }
     },
     "react-docgen-typescript": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-1.6.1.tgz",
-      "integrity": "sha512-GNjoMwGfksDcPKnMMJ8LKElV/gWZ478B3cJMDNp3MnZ6Dd49jicpmlVg11/IpuycwWAfCyDiyv2VJNNJ55q5zA==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-1.6.2.tgz",
+      "integrity": "sha512-H4UmLjzEEhDZEfv9eewaZg5+36Xa3fmaOpYRF2l/DjOdLioaM8LRsMRnpGCTiCUfP9yNKSAqmPfixay8NTMVLg==",
       "dev": true
     },
     "react-docgen-typescript-loader": {
@@ -16378,13 +18823,13 @@
       }
     },
     "react-emotion": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.2.4.tgz",
-      "integrity": "sha1-mOAPcM4spO4TkjRgEj52PkksATo=",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.2.6.tgz",
+      "integrity": "sha512-3GwLQ0Vib/X0G7KWY7N1F/7NmfoBLkkg3g9Jd8t6By5QUH0PyCSUVdDmfFBbgVKsAcpkjA0vcsMbiWeZusaRrA==",
       "dev": true,
       "requires": {
-        "babel-plugin-emotion": "^9.2.4",
-        "create-emotion-styled": "^9.2.3"
+        "babel-plugin-emotion": "^9.2.6",
+        "create-emotion-styled": "^9.2.6"
       }
     },
     "react-error-overlay": {
@@ -16394,15 +18839,15 @@
       "dev": true
     },
     "react-feather": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-1.1.0.tgz",
-      "integrity": "sha512-JlLSN6NyWWue/ZJ0pYOx0cfMWvIWFHnFkLKxOoM58RpVk2wjkr9GWtMKDx6EbnqyYP1e+JFp1W/eABfvP5rIGQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-1.1.1.tgz",
+      "integrity": "sha512-bF147qQQfFHki5RSOOhKQ1V7e30tW7xT5zd0x72KfyWi9iErzH1cM5FpqkGz5xylMbBsbzfv/AuwGp95TQwumA==",
       "dev": true
     },
     "react-final-form": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-3.6.2.tgz",
-      "integrity": "sha512-6gr+xOtOfRvoUwNwjZBSuc9M4p1kgMrGVI31zwPVac5U3k2uzkUOTgP7a54CzRiiRDajmPZVGDF2fQOv23dcsA==",
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-3.6.4.tgz",
+      "integrity": "sha512-7eVR5Qfls4fyL7dXQiUkr55zqM73WTnlPMhi8gm91UzeY6RI3SK9OTBUpQBIKWacMrt1nDs4uRdcvdVBTFJTag==",
       "dev": true
     },
     "react-hot-loader": {
@@ -16419,6 +18864,12 @@
         "shallowequal": "^1.0.2"
       }
     },
+    "react-is": {
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.1.tgz",
+      "integrity": "sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ==",
+      "dev": true
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -16431,11 +18882,63 @@
       "integrity": "sha512-OQvgdiPfWbAjudT8Q+V2aWsySCJW0aQ3wNjfOw1ooamydEQkDxRfWqfnEhCYLneCz67d+r3kBYoZlpAx5S+VWA==",
       "dev": true
     },
+    "react-popper": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
+      "integrity": "sha1-uZRSFE6P5KzHf6PZWajHngemUIQ=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-powerplug": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/react-powerplug/-/react-powerplug-0.1.6.tgz",
-      "integrity": "sha512-2bBoBaulpNnmXvM4nTQL3KKdsyzcufHI9ebpzoWlFZAplM0gn7Z0cBOcw2H8FFHGI38OMzo8CSpKYJaOJ8e/KA==",
-      "dev": true
+      "version": "1.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/react-powerplug/-/react-powerplug-1.0.0-rc.1.tgz",
+      "integrity": "sha512-TqeC/QT0xJ1gAI0SlqorHwzT9QD8z2tI+hQ/FFFiK6wZdRq4iQetYGcbgmcw7mpblOA8lIKwBgpk00Ja4VwncA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.0.0-beta.49"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0-beta.49",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.49.tgz",
+          "integrity": "sha1-A7O/B+uYIHLI6FHdLd1RECguYb8=",
+          "dev": true,
+          "requires": {
+            "core-js": "^2.5.6",
+            "regenerator-runtime": "^0.11.1"
+          }
+        }
+      }
+    },
+    "react-reconciler": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.7.0.tgz",
+      "integrity": "sha512-50JwZ3yNyMS8fchN+jjWEJOH3Oze7UmhxeoJLn2j6f3NjpfCRbcmih83XTWmzqtar/ivd5f7tvQhvvhism2fgg==",
+      "dev": true,
+      "requires": {
+        "fbjs": "^0.8.16",
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.0"
+      }
     },
     "react-relay": {
       "version": "github:coralproject/patched#aad037f8cbcd9c14d5f6fd96cfafb24c39eab937",
@@ -16447,6 +18950,17 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-responsive": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz",
+      "integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==",
+      "dev": true,
+      "requires": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.2.1",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
@@ -16493,29 +19007,47 @@
         "warning": "^4.0.1"
       }
     },
-    "react-spinners": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.3.2.tgz",
-      "integrity": "sha512-SZzc99QqKLq85uGWYvkVeHTEPMEpLwnvQOyY62vNqAT9WWdkGJgHKt4H7Z68ALiWYZGKT5oIclh/cdBX20546w==",
+    "react-router-hash-link": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-1.2.0.tgz",
+      "integrity": "sha1-zoJMxfBQLOmwaGu23ZwIZZskCUw=",
       "dev": true,
       "requires": {
-        "emotion": "^9.1.1",
-        "prop-types": "^15.5.10",
-        "react-emotion": "^9.1.1",
-        "recompose": "0.26.0"
+        "prop-types": "^15.6.0"
+      }
+    },
+    "react-test-renderer": {
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.1.tgz",
+      "integrity": "sha512-wyyiPxRZOTpKnNIgUBOB6xPLTpIzwcQMIURhZvzUqZzezvHjaGNsDPBhMac5fIY3Jf5NuKxoGvV64zDSOECPPQ==",
+      "dev": true,
+      "requires": {
+        "fbjs": "^0.8.16",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.0",
+        "react-is": "^16.4.1"
+      }
+    },
+    "react-timeago": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/react-timeago/-/react-timeago-4.1.9.tgz",
+      "integrity": "sha512-MKucv9nU65BOPqIrClAFxqvpGCC4RdRpqp0P1YIb7C3yT6TQVdcoOlr0k4TDHvLQhbkwd3nbTxiDQMa3iDlZxg==",
+      "dev": true
+    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
       },
       "dependencies": {
-        "recompose": {
-          "version": "0.26.0",
-          "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
-          "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
-          "dev": true,
-          "requires": {
-            "change-emitter": "^0.1.2",
-            "fbjs": "^0.8.1",
-            "hoist-non-react-statics": "^2.3.1",
-            "symbol-observable": "^1.0.4"
-          }
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
         }
       }
     },
@@ -16568,22 +19100,21 @@
       }
     },
     "realpath-native": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.0.0.tgz",
-      "integrity": "sha512-XJtlRJ9jf0E1H1SLeJyQ9PGzQD7S65h1pRXEcAeK48doKOnKxcgPeNohJvD5u/2sI9J1oke6E8bZHS/fmW1UiQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.0.1.tgz",
+      "integrity": "sha512-W14EcXuqUvKP8dkWkD7B95iMy77lpMnlFXbbk409bQtNCbeu0kvRE5reo+yIZ3JXxg6frbGsz2DLQ39lrCB40g==",
       "dev": true,
       "requires": {
         "util.promisify": "^1.0.0"
       }
     },
     "recast": {
-      "version": "0.12.9",
-      "resolved": "https://registry.npmjs.org/recast/-/recast-0.12.9.tgz",
-      "integrity": "sha512-y7ANxCWmMW8xLOaiopiRDlyjQ9ajKRENBH+2wjntIbk3A6ZR1+BLQttkmSHMY7Arl+AAZFwJ10grg2T6f1WI8A==",
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.15.2.tgz",
+      "integrity": "sha512-L4f/GqxjlEJ5IZ+tdll/l+6dVi2ylysWbkgFJbMuldD6Jklgfv6zJnCpuAZDfjwHhfcd/De0dDKelsTEPQ29qA==",
       "dev": true,
       "requires": {
-        "ast-types": "0.10.1",
-        "core-js": "^2.4.1",
+        "ast-types": "0.11.5",
         "esprima": "~4.0.0",
         "private": "~0.1.5",
         "source-map": "~0.6.1"
@@ -17035,6 +19566,12 @@
         "invariant": "^2.2.2"
       }
     },
+    "relay-local-schema": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/relay-local-schema/-/relay-local-schema-0.7.0.tgz",
+      "integrity": "sha1-onxxcMYUi5Fu0PhNbDAAm6MyoOQ=",
+      "dev": true
+    },
     "relay-runtime": {
       "version": "github:coralproject/patched#9dda7718393cb3aa6647bd3badf574c025f79d12",
       "from": "github:coralproject/patched#relay-runtime",
@@ -17469,6 +20006,16 @@
         "inherits": "^2.0.1"
       }
     },
+    "rst-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
+      "dev": true,
+      "requires": {
+        "lodash.flattendeep": "^4.4.0",
+        "nearley": "^2.7.10"
+      }
+    },
     "rsvp": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz",
@@ -17551,6 +20098,12 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "samsam": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.3.0.tgz",
+      "integrity": "sha512-1HwIYD/8UlOtFS3QO3w7ey+SdSDFE4HRNLZoZRYVQefrOY3l17epswImeB1ijgJFQJodIaHcwkp3r/myBjFVbg==",
+      "dev": true
+    },
     "sane": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/sane/-/sane-2.5.2.tgz",
@@ -17568,6 +20121,12 @@
         "watch": "~0.18.0"
       }
     },
+    "saslprep": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.0.tgz",
+      "integrity": "sha512-5lvKUEQ7lAN5/vPl5d3k8FQeDbEamu9kizfATfLLWV5h6Mkh1xcieR1FSsJkcSRUk49lF2tAW8gzXWVwtwZVhw==",
+      "optional": true
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -17813,10 +20372,37 @@
         }
       }
     },
+    "sinon": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-6.1.3.tgz",
+      "integrity": "sha512-yeTza8xIZZdiXntCHJAzKll/sSYE+DuJOS8hiSapzaLqdW8eCNVVC9je9SZYYTkPm2bLts9x6UYxwuMAVVrM6Q==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/formatio": "^2.0.0",
+        "@sinonjs/samsam": "^2.0.0",
+        "diff": "^3.5.0",
+        "lodash.get": "^4.4.2",
+        "lolex": "^2.4.2",
+        "nise": "^1.3.3",
+        "supports-color": "^5.4.0",
+        "type-detect": "^4.0.8"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "sisteransi": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-0.1.0.tgz",
-      "integrity": "sha512-kHXcIr0Z9FM6d7pwFDDIMQKGndIEtIF1oBSMXWtItpx4mrH1jhANVNT35GVekBekXl6J+5i7lJMIGq3Gm7pIdA==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-0.1.1.tgz",
+      "integrity": "sha512-PmGOd02bM9YO5ifxpw36nrNMBTptEtfRl4qUYl9SndkolplkrZZOW7PGHjrZL53QvMVj9nQ+TKqUnRsw4tJa4g==",
       "dev": true
     },
     "slash": {
@@ -18187,9 +20773,9 @@
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
     },
     "std-env": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-1.3.0.tgz",
-      "integrity": "sha512-3uwAVIQQYFiDRBoYuHE/5YnEuOnQjEWvL1ZMKSq+BGFkG2IK9ONFAIYn77h3Kzr3qd0SILi9/5Cu9BbZxaeNnA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-1.3.1.tgz",
+      "integrity": "sha512-KI2F2pPJpd3lHjng+QLezu0eq+QDtXcv1um016mhOPAJFHKL+09ykK5PUBWta2pZDC8BVV0VPya08A15bUXSLQ==",
       "dev": true,
       "requires": {
         "is-ci": "^1.1.0"
@@ -18385,9 +20971,9 @@
       }
     },
     "stylis": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.1.tgz",
-      "integrity": "sha512-yM4PyeHuwhIOUHNJxi1/Mbq8kVLv4AkyE7IYLP/LK0lIFcr3tRa2H1iZlBYKIxOlf+/jruBTe8DdKSyQX9w4OA==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.3.tgz",
+      "integrity": "sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ==",
       "dev": true
     },
     "stylis-rule-sheet": {
@@ -18406,16 +20992,13 @@
       }
     },
     "subscriptions-transport-ws": {
-      "version": "0.9.11",
-      "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.11.tgz",
-      "integrity": "sha512-B8fwTIJy2buUcBXM6Ffbax30XcEqvCqL8RXwbivBAiB3X9ezrTcF5nYMmNGZ47sxrDYA1XfQ5W3aTgJEm8BFJA==",
+      "version": "0.9.12",
+      "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.12.tgz",
+      "integrity": "sha512-57Ar8hjr/63fCx1kM3kyDr64FAPQITMguuFuTGgYVx2v1JOaPoTeZyTIenVPgv+7mDYt7E+h+Jyxvznb+UKVWw==",
       "requires": {
         "backo2": "^1.0.2",
         "eventemitter3": "^3.1.0",
         "iterall": "^1.2.1",
-        "lodash.assign": "^4.2.0",
-        "lodash.isobject": "^3.0.2",
-        "lodash.isstring": "^4.0.1",
         "symbol-observable": "^1.0.4",
         "ws": "^5.2.0"
       }
@@ -18490,12 +21073,6 @@
       "integrity": "sha512-dQRhbNQkRnaqauC7WqSJ21EEksgT0fYZX2lqXzGkpo8JNig9zGZTYoMGvyI2nWmXlE2VSVXVDu7wLVGu/mQEsg==",
       "dev": true
     },
-    "tcomb": {
-      "version": "3.2.27",
-      "resolved": "https://registry.npmjs.org/tcomb/-/tcomb-3.2.27.tgz",
-      "integrity": "sha512-XWdJW7F/M3YzXhDEUP8ycmNWoYymBtsHwCHoda0YF44RthJsls95TqDrmpAlC1sB/KXaCvkdBlcNRq+AaV6klA==",
-      "dev": true
-    },
     "term-size": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
@@ -18608,6 +21185,12 @@
         }
       }
     },
+    "text-encoding": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.6.4.tgz",
+      "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk=",
+      "dev": true
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -18688,6 +21271,12 @@
       "dev": true,
       "optional": true
     },
+    "titleize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/titleize/-/titleize-1.0.1.tgz",
+      "integrity": "sha512-rUwGDruKq1gX+FFHbTl5qjI7teVO7eOe+C8IcQ7QT+1BK3eEUXJqbZcBOeaRP4FwSC/C1A5jDoIVta0nIQ9yew==",
+      "dev": true
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -18787,6 +21376,12 @@
         }
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
+      "dev": true
+    },
     "topo": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/topo/-/topo-3.0.0.tgz",
@@ -18802,9 +21397,9 @@
       "dev": true
     },
     "touch": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
-      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-1.0.0.tgz",
+      "integrity": "sha1-RJy+LbrlqMgDjjDXH6D/RklHxN4=",
       "dev": true,
       "requires": {
         "nopt": "~1.0.10"
@@ -18874,364 +21469,117 @@
       "dev": true
     },
     "ts-jest": {
-      "version": "22.4.6",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-22.4.6.tgz",
-      "integrity": "sha512-kYQ6g1G1AU+bOO9rv+SSQXg4WTcni6Wx3AM48iHni0nP1vIuhdNRjKTE9Cxx36Ix/IOV7L85iKu07dgXJzH2pQ==",
+      "version": "23.0.0",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-23.0.0.tgz",
+      "integrity": "sha512-drIjGaoIfXgNi0UUxu963M57kgf+NE2xw386UmD/Ai2hmVpKPCcF2xRwnNMobnVfLQw4v6HSblTKuBg6v+pEBQ==",
       "dev": true,
       "requires": {
-        "babel-core": "^6.26.3",
         "babel-plugin-istanbul": "^4.1.6",
-        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-        "babel-preset-jest": "^22.4.3",
+        "babel-preset-jest": "^23.0.0",
         "cpx": "^1.5.0",
-        "fs-extra": "6.0.0",
-        "jest-config": "^22.4.3",
+        "fs-extra": "6.0.1",
+        "jest-config": "^23.0.0",
         "lodash": "^4.17.10",
-        "pkg-dir": "^2.0.0",
-        "source-map-support": "^0.5.5",
-        "yargs": "^11.0.0"
+        "pkg-dir": "^3.0.0",
+        "yargs": "^12.0.1"
       },
       "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "arr-diff": {
+        "decamelize": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
-          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
           "dev": true,
           "requires": {
-            "arr-flatten": "^1.0.1"
+            "xregexp": "4.0.0"
           }
         },
-        "array-unique": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
+          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
+          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
           "dev": true
         },
-        "babel-plugin-jest-hoist": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.4.tgz",
-          "integrity": "sha512-DUvGfYaAIlkdnygVIEl0O4Av69NtuQWcrjMOv6DODPuhuGLDnbsARz3AwiiI/EkIMMlxQDUcrZ9yoyJvTNjcVQ==",
-          "dev": true
-        },
-        "babel-preset-jest": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-22.4.4.tgz",
-          "integrity": "sha512-+dxMtOFwnSYWfum0NaEc0O03oSdwBsjx4tMSChRDPGwu/4wSY6Q6ANW3wkjKpJzzguaovRs/DODcT4hbSN8yiA==",
+        "pkg-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
           "dev": true,
           "requires": {
-            "babel-plugin-jest-hoist": "^22.4.4",
-            "babel-plugin-syntax-object-rest-spread": "^6.13.0"
+            "find-up": "^3.0.0"
           }
         },
-        "braces": {
-          "version": "1.8.5",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
-          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+        "yargs": {
+          "version": "12.0.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.1.tgz",
+          "integrity": "sha512-B0vRAp1hRX4jgIOWFtjfNjd9OA9RWYZ6tqGA9/I/IrTMsxmKvtWy+ersM+jzpQqbC3YfLzeABPdeTgcJ9eu1qQ==",
           "dev": true,
           "requires": {
-            "expand-range": "^1.8.1",
-            "preserve": "^0.2.0",
-            "repeat-element": "^1.1.2"
+            "cliui": "^4.0.0",
+            "decamelize": "^2.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^10.1.0"
           }
         },
-        "expand-brackets": {
-          "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
-          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+        "yargs-parser": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
+          "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
           "dev": true,
           "requires": {
-            "is-posix-bracket": "^0.1.0"
+            "camelcase": "^4.1.0"
           }
-        },
-        "expect": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/expect/-/expect-22.4.3.tgz",
-          "integrity": "sha512-XcNXEPehqn8b/jm8FYotdX0YrXn36qp4HWlrVT4ktwQas1l1LPxiVWncYnnL2eyMtKAmVIaG0XAp0QlrqJaxaA==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "jest-diff": "^22.4.3",
-            "jest-get-type": "^22.4.3",
-            "jest-matcher-utils": "^22.4.3",
-            "jest-message-util": "^22.4.3",
-            "jest-regex-util": "^22.4.3"
-          }
-        },
-        "extglob": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
-          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^1.0.0"
-          }
-        },
-        "fs-extra": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-6.0.0.tgz",
-          "integrity": "sha512-lk2cUCo8QzbiEWEbt7Cw3m27WMiRG321xsssbcIpfMhpRjrlC08WBOVQqj1/nQYYNnPtyIhP1oqLO3QwT2tPCw==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "is-extglob": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
-        },
-        "is-glob": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^1.0.0"
-          }
-        },
-        "jest-config": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-22.4.4.tgz",
-          "integrity": "sha512-9CKfo1GC4zrXSoMLcNeDvQBfgtqGTB1uP8iDIZ97oB26RCUb886KkKWhVcpyxVDOUxbhN+uzcBCeFe7w+Iem4A==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "glob": "^7.1.1",
-            "jest-environment-jsdom": "^22.4.1",
-            "jest-environment-node": "^22.4.1",
-            "jest-get-type": "^22.1.0",
-            "jest-jasmine2": "^22.4.4",
-            "jest-regex-util": "^22.1.0",
-            "jest-resolve": "^22.4.2",
-            "jest-util": "^22.4.1",
-            "jest-validate": "^22.4.4",
-            "pretty-format": "^22.4.0"
-          }
-        },
-        "jest-diff": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-22.4.3.tgz",
-          "integrity": "sha512-/QqGvCDP5oZOF6PebDuLwrB2BMD8ffJv6TAGAdEVuDx1+uEgrHpSFrfrOiMRx2eJ1hgNjlQrOQEHetVwij90KA==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "diff": "^3.2.0",
-            "jest-get-type": "^22.4.3",
-            "pretty-format": "^22.4.3"
-          }
-        },
-        "jest-environment-jsdom": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-22.4.3.tgz",
-          "integrity": "sha512-FviwfR+VyT3Datf13+ULjIMO5CSeajlayhhYQwpzgunswoaLIPutdbrnfUHEMyJCwvqQFaVtTmn9+Y8WCt6n1w==",
-          "dev": true,
-          "requires": {
-            "jest-mock": "^22.4.3",
-            "jest-util": "^22.4.3",
-            "jsdom": "^11.5.1"
-          }
-        },
-        "jest-environment-node": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-22.4.3.tgz",
-          "integrity": "sha512-reZl8XF6t/lMEuPWwo9OLfttyC26A5AMgDyEQ6DBgZuyfyeNUzYT8BFo6uxCCP/Av/b7eb9fTi3sIHFPBzmlRA==",
-          "dev": true,
-          "requires": {
-            "jest-mock": "^22.4.3",
-            "jest-util": "^22.4.3"
-          }
-        },
-        "jest-jasmine2": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-22.4.4.tgz",
-          "integrity": "sha512-nK3vdUl50MuH7vj/8at7EQVjPGWCi3d5+6aCi7Gxy/XMWdOdbH1qtO/LjKbqD8+8dUAEH+BVVh7HkjpCWC1CSw==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "co": "^4.6.0",
-            "expect": "^22.4.0",
-            "graceful-fs": "^4.1.11",
-            "is-generator-fn": "^1.0.0",
-            "jest-diff": "^22.4.0",
-            "jest-matcher-utils": "^22.4.0",
-            "jest-message-util": "^22.4.0",
-            "jest-snapshot": "^22.4.0",
-            "jest-util": "^22.4.1",
-            "source-map-support": "^0.5.0"
-          }
-        },
-        "jest-matcher-utils": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-22.4.3.tgz",
-          "integrity": "sha512-lsEHVaTnKzdAPR5t4B6OcxXo9Vy4K+kRRbG5gtddY8lBEC+Mlpvm1CJcsMESRjzUhzkz568exMV1hTB76nAKbA==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "jest-get-type": "^22.4.3",
-            "pretty-format": "^22.4.3"
-          }
-        },
-        "jest-message-util": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-22.4.3.tgz",
-          "integrity": "sha512-iAMeKxhB3Se5xkSjU0NndLLCHtP4n+GtCqV0bISKA5dmOXQfEbdEmYiu2qpnWBDCQdEafNDDU6Q+l6oBMd/+BA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0-beta.35",
-            "chalk": "^2.0.1",
-            "micromatch": "^2.3.11",
-            "slash": "^1.0.0",
-            "stack-utils": "^1.0.1"
-          }
-        },
-        "jest-mock": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-22.4.3.tgz",
-          "integrity": "sha512-+4R6mH5M1G4NK16CKg9N1DtCaFmuxhcIqF4lQK/Q1CIotqMs/XBemfpDPeVZBFow6iyUNu6EBT9ugdNOTT5o5Q==",
-          "dev": true
-        },
-        "jest-regex-util": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-22.4.3.tgz",
-          "integrity": "sha512-LFg1gWr3QinIjb8j833bq7jtQopiwdAs67OGfkPrvy7uNUbVMfTXXcOKXJaeY5GgjobELkKvKENqq1xrUectWg==",
-          "dev": true
-        },
-        "jest-resolve": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-22.4.3.tgz",
-          "integrity": "sha512-u3BkD/MQBmwrOJDzDIaxpyqTxYH+XqAXzVJP51gt29H8jpj3QgKof5GGO2uPGKGeA1yTMlpbMs1gIQ6U4vcRhw==",
-          "dev": true,
-          "requires": {
-            "browser-resolve": "^1.11.2",
-            "chalk": "^2.0.1"
-          }
-        },
-        "jest-snapshot": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-22.4.3.tgz",
-          "integrity": "sha512-JXA0gVs5YL0HtLDCGa9YxcmmV2LZbwJ+0MfyXBBc5qpgkEYITQFJP7XNhcHFbUvRiniRpRbGVfJrOoYhhGE0RQ==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "jest-diff": "^22.4.3",
-            "jest-matcher-utils": "^22.4.3",
-            "mkdirp": "^0.5.1",
-            "natural-compare": "^1.4.0",
-            "pretty-format": "^22.4.3"
-          }
-        },
-        "jest-util": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-22.4.3.tgz",
-          "integrity": "sha512-rfDfG8wyC5pDPNdcnAlZgwKnzHvZDu8Td2NJI/jAGKEGxJPYiE4F0ss/gSAkG4778Y23Hvbz+0GMrDJTeo7RjQ==",
-          "dev": true,
-          "requires": {
-            "callsites": "^2.0.0",
-            "chalk": "^2.0.1",
-            "graceful-fs": "^4.1.11",
-            "is-ci": "^1.0.10",
-            "jest-message-util": "^22.4.3",
-            "mkdirp": "^0.5.1",
-            "source-map": "^0.6.0"
-          }
-        },
-        "jest-validate": {
-          "version": "22.4.4",
-          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-22.4.4.tgz",
-          "integrity": "sha512-dmlf4CIZRGvkaVg3fa0uetepcua44DHtktHm6rcoNVtYlpwe6fEJRkMFsaUVcFHLzbuBJ2cPw9Gl9TKfnzMVwg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "jest-config": "^22.4.4",
-            "jest-get-type": "^22.1.0",
-            "leven": "^2.1.0",
-            "pretty-format": "^22.4.0"
-          }
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        },
-        "micromatch": {
-          "version": "2.3.11",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
-          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
-          "dev": true,
-          "requires": {
-            "arr-diff": "^2.0.0",
-            "array-unique": "^0.2.1",
-            "braces": "^1.8.2",
-            "expand-brackets": "^0.1.4",
-            "extglob": "^0.3.1",
-            "filename-regex": "^2.0.0",
-            "is-extglob": "^1.0.0",
-            "is-glob": "^2.0.1",
-            "kind-of": "^3.0.2",
-            "normalize-path": "^2.0.1",
-            "object.omit": "^2.0.0",
-            "parse-glob": "^3.0.4",
-            "regex-cache": "^0.4.2"
-          }
-        },
-        "pretty-format": {
-          "version": "22.4.3",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-22.4.3.tgz",
-          "integrity": "sha512-S4oT9/sT6MN7/3COoOy+ZJeA92VmOnveLHgrwBE3Z1W5N9S2A1QGNYiE1z75DAENbJrXXUb+OWXhpJcg05QKQQ==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^3.0.0",
-            "ansi-styles": "^3.2.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
         }
       }
     },
     "ts-loader": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-4.4.1.tgz",
-      "integrity": "sha512-PvL6jgVEt4RurczrTOR8uI6uRmKRfRXiv3CyMRX8+MSQLlbedfbXtbJIdkhdpbqrsumb+Lc3qrxfmXHCmODyAg==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-4.4.2.tgz",
+      "integrity": "sha512-Z3Y1a7A0KZZ1s/mAZkt74l1NAF7Y5xUhD1V9VB8/1eUlUOk8Qa/oo46tO2Uu5kQ3wXypOlbv77lLQySjXEDcdw==",
       "dev": true,
       "requires": {
         "chalk": "^2.3.0",
@@ -19242,12 +21590,13 @@
       }
     },
     "ts-node": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-6.1.1.tgz",
-      "integrity": "sha512-79FnymLGDBd/nXoiak1L6w6fd9Zz9Ge/x8/Aglaeh31KkqRLDzbfT1vBGlO5dqc76WzufTlW4IYl7e01CVUF5A==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-6.2.0.tgz",
+      "integrity": "sha512-ZNT+OEGfUNVMGkpIaDJJ44Zq3Yr0bkU/ugN1PHbU+/01Z7UV1fsELRiTx1KuQNvQ1A3pGh3y25iYF6jXgxV21A==",
       "dev": true,
       "requires": {
         "arrify": "^1.0.0",
+        "buffer-from": "^1.1.0",
         "diff": "^3.1.0",
         "make-error": "^1.1.1",
         "minimist": "^1.2.0",
@@ -19257,9 +21606,9 @@
       }
     },
     "tsconfig-paths": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.4.0.tgz",
-      "integrity": "sha512-HrPwxZj+9zAY/rvaPGwjk/2bOjM9ItfwaHV4wEs+9RdrMJN6Xv3d3y9W/LXt/GhRx3FutAlTMz5Ztb4copBmLw==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.4.2.tgz",
+      "integrity": "sha512-2BzUwQG7iUES+xNkRXivgejCpH9ru7n/khgv9Gl0FxP0tYvlPIMp2NspeYOXg8Wjh08Yyo/sSTlo4slNO3IFLg==",
       "dev": true,
       "requires": {
         "deepmerge": "^2.0.1",
@@ -19399,6 +21748,12 @@
         "prelude-ls": "~1.1.2"
       }
     },
+    "type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true
+    },
     "type-is": {
       "version": "1.6.16",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
@@ -19589,6 +21944,12 @@
         }
       }
     },
+    "typed-styles": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==",
+      "dev": true
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -19596,9 +21957,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.1.tgz",
-      "integrity": "sha512-h6pM2f/GDchCFlldnriOhs1QHuwbnmj6/v7499eMHqPeW4V2G0elua2eIc2nu8v2NdHV0Gm+tzX83Hr6nUFjQA==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+      "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
       "dev": true
     },
     "ua-parser-js": {
@@ -19684,14 +22045,11 @@
       "integrity": "sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==",
       "dev": true
     },
-    "undefsafe": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
-      "integrity": "sha1-Il9rngM3Zj4Njnz9aG/Cg2zKznY=",
-      "dev": true,
-      "requires": {
-        "debug": "^2.2.0"
-      }
+    "underscore": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
+      "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ=",
+      "dev": true
     },
     "unherit": {
       "version": "1.1.1",
@@ -19997,43 +22355,6 @@
         "latest-version": "^3.0.0",
         "semver-diff": "^2.0.0",
         "xdg-basedir": "^3.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "upper-case": {
@@ -20076,9 +22397,9 @@
       }
     },
     "url-join": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/url-join/-/url-join-3.0.0.tgz",
-      "integrity": "sha1-JugROs4ZXqMND8OBhuRUAPnOpnI=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz",
+      "integrity": "sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo=",
       "dev": true
     },
     "url-loader": {
@@ -20165,9 +22486,9 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
-      "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
     "v8-compile-cache": {
       "version": "2.0.0",
@@ -20609,9 +22930,9 @@
       }
     },
     "webpack-hot-client": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/webpack-hot-client/-/webpack-hot-client-4.0.3.tgz",
-      "integrity": "sha512-NbBzN6BkVDMhYKX2Hc6FLbC28oeh6suLgK614n0MsvALJlkSqMBGTh5fw8ms9Euvkm/+VB2XnlaYs391RLGVow==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/webpack-hot-client/-/webpack-hot-client-4.1.1.tgz",
+      "integrity": "sha512-Gu3hEkFJIsvC+2Dg86FvAzIL8KSR88Ptk0QnV4wEucObB0c9aMIYbjSA9oPTV4X5OZRH6ftrk4FcSGsZmTLiWA==",
       "dev": true,
       "requires": {
         "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
@@ -20699,34 +23020,41 @@
       }
     },
     "webpack-serve": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/webpack-serve/-/webpack-serve-1.0.4.tgz",
-      "integrity": "sha512-WhI9PMY2YLFliZhDsQFE5Os/On5Py6DGZpeBJyDM8xl0cspxgvXmWFywACn2YWWDgowqIxRqveyGh2RwdFWTNQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/webpack-serve/-/webpack-serve-2.0.2.tgz",
+      "integrity": "sha512-KQra2vayPKE2gooZRr2jF0Cs9AcQrS60Dmc6gMlFn4DmPkk/EmCuCODiAw008XedjwMBt8kUapDXJVu4gDH9Mg==",
       "dev": true,
       "requires": {
         "@shellscape/koa-static": "^4.0.4",
+        "@webpack-contrib/cli-utils": "^1.0.2",
         "@webpack-contrib/config-loader": "^1.1.1",
+        "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
         "chalk": "^2.3.0",
         "clipboardy": "^1.2.2",
         "cosmiconfig": "^5.0.2",
         "debug": "^3.1.0",
-        "find-up": "^2.1.0",
+        "decamelize": "^2.0.0",
         "get-port": "^3.2.0",
         "import-local": "^1.0.0",
+        "is-plain-obj": "^1.1.0",
         "killable": "^1.0.0",
         "koa": "^2.4.1",
-        "koa-webpack": "^4.0.0",
-        "lodash": "^4.17.5",
+        "koa-webpack": "^5.1.0",
         "loud-rejection": "^1.6.0",
+        "mem": "^3.0.0",
         "meow": "^5.0.0",
+        "merge-options": "^1.0.1",
         "nanobus": "^4.3.1",
+        "node-version": "^1.1.3",
         "opn": "^5.1.0",
+        "p-defer": "^1.0.0",
+        "p-series": "^1.1.0",
         "resolve": "^1.6.0",
+        "strip-ansi": "^4.0.0",
         "time-fix-plugin": "^2.0.0",
         "update-notifier": "^2.3.0",
-        "url-join": "3.0.0",
+        "url-join": "^4.0.0",
         "v8-compile-cache": "^2.0.0",
-        "webpack-hot-client": "^3.0.0",
         "webpack-log": "^1.1.2"
       },
       "dependencies": {
@@ -20756,6 +23084,25 @@
             "ms": "2.0.0"
           }
         },
+        "decamelize": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-2.0.0.tgz",
+          "integrity": "sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==",
+          "dev": true,
+          "requires": {
+            "xregexp": "4.0.0"
+          }
+        },
+        "mem": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/mem/-/mem-3.0.1.tgz",
+          "integrity": "sha512-QKs47bslvOE0NbXOqG6lMxn6Bk0Iuw0vfrIeLykmQle2LkCw1p48dZDdzE+D88b/xqRJcZGcMNeDvSVma+NuIQ==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^1.0.0",
+            "p-is-promise": "^1.1.0"
+          }
+        },
         "parse-json": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -20774,33 +23121,18 @@
           "requires": {
             "ansi-regex": "^3.0.0"
           }
-        },
-        "webpack-hot-client": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/webpack-hot-client/-/webpack-hot-client-3.0.0.tgz",
-          "integrity": "sha512-6k91015hZ4Okkz8u6OzRgJygEL+3J3ay6HVZhWBF3tT2P0rZJ0mgca39dotJxngggUm3S8707c0vrcynn1IzEQ==",
-          "dev": true,
-          "requires": {
-            "json-stringify-safe": "^5.0.1",
-            "loglevelnext": "^1.0.2",
-            "strip-ansi": "^4.0.0",
-            "uuid": "^3.1.0",
-            "webpack-log": "^1.1.1",
-            "ws": "^4.0.0"
-          }
-        },
-        "ws": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
-          "integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0",
-            "safe-buffer": "~5.1.0"
-          }
         }
       }
     },
+    "webpack-serve-waitpage": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-serve-waitpage/-/webpack-serve-waitpage-1.0.0.tgz",
+      "integrity": "sha512-KWkHQIqowGaMkbzld3mMbR0LMLBGCmlpk8gBQhhv3VAmpRD+to2/wkOBsKIMR8IedFVcwdGev2k/lruSmV4aWA==",
+      "dev": true,
+      "requires": {
+        "ejs": "^2.6.1"
+      }
+    },
     "webpack-sources": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz",
@@ -20980,9 +23312,9 @@
       }
     },
     "ws": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.0.tgz",
-      "integrity": "sha512-c18dMeW+PEQdDFzkhDsnBAlS4Z8KGStBQQUcQ5mf7Nf689jyGk0594L+i9RaQuf4gog6SvWLJorz2NfSaqxZ7w==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
+      "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
       "requires": {
         "async-limiter": "~1.0.0"
       }
@@ -21005,6 +23337,12 @@
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
       "dev": true
     },
+    "xregexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
+      "integrity": "sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==",
+      "dev": true
+    },
     "xtend": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
@@ -21068,6 +23406,12 @@
         "camelcase": "^4.1.0"
       }
     },
+    "ylru": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ylru/-/ylru-1.2.1.tgz",
+      "integrity": "sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ==",
+      "dev": true
+    },
     "yn": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",
diff --git a/package.json b/package.json
index 5f615b41f..e625312da 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,11 @@
   "scripts": {
     "start": "node dist/index.js",
     "test": "node scripts/test.js --env=jsdom",
-    "build": "npm-run-all --parallel compile:* && npm-run-all --parallel build:*",
+    "build": "npm-run-all compile --parallel build:*",
     "build:client": "node ./scripts/build.js",
     "build:server": "tsc -p ./src/tsconfig.json",
-    "watch": "NODE_ENV=development ts-node ./scripts/watcher/bin/watcher.ts ./config/watcher.ts",
+    "watch": "NODE_ENV=development ts-node ./scripts/watcher/bin/watcher.ts --config ./config/watcher.ts",
+    "compile": "npm-run-all --parallel compile:*",
     "compile:css-types": "tcm src/core/client/",
     "compile:relay-stream": "relay-compiler --src ./src/core/client/stream --schema $(ts-node ./scripts/schemaPath.ts tenant) --language typescript --artifactDirectory ./src/core/client/stream/__generated__ --no-watchman",
     "start:development": "NODE_ENV=development ts-node --project ./src/tsconfig.json -r tsconfig-paths/register ./src/index.ts",
@@ -18,14 +19,16 @@
     "lint:server": "tslint --project ./src/tsconfig.json",
     "lint:client": "tslint --project ./src/core/client/tsconfig.json",
     "lint:scripts": "tslint --project ./tsconfig.json",
-    "docz:watch": "docz dev"
+    "docz": "docz"
   },
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
+    "@types/react-copy-to-clipboard": "^4.2.5",
+    "@types/react-tooltip": "^3.3.5",
     "apollo-server-express": "^1.3.6",
     "bunyan": "^1.8.12",
-    "convict": "^4.3.0",
+    "convict": "^4.3.1",
     "dataloader": "^1.4.0",
     "dotenv": "^6.0.0",
     "dotenv-expand": "^4.2.0",
@@ -36,20 +39,21 @@
     "graphql": "^0.13.2",
     "graphql-config": "^2.0.1",
     "graphql-redis-subscriptions": "^1.5.0",
-    "graphql-tools": "^3.0.2",
+    "graphql-tools": "^3.0.5",
     "ioredis": "^3.2.2",
     "joi": "^13.4.0",
     "lodash": "^4.17.10",
-    "luxon": "^1.2.1",
-    "mongodb": "^3.0.10",
+    "luxon": "^1.3.1",
+    "mongodb": "^3.1.1",
     "passport": "^0.4.0",
     "performance-now": "^2.1.0",
-    "subscriptions-transport-ws": "^0.9.11",
-    "uuid": "^3.2.1"
+    "subscriptions-transport-ws": "^0.9.12",
+    "uuid": "^3.3.2"
   },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.49",
     "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.49",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0-beta.53",
     "@babel/polyfill": "7.0.0-beta.49",
     "@babel/preset-env": "7.0.0-beta.49",
     "@babel/preset-react": "7.0.0-beta.49",
@@ -60,24 +64,32 @@
     "@types/convict": "^4.2.0",
     "@types/cross-spawn": "^6.0.0",
     "@types/dotenv": "^4.0.3",
+    "@types/enzyme": "^3.1.11",
+    "@types/enzyme-adapter-react-16": "^1.0.2",
     "@types/express": "^4.16.0",
-    "@types/graphql": "^0.13.1",
-    "@types/ioredis": "^3.2.8",
-    "@types/jest": "^23.1.1",
+    "@types/graphql": "^0.13.3",
+    "@types/ioredis": "^3.2.12",
+    "@types/jest": "^23.1.5",
     "@types/joi": "^13.0.8",
-    "@types/lodash": "^4.14.109",
+    "@types/jsdom": "^11.0.6",
+    "@types/lodash": "^4.14.111",
     "@types/luxon": "^0.5.3",
-    "@types/mongodb": "^3.0.19",
-    "@types/node": "^10.3.1",
+    "@types/mongodb": "^3.1.1",
+    "@types/node": "^10.5.2",
     "@types/passport": "^0.4.5",
     "@types/query-string": "^6.1.0",
     "@types/react-dom": "^16.0.6",
-    "@types/react-relay": "^1.3.6",
+    "@types/react-relay": "github:coralproject/patched#types/react-relay",
+    "@types/react-responsive": "^3.0.1",
+    "@types/react-test-renderer": "^16.0.1",
     "@types/recompose": "^0.26.1",
     "@types/relay-runtime": "github:coralproject/patched#types/relay-runtime",
+    "@types/sane": "^2.0.0",
+    "@types/sinon": "^5.0.1",
     "@types/uuid": "^3.4.3",
     "@types/ws": "^5.1.2",
-    "autoprefixer": "^8.6.0",
+    "autoprefixer": "^8.6.5",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.0-beta",
     "babel-plugin-relay": "github:coralproject/patched#babel-plugin-relay",
     "babel-preset-react-optimize": "^1.0.1",
@@ -89,43 +101,59 @@
     "copy-webpack-plugin": "^4.5.1",
     "cross-spawn": "^6.0.5",
     "css-loader": "^0.28.11",
-    "docz": "^0.2.6",
-    "docz-theme-default": "^0.2.10",
+    "docz": "^0.5.8",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "final-form": "^4.8.1",
-    "flat": "^4.0.0",
+    "flat": "^4.1.0",
     "fluent": "^0.6.4",
     "fluent-intl-polyfill": "^0.1.0",
     "fluent-langneg": "^0.1.0",
     "fluent-react": "^0.7.0",
-    "graphql-playground-middleware-express": "^1.7.0",
+    "graphql-playground-middleware-express": "^1.7.2",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.2.0",
+    "jest": "^23.4.1",
+    "jsdom": "^11.11.0",
     "loader-utils": "^1.1.0",
-    "nodemon": "^1.17.5",
     "npm-run-all": "^4.1.3",
+    "postcss-advanced-variables": "^2.3.3",
+    "postcss-css-variables": "^0.9.0",
     "postcss-flexbugs-fixes": "^3.3.1",
     "postcss-font-magician": "^2.2.1",
-    "postcss-loader": "^2.1.5",
-    "precss": "^3.1.2",
-    "prettier": "^1.13.4",
+    "postcss-import": "^11.1.0",
+    "postcss-loader": "^2.1.6",
+    "postcss-nested": "^3.0.0",
+    "postcss-prepend-imports": "^1.0.1",
+    "postcss-preset-env": "^5.2.1",
+    "prettier": "^1.13.7",
+    "pstree.remy": "^1.1.0",
     "query-string": "^6.1.0",
     "raw-loader": "^0.5.1",
     "react": "^16.4.0",
     "react-dev-utils": "6.0.0-next.3e165448",
     "react-dom": "^16.4.0",
-    "react-final-form": "^3.6.0",
+    "react-final-form": "^3.6.4",
     "react-relay": "github:coralproject/patched#react-relay",
+    "react-responsive": "^4.1.0",
+    "react-test-renderer": "^16.4.1",
+    "react-timeago": "^4.1.9",
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-popper": "^1.0.0-beta.6",
     "recompose": "^0.27.1",
     "relay-compiler": "github:coralproject/patched#relay-compiler",
     "relay-compiler-language-typescript": "github:coralproject/patched#relay-compiler-language-typescript",
+    "relay-local-schema": "^0.7.0",
     "relay-runtime": "github:coralproject/patched#relay-runtime",
     "relay-test-utils": "github:coralproject/patched#relay-test-utils",
+    "sane": "^2.5.2",
+    "sinon": "^6.1.3",
     "style-loader": "^0.21.0",
-    "ts-jest": "^22.4.6",
-    "ts-loader": "^4.3.1",
-    "ts-node": "^6.1.0",
-    "tsconfig-paths": "^3.4.0",
+    "ts-jest": "^23.0.0",
+    "ts-loader": "^4.4.2",
+    "ts-node": "^6.2.0",
+    "tsconfig-paths": "^3.4.2",
     "tsconfig-paths-webpack-plugin": "^3.1.4",
     "tslint": "^5.10.0",
     "tslint-config-prettier": "^1.13.0",
@@ -133,12 +161,12 @@
     "tslint-plugin-prettier": "^1.3.0",
     "tslint-react": "^3.6.0",
     "typed-css-modules": "^0.3.4",
-    "typescript": "^2.9.1",
+    "typescript": "^2.9.2",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "4.12.0",
     "webpack-cli": "^3.0.2",
     "webpack-dev-server": "^3.1.4",
-    "webpack-hot-client": "^4.0.3",
+    "webpack-hot-client": "^4.1.1",
     "webpack-manifest-plugin": "^2.0.3"
   }
-}
\ No newline at end of file
+}
diff --git a/scripts/test.js b/scripts/test.js
index 1ac08fd2e..f08b18de6 100644
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -19,11 +19,11 @@ const paths = require("../config/paths");
 
 const jest = require("jest");
 let argv = process.argv.slice(2);
+argv.push("--config", paths.appJestConfig);
 
 // Watch unless on CI or in coverage mode
 if (!process.env.CI && argv.indexOf("--coverage") < 0) {
   argv.push("--watch");
-  argv.push("--config", paths.appJestConfig);
 }
 
 jest.run(argv);
diff --git a/scripts/watcher/ChokidarWatcher.ts b/scripts/watcher/ChokidarWatcher.ts
index cbc91d705..65a6ad701 100644
--- a/scripts/watcher/ChokidarWatcher.ts
+++ b/scripts/watcher/ChokidarWatcher.ts
@@ -1,14 +1,22 @@
 import chokidar from "chokidar";
+import path from "path";
 import { Watcher, WatchOptions } from "./types";
 
+function prependRootDir(
+  prepend: string,
+  paths: ReadonlyArray<string>
+): string[] {
+  const prependFunc = (p: string) => path.resolve(prepend, p);
+  return paths.map(prependFunc);
+}
+
 export default class ChokidarWatcher implements Watcher {
   public watch(
+    rootDir: string,
     paths: ReadonlyArray<string>,
     options: WatchOptions = {}
   ): AsyncIterable<string> {
-    const client = chokidar.watch(paths as string[], {
-      ignored: options.ignore,
-    });
+    const resolvedPaths = prependRootDir(rootDir, paths);
 
     // An array to hold all changes, that has not yet been yield.
     const queue: string[] = [];
@@ -19,31 +27,38 @@ export default class ChokidarWatcher implements Watcher {
       | ({ resolve: (result: string) => void; reject: (error: Error) => void })
       | null = null;
 
-    // Listen for errors
-    client.on("error", (error: Error) => {
-      // Resolve pending request.
-      if (pending) {
-        pending.reject(error);
-        pending = null;
-        return;
-      }
-      if (!firstError) {
-        firstError = error;
-      }
-    });
+    // Only start client if we have something to watch.
+    if (paths.length) {
+      const client = chokidar.watch(resolvedPaths, {
+        ignored: options.ignore && prependRootDir(rootDir, options.ignore),
+      });
 
-    // Listen for changes
-    client.on("change", (pathFile: string) => {
-      // Resolve pending request.
-      if (pending) {
-        pending.resolve(pathFile);
-        pending = null;
-        return;
-      }
+      // Listen for errors
+      client.on("error", (error: Error) => {
+        // Resolve pending request.
+        if (pending) {
+          pending.reject(error);
+          pending = null;
+          return;
+        }
+        if (!firstError) {
+          firstError = error;
+        }
+      });
 
-      // There is no pending request, save it into the queue.
-      queue.unshift(pathFile);
-    });
+      // Listen for changes
+      client.on("change", (pathFile: string) => {
+        // Resolve pending request.
+        if (pending) {
+          pending.resolve(pathFile);
+          pending = null;
+          return;
+        }
+
+        // There is no pending request, save it into the queue.
+        queue.unshift(pathFile);
+      });
+    }
     return {
       [Symbol.asyncIterator]() {
         return {
diff --git a/scripts/watcher/CommandExecutor.ts b/scripts/watcher/CommandExecutor.ts
index 60cf15e6a..195fcdcff 100644
--- a/scripts/watcher/CommandExecutor.ts
+++ b/scripts/watcher/CommandExecutor.ts
@@ -1,3 +1,4 @@
+import chalk from "chalk";
 import spawn from "cross-spawn";
 import { Cancelable, debounce } from "lodash";
 
@@ -5,13 +6,13 @@ import { Executor } from "./types";
 
 interface CommandExecutorOptions {
   args?: ReadonlyArray<string>;
-  // If true, allow spawning multiple processes.
+  /** If true, allow spawning multiple processes. */
   spawnMutiple?: boolean;
 
-  // Specify the period in which the process is started at max once.
+  /** Specify the period in which the process is started at max once. */
   debounce?: number | false;
 
-  // If true, will run command upon initialization.
+  /** If true, will run command upon initialization. */
   runOnInit?: boolean;
 }
 
@@ -65,9 +66,9 @@ export default class CommandExecutor implements Executor {
 
     child.on("close", (code: number) => {
       this.isRunning = false;
-      if (code !== 0) {
+      if (code !== 0 && code !== null) {
         // tslint:disable-next-line: no-console
-        console.log(`We had an error building ${code}`);
+        console.log(chalk.red(`Command exited with ${code}`));
       }
       if (this.shouldRespawn) {
         this.spawnProcessPotentiallyDebounced();
diff --git a/scripts/watcher/LongRunningExecutor.ts b/scripts/watcher/LongRunningExecutor.ts
index cffe6f7db..358821b46 100644
--- a/scripts/watcher/LongRunningExecutor.ts
+++ b/scripts/watcher/LongRunningExecutor.ts
@@ -1,12 +1,15 @@
+import chalk from "chalk";
 import { ChildProcess } from "child_process";
 import spawn from "cross-spawn";
 import { Cancelable, debounce } from "lodash";
+import psTree from "pstree.remy";
+
 import { Executor } from "./types";
 
 interface LongRunningExecutorOptions {
   args?: ReadonlyArray<string>;
 
-  // Specify the period in which the process is restarted at max once.
+  /** Specify the period in which the process is restarted at max once. */
   debounce?: number;
 }
 
@@ -31,9 +34,6 @@ export default class LongRunningExecutor implements Executor {
     this.isRunning = true;
     this.process = spawn(this.cmd, this.args as string[], {
       stdio: "inherit",
-      // Have all child processes in their own group.
-      // See `process.kill` below.
-      detached: true,
       shell: !this.args,
     });
 
@@ -42,27 +42,53 @@ export default class LongRunningExecutor implements Executor {
 
       if (code !== 0 && code !== null) {
         // tslint:disable-next-line: no-console
-        console.error(`Exit code returned ${code}`);
+        console.log(chalk.red(`Command exited with ${code}`));
         return;
       }
       if (this.shouldRestart) {
+        this.shouldRestart = false;
         this.spawnProcess();
       }
     });
   }
 
-  private restart(): void {
+  private restart() {
     this.shouldRestart = true;
-    // Using the `-` will kill all child procceses in the group.
-    // See: https://azimi.me/2014/12/31/kill-child_process-node-js.html
-    process.kill(-this.process!.pid, "SIGTERM");
+    return this.internalKill();
   }
 
-  private kill(): void {
+  private kill() {
     this.shouldRestart = false;
-    // Using the `-` will kill all child procceses in the group.
-    // See: https://azimi.me/2014/12/31/kill-child_process-node-js.html
-    process.kill(-this.process!.pid, "SIGTERM");
+    return this.internalKill();
+  }
+
+  private async internalKill(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const signal = "SIGTERM";
+      if (process.platform === "win32") {
+        // Force kill (/F) the whole child tree (/T) by PID
+        spawn.sync("taskkill", [
+          "/pid",
+          this.process!.pid.toString(),
+          "/T",
+          "/F",
+        ]);
+        resolve();
+        return;
+      }
+
+      psTree(this.process!.pid, (err, kids) => {
+        if (err) {
+          reject(err);
+        }
+        spawn.sync("kill", [
+          `-${signal}`,
+          this.process!.pid.toString(),
+          ...kids.map(p => p.PID.toString()),
+        ]);
+        resolve();
+      });
+    });
   }
 
   // This is called before watching starts.
@@ -71,10 +97,10 @@ export default class LongRunningExecutor implements Executor {
   }
 
   // This is called before exiting.
-  public onCleanup() {
+  public async onCleanup() {
     this.restartDebounced.cancel();
     if (this.isRunning) {
-      this.kill();
+      await this.kill();
     }
   }
 
diff --git a/scripts/watcher/SaneWatcher.ts b/scripts/watcher/SaneWatcher.ts
new file mode 100644
index 000000000..1b2cbf098
--- /dev/null
+++ b/scripts/watcher/SaneWatcher.ts
@@ -0,0 +1,101 @@
+import chalk from "chalk";
+import { execSync } from "child_process";
+import sane from "sane";
+
+import { Watcher, WatchOptions } from "./types";
+
+interface SaneWatcherOptions {
+  /**
+   * Set to true to use watchman, false to disabled, and undefined
+   * for automatic detection.
+   */
+  watchman?: boolean;
+  /** Use polling, this might be required for network file systems. */
+  poll?: boolean;
+}
+
+function canUseWatchman(): boolean {
+  try {
+    execSync("watchman --version", { stdio: ["ignore"] });
+    return true;
+    // tslint:disable-next-line:no-empty
+  } catch (e) {}
+  return false;
+}
+
+export default class SaneWatcher implements Watcher {
+  private watchman?: boolean;
+  private poll: boolean;
+
+  constructor(options: SaneWatcherOptions = {}) {
+    this.watchman = options.watchman;
+    this.poll = options.poll || false;
+
+    // Autodetect watchman.
+    if (this.watchman === undefined && canUseWatchman()) {
+      this.watchman = true;
+      // tslint:disable-next-line:no-console
+      console.log(chalk.grey(`Watchman detected`));
+    }
+  }
+
+  public watch(
+    rootDir: string,
+    paths: ReadonlyArray<string>,
+    options: WatchOptions = {}
+  ): AsyncIterable<string> {
+    // An array to hold all changes, that has not yet been yield.
+    const queue: string[] = [];
+
+    // If this is set, a pending promise is waiting for the next result.
+    let pending: ({ resolve: (result: string) => void }) | null = null;
+
+    // Only start client if we have something to watch.
+    if (paths.length) {
+      // Setup client
+      const client = sane(rootDir, {
+        glob: paths as string[],
+        ignored: options.ignore as string[],
+        watchman: this.watchman,
+        poll: this.poll,
+      });
+
+      // Listen for changes
+      client.on("change", (pathFile: string) => {
+        // Resolve pending request.
+        if (pending) {
+          pending.resolve(pathFile);
+          pending = null;
+          return;
+        }
+
+        // There is no pending request, save it into the queue.
+        queue.unshift(pathFile);
+      });
+    }
+
+    return {
+      [Symbol.asyncIterator]() {
+        return {
+          next: () =>
+            new Promise<IteratorResult<string>>((resolve, reject) => {
+              const wrapped = {
+                resolve: (pathFile: string) =>
+                  resolve({
+                    done: false,
+                    value: pathFile,
+                  }),
+              };
+
+              if (queue.length) {
+                wrapped.resolve(queue.pop()!);
+                return;
+              }
+              // We need to wait for the next change event.
+              pending = wrapped;
+            }),
+        };
+      },
+    };
+  }
+}
diff --git a/scripts/watcher/bin/watcher.ts b/scripts/watcher/bin/watcher.ts
index 32209c064..c8126a2ec 100644
--- a/scripts/watcher/bin/watcher.ts
+++ b/scripts/watcher/bin/watcher.ts
@@ -4,16 +4,36 @@ import program from "commander";
 import path from "path";
 import watch from "../";
 
-program
+async function run(
+  args: ReadonlyArray<string>,
+  options: Record<string, string>
+) {
+  const only = args;
+  const { config: configFile = "" } = options;
+  if (!configFile) {
+    throw new Error("Config file not specified");
+  }
+
+  // tslint:disable-next-line:no-var-requires
+  let config: any = require(path.resolve(configFile));
+  if (config.__esModule) {
+    config = config.default;
+  }
+
+  try {
+    await watch(config, { only });
+  } catch (err) {
+    // tslint:disable-next-line:no-console
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+const cmd = program
   .version("0.1.0")
-  .usage("<configFile>")
-  .arguments("<configFile>")
+  .usage("[watchers or sets]")
+  .option("-c, --config <configFile>", "Use given config file")
   .description("Run watchers defined in <configFile>")
-  .action(configFile => {
-    let config: any = require(path.resolve(configFile));
-    if (config.__esModule) {
-      config = config.default;
-    }
-    watch(config);
-  })
   .parse(process.argv);
+
+run(cmd.args, cmd.opts());
diff --git a/scripts/watcher/types.ts b/scripts/watcher/types.ts
index f78daee24..fc099b9b2 100644
--- a/scripts/watcher/types.ts
+++ b/scripts/watcher/types.ts
@@ -5,24 +5,31 @@ export interface WatchOptions {
 }
 
 export interface Watcher {
+  onInit?(): void | Promise<void>;
+  onCleanup?(): void | Promise<void>;
   watch(
+    rootDir: string,
     paths: ReadonlyArray<string>,
     options?: WatchOptions
   ): AsyncIterable<string>;
 }
 
 export interface Executor {
-  onInit?(): void;
-  onCleanup?(): void;
+  onInit?(): void | Promise<void>;
+  onCleanup?(): void | Promise<void>;
   execute(filePath: string): void;
 }
 
+export interface Options {
+  only?: ReadonlyArray<string>;
+}
+
 export interface Config {
   rootDir?: string;
   backend?: Watcher;
-  watchers: {
-    [key: string]: WatchConfig;
-  };
+  watchers: Record<string, WatchConfig>;
+  defaultSet?: string;
+  sets?: Record<string, ReadonlyArray<string>>;
 }
 
 export interface WatchConfig {
@@ -47,4 +54,13 @@ export const configSchema = Joi.object({
       executor: Joi.object(),
     })
   ),
-});
+  defaultSet: Joi.string().optional(),
+  sets: Joi.object()
+    .pattern(
+      /.*/,
+      Joi.array()
+        .items(Joi.string())
+        .unique()
+    )
+    .optional(),
+}).with("defaultSet", "sets");
diff --git a/scripts/watcher/types/pstree.remy.d.ts b/scripts/watcher/types/pstree.remy.d.ts
new file mode 100644
index 000000000..4cca7eff8
--- /dev/null
+++ b/scripts/watcher/types/pstree.remy.d.ts
@@ -0,0 +1,6 @@
+declare module "pstree.remy" {
+  export default function psTree(
+    pid: number,
+    callback: (err: Error, kids: Array<{ PID: number }>) => void
+  ): void;
+}
diff --git a/scripts/watcher/watch.ts b/scripts/watcher/watch.ts
index 572f7107b..63ed48fd4 100644
--- a/scripts/watcher/watch.ts
+++ b/scripts/watcher/watch.ts
@@ -1,58 +1,106 @@
+import chalk from "chalk";
 import Joi from "joi";
-import path from "path";
+import { pickBy } from "lodash";
 
-import ChokidarWatcher from "./ChokidarWatcher";
-import { Config, configSchema, WatchConfig, Watcher } from "./types";
+import SaneWatcher from "./SaneWatcher";
+import { Config, configSchema, Options, WatchConfig, Watcher } from "./types";
 
 // Polyfill the asyncIterator symbol.
 if (Symbol.asyncIterator === undefined) {
   (Symbol as any).asyncIterator = Symbol.for("asyncIterator");
 }
 
-async function beginWatch(watcher: Watcher, key: string, config: WatchConfig) {
+async function beginWatch(
+  watcher: Watcher,
+  key: string,
+  config: WatchConfig,
+  rootDir: string
+) {
   const { paths, ignore, executor } = config;
   if (executor.onInit) {
-    executor.onInit();
+    await executor.onInit();
   }
-  for await (const filePath of watcher.watch(paths, { ignore })) {
+  for await (const filePath of watcher.watch(rootDir, paths, { ignore })) {
     // tslint:disable-next-line:no-console
-    console.log(`Execute "${key}"`);
+    console.log(chalk.cyanBright(`Execute "${key}"`));
     executor.execute(filePath);
   }
 }
 
-function prependRootDir(prepend: string, cfg: WatchConfig): WatchConfig {
-  const prependFunc = (p: string) => path.resolve(prepend, p);
-  return {
-    ...cfg,
-    paths: cfg.paths.map(prependFunc),
-    ignore: cfg.ignore ? cfg.ignore.map(prependFunc) : undefined,
-  };
-}
-
-function setupCleanup(config: Config) {
+function setupCleanup(watcher: Watcher, config: Config) {
   ["SIGINT", "SIGTERM"].forEach(signal =>
-    process.once(signal as any, () => {
+    process.once(signal as any, async () => {
+      const cleanups = [];
+      if (watcher.onCleanup) {
+        cleanups.push(watcher.onCleanup());
+      }
       for (const key of Object.keys(config.watchers)) {
         if (config.watchers[key].executor.onCleanup) {
-          config.watchers[key].executor.onCleanup!();
+          cleanups.push(config.watchers[key].executor.onCleanup!());
         }
       }
+      await Promise.all(cleanups);
       process.exit(0);
     })
   );
 }
 
-export default async function watch(config: Config) {
+function resolveSets(
+  sets: Record<string, ReadonlyArray<string>>,
+  value: ReadonlyArray<string>
+) {
+  const resolved: string[] = [];
+  value.forEach(v => {
+    if (v in sets) {
+      resolved.push(...sets[v]);
+      return;
+    }
+    resolved.push(v);
+  });
+  return resolved;
+}
+
+function filterOnly(
+  watchers: Config["watchers"],
+  only: ReadonlyArray<string>,
+  sets?: Record<string, ReadonlyArray<string>>
+): Config["watchers"] {
+  const resolved = sets ? resolveSets(sets, only) : only;
+  const unknown = resolved.filter(r => !(r in watchers));
+  if (unknown.length) {
+    throw new Error(`Watcher Configuration or Set for ${unknown} not found`);
+  }
+  return pickBy(watchers, (value, key) => {
+    if (resolved.indexOf(key) === -1) {
+      // tslint:disable-next-line:no-console
+      console.log(chalk.grey(`Disabled watcher "${key}"`));
+      return false;
+    }
+    return true;
+  }) as Config["watchers"];
+}
+
+export default async function watch(config: Config, options: Options = {}) {
   Joi.assert(config, configSchema);
-  const watcher = config.backend || new ChokidarWatcher();
-  setupCleanup(config);
-  for (const key of Object.keys(config.watchers)) {
+  const watcher: Watcher = config.backend || new SaneWatcher();
+  const rootDir = config.rootDir || process.cwd();
+  const defaultSet = config.defaultSet && [config.defaultSet];
+  const only = options.only && options.only.length ? options.only : defaultSet;
+
+  let watchersConfigs = config.watchers;
+  if (only) {
+    watchersConfigs = filterOnly(watchersConfigs, only, config.sets);
+  }
+
+  setupCleanup(watcher, config);
+  if (watcher.onInit) {
+    await watcher.onInit();
+  }
+
+  for (const key of Object.keys(watchersConfigs)) {
     // tslint:disable-next-line:no-console
-    console.log(`Start watcher "${key}"`);
-    const watcherConfig = config.rootDir
-      ? prependRootDir(config.rootDir, config.watchers[key])
-      : config.watchers[key];
-    beginWatch(watcher, key, watcherConfig);
+    console.log(chalk.cyanBright(`Start watcher "${key}"`));
+    const watcherConfig = watchersConfigs[key];
+    beginWatch(watcher, key, watcherConfig, rootDir);
   }
 }
diff --git a/src/core/client/.babelrc.js b/src/core/client/.babelrc.js
index 6650ad9c9..02fdffd71 100644
--- a/src/core/client/.babelrc.js
+++ b/src/core/client/.babelrc.js
@@ -8,5 +8,8 @@ module.exports = {
     production: {
       plugins: [],
     },
+    test: {
+      plugins: ["@babel/transform-modules-commonjs"],
+    },
   },
 };
diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
index 93bc84c43..d14c245f5 100644
--- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
@@ -1,7 +1,9 @@
 import { LocalizationProvider } from "fluent-react/compat";
 import { MessageContext } from "fluent/compat";
 import React, { StatelessComponent } from "react";
+import { Formatter } from "react-timeago";
 import { Environment } from "relay-runtime";
+import { UIContext } from "talk-ui/components";
 
 export interface TalkContext {
   // relayEnvironment for our relay framework.
@@ -9,6 +11,9 @@ export interface TalkContext {
 
   // localMessages for our i18n framework.
   localeMessages: MessageContext[];
+
+  // formatter for timeago.
+  timeagoFormatter?: Formatter;
 }
 
 const { Provider, Consumer } = React.createContext<TalkContext>({} as any);
@@ -27,7 +32,9 @@ export const TalkContextProvider: StatelessComponent<{
 }> = ({ value, children }) => (
   <Provider value={value}>
     <LocalizationProvider messages={value.localeMessages}>
-      {children}
+      <UIContext.Provider value={{ timeagoFormatter: value.timeagoFormatter }}>
+        {children}
+      </UIContext.Provider>
     </LocalizationProvider>
   </Provider>
 );
diff --git a/src/core/client/framework/lib/bootstrap/createContext.ts b/src/core/client/framework/lib/bootstrap/createContext.tsx
similarity index 71%
rename from src/core/client/framework/lib/bootstrap/createContext.ts
rename to src/core/client/framework/lib/bootstrap/createContext.tsx
index 764d09214..6043eacb9 100644
--- a/src/core/client/framework/lib/bootstrap/createContext.ts
+++ b/src/core/client/framework/lib/bootstrap/createContext.tsx
@@ -1,4 +1,7 @@
+import { Localized } from "fluent-react/compat";
 import { noop } from "lodash";
+import React from "react";
+import { Formatter } from "react-timeago";
 import { Environment, Network, RecordSource, Store } from "relay-runtime";
 
 import { generateMessages, LocalesData, negotiateLanguages } from "../i18n";
@@ -16,6 +19,25 @@ interface CreateContextArguments {
   init?: ((context: TalkContext) => void | Promise<void>);
 }
 
+/**
+ * timeagoFormatter integrates timeago into our translation
+ * framework. It gets injected into the UIContext.
+ */
+export const timeagoFormatter: Formatter = (value, unit, suffix) => {
+  // We use 'in' instead of 'from now' for language consistency
+  const ourSuffix = suffix === "from now" ? "in" : suffix;
+  return (
+    <Localized
+      id="framework-timeago"
+      $value={value}
+      $unit={unit}
+      $suffix={ourSuffix}
+    >
+      <span>now</span>
+    </Localized>
+  );
+};
+
 /**
  * `createContext` manages the dependencies of our framework
  * and returns a `TalkContext` that can be passed to the
@@ -46,6 +68,7 @@ export default async function createContext({
   const context = {
     relayEnvironment,
     localeMessages,
+    timeagoFormatter,
   };
 
   // Run custom initializations.
diff --git a/src/core/client/framework/lib/bootstrap/withContext.tsx b/src/core/client/framework/lib/bootstrap/withContext.tsx
index 82ae2695f..677da236a 100644
--- a/src/core/client/framework/lib/bootstrap/withContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/withContext.tsx
@@ -1,5 +1,9 @@
 import * as React from "react";
-import { hoistStatics, InferableComponentEnhancer } from "recompose";
+import {
+  hoistStatics,
+  InferableComponentEnhancer,
+  wrapDisplayName,
+} from "recompose";
 
 import { TalkContext, TalkContextConsumer } from "./TalkContext";
 
@@ -12,11 +16,17 @@ function withContext<T>(
   propsCallback: (context: TalkContext) => T
 ): InferableComponentEnhancer<T> {
   return hoistStatics<T>(
-    <U extends T>(WrappedComponent: React.ComponentType<U>) => (props: any) => (
-      <TalkContextConsumer>
-        {context => <WrappedComponent {...props} {...propsCallback(context)} />}
-      </TalkContextConsumer>
-    )
+    <U extends T>(WrappedComponent: React.ComponentType<U>) => {
+      const Component: React.StatelessComponent<any> = props => (
+        <TalkContextConsumer>
+          {context => (
+            <WrappedComponent {...props} {...propsCallback(context)} />
+          )}
+        </TalkContextConsumer>
+      );
+      Component.displayName = wrapDisplayName(WrappedComponent, "withContext");
+      return Component;
+    }
   );
 }
 
diff --git a/src/core/client/framework/lib/messages.tsx b/src/core/client/framework/lib/messages.tsx
index c8234c670..316cd6e8a 100644
--- a/src/core/client/framework/lib/messages.tsx
+++ b/src/core/client/framework/lib/messages.tsx
@@ -13,7 +13,7 @@ export const VALIDATION_REQUIRED = () => (
 );
 
 export const VALIDATION_TOO_SHORT = () => (
-  <Localized id="framework-validation-too-short">
+  <Localized id="framework-validation-tooShort">
     <span>This field is too short.</span>
   </Localized>
 );
diff --git a/src/core/client/framework/lib/relay/QueryRenderer.tsx b/src/core/client/framework/lib/relay/QueryRenderer.tsx
index 30a42dbe0..a5845c0b6 100644
--- a/src/core/client/framework/lib/relay/QueryRenderer.tsx
+++ b/src/core/client/framework/lib/relay/QueryRenderer.tsx
@@ -1,24 +1,18 @@
 import React, { Component } from "react";
-import { QueryRenderer } from "react-relay";
-import { CacheConfig, GraphQLTaggedNode, RerunParam } from "relay-runtime";
+import {
+  QueryRenderer,
+  QueryRendererProps as QueryRendererPropsOrig,
+} from "react-relay";
+
+import { Omit } from "talk-framework/types";
 
 import { TalkContextConsumer } from "../bootstrap/TalkContext";
 
-// Taken from relay types and added Generic support for Variables and Response
-export interface QueryRendererProps<V, R> {
-  cacheConfig?: CacheConfig;
-  query?: GraphQLTaggedNode | null;
-  render(readyState: ReadyState<R>): React.ReactElement<any> | undefined | null;
-  variables: V;
-  rerunParamExperimental?: RerunParam;
-}
-
-// Taken from relay types and added Generic support for Variables and Response
-export interface ReadyState<R> {
-  error: Error | undefined | null;
-  props: R | undefined | null;
-  retry?(): void;
-}
+// Omit environment as we are passing this from the context.
+export type QueryRendererProps<V, R> = Omit<
+  QueryRendererPropsOrig<V, R>,
+  "environment"
+>;
 
 /**
  * TalkQueryRenderer is a wrappper around  Relay's `QueryRenderer`.
diff --git a/src/core/client/framework/lib/relay/createMutationContainer.tsx b/src/core/client/framework/lib/relay/createMutationContainer.tsx
index 3e3d8bf60..d0a91e92d 100644
--- a/src/core/client/framework/lib/relay/createMutationContainer.tsx
+++ b/src/core/client/framework/lib/relay/createMutationContainer.tsx
@@ -1,5 +1,10 @@
 import * as React from "react";
-import { compose, hoistStatics, InferableComponentEnhancer } from "recompose";
+import {
+  compose,
+  hoistStatics,
+  InferableComponentEnhancer,
+  wrapDisplayName,
+} from "recompose";
 import { Environment } from "relay-runtime";
 
 import { withContext } from "../bootstrap";
@@ -19,6 +24,11 @@ function createMutationContainer<T extends string, I, R>(
     withContext(({ relayEnvironment }) => ({ relayEnvironment })),
     hoistStatics((WrappedComponent: React.ComponentType<any>) => {
       class CreateMutationContainer extends React.Component<any> {
+        public static displayName = wrapDisplayName(
+          WrappedComponent,
+          "createMutationContainer"
+        );
+
         private commit = (input: I) => {
           return commit(this.props.relayEnvironment, input);
         };
diff --git a/src/core/client/framework/lib/relay/index.ts b/src/core/client/framework/lib/relay/index.ts
index e55279f7c..43dca5178 100644
--- a/src/core/client/framework/lib/relay/index.ts
+++ b/src/core/client/framework/lib/relay/index.ts
@@ -7,6 +7,7 @@ export { default as QueryRenderer } from "./QueryRenderer";
 export * from "./QueryRenderer";
 export { default as createMutationContainer } from "./createMutationContainer";
 export { default as createAndRetain } from "./createAndRetain";
+export { default as wrapFetchWithLogger } from "./wrapFetchWithLogger";
 export {
   commitMutationPromise,
   commitMutationPromiseNormalized,
diff --git a/src/core/client/framework/lib/relay/withFragmentContainer.ts b/src/core/client/framework/lib/relay/withFragmentContainer.ts
index c4636fe3c..2541b2001 100644
--- a/src/core/client/framework/lib/relay/withFragmentContainer.ts
+++ b/src/core/client/framework/lib/relay/withFragmentContainer.ts
@@ -6,7 +6,7 @@ import { InferableComponentEnhancerWithProps } from "recompose";
  * from Relay.
  */
 export default <T>(
-  fragmentSpec: GraphQLTaggedNode
+  fragmentSpec: { [P in keyof T]: GraphQLTaggedNode }
 ): InferableComponentEnhancerWithProps<T, { [P in keyof T]: any }> => (
   component: React.ComponentType<any>
 ) => createFragmentContainer(component, fragmentSpec) as any;
diff --git a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
index d08aa5d55..9de4180bb 100644
--- a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
+++ b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
@@ -1,6 +1,11 @@
 import * as React from "react";
 import { compose, hoistStatics, InferableComponentEnhancer } from "recompose";
-import { CSelector, CSnapshot, Environment } from "relay-runtime";
+import {
+  CSelector,
+  CSnapshot,
+  Environment,
+  GraphQLTaggedNode,
+} from "relay-runtime";
 
 import { withContext } from "../bootstrap";
 
@@ -25,7 +30,7 @@ export const LOCAL_ID = "client:root.local";
  * must have the `LOCAL_ID`.
  */
 function withLocalStateContainer<T>(
-  fragmentSpec: any
+  fragmentSpec: GraphQLTaggedNode
 ): InferableComponentEnhancer<{ local: T }> {
   return compose(
     withContext(({ relayEnvironment }) => ({ relayEnvironment })),
@@ -33,7 +38,7 @@ function withLocalStateContainer<T>(
       class LocalStateContainer extends React.Component<Props, any> {
         constructor(props: Props) {
           super(props);
-          const fragment = fragmentSpec.data().default;
+          const fragment = (fragmentSpec as any).data().default;
           if (fragment.kind !== "Fragment") {
             throw new Error("Expected fragment");
           }
diff --git a/src/core/client/framework/lib/relay/withPaginationContainer.ts b/src/core/client/framework/lib/relay/withPaginationContainer.ts
index 5f768c0a7..bb2740d01 100644
--- a/src/core/client/framework/lib/relay/withPaginationContainer.ts
+++ b/src/core/client/framework/lib/relay/withPaginationContainer.ts
@@ -10,9 +10,13 @@ import { InferableComponentEnhancerWithProps } from "recompose";
  * withPaginationContainer is a curried version of `createPaginationContainers`
  * from Relay.
  */
-export default <T, InnerProps>(
-  fragmentSpec: GraphQLTaggedNode,
-  connectionConfig: ConnectionConfig<InnerProps>
+export default <T, InnerProps, FragmentVariables, QueryVariables>(
+  fragmentSpec: { [P in keyof T]: GraphQLTaggedNode },
+  connectionConfig: ConnectionConfig<
+    InnerProps,
+    FragmentVariables,
+    QueryVariables
+  >
 ): InferableComponentEnhancerWithProps<
   T & { relay: RelayPaginationProp },
   { [P in keyof T]: any }
diff --git a/src/core/client/framework/lib/relay/withRefetchContainer.ts b/src/core/client/framework/lib/relay/withRefetchContainer.ts
index 7d11e0e16..9e9989758 100644
--- a/src/core/client/framework/lib/relay/withRefetchContainer.ts
+++ b/src/core/client/framework/lib/relay/withRefetchContainer.ts
@@ -10,7 +10,7 @@ import { InferableComponentEnhancerWithProps } from "recompose";
  * from Relay.
  */
 export default <T>(
-  fragmentSpec: GraphQLTaggedNode,
+  fragmentSpec: { [P in keyof T]: GraphQLTaggedNode },
   refetchQuery: GraphQLTaggedNode
 ): InferableComponentEnhancerWithProps<
   T & { relay: RelayRefetchProp },
diff --git a/src/core/client/framework/lib/relay/wrapFetchWithLogger.ts b/src/core/client/framework/lib/relay/wrapFetchWithLogger.ts
new file mode 100644
index 000000000..d320e8ab0
--- /dev/null
+++ b/src/core/client/framework/lib/relay/wrapFetchWithLogger.ts
@@ -0,0 +1,25 @@
+import { FetchFunction } from "relay-runtime";
+
+/**
+ * Decorates the fetch function with error logging.
+ * Intended for testing purposes.
+ */
+export default function wrapFetchWithLogger(
+  fetch: FetchFunction,
+  logResult?: boolean
+): FetchFunction {
+  return async (...args: any[]) => {
+    try {
+      const result = await (fetch as any)(...args);
+      if (logResult) {
+        // tslint:disable-next-line:no-console
+        console.log(JSON.stringify(result));
+      }
+      return result;
+    } catch (err) {
+      // tslint:disable-next-line:no-console
+      console.error(err);
+      throw err;
+    }
+  };
+}
diff --git a/src/core/client/stream/.babelrc.js b/src/core/client/stream/.babelrc.js
index d2601c757..11bf9a670 100644
--- a/src/core/client/stream/.babelrc.js
+++ b/src/core/client/stream/.babelrc.js
@@ -1,5 +1,4 @@
 const path = require("path");
-
 module.exports = {
   extends: "../.babelrc.js",
   plugins: [
diff --git a/src/core/client/stream/components/App.css b/src/core/client/stream/components/App.css
new file mode 100644
index 000000000..68c4e29c4
--- /dev/null
+++ b/src/core/client/stream/components/App.css
@@ -0,0 +1,14 @@
+/* Here we add global stylings for body and document */
+:global {
+  body {
+    margin: "0";
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.root {
+}
diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx
new file mode 100644
index 000000000..9b91a8974
--- /dev/null
+++ b/src/core/client/stream/components/App.spec.tsx
@@ -0,0 +1,22 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import App from "./App";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof App> = {
+    asset: {},
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders correctly when asset is null", () => {
+  const props: PropTypesOf<typeof App> = {
+    asset: null,
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index dde8e386c..14659585a 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -1,33 +1,22 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Center } from "talk-ui/components";
+import { Flex } from "talk-ui/components";
 
-import AssetListContainer from "../containers/AssetListContainer";
-import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import StreamContainer from "../containers/StreamContainer";
-import Logo from "./Logo";
+
+import * as styles from "./App.css";
 
 export interface AppProps {
-  assets?: any | null;
-  asset?: {
-    id: string;
-    isClosed: boolean;
-    comments: any | null;
-  } | null;
+  asset: {} | null;
 }
 
 const App: StatelessComponent<AppProps> = props => {
-  if (props.assets) {
-    return <AssetListContainer assets={props.assets} />;
-  }
   if (props.asset) {
     return (
-      <Center>
-        <Logo gutterBottom />
-        <StreamContainer comments={props.asset.comments} />
-        <PostCommentFormContainer assetID={props.asset.id} />
-      </Center>
+      <Flex justifyContent="center" className={styles.root}>
+        <StreamContainer asset={props.asset} />
+      </Flex>
     );
   }
   return <div>Asset not found </div>;
diff --git a/src/core/client/stream/components/AssetList.tsx b/src/core/client/stream/components/AssetList.tsx
deleted file mode 100644
index a82c34fe6..000000000
--- a/src/core/client/stream/components/AssetList.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
-export interface AssetListProps {
-  assets: ReadonlyArray<{ id: string; title: string | null }>;
-}
-
-const AssetList: StatelessComponent<AssetListProps> = props => {
-  return (
-    <div>
-      {props.assets.map(asset => <div key={asset.id}>{asset.title}</div>)}
-    </div>
-  );
-};
-
-export default AssetList;
diff --git a/src/core/client/stream/components/Comment.css b/src/core/client/stream/components/Comment.css
deleted file mode 100644
index d43780d8f..000000000
--- a/src/core/client/stream/components/Comment.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.root {
-  width: 400px;
-}
-
-.gutterBottom {
-  margin-bottom: calc(2px * $spacing-unit);
-}
-
-.author {
-  font-weight: $font-weight-medium;
-}
diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
deleted file mode 100644
index c1b3f9303..000000000
--- a/src/core/client/stream/components/Comment.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import cn from "classnames";
-import React from "react";
-import { StatelessComponent } from "react";
-
-import { Typography } from "talk-ui/components";
-
-import * as styles from "./Comment.css";
-
-export interface CommentProps {
-  className?: string;
-  author: {
-    username: string;
-  } | null;
-  body: string | null;
-  gutterBottom?: boolean;
-}
-
-const Comment: StatelessComponent<CommentProps> = props => {
-  const rootClassName = cn(styles.root, props.className, {
-    [styles.gutterBottom]: props.gutterBottom,
-  });
-  return (
-    <div className={rootClassName}>
-      <Typography className={styles.author} gutterBottom>
-        {props.author && props.author.username}
-      </Typography>
-      <Typography>{props.body}</Typography>
-    </div>
-  );
-};
-
-export default Comment;
diff --git a/src/core/client/stream/components/Comment/Comment.spec.tsx b/src/core/client/stream/components/Comment/Comment.spec.tsx
new file mode 100644
index 000000000..8b409adeb
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Comment.spec.tsx
@@ -0,0 +1,19 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Comment from "./Comment";
+
+it("renders username and body", () => {
+  const props: PropTypesOf<typeof Comment> = {
+    id: "comment-id",
+    author: {
+      username: "Marvin",
+    },
+    body: "Woof",
+    createdAt: "1995-12-17T03:24:00.000Z",
+  };
+  const wrapper = shallow(<Comment {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
new file mode 100644
index 000000000..d77b6c4ad
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -0,0 +1,43 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+import { StatelessComponent } from "react";
+import { Button, Popover, Typography } from "talk-ui/components";
+import PermalinkPopover from "../PermalinkPopover";
+import Timestamp from "./Timestamp";
+import TopBar from "./TopBar";
+import Username from "./Username";
+
+export interface CommentProps {
+  id: string;
+  className?: string;
+  author: {
+    username: string;
+  } | null;
+  body: string | null;
+  createdAt: string;
+}
+
+const Comment: StatelessComponent<CommentProps> = props => {
+  return (
+    <div role="article">
+      <TopBar>
+        {props.author && <Username>{props.author.username}</Username>}
+        <Timestamp>{props.createdAt}</Timestamp>
+      </TopBar>
+      <Typography>{props.body}</Typography>
+      <div>
+        <Popover body={<PermalinkPopover commentId={props.id} />}>
+          {({ toggleShow, ref }) => (
+            <Button onClick={toggleShow} innerRef={ref} primary>
+              <Localized id="comments-permalink-share">
+                <span>Share</span>
+              </Localized>
+            </Button>
+          )}
+        </Popover>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;
diff --git a/src/core/client/stream/components/Comment/Timestamp.css b/src/core/client/stream/components/Comment/Timestamp.css
new file mode 100644
index 000000000..f2d263ad4
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Timestamp.css
@@ -0,0 +1,3 @@
+.root {
+  composes: timestamp from "talk-ui/shared/typography.css";
+}
diff --git a/src/core/client/stream/components/Comment/Timestamp.spec.tsx b/src/core/client/stream/components/Comment/Timestamp.spec.tsx
new file mode 100644
index 000000000..4a276b762
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Timestamp.spec.tsx
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Timestamp from "./Timestamp";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Timestamp> = {
+    children: "1995-12-17T03:24:00.000Z",
+  };
+  const wrapper = shallow(<Timestamp {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/Timestamp.tsx b/src/core/client/stream/components/Comment/Timestamp.tsx
new file mode 100644
index 000000000..e6228416f
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Timestamp.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { RelativeTime } from "talk-ui/components";
+
+import * as styles from "./Timestamp.css";
+
+export interface TimestampProps {
+  children: string;
+}
+
+const Timestamp: StatelessComponent<TimestampProps> = props => (
+  <RelativeTime className={styles.root} date={props.children} />
+);
+
+export default Timestamp;
diff --git a/src/core/client/stream/components/Comment/TopBar.css b/src/core/client/stream/components/Comment/TopBar.css
new file mode 100644
index 000000000..dff9c8a74
--- /dev/null
+++ b/src/core/client/stream/components/Comment/TopBar.css
@@ -0,0 +1,3 @@
+.root {
+  margin-bottom: calc(0.5 * var(--spacing-unit));
+}
diff --git a/src/core/client/stream/components/Comment/TopBar.spec.tsx b/src/core/client/stream/components/Comment/TopBar.spec.tsx
new file mode 100644
index 000000000..5ee691f70
--- /dev/null
+++ b/src/core/client/stream/components/Comment/TopBar.spec.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-framework/types";
+import { UIContext, UIContextProps } from "talk-ui/components";
+
+import TopBar from "./TopBar";
+
+it("renders correctly on small screens", () => {
+  const props: PropTypesOf<typeof TopBar> = {
+    children: <div>Hello World</div>,
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 320,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <TopBar {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly on big screens", () => {
+  const props: PropTypesOf<typeof TopBar> = {
+    children: <div>Hello World</div>,
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 1600,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <TopBar {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/TopBar.tsx b/src/core/client/stream/components/Comment/TopBar.tsx
new file mode 100644
index 000000000..2dfe6419d
--- /dev/null
+++ b/src/core/client/stream/components/Comment/TopBar.tsx
@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex, MatchMedia } from "talk-ui/components";
+
+import * as styles from "./TopBar.css";
+
+export interface TopBarProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const TopBar: StatelessComponent<TopBarProps> = props => {
+  const rootClassName = cn(styles.root, props.className);
+  return (
+    <MatchMedia minWidth="xs">
+      {matches => (
+        <Flex
+          className={rootClassName}
+          alignItems="baseline"
+          direction={matches ? "row" : "column"}
+          itemGutter={matches ? true : "half"}
+        >
+          {props.children}
+        </Flex>
+      )}
+    </MatchMedia>
+  );
+};
+
+export default TopBar;
diff --git a/src/core/client/stream/components/Comment/Username.css b/src/core/client/stream/components/Comment/Username.css
new file mode 100644
index 000000000..e2dd79a8e
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Username.css
@@ -0,0 +1,3 @@
+.root {
+  line-height: 1;
+}
diff --git a/src/core/client/stream/components/Comment/Username.spec.tsx b/src/core/client/stream/components/Comment/Username.spec.tsx
new file mode 100644
index 000000000..1a10e4012
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Username.spec.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-framework/types";
+import { UIContext, UIContextProps } from "talk-ui/components";
+
+import Username from "./Username";
+
+it("renders correctly on small screens", () => {
+  const props: PropTypesOf<typeof Username> = {
+    children: "Marvin",
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 320,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <Username {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly on big screens", () => {
+  const props: PropTypesOf<typeof Username> = {
+    children: "Marvin",
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 1600,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <Username {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/Username.tsx b/src/core/client/stream/components/Comment/Username.tsx
new file mode 100644
index 000000000..ada04c8ec
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Username.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { MatchMedia, Typography } from "talk-ui/components";
+
+import * as styles from "./Username.css";
+
+export interface UsernameProps {
+  children: string;
+}
+
+const Username: StatelessComponent<UsernameProps> = props => {
+  return (
+    <MatchMedia minWidth="xs">
+      {matches => (
+        <Typography
+          variant={matches ? "heading2" : "heading3"}
+          className={styles.root}
+          component="span"
+        >
+          {props.children}
+        </Typography>
+      )}
+    </MatchMedia>
+  );
+};
+
+export default Username;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
new file mode 100644
index 000000000..2d047c200
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders username and body 1`] = `
+<div
+  role="article"
+>
+  <TopBar>
+    <Username>
+      Marvin
+    </Username>
+    <Timestamp>
+      1995-12-17T03:24:00.000Z
+    </Timestamp>
+  </TopBar>
+  <withPropsOnChange(Typography)>
+    Woof
+  </withPropsOnChange(Typography)>
+</div>
+`;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap
new file mode 100644
index 000000000..862d6cad7
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(RelativeTime)
+  className="Timestamp-root"
+  date="1995-12-17T03:24:00.000Z"
+/>
+`;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
new file mode 100644
index 000000000..9253404bd
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly on big screens 1`] = `
+<div
+  className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders correctly on small screens 1`] = `
+<div
+  className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
new file mode 100644
index 000000000..ab0e141e6
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly on big screens 1`] = `
+<span
+  className="Typography-root Typography-heading2 Username-root"
+>
+  Marvin
+</span>
+`;
+
+exports[`renders correctly on small screens 1`] = `
+<span
+  className="Typography-root Typography-heading3 Username-root"
+>
+  Marvin
+</span>
+`;
diff --git a/src/core/client/stream/components/Comment/index.ts b/src/core/client/stream/components/Comment/index.ts
new file mode 100644
index 000000000..173033df9
--- /dev/null
+++ b/src/core/client/stream/components/Comment/index.ts
@@ -0,0 +1 @@
+export { default, default as Comment, CommentProps } from "./Comment";
diff --git a/src/core/client/stream/components/Indent.css b/src/core/client/stream/components/Indent.css
new file mode 100644
index 000000000..c675b03a6
--- /dev/null
+++ b/src/core/client/stream/components/Indent.css
@@ -0,0 +1,8 @@
+.root {
+  border-left: 3px solid;
+  padding-left: var(--spacing-unit);
+}
+
+.level0 {
+  border-color: var(--palette-secondary-darkest);
+}
diff --git a/src/core/client/stream/components/Indent.spec.tsx b/src/core/client/stream/components/Indent.spec.tsx
new file mode 100644
index 000000000..3108ba209
--- /dev/null
+++ b/src/core/client/stream/components/Indent.spec.tsx
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Indent from "./Indent";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Indent> = {
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<Indent {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Indent.tsx b/src/core/client/stream/components/Indent.tsx
new file mode 100644
index 000000000..7ea8fddf3
--- /dev/null
+++ b/src/core/client/stream/components/Indent.tsx
@@ -0,0 +1,15 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+
+import * as styles from "./Indent.css";
+
+export interface IndentProps {
+  level?: number;
+  children: React.ReactNode;
+}
+
+const Indent: StatelessComponent<IndentProps> = props => {
+  return <div className={cn(styles.root, styles.level0)}>{props.children}</div>;
+};
+
+export default Indent;
diff --git a/src/core/client/stream/components/Permalink.tsx b/src/core/client/stream/components/Permalink.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/stream/components/PermalinkPopover.css b/src/core/client/stream/components/PermalinkPopover.css
new file mode 100644
index 000000000..2d5f33fd2
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkPopover.css
@@ -0,0 +1,13 @@
+.textField {
+  margin-right: 5px;
+}
+
+.root {
+  background-color: #ffffff;
+  border: 1px solid #c9cacb;
+  box-sizing: border-box;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 1px;
+  padding: 6px 10px;
+  display: flex;
+}
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
new file mode 100644
index 000000000..a4d8feca2
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -0,0 +1,60 @@
+import { Localized } from "fluent-react/compat";
+import React, { CSSProperties } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { RefHandler } from "react-popper";
+import { Button, TextField } from "talk-ui/components";
+import * as styles from "./PermalinkPopover.css";
+
+interface InnerProps {
+  commentId: string;
+  style?: CSSProperties;
+  innerRef?: RefHandler;
+}
+
+interface State {
+  copied: boolean;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
+  public state: State = {
+    copied: false,
+  };
+
+  public onCopy = async () => {
+    await this.toggleCopied();
+    setTimeout(() => {
+      this.toggleCopied();
+    }, 800);
+  };
+
+  public toggleCopied = () => {
+    this.setState((state: State) => ({
+      copied: !state.copied,
+    }));
+  };
+
+  public render() {
+    const { commentId, style, innerRef } = this.props;
+    const { copied } = this.state;
+    return (
+      <div className={styles.root} style={style} ref={innerRef}>
+        <TextField defaultValue={commentId} className={styles.textField} />
+        <CopyToClipboard text={commentId} onCopy={this.onCopy}>
+          <Button primary>
+            {copied ? (
+              <Localized id="comments-permalink-copied">
+                <span>Copied!</span>
+              </Localized>
+            ) : (
+              <Localized id="comments-permalink-copy">
+                <span>Copy</span>
+              </Localized>
+            )}
+          </Button>
+        </CopyToClipboard>
+      </div>
+    );
+  }
+}
+
+export default PermalinkPopover;
diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index a536dcc8b..df045285d 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/src/core/client/stream/components/PostCommentForm.css
@@ -3,10 +3,12 @@
 
   display: block;
   height: 100px;
-  width: 400px;
-  margin-bottom: calc(2px * $spacing-unit);
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: var(--spacing-unit);
 }
 
-.postButton {
-  float: right;
+.postButtonContainer {
+  display: flex;
+  justify-content: flex-end;
 }
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 2187994be..09db70e39 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -39,11 +39,13 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             </div>
           )}
         </Field>
-        <Localized id="postCommentForm-submit">
-          <Button className={styles.postButton} disabled={submitting} primary>
-            Post
-          </Button>
-        </Localized>
+        <div className={styles.postButtonContainer}>
+          <Localized id="comments-postCommentForm-post">
+            <Button disabled={submitting} primary>
+              Post
+            </Button>
+          </Localized>
+        </div>
       </form>
     )}
   </Form>
diff --git a/src/core/client/stream/components/ReplyList.spec.tsx b/src/core/client/stream/components/ReplyList.spec.tsx
new file mode 100644
index 000000000..093d96049
--- /dev/null
+++ b/src/core/client/stream/components/ReplyList.spec.tsx
@@ -0,0 +1,42 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+import sinon, { SinonSpy } from "sinon";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ReplyList from "./ReplyList";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ReplyList> = {
+    commentID: "comment-id",
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onShowAll: noop,
+    hasMore: false,
+    disableShowAll: false,
+  };
+  const wrapper = shallow(<ReplyList {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when there is more", () => {
+  const props: PropTypesOf<typeof ReplyList> = {
+    commentID: "comment-id",
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onShowAll: sinon.spy(),
+    hasMore: true,
+    disableShowAll: false,
+  };
+
+  const wrapper = shallow(<ReplyList {...props} />);
+  it("renders a load more button", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("calls onLoadMore", () => {
+    wrapper
+      .find("#talk-comments-replyList-showAll--comment-id")
+      .simulate("click");
+    expect((props.onShowAll as SinonSpy).calledOnce).toBe(true);
+  });
+});
diff --git a/src/core/client/stream/components/ReplyList.tsx b/src/core/client/stream/components/ReplyList.tsx
new file mode 100644
index 000000000..17ad32ed2
--- /dev/null
+++ b/src/core/client/stream/components/ReplyList.tsx
@@ -0,0 +1,50 @@
+import { Localized } from "fluent-react/compat";
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { Button, Flex } from "talk-ui/components";
+
+import CommentContainer from "../containers/CommentContainer";
+import Indent from "./Indent";
+
+export interface ReplyListProps {
+  commentID: string;
+  comments: ReadonlyArray<{ id: string }>;
+  onShowAll: () => void;
+  hasMore: boolean;
+  disableShowAll: boolean;
+}
+
+const ReplyList: StatelessComponent<ReplyListProps> = props => {
+  return (
+    <Indent>
+      <Flex
+        direction="column"
+        id={`talk-comments-replyList-log--${props.commentID}`}
+        role="log"
+        itemGutter
+      >
+        {props.comments.map(comment => (
+          <CommentContainer key={comment.id} data={comment} />
+        ))}
+        {props.hasMore && (
+          <Localized id="comments-replyList-showAll">
+            <Button
+              id={`talk-comments-replyList-showAll--${props.commentID}`}
+              aria-controls={`talk-comments-replyList-log--${props.commentID}`}
+              onClick={props.onShowAll}
+              disabled={props.disableShowAll}
+              secondary
+              invert
+              fullWidth
+            >
+              Show All Replies
+            </Button>
+          </Localized>
+        )}
+      </Flex>
+    </Indent>
+  );
+};
+
+export default ReplyList;
diff --git a/src/core/client/stream/components/Stream.css b/src/core/client/stream/components/Stream.css
new file mode 100644
index 000000000..13c90d031
--- /dev/null
+++ b/src/core/client/stream/components/Stream.css
@@ -0,0 +1,4 @@
+.root {
+  width: 100%;
+  max-width: 400px;
+}
diff --git a/src/core/client/stream/components/Stream.spec.tsx b/src/core/client/stream/components/Stream.spec.tsx
new file mode 100644
index 000000000..335f8fe27
--- /dev/null
+++ b/src/core/client/stream/components/Stream.spec.tsx
@@ -0,0 +1,47 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+import sinon, { SinonSpy } from "sinon";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Stream from "./Stream";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Stream> = {
+    assetID: "asset-id",
+    isClosed: false,
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onLoadMore: noop,
+    disableLoadMore: false,
+    hasMore: false,
+  };
+  const wrapper = shallow(<Stream {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when there is more", () => {
+  const props: PropTypesOf<typeof Stream> = {
+    assetID: "asset-id",
+    isClosed: false,
+    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    onLoadMore: sinon.spy(),
+    disableLoadMore: false,
+    hasMore: true,
+  };
+
+  const wrapper = shallow(<Stream {...props} />);
+  it("renders a load more button", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("calls onLoadMore", () => {
+    wrapper.find("#talk-comments-stream-loadMore").simulate("click");
+    expect((props.onLoadMore as SinonSpy).calledOnce).toBe(true);
+  });
+
+  const wrapperDisabledButton = shallow(<Stream {...props} disableLoadMore />);
+  it("disables load more button", () => {
+    expect(wrapperDisabledButton).toMatchSnapshot();
+  });
+});
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index c42bb21b3..da55050f5 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -1,18 +1,58 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
+import { Button, Flex } from "talk-ui/components";
+
 import CommentContainer from "../containers/CommentContainer";
+import PostCommentFormContainer from "../containers/PostCommentFormContainer";
+import ReplyListContainer from "../containers/ReplyListContainer";
+import Logo from "./Logo";
+import * as styles from "./Stream.css";
 
 export interface StreamProps {
+  assetID: string;
+  isClosed: boolean;
   comments: ReadonlyArray<{ id: string }>;
+  onLoadMore: () => void;
+  hasMore: boolean;
+  disableLoadMore: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <div>
-      {props.comments.map(comment => (
-        <CommentContainer key={comment.id} data={comment} gutterBottom />
-      ))}
+    <div className={styles.root}>
+      <Logo gutterBottom />
+      <PostCommentFormContainer assetID={props.assetID} />
+      <Flex
+        direction="column"
+        id="talk-comments-stream-log"
+        role="log"
+        aria-live="polite"
+        itemGutter
+      >
+        {props.comments.map(comment => (
+          <Flex direction="column" key={comment.id} itemGutter>
+            <CommentContainer data={comment} />
+            <ReplyListContainer comment={comment} />
+          </Flex>
+        ))}
+        {props.hasMore && (
+          <Localized id="comments-stream-loadMore">
+            <Button
+              id={"talk-comments-stream-loadMore"}
+              onClick={props.onLoadMore}
+              secondary
+              invert
+              fullWidth
+              disabled={props.disableLoadMore}
+              aria-controls="talk-comments-stream-log"
+            >
+              Load More
+            </Button>
+          </Localized>
+        )}
+      </Flex>
     </div>
   );
 };
diff --git a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
new file mode 100644
index 000000000..6a12e4e09
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Flex
+  className="App-root"
+  justifyContent="center"
+>
+  <Relay(StreamContainer)
+    asset={Object {}}
+  />
+</Flex>
+`;
+
+exports[`renders correctly when asset is null 1`] = `
+<div>
+  Asset not found 
+</div>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
new file mode 100644
index 000000000..910c819b2
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Indent-root Indent-level0"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
new file mode 100644
index 000000000..e48482470
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Indent>
+  <Flex
+    direction="column"
+    id="talk-comments-replyList-log--comment-id"
+    itemGutter={true}
+    role="log"
+  >
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-1",
+        }
+      }
+      key="comment-1"
+    />
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-2",
+        }
+      }
+      key="comment-2"
+    />
+  </Flex>
+</Indent>
+`;
+
+exports[`when there is more renders a load more button 1`] = `
+<Indent>
+  <Flex
+    direction="column"
+    id="talk-comments-replyList-log--comment-id"
+    itemGutter={true}
+    role="log"
+  >
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-1",
+        }
+      }
+      key="comment-1"
+    />
+    <Relay(CommentContainer)
+      data={
+        Object {
+          "id": "comment-2",
+        }
+      }
+      key="comment-2"
+    />
+    <Localized
+      id="comments-replyList-showAll"
+    >
+      <withPropsOnChange(Button)
+        aria-controls="talk-comments-replyList-log--comment-id"
+        disabled={false}
+        fullWidth={true}
+        id="talk-comments-replyList-showAll--comment-id"
+        invert={true}
+        onClick={[Function]}
+        secondary={true}
+      >
+        Show All Replies
+      </withPropsOnChange(Button)>
+    </Localized>
+  </Flex>
+</Indent>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
new file mode 100644
index 000000000..a8210fd99
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
@@ -0,0 +1,214 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Stream-root"
+>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Flex
+    aria-live="polite"
+    direction="column"
+    id="talk-comments-stream-log"
+    itemGutter={true}
+    role="log"
+  >
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </Flex>
+  </Flex>
+</div>
+`;
+
+exports[`when there is more disables load more button 1`] = `
+<div
+  className="Stream-root"
+>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Flex
+    aria-live="polite"
+    direction="column"
+    id="talk-comments-stream-log"
+    itemGutter={true}
+    role="log"
+  >
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </Flex>
+    <Localized
+      id="comments-stream-loadMore"
+    >
+      <withPropsOnChange(Button)
+        aria-controls="talk-comments-stream-log"
+        disabled={true}
+        fullWidth={true}
+        id="talk-comments-stream-loadMore"
+        invert={true}
+        onClick={[Function]}
+        secondary={true}
+      >
+        Load More
+      </withPropsOnChange(Button)>
+    </Localized>
+  </Flex>
+</div>
+`;
+
+exports[`when there is more renders a load more button 1`] = `
+<div
+  className="Stream-root"
+>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Flex
+    aria-live="polite"
+    direction="column"
+    id="talk-comments-stream-log"
+    itemGutter={true}
+    role="log"
+  >
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-1"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-1",
+          }
+        }
+      />
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
+      key="comment-2"
+    >
+      <Relay(CommentContainer)
+        data={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+      <Relay(ReplyListContainer)
+        comment={
+          Object {
+            "id": "comment-2",
+          }
+        }
+      />
+    </Flex>
+    <Localized
+      id="comments-stream-loadMore"
+    >
+      <withPropsOnChange(Button)
+        aria-controls="talk-comments-stream-log"
+        disabled={false}
+        fullWidth={true}
+        id="talk-comments-stream-loadMore"
+        invert={true}
+        onClick={[Function]}
+        secondary={true}
+      >
+        Load More
+      </withPropsOnChange(Button)>
+    </Localized>
+  </Flex>
+</div>
+`;
diff --git a/src/core/client/stream/containers/AppContainer.spec.tsx b/src/core/client/stream/containers/AppContainer.spec.tsx
new file mode 100644
index 000000000..17a0a676d
--- /dev/null
+++ b/src/core/client/stream/containers/AppContainer.spec.tsx
@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { AppContainer } from "./AppContainer";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof AppContainer> = {
+    data: {
+      asset: {},
+    },
+  };
+  const wrapper = shallow(<AppContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index 02abbf314..90eb1e1c6 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -11,30 +11,20 @@ interface InnerProps {
   data: Data;
 }
 
-const AppContainer: StatelessComponent<InnerProps> = props => {
+export const AppContainer: StatelessComponent<InnerProps> = props => {
   return <App {...props.data} />;
 };
 
-const enhanced = withFragmentContainer<{ data: Data }>(
-  graphql`
+const enhanced = withFragmentContainer<{ data: Data }>({
+  data: graphql`
     fragment AppContainer on Query
-      @argumentDefinitions(
-        assetID: { type: "ID!" }
-        showAssetList: { type: "Boolean!" }
-      ) {
-      assets @include(if: $showAssetList) {
-        ...AssetListContainer_assets
-      }
-      asset(id: $assetID) @skip(if: $showAssetList) {
-        id
-        isClosed
-        comments {
-          ...StreamContainer_comments
-        }
+      @argumentDefinitions(assetID: { type: "ID!" }) {
+      asset(id: $assetID) {
+        ...StreamContainer_asset
       }
     }
-  `
-)(AppContainer);
+  `,
+})(AppContainer);
 
 export type AppContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/stream/containers/AssetListContainer.tsx b/src/core/client/stream/containers/AssetListContainer.tsx
deleted file mode 100644
index 6e441f00e..000000000
--- a/src/core/client/stream/containers/AssetListContainer.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { StatelessComponent } from "react";
-import { graphql } from "react-relay";
-
-import { withFragmentContainer } from "talk-framework/lib/relay";
-import { PropTypesOf } from "talk-framework/types";
-import { AssetListContainer_assets as Data } from "talk-stream/__generated__/AssetListContainer_assets.graphql";
-
-import AssetList from "../components/AssetList";
-
-interface InnerProps {
-  assets: Data;
-}
-
-const AssetListContainer: StatelessComponent<InnerProps> = props => {
-  const assets = props.assets.edges.map(edge => edge.node);
-  return <AssetList assets={assets} />;
-};
-
-const enhanced = withFragmentContainer<{ assets: Data }>(
-  graphql`
-    fragment AssetListContainer_assets on AssetsConnection {
-      edges {
-        node {
-          id
-          title
-        }
-      }
-    }
-  `
-)(AssetListContainer);
-
-export type AssetListContainerProps = PropTypesOf<typeof enhanced>;
-export default enhanced;
diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
new file mode 100644
index 000000000..98612be38
--- /dev/null
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -0,0 +1,21 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { CommentContainer } from "./CommentContainer";
+
+it("renders username and body", () => {
+  const props: PropTypesOf<typeof CommentContainer> = {
+    data: {
+      author: {
+        username: "Marvin",
+      },
+      body: "Woof",
+      createdAt: "1995-12-17T03:24:00.000Z",
+    },
+  };
+
+  const wrapper = shallow(<CommentContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 9a4d03cd8..0316112d1 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -2,28 +2,39 @@ import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
 
 import withFragmentContainer from "talk-framework/lib/relay/withFragmentContainer";
-import { Omit, PropTypesOf } from "talk-framework/types";
+import { PropTypesOf } from "talk-framework/types";
 import { CommentContainer as Data } from "talk-stream/__generated__/CommentContainer.graphql";
 
-import Comment, { CommentProps } from "../components/Comment";
+import Comment from "../components/Comment";
 
-type InnerProps = { data: Data } & Omit<CommentProps, keyof Data>;
+interface InnerProps {
+  data: Data;
+}
 
-const CommentContainer: StatelessComponent<InnerProps> = props => {
+// tslint:disable-next-line:no-unused-expression
+graphql`
+  fragment CommentContainer_comment on Comment {
+    id
+    author {
+      username
+    }
+    body
+    createdAt
+  }
+`;
+
+export const CommentContainer: StatelessComponent<InnerProps> = props => {
   const { data, ...rest } = props;
   return <Comment {...rest} {...props.data} />;
 };
 
-const enhanced = withFragmentContainer<{ data: Data }>(
-  graphql`
+const enhanced = withFragmentContainer<{ data: Data }>({
+  data: graphql`
     fragment CommentContainer on Comment {
-      author {
-        username
-      }
-      body
+      ...CommentContainer_comment @relay(mask: false)
     }
-  `
-)(CommentContainer);
+  `,
+})(CommentContainer);
 
 export type CommentContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/stream/containers/PostCommentFormContainer.tsx b/src/core/client/stream/containers/PostCommentFormContainer.tsx
index d2da26f64..bf4ab8cf9 100644
--- a/src/core/client/stream/containers/PostCommentFormContainer.tsx
+++ b/src/core/client/stream/containers/PostCommentFormContainer.tsx
@@ -25,6 +25,8 @@ class PostCommentFormContainer extends Component<InnerProps> {
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
       }
+      // tslint:disable-next-line:no-console
+      console.error(error);
     }
     return undefined;
   };
diff --git a/src/core/client/stream/containers/ReplyListContainer.spec.tsx b/src/core/client/stream/containers/ReplyListContainer.spec.tsx
new file mode 100644
index 000000000..3a414dd51
--- /dev/null
+++ b/src/core/client/stream/containers/ReplyListContainer.spec.tsx
@@ -0,0 +1,86 @@
+import { shallow, ShallowWrapper } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ReplyList from "../components/ReplyList";
+import { ReplyListContainer } from "./ReplyListContainer";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ReplyListContainer> = {
+    comment: {
+      id: "comment-id",
+      replies: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: noop,
+      isLoading: noop,
+    } as any,
+  };
+  const wrapper = shallow(<ReplyListContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders correctly when replies are null", () => {
+  const props: PropTypesOf<typeof ReplyListContainer> = {
+    comment: {
+      id: "comment-id",
+      replies: null,
+    },
+    relay: {
+      hasMore: noop,
+      isLoading: noop,
+    } as any,
+  };
+  const wrapper = shallow(<ReplyListContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when has more replies", () => {
+  let finishLoading: ((error?: Error) => void) | null = null;
+  const props: PropTypesOf<ReplyListContainer> = {
+    comment: {
+      id: "comment-id",
+      replies: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: () => true,
+      isLoading: () => false,
+      loadMore: (_: any, callback: () => void) => (finishLoading = callback),
+    } as any,
+  };
+
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => (wrapper = shallow(<ReplyListContainer {...props} />)));
+
+  it("renders hasMore", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe("when showing all", () => {
+    beforeAll(() => {
+      wrapper
+        .find(ReplyList)
+        .props()
+        .onShowAll();
+    });
+    it("calls relay loadMore", () => {
+      expect(finishLoading).not.toBeNull();
+    });
+    it("disables show all button", () => {
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+    it("enable show all button after loading is done", () => {
+      finishLoading!();
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/core/client/stream/containers/ReplyListContainer.tsx b/src/core/client/stream/containers/ReplyListContainer.tsx
new file mode 100644
index 000000000..48db9645a
--- /dev/null
+++ b/src/core/client/stream/containers/ReplyListContainer.tsx
@@ -0,0 +1,135 @@
+import React from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import { withPaginationContainer } from "talk-framework/lib/relay";
+import { PropTypesOf } from "talk-framework/types";
+import { ReplyListContainer_comment as Data } from "talk-stream/__generated__/ReplyListContainer_comment.graphql";
+import {
+  COMMENT_SORT,
+  ReplyListContainerPaginationQueryVariables,
+} from "talk-stream/__generated__/ReplyListContainerPaginationQuery.graphql";
+
+import ReplyList from "../components/ReplyList";
+
+export interface InnerProps {
+  comment: Data;
+  relay: RelayPaginationProp;
+}
+
+export class ReplyListContainer extends React.Component<InnerProps> {
+  public state = {
+    disableShowAll: false,
+  };
+
+  public render() {
+    if (
+      this.props.comment.replies === null ||
+      this.props.comment.replies.edges.length === 0
+    ) {
+      return null;
+    }
+    const comments = this.props.comment.replies.edges.map(edge => edge.node);
+    return (
+      <ReplyList
+        commentID={this.props.comment.id}
+        comments={comments}
+        onShowAll={this.showAll}
+        hasMore={this.props.relay.hasMore()}
+        disableShowAll={this.state.disableShowAll}
+      />
+    );
+  }
+
+  private showAll = () => {
+    if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
+      return;
+    }
+
+    this.setState({ disableShowAll: true });
+    this.props.relay.loadMore(
+      999999999, // Fetch All Replies
+      error => {
+        this.setState({ disableShowAll: false });
+        if (error) {
+          // tslint:disable-next-line:no-console
+          console.error(error);
+        }
+      }
+    );
+  };
+}
+
+// TODO: (cvle) This should be autogenerated.
+interface FragmentVariables {
+  count: number;
+  cursor?: string;
+  orderBy: COMMENT_SORT;
+}
+
+const enhanced = withPaginationContainer<
+  { comment: Data },
+  InnerProps,
+  FragmentVariables,
+  ReplyListContainerPaginationQueryVariables
+>(
+  {
+    comment: graphql`
+      fragment ReplyListContainer_comment on Comment
+        @argumentDefinitions(
+          count: { type: "Int!", defaultValue: 5 }
+          cursor: { type: "Cursor" }
+          orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_ASC }
+        ) {
+        id
+        replies(first: $count, after: $cursor, orderBy: $orderBy)
+          @connection(key: "ReplyList_replies") {
+          edges {
+            node {
+              id
+              ...CommentContainer
+            }
+          }
+        }
+      }
+    `,
+  },
+  {
+    direction: "forward",
+    getConnectionFromProps(props) {
+      return props.comment && props.comment.replies;
+    },
+    // This is also the default implementation of `getFragmentVariables` if it isn't provided.
+    getFragmentVariables(prevVars, totalCount) {
+      return {
+        ...prevVars,
+        count: totalCount,
+      };
+    },
+    getVariables(props, { count, cursor }, fragmentVariables) {
+      return {
+        count,
+        cursor,
+        orderBy: fragmentVariables.orderBy,
+        commentID: props.comment.id,
+      };
+    },
+    query: graphql`
+      # Pagination query to be fetched upon calling 'loadMore'.
+      # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
+      query ReplyListContainerPaginationQuery(
+        $count: Int!
+        $cursor: Cursor
+        $orderBy: COMMENT_SORT!
+        $commentID: ID!
+      ) {
+        comment(id: $commentID) {
+          ...ReplyListContainer_comment
+            @arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
+        }
+      }
+    `,
+  }
+)(ReplyListContainer);
+
+export type ReplyListContainerProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/stream/containers/StreamContainer.spec.tsx b/src/core/client/stream/containers/StreamContainer.spec.tsx
new file mode 100644
index 000000000..2e19bda86
--- /dev/null
+++ b/src/core/client/stream/containers/StreamContainer.spec.tsx
@@ -0,0 +1,73 @@
+import { shallow, ShallowWrapper } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Stream from "../components/Stream";
+import { StreamContainer } from "./StreamContainer";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<StreamContainer> = {
+    asset: {
+      id: "asset-id",
+      isClosed: false,
+      comments: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: noop,
+      isLoading: noop,
+    } as any,
+  };
+  const wrapper = shallow(<StreamContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+describe("when has more comments", () => {
+  let finishLoading: ((error?: Error) => void) | null = null;
+  const props: PropTypesOf<StreamContainer> = {
+    asset: {
+      id: "asset-id",
+      isClosed: false,
+      comments: {
+        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
+      },
+    },
+    relay: {
+      hasMore: () => true,
+      isLoading: () => false,
+      loadMore: (_: any, callback: () => void) => (finishLoading = callback),
+    } as any,
+  };
+
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => (wrapper = shallow(<StreamContainer {...props} />)));
+
+  it("renders hasMore", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe("when loading more", () => {
+    beforeAll(() => {
+      wrapper
+        .find(Stream)
+        .props()
+        .onLoadMore();
+    });
+    it("calls relay loadMore", () => {
+      expect(finishLoading).not.toBeNull();
+    });
+    it("disables load more button", () => {
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+    it("enable load more button after loading is done", () => {
+      finishLoading!();
+      wrapper.update();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx
index 771c25efa..d81319deb 100644
--- a/src/core/client/stream/containers/StreamContainer.tsx
+++ b/src/core/client/stream/containers/StreamContainer.tsx
@@ -1,32 +1,132 @@
-import React, { StatelessComponent } from "react";
-import { graphql } from "react-relay";
+import React from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
 
-import { withFragmentContainer } from "talk-framework/lib/relay";
+import { withPaginationContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
-import { StreamContainer_comments as Data } from "talk-stream/__generated__/StreamContainer_comments.graphql";
+import { StreamContainer_asset as Data } from "talk-stream/__generated__/StreamContainer_asset.graphql";
+import {
+  COMMENT_SORT,
+  StreamContainerPaginationQueryVariables,
+} from "talk-stream/__generated__/StreamContainerPaginationQuery.graphql";
 
 import Stream from "../components/Stream";
 
 interface InnerProps {
-  comments: Data;
+  asset: Data;
+  relay: RelayPaginationProp;
 }
 
-const StreamContainer: StatelessComponent<InnerProps> = props => {
-  const comments = props.comments.edges.map(edge => edge.node);
-  return <Stream comments={comments} />;
-};
+export class StreamContainer extends React.Component<InnerProps> {
+  public state = {
+    disableLoadMore: false,
+  };
 
-const enhanced = withFragmentContainer<{ comments: Data }>(
-  graphql`
-    fragment StreamContainer_comments on CommentsConnection {
-      edges {
-        node {
-          id
-          ...CommentContainer
+  public render() {
+    const comments = this.props.asset.comments.edges.map(edge => edge.node);
+    return (
+      <Stream
+        assetID={this.props.asset.id}
+        isClosed={this.props.asset.isClosed}
+        comments={comments}
+        onLoadMore={this.loadMore}
+        hasMore={this.props.relay.hasMore()}
+        disableLoadMore={this.state.disableLoadMore}
+      />
+    );
+  }
+
+  private loadMore = () => {
+    if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
+      return;
+    }
+    this.setState({ disableLoadMore: true });
+    this.props.relay.loadMore(
+      10, // Fetch the next 10 feed items
+      error => {
+        this.setState({ disableLoadMore: false });
+        if (error) {
+          // tslint:disable-next-line:no-console
+          console.error(error);
         }
       }
-    }
-  `
+    );
+  };
+}
+
+// TODO: (cvle) This should be autogenerated.
+interface FragmentVariables {
+  count: number;
+  cursor?: string;
+  orderBy: COMMENT_SORT;
+}
+
+const enhanced = withPaginationContainer<
+  { asset: Data },
+  InnerProps,
+  FragmentVariables,
+  StreamContainerPaginationQueryVariables
+>(
+  {
+    asset: graphql`
+      fragment StreamContainer_asset on Asset
+        @argumentDefinitions(
+          count: { type: "Int!", defaultValue: 5 }
+          cursor: { type: "Cursor" }
+          orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
+        ) {
+        id
+        isClosed
+        comments(first: $count, after: $cursor, orderBy: $orderBy)
+          @connection(key: "Stream_comments") {
+          edges {
+            node {
+              id
+              ...CommentContainer
+              ...ReplyListContainer_comment
+            }
+          }
+        }
+      }
+    `,
+  },
+  {
+    direction: "forward",
+    getConnectionFromProps(props) {
+      return props.asset && props.asset.comments;
+    },
+    // This is also the default implementation of `getFragmentVariables` if it isn't provided.
+    getFragmentVariables(prevVars, totalCount) {
+      return {
+        ...prevVars,
+        count: totalCount,
+      };
+    },
+    getVariables(props, { count, cursor }, fragmentVariables) {
+      return {
+        count,
+        cursor,
+        orderBy: fragmentVariables.orderBy,
+        // assetID isn't specified as an @argument for the fragment, but it should be a
+        // variable available for the fragment under the query root.
+        assetID: props.asset.id,
+      };
+    },
+    query: graphql`
+      # Pagination query to be fetched upon calling 'loadMore'.
+      # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
+      query StreamContainerPaginationQuery(
+        $count: Int!
+        $cursor: Cursor
+        $orderBy: COMMENT_SORT!
+        $assetID: ID!
+      ) {
+        asset(id: $assetID) {
+          ...StreamContainer_asset
+            @arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
+        }
+      }
+    `,
+  }
 )(StreamContainer);
 
 export type StreamContainerProps = PropTypesOf<typeof enhanced>;
diff --git a/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
new file mode 100644
index 000000000..f9a5c5316
--- /dev/null
+++ b/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<App
+  asset={Object {}}
+/>
+`;
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
new file mode 100644
index 000000000..9e2476f37
--- /dev/null
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders username and body 1`] = `
+<Comment
+  author={
+    Object {
+      "username": "Marvin",
+    }
+  }
+  body="Woof"
+  createdAt="1995-12-17T03:24:00.000Z"
+/>
+`;
diff --git a/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
new file mode 100644
index 000000000..52aa9c57b
--- /dev/null
+++ b/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={false}
+  onShowAll={[Function]}
+/>
+`;
+
+exports[`renders correctly when replies are null 1`] = `""`;
+
+exports[`when has more replies renders hasMore 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={false}
+  hasMore={true}
+  onShowAll={[Function]}
+/>
+`;
+
+exports[`when has more replies when showing all disables show all button 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={true}
+  hasMore={true}
+  onShowAll={[Function]}
+/>
+`;
+
+exports[`when has more replies when showing all enable show all button after loading is done 1`] = `
+<ReplyList
+  commentID="comment-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableShowAll={false}
+  hasMore={true}
+  onShowAll={[Function]}
+/>
+`;
diff --git a/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
new file mode 100644
index 000000000..e3813397c
--- /dev/null
+++ b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={false}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
+
+exports[`when has more comments renders hasMore 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={false}
+  hasMore={true}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
+
+exports[`when has more comments when loading more disables load more button 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={true}
+  hasMore={true}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
+
+exports[`when has more comments when loading more enable load more button after loading is done 1`] = `
+<Stream
+  assetID="asset-id"
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  disableLoadMore={false}
+  hasMore={true}
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;
diff --git a/src/core/client/stream/queries/AppQuery.spec.tsx b/src/core/client/stream/queries/AppQuery.spec.tsx
new file mode 100644
index 000000000..a301a76b7
--- /dev/null
+++ b/src/core/client/stream/queries/AppQuery.spec.tsx
@@ -0,0 +1,31 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { render } from "./AppQuery";
+
+it("renders app", () => {
+  const data = {
+    props: {} as any,
+    error: null,
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders loading", () => {
+  const data = {
+    props: null,
+    error: null,
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders error", () => {
+  const data = {
+    props: null,
+    error: new Error("error"),
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 4dc61115c..3fe95b6d9 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
+import { ReadyState } from "react-relay";
 
 import {
   graphql,
   QueryRenderer,
-  ReadyState,
   withLocalStateContainer,
 } from "talk-framework/lib/relay";
 import {
@@ -15,7 +15,7 @@ import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.
 
 import AppContainer from "../containers/AppContainer";
 
-const render = ({ error, props }: ReadyState<AppQueryResponse>) => {
+export const render = ({ error, props }: ReadyState<AppQueryResponse>) => {
   if (error) {
     return <div>{error.message}</div>;
   }
@@ -33,16 +33,12 @@ const AppQuery: StatelessComponent<InnerProps> = props => {
   return (
     <QueryRenderer<AppQueryVariables, AppQueryResponse>
       query={graphql`
-        query AppQuery($showAssetList: Boolean!, $assetID: ID!) {
-          ...AppContainer
-            @arguments(showAssetList: $showAssetList, assetID: $assetID)
+        query AppQuery($assetID: ID!) {
+          ...AppContainer @arguments(assetID: $assetID)
         }
       `}
       variables={{
-        // We cast `null` to any due to restrictions of the current graphql syntax.
-        assetID: props.local.assetID || (null as any),
-        // TODO: This is set to false, as server does not support querying assets yet.
-        showAssetList: !props.local.assetID && false,
+        assetID: props.local.assetID,
       }}
       render={render}
     />
diff --git a/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
new file mode 100644
index 000000000..dbd2ad45a
--- /dev/null
+++ b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders app 1`] = `
+<Relay(AppContainer)
+  data={Object {}}
+/>
+`;
+
+exports[`renders error 1`] = `
+<div>
+  error
+</div>
+`;
+
+exports[`renders loading 1`] = `
+<div>
+  Loading
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
new file mode 100644
index 000000000..b3d193c41
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -0,0 +1,256 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loads more comments 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
+            >
+              2018-07-06T18:20:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            What's up?
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Isabelle
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:14:00.000Z"
+              title="2018-07-06T18:14:00.000Z"
+            >
+              2018-07-06T18:14:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Hey!
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
+            >
+              2018-07-06T18:20:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            What's up?
+          </p>
+        </div>
+      </div>
+      <button
+        aria-controls="talk-comments-stream-log"
+        className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
+        disabled={false}
+        id="talk-comments-stream-loadMore"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+      >
+        Load More
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
new file mode 100644
index 000000000..24fe4fe1d
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            I like yoghurt
+          </p>
+        </div>
+        <div
+          className="Indent-root Indent-level0"
+        >
+          <div
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            id="talk-comments-replyList-log--comment-with-replies"
+            role="log"
+          >
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                Joining Too
+              </p>
+            </div>
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                What's up?
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
new file mode 100644
index 000000000..3a3599547
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+      </div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
+            >
+              2018-07-06T18:20:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            What's up?
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
new file mode 100644
index 000000000..2762b7dae
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -0,0 +1,264 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+        <div
+          className="Indent-root Indent-level0"
+        >
+          <div
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
+          >
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                What's up?
+              </p>
+            </div>
+            <button
+              aria-controls="talk-comments-replyList-log--comment-0"
+              className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
+              disabled={false}
+              id="talk-comments-replyList-showAll--comment-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+            >
+              Show All Replies
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`show all replies 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <h1
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
+    >
+      Talk NEO
+    </h1>
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-primary"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-body1"
+          >
+            Joining Too
+          </p>
+        </div>
+        <div
+          className="Indent-root Indent-level0"
+        >
+          <div
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
+          >
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                What's up?
+              </p>
+            </div>
+            <div
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Username-root"
+                >
+                  Isabelle
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:14:00.000Z"
+                  title="2018-07-06T18:14:00.000Z"
+                >
+                  2018-07-06T18:14:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-body1"
+              >
+                Hey!
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/createEnvironment.ts b/src/core/client/stream/test/createEnvironment.ts
new file mode 100644
index 000000000..0276c0b4e
--- /dev/null
+++ b/src/core/client/stream/test/createEnvironment.ts
@@ -0,0 +1,49 @@
+import { IResolvers } from "graphql-tools";
+import { createFetch } from "relay-local-schema";
+import {
+  commitLocalUpdate,
+  Environment,
+  Network,
+  RecordProxy,
+  RecordSource,
+  Store,
+} from "relay-runtime";
+
+import { loadSchema } from "talk-common/graphql";
+import {
+  createAndRetain,
+  LOCAL_ID,
+  LOCAL_TYPE,
+  wrapFetchWithLogger,
+} from "talk-framework/lib/relay";
+
+export interface CreateEnvironmentParams {
+  /** graphql resolvers */
+  resolvers: IResolvers<any, any>;
+  /** Allows to set initial state for Local state */
+  initLocalState?: (local: RecordProxy) => void;
+  /** If enabled, graphql responses will be logged to the console */
+  logNetwork?: boolean;
+}
+
+/**
+ * create Relay environment for integration tests.
+ */
+export default function createEnvironment(params: CreateEnvironmentParams) {
+  const schema = loadSchema("tenant", params.resolvers);
+  const environment = new Environment({
+    network: Network.create(
+      wrapFetchWithLogger(createFetch({ schema }), params.logNetwork)
+    ),
+    store: new Store(new RecordSource()),
+  });
+  if (params.initLocalState) {
+    commitLocalUpdate(environment, s => {
+      const root = s.getRoot();
+      const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
+      root.setLinkedRecord(localRecord, "local");
+      params.initLocalState!(localRecord);
+    });
+  }
+  return environment;
+}
diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
new file mode 100644
index 000000000..aa14af2e2
--- /dev/null
+++ b/src/core/client/stream/test/fixtures.ts
@@ -0,0 +1,81 @@
+export const users = [
+  {
+    id: "user-0",
+    username: "Markus",
+  },
+  {
+    id: "user-1",
+    username: "Lukas",
+  },
+  {
+    id: "user-2",
+    username: "Isabelle",
+  },
+];
+
+export const comments = [
+  {
+    id: "comment-0",
+    author: users[0],
+    body: "Joining Too",
+    createdAt: "2018-07-06T18:24:00.000Z",
+  },
+  {
+    id: "comment-1",
+    author: users[1],
+    body: "What's up?",
+    createdAt: "2018-07-06T18:20:00.000Z",
+  },
+  {
+    id: "comment-2",
+    author: users[2],
+    body: "Hey!",
+    createdAt: "2018-07-06T18:14:00.000Z",
+  },
+];
+
+export const assets = [
+  {
+    id: "asset-1",
+    isClosed: false,
+    comments: {
+      edges: [
+        { node: comments[0], cursor: comments[0].createdAt },
+        { node: comments[1], cursor: comments[1].createdAt },
+      ],
+      pageInfo: {
+        hasNextPage: false,
+      },
+    },
+  },
+];
+
+export const commentWithReplies = {
+  id: "comment-with-replies",
+  author: users[0],
+  body: "I like yoghurt",
+  createdAt: "2018-07-06T18:24:00.000Z",
+  replies: {
+    edges: [
+      { node: comments[0], cursor: comments[0].createdAt },
+      { node: comments[1], cursor: comments[1].createdAt },
+    ],
+    pageInfo: {
+      hasNextPage: false,
+    },
+  },
+};
+
+export const assetWithReplies = {
+  id: "asset-with-replies",
+  isClosed: false,
+  comments: {
+    edges: [
+      { node: comments[0], cursor: comments[0].createdAt },
+      { node: commentWithReplies, cursor: commentWithReplies.createdAt },
+    ],
+    pageInfo: {
+      hasNextPage: false,
+    },
+  },
+};
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx
new file mode 100644
index 000000000..6f63edcfc
--- /dev/null
+++ b/src/core/client/stream/test/loadMore.spec.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppQuery from "talk-stream/queries/AppQuery";
+
+import createEnvironment from "./createEnvironment";
+import { assets, comments } from "./fixtures";
+
+const connectionStub = sinon.stub().throws();
+connectionStub.withArgs({ first: 5, orderBy: "CREATED_AT_DESC" }).returns({
+  edges: [
+    {
+      node: comments[0],
+      cursor: comments[0].createdAt,
+    },
+    {
+      node: comments[1],
+      cursor: comments[1].createdAt,
+    },
+  ],
+  pageInfo: {
+    endCursor: comments[1].createdAt,
+    hasNextPage: true,
+  },
+});
+connectionStub
+  .withArgs({
+    first: 10,
+    orderBy: "CREATED_AT_DESC",
+    after: comments[1].createdAt,
+  })
+  .returns({
+    edges: [
+      {
+        node: comments[2],
+        cursor: comments[2].createdAt,
+      },
+    ],
+    pageInfo: {
+      endCursor: comments[2].createdAt,
+      hasNextPage: false,
+    },
+  });
+
+const assetStub = {
+  ...assets[0],
+  comments: connectionStub,
+};
+
+const resolvers = {
+  Query: {
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assetStub.id })
+      .returns(assetStub),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assetStub.id, "assetID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppQuery />
+  </TalkContextProvider>
+);
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("loads more comments", async () => {
+  testRenderer.root
+    .findByProps({ id: "talk-comments-stream-loadMore" })
+    .props.onClick();
+
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx
new file mode 100644
index 000000000..9c535520f
--- /dev/null
+++ b/src/core/client/stream/test/renderReplies.spec.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppQuery from "talk-stream/queries/AppQuery";
+
+import createEnvironment from "./createEnvironment";
+import { assetWithReplies } from "./fixtures";
+
+const resolvers = {
+  Query: {
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assetWithReplies.id })
+      .returns(assetWithReplies),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assetWithReplies.id, "assetID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppQuery />
+  </TalkContextProvider>
+);
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx
new file mode 100644
index 000000000..998058cce
--- /dev/null
+++ b/src/core/client/stream/test/renderStream.spec.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppQuery from "talk-stream/queries/AppQuery";
+
+import createEnvironment from "./createEnvironment";
+import { assets } from "./fixtures";
+
+const resolvers = {
+  Query: {
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assets[0].id })
+      .returns(assets[0]),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assets[0].id, "assetID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppQuery />
+  </TalkContextProvider>
+);
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx
new file mode 100644
index 000000000..3e929b5b0
--- /dev/null
+++ b/src/core/client/stream/test/showAllReplies.spec.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppQuery from "talk-stream/queries/AppQuery";
+
+import createEnvironment from "./createEnvironment";
+import { assets, comments } from "./fixtures";
+
+const connectionStub = sinon.stub().throws();
+connectionStub.withArgs({ first: 5, orderBy: "CREATED_AT_ASC" }).returns({
+  edges: [
+    {
+      node: comments[1],
+      cursor: comments[1].createdAt,
+    },
+  ],
+  pageInfo: {
+    endCursor: comments[1].createdAt,
+    hasNextPage: true,
+  },
+});
+connectionStub
+  .withArgs({
+    first: sinon.match(n => n > 10000),
+    orderBy: "CREATED_AT_ASC",
+    after: comments[1].createdAt,
+  })
+  .returns({
+    edges: [
+      {
+        node: comments[2],
+        cursor: comments[2].createdAt,
+      },
+    ],
+    pageInfo: {
+      endCursor: comments[2].createdAt,
+      hasNextPage: false,
+    },
+  });
+
+const commentStub = {
+  ...comments[0],
+  replies: connectionStub,
+};
+
+const assetStub = {
+  ...assets[0],
+  comments: {
+    pageInfo: {
+      hasNextPage: false,
+    },
+    edges: [
+      {
+        node: commentStub,
+        cursor: commentStub.createdAt,
+      },
+    ],
+  },
+};
+
+const resolvers = {
+  Query: {
+    comment: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: commentStub.id })
+      .returns(commentStub),
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assetStub.id })
+      .returns(assetStub),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assetStub.id, "assetID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppQuery />
+  </TalkContextProvider>
+);
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("show all replies", async () => {
+  testRenderer.root
+    .findByProps({ id: `talk-comments-replyList-showAll--${comments[0].id}` })
+    .props.onClick();
+
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/test/enzyme.ts b/src/core/client/test/enzyme.ts
new file mode 100644
index 000000000..7884768e1
--- /dev/null
+++ b/src/core/client/test/enzyme.ts
@@ -0,0 +1,5 @@
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+// React 16 Enzyme adapter
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/src/core/client/test/jsdom.ts b/src/core/client/test/jsdom.ts
new file mode 100644
index 000000000..9e5518731
--- /dev/null
+++ b/src/core/client/test/jsdom.ts
@@ -0,0 +1,27 @@
+import { JSDOM } from "jsdom";
+
+declare var global: any;
+
+const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
+const { window } = jsdom;
+
+function copyProps(src: any, target: any) {
+  const props = Object.getOwnPropertyNames(src)
+    .filter(prop => typeof target[prop] === "undefined")
+    .reduce(
+      (result, prop) => ({
+        ...result,
+        [prop]: Object.getOwnPropertyDescriptor(src, prop),
+      }),
+      {}
+    );
+  Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = (window as any).document;
+global.navigator = {
+  userAgent: "node.js",
+};
+
+copyProps(window, global);
diff --git a/src/core/client/test/setup.ts b/src/core/client/test/setup.ts
new file mode 100644
index 000000000..1609f2653
--- /dev/null
+++ b/src/core/client/test/setup.ts
@@ -0,0 +1,24 @@
+import "./enzyme";
+import "./jsdom";
+
+// TODO: Remove when fixed.
+// Mock React.createContext because of https://github.com/airbnb/enzyme/issues/1509.
+function mockReact() {
+  const originalReact = require.requireActual("react");
+  return {
+    ...originalReact,
+    createContext: jest.fn(defaultValue => {
+      let value = defaultValue;
+      const Provider = (props: any) => {
+        value = props.value;
+        return props.children;
+      };
+      const Consumer = (props: any) => props.children(value);
+      return {
+        Provider,
+        Consumer,
+      };
+    }),
+  };
+}
+jest.mock("react", () => mockReact());
diff --git a/src/core/client/tsconfig.json b/src/core/client/tsconfig.json
index ffb2142b6..a62cea6c5 100644
--- a/src/core/client/tsconfig.json
+++ b/src/core/client/tsconfig.json
@@ -5,40 +5,16 @@
     "module": "esnext",
     "jsx": "preserve",
     "allowJs": false,
-    "lib": [
-      "dom",
-      "es7",
-      "scripthost",
-      "es2015",
-      "esnext.asynciterable"
-    ],
+    "lib": ["dom", "es7", "scripthost", "es2015", "esnext.asynciterable"],
     "baseUrl": "./",
     "paths": {
-      "talk-admin/*": [
-        "./admin/*"
-      ],
-      "talk-stream/*": [
-        "./stream/*"
-      ],
-      "talk-framework/*": [
-        "./framework/*"
-      ],
-      "talk-ui/*": [
-        "./ui/*"
-      ],
-      "talk-common/*": [
-        "../common/*"
-      ],
-      "talk-locales/*": [
-        "../../locales/*"
-      ]
+      "talk-admin/*": ["./admin/*"],
+      "talk-stream/*": ["./stream/*"],
+      "talk-framework/*": ["./framework/*"],
+      "talk-ui/*": ["./ui/*"],
+      "talk-common/*": ["../common/*"]
     }
   },
-  "include": [
-    "./**/*",
-    "../../types/**/*.d.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
\ No newline at end of file
+  "include": ["./**/*", "../../types/**/*.d.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/src/core/client/tslint.json b/src/core/client/tslint.json
index 9abc9b921..0079a6de1 100644
--- a/src/core/client/tslint.json
+++ b/src/core/client/tslint.json
@@ -1,20 +1,13 @@
 {
-  "extends": [
-    "../../../tslint.json",
-    "tslint-react"
-  ],
+  "extends": ["../../../tslint.json", "tslint-react"],
   "rules": {
+    "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [
-      true,
-      "never"
-    ]
+    "jsx-boolean-value": [true, "never"]
   },
   "jsRules": {
+    "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [
-      true,
-      "never"
-    ]
+    "jsx-boolean-value": [true, "never"]
   }
-}
\ No newline at end of file
+}
diff --git a/src/core/client/ui/components/Attachment/Attachment.css b/src/core/client/ui/components/Attachment/Attachment.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/ui/components/Attachment/Attachment.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/ui/components/Attachment/Attachment.tsx b/src/core/client/ui/components/Attachment/Attachment.tsx
new file mode 100644
index 000000000..549787707
--- /dev/null
+++ b/src/core/client/ui/components/Attachment/Attachment.tsx
@@ -0,0 +1,62 @@
+import React, { CSSProperties } from "react";
+import { Manager, Popper, Reference, RefHandler } from "react-popper";
+
+interface RenderProps {
+  ref: RefHandler;
+  style?: CSSProperties;
+}
+
+interface InnerProps {
+  body: React.ReactElement<any> | null;
+  children: (props: RenderProps) => React.ReactElement<any>;
+  className?: string;
+  placement?:
+    | "auto-start"
+    | "auto"
+    | "auto-end"
+    | "top-start"
+    | "top"
+    | "top-end"
+    | "right-start"
+    | "right"
+    | "right-end"
+    | "bottom-end"
+    | "bottom"
+    | "bottom-start"
+    | "left-end"
+    | "left"
+    | "left-start";
+}
+
+interface Props {
+  ref: any;
+  style: CSSProperties;
+}
+
+class Attachment extends React.Component<InnerProps> {
+  public render() {
+    const { children, body, placement = "top" } = this.props;
+    return (
+      <Manager>
+        <Reference>{(props: Props) => children({ ref: props.ref })}</Reference>
+        <Popper
+          placement={placement}
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {(props: Props) =>
+            body
+              ? React.cloneElement(body, {
+                  innerRef: props.ref,
+                  style: props.style,
+                })
+              : null
+          }
+        </Popper>
+      </Manager>
+    );
+  }
+}
+
+export default Attachment;
diff --git a/src/core/client/ui/components/Attachment/index.ts b/src/core/client/ui/components/Attachment/index.ts
new file mode 100644
index 000000000..b3b8d5f4a
--- /dev/null
+++ b/src/core/client/ui/components/Attachment/index.ts
@@ -0,0 +1,2 @@
+export * from "./Attachment";
+export { default } from "./Attachment";
diff --git a/src/core/client/ui/components/BaseButton/BaseButton.tsx b/src/core/client/ui/components/BaseButton/BaseButton.tsx
index 1d97a9d0c..81819b184 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.tsx
+++ b/src/core/client/ui/components/BaseButton/BaseButton.tsx
@@ -19,6 +19,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** This is passed by the `withKeyboardFocus` HOC */
   keyboardFocus: boolean;
+
+  innerRef?: React.RefObject<HTMLDivElement> | any;
 }
 
 /**
@@ -31,6 +33,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   classes,
   keyboardFocus,
   type: typeProp,
+  innerRef,
   ...rest
 }) => {
   let Element = "button";
@@ -53,7 +56,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
     [classes.keyboardFocus]: keyboardFocus,
   });
 
-  return <Element {...rest} className={rootClassName} />;
+  return <Element {...rest} className={rootClassName} ref={innerRef} />;
 };
 
 const enhanced = withStyles(styles)(withKeyboardFocus(BaseButton));
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 4ec1a20d5..17283a819 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -1,78 +1,99 @@
 .root {
   composes: button from "talk-ui/shared/typography.css";
-  padding: 5px 20px;
-  border-radius: $round-corners;
-  background-color: transparent;
-  /* TODO: hover styles for the default button */
+
+  &:enabled,
+  &:disabled {
+    padding: 5px 20px;
+    border-radius: var(--round-corners);
+    background-color: transparent;
+    /* TODO: hover styles for the default button */
+  }
 }
 
-.fullWidth {
+.root:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.fullWidth:enabled,
+.fullWidth:disabled {
   display: block;
   width: 100%;
   box-sizing: border-box;
 }
 
-.primary {
-  background-color: $palette-primary-main;
+.primary:enabled,
+.primary:disabled {
+  background-color: var(--palette-primary-main);
   color: #fff;
+}
 
+.primary:enabled {
   &:hover {
-    background-color: $palette-primary-light;
+    background-color: var(--palette-primary-light);
   }
 
   &:active {
-    background-color: $palette-primary-lighter;
-  }
-
-  &.invert {
-    background-color: transparent;
-    border: 1px solid $palette-primary-main;
-    color: $palette-primary-main;
-
-    &:hover {
-      border-color: $palette-primary-light;
-      color: $palette-primary-light;
-    }
-
-    &:active {
-      border-color: $palette-primary-lighter;
-      color: $palette-primary-lighter;
-    }
+    background-color: var(--palette-primary-lighter);
   }
 }
 
-.secondary {
-  background-color: $palette-secondary-main;
-  color: #fff;
+.primary:enabled.invert,
+.primary:disabled.invert {
+  background-color: transparent;
+  border: 1px solid var(--palette-primary-main);
+  color: var(--palette-primary-main);
+}
 
+.primary:enabled.invert {
   &:hover {
-    background-color: $palette-secondary-light;
+    border-color: var(--palette-primary-light);
+    color: var(--palette-primary-light);
   }
 
   &:active {
-    background-color: $palette-secondary-lighter;
+    border-color: var(--palette-primary-lighter);
+    color: var(--palette-primary-lighter);
+  }
+}
+
+.secondary:enabled,
+.secondary:disabled {
+  background-color: var(--palette-secondary-main);
+  color: #fff;
+}
+
+.secondary:enabled {
+  &:hover {
+    background-color: var(--palette-secondary-light);
+  }
+  &:active {
+    background-color: var(--palette-secondary-lighter);
+  }
+}
+
+.secondary:enabled.invert,
+.secondary:disabled.invert {
+  background-color: transparent;
+  border: 1px solid var(--palette-secondary-main);
+  color: var(--palette-secondary-main);
+}
+
+.secondary:enabled.invert {
+  &:hover {
+    border-color: var(--palette-secondary-light);
+    color: var(--palette-secondary-light);
   }
 
-  &.invert {
-    background-color: transparent;
-    border: 1px solid $palette-secondary-main;
-    color: $palette-secondary-main;
-
-    &:hover {
-      border-color: $palette-secondary-light;
-      color: $palette-secondary-light;
-    }
-
-    &:active {
-      border-color: $palette-secondary-lighter;
-      color: $palette-secondary-lighter;
-    }
+  &:active {
+    border-color: var(--palette-secondary-lighter);
+    color: var(--palette-secondary-lighter);
   }
 }
 
 /**
  * This seems to be the best way to target modern touch device browsers.
  */
-@media (-moz-touch-enabled: 1), (pointer:coarse) {
+@media (-moz-touch-enabled: 1), (pointer: coarse) {
   /* TODO: Remove hover styles */
 }
diff --git a/src/core/client/ui/components/Button/Button.mdx b/src/core/client/ui/components/Button/Button.mdx
index 6382ac02f..5be82c540 100644
--- a/src/core/client/ui/components/Button/Button.mdx
+++ b/src/core/client/ui/components/Button/Button.mdx
@@ -10,11 +10,18 @@ import Button from './Button'
 
 ## Basic usage
 <Playground>
-  <Button style={{marginRight: "10px"}}>Push Me</Button>
-  <Button style={{marginRight: "10px"}} anchor>I'm an Anchor Tag</Button>
-  <Button style={{marginRight: "10px"}} primary>Primary</Button>
-  <Button style={{marginRight: "10px"}} secondary>Secondary</Button>
-  <Button style={{marginTop: "10px"}} primary fullWidth>Full Width</Button>
-  <Button style={{marginTop: "10px"}} primary invert fullWidth>Full Width Invert</Button>
+  <Button style={{margin: "0 10px 10px 0"}}>Push Me</Button>
+  <Button style={{margin: "0 10px 10px 0"}} disabled>Push Me</Button>
+  <Button style={{margin: "0 10px 10px 0"}} anchor>I'm an Anchor Tag</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary disabled>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary>Secondary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary disabled>Secondary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary invert>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} primary invert disabled>Primary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary invert>Secondary</Button>
+  <Button style={{margin: "0 10px 10px 0"}} secondary invert disabled>Secondary</Button>
+  <Button style={{marginBottom: "10px"}} primary fullWidth>Full Width</Button>
+  <Button style={{marginBottom: "10px"}} primary invert fullWidth>Full Width Invert</Button>
 </Playground>
 
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index dadb7a35d..ded844b87 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -28,6 +28,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** If set renders a button with secondary colors */
   secondary?: boolean;
+
+  innerRef?: React.RefObject<HTMLDivElement> | any;
 }
 
 class Button extends React.Component<InnerProps> {
@@ -39,6 +41,7 @@ class Button extends React.Component<InnerProps> {
       invert,
       primary,
       secondary,
+      innerRef,
       ...rest
     } = this.props;
 
@@ -53,6 +56,7 @@ class Button extends React.Component<InnerProps> {
       <BaseButton
         className={rootClassName}
         classes={pick(classes, "keyboardFocus")}
+        innerRef={innerRef}
         {...rest}
       />
     );
diff --git a/src/core/client/ui/components/Center/Center.css b/src/core/client/ui/components/Center/Center.css
deleted file mode 100644
index 67d72755f..000000000
--- a/src/core/client/ui/components/Center/Center.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
diff --git a/src/core/client/ui/components/Center/Center.tsx b/src/core/client/ui/components/Center/Center.tsx
deleted file mode 100644
index 892277ac6..000000000
--- a/src/core/client/ui/components/Center/Center.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import cn from "classnames";
-import * as React from "react";
-import { ReactNode, StatelessComponent } from "react";
-
-import { withStyles } from "talk-ui/hocs";
-import { PropTypesOf } from "talk-ui/types";
-
-import * as styles from "./Center.css";
-
-interface InnerProps {
-  /**
-   * This prop can be used to add custom classnames.
-   * It is handled by the `withStyles `HOC.
-   */
-  classes: Partial<typeof styles>;
-  className?: string;
-  children: ReactNode;
-}
-
-const Center: StatelessComponent<InnerProps> = props => {
-  return (
-    <div className={cn(props.className, props.classes.root)}>
-      {props.children}
-    </div>
-  );
-};
-
-const enhanced = withStyles(styles)(Center);
-export type CenterProps = PropTypesOf<typeof enhanced>;
-export default enhanced;
diff --git a/src/core/client/ui/components/Center/index.ts b/src/core/client/ui/components/Center/index.ts
deleted file mode 100644
index 47237abf5..000000000
--- a/src/core/client/ui/components/Center/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Center";
-export { default } from "./Center";
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
new file mode 100644
index 000000000..13cb05be5
--- /dev/null
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -0,0 +1,99 @@
+.root {
+  display: flex;
+}
+
+.halfItemGutter {
+  & > * {
+    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 calc(0.5 * var(--spacing-unit));
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 calc(0.5 * var(--spacing-unit)) 0;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: calc(0.5 * var(--spacing-unit)) 0 0 0;
+    }
+  }
+  & > *:last-child {
+    margin: 0;
+  }
+}
+
+.itemGutter {
+  & > * {
+    margin: 0 var(--spacing-unit) 0 0;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-unit);
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-unit) 0;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: var(--spacing-unit) 0 0 0;
+    }
+  }
+  & > *:last-child {
+    margin: 0;
+  }
+}
+
+.justifyFlexStart {
+  justify-content: flex-start;
+}
+.justifyFlexEnd {
+  justify-content: flex-end;
+}
+.justifyCenter {
+  justify-content: center;
+}
+.justifySpaceBetween {
+  justify-content: space-between;
+}
+.justifySpaceAround {
+  justify-content: space-around;
+}
+.justifySpaceEvenly {
+  justify-content: space-evenly;
+}
+
+.alignFlexStart {
+  align-items: flex-start;
+}
+.alignFlexEnd {
+  align-items: flex-end;
+}
+.alignCenter {
+  align-items: center;
+}
+.alignBaseline {
+  align-items: baseline;
+}
+.alignStretch {
+  align-items: stretch;
+}
+
+.directionRow {
+  flex-direction: row;
+}
+.directionColumn {
+  flex-direction: column;
+}
+.directionRowReverse {
+  flex-direction: row-reverse;
+}
+.directionColumnReverse {
+  flex-direction: column-reverse;
+}
diff --git a/src/core/client/ui/components/Flex/Flex.mdx b/src/core/client/ui/components/Flex/Flex.mdx
new file mode 100644
index 000000000..b0d8e4d23
--- /dev/null
+++ b/src/core/client/ui/components/Flex/Flex.mdx
@@ -0,0 +1,16 @@
+---
+name: Flex
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import Flex from './Flex'
+
+# Flex
+
+`Flex` is a wrapper around `flexbox`.
+
+## Basic usage
+<Playground>
+  <Flex justifyContent="center">I'm centered</Flex>
+</Playground>
diff --git a/src/core/client/ui/components/Flex/Flex.spec.tsx b/src/core/client/ui/components/Flex/Flex.spec.tsx
new file mode 100644
index 000000000..b774d9961
--- /dev/null
+++ b/src/core/client/ui/components/Flex/Flex.spec.tsx
@@ -0,0 +1,20 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import Flex from "./Flex";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    justifyContent: "center",
+    alignItems: "center",
+    direction: "row",
+  };
+  const wrapper = shallow(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
new file mode 100644
index 000000000..bfba06d05
--- /dev/null
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -0,0 +1,57 @@
+import cn from "classnames";
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { pascalCase } from "talk-common/utils";
+
+import * as styles from "./Flex.css";
+
+interface InnerProps {
+  id?: string;
+  role?: string;
+  justifyContent?:
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-around"
+    | "space-between"
+    | "space-evenly";
+  alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
+  itemGutter?: boolean | "half";
+  className?: string;
+}
+
+const Flex: StatelessComponent<InnerProps> = props => {
+  const {
+    className,
+    justifyContent,
+    alignItems,
+    direction,
+    itemGutter,
+    ...rest
+  } = props;
+
+  const classObject: Record<string, boolean> = {
+    [styles.itemGutter]: itemGutter === true,
+    [styles.halfItemGutter]: itemGutter === "half",
+  };
+
+  if (justifyContent) {
+    classObject[(styles as any)[`justify${pascalCase(justifyContent)}`]] = true;
+  }
+
+  if (alignItems) {
+    classObject[(styles as any)[`align${pascalCase(alignItems)}`]] = true;
+  }
+
+  if (direction) {
+    classObject[(styles as any)[`direction${pascalCase(direction)}`]] = true;
+  }
+
+  const classNames: string = cn(styles.root, className, classObject);
+
+  return <div className={classNames} {...rest} />;
+};
+
+export default Flex;
diff --git a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
new file mode 100644
index 000000000..90ef93c13
--- /dev/null
+++ b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Flex-root Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/ui/components/Flex/index.ts b/src/core/client/ui/components/Flex/index.ts
new file mode 100644
index 000000000..27e09f37b
--- /dev/null
+++ b/src/core/client/ui/components/Flex/index.ts
@@ -0,0 +1,2 @@
+export * from "./Flex";
+export { default } from "./Flex";
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.mdx b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
new file mode 100644
index 000000000..3f3186bb6
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
@@ -0,0 +1,40 @@
+---
+name: MatchMedia
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import MatchMedia from './MatchMedia'
+
+# MatchMedia
+
+`MatchMedia` uses media queries to provide responsive rendering.
+
+## Basic usage
+<Playground>
+  <MatchMedia maxWidth="xs">
+    I'm a very small screen
+  </MatchMedia>
+  <MatchMedia minWidth="xs" maxWidth="sm">
+    I'm a small screen
+  </MatchMedia>
+  <MatchMedia minWidth="sm" maxWidth="md">
+    I'm a medium screen
+  </MatchMedia>
+  <MatchMedia minWidth="md" maxWidth="lg">
+    I'm a large screen
+  </MatchMedia>
+  <MatchMedia minWidth="lg" maxWidth="xl">
+    I'm a very large screen
+  </MatchMedia>
+  <MatchMedia minWidth="xl">
+    I'm a super large screen
+  </MatchMedia>
+</Playground>
+
+## Using render props
+<Playground>
+  <MatchMedia minWidth="lg">
+    {matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
+  </MatchMedia>
+</Playground>
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
new file mode 100644
index 000000000..1e600dd76
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
@@ -0,0 +1,27 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import { MatchMedia } from "./MatchMedia";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof MatchMedia> = {
+    minWidth: "xs",
+    maxWidth: "sm",
+    component: "div",
+    screen: true,
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<MatchMedia {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("map new speech prop to older aural prop", () => {
+  const props: PropTypesOf<typeof MatchMedia> = {
+    speech: true,
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<MatchMedia {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
new file mode 100644
index 000000000..43d900dfe
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { ReactNode, StatelessComponent } from "react";
+import Responsive, { MediaQueryMatchers } from "react-responsive";
+
+import theme from "../../theme/variables";
+import UIContext from "../UIContext";
+
+type Breakpoints = keyof typeof theme.breakpoints;
+
+interface InnerProps {
+  minWidth?: Breakpoints;
+  maxWidth?: Breakpoints;
+  children: ReactNode | ((matches: boolean) => React.ReactNode);
+  className?: string;
+  component?:
+    | string
+    | React.SFC<any>
+    | React.ClassType<any, any, any>
+    | React.ComponentClass<any>;
+  all?: boolean;
+  print?: boolean;
+  screen?: boolean;
+  speech?: boolean;
+  values?: Partial<MediaQueryMatchers>;
+}
+
+export const MatchMedia: StatelessComponent<InnerProps> = props => {
+  const { speech, minWidth, maxWidth, ...rest } = props;
+  const mapped = {
+    // TODO: Temporarily map newer speech to older aural type until
+    // react-responsive supports the speech prop.
+    aural: speech,
+    minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
+    maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
+  };
+  return <Responsive {...rest} {...mapped} />;
+};
+
+const MatchMediaWithContext: StatelessComponent<InnerProps> = props => (
+  <UIContext.Consumer>
+    {({ mediaQueryValues }) => (
+      <MatchMedia {...props} values={mediaQueryValues} />
+    )}
+  </UIContext.Consumer>
+);
+
+export default MatchMediaWithContext;
diff --git a/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap b/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
new file mode 100644
index 000000000..a128d4ba0
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`map new speech prop to older aural prop 1`] = `
+<MediaQuery
+  aural={true}
+  values={Object {}}
+>
+  <div>
+    Hello World
+  </div>
+</MediaQuery>
+`;
+
+exports[`renders correctly 1`] = `
+<MediaQuery
+  component="div"
+  maxWidth={640}
+  minWidth={321}
+  screen={true}
+  values={Object {}}
+>
+  <div>
+    Hello World
+  </div>
+</MediaQuery>
+`;
diff --git a/src/core/client/ui/components/MatchMedia/index.ts b/src/core/client/ui/components/MatchMedia/index.ts
new file mode 100644
index 000000000..71f16f6f8
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/index.ts
@@ -0,0 +1,2 @@
+export * from "./MatchMedia";
+export { default } from "./MatchMedia";
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
new file mode 100644
index 000000000..708964cdb
--- /dev/null
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -0,0 +1,15 @@
+.root {
+  padding: 6px 10px;
+  background: #ffffff !important;
+  border: 1px solid #c9cacb;
+  box-sizing: border-box;
+  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 1px;
+  color: #222 !important;
+  display: flex !important;
+
+  &:after,
+  &::before {
+    border-top-color: transparent !important;
+  }
+}
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
new file mode 100644
index 000000000..7f02fac3c
--- /dev/null
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { RefHandler } from "react-popper";
+import Attachment from "../Attachment";
+import * as styles from "./Popover.css";
+
+interface RenderProps {
+  toggleShow?: () => void;
+  ref?: RefHandler;
+}
+
+interface InnerProps {
+  body: React.ReactElement<any> | null;
+  children: (props: RenderProps) => any;
+}
+
+interface State {
+  show: false;
+}
+
+class Popover extends React.Component<InnerProps> {
+  public state: State = {
+    show: false,
+  };
+
+  public toggleShow = () => {
+    this.setState((state: State) => ({
+      show: !state.show,
+    }));
+  };
+
+  public render() {
+    const { body, children } = this.props;
+    const { show } = this.state;
+    return (
+      <Attachment body={show ? body : null} className={styles.root}>
+        {({ ref }) => children({ toggleShow: this.toggleShow, ref })}
+      </Attachment>
+    );
+  }
+}
+
+export default Popover;
diff --git a/src/core/client/ui/components/Popover/index.ts b/src/core/client/ui/components/Popover/index.ts
new file mode 100644
index 000000000..7e46e3708
--- /dev/null
+++ b/src/core/client/ui/components/Popover/index.ts
@@ -0,0 +1,2 @@
+export * from "./Popover";
+export { default } from "./Popover";
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.css b/src/core/client/ui/components/RelativeTime/RelativeTime.css
new file mode 100644
index 000000000..3faa5e162
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.css
@@ -0,0 +1,4 @@
+.root {
+  composes: body1 from "talk-ui/shared/typography.css";
+  background-color: transparent;
+}
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.mdx b/src/core/client/ui/components/RelativeTime/RelativeTime.mdx
new file mode 100644
index 000000000..3122e8806
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.mdx
@@ -0,0 +1,17 @@
+---
+name: RelativeTime
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import RelativeTime from './RelativeTime'
+
+# RelativeTime
+
+Renders relative time until given `date`.
+
+## Basic usage
+<Playground>
+  <RelativeTime date="2018-07-04T12:14"
+    formatter={(value, unit, suffix, timestamp) => "".concat(value, " ", unit, " ", suffix)} />
+</Playground>
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx b/src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx
new file mode 100644
index 000000000..92d0c547d
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import UIContext from "../UIContext";
+import RelativeTime from "./RelativeTime";
+
+it("uses default formatter", () => {
+  const props = {
+    date: "2018-12-17T03:24:00.000Z",
+  };
+  const tree = create(<RelativeTime {...props} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("uses formatter from context", () => {
+  const context: any = {
+    timeagoFormatter: () => "My Context Formatter",
+  };
+  const props: PropTypesOf<typeof RelativeTime> = {
+    date: "2018-12-17T03:24:00.000Z",
+  };
+  const tree = create(
+    <UIContext.Provider value={context}>
+      <RelativeTime {...props} />
+    </UIContext.Provider>
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("uses formatter from props", () => {
+  const props = {
+    date: "2018-12-17T03:24:00.000Z",
+    formatter: () => "My Props Formatter",
+  };
+  const tree = create(<RelativeTime {...props} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.tsx b/src/core/client/ui/components/RelativeTime/RelativeTime.tsx
new file mode 100644
index 000000000..3a8022656
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.tsx
@@ -0,0 +1,42 @@
+import cn from "classnames";
+import React from "react";
+import TimeAgo, { Formatter } from "react-timeago";
+
+import { UIContext } from "talk-ui/components";
+import { withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./RelativeTime.css";
+
+interface InnerProps {
+  date: string;
+  live?: boolean;
+  classes: typeof styles;
+  className?: string;
+  formatter?: Formatter;
+}
+
+const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
+  new Date(timestamp).toISOString();
+
+class RelativeTime extends React.Component<InnerProps> {
+  public render() {
+    const { date, classes, live, className, formatter } = this.props;
+    return (
+      <UIContext.Consumer>
+        {({ timeagoFormatter }) => (
+          <TimeAgo
+            date={date}
+            className={cn(className, classes.root)}
+            live={live}
+            formatter={timeagoFormatter || formatter || defaultFormatter}
+          />
+        )}
+      </UIContext.Consumer>
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(RelativeTime);
+export type RelativeTimeProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap b/src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
new file mode 100644
index 000000000..6d9388e87
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`uses default formatter 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2018-12-17T03:24:00.000Z"
+  title="2018-12-17T03:24:00.000Z"
+>
+  2018-12-17T03:24:00.000Z
+</time>
+`;
+
+exports[`uses formatter from context 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2018-12-17T03:24:00.000Z"
+  title="2018-12-17T03:24:00.000Z"
+>
+  My Context Formatter
+</time>
+`;
+
+exports[`uses formatter from props 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2018-12-17T03:24:00.000Z"
+  title="2018-12-17T03:24:00.000Z"
+>
+  My Context Formatter
+</time>
+`;
diff --git a/src/core/client/ui/components/RelativeTime/index.ts b/src/core/client/ui/components/RelativeTime/index.ts
new file mode 100644
index 000000000..8bc2dfb5e
--- /dev/null
+++ b/src/core/client/ui/components/RelativeTime/index.ts
@@ -0,0 +1,2 @@
+export * from "./RelativeTime";
+export { default } from "./RelativeTime";
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
new file mode 100644
index 000000000..4d2e9e88a
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -0,0 +1,11 @@
+.root {
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: calc(0.57em / 16);
+  background: #ffffff;
+  border: 1px solid #979797;
+  box-sizing: border-box;
+  border-radius: 1px;
+  padding: 5px 20px;
+}
diff --git a/src/core/client/ui/components/TextField/TextField.d.ts b/src/core/client/ui/components/TextField/TextField.d.ts
new file mode 100644
index 000000000..f99662ba2
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.d.ts
@@ -0,0 +1 @@
+export const root: string;
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
new file mode 100644
index 000000000..ac980b102
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { InputHTMLAttributes, StatelessComponent } from "react";
+
+import * as styles from "./TextField.css";
+
+interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
+  classes?: typeof styles;
+}
+
+const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+  return <input {...rest} className={cn(styles.root, className)} />;
+};
+
+export default Input;
diff --git a/src/core/client/ui/components/TextField/index.ts b/src/core/client/ui/components/TextField/index.ts
new file mode 100644
index 000000000..e38acd4ea
--- /dev/null
+++ b/src/core/client/ui/components/TextField/index.ts
@@ -0,0 +1,2 @@
+export * from "./TextField";
+export { default } from "./TextField";
diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css
index e026c61ee..a3c19a400 100644
--- a/src/core/client/ui/components/Typography/Typography.css
+++ b/src/core/client/ui/components/Typography/Typography.css
@@ -11,19 +11,19 @@
   composes: heading2 from "talk-ui/shared/typography.css";
 }
 
-.heading3  {
+.heading3 {
   composes: heading3 from "talk-ui/shared/typography.css";
 }
 
-.heading4  {
+.heading4 {
   composes: heading4 from "talk-ui/shared/typography.css";
 }
 
-.subtitle1  {
+.subtitle1 {
   composes: subtitle1 from "talk-ui/shared/typography.css";
 }
 
-.subtitle2  {
+.subtitle2 {
   composes: subtitle2 from "talk-ui/shared/typography.css";
 }
 
@@ -31,7 +31,7 @@
   composes: body1 from "talk-ui/shared/typography.css";
 }
 
-.body2  {
+.body2 {
   composes: body2 from "talk-ui/shared/typography.css";
 }
 
@@ -43,6 +43,10 @@
   composes: overline from "talk-ui/shared/typography.css";
 }
 
+.timestamp {
+  composes: timestamp from "talk-ui/shared/typography.css";
+}
+
 .alignLeft {
   text-align: left;
 }
@@ -70,7 +74,7 @@
 }
 
 .paragraph {
-  margin-bottom: calc(2px * $spacing-unit);
+  margin-bottom: var(--spacing-unit);
 }
 
 .colorInherit {
@@ -78,17 +82,17 @@
 }
 
 .colorPrimary {
-  color: $palette-primary-main;
+  color: var(--palette-primary-main);
 }
 
 .colorSecondary {
-  color: $palette-secondary-main;
+  color: var(--palette-secondary-main);
 }
 
 .colorTextSecondary {
-  color: $palette-text-secondary;
+  color: var(--palette-text-secondary);
 }
 
 .colorError {
-  color: $palette-error-main;
+  color: var(--palette-error-main);
 }
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index 7292a672f..b743305e6 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -16,7 +16,8 @@ type Variant =
   | "subtitle2"
   | "body1"
   | "body2"
-  | "button";
+  | "button"
+  | "timestamp";
 
 // Based on Typography Component of Material UI.
 // https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/Typography/Typography.js
@@ -99,6 +100,8 @@ const Typography: StatelessComponent<InnerProps> = props => {
     {
       [classes.colorPrimary]: color === "primary",
       [classes.colorSecondary]: color === "secondary",
+      [classes.colorError]: color === "error",
+      [classes.colorTextSecondary]: color === "textSecondary",
       [classes.noWrap]: noWrap,
       [classes.gutterBottom]: gutterBottom,
       [classes.paragraph]: paragraph,
@@ -129,6 +132,7 @@ Typography.defaultProps = {
     subtitle2: "h3",
     body1: "p",
     body2: "aside",
+    timestamp: "span",
   },
   noWrap: false,
   paragraph: false,
diff --git a/src/core/client/ui/components/UIContext/UIContext.ts b/src/core/client/ui/components/UIContext/UIContext.ts
new file mode 100644
index 000000000..b8372d1f3
--- /dev/null
+++ b/src/core/client/ui/components/UIContext/UIContext.ts
@@ -0,0 +1,12 @@
+import React from "react";
+import { MediaQueryMatchers } from "react-responsive";
+import { Formatter } from "react-timeago";
+
+export interface UIContextProps {
+  timeagoFormatter?: Formatter | null;
+  mediaQueryValues?: Partial<MediaQueryMatchers>;
+}
+
+const UIContext = React.createContext<UIContextProps>({} as any);
+
+export default UIContext;
diff --git a/src/core/client/ui/components/UIContext/index.ts b/src/core/client/ui/components/UIContext/index.ts
new file mode 100644
index 000000000..86504f205
--- /dev/null
+++ b/src/core/client/ui/components/UIContext/index.ts
@@ -0,0 +1 @@
+export { default, UIContextProps } from "./UIContext";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 54643cb2a..9b1594d70 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -1,4 +1,9 @@
 export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
-export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
+export { default as Popover } from "./Popover";
+export { default as TextField } from "./TextField";
+export { default as RelativeTime } from "./RelativeTime";
+export { default as UIContext, UIContextProps } from "./UIContext";
+export { default as Flex } from "./Flex";
+export { default as MatchMedia } from "./MatchMedia";
diff --git a/src/core/client/ui/hocs/withForwardRef.tsx b/src/core/client/ui/hocs/withForwardRef.tsx
new file mode 100644
index 000000000..6b48b928b
--- /dev/null
+++ b/src/core/client/ui/hocs/withForwardRef.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import {
+  InferableComponentEnhancerWithProps,
+  withPropsOnChange,
+} from "recompose";
+
+/**
+ * withForwardRef provides a property called `forwardRef` using
+ * the `React.forwardRef` api.
+ */
+function withForwardRef<T>(): InferableComponentEnhancerWithProps<
+  { forwardRef: Ref<any> },
+  {}
+> {
+  return WrappedComponent => {
+    return React.forwardRef((props, ref) => (
+      <WrappedComponent forwardRef={ref} />
+    ));
+  };
+}
+
+export default withForwardRef;
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 649460503..3cb483cd2 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -1,59 +1,72 @@
 .heading1 {
-  font-size: calc(24rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(24rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(32em / 24);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .heading2 {
-  font-size: calc(20rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(20rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(24em / 20);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .heading3 {
-  font-size: calc(18rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(18rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(20em / 18);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .heading4 {
-  font-size: calc(16rem / $rem-base);
-  font-weight: $font-weight-medium;
+  font-size: calc(16rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
   font-family: "Manuale";
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
-.subtitle1 {}
+.subtitle1 {
+}
 
-.subtitle2 {}
+.subtitle2 {
+}
 
-.body2 {}
+.body2 {
+}
 
 .body1 {
-  font-size: calc(16rem / $rem-base);
-  font-weight: $font-weight-regular;
+  font-size: calc(16rem / var(--rem-base));
+  font-weight: var(--font-weight-regular);
   font-family: "Source Sans Pro";
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
-  color: $palette-text-primary;
+  color: var(--palette-text-primary);
 }
 
 .button {
-  color: $palette-text-secondary;
+  color: var(--palette-text-secondary);
   font-family: "Source Sans Pro";
-  font-weight: $font-weight-medium;
+  font-weight: var(--font-weight-medium);
   font-size: 16px;
   letter-spacing: calc(0.57em / 16);
 }
 
-.overline {}
+.overline {
+}
+
+.timestamp {
+  color: var(--palette-text-secondary);
+  font-family: "Source Sans Pro";
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  line-height: calc(18em / 16);
+  letter-spacing: calc(0.2em / 16);
+}
diff --git a/src/core/client/ui/theme/variables.css b/src/core/client/ui/theme/variables.css
new file mode 100644
index 000000000..ad0215b77
--- /dev/null
+++ b/src/core/client/ui/theme/variables.css
@@ -0,0 +1,16 @@
+/*
+  Variables defined in `variables.ts` are already available
+  flattened and in kebab case.
+
+  These are additionally variables we define.
+*/
+
+:root {
+  --spacing-unit: calc(1px * var(--spacing-unit-small));
+}
+
+@media (min-width: $breakpoints-xs) {
+  :root {
+    --spacing-unit: calc(1px * var(--spacing-unit-large));
+  }
+}
diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts
index dc5fd9ed7..d68b88a41 100644
--- a/src/core/client/ui/theme/variables.ts
+++ b/src/core/client/ui/theme/variables.ts
@@ -7,7 +7,7 @@ const variables = {
   palette: {
     /* Primary colors */
     primary: {
-      darker: "#0D5B8F",
+      darkest: "#0D5B8F",
       dark: "#2B7EB5",
       main: "#3498DB",
       light: "#67B2E4",
@@ -15,7 +15,7 @@ const variables = {
     },
     /* Secondary colors */
     secondary: {
-      darker: "#404345",
+      darkest: "#404345",
       dark: "#65696B",
       main: "#787D80",
       light: "#9A9DA0",
@@ -23,7 +23,7 @@ const variables = {
     },
     /* Success colors */
     success: {
-      darker: "#03AB61",
+      darkest: "#03AB61",
       dark: "#02BD6B",
       main: "#00CD73",
       light: "#40D996",
@@ -31,7 +31,7 @@ const variables = {
     },
     /* Error colors */
     error: {
-      darker: "#F50F0C",
+      darkest: "#F50F0C",
       dark: "#FF1F1C",
       main: "#FA4643",
       light: "#F26563",
@@ -58,7 +58,8 @@ const variables = {
     },
   },
   /* gitter and spacing */
-  spacingUnit: 5,
+  spacingUnitSmall: 5,
+  spacingUnitLarge: 10,
   /* Borders */
   roundCorners: "2px",
   /* Typography */
@@ -68,6 +69,14 @@ const variables = {
   fontWeightLight: 300,
   fontWeightRegular: 400,
   fontWeightMedium: 550,
+  /* Breakpoints */
+  breakpoints: {
+    xs: 320,
+    sm: 640,
+    md: 1024,
+    lg: 1400,
+    xl: 1600,
+  },
 };
 
-module.exports = variables;
+export default variables;
diff --git a/src/core/client/ui/types.ts b/src/core/client/ui/types.ts
index 061b7d3d5..576b881c3 100644
--- a/src/core/client/ui/types.ts
+++ b/src/core/client/ui/types.ts
@@ -29,4 +29,6 @@ export type Overwrite<T, U> = Pick<T, Diff<keyof T, keyof U>> & U;
  *
  * E.g. type ButtonProps = ReturnPropTypes<Button>;
  */
-export type PropTypesOf<T> = T extends React.ComponentType<infer R> ? R : {};
+export type PropTypesOf<T> = T extends React.ComponentType<infer R>
+  ? R
+  : T extends React.Component<infer S> ? S : {};
diff --git a/src/core/common/.babelrc.js b/src/core/common/.babelrc.js
new file mode 100644
index 000000000..fad0a6230
--- /dev/null
+++ b/src/core/common/.babelrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    ["@babel/env", { targets: "last 2 versions, ie 11", modules: "commonjs" }],
+  ],
+};
diff --git a/src/core/common/graphql/index.ts b/src/core/common/graphql/index.ts
new file mode 100644
index 000000000..396d9f22a
--- /dev/null
+++ b/src/core/common/graphql/index.ts
@@ -0,0 +1 @@
+export { default as loadSchema } from "./loadSchema";
diff --git a/src/core/server/graph/common/schema/index.ts b/src/core/common/graphql/loadSchema.ts
similarity index 100%
rename from src/core/server/graph/common/schema/index.ts
rename to src/core/common/graphql/loadSchema.ts
diff --git a/src/core/common/utils/index.ts b/src/core/common/utils/index.ts
new file mode 100644
index 000000000..e91489017
--- /dev/null
+++ b/src/core/common/utils/index.ts
@@ -0,0 +1,2 @@
+export { default as timeout } from "./timeout";
+export { default as pascalCase } from "./pascalCase";
diff --git a/src/core/common/utils/pascalCase.ts b/src/core/common/utils/pascalCase.ts
new file mode 100644
index 000000000..de0bbace8
--- /dev/null
+++ b/src/core/common/utils/pascalCase.ts
@@ -0,0 +1,5 @@
+import { camelCase } from "lodash";
+
+export default function pascalCase(value: string) {
+  return value[0].toUpperCase() + camelCase(value).slice(1);
+}
diff --git a/src/core/common/utils/timeout.ts b/src/core/common/utils/timeout.ts
new file mode 100644
index 000000000..006fb1ee8
--- /dev/null
+++ b/src/core/common/utils/timeout.ts
@@ -0,0 +1,4 @@
+/** A promisified timeout. */
+export default function timeout(ms: number = 0) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
diff --git a/src/core/server/config.ts b/src/core/server/config.ts
index fd200db91..f82bb46b8 100644
--- a/src/core/server/config.ts
+++ b/src/core/server/config.ts
@@ -49,14 +49,14 @@ const config = convict({
   mongodb: {
     doc: "The MongoDB database to connect to.",
     format: "mongo-uri",
-    default: "mongodb://localhost/talk",
+    default: "mongodb://127.0.0.1:27017/talk",
     env: "MONGODB",
     arg: "mongodb",
   },
   redis: {
     doc: "The Redis database to connect to.",
     format: "redis-uri",
-    default: "redis://localhost:6379",
+    default: "redis://127.0.0.1:6379",
     env: "REDIS",
     arg: "redis",
   },
diff --git a/src/core/server/graph/management/schema/index.ts b/src/core/server/graph/management/schema/index.ts
index ab7cd2856..6dccc1c9c 100644
--- a/src/core/server/graph/management/schema/index.ts
+++ b/src/core/server/graph/management/schema/index.ts
@@ -1,4 +1,4 @@
-import loadSchema from "talk-server/graph/common/schema";
+import { loadSchema } from "talk-common/graphql";
 import resolvers from "talk-server/graph/management/resolvers";
 
 export default function getManagementSchema() {
diff --git a/src/core/server/graph/tenant/resolvers/comment.ts b/src/core/server/graph/tenant/resolvers/comment.ts
index 22f72b5e5..d4033e0cb 100644
--- a/src/core/server/graph/tenant/resolvers/comment.ts
+++ b/src/core/server/graph/tenant/resolvers/comment.ts
@@ -2,6 +2,8 @@ import Context from "talk-server/graph/tenant/context";
 import { Comment, ConnectionInput } from "talk-server/models/comment";
 
 export default {
+  createdAt: async (comment: Comment, _: any, ctx: Context) =>
+    comment.created_at,
   author: async (comment: Comment, _: any, ctx: Context) =>
     ctx.loaders.Users.user.load(comment.author_id),
   replies: async (comment: Comment, input: ConnectionInput, ctx: Context) =>
diff --git a/src/core/server/graph/tenant/schema/index.ts b/src/core/server/graph/tenant/schema/index.ts
index 93641ac66..844e9a4b4 100644
--- a/src/core/server/graph/tenant/schema/index.ts
+++ b/src/core/server/graph/tenant/schema/index.ts
@@ -1,4 +1,4 @@
-import loadSchema from "talk-server/graph/common/schema";
+import { loadSchema } from "talk-common/graphql";
 import resolvers from "talk-server/graph/tenant/resolvers";
 
 export default function getTenantSchema() {
diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql
index eb060b6a4..5270f26fd 100644
--- a/src/core/server/graph/tenant/schema/schema.graphql
+++ b/src/core/server/graph/tenant/schema/schema.graphql
@@ -202,6 +202,11 @@ type Comment {
   """
   body: String
 
+  """
+  createdAt is the date in which the comment was created.
+  """
+  createdAt: Time
+
   """
   author is the User that authored the Comment.
   """
@@ -232,7 +237,22 @@ type PageInfo {
   """
   Indicates that there are more nodes after this subset.
   """
-  hasNextPage: Boolean!
+  hasNextPage: Boolean
+
+  """
+  Included for legacy Relay reasons. Always set to false.
+  """
+  hasPreviousPage: Boolean
+
+  """
+  Included for legacy Relay reasons. Always set to null.
+  """
+  startCursor: Cursor
+
+  """
+  Specifies the last node's cursor for forwards pagination.
+  """
+  endCursor: Cursor
 }
 
 """
@@ -302,7 +322,7 @@ type Asset {
     first: Int = 10
     orderBy: COMMENT_SORT = CREATED_AT_DESC
     after: Cursor
-  ): CommentsConnection
+  ): CommentsConnection!
 
   """
   author is the authors listed in the meta tags for the Asset.
diff --git a/src/core/server/models/comment.ts b/src/core/server/models/comment.ts
index 81d046159..43c588509 100644
--- a/src/core/server/models/comment.ts
+++ b/src/core/server/models/comment.ts
@@ -2,7 +2,13 @@ import { merge } from "lodash";
 import { Db } from "mongodb";
 import { Omit, Sub } from "talk-common/types";
 import { ActionCounts } from "talk-server/models/actions";
-import { Connection, Cursor } from "talk-server/models/connection";
+import {
+  Connection,
+  Cursor,
+  getPageInfo,
+  nodesToEdges,
+  NodeToCursorTransformer,
+} from "talk-server/models/connection";
 import Query from "talk-server/models/query";
 import { TenantResource } from "talk-server/models/tenant";
 import uuid from "uuid";
@@ -134,31 +140,18 @@ export interface ConnectionInput {
   after?: Cursor;
 }
 
-/**
- * nodesToEdge converts a set of nodes and configuration options into a set of
- * edges.
- *
- * @param input connection configuration
- * @param nodes nodes returned from the query
- */
-function nodesToEdge(input: ConnectionInput, nodes: Comment[]) {
-  let getCursor: (comment: Comment, index: number) => Cursor;
+function cursorGetterFactory(
+  input: ConnectionInput
+): NodeToCursorTransformer<Comment> {
   switch (input.orderBy) {
     case CommentSort.CREATED_AT_DESC:
     case CommentSort.CREATED_AT_ASC:
-      getCursor = comment => comment.created_at;
-      break;
+      return comment => comment.created_at;
     case CommentSort.REPLIES_DESC:
     case CommentSort.RESPECT_DESC:
-      getCursor = (_, index) =>
+      return (_, index) =>
         (input.after ? (input.after as number) : 0) + index + 1;
-      break;
   }
-
-  return nodes.map((comment, index) => ({
-    node: comment,
-    cursor: getCursor(comment, index),
-  }));
 }
 
 /**
@@ -223,8 +216,43 @@ export async function retrieveAssetConnection(
 async function retrieveConnection(
   input: ConnectionInput,
   query: Query<Comment>
-) {
+): Promise<Readonly<Connection<Readonly<Comment>>>> {
   // Apply some sorting options.
+  applyInputToQuery(input, query);
+
+  // We load one more than the limit so we can determine if there is
+  // another page of entries. This gets trimmed off below after we've checked to
+  // see if this constitutes another page of edges.
+  query.first(input.first + 1);
+
+  // Get the cursor.
+  const cursor = await query.exec();
+
+  // Get the comments from the cursor.
+  const nodes = await cursor.toArray();
+
+  // Convert the nodes to edges (which will include the extra edge we don't need
+  // if there is more results).
+  const edges = nodesToEdges(nodes, cursorGetterFactory(input));
+
+  // Get the pageInfo for the connection. We will use this to also determine if
+  // we need to trim off the extra edge that we requested by comparing its
+  // hasNextPage parameter.
+  const pageInfo = getPageInfo(input, edges);
+  if (pageInfo.hasNextPage) {
+    // Because this means that we got one more than expected, we should trim off
+    // the extra edge that was retrieved.
+    edges.splice(input.first, 1);
+  }
+
+  // Return the connection.
+  return {
+    edges,
+    pageInfo,
+  };
+}
+
+function applyInputToQuery(input: ConnectionInput, query: Query<Comment>) {
   switch (input.orderBy) {
     case CommentSort.CREATED_AT_DESC:
       query.orderBy({ created_at: -1 });
@@ -251,37 +279,4 @@ async function retrieveConnection(
       }
       break;
   }
-
-  // We load one more than the limit so we can determine if there is
-  // another page of entries.
-  query.first(input.first + 1);
-
-  // Get the cursor.
-  const cursor = await query.exec();
-
-  // Get the comments from the cursor.
-  const nodes = await cursor.toArray();
-
-  // The hasNextPage is always handled the same (ask for one more than we need,
-  // if there is one more, than there is more).
-  let hasNextPage = false;
-  if (input.first >= 0 && nodes.length > input.first) {
-    // There was one more than we expected! Set hasNextPage = true and remove
-    // the last item from the array that we requested.
-    hasNextPage = true;
-    nodes.splice(input.first, 1);
-  }
-
-  // Convert the nodes to edges.
-  const edges = nodesToEdge(input, nodes);
-
-  // Return the connection.
-  const connection: Readonly<Connection<Readonly<Comment>>> = {
-    edges,
-    pageInfo: {
-      hasNextPage,
-    },
-  };
-
-  return connection;
 }
diff --git a/src/core/server/models/connection.spec.ts b/src/core/server/models/connection.spec.ts
new file mode 100644
index 000000000..cf4cf8af1
--- /dev/null
+++ b/src/core/server/models/connection.spec.ts
@@ -0,0 +1,59 @@
+import { getPageInfo } from "./connection";
+
+it("handles when there is none requested", () => {
+  const pageInfo = getPageInfo({ first: 0 }, []);
+
+  expect(pageInfo).toEqual({
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: null,
+  });
+});
+
+it("handles when there is no edges", () => {
+  const pageInfo = getPageInfo({ first: 10 }, []);
+
+  expect(pageInfo).toEqual({
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: null,
+  });
+});
+
+it("handles when there is more edges than requested", () => {
+  const pageInfo = getPageInfo({ first: 1 }, [
+    {
+      node: null,
+      cursor: 1,
+    },
+    {
+      node: null,
+      cursor: 2,
+    },
+  ]);
+
+  expect(pageInfo).toEqual({
+    hasNextPage: true,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: 1,
+  });
+});
+
+it("handles when there is exactly as many edges as requested", () => {
+  const pageInfo = getPageInfo({ first: 1 }, [
+    {
+      node: null,
+      cursor: 1,
+    },
+  ]);
+
+  expect(pageInfo).toEqual({
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: 1,
+  });
+});
diff --git a/src/core/server/models/connection.ts b/src/core/server/models/connection.ts
index 9ed8cac2b..e45e9657a 100644
--- a/src/core/server/models/connection.ts
+++ b/src/core/server/models/connection.ts
@@ -6,10 +6,63 @@ export interface Edge<T> {
 }
 
 export interface PageInfo {
-  hasNextPage: boolean;
+  hasNextPage?: boolean;
+  hasPreviousPage?: boolean;
+  startCursor?: Cursor;
+  endCursor?: Cursor;
 }
 
 export interface Connection<T> {
   edges: Array<Edge<T>>;
   pageInfo: PageInfo;
 }
+
+export interface PaginationArgs {
+  first: number;
+}
+
+export function getPageInfo<T>(args: PaginationArgs, edges: Array<Edge<T>>) {
+  const pageInfo: PageInfo = {
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: null,
+  };
+
+  if (edges.length === 0) {
+    // If there are no edges, then there's nothing to paginate!
+    return pageInfo;
+  }
+
+  // The hasNextPage is always handled the same (ask for one more than we need,
+  // if there is one more, than there is more).
+  if (args.first >= 0 && edges.length > args.first) {
+    // There was one more than we expected! Set hasNextPage = true.
+    pageInfo.hasNextPage = true;
+  }
+
+  if (pageInfo.hasNextPage && edges.length > 1) {
+    // There was more than one expected, and there is two entries in the edges
+    // array. We should grab the second last one because the last one will have
+    // to be trimmed off after.
+    pageInfo.endCursor = edges[edges.length - 2].cursor;
+  } else {
+    // There was not more than expected, so we should just grab the last edge to
+    // get the endCursor.
+    pageInfo.endCursor = edges[edges.length - 1].cursor;
+  }
+
+  return pageInfo;
+}
+
+export type NodeToCursorTransformer<T> = (node: T, index: number) => Cursor;
+
+export function nodesToEdges<T>(
+  nodes: T[],
+  transformer: NodeToCursorTransformer<T>
+): Array<Edge<T>> {
+  return nodes.map((node, index) => ({
+    node,
+    cursor: transformer(node, index),
+  }));
+}
diff --git a/src/core/server/services/mongodb/index.ts b/src/core/server/services/mongodb/index.ts
index efaf8bcba..03f4d21a6 100644
--- a/src/core/server/services/mongodb/index.ts
+++ b/src/core/server/services/mongodb/index.ts
@@ -8,7 +8,10 @@ import { Config } from "talk-server/config";
  */
 export async function createMongoDB(config: Config): Promise<Db> {
   // Connect and create a client for MongoDB.
-  const client = await MongoClient.connect(config.get("mongodb"));
+  const client = await MongoClient.connect(
+    config.get("mongodb"),
+    { useNewUrlParser: true }
+  );
 
   // Return the database handle, which defaults to the database name provided
   // in the config connection string.
diff --git a/src/locales/de/framework.ftl b/src/locales/de/framework.ftl
index fbb6cb340..2f5a6d472 100644
--- a/src/locales/de/framework.ftl
+++ b/src/locales/de/framework.ftl
@@ -2,4 +2,44 @@
 ### All keys must start with `framework` because this file is shared
 ### among different targets.
 
+## Validation
+
 framework-validation-required = Dies ist ein Pflichtpfeld.
+
+framework-timeago =
+  { $suffix ->
+    [ago] vor
+    [in] in
+  }
+  { $value }
+  { $unit ->
+    [second] { $value ->
+       [1] Sekunde
+      *[other] Sekunden
+    }
+    [minuto] { $value ->
+       [1] Minute
+      *[other] Minuten
+    }
+    [hour] { $value ->
+       [0] Stunde
+      *[other] Stunden
+    }
+    [day] { $value ->
+       [1] Tag
+      *[other] Tage
+    }
+    [week] { $value ->
+       [1] Woche
+      *[other] Wochen
+    }
+    [month] { $value ->
+      [1] Monat
+      *[other] Monate
+    }
+    [year] { $value ->
+       [1] Jahr
+      *[other] Jahre
+    }
+    *[other] unknown unit
+  }
diff --git a/src/locales/de/stream.ftl b/src/locales/de/stream.ftl
index d8f1f5f11..c4eb3040a 100644
--- a/src/locales/de/stream.ftl
+++ b/src/locales/de/stream.ftl
@@ -1 +1,7 @@
-postCommentForm-submit = Posten
+### Localization for Embed Stream
+
+## Comments Tab
+
+comments-postCommentForm-post = Posten
+comments-stream-loadMore = Mehr laden
+comments-replyList-showAll = Alle anzeigen
diff --git a/src/locales/en-US/framework.ftl b/src/locales/en-US/framework.ftl
index d50f28b07..5d88f9a7e 100644
--- a/src/locales/en-US/framework.ftl
+++ b/src/locales/en-US/framework.ftl
@@ -2,4 +2,51 @@
 ### All keys must start with `framework` because this file is shared
 ### among different targets.
 
+## Validation
+
 framework-validation-required = This field is required.
+
+framework-timeago-time =
+  { $value }
+  { $unit ->
+    [second] { $value ->
+      [1] second
+      *[other] seconds
+    }
+    [minute] { $value ->
+      [1] minute
+      *[other] minutes
+    }
+    [hour] { $value ->
+      [0] hour
+      *[other] hours
+    }
+    [day] { $value ->
+      [1] day
+      *[other] days
+    }
+    [week] { $value ->
+      [1] week
+      *[other] weeks
+    }
+    [month] { $value ->
+      [1] month
+      *[other] months
+    }
+    [year] { $value ->
+      [1] year
+      *[other] years
+    }
+    *[other] unknown unit
+  }
+
+framework-timeago =
+  { $value ->
+    [0] now
+    *[other]
+      { $suffix ->
+        [ago] {framework-timeago-time} ago
+        [in] in {framework-timeago-time}
+        *[other] unknown suffix
+      }
+  }
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 4d79869a5..08a397cc1 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -1 +1,11 @@
-postCommentForm-submit = Post
+### Localization for Embed Stream
+
+## Comments Tab
+
+comments-postCommentForm-post = Post
+comments-stream-loadMore = Load more
+comments-replyList-showAll = Show all
+
+comments-permalink-share = Share
+comments-permalink-copy = Copy
+comments-permalink-copied = Copied
diff --git a/src/locales/es/common.ftl b/src/locales/es/common.ftl
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/locales/es/framework.ftl b/src/locales/es/framework.ftl
index 9cfdf012f..2b95d944c 100644
--- a/src/locales/es/framework.ftl
+++ b/src/locales/es/framework.ftl
@@ -2,3 +2,45 @@
 ### All keys must start with `framework` because this file is shared
 ### among different targets.
 
+framework-timeago =
+  { $value ->
+    [0] ahora
+    *[other]
+      { $suffix ->
+        [ago] hace
+        [in] en
+        *[other] unknown suffix
+      }
+      { $value }
+      { $unit ->
+        [second] { $value ->
+          [1] segundo
+          *[other] segundos
+        }
+        [minute] { $value ->
+          [1] minuto
+          *[other] minutos
+        }
+        [hour] { $value ->
+          [0] hora
+          *[other] horas
+        }
+        [day] { $value ->
+          [1] dia
+          *[other] dias
+        }
+        [week] { $value ->
+          [1] semana
+          *[other] semanas
+        }
+        [month] { $value ->
+          [1] mes
+          *[other] meses
+        }
+        [year] { $value ->
+          [1] año
+          *[other] años
+        }
+        *[other] unknown unit
+      }
+  }
diff --git a/src/locales/es/stream.ftl b/src/locales/es/stream.ftl
index e69de29bb..30a906cb1 100644
--- a/src/locales/es/stream.ftl
+++ b/src/locales/es/stream.ftl
@@ -0,0 +1,3 @@
+share = Compartir
+copy = Copiar
+copied = Copiado
diff --git a/src/tsconfig.json b/src/tsconfig.json
index eddf98d29..857892f4d 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -9,26 +9,13 @@
     "outDir": "../dist",
     // See https://github.com/prismagraphql/graphql-request/issues/26 for why we
     // have to include "dom" here.
-    "lib": [
-      "es6",
-      "esnext.asynciterable",
-      "dom"
-    ],
+    "lib": ["es6", "esnext.asynciterable", "dom"],
     "baseUrl": "./",
     "paths": {
-      "talk-server/*": [
-        "./core/server/*"
-      ],
-      "talk-common/*": [
-        "./core/common/*"
-      ]
+      "talk-server/*": ["./core/server/*"],
+      "talk-common/*": ["./core/common/*"]
     }
   },
-  "include": [
-    "./**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "./core/client"
-  ]
-}
\ No newline at end of file
+  "include": ["./**/*"],
+  "exclude": ["node_modules", "./core/client"]
+}
diff --git a/src/types/react-timeago.d.ts b/src/types/react-timeago.d.ts
new file mode 100644
index 000000000..431bbf88e
--- /dev/null
+++ b/src/types/react-timeago.d.ts
@@ -0,0 +1,55 @@
+declare module "react-timeago" {
+  import React from "react";
+
+  export type Formatter = (
+    value: number,
+    unit: "second" | "minute" | "hour" | "day" | "week" | "month" | "year",
+    suffix: "ago" | "from now",
+    epochMiliseconds: string
+  ) => string | React.ReactElement<any>;
+
+  export interface LocaleDefinition {
+    prefixAgo?: string;
+    prefixFromNow?: string;
+    suffixAgo?: string;
+    suffixFromNow?: string;
+    second?: string;
+    seconds?: string;
+    minute?: string;
+    minutes?: string;
+    hour?: string;
+    hours?: string;
+    day?: string;
+    days?: string;
+    week?: string;
+    weeks?: string;
+    month?: string;
+    months?: string;
+    year?: string;
+    years?: string;
+    wordSeparator?: string;
+    numbers?: number[];
+  }
+
+  export interface TimeAgoProps {
+    date: string;
+    live?: boolean;
+    className: string;
+    formatter?: Formatter;
+  }
+
+  const TimeAgo: React.ComponentType<TimeAgoProps>;
+  export default TimeAgo;
+}
+
+declare module "react-timeago/lib/formatters/buildFormatter" {
+  import { Formatter, LocaleDefinition } from "react-timeago";
+  function buildFormatter(localeInput: LocaleDefinition): Formatter;
+  export default buildFormatter;
+}
+
+declare module "react-timeago/lib/language-strings/*" {
+  import { LocaleDefinition } from "react-timeago";
+  const localeStrings: LocaleDefinition;
+  export default localeStrings;
+}
diff --git a/src/types/relay-local-schema.d.ts b/src/types/relay-local-schema.d.ts
new file mode 100644
index 000000000..b8b637f72
--- /dev/null
+++ b/src/types/relay-local-schema.d.ts
@@ -0,0 +1,16 @@
+declare module "relay-local-schema" {
+  import { GraphQLSchema } from "graphql";
+  import { Network as RelayNetwork, FetchFunction } from "relay-runtime";
+
+  interface CreateArguments {
+    schema: GraphQLSchema;
+    rootValue?: any;
+    contextValue?: any;
+  }
+
+  export class Network {
+    static create(data: CreateArguments): RelayNetwork;
+  }
+
+  export function createFetch(data: CreateArguments): FetchFunction;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 8e15c0223..dbb50ebf7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,18 +13,14 @@
     "noImplicitAny": true,
     "strictNullChecks": true,
     "noErrorTruncation": true,
-    "lib": [
-      "es6",
-      "esnext.asynciterable"
-    ]
+    "lib": ["es6", "esnext.asynciterable"]
   },
   "include": [
     "./src/**/.*.js",
     "./scripts/**/*",
     "./config/**/*",
+    "./test/**/*",
     "*.js"
   ],
-  "exclude": [
-    "node_modules"
-  ]
-}
\ No newline at end of file
+  "exclude": ["node_modules"]
+}
diff --git a/tslint.json b/tslint.json
index 68001f8c6..853208eb0 100644
--- a/tslint.json
+++ b/tslint.json
@@ -7,10 +7,7 @@
   "rules": {
     "prettier": true,
     "object-literal-sort-keys": false,
-    "interface-name": [
-      true,
-      "never-prefix"
-    ],
+    "interface-name": [true, "never-prefix"],
     "no-switch-case-fall-through": true,
     "member-ordering": false,
     "variable-name": [
@@ -35,8 +32,6 @@
     ]
   },
   "linterOptions": {
-    "exclude": [
-      "**/node_modules/**/*"
-    ]
+    "exclude": ["**/node_modules/**/*"]
   }
-}
\ No newline at end of file
+}

From 49552e77720a31c3734095a0ac189bcdc2b8897b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 19 Jul 2018 15:07:02 -0300
Subject: [PATCH 25/69] New Components

---
 .../components/Permalink/PermalinkPopover.tsx |  9 ++++++
 .../Permalink/PermalinkShareButton.tsx        | 30 +++++++++++++++++++
 .../stream/components/Permalink/Popover.tsx   |  9 ++++++
 .../components/Permalink/ToggleShow.tsx       |  0
 4 files changed, 48 insertions(+)
 create mode 100644 src/core/client/stream/components/Permalink/PermalinkPopover.tsx
 create mode 100644 src/core/client/stream/components/Permalink/PermalinkShareButton.tsx
 create mode 100644 src/core/client/stream/components/Permalink/Popover.tsx
 create mode 100644 src/core/client/stream/components/Permalink/ToggleShow.tsx

diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
new file mode 100644
index 000000000..53f535e3b
--- /dev/null
+++ b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
@@ -0,0 +1,9 @@
+import { Manager, Popper, Reference } from "react-popper";
+
+import Popover from "./Popover";
+
+const PermalinkPopover = ({ id, show, style }) => (
+  <Popover id={id} style={style}>
+    <Textfield /> Copy
+  </Popover>
+);
diff --git a/src/core/client/stream/components/Permalink/PermalinkShareButton.tsx b/src/core/client/stream/components/Permalink/PermalinkShareButton.tsx
new file mode 100644
index 000000000..7db563182
--- /dev/null
+++ b/src/core/client/stream/components/Permalink/PermalinkShareButton.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import ToggleShow from "./ToggleShow";
+
+const PermalinkShareButton = () => (
+  <ToggleShow>
+    {({ toggleShow, show }) => (
+      <Manager>
+        <Reference>
+          {({ ref }) => (
+            <Button ref={ref} onClick={toggleShow} aria-controls="popover-id">
+              Share
+            </Button>
+          )}
+        </Reference>
+        <Popper placement="right">
+          {({ ref, style, placement, arrowProps }) => (
+            <PermalinkPopover
+              visible={show}
+              style={style}
+              ref={ref}
+              id="popover-id"
+            />
+          )}
+        </Popper>
+      </Manager>
+    )}
+  </ToggleShow>
+);
+
+export default PermalinkShareButton;
diff --git a/src/core/client/stream/components/Permalink/Popover.tsx b/src/core/client/stream/components/Permalink/Popover.tsx
new file mode 100644
index 000000000..f2c275525
--- /dev/null
+++ b/src/core/client/stream/components/Permalink/Popover.tsx
@@ -0,0 +1,9 @@
+const Popover = ({
+  id,
+  style,
+  children,
+  visible,
+  onClose,
+  firstFocusable,
+  lastFocusable,
+}) => <div aria-role="dialog">{children}</div>;
diff --git a/src/core/client/stream/components/Permalink/ToggleShow.tsx b/src/core/client/stream/components/Permalink/ToggleShow.tsx
new file mode 100644
index 000000000..e69de29bb

From 50e46b460659361ca0bf80518d203bd9d7ad2933 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 23 Jul 2018 18:17:33 -0300
Subject: [PATCH 26/69] wip

---
 package.json                                  |  4 +-
 .../stream/components/Comment/Comment.tsx     | 11 ++-
 .../client/ui/components/Popover/Popover.tsx  | 74 +++++++++++++++----
 3 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index c6494ca55..bf98bccf5 100644
--- a/package.json
+++ b/package.json
@@ -134,15 +134,15 @@
     "query-string": "^6.1.0",
     "raw-loader": "^0.5.1",
     "react": "^16.4.0",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "6.0.0-next.3e165448",
     "react-dom": "^16.4.0",
     "react-final-form": "^3.6.4",
+    "react-popper": "^1.0.0-beta.6",
     "react-relay": "github:coralproject/patched#react-relay",
     "react-responsive": "^4.1.0",
     "react-test-renderer": "^16.4.1",
     "react-timeago": "^4.1.9",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-popper": "^1.0.0-beta.6",
     "recompose": "^0.27.1",
     "relay-compiler": "github:coralproject/patched#relay-compiler",
     "relay-compiler-language-typescript": "github:coralproject/patched#relay-compiler-language-typescript",
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index d77b6c4ad..72eec2bc3 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -26,9 +26,14 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div>
-        <Popover body={<PermalinkPopover commentId={props.id} />}>
-          {({ toggleShow, ref }) => (
-            <Button onClick={toggleShow} innerRef={ref} primary>
+        <Popover
+          // tslint:disable-next-line:jsx-no-lambda
+          body={({ forwardRef }) => (
+            <PermalinkPopover commentId={props.id} forwardRef={forwardRef} />
+          )}
+        >
+          {({ toggleVisibility, forwardRef }) => (
+            <Button onClick={toggleVisibility} forwardRef={forwardRef}>
               <Localized id="comments-permalink-share">
                 <span>Share</span>
               </Localized>
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 7f02fac3c..1d3dffc8d 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -1,40 +1,84 @@
-import React from "react";
-import { RefHandler } from "react-popper";
-import Attachment from "../Attachment";
+import cn from "classnames";
+import React, { CSSProperties } from "react";
+import { Manager, Popper, Reference, RefHandler } from "react-popper";
+import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
 
 interface RenderProps {
-  toggleShow?: () => void;
-  ref?: RefHandler;
+  toggleVisibility?: () => void;
+  forwardRef?: RefHandler;
 }
 
 interface InnerProps {
-  body: React.ReactElement<any> | null;
+  body: (props: RenderProps) => any;
+  // body: React.ReactElement<any> | null;
   children: (props: RenderProps) => any;
+  description: string;
+  id?: string;
+  onClose?: () => void;
+  className?: string;
 }
 
 interface State {
-  show: false;
+  visible: false;
+}
+
+interface Props {
+  ref: any;
+  style: CSSProperties;
 }
 
 class Popover extends React.Component<InnerProps> {
   public state: State = {
-    show: false,
+    visible: false,
   };
 
-  public toggleShow = () => {
+  public toggleVisibility = () => {
     this.setState((state: State) => ({
-      show: !state.show,
+      visible: !state.visible,
     }));
   };
 
   public render() {
-    const { body, children } = this.props;
-    const { show } = this.state;
+    const { id, body, children, description, className } = this.props;
+
+    const { visible } = this.state;
+
     return (
-      <Attachment body={show ? body : null} className={styles.root}>
-        {({ ref }) => children({ toggleShow: this.toggleShow, ref })}
-      </Attachment>
+      <Manager>
+        <Reference>
+          {(props: Props) => children({ forwardRef: props.ref })}
+        </Reference>
+        <Popper
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {(props: Props) => (
+            <div
+              id={id}
+              aria-role="popup"
+              aria-labelledby={`${id}-ariainfo`}
+              aria-hidden={!visible}
+            >
+              <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+
+              {/* <ClickOutside onClickOutside={onClose}> */}
+              <div
+                style={props.style}
+                className={cn(styles.root, className)}
+                ref={props.ref}
+              >
+                {body({
+                  toggleVisibility: this.toggleVisibility,
+                  forwardRef: props.ref,
+                })}
+              </div>
+              {/* </ClickOutside> */}
+            </div>
+          )}
+        </Popper>
+      </Manager>
     );
   }
 }

From 96e7407d4ca7a90d760a5702f3e8af3535cd20b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 24 Jul 2018 13:22:22 -0300
Subject: [PATCH 27/69] Working

---
 .../client/stream/components/Comment/Comment.tsx  |  8 ++++++--
 .../client/stream/components/PermalinkPopover.css |  5 -----
 .../client/stream/components/PermalinkPopover.tsx | 15 ++++++++-------
 src/core/client/ui/components/Popover/Popover.tsx |  4 ++--
 .../client/ui/components/TextField/TextField.tsx  |  4 ++--
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 72eec2bc3..889ffbe1f 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -28,8 +28,12 @@ const Comment: StatelessComponent<CommentProps> = props => {
       <div>
         <Popover
           // tslint:disable-next-line:jsx-no-lambda
-          body={({ forwardRef }) => (
-            <PermalinkPopover commentId={props.id} forwardRef={forwardRef} />
+          body={({ toggleVisibility, forwardRef }) => (
+            <PermalinkPopover
+              commentID={props.id}
+              forwardRef={forwardRef}
+              toggleVisibility={toggleVisibility}
+            />
           )}
         >
           {({ toggleVisibility, forwardRef }) => (
diff --git a/src/core/client/stream/components/PermalinkPopover.css b/src/core/client/stream/components/PermalinkPopover.css
index 2d5f33fd2..8f956e370 100644
--- a/src/core/client/stream/components/PermalinkPopover.css
+++ b/src/core/client/stream/components/PermalinkPopover.css
@@ -3,11 +3,6 @@
 }
 
 .root {
-  background-color: #ffffff;
-  border: 1px solid #c9cacb;
-  box-sizing: border-box;
-  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 1px;
   padding: 6px 10px;
   display: flex;
 }
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index a4d8feca2..3093d009d 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -6,9 +6,10 @@ import { Button, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
-  commentId: string;
+  commentID: string;
   style?: CSSProperties;
-  innerRef?: RefHandler;
+  forwardRef?: RefHandler;
+  toggleVisibility?: () => any;
 }
 
 interface State {
@@ -34,13 +35,13 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { commentId, style, innerRef } = this.props;
+    const { commentID } = this.props;
     const { copied } = this.state;
     return (
-      <div className={styles.root} style={style} ref={innerRef}>
-        <TextField defaultValue={commentId} className={styles.textField} />
-        <CopyToClipboard text={commentId} onCopy={this.onCopy}>
-          <Button primary>
+      <div className={styles.root}>
+        <TextField defaultValue={commentID} className={styles.textField} />
+        <CopyToClipboard text={commentID} onCopy={this.onCopy}>
+          <Button color="primary" variant="filled">
             {copied ? (
               <Localized id="comments-permalink-copied">
                 <span>Copied!</span>
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 1d3dffc8d..0873f42c1 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -13,7 +13,7 @@ interface InnerProps {
   body: (props: RenderProps) => any;
   // body: React.ReactElement<any> | null;
   children: (props: RenderProps) => any;
-  description: string;
+  description?: string;
   id?: string;
   onClose?: () => void;
   className?: string;
@@ -57,7 +57,7 @@ class Popover extends React.Component<InnerProps> {
           {(props: Props) => (
             <div
               id={id}
-              aria-role="popup"
+              role="popup"
               aria-labelledby={`${id}-ariainfo`}
               aria-hidden={!visible}
             >
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index ac980b102..6b530a3db 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -7,8 +7,8 @@ interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
   classes?: typeof styles;
 }
 
-const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+const TextField: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
   return <input {...rest} className={cn(styles.root, className)} />;
 };
 
-export default Input;
+export default TextField;

From 21120bf76028adce3a91c6b3428de19d5da2eebb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 24 Jul 2018 13:42:54 -0300
Subject: [PATCH 28/69] Placement and docs added

---
 .../client/ui/components/Popover/Popover.mdx  | 29 +++++++
 .../client/ui/components/Popover/Popover.tsx  | 85 +++++++++++++------
 2 files changed, 88 insertions(+), 26 deletions(-)
 create mode 100644 src/core/client/ui/components/Popover/Popover.mdx

diff --git a/src/core/client/ui/components/Popover/Popover.mdx b/src/core/client/ui/components/Popover/Popover.mdx
new file mode 100644
index 000000000..936cc615e
--- /dev/null
+++ b/src/core/client/ui/components/Popover/Popover.mdx
@@ -0,0 +1,29 @@
+---
+name: Popover
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import Popover from './Popover'
+import Button from '../Button'
+
+# Popover
+
+`Popover` uses `react-popper`
+
+## Basic usage
+<Playground>
+  <Popover
+    // tslint:disable-next-line:jsx-no-lambda
+    placement="top"
+    body={({ toggleVisibility, forwardRef }) => (
+      <div>This is the body</div>
+    )}
+  >
+    {({ toggleVisibility, forwardRef }) => (
+      <Button onClick={toggleVisibility} forwardRef={forwardRef}>
+        Click me!
+      </Button>
+    )}
+  </Popover>
+</Playground>
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 0873f42c1..3564aa7ee 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -4,10 +4,22 @@ import { Manager, Popper, Reference, RefHandler } from "react-popper";
 import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
 
-interface RenderProps {
-  toggleVisibility?: () => void;
-  forwardRef?: RefHandler;
-}
+type Placement =
+  | "auto-start"
+  | "auto"
+  | "auto-end"
+  | "top-start"
+  | "top"
+  | "top-end"
+  | "right-start"
+  | "right"
+  | "right-end"
+  | "bottom-end"
+  | "bottom"
+  | "bottom-start"
+  | "left-end"
+  | "left"
+  | "left-start";
 
 interface InnerProps {
   body: (props: RenderProps) => any;
@@ -17,6 +29,7 @@ interface InnerProps {
   id?: string;
   onClose?: () => void;
   className?: string;
+  placement?: Placement;
 }
 
 interface State {
@@ -28,6 +41,11 @@ interface Props {
   style: CSSProperties;
 }
 
+interface RenderProps {
+  toggleVisibility?: () => void;
+  forwardRef?: RefHandler;
+}
+
 class Popover extends React.Component<InnerProps> {
   public state: State = {
     visible: false,
@@ -40,43 +58,58 @@ class Popover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { id, body, children, description, className } = this.props;
+    const {
+      id,
+      body,
+      children,
+      description,
+      className,
+      placement,
+    } = this.props;
 
     const { visible } = this.state;
 
     return (
       <Manager>
         <Reference>
-          {(props: Props) => children({ forwardRef: props.ref })}
+          {(props: Props) =>
+            children({
+              forwardRef: props.ref,
+              toggleVisibility: this.toggleVisibility,
+            })
+          }
         </Reference>
         <Popper
+          placement={placement}
           modifiers={{ preventOverflow: { enabled: false } }}
           eventsEnabled
           positionFixed={false}
         >
-          {(props: Props) => (
-            <div
-              id={id}
-              role="popup"
-              aria-labelledby={`${id}-ariainfo`}
-              aria-hidden={!visible}
-            >
-              <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
-
-              {/* <ClickOutside onClickOutside={onClose}> */}
+          {(props: Props) =>
+            visible && (
               <div
-                style={props.style}
-                className={cn(styles.root, className)}
-                ref={props.ref}
+                id={id}
+                role="popup"
+                aria-labelledby={`${id}-ariainfo`}
+                aria-hidden={!visible}
               >
-                {body({
-                  toggleVisibility: this.toggleVisibility,
-                  forwardRef: props.ref,
-                })}
+                <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+
+                {/* <ClickOutside onClickOutside={onClose}> */}
+                <div
+                  style={props.style}
+                  className={cn(styles.root, className)}
+                  ref={props.ref}
+                >
+                  {body({
+                    toggleVisibility: this.toggleVisibility,
+                    forwardRef: props.ref,
+                  })}
+                </div>
+                {/* </ClickOutside> */}
               </div>
-              {/* </ClickOutside> */}
-            </div>
-          )}
+            )
+          }
         </Popper>
       </Manager>
     );

From 31e6735ddddd5e1c76929b4f68e8c2cb33c0f84e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 24 Jul 2018 13:57:39 -0300
Subject: [PATCH 29/69] Now body prop accepts a function or an element

---
 .../client/ui/components/Popover/Popover.mdx  | 23 +++++++++++++++++--
 .../client/ui/components/Popover/Popover.tsx  | 14 ++++++-----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/core/client/ui/components/Popover/Popover.mdx b/src/core/client/ui/components/Popover/Popover.mdx
index 936cc615e..7623a293d 100644
--- a/src/core/client/ui/components/Popover/Popover.mdx
+++ b/src/core/client/ui/components/Popover/Popover.mdx
@@ -9,15 +9,34 @@ import Button from '../Button'
 
 # Popover
 
-`Popover` uses `react-popper`
+`Popover` uses `react-popper` that has `Popper.js` behind.
 
 ## Basic usage
+<Playground>
+  <Popover
+    // tslint:disable-next-line:jsx-no-lambda
+    body={<div>This is the body</div>}
+  >
+    {({ toggleVisibility, forwardRef }) => (
+      <Button onClick={toggleVisibility} forwardRef={forwardRef}>
+        Click me!
+      </Button>
+    )}
+  </Popover>
+</Playground>
+
+#### Example with `placement=top`
 <Playground>
   <Popover
     // tslint:disable-next-line:jsx-no-lambda
     placement="top"
     body={({ toggleVisibility, forwardRef }) => (
-      <div>This is the body</div>
+      <div>
+        This is the body
+        <Button onClick={toggleVisibility}>
+          Close
+        </Button>
+      </div>
     )}
   >
     {({ toggleVisibility, forwardRef }) => (
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 3564aa7ee..3b30c0b91 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { CSSProperties } from "react";
+import React, { CSSProperties, isValidElement } from "react";
 import { Manager, Popper, Reference, RefHandler } from "react-popper";
 import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
@@ -22,7 +22,7 @@ type Placement =
   | "left-start";
 
 interface InnerProps {
-  body: (props: RenderProps) => any;
+  body: (props: RenderProps) => any | React.ReactElement<any>;
   // body: React.ReactElement<any> | null;
   children: (props: RenderProps) => any;
   description?: string;
@@ -101,10 +101,12 @@ class Popover extends React.Component<InnerProps> {
                   className={cn(styles.root, className)}
                   ref={props.ref}
                 >
-                  {body({
-                    toggleVisibility: this.toggleVisibility,
-                    forwardRef: props.ref,
-                  })}
+                  {isValidElement(body)
+                    ? body
+                    : body({
+                        toggleVisibility: this.toggleVisibility,
+                        forwardRef: props.ref,
+                      })}
                 </div>
                 {/* </ClickOutside> */}
               </div>

From aee0fbf7ab3c633b21dd7519c0e86657c279eea3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 24 Jul 2018 16:09:56 -0300
Subject: [PATCH 30/69] Support for esc char

---
 .../stream/components/Comment/Comment.tsx     | 25 ++-----
 .../client/stream/components/Permalink.tsx    |  0
 .../stream/components/Permalink/Permalink.tsx | 36 ++++++++++
 .../{ => Permalink}/PermalinkPopover.css      |  2 -
 .../components/Permalink/PermalinkPopover.tsx | 66 +++++++++++++++++--
 .../Permalink/PermalinkShareButton.tsx        | 30 ---------
 .../stream/components/Permalink/Popover.tsx   |  9 ---
 .../components/Permalink/ToggleShow.tsx       |  0
 .../stream/components/PermalinkPopover.tsx    | 61 -----------------
 src/core/client/tslint.json                   |  6 +-
 .../client/ui/components/Popover/Popover.css  | 10 +--
 .../client/ui/components/Popover/Popover.mdx  |  4 +-
 .../client/ui/components/Popover/Popover.tsx  | 23 ++++++-
 13 files changed, 132 insertions(+), 140 deletions(-)
 delete mode 100644 src/core/client/stream/components/Permalink.tsx
 create mode 100644 src/core/client/stream/components/Permalink/Permalink.tsx
 rename src/core/client/stream/components/{ => Permalink}/PermalinkPopover.css (55%)
 delete mode 100644 src/core/client/stream/components/Permalink/PermalinkShareButton.tsx
 delete mode 100644 src/core/client/stream/components/Permalink/Popover.tsx
 delete mode 100644 src/core/client/stream/components/Permalink/ToggleShow.tsx
 delete mode 100644 src/core/client/stream/components/PermalinkPopover.tsx

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 889ffbe1f..64cefb266 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -1,8 +1,8 @@
-import { Localized } from "fluent-react/compat";
 import React from "react";
 import { StatelessComponent } from "react";
-import { Button, Popover, Typography } from "talk-ui/components";
-import PermalinkPopover from "../PermalinkPopover";
+import { Typography } from "talk-ui/components";
+
+import Permalink from "../Permalink/Permalink";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";
@@ -26,24 +26,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div>
-        <Popover
-          // tslint:disable-next-line:jsx-no-lambda
-          body={({ toggleVisibility, forwardRef }) => (
-            <PermalinkPopover
-              commentID={props.id}
-              forwardRef={forwardRef}
-              toggleVisibility={toggleVisibility}
-            />
-          )}
-        >
-          {({ toggleVisibility, forwardRef }) => (
-            <Button onClick={toggleVisibility} forwardRef={forwardRef}>
-              <Localized id="comments-permalink-share">
-                <span>Share</span>
-              </Localized>
-            </Button>
-          )}
-        </Popover>
+        <Permalink commentID={props.id} />
       </div>
     </div>
   );
diff --git a/src/core/client/stream/components/Permalink.tsx b/src/core/client/stream/components/Permalink.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx
new file mode 100644
index 000000000..f50c5d505
--- /dev/null
+++ b/src/core/client/stream/components/Permalink/Permalink.tsx
@@ -0,0 +1,36 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+import { Button, Popover } from "talk-ui/components";
+import PermalinkPopover from "./PermalinkPopover";
+
+interface InnerProps {
+  commentID: string;
+}
+
+class Permalink extends React.Component<InnerProps> {
+  public render() {
+    const { commentID } = this.props;
+    return (
+      <Popover
+        placement="top"
+        body={({ toggleVisibility, forwardRef }) => (
+          <PermalinkPopover
+            commentID={commentID}
+            forwardRef={forwardRef}
+            toggleVisibility={toggleVisibility}
+          />
+        )}
+      >
+        {({ toggleVisibility, forwardRef }) => (
+          <Button onClick={toggleVisibility} forwardRef={forwardRef}>
+            <Localized id="comments-permalink-share">
+              <span>Share</span>
+            </Localized>
+          </Button>
+        )}
+      </Popover>
+    );
+  }
+}
+
+export default Permalink;
diff --git a/src/core/client/stream/components/PermalinkPopover.css b/src/core/client/stream/components/Permalink/PermalinkPopover.css
similarity index 55%
rename from src/core/client/stream/components/PermalinkPopover.css
rename to src/core/client/stream/components/Permalink/PermalinkPopover.css
index 8f956e370..fe47c28d3 100644
--- a/src/core/client/stream/components/PermalinkPopover.css
+++ b/src/core/client/stream/components/Permalink/PermalinkPopover.css
@@ -3,6 +3,4 @@
 }
 
 .root {
-  padding: 6px 10px;
-  display: flex;
 }
diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
index 53f535e3b..a5ff7301f 100644
--- a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
@@ -1,9 +1,61 @@
-import { Manager, Popper, Reference } from "react-popper";
+import { Localized } from "fluent-react/compat";
+import React, { CSSProperties } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { RefHandler } from "react-popper";
+import { Button, Flex, TextField } from "talk-ui/components";
+import * as styles from "./PermalinkPopover.css";
 
-import Popover from "./Popover";
+interface InnerProps {
+  commentID: string;
+  style?: CSSProperties;
+  forwardRef?: RefHandler;
+  toggleVisibility?: () => any;
+}
 
-const PermalinkPopover = ({ id, show, style }) => (
-  <Popover id={id} style={style}>
-    <Textfield /> Copy
-  </Popover>
-);
+interface State {
+  copied: boolean;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
+  public state: State = {
+    copied: false,
+  };
+
+  public onCopy = async () => {
+    await this.toggleCopied();
+    setTimeout(() => {
+      this.toggleCopied();
+    }, 800);
+  };
+
+  public toggleCopied = () => {
+    this.setState((state: State) => ({
+      copied: !state.copied,
+    }));
+  };
+
+  public render() {
+    const { commentID } = this.props;
+    const { copied } = this.state;
+    return (
+      <Flex>
+        <TextField defaultValue={commentID} className={styles.textField} />
+        <CopyToClipboard text={commentID} onCopy={this.onCopy}>
+          <Button color="primary" variant="filled">
+            {copied ? (
+              <Localized id="comments-permalink-copied">
+                <span>Copied!</span>
+              </Localized>
+            ) : (
+              <Localized id="comments-permalink-copy">
+                <span>Copy</span>
+              </Localized>
+            )}
+          </Button>
+        </CopyToClipboard>
+      </Flex>
+    );
+  }
+}
+
+export default PermalinkPopover;
diff --git a/src/core/client/stream/components/Permalink/PermalinkShareButton.tsx b/src/core/client/stream/components/Permalink/PermalinkShareButton.tsx
deleted file mode 100644
index 7db563182..000000000
--- a/src/core/client/stream/components/Permalink/PermalinkShareButton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import ToggleShow from "./ToggleShow";
-
-const PermalinkShareButton = () => (
-  <ToggleShow>
-    {({ toggleShow, show }) => (
-      <Manager>
-        <Reference>
-          {({ ref }) => (
-            <Button ref={ref} onClick={toggleShow} aria-controls="popover-id">
-              Share
-            </Button>
-          )}
-        </Reference>
-        <Popper placement="right">
-          {({ ref, style, placement, arrowProps }) => (
-            <PermalinkPopover
-              visible={show}
-              style={style}
-              ref={ref}
-              id="popover-id"
-            />
-          )}
-        </Popper>
-      </Manager>
-    )}
-  </ToggleShow>
-);
-
-export default PermalinkShareButton;
diff --git a/src/core/client/stream/components/Permalink/Popover.tsx b/src/core/client/stream/components/Permalink/Popover.tsx
deleted file mode 100644
index f2c275525..000000000
--- a/src/core/client/stream/components/Permalink/Popover.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const Popover = ({
-  id,
-  style,
-  children,
-  visible,
-  onClose,
-  firstFocusable,
-  lastFocusable,
-}) => <div aria-role="dialog">{children}</div>;
diff --git a/src/core/client/stream/components/Permalink/ToggleShow.tsx b/src/core/client/stream/components/Permalink/ToggleShow.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
deleted file mode 100644
index 3093d009d..000000000
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React, { CSSProperties } from "react";
-import CopyToClipboard from "react-copy-to-clipboard";
-import { RefHandler } from "react-popper";
-import { Button, TextField } from "talk-ui/components";
-import * as styles from "./PermalinkPopover.css";
-
-interface InnerProps {
-  commentID: string;
-  style?: CSSProperties;
-  forwardRef?: RefHandler;
-  toggleVisibility?: () => any;
-}
-
-interface State {
-  copied: boolean;
-}
-
-class PermalinkPopover extends React.Component<InnerProps> {
-  public state: State = {
-    copied: false,
-  };
-
-  public onCopy = async () => {
-    await this.toggleCopied();
-    setTimeout(() => {
-      this.toggleCopied();
-    }, 800);
-  };
-
-  public toggleCopied = () => {
-    this.setState((state: State) => ({
-      copied: !state.copied,
-    }));
-  };
-
-  public render() {
-    const { commentID } = this.props;
-    const { copied } = this.state;
-    return (
-      <div className={styles.root}>
-        <TextField defaultValue={commentID} className={styles.textField} />
-        <CopyToClipboard text={commentID} onCopy={this.onCopy}>
-          <Button color="primary" variant="filled">
-            {copied ? (
-              <Localized id="comments-permalink-copied">
-                <span>Copied!</span>
-              </Localized>
-            ) : (
-              <Localized id="comments-permalink-copy">
-                <span>Copy</span>
-              </Localized>
-            )}
-          </Button>
-        </CopyToClipboard>
-      </div>
-    );
-  }
-}
-
-export default PermalinkPopover;
diff --git a/src/core/client/tslint.json b/src/core/client/tslint.json
index 0079a6de1..a2fafdc6b 100644
--- a/src/core/client/tslint.json
+++ b/src/core/client/tslint.json
@@ -3,11 +3,13 @@
   "rules": {
     "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [true, "never"]
+    "jsx-boolean-value": [true, "never"],
+    "jsx-no-lambda": false
   },
   "jsRules": {
     "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [true, "never"]
+    "jsx-boolean-value": [true, "never"],
+    "jsx-no-lambda": false
   }
 }
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
index 708964cdb..89037c5f3 100644
--- a/src/core/client/ui/components/Popover/Popover.css
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -1,15 +1,15 @@
 .root {
-  padding: 6px 10px;
-  background: #ffffff !important;
+  background: #ffffff;
   border: 1px solid #c9cacb;
   box-sizing: border-box;
   box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
   border-radius: 1px;
-  color: #222 !important;
-  display: flex !important;
+  color: #222;
+  display: flex;
+  padding: 6px 10px;
 
   &:after,
   &::before {
-    border-top-color: transparent !important;
+    border-top-color: transparent;
   }
 }
diff --git a/src/core/client/ui/components/Popover/Popover.mdx b/src/core/client/ui/components/Popover/Popover.mdx
index 7623a293d..ad1c22e63 100644
--- a/src/core/client/ui/components/Popover/Popover.mdx
+++ b/src/core/client/ui/components/Popover/Popover.mdx
@@ -6,6 +6,7 @@ menu: UI Kit
 import { Playground, PropsTable } from 'docz'
 import Popover from './Popover'
 import Button from '../Button'
+import ButtonIcon from '../Button/ButtonIcon'
 
 # Popover
 
@@ -14,7 +15,6 @@ import Button from '../Button'
 ## Basic usage
 <Playground>
   <Popover
-    // tslint:disable-next-line:jsx-no-lambda
     body={<div>This is the body</div>}
   >
     {({ toggleVisibility, forwardRef }) => (
@@ -28,12 +28,12 @@ import Button from '../Button'
 #### Example with `placement=top`
 <Playground>
   <Popover
-    // tslint:disable-next-line:jsx-no-lambda
     placement="top"
     body={({ toggleVisibility, forwardRef }) => (
       <div>
         This is the body
         <Button onClick={toggleVisibility}>
+          <ButtonIcon>close</ButtonIcon>
           Close
         </Button>
       </div>
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 3b30c0b91..e318810d1 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -57,6 +57,27 @@ class Popover extends React.Component<InnerProps> {
     }));
   };
 
+  public close = () => {
+    this.setState((state: State) => ({
+      visible: false,
+    }));
+  };
+
+  public handleEsc = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.close();
+    }
+  };
+
+  public componentDidMount() {
+    document.addEventListener("keydown", this.handleEsc, true);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleEsc, true);
+  }
+
   public render() {
     const {
       id,
@@ -95,7 +116,7 @@ class Popover extends React.Component<InnerProps> {
               >
                 <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
 
-                {/* <ClickOutside onClickOutside={onClose}> */}
+                {/* <ClickOutside onClickOutside={toggleVisibility}> */}
                 <div
                   style={props.style}
                   className={cn(styles.root, className)}

From 41791ebf79995837b26c83bd20851dc6ba7ea023 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 24 Jul 2018 16:18:15 -0300
Subject: [PATCH 31/69] Playground changes

---
 src/core/client/ui/components/Popover/Popover.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/core/client/ui/components/Popover/Popover.mdx b/src/core/client/ui/components/Popover/Popover.mdx
index ad1c22e63..e051df50d 100644
--- a/src/core/client/ui/components/Popover/Popover.mdx
+++ b/src/core/client/ui/components/Popover/Popover.mdx
@@ -6,6 +6,7 @@ menu: UI Kit
 import { Playground, PropsTable } from 'docz'
 import Popover from './Popover'
 import Button from '../Button'
+import Typography from '../Typography'
 import ButtonIcon from '../Button/ButtonIcon'
 
 # Popover
@@ -15,10 +16,10 @@ import ButtonIcon from '../Button/ButtonIcon'
 ## Basic usage
 <Playground>
   <Popover
-    body={<div>This is the body</div>}
+    body={<div><Typography>This is the body</Typography></div>}
   >
     {({ toggleVisibility, forwardRef }) => (
-      <Button onClick={toggleVisibility} forwardRef={forwardRef}>
+      <Button onClick={toggleVisibility} forwardRef={forwardRef} variant="filled" color="primary">
         Click me!
       </Button>
     )}
@@ -31,16 +32,15 @@ import ButtonIcon from '../Button/ButtonIcon'
     placement="top"
     body={({ toggleVisibility, forwardRef }) => (
       <div>
-        This is the body
-        <Button onClick={toggleVisibility}>
+        <Button onClick={toggleVisibility} variant="filled" size="small">
           <ButtonIcon>close</ButtonIcon>
-          Close
         </Button>
+        <Typography>This is the body</Typography>
       </div>
     )}
   >
     {({ toggleVisibility, forwardRef }) => (
-      <Button onClick={toggleVisibility} forwardRef={forwardRef}>
+      <Button onClick={toggleVisibility} forwardRef={forwardRef} variant="filled" color="primary">
         Click me!
       </Button>
     )}

From b421ea97b3ee30ea9143fc3af9912b06b97d7a14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 24 Jul 2018 16:20:15 -0300
Subject: [PATCH 32/69] reordering package json

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index bf98bccf5..40dc922bc 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,6 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "@types/react-copy-to-clipboard": "^4.2.5",
-    "@types/react-tooltip": "^3.3.5",
     "apollo-server-express": "^1.3.6",
     "bunyan": "^1.8.12",
     "convict": "^4.3.1",
@@ -78,10 +76,12 @@
     "@types/node": "^10.5.2",
     "@types/passport": "^0.4.5",
     "@types/query-string": "^6.1.0",
+    "@types/react-copy-to-clipboard": "^4.2.5",
     "@types/react-dom": "^16.0.6",
     "@types/react-relay": "github:coralproject/patched#types/react-relay",
     "@types/react-responsive": "^3.0.1",
     "@types/react-test-renderer": "^16.0.1",
+    "@types/react-tooltip": "^3.3.5",
     "@types/recompose": "^0.26.1",
     "@types/relay-runtime": "github:coralproject/patched#types/relay-runtime",
     "@types/sane": "^2.0.0",

From 40ab723cf11b64677b43b568c01dc4d145bb292d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 25 Jul 2018 12:15:03 -0300
Subject: [PATCH 33/69] Server retrieve by single comment

---
 src/core/server/graph/tenant/resolvers/query.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/core/server/graph/tenant/resolvers/query.ts b/src/core/server/graph/tenant/resolvers/query.ts
index ae76679a9..01ebde5f5 100644
--- a/src/core/server/graph/tenant/resolvers/query.ts
+++ b/src/core/server/graph/tenant/resolvers/query.ts
@@ -6,5 +6,10 @@ export default {
     { id }: { id: string; url: string },
     ctx: TenantContext
   ) => ctx.loaders.Assets.asset.load(id),
+  comment: async (
+    source: void,
+    { id }: { id: string; url: string },
+    ctx: TenantContext
+  ) => ctx.loaders.Comments.comment.load(id),
   settings: async (parent: any, args: any, ctx: TenantContext) => ctx.tenant,
 };

From e5195031295827a451b55e776c8a1488f8d8fd67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 25 Jul 2018 14:06:25 -0300
Subject: [PATCH 34/69] Progress:

---
 .../stream/components/PermalinkView.tsx       | 26 ++++++
 src/core/client/stream/components/Stream.tsx  | 93 +++++++++++--------
 .../client/stream/containers/AppContainer.tsx |  1 +
 .../containers/PermalinkViewContainer.tsx     | 37 ++++++++
 .../client/stream/local/initLocalState.ts     |  5 +
 src/core/client/stream/local/local.graphql    |  1 +
 src/core/client/stream/queries/AppQuery.tsx   |  6 ++
 .../stream/queries/PermalinkViewQuery.tsx     | 57 ++++++++++++
 .../server/graph/tenant/resolvers/query.ts    |  2 +-
 9 files changed, 189 insertions(+), 39 deletions(-)
 create mode 100644 src/core/client/stream/components/PermalinkView.tsx
 create mode 100644 src/core/client/stream/containers/PermalinkViewContainer.tsx
 create mode 100644 src/core/client/stream/queries/PermalinkViewQuery.tsx

diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
new file mode 100644
index 000000000..f0e884fc8
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { CommentProps } from "talk-stream/components/Comment";
+import { Flex } from "talk-ui/components";
+import CommentContainer from "../containers/CommentContainer";
+
+export interface AppProps {
+  comment: CommentProps | null;
+}
+
+const PermalinkView: StatelessComponent<AppProps> = props => {
+  if (props.comment) {
+    return (
+      <Flex justifyContent="center">
+        <Flex direction="column" itemGutter>
+          <CommentContainer data={props.comment} />
+        </Flex>
+      </Flex>
+    );
+  }
+
+  return <div> Error </div>;
+};
+
+export default PermalinkView;
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 9dbb21c5b..fd70e3630 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -10,50 +10,67 @@ import ReplyListContainer from "../containers/ReplyListContainer";
 import Logo from "./Logo";
 import * as styles from "./Stream.css";
 
+import { Comment, CommentProps } from "talk-stream/components/Comment";
+
 export interface StreamProps {
   assetID: string;
-  isClosed: boolean;
-  comments: ReadonlyArray<{ id: string }>;
-  onLoadMore: () => void;
-  hasMore: boolean;
-  disableLoadMore: boolean;
+  comment?: CommentProps;
+  isClosed?: boolean;
+  comments?: ReadonlyArray<{ id: string }>;
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  disableLoadMore?: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
-  return (
-    <div className={styles.root}>
-      <Logo gutterBottom />
-      <PostCommentFormContainer assetID={props.assetID} />
-      <Flex
-        direction="column"
-        id="talk-comments-stream-log"
-        role="log"
-        aria-live="polite"
-        itemGutter
-      >
-        {props.comments.map(comment => (
-          <Flex direction="column" key={comment.id} itemGutter>
-            <CommentContainer data={comment} />
-            <ReplyListContainer comment={comment} />
-          </Flex>
-        ))}
-        {props.hasMore && (
-          <Localized id="comments-stream-loadMore">
-            <Button
-              id={"talk-comments-stream-loadMore"}
-              onClick={props.onLoadMore}
-              variant="outlined"
-              fullWidth
-              disabled={props.disableLoadMore}
-              aria-controls="talk-comments-stream-log"
-            >
-              Load More
-            </Button>
-          </Localized>
-        )}
+  if (props.comment) {
+    return (
+      <Flex justifyContent="center" className={styles.root}>
+        <Flex direction="column" itemGutter>
+          <Comment {...props.comment} />
+        </Flex>
       </Flex>
-    </div>
-  );
+    );
+  }
+
+  if (props.comments) {
+    return (
+      <div className={styles.root}>
+        <Logo gutterBottom />
+        <PostCommentFormContainer assetID={props.assetID} />
+        <Flex
+          direction="column"
+          id="talk-comments-stream-log"
+          role="log"
+          aria-live="polite"
+          itemGutter
+        >
+          {props.comments.map(comment => (
+            <Flex direction="column" key={comment.id} itemGutter>
+              <CommentContainer data={comment} />
+              <ReplyListContainer comment={comment} />
+            </Flex>
+          ))}
+          {props.hasMore && (
+            <Localized id="comments-stream-loadMore">
+              <Button
+                id={"talk-comments-stream-loadMore"}
+                onClick={props.onLoadMore}
+                variant="outlined"
+                fullWidth
+                disabled={props.disableLoadMore}
+                aria-controls="talk-comments-stream-log"
+              >
+                Load More
+              </Button>
+            </Localized>
+          )}
+        </Flex>
+      </div>
+    );
+  }
+
+  return <div>Error</div>;
 };
 
 export default Stream;
diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index 90eb1e1c6..f090ba128 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -12,6 +12,7 @@ interface InnerProps {
 }
 
 export const AppContainer: StatelessComponent<InnerProps> = props => {
+  console.log("App query render", props);
   return <App {...props.data} />;
 };
 
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
new file mode 100644
index 000000000..8cd464b81
--- /dev/null
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -0,0 +1,37 @@
+import React, { StatelessComponent } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { PropTypesOf } from "talk-framework/types";
+
+import PermalinkView from "../components/PermalinkView";
+
+import { PermalinkViewContainer as Data } from "talk-stream/__generated__/PermalinkViewContainer.graphql";
+
+interface InnerProps {
+  data: Data;
+}
+
+export const PermalinkViewContainer: StatelessComponent<InnerProps> = props => {
+  console.log("App query render", props);
+  return <PermalinkView {...props.data} />;
+};
+
+const enhanced = withFragmentContainer<{ data: Data }>({
+  data: graphql`
+    fragment PermalinkViewContainer on Query
+      @argumentDefinitions(commentID: { type: "ID!" }) {
+      comment(id: $commentID) {
+        id
+        body
+        author {
+          username
+        }
+        createdAt
+      }
+    }
+  `,
+})(PermalinkViewContainer);
+
+export type PermalinkViewContainerProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index d65ea6331..2786b3ef2 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -21,10 +21,15 @@ export default async function initLocalState(environment: Environment) {
 
     // Parse query params
     const query = qs.parse(location.search);
+
     if (query.assetID) {
       localRecord.setValue(query.assetID, "assetID");
     }
 
+    if (query.commentID) {
+      localRecord.setValue(query.commentID, "commentID");
+    }
+
     // Create network Record
     const networkRecord = createAndRetain(
       environment,
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 3359458d0..59c829490 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -6,6 +6,7 @@ type Network {
 type Local {
   network: Network!
   assetID: String
+  commentID: String
 }
 
 extend type Query {
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 3fe95b6d9..3e6072c27 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -14,6 +14,7 @@ import {
 import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 
 import AppContainer from "../containers/AppContainer";
+import PermalinkViewQuery from "./PermalinkViewQuery";
 
 export const render = ({ error, props }: ReadyState<AppQueryResponse>) => {
   if (error) {
@@ -30,6 +31,10 @@ interface InnerProps {
 }
 
 const AppQuery: StatelessComponent<InnerProps> = props => {
+  if (props.local.commentID) {
+    return <PermalinkViewQuery commentID={props.local.commentID} />;
+  }
+
   return (
     <QueryRenderer<AppQueryVariables, AppQueryResponse>
       query={graphql`
@@ -49,6 +54,7 @@ const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment AppQueryLocal on Local {
       assetID
+      commentID
     }
   `
 )(AppQuery);
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/queries/PermalinkViewQuery.tsx
new file mode 100644
index 000000000..d48caf00f
--- /dev/null
+++ b/src/core/client/stream/queries/PermalinkViewQuery.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { ReadyState } from "react-relay";
+
+import { graphql, QueryRenderer } from "talk-framework/lib/relay";
+
+import {
+  PermalinkViewQueryResponse,
+  PermalinkViewQueryVariables,
+} from "talk-stream/__generated__/PermalinkViewQuery.graphql";
+import { PermalinkViewContainer } from "talk-stream/containers/PermalinkViewContainer";
+
+export interface CommentData {
+  id: string;
+  author: {
+    username: string;
+  } | null;
+  body: string | null;
+  createdAt: string;
+}
+
+export const render = ({
+  error,
+  props,
+}: ReadyState<{
+  comment: CommentData;
+}>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+  if (props) {
+    return <PermalinkViewContainer data={props} />;
+  }
+  return <div>Loading</div>;
+};
+
+interface InnerProps {
+  commentID: string;
+}
+
+const PermalinkViewQuery: StatelessComponent<InnerProps> = props => {
+  return (
+    <QueryRenderer<PermalinkViewQueryVariables, PermalinkViewQueryResponse>
+      query={graphql`
+        query PermalinkViewQuery($commentID: ID!) {
+          ...PermalinkViewContainer @arguments(commentID: $commentID)
+        }
+      `}
+      variables={{
+        commentID: props.commentID,
+      }}
+      render={render}
+    />
+  );
+};
+
+export default PermalinkViewQuery;
diff --git a/src/core/server/graph/tenant/resolvers/query.ts b/src/core/server/graph/tenant/resolvers/query.ts
index 01ebde5f5..91a31e7b8 100644
--- a/src/core/server/graph/tenant/resolvers/query.ts
+++ b/src/core/server/graph/tenant/resolvers/query.ts
@@ -10,6 +10,6 @@ export default {
     source: void,
     { id }: { id: string; url: string },
     ctx: TenantContext
-  ) => ctx.loaders.Comments.comment.load(id),
+  ) => (id ? ctx.loaders.Comments.comment.load(id) : null),
   settings: async (parent: any, args: any, ctx: TenantContext) => ctx.tenant,
 };

From 906940f15259c837990fecefebddba593df910d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 25 Jul 2018 17:24:14 -0300
Subject: [PATCH 35/69] Working single comment view

---
 .../stream/components/Comment/Comment.tsx     |  4 +-
 .../stream/components/Permalink/Permalink.tsx |  5 +-
 .../Permalink/PermalinkContainer.tsx          | 25 ++++++
 .../components/Permalink/PermalinkPopover.tsx |  8 +-
 .../stream/components/PermalinkView.tsx       | 11 ++-
 src/core/client/stream/components/Stream.tsx  | 85 ++++++++-----------
 .../client/stream/containers/AppContainer.tsx |  1 -
 .../stream/containers/CommentContainer.tsx    |  2 +-
 .../containers/PermalinkViewContainer.tsx     | 10 +--
 .../client/stream/local/initLocalState.ts     |  6 ++
 src/core/client/stream/local/local.graphql    |  2 +
 src/core/client/stream/queries/AppQuery.tsx   | 56 ++++++++----
 .../stream/queries/PermalinkViewQuery.tsx     | 57 -------------
 13 files changed, 125 insertions(+), 147 deletions(-)
 create mode 100644 src/core/client/stream/components/Permalink/PermalinkContainer.tsx
 delete mode 100644 src/core/client/stream/queries/PermalinkViewQuery.tsx

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 64cefb266..8f8553fce 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
-import Permalink from "../Permalink/Permalink";
+import PermalinkContainer from "../Permalink/PermalinkContainer";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";
@@ -26,7 +26,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div>
-        <Permalink commentID={props.id} />
+        <PermalinkContainer commentID={props.id} />
       </div>
     </div>
   );
diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx
index f50c5d505..20b9c3a5c 100644
--- a/src/core/client/stream/components/Permalink/Permalink.tsx
+++ b/src/core/client/stream/components/Permalink/Permalink.tsx
@@ -5,17 +5,18 @@ import PermalinkPopover from "./PermalinkPopover";
 
 interface InnerProps {
   commentID: string;
+  origin: string | null;
 }
 
 class Permalink extends React.Component<InnerProps> {
   public render() {
-    const { commentID } = this.props;
+    const { commentID, origin } = this.props;
     return (
       <Popover
         placement="top"
         body={({ toggleVisibility, forwardRef }) => (
           <PermalinkPopover
-            commentID={commentID}
+            permalinkUrl={`${origin}/?commentID=${commentID}`}
             forwardRef={forwardRef}
             toggleVisibility={toggleVisibility}
           />
diff --git a/src/core/client/stream/components/Permalink/PermalinkContainer.tsx b/src/core/client/stream/components/Permalink/PermalinkContainer.tsx
new file mode 100644
index 000000000..4364a8e0b
--- /dev/null
+++ b/src/core/client/stream/components/Permalink/PermalinkContainer.tsx
@@ -0,0 +1,25 @@
+import React, { StatelessComponent } from "react";
+import { graphql } from "react-relay";
+import { withLocalStateContainer } from "talk-framework/lib/relay";
+import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
+
+import Permalink from "./Permalink";
+
+interface InnerProps {
+  local: Local;
+  commentID: string;
+}
+
+export const PermalinkContainer: StatelessComponent<InnerProps> = props => {
+  return <Permalink {...props} origin={props.local.origin} />;
+};
+
+const enhanced = withLocalStateContainer<Local>(
+  graphql`
+    fragment PermalinkContainerLocal on Local {
+      origin
+    }
+  `
+)(PermalinkContainer);
+
+export default enhanced;
diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
index a5ff7301f..bb83aeb74 100644
--- a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
@@ -6,7 +6,7 @@ import { Button, Flex, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
-  commentID: string;
+  permalinkUrl: string;
   style?: CSSProperties;
   forwardRef?: RefHandler;
   toggleVisibility?: () => any;
@@ -35,12 +35,12 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { commentID } = this.props;
+    const { permalinkUrl } = this.props;
     const { copied } = this.state;
     return (
       <Flex>
-        <TextField defaultValue={commentID} className={styles.textField} />
-        <CopyToClipboard text={commentID} onCopy={this.onCopy}>
+        <TextField defaultValue={permalinkUrl} className={styles.textField} />
+        <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
           <Button color="primary" variant="filled">
             {copied ? (
               <Localized id="comments-permalink-copied">
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
index f0e884fc8..889c8c28a 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -1,26 +1,25 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { CommentProps } from "talk-stream/components/Comment";
 import { Flex } from "talk-ui/components";
 import CommentContainer from "../containers/CommentContainer";
 
-export interface AppProps {
-  comment: CommentProps | null;
+export interface InnerProps {
+  comment: {} | null;
 }
 
-const PermalinkView: StatelessComponent<AppProps> = props => {
+const PermalinkView: StatelessComponent<InnerProps> = props => {
   if (props.comment) {
     return (
       <Flex justifyContent="center">
-        <Flex direction="column" itemGutter>
+        <Flex direction="column">
           <CommentContainer data={props.comment} />
         </Flex>
       </Flex>
     );
   }
 
-  return <div> Error </div>;
+  return <div>Comment not found</div>;
 };
 
 export default PermalinkView;
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index fd70e3630..6601f4341 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -10,67 +10,50 @@ import ReplyListContainer from "../containers/ReplyListContainer";
 import Logo from "./Logo";
 import * as styles from "./Stream.css";
 
-import { Comment, CommentProps } from "talk-stream/components/Comment";
-
 export interface StreamProps {
   assetID: string;
-  comment?: CommentProps;
   isClosed?: boolean;
-  comments?: ReadonlyArray<{ id: string }>;
+  comments: ReadonlyArray<{ id: string }>;
   onLoadMore?: () => void;
   hasMore?: boolean;
   disableLoadMore?: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
-  if (props.comment) {
-    return (
-      <Flex justifyContent="center" className={styles.root}>
-        <Flex direction="column" itemGutter>
-          <Comment {...props.comment} />
-        </Flex>
+  return (
+    <div className={styles.root}>
+      <Logo gutterBottom />
+      <PostCommentFormContainer assetID={props.assetID} />
+      <Flex
+        direction="column"
+        id="talk-comments-stream-log"
+        role="log"
+        aria-live="polite"
+        itemGutter
+      >
+        {props.comments.map(comment => (
+          <Flex direction="column" key={comment.id} itemGutter>
+            <CommentContainer data={comment} />
+            <ReplyListContainer comment={comment} />
+          </Flex>
+        ))}
+        {props.hasMore && (
+          <Localized id="comments-stream-loadMore">
+            <Button
+              id={"talk-comments-stream-loadMore"}
+              onClick={props.onLoadMore}
+              variant="outlined"
+              fullWidth
+              disabled={props.disableLoadMore}
+              aria-controls="talk-comments-stream-log"
+            >
+              Load More
+            </Button>
+          </Localized>
+        )}
       </Flex>
-    );
-  }
-
-  if (props.comments) {
-    return (
-      <div className={styles.root}>
-        <Logo gutterBottom />
-        <PostCommentFormContainer assetID={props.assetID} />
-        <Flex
-          direction="column"
-          id="talk-comments-stream-log"
-          role="log"
-          aria-live="polite"
-          itemGutter
-        >
-          {props.comments.map(comment => (
-            <Flex direction="column" key={comment.id} itemGutter>
-              <CommentContainer data={comment} />
-              <ReplyListContainer comment={comment} />
-            </Flex>
-          ))}
-          {props.hasMore && (
-            <Localized id="comments-stream-loadMore">
-              <Button
-                id={"talk-comments-stream-loadMore"}
-                onClick={props.onLoadMore}
-                variant="outlined"
-                fullWidth
-                disabled={props.disableLoadMore}
-                aria-controls="talk-comments-stream-log"
-              >
-                Load More
-              </Button>
-            </Localized>
-          )}
-        </Flex>
-      </div>
-    );
-  }
-
-  return <div>Error</div>;
+    </div>
+  );
 };
 
 export default Stream;
diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index f090ba128..90eb1e1c6 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -12,7 +12,6 @@ interface InnerProps {
 }
 
 export const AppContainer: StatelessComponent<InnerProps> = props => {
-  console.log("App query render", props);
   return <App {...props.data} />;
 };
 
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 0316112d1..bda790209 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -7,7 +7,7 @@ import { CommentContainer as Data } from "talk-stream/__generated__/CommentConta
 
 import Comment from "../components/Comment";
 
-interface InnerProps {
+export interface InnerProps {
   data: Data;
 }
 
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index 8cd464b81..6e0545383 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -1,32 +1,28 @@
 import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
-
 import { withFragmentContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
-
+import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
 import PermalinkView from "../components/PermalinkView";
 
-import { PermalinkViewContainer as Data } from "talk-stream/__generated__/PermalinkViewContainer.graphql";
-
 interface InnerProps {
   data: Data;
 }
 
 export const PermalinkViewContainer: StatelessComponent<InnerProps> = props => {
-  console.log("App query render", props);
   return <PermalinkView {...props.data} />;
 };
 
 const enhanced = withFragmentContainer<{ data: Data }>({
   data: graphql`
-    fragment PermalinkViewContainer on Query
+    fragment PermalinkViewContainerQuery on Query
       @argumentDefinitions(commentID: { type: "ID!" }) {
       comment(id: $commentID) {
         id
-        body
         author {
           username
         }
+        body
         createdAt
       }
     }
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index 2786b3ef2..f43b14406 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -22,6 +22,12 @@ export default async function initLocalState(environment: Environment) {
     // Parse query params
     const query = qs.parse(location.search);
 
+    // Saving location host for permalink until we get the asset url - the url now points to the tenant
+    if (location) {
+      localRecord.setValue(location.host, "host");
+      localRecord.setValue(location.origin, "origin");
+    }
+
     if (query.assetID) {
       localRecord.setValue(query.assetID, "assetID");
     }
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 59c829490..f7152b2ce 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -7,6 +7,8 @@ type Local {
   network: Network!
   assetID: String
   commentID: String
+  host: String
+  origin: String
 }
 
 extend type Query {
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 3e6072c27..1cb252899 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -13,26 +13,41 @@ import {
 } from "talk-stream/__generated__/AppQuery.graphql";
 import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 
+import PermalinkViewContainer from "talk-stream/containers/PermalinkViewContainer";
 import AppContainer from "../containers/AppContainer";
-import PermalinkViewQuery from "./PermalinkViewQuery";
-
-export const render = ({ error, props }: ReadyState<AppQueryResponse>) => {
-  if (error) {
-    return <div>{error.message}</div>;
-  }
-  if (props) {
-    return <AppContainer data={props} />;
-  }
-  return <div>Loading</div>;
-};
 
 interface InnerProps {
   local: Local;
 }
 
-const AppQuery: StatelessComponent<InnerProps> = props => {
-  if (props.local.commentID) {
-    return <PermalinkViewQuery commentID={props.local.commentID} />;
+// TODO (bc) refactor this into another component. break down the needs of each component.
+// (careful porting QueryRenderer into another stateless component)
+
+const AppQuery: StatelessComponent<InnerProps> = ({
+  local: { commentID, assetID },
+}) => {
+  if (commentID) {
+    return (
+      <QueryRenderer<AppQueryVariables, AppQueryResponse>
+        query={graphql`
+          query AppQuery_PermalinkViewContainer_Query($commentID: ID!) {
+            ...PermalinkViewContainerQuery @arguments(commentID: $commentID)
+          }
+        `}
+        variables={{
+          commentID,
+        }}
+        render={({ error, props }: ReadyState<AppQueryResponse>) => {
+          if (error) {
+            return <div>{error.message}</div>;
+          }
+          if (props) {
+            return <PermalinkViewContainer data={props} />;
+          }
+          return <div>Loading</div>;
+        }}
+      />
+    );
   }
 
   return (
@@ -43,9 +58,17 @@ const AppQuery: StatelessComponent<InnerProps> = props => {
         }
       `}
       variables={{
-        assetID: props.local.assetID,
+        assetID,
+      }}
+      render={({ error, props }: ReadyState<AppQueryResponse>) => {
+        if (error) {
+          return <div>{error.message}</div>;
+        }
+        if (props) {
+          return <AppContainer data={props} />;
+        }
+        return <div>Loading</div>;
       }}
-      render={render}
     />
   );
 };
@@ -55,6 +78,7 @@ const enhanced = withLocalStateContainer<Local>(
     fragment AppQueryLocal on Local {
       assetID
       commentID
+      origin
     }
   `
 )(AppQuery);
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/queries/PermalinkViewQuery.tsx
deleted file mode 100644
index d48caf00f..000000000
--- a/src/core/client/stream/queries/PermalinkViewQuery.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-import { ReadyState } from "react-relay";
-
-import { graphql, QueryRenderer } from "talk-framework/lib/relay";
-
-import {
-  PermalinkViewQueryResponse,
-  PermalinkViewQueryVariables,
-} from "talk-stream/__generated__/PermalinkViewQuery.graphql";
-import { PermalinkViewContainer } from "talk-stream/containers/PermalinkViewContainer";
-
-export interface CommentData {
-  id: string;
-  author: {
-    username: string;
-  } | null;
-  body: string | null;
-  createdAt: string;
-}
-
-export const render = ({
-  error,
-  props,
-}: ReadyState<{
-  comment: CommentData;
-}>) => {
-  if (error) {
-    return <div>{error.message}</div>;
-  }
-  if (props) {
-    return <PermalinkViewContainer data={props} />;
-  }
-  return <div>Loading</div>;
-};
-
-interface InnerProps {
-  commentID: string;
-}
-
-const PermalinkViewQuery: StatelessComponent<InnerProps> = props => {
-  return (
-    <QueryRenderer<PermalinkViewQueryVariables, PermalinkViewQueryResponse>
-      query={graphql`
-        query PermalinkViewQuery($commentID: ID!) {
-          ...PermalinkViewContainer @arguments(commentID: $commentID)
-        }
-      `}
-      variables={{
-        commentID: props.commentID,
-      }}
-      render={render}
-    />
-  );
-};
-
-export default PermalinkViewQuery;

From b787f260f28a3b7262847e7730d22699fa180026 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 25 Jul 2018 17:33:49 -0300
Subject: [PATCH 36/69] Removing old implementation of attachment

---
 .../ui/components/Attachment/Attachment.css   |  2 -
 .../ui/components/Attachment/Attachment.tsx   | 62 -------------------
 .../client/ui/components/Attachment/index.ts  |  2 -
 3 files changed, 66 deletions(-)
 delete mode 100644 src/core/client/ui/components/Attachment/Attachment.css
 delete mode 100644 src/core/client/ui/components/Attachment/Attachment.tsx
 delete mode 100644 src/core/client/ui/components/Attachment/index.ts

diff --git a/src/core/client/ui/components/Attachment/Attachment.css b/src/core/client/ui/components/Attachment/Attachment.css
deleted file mode 100644
index c3a2af639..000000000
--- a/src/core/client/ui/components/Attachment/Attachment.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.root {
-}
diff --git a/src/core/client/ui/components/Attachment/Attachment.tsx b/src/core/client/ui/components/Attachment/Attachment.tsx
deleted file mode 100644
index 549787707..000000000
--- a/src/core/client/ui/components/Attachment/Attachment.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { CSSProperties } from "react";
-import { Manager, Popper, Reference, RefHandler } from "react-popper";
-
-interface RenderProps {
-  ref: RefHandler;
-  style?: CSSProperties;
-}
-
-interface InnerProps {
-  body: React.ReactElement<any> | null;
-  children: (props: RenderProps) => React.ReactElement<any>;
-  className?: string;
-  placement?:
-    | "auto-start"
-    | "auto"
-    | "auto-end"
-    | "top-start"
-    | "top"
-    | "top-end"
-    | "right-start"
-    | "right"
-    | "right-end"
-    | "bottom-end"
-    | "bottom"
-    | "bottom-start"
-    | "left-end"
-    | "left"
-    | "left-start";
-}
-
-interface Props {
-  ref: any;
-  style: CSSProperties;
-}
-
-class Attachment extends React.Component<InnerProps> {
-  public render() {
-    const { children, body, placement = "top" } = this.props;
-    return (
-      <Manager>
-        <Reference>{(props: Props) => children({ ref: props.ref })}</Reference>
-        <Popper
-          placement={placement}
-          modifiers={{ preventOverflow: { enabled: false } }}
-          eventsEnabled
-          positionFixed={false}
-        >
-          {(props: Props) =>
-            body
-              ? React.cloneElement(body, {
-                  innerRef: props.ref,
-                  style: props.style,
-                })
-              : null
-          }
-        </Popper>
-      </Manager>
-    );
-  }
-}
-
-export default Attachment;
diff --git a/src/core/client/ui/components/Attachment/index.ts b/src/core/client/ui/components/Attachment/index.ts
deleted file mode 100644
index b3b8d5f4a..000000000
--- a/src/core/client/ui/components/Attachment/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Attachment";
-export { default } from "./Attachment";

From f0e0051c972723a04bfbadd954ece0839ba69b98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 25 Jul 2018 18:57:43 -0300
Subject: [PATCH 37/69] Tiny refactor

---
 .../stream/components/Comment/Comment.tsx     |  2 +-
 .../{ => Permalink}/PermalinkView.tsx         |  2 +-
 .../PermalinkContainer.tsx                    |  2 +-
 .../containers/PermalinkViewContainer.tsx     |  9 ++---
 src/core/client/stream/queries/AppQuery.tsx   | 36 +++++++++----------
 5 files changed, 23 insertions(+), 28 deletions(-)
 rename src/core/client/stream/components/{ => Permalink}/PermalinkView.tsx (88%)
 rename src/core/client/stream/{components/Permalink => containers}/PermalinkContainer.tsx (91%)

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 8f8553fce..10a6c9659 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
-import PermalinkContainer from "../Permalink/PermalinkContainer";
+import PermalinkContainer from "../../containers/PermalinkContainer";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
similarity index 88%
rename from src/core/client/stream/components/PermalinkView.tsx
rename to src/core/client/stream/components/Permalink/PermalinkView.tsx
index 889c8c28a..7e4a29177 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
-import CommentContainer from "../containers/CommentContainer";
+import CommentContainer from "../../containers/CommentContainer";
 
 export interface InnerProps {
   comment: {} | null;
diff --git a/src/core/client/stream/components/Permalink/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkContainer.tsx
similarity index 91%
rename from src/core/client/stream/components/Permalink/PermalinkContainer.tsx
rename to src/core/client/stream/containers/PermalinkContainer.tsx
index 4364a8e0b..46a646600 100644
--- a/src/core/client/stream/components/Permalink/PermalinkContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkContainer.tsx
@@ -3,7 +3,7 @@ import { graphql } from "react-relay";
 import { withLocalStateContainer } from "talk-framework/lib/relay";
 import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 
-import Permalink from "./Permalink";
+import Permalink from "../components/Permalink/Permalink";
 
 interface InnerProps {
   local: Local;
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index 6e0545383..a2c6216f8 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -3,7 +3,7 @@ import { graphql } from "react-relay";
 import { withFragmentContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
 import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
-import PermalinkView from "../components/PermalinkView";
+import PermalinkView from "../components/Permalink/PermalinkView";
 
 interface InnerProps {
   data: Data;
@@ -18,12 +18,7 @@ const enhanced = withFragmentContainer<{ data: Data }>({
     fragment PermalinkViewContainerQuery on Query
       @argumentDefinitions(commentID: { type: "ID!" }) {
       comment(id: $commentID) {
-        id
-        author {
-          username
-        }
-        body
-        createdAt
+        ...CommentContainer
       }
     }
   `,
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 1cb252899..07601ed1d 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -20,9 +20,25 @@ interface InnerProps {
   local: Local;
 }
 
+interface WrappedProps {
+  data: any;
+}
+
 // TODO (bc) refactor this into another component. break down the needs of each component.
 // (careful porting QueryRenderer into another stateless component)
 
+export const renderWrapper = (
+  WrappedComponent: React.ComponentType<WrappedProps>
+) => ({ error, props }: ReadyState<AppQueryResponse>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+  if (props) {
+    return <WrappedComponent data={props} />;
+  }
+  return <div>Loading</div>;
+};
+
 const AppQuery: StatelessComponent<InnerProps> = ({
   local: { commentID, assetID },
 }) => {
@@ -37,15 +53,7 @@ const AppQuery: StatelessComponent<InnerProps> = ({
         variables={{
           commentID,
         }}
-        render={({ error, props }: ReadyState<AppQueryResponse>) => {
-          if (error) {
-            return <div>{error.message}</div>;
-          }
-          if (props) {
-            return <PermalinkViewContainer data={props} />;
-          }
-          return <div>Loading</div>;
-        }}
+        render={renderWrapper(PermalinkViewContainer)}
       />
     );
   }
@@ -60,15 +68,7 @@ const AppQuery: StatelessComponent<InnerProps> = ({
       variables={{
         assetID,
       }}
-      render={({ error, props }: ReadyState<AppQueryResponse>) => {
-        if (error) {
-          return <div>{error.message}</div>;
-        }
-        if (props) {
-          return <AppContainer data={props} />;
-        }
-        return <div>Loading</div>;
-      }}
+      render={renderWrapper(AppContainer)}
     />
   );
 };

From ad4fcfd002c7a15b79e870840b7109ebb1e837b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 25 Jul 2018 19:24:33 -0300
Subject: [PATCH 38/69] Support for ClickOutside

---
 .../components/Permalink/PermalinkPopover.tsx | 40 ++++++++++---------
 .../components/ClickOutside/ClickOutside.tsx  |  5 ++-
 .../ui/components/ClickOutside/index.ts       |  1 +
 .../client/ui/components/Popover/Popover.tsx  |  5 +--
 src/core/client/ui/components/index.ts        |  1 +
 5 files changed, 27 insertions(+), 25 deletions(-)
 create mode 100644 src/core/client/ui/components/ClickOutside/index.ts

diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
index bb83aeb74..61a2d3ba4 100644
--- a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
@@ -2,14 +2,14 @@ import { Localized } from "fluent-react/compat";
 import React, { CSSProperties } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { RefHandler } from "react-popper";
-import { Button, Flex, TextField } from "talk-ui/components";
+import { Button, ClickOutside, Flex, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   permalinkUrl: string;
   style?: CSSProperties;
   forwardRef?: RefHandler;
-  toggleVisibility?: () => any;
+  toggleVisibility: () => void;
 }
 
 interface State {
@@ -35,25 +35,27 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { permalinkUrl } = this.props;
+    const { permalinkUrl, toggleVisibility } = this.props;
     const { copied } = this.state;
     return (
-      <Flex>
-        <TextField defaultValue={permalinkUrl} className={styles.textField} />
-        <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
-          <Button color="primary" variant="filled">
-            {copied ? (
-              <Localized id="comments-permalink-copied">
-                <span>Copied!</span>
-              </Localized>
-            ) : (
-              <Localized id="comments-permalink-copy">
-                <span>Copy</span>
-              </Localized>
-            )}
-          </Button>
-        </CopyToClipboard>
-      </Flex>
+      <ClickOutside onClickOutside={toggleVisibility}>
+        <Flex>
+          <TextField defaultValue={permalinkUrl} className={styles.textField} />
+          <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
+            <Button color="primary" variant="filled">
+              {copied ? (
+                <Localized id="comments-permalink-copied">
+                  <span>Copied!</span>
+                </Localized>
+              ) : (
+                <Localized id="comments-permalink-copy">
+                  <span>Copy</span>
+                </Localized>
+              )}
+            </Button>
+          </CopyToClipboard>
+        </Flex>
+      </ClickOutside>
     );
   }
 }
diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
index cf13762f0..a113c9776 100644
--- a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
+++ b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { findDOMNode } from "react-dom";
 
-interface Props {
+export interface ClickOutsideProps {
   onClickOutside: () => void;
   children: React.ReactNode;
 }
 
-class ClickOutside extends React.Component<Props> {
+export class ClickOutside extends React.Component<ClickOutsideProps> {
   public domNode: Element | null = null;
 
   public handleClick = (e: MouseEvent) => {
@@ -30,4 +30,5 @@ class ClickOutside extends React.Component<Props> {
     return this.props.children;
   }
 }
+
 export default ClickOutside;
diff --git a/src/core/client/ui/components/ClickOutside/index.ts b/src/core/client/ui/components/ClickOutside/index.ts
new file mode 100644
index 000000000..f3f59adad
--- /dev/null
+++ b/src/core/client/ui/components/ClickOutside/index.ts
@@ -0,0 +1 @@
+export { default, ClickOutside } from "./ClickOutside";
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index e318810d1..11d37ddd3 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -42,7 +42,7 @@ interface Props {
 }
 
 interface RenderProps {
-  toggleVisibility?: () => void;
+  toggleVisibility: () => void;
   forwardRef?: RefHandler;
 }
 
@@ -115,8 +115,6 @@ class Popover extends React.Component<InnerProps> {
                 aria-hidden={!visible}
               >
                 <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
-
-                {/* <ClickOutside onClickOutside={toggleVisibility}> */}
                 <div
                   style={props.style}
                   className={cn(styles.root, className)}
@@ -129,7 +127,6 @@ class Popover extends React.Component<InnerProps> {
                         forwardRef: props.ref,
                       })}
                 </div>
-                {/* </ClickOutside> */}
               </div>
             )
           }
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 2a52122ec..0b2032cb5 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -8,3 +8,4 @@ export { default as UIContext, UIContextProps } from "./UIContext";
 export { default as Flex } from "./Flex";
 export { default as MatchMedia } from "./MatchMedia";
 export { default as TrapFocus } from "./TrapFocus";
+export { default as ClickOutside } from "./ClickOutside";

From 8b56e408f8e647911ecaae6c73af0bda64a58f1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 25 Jul 2018 19:44:25 -0300
Subject: [PATCH 39/69] Removing old implementation of attachment

Tiny refactor

Merge branch 'next' of github.com:coralproject/talk into permalink

* 'next' of github.com:coralproject/talk:
  [next] ClickOutside Component (#1757)

Support for ClickOutside
---
 package-lock.json                             |  5 ++
 package.json                                  |  1 +
 .../stream/components/Comment/Comment.tsx     |  2 +-
 .../components/Permalink/PermalinkPopover.tsx | 40 ++++++------
 .../{ => Permalink}/PermalinkView.tsx         |  2 +-
 .../PermalinkContainer.tsx                    |  2 +-
 .../containers/PermalinkViewContainer.tsx     |  9 +--
 src/core/client/stream/queries/AppQuery.tsx   | 36 +++++------
 .../ui/components/Attachment/Attachment.css   |  2 -
 .../ui/components/Attachment/Attachment.tsx   | 62 -------------------
 .../client/ui/components/Attachment/index.ts  |  2 -
 .../components/ClickOutside/ClickOutside.mdx  | 27 ++++++++
 .../ClickOutside/ClickOutside.spec.tsx        | 62 +++++++++++++++++++
 .../components/ClickOutside/ClickOutside.tsx  | 34 ++++++++++
 .../__snapshots__/ClickOutside.spec.tsx.snap  |  3 +
 .../ui/components/ClickOutside/index.ts       |  1 +
 .../client/ui/components/Popover/Popover.tsx  |  5 +-
 src/core/client/ui/components/index.ts        |  1 +
 src/types/simulant.d.ts                       | 16 +++++
 19 files changed, 195 insertions(+), 117 deletions(-)
 rename src/core/client/stream/components/{ => Permalink}/PermalinkView.tsx (88%)
 rename src/core/client/stream/{components/Permalink => containers}/PermalinkContainer.tsx (91%)
 delete mode 100644 src/core/client/ui/components/Attachment/Attachment.css
 delete mode 100644 src/core/client/ui/components/Attachment/Attachment.tsx
 delete mode 100644 src/core/client/ui/components/Attachment/index.ts
 create mode 100644 src/core/client/ui/components/ClickOutside/ClickOutside.mdx
 create mode 100644 src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx
 create mode 100644 src/core/client/ui/components/ClickOutside/ClickOutside.tsx
 create mode 100644 src/core/client/ui/components/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/ClickOutside/index.ts
 create mode 100644 src/types/simulant.d.ts

diff --git a/package-lock.json b/package-lock.json
index 6f82b9b97..7f6f5a53f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20407,6 +20407,11 @@
         }
       }
     },
+    "simulant": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simulant/-/simulant-0.2.2.tgz",
+      "integrity": "sha1-8bzlJxK2p6DaON392n6DsgsdoB4="
+    },
     "sinon": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/sinon/-/sinon-6.1.3.tgz",
diff --git a/package.json b/package.json
index 40dc922bc..9047ce6a4 100644
--- a/package.json
+++ b/package.json
@@ -150,6 +150,7 @@
     "relay-runtime": "github:coralproject/patched#relay-runtime",
     "relay-test-utils": "github:coralproject/patched#relay-test-utils",
     "sane": "^2.5.2",
+    "simulant": "^0.2.2",
     "sinon": "^6.1.3",
     "style-loader": "^0.21.0",
     "ts-jest": "^23.0.0",
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 8f8553fce..10a6c9659 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
-import PermalinkContainer from "../Permalink/PermalinkContainer";
+import PermalinkContainer from "../../containers/PermalinkContainer";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";
diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
index bb83aeb74..61a2d3ba4 100644
--- a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
@@ -2,14 +2,14 @@ import { Localized } from "fluent-react/compat";
 import React, { CSSProperties } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { RefHandler } from "react-popper";
-import { Button, Flex, TextField } from "talk-ui/components";
+import { Button, ClickOutside, Flex, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   permalinkUrl: string;
   style?: CSSProperties;
   forwardRef?: RefHandler;
-  toggleVisibility?: () => any;
+  toggleVisibility: () => void;
 }
 
 interface State {
@@ -35,25 +35,27 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { permalinkUrl } = this.props;
+    const { permalinkUrl, toggleVisibility } = this.props;
     const { copied } = this.state;
     return (
-      <Flex>
-        <TextField defaultValue={permalinkUrl} className={styles.textField} />
-        <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
-          <Button color="primary" variant="filled">
-            {copied ? (
-              <Localized id="comments-permalink-copied">
-                <span>Copied!</span>
-              </Localized>
-            ) : (
-              <Localized id="comments-permalink-copy">
-                <span>Copy</span>
-              </Localized>
-            )}
-          </Button>
-        </CopyToClipboard>
-      </Flex>
+      <ClickOutside onClickOutside={toggleVisibility}>
+        <Flex>
+          <TextField defaultValue={permalinkUrl} className={styles.textField} />
+          <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
+            <Button color="primary" variant="filled">
+              {copied ? (
+                <Localized id="comments-permalink-copied">
+                  <span>Copied!</span>
+                </Localized>
+              ) : (
+                <Localized id="comments-permalink-copy">
+                  <span>Copy</span>
+                </Localized>
+              )}
+            </Button>
+          </CopyToClipboard>
+        </Flex>
+      </ClickOutside>
     );
   }
 }
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
similarity index 88%
rename from src/core/client/stream/components/PermalinkView.tsx
rename to src/core/client/stream/components/Permalink/PermalinkView.tsx
index 889c8c28a..7e4a29177 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
-import CommentContainer from "../containers/CommentContainer";
+import CommentContainer from "../../containers/CommentContainer";
 
 export interface InnerProps {
   comment: {} | null;
diff --git a/src/core/client/stream/components/Permalink/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkContainer.tsx
similarity index 91%
rename from src/core/client/stream/components/Permalink/PermalinkContainer.tsx
rename to src/core/client/stream/containers/PermalinkContainer.tsx
index 4364a8e0b..46a646600 100644
--- a/src/core/client/stream/components/Permalink/PermalinkContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkContainer.tsx
@@ -3,7 +3,7 @@ import { graphql } from "react-relay";
 import { withLocalStateContainer } from "talk-framework/lib/relay";
 import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 
-import Permalink from "./Permalink";
+import Permalink from "../components/Permalink/Permalink";
 
 interface InnerProps {
   local: Local;
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index 6e0545383..a2c6216f8 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -3,7 +3,7 @@ import { graphql } from "react-relay";
 import { withFragmentContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
 import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
-import PermalinkView from "../components/PermalinkView";
+import PermalinkView from "../components/Permalink/PermalinkView";
 
 interface InnerProps {
   data: Data;
@@ -18,12 +18,7 @@ const enhanced = withFragmentContainer<{ data: Data }>({
     fragment PermalinkViewContainerQuery on Query
       @argumentDefinitions(commentID: { type: "ID!" }) {
       comment(id: $commentID) {
-        id
-        author {
-          username
-        }
-        body
-        createdAt
+        ...CommentContainer
       }
     }
   `,
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 1cb252899..07601ed1d 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -20,9 +20,25 @@ interface InnerProps {
   local: Local;
 }
 
+interface WrappedProps {
+  data: any;
+}
+
 // TODO (bc) refactor this into another component. break down the needs of each component.
 // (careful porting QueryRenderer into another stateless component)
 
+export const renderWrapper = (
+  WrappedComponent: React.ComponentType<WrappedProps>
+) => ({ error, props }: ReadyState<AppQueryResponse>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+  if (props) {
+    return <WrappedComponent data={props} />;
+  }
+  return <div>Loading</div>;
+};
+
 const AppQuery: StatelessComponent<InnerProps> = ({
   local: { commentID, assetID },
 }) => {
@@ -37,15 +53,7 @@ const AppQuery: StatelessComponent<InnerProps> = ({
         variables={{
           commentID,
         }}
-        render={({ error, props }: ReadyState<AppQueryResponse>) => {
-          if (error) {
-            return <div>{error.message}</div>;
-          }
-          if (props) {
-            return <PermalinkViewContainer data={props} />;
-          }
-          return <div>Loading</div>;
-        }}
+        render={renderWrapper(PermalinkViewContainer)}
       />
     );
   }
@@ -60,15 +68,7 @@ const AppQuery: StatelessComponent<InnerProps> = ({
       variables={{
         assetID,
       }}
-      render={({ error, props }: ReadyState<AppQueryResponse>) => {
-        if (error) {
-          return <div>{error.message}</div>;
-        }
-        if (props) {
-          return <AppContainer data={props} />;
-        }
-        return <div>Loading</div>;
-      }}
+      render={renderWrapper(AppContainer)}
     />
   );
 };
diff --git a/src/core/client/ui/components/Attachment/Attachment.css b/src/core/client/ui/components/Attachment/Attachment.css
deleted file mode 100644
index c3a2af639..000000000
--- a/src/core/client/ui/components/Attachment/Attachment.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.root {
-}
diff --git a/src/core/client/ui/components/Attachment/Attachment.tsx b/src/core/client/ui/components/Attachment/Attachment.tsx
deleted file mode 100644
index 549787707..000000000
--- a/src/core/client/ui/components/Attachment/Attachment.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { CSSProperties } from "react";
-import { Manager, Popper, Reference, RefHandler } from "react-popper";
-
-interface RenderProps {
-  ref: RefHandler;
-  style?: CSSProperties;
-}
-
-interface InnerProps {
-  body: React.ReactElement<any> | null;
-  children: (props: RenderProps) => React.ReactElement<any>;
-  className?: string;
-  placement?:
-    | "auto-start"
-    | "auto"
-    | "auto-end"
-    | "top-start"
-    | "top"
-    | "top-end"
-    | "right-start"
-    | "right"
-    | "right-end"
-    | "bottom-end"
-    | "bottom"
-    | "bottom-start"
-    | "left-end"
-    | "left"
-    | "left-start";
-}
-
-interface Props {
-  ref: any;
-  style: CSSProperties;
-}
-
-class Attachment extends React.Component<InnerProps> {
-  public render() {
-    const { children, body, placement = "top" } = this.props;
-    return (
-      <Manager>
-        <Reference>{(props: Props) => children({ ref: props.ref })}</Reference>
-        <Popper
-          placement={placement}
-          modifiers={{ preventOverflow: { enabled: false } }}
-          eventsEnabled
-          positionFixed={false}
-        >
-          {(props: Props) =>
-            body
-              ? React.cloneElement(body, {
-                  innerRef: props.ref,
-                  style: props.style,
-                })
-              : null
-          }
-        </Popper>
-      </Manager>
-    );
-  }
-}
-
-export default Attachment;
diff --git a/src/core/client/ui/components/Attachment/index.ts b/src/core/client/ui/components/Attachment/index.ts
deleted file mode 100644
index b3b8d5f4a..000000000
--- a/src/core/client/ui/components/Attachment/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Attachment";
-export { default } from "./Attachment";
diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.mdx b/src/core/client/ui/components/ClickOutside/ClickOutside.mdx
new file mode 100644
index 000000000..0d8126b5d
--- /dev/null
+++ b/src/core/client/ui/components/ClickOutside/ClickOutside.mdx
@@ -0,0 +1,27 @@
+---
+name: ClickOutside
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import ClickOutside from './ClickOutside'
+import Button from '../Button/Button'
+
+# ClickOutside
+
+A Component to handle click events outside the children components.
+
+## Basic usage
+Wrap a Component with `<ClickOutside>` and pass a function to `onClickOutside`. This function will trigger when the user
+clicks outside the component.
+
+### Test
+Click the blue background. It should trigger an alert. Nothing should happen if you click the button.
+
+<Playground>
+  <div style={{background: 'blue', padding: '10px'}}>
+    <ClickOutside onClickOutside={() => alert('You clicked outside!')}>
+      <Button variant="filled">Push Me</Button>
+    </ClickOutside>
+  </div>
+</Playground>
diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx b/src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx
new file mode 100644
index 000000000..fd5ba04b8
--- /dev/null
+++ b/src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx
@@ -0,0 +1,62 @@
+import { mount } from "enzyme";
+import React from "react";
+import simulant from "simulant";
+import sinon from "sinon";
+
+import ClickOutside from "./ClickOutside";
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+});
+
+afterAll(() => {
+  document.body.removeChild(container);
+});
+
+it("should render correctly", () => {
+  const noop = () => null;
+  const wrapper = mount(
+    <ClickOutside onClickOutside={noop}>
+      <span>Hello World!</span>
+    </ClickOutside>
+  );
+  expect(wrapper.html()).toMatchSnapshot();
+  wrapper.unmount();
+});
+
+it("should detect click outside", () => {
+  const onClickOutside = sinon.spy();
+  const wrapper = mount(
+    <ClickOutside onClickOutside={onClickOutside}>
+      <span>Hello World!</span>
+    </ClickOutside>,
+    {
+      attachTo: container,
+    }
+  );
+  simulant.fire(container, "click");
+
+  expect(onClickOutside.calledOnce).toEqual(true);
+  wrapper.unmount();
+});
+
+it("should ignore click inside", () => {
+  const onClickOutside = sinon.spy();
+  const wrapper = mount(
+    <ClickOutside onClickOutside={onClickOutside}>
+      <button id="click-outside-test-button">Push Me</button>
+    </ClickOutside>,
+    {
+      attachTo: container,
+    }
+  );
+
+  const target = document.getElementById("click-outside-test-button")!;
+  simulant.fire(target, "click");
+
+  expect(onClickOutside.calledOnce).toEqual(false);
+  wrapper.unmount();
+});
diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
new file mode 100644
index 000000000..a113c9776
--- /dev/null
+++ b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { findDOMNode } from "react-dom";
+
+export interface ClickOutsideProps {
+  onClickOutside: () => void;
+  children: React.ReactNode;
+}
+
+export class ClickOutside extends React.Component<ClickOutsideProps> {
+  public domNode: Element | null = null;
+
+  public handleClick = (e: MouseEvent) => {
+    const { onClickOutside } = this.props;
+    if (!e || !this.domNode!.contains(e.target as HTMLInputElement)) {
+      // tslint:disable-next-line:no-unused-expression
+      onClickOutside && onClickOutside();
+    }
+  };
+
+  public componentDidMount() {
+    this.domNode = findDOMNode(this) as Element;
+    document.addEventListener("click", this.handleClick, true);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener("click", this.handleClick, true);
+  }
+
+  public render() {
+    return this.props.children;
+  }
+}
+
+export default ClickOutside;
diff --git a/src/core/client/ui/components/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap b/src/core/client/ui/components/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap
new file mode 100644
index 000000000..883a02a51
--- /dev/null
+++ b/src/core/client/ui/components/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `"<span>Hello World!</span>"`;
diff --git a/src/core/client/ui/components/ClickOutside/index.ts b/src/core/client/ui/components/ClickOutside/index.ts
new file mode 100644
index 000000000..f3f59adad
--- /dev/null
+++ b/src/core/client/ui/components/ClickOutside/index.ts
@@ -0,0 +1 @@
+export { default, ClickOutside } from "./ClickOutside";
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index e318810d1..11d37ddd3 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -42,7 +42,7 @@ interface Props {
 }
 
 interface RenderProps {
-  toggleVisibility?: () => void;
+  toggleVisibility: () => void;
   forwardRef?: RefHandler;
 }
 
@@ -115,8 +115,6 @@ class Popover extends React.Component<InnerProps> {
                 aria-hidden={!visible}
               >
                 <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
-
-                {/* <ClickOutside onClickOutside={toggleVisibility}> */}
                 <div
                   style={props.style}
                   className={cn(styles.root, className)}
@@ -129,7 +127,6 @@ class Popover extends React.Component<InnerProps> {
                         forwardRef: props.ref,
                       })}
                 </div>
-                {/* </ClickOutside> */}
               </div>
             )
           }
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 2a52122ec..0b2032cb5 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -8,3 +8,4 @@ export { default as UIContext, UIContextProps } from "./UIContext";
 export { default as Flex } from "./Flex";
 export { default as MatchMedia } from "./MatchMedia";
 export { default as TrapFocus } from "./TrapFocus";
+export { default as ClickOutside } from "./ClickOutside";
diff --git a/src/types/simulant.d.ts b/src/types/simulant.d.ts
new file mode 100644
index 000000000..0537e0911
--- /dev/null
+++ b/src/types/simulant.d.ts
@@ -0,0 +1,16 @@
+declare module "simulant" {
+  type SimulantEvent = {};
+
+  interface Simulant {
+    (event: string, extendedParams: Record<string, any>): SimulantEvent;
+    fire(
+      target: HTMLElement,
+      event: string | SimulantEvent,
+      extendedParams?: Record<string, any>
+    ): void;
+    polyfill(): void;
+  }
+
+  const simulant: Simulant;
+  export default simulant;
+}

From 89472bfe9f4f2f7f22cc098e717cff96f0ae7c03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 26 Jul 2018 10:56:00 -0300
Subject: [PATCH 40/69] Missing imports, redirects Back to the Stream, Share
 Button, Full func

---
 .../stream/components/Comment/Comment.css     |  3 ++
 .../stream/components/Comment/Comment.tsx     |  3 +-
 .../stream/components/Permalink/Permalink.tsx | 10 ++++--
 .../components/Permalink/PermalinkView.css    |  9 ++++++
 .../components/Permalink/PermalinkView.tsx    | 31 ++++++++++++++++---
 .../stream/containers/PermalinkContainer.tsx  |  9 +++++-
 src/core/client/stream/queries/AppQuery.tsx   |  2 +-
 src/core/client/ui/components/index.ts        |  1 +
 8 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 src/core/client/stream/components/Comment/Comment.css
 create mode 100644 src/core/client/stream/components/Permalink/PermalinkView.css

diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
new file mode 100644
index 000000000..a9f4d2273
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -0,0 +1,3 @@
+.footer {
+  margin: 6px 0;
+}
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 10a6c9659..5afe6f61c 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
+import * as styles from "./Comment.css";
 
 import PermalinkContainer from "../../containers/PermalinkContainer";
 import Timestamp from "./Timestamp";
@@ -25,7 +26,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
         <Timestamp>{props.createdAt}</Timestamp>
       </TopBar>
       <Typography>{props.body}</Typography>
-      <div>
+      <div className={styles.footer}>
         <PermalinkContainer commentID={props.id} />
       </div>
     </div>
diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx
index 20b9c3a5c..eefd8859d 100644
--- a/src/core/client/stream/components/Permalink/Permalink.tsx
+++ b/src/core/client/stream/components/Permalink/Permalink.tsx
@@ -1,22 +1,25 @@
 import { Localized } from "fluent-react/compat";
 import React from "react";
-import { Button, Popover } from "talk-ui/components";
+import { Button, ButtonIcon, Popover } from "talk-ui/components";
 import PermalinkPopover from "./PermalinkPopover";
 
 interface InnerProps {
   commentID: string;
   origin: string | null;
+  assetID: string | null;
 }
 
 class Permalink extends React.Component<InnerProps> {
   public render() {
-    const { commentID, origin } = this.props;
+    const { commentID, origin, assetID } = this.props;
     return (
       <Popover
         placement="top"
         body={({ toggleVisibility, forwardRef }) => (
           <PermalinkPopover
-            permalinkUrl={`${origin}/?commentID=${commentID}`}
+            // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
+            // returns the correct asset url
+            permalinkUrl={`${origin}/?commentID=${commentID}&assetID=${assetID}`}
             forwardRef={forwardRef}
             toggleVisibility={toggleVisibility}
           />
@@ -24,6 +27,7 @@ class Permalink extends React.Component<InnerProps> {
       >
         {({ toggleVisibility, forwardRef }) => (
           <Button onClick={toggleVisibility} forwardRef={forwardRef}>
+            <ButtonIcon>share</ButtonIcon>
             <Localized id="comments-permalink-share">
               <span>Share</span>
             </Localized>
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.css b/src/core/client/stream/components/Permalink/PermalinkView.css
new file mode 100644
index 000000000..c2147d4ce
--- /dev/null
+++ b/src/core/client/stream/components/Permalink/PermalinkView.css
@@ -0,0 +1,9 @@
+.root {
+  width: 100%;
+  max-width: 400px;
+  margin: 20px auto;
+}
+
+.comment {
+  margin: 20px auto;
+}
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index 7e4a29177..a5e6b76db 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -1,21 +1,44 @@
+import qs from "query-string";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Flex } from "talk-ui/components";
+import Logo from "talk-stream/components/Logo";
+import { Button, Flex } from "talk-ui/components";
 import CommentContainer from "../../containers/CommentContainer";
+import * as styles from "./PermalinkView.css";
 
 export interface InnerProps {
   comment: {} | null;
 }
 
 const PermalinkView: StatelessComponent<InnerProps> = props => {
+  const query = qs.parse(location.search);
+
+  if (!query.assetID && !query.commentID) {
+    return <div>Bad url: `assetID` and `commentID` params are needed</div>;
+  }
+
   if (props.comment) {
+    // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
+    // returns the correct asset url
+    const assetURL = `${location.origin}/?assetID=${query.assetID}`;
+
     return (
-      <Flex justifyContent="center">
-        <Flex direction="column">
+      <div className={styles.root}>
+        <Logo />
+        <Flex direction="column" className={styles.comment}>
           <CommentContainer data={props.comment} />
+          <Button
+            variant="filled"
+            color="primary"
+            onClick={() => {
+              window.location.href = assetURL;
+            }}
+          >
+            Back to the Stream
+          </Button>
         </Flex>
-      </Flex>
+      </div>
     );
   }
 
diff --git a/src/core/client/stream/containers/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkContainer.tsx
index 46a646600..a203dedcc 100644
--- a/src/core/client/stream/containers/PermalinkContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkContainer.tsx
@@ -11,12 +11,19 @@ interface InnerProps {
 }
 
 export const PermalinkContainer: StatelessComponent<InnerProps> = props => {
-  return <Permalink {...props} origin={props.local.origin} />;
+  return (
+    <Permalink
+      {...props}
+      origin={props.local.origin}
+      assetID={props.local.assetID}
+    />
+  );
 };
 
 const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment PermalinkContainerLocal on Local {
+      assetID
       origin
     }
   `
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 07601ed1d..64a005795 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -24,7 +24,7 @@ interface WrappedProps {
   data: any;
 }
 
-// TODO (bc) refactor this into another component. break down the needs of each component.
+// TODO (bc) Break down the needs of each component into another file (maybe).
 // (careful porting QueryRenderer into another stateless component)
 
 export const renderWrapper = (
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 0b2032cb5..ae57fd4e4 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -1,5 +1,6 @@
 export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
+export { default as ButtonIcon } from "./Button/ButtonIcon";
 export { default as Typography } from "./Typography";
 export { default as Popover } from "./Popover";
 export { default as TextField } from "./TextField";

From db0903336757eb35bf5be72347c793249b6d15bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 26 Jul 2018 11:13:39 -0300
Subject: [PATCH 41/69] Creating assetURL in localState

---
 .../stream/components/Permalink/Permalink.tsx      |  9 +++------
 .../stream/containers/PermalinkContainer.tsx       | 11 ++---------
 src/core/client/stream/local/initLocalState.ts     | 14 ++++++++------
 src/core/client/stream/local/local.graphql         |  3 +--
 src/core/client/stream/queries/AppQuery.tsx        |  2 +-
 5 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx
index eefd8859d..3acfc3d71 100644
--- a/src/core/client/stream/components/Permalink/Permalink.tsx
+++ b/src/core/client/stream/components/Permalink/Permalink.tsx
@@ -5,21 +5,18 @@ import PermalinkPopover from "./PermalinkPopover";
 
 interface InnerProps {
   commentID: string;
-  origin: string | null;
-  assetID: string | null;
+  assetURL: string | null;
 }
 
 class Permalink extends React.Component<InnerProps> {
   public render() {
-    const { commentID, origin, assetID } = this.props;
+    const { commentID, assetURL } = this.props;
     return (
       <Popover
         placement="top"
         body={({ toggleVisibility, forwardRef }) => (
           <PermalinkPopover
-            // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
-            // returns the correct asset url
-            permalinkUrl={`${origin}/?commentID=${commentID}&assetID=${assetID}`}
+            permalinkUrl={`${assetURL}&commentID=${commentID}`}
             forwardRef={forwardRef}
             toggleVisibility={toggleVisibility}
           />
diff --git a/src/core/client/stream/containers/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkContainer.tsx
index a203dedcc..ea4630391 100644
--- a/src/core/client/stream/containers/PermalinkContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkContainer.tsx
@@ -11,20 +11,13 @@ interface InnerProps {
 }
 
 export const PermalinkContainer: StatelessComponent<InnerProps> = props => {
-  return (
-    <Permalink
-      {...props}
-      origin={props.local.origin}
-      assetID={props.local.assetID}
-    />
-  );
+  return <Permalink {...props} assetURL={props.local.assetURL} />;
 };
 
 const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment PermalinkContainerLocal on Local {
-      assetID
-      origin
+      assetURL
     }
   `
 )(PermalinkContainer);
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index f43b14406..434c60e32 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -22,16 +22,18 @@ export default async function initLocalState(environment: Environment) {
     // Parse query params
     const query = qs.parse(location.search);
 
-    // Saving location host for permalink until we get the asset url - the url now points to the tenant
-    if (location) {
-      localRecord.setValue(location.host, "host");
-      localRecord.setValue(location.origin, "origin");
-    }
-
     if (query.assetID) {
       localRecord.setValue(query.assetID, "assetID");
     }
 
+    // Saving location host for permalink until we get the asset url - the url now points to the tenant
+    if (location && query.assetID) {
+      localRecord.setValue(
+        `${location.origin}/?assetID=${query.assetID}`,
+        "assetURL"
+      );
+    }
+
     if (query.commentID) {
       localRecord.setValue(query.commentID, "commentID");
     }
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index f7152b2ce..9a2991607 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -7,8 +7,7 @@ type Local {
   network: Network!
   assetID: String
   commentID: String
-  host: String
-  origin: String
+  assetURL: String
 }
 
 extend type Query {
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 64a005795..48ac6e5c5 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -78,7 +78,7 @@ const enhanced = withLocalStateContainer<Local>(
     fragment AppQueryLocal on Local {
       assetID
       commentID
-      origin
+      assetURL
     }
   `
 )(AppQuery);

From f51f989021a3f2d17b3ce83429ca4889536111f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 26 Jul 2018 11:21:12 -0300
Subject: [PATCH 42/69] S

---
 .../components/Permalink/PermalinkView.tsx    | 25 +++++++++++--------
 .../stream/containers/PermalinkContainer.tsx  |  9 +++++--
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index a5e6b76db..ad10de179 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -21,22 +21,27 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
   if (props.comment) {
     // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
     // returns the correct asset url
-    const assetURL = `${location.origin}/?assetID=${query.assetID}`;
+    let assetURL: string = "";
+    if (query.assetID) {
+      assetURL = `${location.origin}/?assetID=${query.assetID}`;
+    }
 
     return (
       <div className={styles.root}>
         <Logo />
         <Flex direction="column" className={styles.comment}>
           <CommentContainer data={props.comment} />
-          <Button
-            variant="filled"
-            color="primary"
-            onClick={() => {
-              window.location.href = assetURL;
-            }}
-          >
-            Back to the Stream
-          </Button>
+          {assetURL && (
+            <Button
+              variant="filled"
+              color="primary"
+              onClick={() => {
+                window.location.href = assetURL;
+              }}
+            >
+              Back to the Stream
+            </Button>
+          )}
         </Flex>
       </div>
     );
diff --git a/src/core/client/stream/containers/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkContainer.tsx
index ea4630391..1176426c5 100644
--- a/src/core/client/stream/containers/PermalinkContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkContainer.tsx
@@ -10,8 +10,13 @@ interface InnerProps {
   commentID: string;
 }
 
-export const PermalinkContainer: StatelessComponent<InnerProps> = props => {
-  return <Permalink {...props} assetURL={props.local.assetURL} />;
+export const PermalinkContainer: StatelessComponent<InnerProps> = ({
+  local,
+  commentID,
+}) => {
+  return local.assetURL ? (
+    <Permalink assetURL={local.assetURL} commentID={commentID} />
+  ) : null;
 };
 
 const enhanced = withLocalStateContainer<Local>(

From ea442275199d9d28dd7e85d2a794dca36999d284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 26 Jul 2018 11:21:57 -0300
Subject: [PATCH 43/69] Creating assetURL in localState

S
---
 .../stream/components/Permalink/Permalink.tsx |  9 +++----
 .../components/Permalink/PermalinkView.tsx    | 25 +++++++++++--------
 .../stream/containers/PermalinkContainer.tsx  | 18 ++++++-------
 .../client/stream/local/initLocalState.ts     | 14 ++++++-----
 src/core/client/stream/local/local.graphql    |  3 +--
 src/core/client/stream/queries/AppQuery.tsx   |  2 +-
 6 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx
index eefd8859d..3acfc3d71 100644
--- a/src/core/client/stream/components/Permalink/Permalink.tsx
+++ b/src/core/client/stream/components/Permalink/Permalink.tsx
@@ -5,21 +5,18 @@ import PermalinkPopover from "./PermalinkPopover";
 
 interface InnerProps {
   commentID: string;
-  origin: string | null;
-  assetID: string | null;
+  assetURL: string | null;
 }
 
 class Permalink extends React.Component<InnerProps> {
   public render() {
-    const { commentID, origin, assetID } = this.props;
+    const { commentID, assetURL } = this.props;
     return (
       <Popover
         placement="top"
         body={({ toggleVisibility, forwardRef }) => (
           <PermalinkPopover
-            // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
-            // returns the correct asset url
-            permalinkUrl={`${origin}/?commentID=${commentID}&assetID=${assetID}`}
+            permalinkUrl={`${assetURL}&commentID=${commentID}`}
             forwardRef={forwardRef}
             toggleVisibility={toggleVisibility}
           />
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index a5e6b76db..ad10de179 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -21,22 +21,27 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
   if (props.comment) {
     // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
     // returns the correct asset url
-    const assetURL = `${location.origin}/?assetID=${query.assetID}`;
+    let assetURL: string = "";
+    if (query.assetID) {
+      assetURL = `${location.origin}/?assetID=${query.assetID}`;
+    }
 
     return (
       <div className={styles.root}>
         <Logo />
         <Flex direction="column" className={styles.comment}>
           <CommentContainer data={props.comment} />
-          <Button
-            variant="filled"
-            color="primary"
-            onClick={() => {
-              window.location.href = assetURL;
-            }}
-          >
-            Back to the Stream
-          </Button>
+          {assetURL && (
+            <Button
+              variant="filled"
+              color="primary"
+              onClick={() => {
+                window.location.href = assetURL;
+              }}
+            >
+              Back to the Stream
+            </Button>
+          )}
         </Flex>
       </div>
     );
diff --git a/src/core/client/stream/containers/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkContainer.tsx
index a203dedcc..1176426c5 100644
--- a/src/core/client/stream/containers/PermalinkContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkContainer.tsx
@@ -10,21 +10,19 @@ interface InnerProps {
   commentID: string;
 }
 
-export const PermalinkContainer: StatelessComponent<InnerProps> = props => {
-  return (
-    <Permalink
-      {...props}
-      origin={props.local.origin}
-      assetID={props.local.assetID}
-    />
-  );
+export const PermalinkContainer: StatelessComponent<InnerProps> = ({
+  local,
+  commentID,
+}) => {
+  return local.assetURL ? (
+    <Permalink assetURL={local.assetURL} commentID={commentID} />
+  ) : null;
 };
 
 const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment PermalinkContainerLocal on Local {
-      assetID
-      origin
+      assetURL
     }
   `
 )(PermalinkContainer);
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index f43b14406..434c60e32 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -22,16 +22,18 @@ export default async function initLocalState(environment: Environment) {
     // Parse query params
     const query = qs.parse(location.search);
 
-    // Saving location host for permalink until we get the asset url - the url now points to the tenant
-    if (location) {
-      localRecord.setValue(location.host, "host");
-      localRecord.setValue(location.origin, "origin");
-    }
-
     if (query.assetID) {
       localRecord.setValue(query.assetID, "assetID");
     }
 
+    // Saving location host for permalink until we get the asset url - the url now points to the tenant
+    if (location && query.assetID) {
+      localRecord.setValue(
+        `${location.origin}/?assetID=${query.assetID}`,
+        "assetURL"
+      );
+    }
+
     if (query.commentID) {
       localRecord.setValue(query.commentID, "commentID");
     }
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index f7152b2ce..9a2991607 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -7,8 +7,7 @@ type Local {
   network: Network!
   assetID: String
   commentID: String
-  host: String
-  origin: String
+  assetURL: String
 }
 
 extend type Query {
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 64a005795..48ac6e5c5 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -78,7 +78,7 @@ const enhanced = withLocalStateContainer<Local>(
     fragment AppQueryLocal on Local {
       assetID
       commentID
-      origin
+      assetURL
     }
   `
 )(AppQuery);

From 325f4534768361d946cc2cfc1db150eb3e91c072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 26 Jul 2018 11:27:22 -0300
Subject: [PATCH 44/69] Back to the stream if comment not found

---
 .../components/Permalink/PermalinkView.css    |  3 +-
 .../components/Permalink/PermalinkView.tsx    | 28 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/core/client/stream/components/Permalink/PermalinkView.css b/src/core/client/stream/components/Permalink/PermalinkView.css
index c2147d4ce..03b9e55dd 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.css
+++ b/src/core/client/stream/components/Permalink/PermalinkView.css
@@ -4,6 +4,7 @@
   margin: 20px auto;
 }
 
-.comment {
+.comment,
+.commentNotFound {
   margin: 20px auto;
 }
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index ad10de179..1d21a5032 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 
 import Logo from "talk-stream/components/Logo";
-import { Button, Flex } from "talk-ui/components";
+import { Button, Flex, Typography } from "talk-ui/components";
 import CommentContainer from "../../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
 
@@ -12,20 +12,22 @@ export interface InnerProps {
 }
 
 const PermalinkView: StatelessComponent<InnerProps> = props => {
+  let assetURL: string = "";
   const query = qs.parse(location.search);
 
   if (!query.assetID && !query.commentID) {
     return <div>Bad url: `assetID` and `commentID` params are needed</div>;
   }
 
-  if (props.comment) {
+  if (query.assetID) {
     // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
     // returns the correct asset url
-    let assetURL: string = "";
     if (query.assetID) {
       assetURL = `${location.origin}/?assetID=${query.assetID}`;
     }
+  }
 
+  if (props.comment) {
     return (
       <div className={styles.root}>
         <Logo />
@@ -47,7 +49,25 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
     );
   }
 
-  return <div>Comment not found</div>;
+  return (
+    <div className={styles.root}>
+      <Logo />
+      <Typography className={styles.commentNotFound}>
+        Comment not found
+      </Typography>
+      {assetURL && (
+        <Button
+          variant="filled"
+          color="primary"
+          onClick={() => {
+            window.location.href = assetURL;
+          }}
+        >
+          Back to the Stream
+        </Button>
+      )}
+    </div>
+  );
 };
 
 export default PermalinkView;

From 2c4ce9169d0ecc3db6f37dba60fd41f4f4796e0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 26 Jul 2018 11:45:20 -0300
Subject: [PATCH 45/69] Added missing dependency and test updated

---
 package-lock.json                             |  9 ++++++--
 .../__snapshots__/Comment.spec.tsx.snap       |  7 ++++++
 .../client/stream/queries/AppQuery.spec.tsx   | 23 +++++++++++++++----
 .../__snapshots__/AppQuery.spec.tsx.snap      |  6 +++++
 .../test/__snapshots__/loadMore.spec.tsx.snap | 15 ++++++++++++
 .../__snapshots__/renderReplies.spec.tsx.snap | 12 ++++++++++
 .../__snapshots__/renderStream.spec.tsx.snap  |  6 +++++
 .../showAllReplies.spec.tsx.snap              | 15 ++++++++++++
 .../client/ui/components/Popover/Popover.tsx  |  1 -
 9 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7f6f5a53f..f0e5ae1df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1783,6 +1783,7 @@
       "version": "16.4.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.2.tgz",
       "integrity": "sha512-oVcVteCDNiVc/fkDjowRfAZQDEOR76j3CJ3FvwXNvfV6zJguhghy1lMgpAzYox+9AZsWch+JPV6Imml3wvIUeg==",
+      "dev": true,
       "requires": {
         "csstype": "^2.2.0"
       }
@@ -1791,6 +1792,7 @@
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.2.5.tgz",
       "integrity": "sha512-5LggaWWlMcgehfeDmr4FZmK8MXntzxLYERFdrXk72ye6QwpoZpyYFGgUM+xGVVtIP2WXlor8twZTXK1xckEDYw==",
+      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -1832,6 +1834,7 @@
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/@types/react-tooltip/-/react-tooltip-3.3.5.tgz",
       "integrity": "sha512-wpWzjtMWBPymIoYjqZTeWX1v5dJe4V1akmcTM6iZwSS/cL8jdi6dFt4BoLXDOxgL5tEe/9yVBlQD+MAYvexBfw==",
+      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -6651,7 +6654,8 @@
     "csstype": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.5.tgz",
-      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA=="
+      "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==",
+      "dev": true
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -20410,7 +20414,8 @@
     "simulant": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simulant/-/simulant-0.2.2.tgz",
-      "integrity": "sha1-8bzlJxK2p6DaON392n6DsgsdoB4="
+      "integrity": "sha1-8bzlJxK2p6DaON392n6DsgsdoB4=",
+      "dev": true
     },
     "sinon": {
       "version": "6.1.3",
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
index 2d047c200..b92b29a8e 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -15,5 +15,12 @@ exports[`renders username and body 1`] = `
   <withPropsOnChange(Typography)>
     Woof
   </withPropsOnChange(Typography)>
+  <div
+    className="Comment-footer"
+  >
+    <withContext(LocalStateContainer)
+      commentID="comment-id"
+    />
+  </div>
 </div>
 `;
diff --git a/src/core/client/stream/queries/AppQuery.spec.tsx b/src/core/client/stream/queries/AppQuery.spec.tsx
index a301a76b7..0b12d767a 100644
--- a/src/core/client/stream/queries/AppQuery.spec.tsx
+++ b/src/core/client/stream/queries/AppQuery.spec.tsx
@@ -1,14 +1,27 @@
 import { shallow } from "enzyme";
 import React from "react";
 
-import { render } from "./AppQuery";
+import PermalinkViewContainer from "talk-stream/containers/PermalinkViewContainer";
+import AppContainer from "../containers/AppContainer";
+import { renderWrapper } from "./AppQuery";
+
+it("renders permalink view", () => {
+  const data = {
+    props: {} as any,
+    error: null,
+  };
+  const component = renderWrapper(PermalinkViewContainer);
+  const wrapper = shallow(React.createElement(() => component(data)));
+  expect(wrapper).toMatchSnapshot();
+});
 
 it("renders app", () => {
   const data = {
     props: {} as any,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
+  const component = renderWrapper(AppContainer);
+  const wrapper = shallow(React.createElement(() => component(data)));
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -17,7 +30,8 @@ it("renders loading", () => {
     props: null,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
+  const component = renderWrapper(AppContainer);
+  const wrapper = shallow(React.createElement(() => component(data)));
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -26,6 +40,7 @@ it("renders error", () => {
     props: null,
     error: new Error("error"),
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
+  const component = renderWrapper(AppContainer);
+  const wrapper = shallow(React.createElement(() => component(data)));
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
index dbd2ad45a..ffc62c435 100644
--- a/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
+++ b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
@@ -17,3 +17,9 @@ exports[`renders loading 1`] = `
   Loading
 </div>
 `;
+
+exports[`renders permalink view 1`] = `
+<Relay(PermalinkViewContainer)
+  data={Object {}}
+/>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 688e88d38..d45491e01 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -74,6 +74,9 @@ exports[`loads more comments 1`] = `
           >
             Joining Too
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
       <div
@@ -103,6 +106,9 @@ exports[`loads more comments 1`] = `
           >
             What's up?
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
       <div
@@ -132,6 +138,9 @@ exports[`loads more comments 1`] = `
           >
             Hey!
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
@@ -213,6 +222,9 @@ exports[`renders comment stream 1`] = `
           >
             Joining Too
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
       <div
@@ -242,6 +254,9 @@ exports[`renders comment stream 1`] = `
           >
             What's up?
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
       <button
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 2088396f4..bbc4635d7 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -74,6 +74,9 @@ exports[`renders comment stream 1`] = `
           >
             Joining Too
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
       <div
@@ -103,6 +106,9 @@ exports[`renders comment stream 1`] = `
           >
             I like yoghurt
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
         <div
           className="Indent-root Indent-level0"
@@ -136,6 +142,9 @@ exports[`renders comment stream 1`] = `
               >
                 Joining Too
               </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
             <div
               role="article"
@@ -161,6 +170,9 @@ exports[`renders comment stream 1`] = `
               >
                 What's up?
               </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
           </div>
         </div>
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index 89e42ee20..06de1b9a5 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -74,6 +74,9 @@ exports[`renders comment stream 1`] = `
           >
             Joining Too
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
       <div
@@ -103,6 +106,9 @@ exports[`renders comment stream 1`] = `
           >
             What's up?
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 15220f28c..528a6bb5b 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -74,6 +74,9 @@ exports[`renders comment stream 1`] = `
           >
             Joining Too
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
         <div
           className="Indent-root Indent-level0"
@@ -107,6 +110,9 @@ exports[`renders comment stream 1`] = `
               >
                 What's up?
               </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
             <button
               aria-controls="talk-comments-replyList-log--comment-0"
@@ -205,6 +211,9 @@ exports[`show all replies 1`] = `
           >
             Joining Too
           </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
         <div
           className="Indent-root Indent-level0"
@@ -238,6 +247,9 @@ exports[`show all replies 1`] = `
               >
                 What's up?
               </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
             <div
               role="article"
@@ -263,6 +275,9 @@ exports[`show all replies 1`] = `
               >
                 Hey!
               </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
           </div>
         </div>
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 11d37ddd3..0d775b34f 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -23,7 +23,6 @@ type Placement =
 
 interface InnerProps {
   body: (props: RenderProps) => any | React.ReactElement<any>;
-  // body: React.ReactElement<any> | null;
   children: (props: RenderProps) => any;
   description?: string;
   id?: string;

From d7c3796c9f1052559c70a83a13df5942e5963be0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 26 Jul 2018 12:11:31 -0300
Subject: [PATCH 46/69] Added missing dependency and test updated

---
 src/core/client/stream/containers/CommentContainer.spec.tsx      | 1 +
 .../containers/__snapshots__/CommentContainer.spec.tsx.snap      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
index 98612be38..c159f55ac 100644
--- a/src/core/client/stream/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -8,6 +8,7 @@ import { CommentContainer } from "./CommentContainer";
 it("renders username and body", () => {
   const props: PropTypesOf<typeof CommentContainer> = {
     data: {
+      id: "comment-ID",
       author: {
         username: "Marvin",
       },
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
index 9e2476f37..ad9f8dc43 100644
--- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -9,5 +9,6 @@ exports[`renders username and body 1`] = `
   }
   body="Woof"
   createdAt="1995-12-17T03:24:00.000Z"
+  id="comment-ID"
 />
 `;

From 2aa725d61cf4da5e69b98dc109b799ac7d18966b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 30 Jul 2018 06:30:11 -0300
Subject: [PATCH 47/69] Changes

---
 .../stream/components/Comment/Comment.css     |  2 +-
 .../stream/components/Permalink/Permalink.tsx |  8 ++--
 .../components/Permalink/PermalinkPopover.css |  6 ---
 .../components/Permalink/PermalinkPopover.tsx |  7 +---
 .../components/Permalink/PermalinkView.css    |  4 +-
 .../components/Permalink/PermalinkView.tsx    | 31 ++++++++-------
 .../AriaInfo/{AiraInfo.mdx => AriaInfo.mdx}   |  0
 .../components/ClickOutside/ClickOutside.tsx  |  2 +-
 .../ui/components/ClickOutside/index.ts       |  2 +-
 .../client/ui/components/Popover/Popover.tsx  | 38 +++++++++----------
 .../client/ui/components/Popover/index.ts     |  1 -
 .../ui/components/TextField/TextField.css     |  2 +
 .../ui/components/TextField/TextField.d.ts    |  1 -
 .../ui/components/TextField/TextField.tsx     |  7 +++-
 14 files changed, 52 insertions(+), 59 deletions(-)
 delete mode 100644 src/core/client/stream/components/Permalink/PermalinkPopover.css
 rename src/core/client/ui/components/AriaInfo/{AiraInfo.mdx => AriaInfo.mdx} (100%)
 delete mode 100644 src/core/client/ui/components/TextField/TextField.d.ts

diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
index a9f4d2273..abbd6ac69 100644
--- a/src/core/client/stream/components/Comment/Comment.css
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -1,3 +1,3 @@
 .footer {
-  margin: 6px 0;
+  margin-top: calc(1.5 * var(--spacing-unit));
 }
diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx
index 3acfc3d71..40500904e 100644
--- a/src/core/client/stream/components/Permalink/Permalink.tsx
+++ b/src/core/client/stream/components/Permalink/Permalink.tsx
@@ -3,21 +3,21 @@ import React from "react";
 import { Button, ButtonIcon, Popover } from "talk-ui/components";
 import PermalinkPopover from "./PermalinkPopover";
 
-interface InnerProps {
+interface PermalinkProps {
   commentID: string;
   assetURL: string | null;
 }
 
-class Permalink extends React.Component<InnerProps> {
+class Permalink extends React.Component<PermalinkProps> {
   public render() {
     const { commentID, assetURL } = this.props;
     return (
       <Popover
+        id="permalink-popover"
         placement="top"
-        body={({ toggleVisibility, forwardRef }) => (
+        body={({ toggleVisibility }) => (
           <PermalinkPopover
             permalinkUrl={`${assetURL}&commentID=${commentID}`}
-            forwardRef={forwardRef}
             toggleVisibility={toggleVisibility}
           />
         )}
diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.css b/src/core/client/stream/components/Permalink/PermalinkPopover.css
deleted file mode 100644
index fe47c28d3..000000000
--- a/src/core/client/stream/components/Permalink/PermalinkPopover.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.textField {
-  margin-right: 5px;
-}
-
-.root {
-}
diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
index 61a2d3ba4..32495a902 100644
--- a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
@@ -1,14 +1,11 @@
 import { Localized } from "fluent-react/compat";
 import React, { CSSProperties } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { RefHandler } from "react-popper";
 import { Button, ClickOutside, Flex, TextField } from "talk-ui/components";
-import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   permalinkUrl: string;
   style?: CSSProperties;
-  forwardRef?: RefHandler;
   toggleVisibility: () => void;
 }
 
@@ -39,8 +36,8 @@ class PermalinkPopover extends React.Component<InnerProps> {
     const { copied } = this.state;
     return (
       <ClickOutside onClickOutside={toggleVisibility}>
-        <Flex>
-          <TextField defaultValue={permalinkUrl} className={styles.textField} />
+        <Flex itemGutter="half">
+          <TextField defaultValue={permalinkUrl} />
           <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
             <Button color="primary" variant="filled">
               {copied ? (
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.css b/src/core/client/stream/components/Permalink/PermalinkView.css
index 03b9e55dd..a0c8f8cb8 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.css
+++ b/src/core/client/stream/components/Permalink/PermalinkView.css
@@ -1,10 +1,10 @@
 .root {
   width: 100%;
   max-width: 400px;
-  margin: 20px auto;
+  margin: calc(0.5 * var(--spacing-unit)) auto;
 }
 
 .comment,
 .commentNotFound {
-  margin: 20px auto;
+  margin: calc(5 * var(--spacing-unit)) auto;
 }
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index 1d21a5032..81dbadb4f 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -19,31 +19,30 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
     return <div>Bad url: `assetID` and `commentID` params are needed</div>;
   }
 
+  // TODO: (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
+  // returns the correct asset url
   if (query.assetID) {
-    // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
-    // returns the correct asset url
-    if (query.assetID) {
-      assetURL = `${location.origin}/?assetID=${query.assetID}`;
-    }
+    assetURL = `${location.origin}/?assetID=${query.assetID}`;
   }
 
   if (props.comment) {
     return (
       <div className={styles.root}>
         <Logo />
+        {assetURL && (
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => {
+              window.location.href = assetURL;
+            }}
+            fullWidth
+          >
+            Show all Comments
+          </Button>
+        )}
         <Flex direction="column" className={styles.comment}>
           <CommentContainer data={props.comment} />
-          {assetURL && (
-            <Button
-              variant="filled"
-              color="primary"
-              onClick={() => {
-                window.location.href = assetURL;
-              }}
-            >
-              Back to the Stream
-            </Button>
-          )}
         </Flex>
       </div>
     );
diff --git a/src/core/client/ui/components/AriaInfo/AiraInfo.mdx b/src/core/client/ui/components/AriaInfo/AriaInfo.mdx
similarity index 100%
rename from src/core/client/ui/components/AriaInfo/AiraInfo.mdx
rename to src/core/client/ui/components/AriaInfo/AriaInfo.mdx
diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
index a113c9776..b23f7ff3c 100644
--- a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
+++ b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
@@ -6,7 +6,7 @@ export interface ClickOutsideProps {
   children: React.ReactNode;
 }
 
-export class ClickOutside extends React.Component<ClickOutsideProps> {
+class ClickOutside extends React.Component<ClickOutsideProps> {
   public domNode: Element | null = null;
 
   public handleClick = (e: MouseEvent) => {
diff --git a/src/core/client/ui/components/ClickOutside/index.ts b/src/core/client/ui/components/ClickOutside/index.ts
index f3f59adad..c0ce145a8 100644
--- a/src/core/client/ui/components/ClickOutside/index.ts
+++ b/src/core/client/ui/components/ClickOutside/index.ts
@@ -1 +1 @@
-export { default, ClickOutside } from "./ClickOutside";
+export { default } from "./ClickOutside";
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 0d775b34f..1122c73db 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -1,6 +1,12 @@
 import cn from "classnames";
-import React, { CSSProperties, isValidElement } from "react";
-import { Manager, Popper, Reference, RefHandler } from "react-popper";
+import React from "react";
+import {
+  Manager,
+  Popper,
+  PopperArrowProps,
+  Reference,
+  RefHandler,
+} from "react-popper";
 import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
 
@@ -21,11 +27,11 @@ type Placement =
   | "left"
   | "left-start";
 
-interface InnerProps {
-  body: (props: RenderProps) => any | React.ReactElement<any>;
-  children: (props: RenderProps) => any;
+interface PopoverProps {
+  body: (props: RenderProps) => React.ReactNode | React.ReactElement<any>;
+  children: (props: RenderProps) => React.ReactNode;
   description?: string;
-  id?: string;
+  id: string;
   onClose?: () => void;
   className?: string;
   placement?: Placement;
@@ -35,17 +41,12 @@ interface State {
   visible: false;
 }
 
-interface Props {
-  ref: any;
-  style: CSSProperties;
-}
-
 interface RenderProps {
   toggleVisibility: () => void;
   forwardRef?: RefHandler;
 }
 
-class Popover extends React.Component<InnerProps> {
+class Popover extends React.Component<PopoverProps> {
   public state: State = {
     visible: false,
   };
@@ -92,7 +93,7 @@ class Popover extends React.Component<InnerProps> {
     return (
       <Manager>
         <Reference>
-          {(props: Props) =>
+          {(props: PopperArrowProps) =>
             children({
               forwardRef: props.ref,
               toggleVisibility: this.toggleVisibility,
@@ -105,7 +106,7 @@ class Popover extends React.Component<InnerProps> {
           eventsEnabled
           positionFixed={false}
         >
-          {(props: Props) =>
+          {(props: PopperArrowProps) =>
             visible && (
               <div
                 id={id}
@@ -119,12 +120,11 @@ class Popover extends React.Component<InnerProps> {
                   className={cn(styles.root, className)}
                   ref={props.ref}
                 >
-                  {isValidElement(body)
-                    ? body
-                    : body({
+                  {typeof body === "function"
+                    ? body({
                         toggleVisibility: this.toggleVisibility,
-                        forwardRef: props.ref,
-                      })}
+                      })
+                    : body}
                 </div>
               </div>
             )
diff --git a/src/core/client/ui/components/Popover/index.ts b/src/core/client/ui/components/Popover/index.ts
index 7e46e3708..04072ed30 100644
--- a/src/core/client/ui/components/Popover/index.ts
+++ b/src/core/client/ui/components/Popover/index.ts
@@ -1,2 +1 @@
-export * from "./Popover";
 export { default } from "./Popover";
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 4d2e9e88a..3e8f769a9 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -1,3 +1,5 @@
+// TODO: (bc) move this to typograhpy!
+
 .root {
   font-family: "Source Sans Pro";
   font-weight: 400;
diff --git a/src/core/client/ui/components/TextField/TextField.d.ts b/src/core/client/ui/components/TextField/TextField.d.ts
deleted file mode 100644
index f99662ba2..000000000
--- a/src/core/client/ui/components/TextField/TextField.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const root: string;
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 6b530a3db..57f26e7d1 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -3,11 +3,14 @@ import React, { InputHTMLAttributes, StatelessComponent } from "react";
 
 import * as styles from "./TextField.css";
 
-interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
+interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   classes?: typeof styles;
 }
 
-const TextField: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+const TextField: StatelessComponent<TextFieldProps> = ({
+  className,
+  ...rest
+}) => {
   return <input {...rest} className={cn(styles.root, className)} />;
 };
 

From e1d534391c9a30d88d8c2c0c98e14f5ccc164d86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 30 Jul 2018 06:50:47 -0300
Subject: [PATCH 48/69] More Changes

---
 .../components/Permalink/PermalinkView.tsx    | 26 ++++++-------------
 .../containers/PermalinkViewContainer.tsx     | 20 +++++++++++---
 .../ui/components/TextField/TextField.css     |  7 +----
 .../ui/components/TextField/TextField.mdx     | 17 ++++++++++++
 src/core/client/ui/shared/typography.css      |  9 +++++++
 5 files changed, 52 insertions(+), 27 deletions(-)
 create mode 100644 src/core/client/ui/components/TextField/TextField.mdx

diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index 81dbadb4f..2e693e56c 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -1,4 +1,3 @@
-import qs from "query-string";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
@@ -9,23 +8,14 @@ import * as styles from "./PermalinkView.css";
 
 export interface InnerProps {
   comment: {} | null;
+  assetURL: string | null;
 }
 
-const PermalinkView: StatelessComponent<InnerProps> = props => {
-  let assetURL: string = "";
-  const query = qs.parse(location.search);
-
-  if (!query.assetID && !query.commentID) {
-    return <div>Bad url: `assetID` and `commentID` params are needed</div>;
-  }
-
-  // TODO: (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
-  // returns the correct asset url
-  if (query.assetID) {
-    assetURL = `${location.origin}/?assetID=${query.assetID}`;
-  }
-
-  if (props.comment) {
+const PermalinkView: StatelessComponent<InnerProps> = ({
+  assetURL,
+  comment,
+}) => {
+  if (comment) {
     return (
       <div className={styles.root}>
         <Logo />
@@ -42,7 +32,7 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
           </Button>
         )}
         <Flex direction="column" className={styles.comment}>
-          <CommentContainer data={props.comment} />
+          <CommentContainer data={comment} />
         </Flex>
       </div>
     );
@@ -62,7 +52,7 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
             window.location.href = assetURL;
           }}
         >
-          Back to the Stream
+          Show all Comments
         </Button>
       )}
     </div>
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index a2c6216f8..e99578a9c 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -1,16 +1,22 @@
 import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
 import { withFragmentContainer } from "talk-framework/lib/relay";
+import { withLocalStateContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
+import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
 import PermalinkView from "../components/Permalink/PermalinkView";
 
 interface InnerProps {
   data: Data;
+  local: Local;
 }
 
-export const PermalinkViewContainer: StatelessComponent<InnerProps> = props => {
-  return <PermalinkView {...props.data} />;
+export const PermalinkViewContainer: StatelessComponent<InnerProps> = ({
+  local,
+  data,
+}) => {
+  return <PermalinkView {...data} assetURL={local.assetURL} />;
 };
 
 const enhanced = withFragmentContainer<{ data: Data }>({
@@ -22,7 +28,15 @@ const enhanced = withFragmentContainer<{ data: Data }>({
       }
     }
   `,
-})(PermalinkViewContainer);
+})(
+  withLocalStateContainer<Local>(
+    graphql`
+      fragment PermalinkViewContainerLocal on Local {
+        assetURL
+      }
+    `
+  )(PermalinkViewContainer)
+);
 
 export type PermalinkViewContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 3e8f769a9..ca9fc25cc 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -1,10 +1,5 @@
-// TODO: (bc) move this to typograhpy!
-
 .root {
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  font-size: 16px;
-  letter-spacing: calc(0.57em / 16);
+  composes: textField from "talk-ui/shared/typography.css";
   background: #ffffff;
   border: 1px solid #979797;
   box-sizing: border-box;
diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx
new file mode 100644
index 000000000..82f1c474d
--- /dev/null
+++ b/src/core/client/ui/components/TextField/TextField.mdx
@@ -0,0 +1,17 @@
+---
+name: TextField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import TextField from './TextField'
+
+# TextField
+
+`TextField`
+
+## Basic usage
+<Playground>
+  <TextField value="Hallo Talk" />
+</Playground>
+
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 9e52cfc89..518d0561f 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -126,3 +126,12 @@
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
 }
+
+.textField {
+  color: var(--palette-common-black);
+  font-family: "Source Sans Pro";
+  font-weight: var(--font-weight-regular);
+  font-size: 16px;
+  line-height: calc(18em / 16);
+  letter-spacing: calc(0.57em / 16);
+}

From 387e53e4e6cda95547051fd4a8f90b4845c2cfc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 30 Jul 2018 06:53:17 -0300
Subject: [PATCH 49/69] docz

---
 src/docs/workarounds.mdx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/docs/workarounds.mdx b/src/docs/workarounds.mdx
index feab40cd4..f511e64c8 100644
--- a/src/docs/workarounds.mdx
+++ b/src/docs/workarounds.mdx
@@ -78,3 +78,26 @@ const enhanced = withLocalStateContainer(
 export type ContainerProps = ReturnPropTypes<typeof enhanced>;
 export default enhanced;
 ```
+
+A working chaining example looks like this:
+
+```
+const enhanced = withFragmentContainer<{ data: Data }>({
+  data: graphql`
+    fragment PermalinkViewContainerQuery on Query
+      @argumentDefinitions(commentID: { type: "ID!" }) {
+      comment(id: $commentID) {
+        ...CommentContainer
+      }
+    }
+  `,
+})(
+  withLocalStateContainer<Local>(
+    graphql`
+      fragment PermalinkViewContainerLocal on Local {
+        assetURL
+      }
+    `
+  )(PermalinkViewContainer)
+);
+```

From 45e25581f7b7efd55c9934fe72a9f2569fc80b94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 30 Jul 2018 06:58:13 -0300
Subject: [PATCH 50/69] docz

---
 src/docs/introduction.mdx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/docs/introduction.mdx b/src/docs/introduction.mdx
index 73121ef24..65a72f2c0 100644
--- a/src/docs/introduction.mdx
+++ b/src/docs/introduction.mdx
@@ -5,5 +5,11 @@ route: '/'
 
 # Introduction
 
-Hello, I'm a mdx file!
+## Running the Talk V5
+
+Run this command to start Talk V5 in watch mode:
+
+```sh
+npm run watch
+```
 

From 466cecda5f3f48ab89e5731ecbab1c33ed9b96fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 31 Jul 2018 11:11:54 -0300
Subject: [PATCH 51/69] Adding the mutation

---
 .../components/Permalink/PermalinkView.tsx    | 10 +--
 .../containers/PermalinkViewContainer.tsx     | 76 ++++++++++++-------
 src/core/client/stream/local/constants.ts     |  1 +
 .../stream/mutations/SetCommentIDMutation.ts  | 21 +++++
 src/core/client/stream/mutations/index.ts     |  1 +
 5 files changed, 76 insertions(+), 33 deletions(-)
 create mode 100644 src/core/client/stream/mutations/SetCommentIDMutation.ts

diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index 2e693e56c..ae9f7f6ae 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -6,14 +6,16 @@ import { Button, Flex, Typography } from "talk-ui/components";
 import CommentContainer from "../../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
 
-export interface InnerProps {
+export interface PermalinkViewProps {
   comment: {} | null;
   assetURL: string | null;
+  onShowAllComments: () => void;
 }
 
-const PermalinkView: StatelessComponent<InnerProps> = ({
+const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
   assetURL,
   comment,
+  onShowAllComments,
 }) => {
   if (comment) {
     return (
@@ -23,9 +25,7 @@ const PermalinkView: StatelessComponent<InnerProps> = ({
           <Button
             variant="outlined"
             color="primary"
-            onClick={() => {
-              window.location.href = assetURL;
-            }}
+            onClick={onShowAllComments}
             fullWidth
           >
             Show all Comments
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index e99578a9c..b59e40588 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -1,42 +1,62 @@
-import React, { StatelessComponent } from "react";
+import React from "react";
 import { graphql } from "react-relay";
-import { withFragmentContainer } from "talk-framework/lib/relay";
-import { withLocalStateContainer } from "talk-framework/lib/relay";
-import { PropTypesOf } from "talk-framework/types";
+import {
+  withFragmentContainer,
+  withLocalStateContainer,
+} from "talk-framework/lib/relay";
 import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
+import {
+  SetCommentIDMutation,
+  withSetCommentIDMutation,
+} from "talk-stream/mutations";
 import PermalinkView from "../components/Permalink/PermalinkView";
 
-interface InnerProps {
+interface PermalinkViewContainerProps {
   data: Data;
   local: Local;
+  setCommentID: SetCommentIDMutation;
 }
 
-export const PermalinkViewContainer: StatelessComponent<InnerProps> = ({
-  local,
-  data,
-}) => {
-  return <PermalinkView {...data} assetURL={local.assetURL} />;
-};
+class PermalinkViewContainer extends React.Component<
+  PermalinkViewContainerProps
+> {
+  private showAllComments = () => {
+    const { local } = this.props;
+    window.location.href = local.assetURL!;
+    // mutation
+  };
+  public render() {
+    const { data, local } = this.props;
+    return (
+      <PermalinkView
+        {...data}
+        assetURL={local.assetURL}
+        onShowAllComments={this.showAllComments}
+      />
+    );
+  }
+}
 
-const enhanced = withFragmentContainer<{ data: Data }>({
-  data: graphql`
-    fragment PermalinkViewContainerQuery on Query
-      @argumentDefinitions(commentID: { type: "ID!" }) {
-      comment(id: $commentID) {
-        ...CommentContainer
+const enhanced = withSetCommentIDMutation(
+  withFragmentContainer<{ data: Data }>({
+    data: graphql`
+      fragment PermalinkViewContainerQuery on Query
+        @argumentDefinitions(commentID: { type: "ID!" }) {
+        comment(id: $commentID) {
+          ...CommentContainer
+        }
       }
-    }
-  `,
-})(
-  withLocalStateContainer<Local>(
-    graphql`
-      fragment PermalinkViewContainerLocal on Local {
-        assetURL
-      }
-    `
-  )(PermalinkViewContainer)
+    `,
+  })(
+    withLocalStateContainer<Local>(
+      graphql`
+        fragment PermalinkViewContainerLocal on Local {
+          assetURL
+        }
+      `
+    )(PermalinkViewContainer)
+  )
 );
 
-export type PermalinkViewContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/stream/local/constants.ts b/src/core/client/stream/local/constants.ts
index 599c79497..9efc525f0 100644
--- a/src/core/client/stream/local/constants.ts
+++ b/src/core/client/stream/local/constants.ts
@@ -4,3 +4,4 @@
 
 export const NETWORK_TYPE = "Network";
 export const NETWORK_ID = "client:root.local.network";
+export const LOCAL_ID = "client:root.local";
diff --git a/src/core/client/stream/mutations/SetCommentIDMutation.ts b/src/core/client/stream/mutations/SetCommentIDMutation.ts
new file mode 100644
index 000000000..8f6b6caf2
--- /dev/null
+++ b/src/core/client/stream/mutations/SetCommentIDMutation.ts
@@ -0,0 +1,21 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+import { createMutationContainer } from "talk-framework/lib/relay";
+import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
+
+export interface SetCommentIDInput {
+  commentID: string | null;
+}
+
+export type SetCommentIDMutation = (input: SetCommentIDInput) => void;
+
+async function commit(environment: Environment, input: SetCommentIDInput) {
+  return commitLocalUpdate(environment, store => {
+    const record = store.get(LOCAL_ID)!;
+    record.setValue(input.commentID, "commentID");
+  });
+}
+
+export const withSetCommentIDMutation = createMutationContainer(
+  "setCommentID",
+  commit
+);
diff --git a/src/core/client/stream/mutations/index.ts b/src/core/client/stream/mutations/index.ts
index 83ea079c0..bbe1b2b00 100644
--- a/src/core/client/stream/mutations/index.ts
+++ b/src/core/client/stream/mutations/index.ts
@@ -1,2 +1,3 @@
 export * from "./CreateCommentMutation";
 export * from "./SetNetworkStatusMutation";
+export * from "./SetCommentIDMutation";

From bf959691ebb561fd25961b7b43a119836f940cc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 31 Jul 2018 11:18:13 -0300
Subject: [PATCH 52/69] Changes

---
 src/core/client/stream/containers/CommentContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index bda790209..0316112d1 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -7,7 +7,7 @@ import { CommentContainer as Data } from "talk-stream/__generated__/CommentConta
 
 import Comment from "../components/Comment";
 
-export interface InnerProps {
+interface InnerProps {
   data: Data;
 }
 

From 7c446bc9d8e38181e416339bf8c653bbdfdf6ccf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 31 Jul 2018 11:20:16 -0300
Subject: [PATCH 53/69] Changes

---
 src/core/client/stream/containers/CommentContainer.spec.tsx     | 2 +-
 .../containers/__snapshots__/CommentContainer.spec.tsx.snap     | 2 +-
 src/core/client/stream/local/constants.ts                       | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
index c159f55ac..15ba3d898 100644
--- a/src/core/client/stream/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -8,7 +8,7 @@ import { CommentContainer } from "./CommentContainer";
 it("renders username and body", () => {
   const props: PropTypesOf<typeof CommentContainer> = {
     data: {
-      id: "comment-ID",
+      id: "comment-id",
       author: {
         username: "Marvin",
       },
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
index ad9f8dc43..0f2d70c9a 100644
--- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -9,6 +9,6 @@ exports[`renders username and body 1`] = `
   }
   body="Woof"
   createdAt="1995-12-17T03:24:00.000Z"
-  id="comment-ID"
+  id="comment-id"
 />
 `;
diff --git a/src/core/client/stream/local/constants.ts b/src/core/client/stream/local/constants.ts
index 9efc525f0..599c79497 100644
--- a/src/core/client/stream/local/constants.ts
+++ b/src/core/client/stream/local/constants.ts
@@ -4,4 +4,3 @@
 
 export const NETWORK_TYPE = "Network";
 export const NETWORK_ID = "client:root.local.network";
-export const LOCAL_ID = "client:root.local";

From 64b579695e478c6448cce4659263ccbb79341f4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 31 Jul 2018 11:23:30 -0300
Subject: [PATCH 54/69] Let`s only cover english and then cover all the
 languagues with Pontoon later

---
 src/locales/es/stream.ftl | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/locales/es/stream.ftl b/src/locales/es/stream.ftl
index 30a906cb1..e69de29bb 100644
--- a/src/locales/es/stream.ftl
+++ b/src/locales/es/stream.ftl
@@ -1,3 +0,0 @@
-share = Compartir
-copy = Copiar
-copied = Copiado

From d05508d5749174b8967d0bd4fbddbd90f07469f7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 3 Aug 2018 15:33:04 +0200
Subject: [PATCH 55/69] Adapt Icon sizes

---
 package-lock.json                           | 138 ++++++++++----------
 package.json                                |   2 +-
 src/core/client/ui/components/Icon/Icon.css |  12 +-
 3 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f0e5ae1df..7671b4851 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9199,27 +9199,27 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
         "aproba": {
           "version": "1.2.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.4",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
           "dev": true,
           "optional": true,
@@ -9230,13 +9230,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
           "requires": {
@@ -9246,39 +9246,39 @@
         },
         "chownr": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
           "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true,
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "optional": true,
@@ -9288,28 +9288,28 @@
         },
         "deep-extend": {
           "version": "0.5.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==",
           "dev": true,
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "dev": true,
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "dev": true,
           "optional": true,
@@ -9319,14 +9319,14 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "dev": true,
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
@@ -9343,7 +9343,7 @@
         },
         "glob": {
           "version": "7.1.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "dev": true,
           "optional": true,
@@ -9358,14 +9358,14 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.21",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
           "dev": true,
           "optional": true,
@@ -9375,7 +9375,7 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "dev": true,
           "optional": true,
@@ -9385,7 +9385,7 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "optional": true,
@@ -9396,20 +9396,20 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "dev": true
         },
         "ini": {
           "version": "1.3.5",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "requires": {
@@ -9418,14 +9418,14 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
           "requires": {
@@ -9434,13 +9434,13 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "minipass": {
           "version": "2.2.4",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
           "requires": {
@@ -9450,7 +9450,7 @@
         },
         "minizlib": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
           "dev": true,
           "optional": true,
@@ -9460,7 +9460,7 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
@@ -9469,14 +9469,14 @@
         },
         "ms": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true,
           "optional": true
         },
         "needle": {
           "version": "2.2.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
           "dev": true,
           "optional": true,
@@ -9488,7 +9488,7 @@
         },
         "node-pre-gyp": {
           "version": "0.10.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==",
           "dev": true,
           "optional": true,
@@ -9507,7 +9507,7 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
@@ -9518,14 +9518,14 @@
         },
         "npm-bundled": {
           "version": "1.0.3",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
           "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.1.10",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
           "dev": true,
           "optional": true,
@@ -9536,7 +9536,7 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "dev": true,
           "optional": true,
@@ -9549,20 +9549,20 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
           "requires": {
@@ -9571,21 +9571,21 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "dev": true,
           "optional": true,
@@ -9596,21 +9596,21 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.7",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==",
           "dev": true,
           "optional": true,
@@ -9623,7 +9623,7 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "resolved": false,
+              "resolved": "",
               "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "dev": true,
               "optional": true
@@ -9632,7 +9632,7 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "optional": true,
@@ -9648,7 +9648,7 @@
         },
         "rimraf": {
           "version": "2.6.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
           "dev": true,
           "optional": true,
@@ -9658,48 +9658,48 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
           "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.5.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
@@ -9710,7 +9710,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "optional": true,
@@ -9720,7 +9720,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -9729,14 +9729,14 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "dev": true,
           "optional": true
         },
         "tar": {
           "version": "4.4.1",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
           "dev": true,
           "optional": true,
@@ -9752,14 +9752,14 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
           "dev": true,
           "optional": true,
@@ -9769,13 +9769,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "dev": true
         },
         "yallist": {
           "version": "3.0.2",
-          "resolved": false,
+          "resolved": "",
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
           "dev": true
         }
@@ -22014,9 +22014,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
-      "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.0.1.tgz",
+      "integrity": "sha512-zQIMOmC+372pC/CCVLqnQ0zSBiY7HHodU7mpQdjiZddek4GMj31I3dUJ7gAs9o65X7mnRma6OokOkc6f9jjfBg==",
       "dev": true
     },
     "ua-parser-js": {
diff --git a/package.json b/package.json
index 9047ce6a4..f8a81f352 100644
--- a/package.json
+++ b/package.json
@@ -166,7 +166,7 @@
     "typed-css-modules": "^0.3.4",
     "typeface-manuale": "0.0.54",
     "typeface-source-sans-pro": "0.0.54",
-    "typescript": "^2.9.2",
+    "typescript": "^3.0.0",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "4.12.0",
     "webpack-cli": "^3.0.2",
diff --git a/src/core/client/ui/components/Icon/Icon.css b/src/core/client/ui/components/Icon/Icon.css
index 37fb390d5..a34a46bfa 100644
--- a/src/core/client/ui/components/Icon/Icon.css
+++ b/src/core/client/ui/components/Icon/Icon.css
@@ -37,18 +37,18 @@
 }
 
 .sm {
+  font-size: 14px;
+  width: 14px;
+}
+.md {
   font-size: 18px;
   width: 18px;
 }
-.md {
+.lg {
   font-size: 24px;
   width: 24px;
 }
-.lg {
+.xl {
   font-size: 36px;
   width: 36px;
 }
-.xl {
-  font-size: 48px;
-  width: 48px;
-}

From 1376ed255ba63caf4543069f253b052d041af27a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 3 Aug 2018 15:57:14 +0200
Subject: [PATCH 56/69] Improve styling, accessebility, usability and use
 mutation

---
 .../stream/components/Comment/Comment.css     |  2 +-
 .../stream/components/Comment/Comment.tsx     |  4 +-
 .../stream/components/Permalink/Permalink.tsx | 38 -----------
 .../components/Permalink/PermalinkPopover.tsx | 60 ------------------
 .../PermalinkButton/PermalinkButton.tsx       | 63 +++++++++++++++++++
 .../PermalinkButton/PermalinkPopover.css      |  7 +++
 .../PermalinkButton/PermalinkPopover.tsx      | 60 ++++++++++++++++++
 .../components/PermalinkButton/index.ts       |  1 +
 .../{Permalink => }/PermalinkView.css         |  0
 .../{Permalink => }/PermalinkView.tsx         |  6 +-
 ...ainer.tsx => PermalinkButtonContainer.tsx} |  8 +--
 .../containers/PermalinkViewContainer.tsx     |  6 +-
 .../stream/mutations/SetCommentIDMutation.ts  |  6 +-
 .../mutations/SetNetworkStatusMutation.ts     |  4 +-
 .../__snapshots__/AppQuery.spec.tsx.snap      |  2 +-
 .../components/ClickOutside/ClickOutside.tsx  |  4 +-
 .../client/ui/components/Popover/Popover.css  |  2 +-
 .../client/ui/components/Popover/Popover.tsx  | 55 ++++++++--------
 .../ui/components/TextField/TextField.css     |  2 +-
 src/core/common/utils/index.ts                |  1 +
 src/core/common/utils/oncePerFrame.ts         | 18 ++++++
 21 files changed, 202 insertions(+), 147 deletions(-)
 delete mode 100644 src/core/client/stream/components/Permalink/Permalink.tsx
 delete mode 100644 src/core/client/stream/components/Permalink/PermalinkPopover.tsx
 create mode 100644 src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
 create mode 100644 src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
 create mode 100644 src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
 create mode 100644 src/core/client/stream/components/PermalinkButton/index.ts
 rename src/core/client/stream/components/{Permalink => }/PermalinkView.css (100%)
 rename src/core/client/stream/components/{Permalink => }/PermalinkView.tsx (90%)
 rename src/core/client/stream/containers/{PermalinkContainer.tsx => PermalinkButtonContainer.tsx} (61%)
 create mode 100644 src/core/common/utils/oncePerFrame.ts

diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
index abbd6ac69..c4bf8c532 100644
--- a/src/core/client/stream/components/Comment/Comment.css
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -1,3 +1,3 @@
 .footer {
-  margin-top: calc(1.5 * var(--spacing-unit));
+  margin-top: var(--spacing-unit);
 }
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 5afe6f61c..4dbda55bf 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -3,7 +3,7 @@ import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
-import PermalinkContainer from "../../containers/PermalinkContainer";
+import PermalinkButtonContainer from "../../containers/PermalinkButtonContainer";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";
@@ -27,7 +27,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div className={styles.footer}>
-        <PermalinkContainer commentID={props.id} />
+        <PermalinkButtonContainer commentID={props.id} />
       </div>
     </div>
   );
diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx
deleted file mode 100644
index 40500904e..000000000
--- a/src/core/client/stream/components/Permalink/Permalink.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React from "react";
-import { Button, ButtonIcon, Popover } from "talk-ui/components";
-import PermalinkPopover from "./PermalinkPopover";
-
-interface PermalinkProps {
-  commentID: string;
-  assetURL: string | null;
-}
-
-class Permalink extends React.Component<PermalinkProps> {
-  public render() {
-    const { commentID, assetURL } = this.props;
-    return (
-      <Popover
-        id="permalink-popover"
-        placement="top"
-        body={({ toggleVisibility }) => (
-          <PermalinkPopover
-            permalinkUrl={`${assetURL}&commentID=${commentID}`}
-            toggleVisibility={toggleVisibility}
-          />
-        )}
-      >
-        {({ toggleVisibility, forwardRef }) => (
-          <Button onClick={toggleVisibility} forwardRef={forwardRef}>
-            <ButtonIcon>share</ButtonIcon>
-            <Localized id="comments-permalink-share">
-              <span>Share</span>
-            </Localized>
-          </Button>
-        )}
-      </Popover>
-    );
-  }
-}
-
-export default Permalink;
diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
deleted file mode 100644
index 32495a902..000000000
--- a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React, { CSSProperties } from "react";
-import CopyToClipboard from "react-copy-to-clipboard";
-import { Button, ClickOutside, Flex, TextField } from "talk-ui/components";
-
-interface InnerProps {
-  permalinkUrl: string;
-  style?: CSSProperties;
-  toggleVisibility: () => void;
-}
-
-interface State {
-  copied: boolean;
-}
-
-class PermalinkPopover extends React.Component<InnerProps> {
-  public state: State = {
-    copied: false,
-  };
-
-  public onCopy = async () => {
-    await this.toggleCopied();
-    setTimeout(() => {
-      this.toggleCopied();
-    }, 800);
-  };
-
-  public toggleCopied = () => {
-    this.setState((state: State) => ({
-      copied: !state.copied,
-    }));
-  };
-
-  public render() {
-    const { permalinkUrl, toggleVisibility } = this.props;
-    const { copied } = this.state;
-    return (
-      <ClickOutside onClickOutside={toggleVisibility}>
-        <Flex itemGutter="half">
-          <TextField defaultValue={permalinkUrl} />
-          <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
-            <Button color="primary" variant="filled">
-              {copied ? (
-                <Localized id="comments-permalink-copied">
-                  <span>Copied!</span>
-                </Localized>
-              ) : (
-                <Localized id="comments-permalink-copy">
-                  <span>Copy</span>
-                </Localized>
-              )}
-            </Button>
-          </CopyToClipboard>
-        </Flex>
-      </ClickOutside>
-    );
-  }
-}
-
-export default PermalinkPopover;
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
new file mode 100644
index 000000000..339e1780a
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
@@ -0,0 +1,63 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+import { oncePerFrame } from "talk-common/utils";
+import { Button, ButtonIcon, ClickOutside, Popover } from "talk-ui/components";
+
+import PermalinkPopover from "./PermalinkPopover";
+
+interface PermalinkProps {
+  commentID: string;
+  assetURL: string | null;
+}
+
+class Permalink extends React.Component<PermalinkProps> {
+  // Helpers that prevents calling toggleVisibility more then once per frame.
+  // In essence this means we'll only process an event only once.
+  // This might happen, when clicking on the button which will
+  // cause its onClick to happen as well as onClickOutside.
+  private toggleVisibilityOncePerFrame = oncePerFrame(
+    (toggleVisibility: () => void) => toggleVisibility()
+  );
+
+  public render() {
+    const { commentID, assetURL } = this.props;
+    const popoverID = "permalink-popover";
+    return (
+      <Popover
+        id={popoverID}
+        placement="top-start"
+        description="A dialog showing a permalink to the comment"
+        body={({ toggleVisibility }) => (
+          <ClickOutside
+            onClickOutside={() =>
+              this.toggleVisibilityOncePerFrame(toggleVisibility)
+            }
+          >
+            <PermalinkPopover
+              permalinkURL={`${assetURL}&commentID=${commentID}`}
+              toggleVisibility={toggleVisibility}
+            />
+          </ClickOutside>
+        )}
+      >
+        {({ toggleVisibility, forwardRef, visible }) => (
+          <Button
+            onClick={() => this.toggleVisibilityOncePerFrame(toggleVisibility)}
+            aria-controls={popoverID}
+            forwardRef={forwardRef}
+            variant="ghost"
+            active={visible}
+            size="small"
+          >
+            <ButtonIcon>share</ButtonIcon>
+            <Localized id="comments-permalink-share">
+              <span>Share</span>
+            </Localized>
+          </Button>
+        )}
+      </Popover>
+    );
+  }
+}
+
+export default Permalink;
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
new file mode 100644
index 000000000..e6cb4ee63
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
@@ -0,0 +1,7 @@
+.root {
+  width: 300px;
+}
+
+.textField {
+  flex-grow: 1;
+}
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
new file mode 100644
index 000000000..218bd78f6
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
@@ -0,0 +1,60 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+
+import { Button, Flex, TextField } from "talk-ui/components";
+
+import * as styles from "./PermalinkPopover.css";
+
+interface InnerProps {
+  permalinkURL: string;
+  toggleVisibility: () => void;
+}
+
+interface State {
+  copied: boolean;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
+  public state: State = {
+    copied: false,
+  };
+
+  private onCopy = async () => {
+    await this.toggleCopied();
+    setTimeout(() => {
+      this.toggleCopied();
+    }, 800);
+  };
+
+  private toggleCopied = () => {
+    this.setState((state: State) => ({
+      copied: !state.copied,
+    }));
+  };
+
+  public render() {
+    const { permalinkURL } = this.props;
+    const { copied } = this.state;
+    return (
+      <Flex itemGutter="half" className={styles.root}>
+        <TextField defaultValue={permalinkURL} className={styles.textField} />
+        <CopyToClipboard text={permalinkURL} onCopy={this.onCopy}>
+          <Button color="primary" variant="filled" size="small">
+            {copied ? (
+              <Localized id="comments-permalink-copied">
+                <span>Copied!</span>
+              </Localized>
+            ) : (
+              <Localized id="comments-permalink-copy">
+                <span>Copy</span>
+              </Localized>
+            )}
+          </Button>
+        </CopyToClipboard>
+      </Flex>
+    );
+  }
+}
+
+export default PermalinkPopover;
diff --git a/src/core/client/stream/components/PermalinkButton/index.ts b/src/core/client/stream/components/PermalinkButton/index.ts
new file mode 100644
index 000000000..de6d61c1c
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkButton/index.ts
@@ -0,0 +1 @@
+export { default } from "./PermalinkButton";
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.css b/src/core/client/stream/components/PermalinkView.css
similarity index 100%
rename from src/core/client/stream/components/Permalink/PermalinkView.css
rename to src/core/client/stream/components/PermalinkView.css
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
similarity index 90%
rename from src/core/client/stream/components/Permalink/PermalinkView.tsx
rename to src/core/client/stream/components/PermalinkView.tsx
index ae9f7f6ae..10c2f8470 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
 
 import Logo from "talk-stream/components/Logo";
 import { Button, Flex, Typography } from "talk-ui/components";
-import CommentContainer from "../../containers/CommentContainer";
+
+import CommentContainer from "../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
 
 export interface PermalinkViewProps {
diff --git a/src/core/client/stream/containers/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkButtonContainer.tsx
similarity index 61%
rename from src/core/client/stream/containers/PermalinkContainer.tsx
rename to src/core/client/stream/containers/PermalinkButtonContainer.tsx
index 1176426c5..fd1509117 100644
--- a/src/core/client/stream/containers/PermalinkContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkButtonContainer.tsx
@@ -1,9 +1,9 @@
 import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
 import { withLocalStateContainer } from "talk-framework/lib/relay";
-import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
+import { PermalinkButtonContainerLocal as Local } from "talk-stream/__generated__/PermalinkButtonContainerLocal.graphql";
 
-import Permalink from "../components/Permalink/Permalink";
+import PermalinkButton from "../components/PermalinkButton";
 
 interface InnerProps {
   local: Local;
@@ -15,13 +15,13 @@ export const PermalinkContainer: StatelessComponent<InnerProps> = ({
   commentID,
 }) => {
   return local.assetURL ? (
-    <Permalink assetURL={local.assetURL} commentID={commentID} />
+    <PermalinkButton assetURL={local.assetURL} commentID={commentID} />
   ) : null;
 };
 
 const enhanced = withLocalStateContainer<Local>(
   graphql`
-    fragment PermalinkContainerLocal on Local {
+    fragment PermalinkButtonContainerLocal on Local {
       assetURL
     }
   `
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index b59e40588..ac2c824a9 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -10,7 +10,7 @@ import {
   SetCommentIDMutation,
   withSetCommentIDMutation,
 } from "talk-stream/mutations";
-import PermalinkView from "../components/Permalink/PermalinkView";
+import PermalinkView from "../components/PermalinkView";
 
 interface PermalinkViewContainerProps {
   data: Data;
@@ -22,9 +22,7 @@ class PermalinkViewContainer extends React.Component<
   PermalinkViewContainerProps
 > {
   private showAllComments = () => {
-    const { local } = this.props;
-    window.location.href = local.assetURL!;
-    // mutation
+    this.props.setCommentID({ id: null });
   };
   public render() {
     const { data, local } = this.props;
diff --git a/src/core/client/stream/mutations/SetCommentIDMutation.ts b/src/core/client/stream/mutations/SetCommentIDMutation.ts
index 8f6b6caf2..a29a70016 100644
--- a/src/core/client/stream/mutations/SetCommentIDMutation.ts
+++ b/src/core/client/stream/mutations/SetCommentIDMutation.ts
@@ -3,15 +3,15 @@ import { createMutationContainer } from "talk-framework/lib/relay";
 import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
 
 export interface SetCommentIDInput {
-  commentID: string | null;
+  id: string | null;
 }
 
-export type SetCommentIDMutation = (input: SetCommentIDInput) => void;
+export type SetCommentIDMutation = (input: SetCommentIDInput) => Promise<void>;
 
 async function commit(environment: Environment, input: SetCommentIDInput) {
   return commitLocalUpdate(environment, store => {
     const record = store.get(LOCAL_ID)!;
-    record.setValue(input.commentID, "commentID");
+    record.setValue(input.id, "commentID");
   });
 }
 
diff --git a/src/core/client/stream/mutations/SetNetworkStatusMutation.ts b/src/core/client/stream/mutations/SetNetworkStatusMutation.ts
index e5c5d0145..87d15e83f 100644
--- a/src/core/client/stream/mutations/SetNetworkStatusMutation.ts
+++ b/src/core/client/stream/mutations/SetNetworkStatusMutation.ts
@@ -8,7 +8,9 @@ export interface SetNetworkStatusInput {
   isOffline: boolean;
 }
 
-export type SetNetworkStatusMutation = (input: SetNetworkStatusInput) => void;
+export type SetNetworkStatusMutation = (
+  input: SetNetworkStatusInput
+) => Promise<void>;
 
 async function commit(environment: Environment, input: SetNetworkStatusInput) {
   return commitLocalUpdate(environment, store => {
diff --git a/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
index ffc62c435..87dfae59d 100644
--- a/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
+++ b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
@@ -19,7 +19,7 @@ exports[`renders loading 1`] = `
 `;
 
 exports[`renders permalink view 1`] = `
-<Relay(PermalinkViewContainer)
+<withContext(createMutationContainer(Relay(withContext(LocalStateContainer))))
   data={Object {}}
 />
 `;
diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
index b23f7ff3c..18714f282 100644
--- a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
+++ b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { findDOMNode } from "react-dom";
 
 export interface ClickOutsideProps {
-  onClickOutside: () => void;
+  onClickOutside: (e?: MouseEvent) => void;
   children: React.ReactNode;
 }
 
@@ -13,7 +13,7 @@ class ClickOutside extends React.Component<ClickOutsideProps> {
     const { onClickOutside } = this.props;
     if (!e || !this.domNode!.contains(e.target as HTMLInputElement)) {
       // tslint:disable-next-line:no-unused-expression
-      onClickOutside && onClickOutside();
+      onClickOutside && onClickOutside(e);
     }
   };
 
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
index 89037c5f3..a47f820a4 100644
--- a/src/core/client/ui/components/Popover/Popover.css
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -6,7 +6,7 @@
   border-radius: 1px;
   color: #222;
   display: flex;
-  padding: 6px 10px;
+  padding: calc(0.5 * var(--spacing-unit));
 
   &:after,
   &::before {
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 1122c73db..3123422ee 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -27,10 +27,21 @@ type Placement =
   | "left"
   | "left-start";
 
+interface BodyRenderProps {
+  toggleVisibility: () => void;
+  visible: boolean;
+}
+
+interface ChildrenRenderProps {
+  toggleVisibility: () => void;
+  forwardRef?: RefHandler;
+  visible: boolean;
+}
+
 interface PopoverProps {
-  body: (props: RenderProps) => React.ReactNode | React.ReactElement<any>;
-  children: (props: RenderProps) => React.ReactNode;
-  description?: string;
+  body: (props: BodyRenderProps) => React.ReactNode | React.ReactElement<any>;
+  children: (props: ChildrenRenderProps) => React.ReactNode;
+  description: string;
   id: string;
   onClose?: () => void;
   className?: string;
@@ -41,11 +52,6 @@ interface State {
   visible: false;
 }
 
-interface RenderProps {
-  toggleVisibility: () => void;
-  forwardRef?: RefHandler;
-}
-
 class Popover extends React.Component<PopoverProps> {
   public state: State = {
     visible: false,
@@ -97,24 +103,20 @@ class Popover extends React.Component<PopoverProps> {
             children({
               forwardRef: props.ref,
               toggleVisibility: this.toggleVisibility,
+              visible: this.state.visible,
             })
           }
         </Reference>
-        <Popper
-          placement={placement}
-          modifiers={{ preventOverflow: { enabled: false } }}
-          eventsEnabled
-          positionFixed={false}
-        >
-          {(props: PopperArrowProps) =>
-            visible && (
-              <div
-                id={id}
-                role="popup"
-                aria-labelledby={`${id}-ariainfo`}
-                aria-hidden={!visible}
-              >
-                <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+        <Popper placement={placement} eventsEnabled positionFixed={false}>
+          {(props: PopperArrowProps) => (
+            <div
+              id={id}
+              role="popup"
+              aria-labelledby={`${id}-ariainfo`}
+              aria-hidden={!visible}
+            >
+              <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+              {visible && (
                 <div
                   style={props.style}
                   className={cn(styles.root, className)}
@@ -123,12 +125,13 @@ class Popover extends React.Component<PopoverProps> {
                   {typeof body === "function"
                     ? body({
                         toggleVisibility: this.toggleVisibility,
+                        visible: this.state.visible,
                       })
                     : body}
                 </div>
-              </div>
-            )
-          }
+              )}
+            </div>
+          )}
         </Popper>
       </Manager>
     );
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index ca9fc25cc..8fbf2c7db 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -4,5 +4,5 @@
   border: 1px solid #979797;
   box-sizing: border-box;
   border-radius: 1px;
-  padding: 5px 20px;
+  padding: calc(0.5 * var(--spacing-unit));
 }
diff --git a/src/core/common/utils/index.ts b/src/core/common/utils/index.ts
index e91489017..b5b0a0be6 100644
--- a/src/core/common/utils/index.ts
+++ b/src/core/common/utils/index.ts
@@ -1,2 +1,3 @@
 export { default as timeout } from "./timeout";
 export { default as pascalCase } from "./pascalCase";
+export { default as oncePerFrame } from "./oncePerFrame";
diff --git a/src/core/common/utils/oncePerFrame.ts b/src/core/common/utils/oncePerFrame.ts
new file mode 100644
index 000000000..a5e59bd9b
--- /dev/null
+++ b/src/core/common/utils/oncePerFrame.ts
@@ -0,0 +1,18 @@
+/**
+ * Function decorator that prevents calling `fn` more then once per frame.
+ * If called more than once, the last return value gets returned.
+ */
+const oncePerFrame = <T extends (...args: any[]) => any>(fn: T) => {
+  let toggledThisFrame = false;
+  let lastResult: any = null;
+  return ((...args: any[]) => {
+    if (toggledThisFrame) {
+      return lastResult;
+    }
+    toggledThisFrame = true;
+    lastResult = fn(...args);
+    setTimeout(() => (toggledThisFrame = false), 0);
+  }) as T;
+};
+
+export default oncePerFrame;

From b3fa5e1e7325294c520e06f7578cdb892af7a409 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 3 Aug 2018 18:19:37 +0200
Subject: [PATCH 57/69] Integrate with embed

---
 src/core/client/embed/Stream.ts               |  7 +++-
 src/core/client/embed/decorators/index.ts     |  2 +-
 .../client/embed/decorators/withCommentID.ts  | 36 -----------------
 ...entID.spec.ts => withSetCommentID.spec.ts} | 10 ++---
 .../embed/decorators/withSetCommentID.ts      | 22 ++++++++++
 src/core/client/embed/index.ts                |  2 +
 .../lib/relay/createMutationContainer.tsx     | 16 ++++++--
 src/core/client/stream/components/Logo.tsx    | 22 ----------
 .../stream/components/PermalinkView.css       |  5 +--
 .../stream/components/PermalinkView.tsx       | 40 +++++--------------
 src/core/client/stream/components/Stream.tsx  |  2 -
 .../stream/mutations/SetCommentIDMutation.ts  | 12 +++++-
 .../components/ClickOutside/ClickOutside.tsx  |  4 +-
 .../ui/components/ClickOutside/index.ts       |  2 +-
 14 files changed, 74 insertions(+), 108 deletions(-)
 delete mode 100644 src/core/client/embed/decorators/withCommentID.ts
 rename src/core/client/embed/decorators/{withCommentID.spec.ts => withSetCommentID.spec.ts} (82%)
 create mode 100644 src/core/client/embed/decorators/withSetCommentID.ts
 delete mode 100644 src/core/client/stream/components/Logo.tsx

diff --git a/src/core/client/embed/Stream.ts b/src/core/client/embed/Stream.ts
index 61db1863d..ae47e450e 100644
--- a/src/core/client/embed/Stream.ts
+++ b/src/core/client/embed/Stream.ts
@@ -5,9 +5,9 @@ import {
   Decorator,
   withAutoHeight,
   withClickEvent,
-  withCommentID,
   withEventEmitter,
   withIOSSafariWidthWorkaround,
+  withSetCommentID,
 } from "./decorators";
 import PymControl from "./PymControl";
 import { ensureEndSlash } from "./utils";
@@ -15,6 +15,7 @@ import { ensureEndSlash } from "./utils";
 interface CreatePymControlConfig {
   assetID?: string;
   assetURL?: string;
+  commentID?: string;
   title?: string;
   eventEmitter: EventEmitter2;
   id: string;
@@ -26,13 +27,14 @@ export function createPymControl(config: CreatePymControlConfig) {
     withIOSSafariWidthWorkaround,
     withAutoHeight,
     withClickEvent,
-    withCommentID,
+    withSetCommentID,
     withEventEmitter(config.eventEmitter),
   ];
 
   const query = qs.stringify({
     assetID: config.assetID,
     assetURL: config.assetURL,
+    commentID: config.commentID,
   });
   const url = `${ensureEndSlash(config.rootURL)}stream.html?${query}`;
   return new PymControl({
@@ -73,6 +75,7 @@ export type StreamInterface = ReturnType<typeof createStreamInterface>;
 export interface CreateConfig {
   assetID?: string;
   assetURL?: string;
+  commentID?: string;
   title?: string;
   eventEmitter: EventEmitter2;
   id: string;
diff --git a/src/core/client/embed/decorators/index.ts b/src/core/client/embed/decorators/index.ts
index 59dbac12c..6e2d45195 100644
--- a/src/core/client/embed/decorators/index.ts
+++ b/src/core/client/embed/decorators/index.ts
@@ -4,7 +4,7 @@ export type CleanupCallback = () => void;
 export type Decorator = (pym: pym.Parent) => CleanupCallback | void;
 export { default as withAutoHeight } from "./withAutoHeight";
 export { default as withClickEvent } from "./withClickEvent";
-export { default as withCommentID } from "./withCommentID";
+export { default as withSetCommentID } from "./withSetCommentID";
 export { default as withEventEmitter } from "./withEventEmitter";
 export {
   default as withIOSSafariWidthWorkaround,
diff --git a/src/core/client/embed/decorators/withCommentID.ts b/src/core/client/embed/decorators/withCommentID.ts
deleted file mode 100644
index 3fa968374..000000000
--- a/src/core/client/embed/decorators/withCommentID.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import qs from "query-string";
-
-import { buildURL } from "../utils";
-import { Decorator } from "./";
-
-const withCommentID: Decorator = pym => {
-  // Remove the comment id from the query.
-  pym.onMessage("view-all-comments", () => {
-    const search = qs.stringify({
-      ...qs.parse(location.search),
-      commentId: undefined,
-    });
-
-    // Remove the commentId url param.
-    const url = buildURL({ search });
-
-    // Change the url.
-    window.history.replaceState({}, document.title, url);
-  });
-
-  // Add the permalink comment id to the query.
-  pym.onMessage("view-comment", (id: string) => {
-    const search = qs.stringify({
-      ...qs.parse(location.search),
-      commentId: id,
-    });
-
-    // Remove the commentId url param.
-    const url = buildURL({ search });
-
-    // Change the url.
-    window.history.replaceState({}, document.title, url);
-  });
-};
-
-export default withCommentID;
diff --git a/src/core/client/embed/decorators/withCommentID.spec.ts b/src/core/client/embed/decorators/withSetCommentID.spec.ts
similarity index 82%
rename from src/core/client/embed/decorators/withCommentID.spec.ts
rename to src/core/client/embed/decorators/withSetCommentID.spec.ts
index 2c5802aa0..1c6b92281 100644
--- a/src/core/client/embed/decorators/withCommentID.spec.ts
+++ b/src/core/client/embed/decorators/withSetCommentID.spec.ts
@@ -1,16 +1,16 @@
-import withCommentID from "./withCommentID";
+import withSetCommentID from "./withSetCommentID";
 
 it("should add commentID", () => {
   const previousLocation = location.toString();
   const previousState = window.history.state;
   const fakePym = {
     onMessage: (type: string, callback: (id: string) => void) => {
-      if (type === "view-comment") {
+      if (type === "setCommentID") {
         callback("comment-id");
       }
     },
   };
-  withCommentID(fakePym as any);
+  withSetCommentID(fakePym as any);
   expect(location.toString()).toBe("http://localhost/?commentId=comment-id");
   window.history.replaceState(previousState, document.title, previousLocation);
 });
@@ -25,12 +25,12 @@ it("should remove commentID", () => {
   );
   const fakePym = {
     onMessage: (type: string, callback: () => void) => {
-      if (type === "view-all-comments") {
+      if (type === "setCommentID") {
         callback();
       }
     },
   };
-  withCommentID(fakePym as any);
+  withSetCommentID(fakePym as any);
   expect(location.toString()).toBe("http://localhost/");
   window.history.replaceState(previousState, document.title, previousLocation);
 });
diff --git a/src/core/client/embed/decorators/withSetCommentID.ts b/src/core/client/embed/decorators/withSetCommentID.ts
new file mode 100644
index 000000000..b2b6812a3
--- /dev/null
+++ b/src/core/client/embed/decorators/withSetCommentID.ts
@@ -0,0 +1,22 @@
+import qs from "query-string";
+
+import { buildURL } from "../utils";
+import { Decorator } from "./";
+
+const withSetCommentID: Decorator = pym => {
+  // Add the permalink comment id to the query.
+  pym.onMessage("setCommentID", (id: string) => {
+    const search = qs.stringify({
+      ...qs.parse(location.search),
+      commentID: id || undefined,
+    });
+
+    // Remove the commentId url param.
+    const url = buildURL({ search });
+
+    // Change the url.
+    window.history.replaceState({}, document.title, url);
+  });
+};
+
+export default withSetCommentID;
diff --git a/src/core/client/embed/index.ts b/src/core/client/embed/index.ts
index 6c6ebc36d..c440f72a8 100644
--- a/src/core/client/embed/index.ts
+++ b/src/core/client/embed/index.ts
@@ -6,6 +6,7 @@ import createStreamInterface from "./Stream";
 export interface Config {
   assetID?: string;
   assetURL?: string;
+  commentID?: string;
   rootURL?: string;
   id?: string;
   events?: (eventEmitter: EventEmitter2) => void;
@@ -23,6 +24,7 @@ export function render(config: Config = {}) {
   return createStreamInterface({
     assetID: config.assetID || query.assetID,
     assetURL: config.assetURL || query.assetURL,
+    commentID: config.commentID || query.commentID,
     id: config.id || "talk-embed-stream",
     rootURL: config.rootURL || location.origin,
     eventEmitter,
diff --git a/src/core/client/framework/lib/relay/createMutationContainer.tsx b/src/core/client/framework/lib/relay/createMutationContainer.tsx
index 0446e7d17..b8c74be18 100644
--- a/src/core/client/framework/lib/relay/createMutationContainer.tsx
+++ b/src/core/client/framework/lib/relay/createMutationContainer.tsx
@@ -7,7 +7,7 @@ import {
 } from "recompose";
 import { Environment } from "relay-runtime";
 
-import { withContext } from "../bootstrap";
+import { TalkContext, withContext } from "../bootstrap";
 
 /**
  * createMutationContainer creates a HOC that
@@ -18,10 +18,14 @@ import { withContext } from "../bootstrap";
  */
 function createMutationContainer<T extends string, I, R>(
   propName: T,
-  commit: (environment: Environment, input: I) => Promise<R>
+  commit: (
+    environment: Environment,
+    input: I,
+    context: TalkContext
+  ) => Promise<R>
 ): InferableComponentEnhancer<{ [P in T]: (input: I) => Promise<R> }> {
   return compose(
-    withContext(({ relayEnvironment }) => ({ relayEnvironment })),
+    withContext(context => ({ context })),
     hoistStatics((BaseComponent: React.ComponentType<any>) => {
       class CreateMutationContainer extends React.Component<any> {
         public static displayName = wrapDisplayName(
@@ -30,7 +34,11 @@ function createMutationContainer<T extends string, I, R>(
         );
 
         private commit = (input: I) => {
-          return commit(this.props.relayEnvironment, input);
+          return commit(
+            this.props.context.relayEnvironment,
+            input,
+            this.props.context
+          );
         };
 
         public render() {
diff --git a/src/core/client/stream/components/Logo.tsx b/src/core/client/stream/components/Logo.tsx
deleted file mode 100644
index 2fe4dcac0..000000000
--- a/src/core/client/stream/components/Logo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { StatelessComponent } from "react";
-
-import { Typography } from "talk-ui/components";
-
-export interface LogoProps {
-  className?: string;
-  gutterBottom?: boolean;
-}
-
-const Logo: StatelessComponent<LogoProps> = props => {
-  return (
-    <Localized id="stream-logo">
-      <Typography variant="heading1" gutterBottom={props.gutterBottom}>
-        Talk NEO
-      </Typography>
-    </Localized>
-  );
-};
-
-export default Logo;
diff --git a/src/core/client/stream/components/PermalinkView.css b/src/core/client/stream/components/PermalinkView.css
index a0c8f8cb8..1e9f3ca45 100644
--- a/src/core/client/stream/components/PermalinkView.css
+++ b/src/core/client/stream/components/PermalinkView.css
@@ -4,7 +4,6 @@
   margin: calc(0.5 * var(--spacing-unit)) auto;
 }
 
-.comment,
-.commentNotFound {
-  margin: calc(5 * var(--spacing-unit)) auto;
+.button {
+  margin-bottom: calc(2 * var(--spacing-unit));
 }
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
index 10c2f8470..68396ac74 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -1,6 +1,5 @@
 import React, { StatelessComponent } from "react";
 
-import Logo from "talk-stream/components/Logo";
 import { Button, Flex, Typography } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
@@ -17,44 +16,25 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
   comment,
   onShowAllComments,
 }) => {
-  if (comment) {
-    return (
-      <div className={styles.root}>
-        <Logo />
-        {assetURL && (
-          <Button
-            variant="outlined"
-            color="primary"
-            onClick={onShowAllComments}
-            fullWidth
-          >
-            Show all Comments
-          </Button>
-        )}
-        <Flex direction="column" className={styles.comment}>
-          <CommentContainer data={comment} />
-        </Flex>
-      </div>
-    );
-  }
-
   return (
     <div className={styles.root}>
-      <Logo />
-      <Typography className={styles.commentNotFound}>
-        Comment not found
-      </Typography>
       {assetURL && (
         <Button
-          variant="filled"
+          variant="outlined"
           color="primary"
-          onClick={() => {
-            window.location.href = assetURL;
-          }}
+          onClick={onShowAllComments}
+          className={styles.button}
+          fullWidth
         >
           Show all Comments
         </Button>
       )}
+      {!comment && <Typography>Comment not found</Typography>}
+      {comment && (
+        <Flex direction="column">
+          <CommentContainer data={comment} />
+        </Flex>
+      )}
     </div>
   );
 };
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 6601f4341..ef1ed5bda 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -7,7 +7,6 @@ import { Button, Flex } from "talk-ui/components";
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
-import Logo from "./Logo";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -22,7 +21,6 @@ export interface StreamProps {
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
     <div className={styles.root}>
-      <Logo gutterBottom />
       <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"
diff --git a/src/core/client/stream/mutations/SetCommentIDMutation.ts b/src/core/client/stream/mutations/SetCommentIDMutation.ts
index a29a70016..ce4eb9eb1 100644
--- a/src/core/client/stream/mutations/SetCommentIDMutation.ts
+++ b/src/core/client/stream/mutations/SetCommentIDMutation.ts
@@ -1,4 +1,6 @@
 import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import { TalkContext } from "talk-framework/lib/bootstrap";
 import { createMutationContainer } from "talk-framework/lib/relay";
 import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
 
@@ -8,10 +10,18 @@ export interface SetCommentIDInput {
 
 export type SetCommentIDMutation = (input: SetCommentIDInput) => Promise<void>;
 
-async function commit(environment: Environment, input: SetCommentIDInput) {
+async function commit(
+  environment: Environment,
+  input: SetCommentIDInput,
+  { pym }: TalkContext
+) {
   return commitLocalUpdate(environment, store => {
     const record = store.get(LOCAL_ID)!;
     record.setValue(input.id, "commentID");
+    if (pym) {
+      // This sets the comment id on the parent url.
+      pym.sendMessage("setCommentID", input.id || "");
+    }
   });
 }
 
diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
index afcda2695..275b5fdb0 100644
--- a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
+++ b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
@@ -65,7 +65,9 @@ export class ClickOutside extends React.Component<ClickOutsideProps> {
   }
 }
 
-const ClickOutsideWithContext: StatelessComponent<Props> = props => (
+const ClickOutsideWithContext: StatelessComponent<
+  ClickOutsideProps
+> = props => (
   <UIContext.Consumer>
     {({ registerClickFarAway }) => (
       <ClickOutside {...props} registerClickFarAway={registerClickFarAway} />
diff --git a/src/core/client/ui/components/ClickOutside/index.ts b/src/core/client/ui/components/ClickOutside/index.ts
index b70132125..91803ea08 100644
--- a/src/core/client/ui/components/ClickOutside/index.ts
+++ b/src/core/client/ui/components/ClickOutside/index.ts
@@ -1 +1 @@
-export { default as ClickOutside, ClickFarAwayRegister } from "./ClickOutside";
+export { default, ClickFarAwayRegister } from "./ClickOutside";

From 7dedf2c129c2b0d80c3689d0d80055c4dc2e27cb Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 3 Aug 2018 18:24:44 +0200
Subject: [PATCH 58/69] Update tests

---
 .../client/embed/decorators/withSetCommentID.spec.ts   |  4 ++--
 .../components/__snapshots__/Stream.spec.tsx.snap      |  9 ---------
 .../stream/test/__snapshots__/loadMore.spec.tsx.snap   | 10 ----------
 .../test/__snapshots__/renderReplies.spec.tsx.snap     |  5 -----
 .../test/__snapshots__/renderStream.spec.tsx.snap      |  5 -----
 .../test/__snapshots__/showAllReplies.spec.tsx.snap    | 10 ----------
 6 files changed, 2 insertions(+), 41 deletions(-)

diff --git a/src/core/client/embed/decorators/withSetCommentID.spec.ts b/src/core/client/embed/decorators/withSetCommentID.spec.ts
index 1c6b92281..ed8f17e8b 100644
--- a/src/core/client/embed/decorators/withSetCommentID.spec.ts
+++ b/src/core/client/embed/decorators/withSetCommentID.spec.ts
@@ -11,7 +11,7 @@ it("should add commentID", () => {
     },
   };
   withSetCommentID(fakePym as any);
-  expect(location.toString()).toBe("http://localhost/?commentId=comment-id");
+  expect(location.toString()).toBe("http://localhost/?commentID=comment-id");
   window.history.replaceState(previousState, document.title, previousLocation);
 });
 
@@ -21,7 +21,7 @@ it("should remove commentID", () => {
   window.history.replaceState(
     previousState,
     document.title,
-    "http://localhost/?commentId=comment-id"
+    "http://localhost/?commentID=comment-id"
   );
   const fakePym = {
     onMessage: (type: string, callback: () => void) => {
diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
index 95b463311..5da869b02 100644
--- a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
@@ -4,9 +4,6 @@ exports[`renders correctly 1`] = `
 <div
   className="Stream-root"
 >
-  <Logo
-    gutterBottom={true}
-  />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -65,9 +62,6 @@ exports[`when there is more disables load more button 1`] = `
 <div
   className="Stream-root"
 >
-  <Logo
-    gutterBottom={true}
-  />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -140,9 +134,6 @@ exports[`when there is more renders a load more button 1`] = `
 <div
   className="Stream-root"
 >
-  <Logo
-    gutterBottom={true}
-  />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index d45491e01..619f3269d 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -7,11 +7,6 @@ exports[`loads more comments 1`] = `
   <div
     className="Stream-root"
   >
-    <h1
-      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
-    >
-      Talk NEO
-    </h1>
     <form
       autoComplete="off"
       onSubmit={[Function]}
@@ -155,11 +150,6 @@ exports[`renders comment stream 1`] = `
   <div
     className="Stream-root"
   >
-    <h1
-      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
-    >
-      Talk NEO
-    </h1>
     <form
       autoComplete="off"
       onSubmit={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index bbc4635d7..ef93886d2 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -7,11 +7,6 @@ exports[`renders comment stream 1`] = `
   <div
     className="Stream-root"
   >
-    <h1
-      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
-    >
-      Talk NEO
-    </h1>
     <form
       autoComplete="off"
       onSubmit={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index 06de1b9a5..e026b3372 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -7,11 +7,6 @@ exports[`renders comment stream 1`] = `
   <div
     className="Stream-root"
   >
-    <h1
-      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
-    >
-      Talk NEO
-    </h1>
     <form
       autoComplete="off"
       onSubmit={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 528a6bb5b..dac444642 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -7,11 +7,6 @@ exports[`renders comment stream 1`] = `
   <div
     className="Stream-root"
   >
-    <h1
-      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
-    >
-      Talk NEO
-    </h1>
     <form
       autoComplete="off"
       onSubmit={[Function]}
@@ -144,11 +139,6 @@ exports[`show all replies 1`] = `
   <div
     className="Stream-root"
   >
-    <h1
-      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
-    >
-      Talk NEO
-    </h1>
     <form
       autoComplete="off"
       onSubmit={[Function]}

From 66d8244acc1b0a1b0b77513fb5ea1286babd7760 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 3 Aug 2018 23:49:00 +0200
Subject: [PATCH 59/69] Refactor stream + some tests

---
 src/core/client/embed/index.html              |   2 +-
 .../lib/relay/withLocalStateContainer.tsx     |  23 ++-
 src/core/client/stream/components/App.css     |   1 +
 .../client/stream/components/App.spec.tsx     |   8 +-
 src/core/client/stream/components/App.tsx     |  23 +--
 .../__snapshots__/Comment.spec.tsx.snap       |   2 +-
 .../stream/components/PermalinkView.css       |   2 -
 .../stream/components/PermalinkView.tsx       |   1 +
 src/core/client/stream/components/Stream.css  |   1 -
 .../__snapshots__/App.spec.tsx.snap           |  17 +--
 .../stream/containers/AppContainer.spec.tsx   |  16 ---
 .../client/stream/containers/AppContainer.tsx |  33 ++---
 .../containers/CommentContainer.spec.tsx      |   1 +
 .../containers/PermalinkViewContainer.tsx     |  45 +++---
 .../__snapshots__/AppContainer.spec.tsx.snap  |   7 -
 .../CommentContainer.spec.tsx.snap            |   1 +
 src/core/client/stream/index.tsx              |   4 +-
 .../client/stream/queries/AppQuery.spec.tsx   |  46 ------
 src/core/client/stream/queries/AppQuery.tsx   |  86 -----------
 .../queries/PermalinkViewQuery.spec.tsx       |  34 +++++
 .../stream/queries/PermalinkViewQuery.tsx     |  68 +++++++++
 .../stream/queries/StreamQuery.spec.tsx       |  33 +++++
 .../client/stream/queries/StreamQuery.tsx     |  58 ++++++++
 .../__snapshots__/AppQuery.spec.tsx.snap      |  25 ----
 .../PermalinkViewQuery.spec.tsx.snap          |  20 +++
 .../__snapshots__/StreamQuery.spec.tsx.snap   |  19 +++
 .../__snapshots__/permalinkView.spec.tsx.snap | 136 ++++++++++++++++++
 src/core/client/stream/test/fixtures.ts       |   2 +
 src/core/client/stream/test/loadMore.spec.tsx |   4 +-
 .../client/stream/test/permalinkView.spec.tsx |  82 +++++++++++
 .../client/stream/test/renderReplies.spec.tsx |   4 +-
 .../client/stream/test/renderStream.spec.tsx  |   4 +-
 .../stream/test/showAllReplies.spec.tsx       |   4 +-
 33 files changed, 548 insertions(+), 264 deletions(-)
 delete mode 100644 src/core/client/stream/containers/AppContainer.spec.tsx
 delete mode 100644 src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
 delete mode 100644 src/core/client/stream/queries/AppQuery.spec.tsx
 delete mode 100644 src/core/client/stream/queries/AppQuery.tsx
 create mode 100644 src/core/client/stream/queries/PermalinkViewQuery.spec.tsx
 create mode 100644 src/core/client/stream/queries/PermalinkViewQuery.tsx
 create mode 100644 src/core/client/stream/queries/StreamQuery.spec.tsx
 create mode 100644 src/core/client/stream/queries/StreamQuery.tsx
 delete mode 100644 src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
 create mode 100644 src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
 create mode 100644 src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/permalinkView.spec.tsx

diff --git a/src/core/client/embed/index.html b/src/core/client/embed/index.html
index 2eedfea25..297768c75 100644
--- a/src/core/client/embed/index.html
+++ b/src/core/client/embed/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <h1 style="text-align: center" }>Talk 5.0 – Embed Stream</h1>
-  <div id="coralStreamEmbed"></div>
+  <div id="coralStreamEmbed" style="max-width: 600px; margin: 0 auto"></div>
   <script>
     window.TalkEmbed = Talk.render(document.getElementById('coralStreamEmbed'));
   </script>
diff --git a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
index 9eaeb0ce8..421eb7d71 100644
--- a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
+++ b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
@@ -1,8 +1,14 @@
 import * as React from "react";
-import { compose, hoistStatics, InferableComponentEnhancer } from "recompose";
+import {
+  compose,
+  hoistStatics,
+  InferableComponentEnhancer,
+  wrapDisplayName,
+} from "recompose";
 import {
   CSelector,
   CSnapshot,
+  Disposable,
   Environment,
   GraphQLTaggedNode,
 } from "relay-runtime";
@@ -36,6 +42,12 @@ function withLocalStateContainer<T>(
     withContext(({ relayEnvironment }) => ({ relayEnvironment })),
     hoistStatics((BaseComponent: React.ComponentType<any>) => {
       class LocalStateContainer extends React.Component<Props, any> {
+        public static displayName = wrapDisplayName(
+          BaseComponent,
+          "withLocalStateContainer"
+        );
+        private subscription: Disposable;
+
         constructor(props: Props) {
           super(props);
           const fragment = (fragmentSpec as any).data().default;
@@ -53,7 +65,10 @@ function withLocalStateContainer<T>(
             variables: {},
           };
           const snapshot = props.relayEnvironment.lookup(selector);
-          props.relayEnvironment.subscribe(snapshot, this.updateSnapshot);
+          this.subscription = props.relayEnvironment.subscribe(
+            snapshot,
+            this.updateSnapshot
+          );
           this.state = {
             data: snapshot.data,
           };
@@ -63,6 +78,10 @@ function withLocalStateContainer<T>(
           this.setState({ data: snapshot.data });
         };
 
+        public componentWillUnmount() {
+          this.subscription.dispose();
+        }
+
         public render() {
           const { relayEnvironment: _, ...rest } = this.props;
           return <BaseComponent {...rest} local={this.state.data} />;
diff --git a/src/core/client/stream/components/App.css b/src/core/client/stream/components/App.css
index 68c4e29c4..3f61a7cae 100644
--- a/src/core/client/stream/components/App.css
+++ b/src/core/client/stream/components/App.css
@@ -11,4 +11,5 @@
 }
 
 .root {
+  width: 100%;
 }
diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx
index 9b91a8974..d7dfdc3a7 100644
--- a/src/core/client/stream/components/App.spec.tsx
+++ b/src/core/client/stream/components/App.spec.tsx
@@ -5,17 +5,17 @@ import { PropTypesOf } from "talk-framework/types";
 
 import App from "./App";
 
-it("renders correctly", () => {
+it("renders stream", () => {
   const props: PropTypesOf<typeof App> = {
-    asset: {},
+    showPermalinkView: false,
   };
   const wrapper = shallow(<App {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
 
-it("renders correctly when asset is null", () => {
+it("renders permalink view", () => {
   const props: PropTypesOf<typeof App> = {
-    asset: null,
+    showPermalinkView: true,
   };
   const wrapper = shallow(<App {...props} />);
   expect(wrapper).toMatchSnapshot();
diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index 14659585a..39272cb17 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -3,23 +3,26 @@ import { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 
-import StreamContainer from "../containers/StreamContainer";
+import PermalinkViewQuery from "../queries/PermalinkViewQuery";
+import StreamQuery from "../queries/StreamQuery";
 
 import * as styles from "./App.css";
 
 export interface AppProps {
-  asset: {} | null;
+  showPermalinkView: boolean;
 }
 
 const App: StatelessComponent<AppProps> = props => {
-  if (props.asset) {
-    return (
-      <Flex justifyContent="center" className={styles.root}>
-        <StreamContainer asset={props.asset} />
-      </Flex>
-    );
-  }
-  return <div>Asset not found </div>;
+  const view = props.showPermalinkView ? (
+    <PermalinkViewQuery />
+  ) : (
+    <StreamQuery />
+  );
+  return (
+    <Flex justifyContent="center" className={styles.root}>
+      {view}
+    </Flex>
+  );
 };
 
 export default App;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
index b92b29a8e..c86fc9284 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -18,7 +18,7 @@ exports[`renders username and body 1`] = `
   <div
     className="Comment-footer"
   >
-    <withContext(LocalStateContainer)
+    <withContext(withLocalStateContainer(PermalinkContainer))
       commentID="comment-id"
     />
   </div>
diff --git a/src/core/client/stream/components/PermalinkView.css b/src/core/client/stream/components/PermalinkView.css
index 1e9f3ca45..a71a33af8 100644
--- a/src/core/client/stream/components/PermalinkView.css
+++ b/src/core/client/stream/components/PermalinkView.css
@@ -1,7 +1,5 @@
 .root {
   width: 100%;
-  max-width: 400px;
-  margin: calc(0.5 * var(--spacing-unit)) auto;
 }
 
 .button {
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
index 68396ac74..b7ea70370 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -20,6 +20,7 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
     <div className={styles.root}>
       {assetURL && (
         <Button
+          id="talk-comments-permalinkView-showAllComments"
           variant="outlined"
           color="primary"
           onClick={onShowAllComments}
diff --git a/src/core/client/stream/components/Stream.css b/src/core/client/stream/components/Stream.css
index 13c90d031..88de80d08 100644
--- a/src/core/client/stream/components/Stream.css
+++ b/src/core/client/stream/components/Stream.css
@@ -1,4 +1,3 @@
 .root {
   width: 100%;
-  max-width: 400px;
 }
diff --git a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
index 2fc77d00c..ccb926aaf 100644
--- a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
@@ -1,18 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`renders permalink view 1`] = `
 <withPropsOnChange(Flex)
   className="App-root"
   justifyContent="center"
 >
-  <Relay(StreamContainer)
-    asset={Object {}}
-  />
+  <withContext(withLocalStateContainer(PermalinkViewQuery)) />
 </withPropsOnChange(Flex)>
 `;
 
-exports[`renders correctly when asset is null 1`] = `
-<div>
-  Asset not found 
-</div>
+exports[`renders stream 1`] = `
+<withPropsOnChange(Flex)
+  className="App-root"
+  justifyContent="center"
+>
+  <withContext(withLocalStateContainer(StreamQuery)) />
+</withPropsOnChange(Flex)>
 `;
diff --git a/src/core/client/stream/containers/AppContainer.spec.tsx b/src/core/client/stream/containers/AppContainer.spec.tsx
deleted file mode 100644
index 17a0a676d..000000000
--- a/src/core/client/stream/containers/AppContainer.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-
-import { PropTypesOf } from "talk-framework/types";
-
-import { AppContainer } from "./AppContainer";
-
-it("renders correctly", () => {
-  const props: PropTypesOf<typeof AppContainer> = {
-    data: {
-      asset: {},
-    },
-  };
-  const wrapper = shallow(<AppContainer {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index 90eb1e1c6..7fbc7f6d8 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -1,30 +1,27 @@
-import React, { StatelessComponent } from "react";
-import { graphql } from "react-relay";
+import * as React from "react";
+import { StatelessComponent } from "react";
 
-import { withFragmentContainer } from "talk-framework/lib/relay";
-import { PropTypesOf } from "talk-framework/types";
-import { AppContainer as Data } from "talk-stream/__generated__/AppContainer.graphql";
+import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+import { AppContainerLocal as Local } from "talk-stream/__generated__/AppContainerLocal.graphql";
 
 import App from "../components/App";
 
 interface InnerProps {
-  data: Data;
+  local: Local;
 }
 
-export const AppContainer: StatelessComponent<InnerProps> = props => {
-  return <App {...props.data} />;
+const AppContainer: StatelessComponent<InnerProps> = ({
+  local: { commentID },
+}) => {
+  return <App showPermalinkView={!!commentID} />;
 };
 
-const enhanced = withFragmentContainer<{ data: Data }>({
-  data: graphql`
-    fragment AppContainer on Query
-      @argumentDefinitions(assetID: { type: "ID!" }) {
-      asset(id: $assetID) {
-        ...StreamContainer_asset
-      }
+const enhanced = withLocalStateContainer<Local>(
+  graphql`
+    fragment AppContainerLocal on Local {
+      commentID
     }
-  `,
-})(AppContainer);
+  `
+)(AppContainer);
 
-export type AppContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
index 78941766e..44e4a0a19 100644
--- a/src/core/client/stream/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -24,6 +24,7 @@ it("renders username and body", () => {
 it("renders body only", () => {
   const props: PropTypesOf<typeof CommentContainer> = {
     data: {
+      id: "comment-id",
       author: {
         username: null,
       },
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index ac2c824a9..769ecc7ff 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -1,11 +1,8 @@
 import React from "react";
 import { graphql } from "react-relay";
-import {
-  withFragmentContainer,
-  withLocalStateContainer,
-} from "talk-framework/lib/relay";
-import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
-import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { PermalinkViewContainer_asset as AssetData } from "talk-stream/__generated__/PermalinkViewContainer_asset.graphql";
+import { PermalinkViewContainer_comment as CommentData } from "talk-stream/__generated__/PermalinkViewContainer_comment.graphql";
 import {
   SetCommentIDMutation,
   withSetCommentIDMutation,
@@ -13,8 +10,8 @@ import {
 import PermalinkView from "../components/PermalinkView";
 
 interface PermalinkViewContainerProps {
-  data: Data;
-  local: Local;
+  comment: CommentData;
+  asset: AssetData;
   setCommentID: SetCommentIDMutation;
 }
 
@@ -25,11 +22,11 @@ class PermalinkViewContainer extends React.Component<
     this.props.setCommentID({ id: null });
   };
   public render() {
-    const { data, local } = this.props;
+    const { comment, asset } = this.props;
     return (
       <PermalinkView
-        {...data}
-        assetURL={local.assetURL}
+        comment={comment}
+        assetURL={asset.url}
         onShowAllComments={this.showAllComments}
       />
     );
@@ -37,24 +34,18 @@ class PermalinkViewContainer extends React.Component<
 }
 
 const enhanced = withSetCommentIDMutation(
-  withFragmentContainer<{ data: Data }>({
-    data: graphql`
-      fragment PermalinkViewContainerQuery on Query
-        @argumentDefinitions(commentID: { type: "ID!" }) {
-        comment(id: $commentID) {
-          ...CommentContainer
-        }
+  withFragmentContainer<{ comment: CommentData; asset: AssetData }>({
+    comment: graphql`
+      fragment PermalinkViewContainer_comment on Comment {
+        ...CommentContainer
       }
     `,
-  })(
-    withLocalStateContainer<Local>(
-      graphql`
-        fragment PermalinkViewContainerLocal on Local {
-          assetURL
-        }
-      `
-    )(PermalinkViewContainer)
-  )
+    asset: graphql`
+      fragment PermalinkViewContainer_asset on Asset {
+        url
+      }
+    `,
+  })(PermalinkViewContainer)
 );
 
 export default enhanced;
diff --git a/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
deleted file mode 100644
index f9a5c5316..000000000
--- a/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<App
-  asset={Object {}}
-/>
-`;
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
index 1bc892b1e..fdf0b47f0 100644
--- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -9,6 +9,7 @@ exports[`renders body only 1`] = `
   }
   body="Woof"
   createdAt="1995-12-17T03:24:00.000Z"
+  id="comment-id"
 />
 `;
 
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index c6f9059e0..943d920dd 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -9,9 +9,9 @@ import {
   TalkContextProvider,
 } from "talk-framework/lib/bootstrap";
 
+import AppContainer from "./containers/AppContainer";
 import { initLocalState } from "./local";
 import localesData from "./locales";
-import AppQuery from "./queries/AppQuery";
 
 // This is called when the context is first initialized.
 async function init({ relayEnvironment }: TalkContext) {
@@ -29,7 +29,7 @@ async function main() {
 
   const Index: StatelessComponent = () => (
     <TalkContextProvider value={context}>
-      <AppQuery />
+      <AppContainer />
     </TalkContextProvider>
   );
 
diff --git a/src/core/client/stream/queries/AppQuery.spec.tsx b/src/core/client/stream/queries/AppQuery.spec.tsx
deleted file mode 100644
index 0b12d767a..000000000
--- a/src/core/client/stream/queries/AppQuery.spec.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-
-import PermalinkViewContainer from "talk-stream/containers/PermalinkViewContainer";
-import AppContainer from "../containers/AppContainer";
-import { renderWrapper } from "./AppQuery";
-
-it("renders permalink view", () => {
-  const data = {
-    props: {} as any,
-    error: null,
-  };
-  const component = renderWrapper(PermalinkViewContainer);
-  const wrapper = shallow(React.createElement(() => component(data)));
-  expect(wrapper).toMatchSnapshot();
-});
-
-it("renders app", () => {
-  const data = {
-    props: {} as any,
-    error: null,
-  };
-  const component = renderWrapper(AppContainer);
-  const wrapper = shallow(React.createElement(() => component(data)));
-  expect(wrapper).toMatchSnapshot();
-});
-
-it("renders loading", () => {
-  const data = {
-    props: null,
-    error: null,
-  };
-  const component = renderWrapper(AppContainer);
-  const wrapper = shallow(React.createElement(() => component(data)));
-  expect(wrapper).toMatchSnapshot();
-});
-
-it("renders error", () => {
-  const data = {
-    props: null,
-    error: new Error("error"),
-  };
-  const component = renderWrapper(AppContainer);
-  const wrapper = shallow(React.createElement(() => component(data)));
-  expect(wrapper).toMatchSnapshot();
-});
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
deleted file mode 100644
index 48ac6e5c5..000000000
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-import { ReadyState } from "react-relay";
-
-import {
-  graphql,
-  QueryRenderer,
-  withLocalStateContainer,
-} from "talk-framework/lib/relay";
-import {
-  AppQueryResponse,
-  AppQueryVariables,
-} from "talk-stream/__generated__/AppQuery.graphql";
-import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
-
-import PermalinkViewContainer from "talk-stream/containers/PermalinkViewContainer";
-import AppContainer from "../containers/AppContainer";
-
-interface InnerProps {
-  local: Local;
-}
-
-interface WrappedProps {
-  data: any;
-}
-
-// TODO (bc) Break down the needs of each component into another file (maybe).
-// (careful porting QueryRenderer into another stateless component)
-
-export const renderWrapper = (
-  WrappedComponent: React.ComponentType<WrappedProps>
-) => ({ error, props }: ReadyState<AppQueryResponse>) => {
-  if (error) {
-    return <div>{error.message}</div>;
-  }
-  if (props) {
-    return <WrappedComponent data={props} />;
-  }
-  return <div>Loading</div>;
-};
-
-const AppQuery: StatelessComponent<InnerProps> = ({
-  local: { commentID, assetID },
-}) => {
-  if (commentID) {
-    return (
-      <QueryRenderer<AppQueryVariables, AppQueryResponse>
-        query={graphql`
-          query AppQuery_PermalinkViewContainer_Query($commentID: ID!) {
-            ...PermalinkViewContainerQuery @arguments(commentID: $commentID)
-          }
-        `}
-        variables={{
-          commentID,
-        }}
-        render={renderWrapper(PermalinkViewContainer)}
-      />
-    );
-  }
-
-  return (
-    <QueryRenderer<AppQueryVariables, AppQueryResponse>
-      query={graphql`
-        query AppQuery($assetID: ID!) {
-          ...AppContainer @arguments(assetID: $assetID)
-        }
-      `}
-      variables={{
-        assetID,
-      }}
-      render={renderWrapper(AppContainer)}
-    />
-  );
-};
-
-const enhanced = withLocalStateContainer<Local>(
-  graphql`
-    fragment AppQueryLocal on Local {
-      assetID
-      commentID
-      assetURL
-    }
-  `
-)(AppQuery);
-
-export default enhanced;
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.spec.tsx b/src/core/client/stream/queries/PermalinkViewQuery.spec.tsx
new file mode 100644
index 000000000..01b91218a
--- /dev/null
+++ b/src/core/client/stream/queries/PermalinkViewQuery.spec.tsx
@@ -0,0 +1,34 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { render } from "./PermalinkViewQuery";
+
+it("renders permalink view container", () => {
+  const data = {
+    props: {
+      asset: {},
+      comment: {},
+    } as any,
+    error: null,
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders loading", () => {
+  const data = {
+    props: null,
+    error: null,
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders error", () => {
+  const data = {
+    props: null,
+    error: new Error("error"),
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/queries/PermalinkViewQuery.tsx
new file mode 100644
index 000000000..b37cdaaf5
--- /dev/null
+++ b/src/core/client/stream/queries/PermalinkViewQuery.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { ReadyState } from "react-relay";
+
+import {
+  graphql,
+  QueryRenderer,
+  withLocalStateContainer,
+} from "talk-framework/lib/relay";
+import {
+  PermalinkViewQueryResponse,
+  PermalinkViewQueryVariables,
+} from "talk-stream/__generated__/PermalinkViewQuery.graphql";
+import { PermalinkViewQueryLocal as Local } from "talk-stream/__generated__/PermalinkViewQueryLocal.graphql";
+
+import PermalinkViewContainer from "../containers/PermalinkViewContainer";
+
+interface InnerProps {
+  local: Local;
+}
+
+export const render = ({
+  error,
+  props,
+}: ReadyState<PermalinkViewQueryResponse>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+  if (props) {
+    return (
+      <PermalinkViewContainer asset={props.asset} comment={props.comment} />
+    );
+  }
+  return <div>Loading</div>;
+};
+
+const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
+  local: { commentID, assetID },
+}) => (
+  <QueryRenderer<PermalinkViewQueryVariables, PermalinkViewQueryResponse>
+    query={graphql`
+      query PermalinkViewQuery($assetID: ID!, $commentID: ID!) {
+        asset(id: $assetID) {
+          ...PermalinkViewContainer_asset
+        }
+        comment(id: $commentID) {
+          ...PermalinkViewContainer_comment
+        }
+      }
+    `}
+    variables={{
+      assetID,
+      commentID,
+    }}
+    render={render}
+  />
+);
+
+const enhanced = withLocalStateContainer<Local>(
+  graphql`
+    fragment PermalinkViewQueryLocal on Local {
+      assetID
+      commentID
+    }
+  `
+)(PermalinkViewQuery);
+
+export default enhanced;
diff --git a/src/core/client/stream/queries/StreamQuery.spec.tsx b/src/core/client/stream/queries/StreamQuery.spec.tsx
new file mode 100644
index 000000000..91a1a768c
--- /dev/null
+++ b/src/core/client/stream/queries/StreamQuery.spec.tsx
@@ -0,0 +1,33 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { render } from "./StreamQuery";
+
+it("renders stream container", () => {
+  const data = {
+    props: {
+      asset: {},
+    } as any,
+    error: null,
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders loading", () => {
+  const data = {
+    props: null,
+    error: null,
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders error", () => {
+  const data = {
+    props: null,
+    error: new Error("error"),
+  };
+  const wrapper = shallow(React.createElement(() => render(data)));
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
new file mode 100644
index 000000000..40d57387e
--- /dev/null
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { ReadyState } from "react-relay";
+
+import {
+  graphql,
+  QueryRenderer,
+  withLocalStateContainer,
+} from "talk-framework/lib/relay";
+import {
+  StreamQueryResponse,
+  StreamQueryVariables,
+} from "talk-stream/__generated__/StreamQuery.graphql";
+import { StreamQueryLocal as Local } from "talk-stream/__generated__/StreamQueryLocal.graphql";
+
+import StreamContainer from "../containers/StreamContainer";
+
+interface InnerProps {
+  local: Local;
+}
+
+export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+  if (props) {
+    return <StreamContainer asset={props.asset} />;
+  }
+  return <div>Loading</div>;
+};
+
+const StreamQuery: StatelessComponent<InnerProps> = ({
+  local: { assetID },
+}) => (
+  <QueryRenderer<StreamQueryVariables, StreamQueryResponse>
+    query={graphql`
+      query StreamQuery($assetID: ID!) {
+        asset(id: $assetID) {
+          ...StreamContainer_asset
+        }
+      }
+    `}
+    variables={{
+      assetID,
+    }}
+    render={render}
+  />
+);
+
+const enhanced = withLocalStateContainer<Local>(
+  graphql`
+    fragment StreamQueryLocal on Local {
+      assetID
+    }
+  `
+)(StreamQuery);
+
+export default enhanced;
diff --git a/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
deleted file mode 100644
index 87dfae59d..000000000
--- a/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders app 1`] = `
-<Relay(AppContainer)
-  data={Object {}}
-/>
-`;
-
-exports[`renders error 1`] = `
-<div>
-  error
-</div>
-`;
-
-exports[`renders loading 1`] = `
-<div>
-  Loading
-</div>
-`;
-
-exports[`renders permalink view 1`] = `
-<withContext(createMutationContainer(Relay(withContext(LocalStateContainer))))
-  data={Object {}}
-/>
-`;
diff --git a/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
new file mode 100644
index 000000000..85a702a9a
--- /dev/null
+++ b/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders error 1`] = `
+<div>
+  error
+</div>
+`;
+
+exports[`renders loading 1`] = `
+<div>
+  Loading
+</div>
+`;
+
+exports[`renders permalink view container 1`] = `
+<withContext(createMutationContainer(Relay(PermalinkViewContainer)))
+  asset={Object {}}
+  comment={Object {}}
+/>
+`;
diff --git a/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
new file mode 100644
index 000000000..317eb3f4a
--- /dev/null
+++ b/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders error 1`] = `
+<div>
+  error
+</div>
+`;
+
+exports[`renders loading 1`] = `
+<div>
+  Loading
+</div>
+`;
+
+exports[`renders stream container 1`] = `
+<Relay(StreamContainer)
+  asset={Object {}}
+/>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
new file mode 100644
index 000000000..8c5b5b287
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders permalink view 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
+>
+  <div
+    className="PermalinkView-root"
+  >
+    <button
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+    >
+      Show all Comments
+    </button>
+    <div
+      className="Flex-root Flex-alignFlexStart Flex-directionColumn"
+    >
+      <div
+        role="article"
+      >
+        <div
+          className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+        >
+          <span
+            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+          >
+            Markus
+          </span>
+          <time
+            className="Timestamp-root RelativeTime-root"
+            dateTime="2018-07-06T18:24:00.000Z"
+            title="2018-07-06T18:24:00.000Z"
+          >
+            2018-07-06T18:24:00.000Z
+          </time>
+        </div>
+        <p
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        >
+          Joining Too
+        </p>
+        <div
+          className="Comment-footer"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`show all comments 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
index aa14af2e2..8913b67c7 100644
--- a/src/core/client/stream/test/fixtures.ts
+++ b/src/core/client/stream/test/fixtures.ts
@@ -37,6 +37,7 @@ export const comments = [
 export const assets = [
   {
     id: "asset-1",
+    url: "http://localhost/assets/asset-1",
     isClosed: false,
     comments: {
       edges: [
@@ -68,6 +69,7 @@ export const commentWithReplies = {
 
 export const assetWithReplies = {
   id: "asset-with-replies",
+  url: "http://localhost/assets/asset-with-replies",
   isClosed: false,
   comments: {
     edges: [
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx
index 6f63edcfc..b168a66d2 100644
--- a/src/core/client/stream/test/loadMore.spec.tsx
+++ b/src/core/client/stream/test/loadMore.spec.tsx
@@ -5,7 +5,7 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import AppQuery from "talk-stream/queries/AppQuery";
+import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
@@ -77,7 +77,7 @@ const context: TalkContext = {
 
 const testRenderer = TestRenderer.create(
   <TalkContextProvider value={context}>
-    <AppQuery />
+    <AppContainer />
   </TalkContextProvider>
 );
 
diff --git a/src/core/client/stream/test/permalinkView.spec.tsx b/src/core/client/stream/test/permalinkView.spec.tsx
new file mode 100644
index 000000000..c056ef4aa
--- /dev/null
+++ b/src/core/client/stream/test/permalinkView.spec.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppContainer from "talk-stream/containers/AppContainer";
+
+import createEnvironment from "./createEnvironment";
+import { assets, comments } from "./fixtures";
+
+const commentStub = {
+  ...comments[0],
+};
+
+const assetStub = {
+  ...assets[0],
+  comments: {
+    pageInfo: {
+      hasNextPage: false,
+    },
+    edges: [
+      {
+        node: commentStub,
+        cursor: commentStub.createdAt,
+      },
+    ],
+  },
+};
+
+const resolvers = {
+  Query: {
+    comment: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: commentStub.id })
+      .returns(commentStub),
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assetStub.id })
+      .returns(assetStub),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assetStub.id, "assetID");
+    localRecord.setValue(commentStub.id, "commentID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+it("renders permalink view", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("show all comments", async () => {
+  testRenderer.root
+    .findByProps({
+      id: "talk-comments-permalinkView-showAllComments",
+    })
+    .props.onClick();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx
index 9c535520f..468317624 100644
--- a/src/core/client/stream/test/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/renderReplies.spec.tsx
@@ -5,7 +5,7 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import AppQuery from "talk-stream/queries/AppQuery";
+import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
 import { assetWithReplies } from "./fixtures";
@@ -36,7 +36,7 @@ const context: TalkContext = {
 
 const testRenderer = TestRenderer.create(
   <TalkContextProvider value={context}>
-    <AppQuery />
+    <AppContainer />
   </TalkContextProvider>
 );
 
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx
index 998058cce..361f6e2c2 100644
--- a/src/core/client/stream/test/renderStream.spec.tsx
+++ b/src/core/client/stream/test/renderStream.spec.tsx
@@ -5,7 +5,7 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import AppQuery from "talk-stream/queries/AppQuery";
+import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
 import { assets } from "./fixtures";
@@ -36,7 +36,7 @@ const context: TalkContext = {
 
 const testRenderer = TestRenderer.create(
   <TalkContextProvider value={context}>
-    <AppQuery />
+    <AppContainer />
   </TalkContextProvider>
 );
 
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx
index 3e929b5b0..7bf111990 100644
--- a/src/core/client/stream/test/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/showAllReplies.spec.tsx
@@ -5,7 +5,7 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import AppQuery from "talk-stream/queries/AppQuery";
+import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
@@ -93,7 +93,7 @@ const context: TalkContext = {
 
 const testRenderer = TestRenderer.create(
   <TalkContextProvider value={context}>
-    <AppQuery />
+    <AppContainer />
   </TalkContextProvider>
 );
 

From 0a5e6f725058cb7b13f6e1c116c3770f0afd3388 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 4 Aug 2018 00:16:00 +0200
Subject: [PATCH 60/69] Styling improvements and responsibility

---
 .../stream/components/PermalinkButton/PermalinkButton.css    | 5 +++++
 .../stream/components/PermalinkButton/PermalinkButton.tsx    | 2 ++
 .../stream/components/PermalinkButton/PermalinkPopover.css   | 2 +-
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 src/core/client/stream/components/PermalinkButton/PermalinkButton.css

diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.css b/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
new file mode 100644
index 000000000..b79c5939d
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
@@ -0,0 +1,5 @@
+.popover {
+  width: 350px;
+  max-width: 80%;
+  margin-bottom: calc(0.5 * var(--spacing-unit));
+}
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
index 339e1780a..b7f722b11 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { oncePerFrame } from "talk-common/utils";
 import { Button, ButtonIcon, ClickOutside, Popover } from "talk-ui/components";
 
+import * as styles from "./PermalinkButton.css";
 import PermalinkPopover from "./PermalinkPopover";
 
 interface PermalinkProps {
@@ -27,6 +28,7 @@ class Permalink extends React.Component<PermalinkProps> {
         id={popoverID}
         placement="top-start"
         description="A dialog showing a permalink to the comment"
+        className={styles.popover}
         body={({ toggleVisibility }) => (
           <ClickOutside
             onClickOutside={() =>
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
index e6cb4ee63..c2afa31b2 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
@@ -1,5 +1,5 @@
 .root {
-  width: 300px;
+  width: 100%;
 }
 
 .textField {

From be1e5a2f7fde110a644318e7310baca97829fbea Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 4 Aug 2018 00:32:26 +0200
Subject: [PATCH 61/69] Add margin, move elevation to theme, use colors from
 theme

---
 .../PermalinkButton/PermalinkButton.css       |  1 -
 .../client/ui/components/Popover/Popover.css  | 28 +++++++++++--------
 .../client/ui/components/Popover/Popover.tsx  | 14 +++++++---
 src/core/client/ui/theme/variables.ts         |  3 ++
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.css b/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
index b79c5939d..b303f61b6 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
@@ -1,5 +1,4 @@
 .popover {
   width: 350px;
   max-width: 80%;
-  margin-bottom: calc(0.5 * var(--spacing-unit));
 }
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
index a47f820a4..559b6efbc 100644
--- a/src/core/client/ui/components/Popover/Popover.css
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -1,15 +1,21 @@
 .root {
-  background: #ffffff;
-  border: 1px solid #c9cacb;
+  background: var(--palette-common-white);
+  border: 1px solid var(--palette-grey-light);
   box-sizing: border-box;
-  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 1px;
-  color: #222;
-  display: flex;
+  box-shadow: var(--elevation-main);
+  border-radius: var(--round-corners);
   padding: calc(0.5 * var(--spacing-unit));
-
-  &:after,
-  &::before {
-    border-top-color: transparent;
-  }
+}
+
+.top {
+  margin-bottom: calc(0.5 * var(--spacing-unit));
+}
+.left {
+  margin-right: calc(0.5 * var(--spacing-unit));
+}
+.right {
+  margin-left: calc(0.5 * var(--spacing-unit));
+}
+.bottom {
+  margin-top: calc(0.5 * var(--spacing-unit));
 }
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 3123422ee..7708b86aa 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -11,9 +11,6 @@ import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
 
 type Placement =
-  | "auto-start"
-  | "auto"
-  | "auto-end"
   | "top-start"
   | "top"
   | "top-end"
@@ -53,6 +50,9 @@ interface State {
 }
 
 class Popover extends React.Component<PopoverProps> {
+  public static defaultProps = {
+    placement: "top",
+  };
   public state: State = {
     visible: false,
   };
@@ -95,6 +95,12 @@ class Popover extends React.Component<PopoverProps> {
     } = this.props;
 
     const { visible } = this.state;
+    const popoverClassName = cn(styles.root, className, {
+      [styles.top]: placement!.startsWith("top"),
+      [styles.left]: placement!.startsWith("left"),
+      [styles.right]: placement!.startsWith("right"),
+      [styles.bottom]: placement!.startsWith("bottom"),
+    });
 
     return (
       <Manager>
@@ -119,7 +125,7 @@ class Popover extends React.Component<PopoverProps> {
               {visible && (
                 <div
                   style={props.style}
-                  className={cn(styles.root, className)}
+                  className={popoverClassName}
                   ref={props.ref}
                 >
                   {typeof body === "function"
diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts
index 415a5c32f..a5ae14893 100644
--- a/src/core/client/ui/theme/variables.ts
+++ b/src/core/client/ui/theme/variables.ts
@@ -4,6 +4,9 @@
  */
 
 const variables = {
+  elevation: {
+    main: "1px 0px 4px rgba(0, 0, 0, 0.25)",
+  },
   palette: {
     /* Primary colors */
     primary: {

From c7a96cc0f1a58656a61316902a093beebe644326 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 4 Aug 2018 08:40:01 +0200
Subject: [PATCH 62/69] More style

---
 .../stream/components/PermalinkButton/PermalinkButton.tsx   | 4 ++--
 src/core/client/ui/components/Popover/Popover.css           | 2 +-
 src/core/client/ui/components/TextField/TextField.css       | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
index b7f722b11..e8669dad9 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
@@ -12,8 +12,8 @@ interface PermalinkProps {
 }
 
 class Permalink extends React.Component<PermalinkProps> {
-  // Helpers that prevents calling toggleVisibility more then once per frame.
-  // In essence this means we'll only process an event only once.
+  // Helper that prevents calling toggleVisibility more then once per frame.
+  // In essence this means we'll process an event only once.
   // This might happen, when clicking on the button which will
   // cause its onClick to happen as well as onClickOutside.
   private toggleVisibilityOncePerFrame = oncePerFrame(
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
index 559b6efbc..843b98c9f 100644
--- a/src/core/client/ui/components/Popover/Popover.css
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -1,6 +1,6 @@
 .root {
   background: var(--palette-common-white);
-  border: 1px solid var(--palette-grey-light);
+  border: 1px solid var(--palette-grey-lighter);
   box-sizing: border-box;
   box-shadow: var(--elevation-main);
   border-radius: var(--round-corners);
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 8fbf2c7db..7cbfed982 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -1,8 +1,8 @@
 .root {
   composes: textField from "talk-ui/shared/typography.css";
-  background: #ffffff;
-  border: 1px solid #979797;
+  background: var(--palette-common-white);
+  border: 1px solid var(--palette-grey-lighter);
   box-sizing: border-box;
-  border-radius: 1px;
+  border-radius: var(--round-corners);
   padding: calc(0.5 * var(--spacing-unit));
 }

From 41f92b2144fb004ede917e98824a0ae391f1b375 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 4 Aug 2018 08:54:16 +0200
Subject: [PATCH 63/69] Don't show icon on xs screens

---
 .../components/PermalinkButton/PermalinkButton.tsx   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
index e8669dad9..493625e2b 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
@@ -1,7 +1,13 @@
 import { Localized } from "fluent-react/compat";
 import React from "react";
 import { oncePerFrame } from "talk-common/utils";
-import { Button, ButtonIcon, ClickOutside, Popover } from "talk-ui/components";
+import {
+  Button,
+  ButtonIcon,
+  ClickOutside,
+  MatchMedia,
+  Popover,
+} from "talk-ui/components";
 
 import * as styles from "./PermalinkButton.css";
 import PermalinkPopover from "./PermalinkPopover";
@@ -51,7 +57,9 @@ class Permalink extends React.Component<PermalinkProps> {
             active={visible}
             size="small"
           >
-            <ButtonIcon>share</ButtonIcon>
+            <MatchMedia minWidth="xs">
+              <ButtonIcon>share</ButtonIcon>
+            </MatchMedia>
             <Localized id="comments-permalink-share">
               <span>Share</span>
             </Localized>

From 9ddc02fff52adf45e3bb6a3050fa2079ccaa9d6f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 6 Aug 2018 07:36:08 +0200
Subject: [PATCH 64/69] Tweak mdx files

---
 .../ui/components/ClickOutside/ClickOutside.mdx |  7 +++++--
 .../client/ui/components/Popover/Popover.mdx    | 17 +++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.mdx b/src/core/client/ui/components/ClickOutside/ClickOutside.mdx
index 0d8126b5d..04bd19da7 100644
--- a/src/core/client/ui/components/ClickOutside/ClickOutside.mdx
+++ b/src/core/client/ui/components/ClickOutside/ClickOutside.mdx
@@ -19,8 +19,11 @@ clicks outside the component.
 Click the blue background. It should trigger an alert. Nothing should happen if you click the button.
 
 <Playground>
-  <div style={{background: 'blue', padding: '10px'}}>
-    <ClickOutside onClickOutside={() => alert('You clicked outside!')}>
+  <div id="outside" style={{background: 'blue', padding: '10px'}}>
+    <ClickOutside onClickOutside={e => {
+      if (e.srcElement.id === "outside") {
+        alert('You clicked outside!');
+      }}}>
       <Button variant="filled">Push Me</Button>
     </ClickOutside>
   </div>
diff --git a/src/core/client/ui/components/Popover/Popover.mdx b/src/core/client/ui/components/Popover/Popover.mdx
index e051df50d..a7a67a04b 100644
--- a/src/core/client/ui/components/Popover/Popover.mdx
+++ b/src/core/client/ui/components/Popover/Popover.mdx
@@ -3,20 +3,21 @@ name: Popover
 menu: UI Kit
 ---
 
-import { Playground, PropsTable } from 'docz'
+import { Playground } from 'docz'
 import Popover from './Popover'
 import Button from '../Button'
+import Flex from '../Flex'
 import Typography from '../Typography'
 import ButtonIcon from '../Button/ButtonIcon'
 
 # Popover
 
-`Popover` uses `react-popper` that has `Popper.js` behind.
+`Popover` renders a popover dialog attached to another `Element`.
 
 ## Basic usage
 <Playground>
   <Popover
-    body={<div><Typography>This is the body</Typography></div>}
+    body={<Typography>This is the body</Typography>}
   >
     {({ toggleVisibility, forwardRef }) => (
       <Button onClick={toggleVisibility} forwardRef={forwardRef} variant="filled" color="primary">
@@ -30,13 +31,13 @@ import ButtonIcon from '../Button/ButtonIcon'
 <Playground>
   <Popover
     placement="top"
-    body={({ toggleVisibility, forwardRef }) => (
-      <div>
-        <Button onClick={toggleVisibility} variant="filled" size="small">
+    body={({ toggleVisibility }) => (
+      <Flex itemGutter="half">
+        <Typography>This is the body</Typography>
+        <Button onClick={toggleVisibility} size="small">
           <ButtonIcon>close</ButtonIcon>
         </Button>
-        <Typography>This is the body</Typography>
-      </div>
+      </Flex>
     )}
   >
     {({ toggleVisibility, forwardRef }) => (

From 77eb53808216597530b4c59f3057c9da127504bd Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 6 Aug 2018 20:13:50 +0200
Subject: [PATCH 65/69] Add more integration tests

---
 .../containers/PermalinkViewContainer.tsx     |  11 +-
 .../permalinkViewAssetNotFound.spec.tsx.snap  |  17 +++
 ...permalinkViewCommentNotFound.spec.tsx.snap | 109 ++++++++++++++++++
 .../test/permalinkViewAssetNotFound.spec.tsx  |  43 +++++++
 .../permalinkViewCommentNotFound.spec.tsx     |  78 +++++++++++++
 5 files changed, 254 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
 create mode 100644 src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx

diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index 769ecc7ff..65fede9d8 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -10,8 +10,8 @@ import {
 import PermalinkView from "../components/PermalinkView";
 
 interface PermalinkViewContainerProps {
-  comment: CommentData;
-  asset: AssetData;
+  comment: CommentData | null;
+  asset: AssetData | null;
   setCommentID: SetCommentIDMutation;
 }
 
@@ -26,7 +26,7 @@ class PermalinkViewContainer extends React.Component<
     return (
       <PermalinkView
         comment={comment}
-        assetURL={asset.url}
+        assetURL={(asset && asset.url) || null}
         onShowAllComments={this.showAllComments}
       />
     );
@@ -34,7 +34,10 @@ class PermalinkViewContainer extends React.Component<
 }
 
 const enhanced = withSetCommentIDMutation(
-  withFragmentContainer<{ comment: CommentData; asset: AssetData }>({
+  withFragmentContainer<{
+    comment: CommentData | null;
+    asset: AssetData | null;
+  }>({
     comment: graphql`
       fragment PermalinkViewContainer_comment on Comment {
         ...CommentContainer
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
new file mode 100644
index 000000000..270fae18d
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders permalink view with unknown asset 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
+>
+  <div
+    className="PermalinkView-root"
+  >
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
new file mode 100644
index 000000000..6e094cf1e
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders permalink view with unknown comment 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
+>
+  <div
+    className="PermalinkView-root"
+  >
+    <button
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+    >
+      Show all Comments
+    </button>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
+  </div>
+</div>
+`;
+
+exports[`show all comments 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
new file mode 100644
index 000000000..17be1416e
--- /dev/null
+++ b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppContainer from "talk-stream/containers/AppContainer";
+
+import createEnvironment from "./createEnvironment";
+
+const resolvers = {
+  Query: {
+    comment: () => null,
+    asset: () => null,
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue("unknown-asset-id", "assetID");
+    localRecord.setValue("unknown-comment-id", "commentID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+it("renders permalink view with unknown asset", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
new file mode 100644
index 000000000..3f905ce4b
--- /dev/null
+++ b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppContainer from "talk-stream/containers/AppContainer";
+
+import createEnvironment from "./createEnvironment";
+import { assets, comments } from "./fixtures";
+
+const commentStub = {
+  ...comments[0],
+};
+
+const assetStub = {
+  ...assets[0],
+  comments: {
+    pageInfo: {
+      hasNextPage: false,
+    },
+    edges: [
+      {
+        node: commentStub,
+        cursor: commentStub.createdAt,
+      },
+    ],
+  },
+};
+
+const resolvers = {
+  Query: {
+    comment: () => null,
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assetStub.id })
+      .returns(assetStub),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assetStub.id, "assetID");
+    localRecord.setValue("unknown-comment-id", "commentID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+it("renders permalink view with unknown comment", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("show all comments", async () => {
+  testRenderer.root
+    .findByProps({
+      id: "talk-comments-permalinkView-showAllComments",
+    })
+    .props.onClick();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});

From 1879edbf585e84b21d747978612e392947c5838b Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 6 Aug 2018 20:20:51 +0200
Subject: [PATCH 66/69] Add margin on both sides

---
 package-lock.json                                 | 8 ++++++++
 src/core/client/ui/components/Popover/Popover.css | 8 ++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3e1c9fd7c..a94dc5ac5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19689,6 +19689,14 @@
         "ramda": "^0.25.0",
         "source-map-loader": "^0.2.3",
         "typescript": "^2.7.2"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "2.9.2",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+          "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
+          "dev": true
+        }
       }
     },
     "read-cache": {
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
index 843b98c9f..82879b01b 100644
--- a/src/core/client/ui/components/Popover/Popover.css
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -8,14 +8,14 @@
 }
 
 .top {
-  margin-bottom: calc(0.5 * var(--spacing-unit));
+  margin: calc(0.5 * var(--spacing-unit)) 0;
 }
 .left {
-  margin-right: calc(0.5 * var(--spacing-unit));
+  margin: 0 calc(0.5 * var(--spacing-unit));
 }
 .right {
-  margin-left: calc(0.5 * var(--spacing-unit));
+  margin: 0 calc(0.5 * var(--spacing-unit));
 }
 .bottom {
-  margin-top: calc(0.5 * var(--spacing-unit));
+  margin: calc(0.5 * var(--spacing-unit)) 0;
 }

From 95716da1335d077591bdd61807a6ef608f367ac2 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 6 Aug 2018 20:58:24 +0200
Subject: [PATCH 67/69] Remove unused dependency

---
 package-lock.json | 9 ---------
 package.json      | 1 -
 2 files changed, 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a94dc5ac5..100de84ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1996,15 +1996,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-tooltip": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/@types/react-tooltip/-/react-tooltip-3.3.5.tgz",
-      "integrity": "sha512-wpWzjtMWBPymIoYjqZTeWX1v5dJe4V1akmcTM6iZwSS/cL8jdi6dFt4BoLXDOxgL5tEe/9yVBlQD+MAYvexBfw==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/recompose": {
       "version": "0.26.1",
       "resolved": "https://registry.npmjs.org/@types/recompose/-/recompose-0.26.1.tgz",
diff --git a/package.json b/package.json
index 07f82470f..d02d7d0ef 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,6 @@
     "@types/react-relay": "github:coralproject/patched#types/react-relay",
     "@types/react-responsive": "^3.0.1",
     "@types/react-test-renderer": "^16.0.1",
-    "@types/react-tooltip": "^3.3.5",
     "@types/recompose": "^0.26.1",
     "@types/relay-runtime": "github:coralproject/patched#types/relay-runtime",
     "@types/sane": "^2.0.0",

From 3166478ec32d91ffdcb6139be1a1f924d65820b8 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 6 Aug 2018 22:21:44 +0200
Subject: [PATCH 68/69] Add and refactor tests

---
 .../testHelpers/createRelayEnvironment.ts     | 78 +++++++++++++++++++
 .../client/framework/testHelpers/index.ts     |  4 +
 .../mutations/SetCommentIDMutation.spec.ts    | 54 +++++++++++++
 .../stream/mutations/SetCommentIDMutation.ts  |  2 +-
 .../SetNetworkStatusMutation.spec.ts          | 26 +++++++
 .../mutations/SetNetworkStatusMutation.ts     |  5 +-
 .../client/stream/test/createEnvironment.ts   | 49 ------------
 src/core/client/stream/test/loadMore.spec.tsx | 13 ++--
 .../client/stream/test/permalinkView.spec.tsx | 13 ++--
 .../test/permalinkViewAssetNotFound.spec.tsx  | 14 ++--
 .../permalinkViewCommentNotFound.spec.tsx     | 13 ++--
 .../client/stream/test/renderReplies.spec.tsx | 13 ++--
 .../client/stream/test/renderStream.spec.tsx  | 13 ++--
 .../stream/test/showAllReplies.spec.tsx       | 13 ++--
 14 files changed, 223 insertions(+), 87 deletions(-)
 create mode 100644 src/core/client/framework/testHelpers/createRelayEnvironment.ts
 create mode 100644 src/core/client/framework/testHelpers/index.ts
 create mode 100644 src/core/client/stream/mutations/SetCommentIDMutation.spec.ts
 create mode 100644 src/core/client/stream/mutations/SetNetworkStatusMutation.spec.ts
 delete mode 100644 src/core/client/stream/test/createEnvironment.ts

diff --git a/src/core/client/framework/testHelpers/createRelayEnvironment.ts b/src/core/client/framework/testHelpers/createRelayEnvironment.ts
new file mode 100644
index 000000000..717c037ad
--- /dev/null
+++ b/src/core/client/framework/testHelpers/createRelayEnvironment.ts
@@ -0,0 +1,78 @@
+import { IResolvers } from "graphql-tools";
+import { createFetch } from "relay-local-schema";
+import {
+  commitLocalUpdate,
+  Environment,
+  Network,
+  RecordProxy,
+  RecordSource,
+  RecordSourceProxy,
+  Store,
+} from "relay-runtime";
+
+import {
+  createAndRetain,
+  LOCAL_ID,
+  LOCAL_TYPE,
+  wrapFetchWithLogger,
+} from "talk-framework/lib/relay";
+
+import { loadSchema } from "talk-common/graphql";
+
+export interface CreateRelayEnvironmentNetworkParams {
+  /** project name of graphql-config */
+  projectName: string;
+  /** graphql resolvers */
+  resolvers: IResolvers<any, any>;
+  /** If enabled, graphql responses will be logged to the console */
+  logNetwork?: boolean;
+}
+
+export interface CreateRelayEnvironmentParams {
+  /** If set, creates a network to a local graphql server with a local schema */
+  network?: CreateRelayEnvironmentNetworkParams;
+  /** Allows to set initial state for Local state */
+  initLocalState?: (
+    local: RecordProxy,
+    source: RecordSourceProxy,
+    environment: Environment
+  ) => void;
+  /** Use this source for creating the environment */
+  source?: RecordSource;
+}
+
+/**
+ * create Relay environment for tests environments.
+ */
+export default function createRelayEnvironment(
+  params: CreateRelayEnvironmentParams = {}
+) {
+  let network: Network = null as any;
+  if (params.network) {
+    const schema = loadSchema(
+      params.network.projectName,
+      params.network.resolvers
+    );
+    network = Network.create(
+      wrapFetchWithLogger(createFetch({ schema }), params.network.logNetwork)
+    );
+  }
+  const environment = new Environment({
+    network,
+    store: new Store(params.source || new RecordSource()),
+  });
+  commitLocalUpdate(environment, sourceProxy => {
+    const root = sourceProxy.getRoot();
+    const localRecord = createAndRetain(
+      environment,
+      sourceProxy,
+      LOCAL_ID,
+      LOCAL_TYPE
+    );
+    root.setLinkedRecord(localRecord, "local");
+    if (params.initLocalState) {
+      params.initLocalState!(localRecord, sourceProxy, environment);
+    }
+  });
+  return environment;
+}
diff --git a/src/core/client/framework/testHelpers/index.ts b/src/core/client/framework/testHelpers/index.ts
new file mode 100644
index 000000000..9cbc97018
--- /dev/null
+++ b/src/core/client/framework/testHelpers/index.ts
@@ -0,0 +1,4 @@
+export {
+  default as createRelayEnvironment,
+  CreateRelayEnvironmentParams,
+} from "./createRelayEnvironment";
diff --git a/src/core/client/stream/mutations/SetCommentIDMutation.spec.ts b/src/core/client/stream/mutations/SetCommentIDMutation.spec.ts
new file mode 100644
index 000000000..8f296c79d
--- /dev/null
+++ b/src/core/client/stream/mutations/SetCommentIDMutation.spec.ts
@@ -0,0 +1,54 @@
+import { Environment, RecordSource } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { LOCAL_ID } from "talk-framework/lib/relay";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import { commit } from "./SetCommentIDMutation";
+
+let environment: Environment;
+const source: RecordSource = new RecordSource();
+
+beforeAll(() => {
+  environment = createRelayEnvironment({
+    source,
+  });
+});
+
+it("Sets comment id", () => {
+  const id = "comment1-id";
+  commit(environment, { id }, {} as any);
+  expect(source.get(LOCAL_ID)!.commentID).toEqual(id);
+});
+
+it("Should call setCommentID in pym", async () => {
+  const id = "comment2-id";
+  const context = {
+    pym: {
+      sendMessage: sinon
+        .mock()
+        .once()
+        .withArgs("setCommentID", id),
+    },
+  };
+  commit(environment, { id }, context as any);
+  await timeout();
+  expect(source.get(LOCAL_ID)!.commentID).toEqual(id);
+  context.pym.sendMessage.verify();
+});
+
+it("Should call setCommentID in pym with empty id", async () => {
+  const context = {
+    pym: {
+      sendMessage: sinon
+        .mock()
+        .once()
+        .withArgs("setCommentID", ""),
+    },
+  };
+  commit(environment, { id: null }, context as any);
+  await timeout();
+  expect(source.get(LOCAL_ID)!.commentID).toEqual(null);
+  context.pym.sendMessage.verify();
+});
diff --git a/src/core/client/stream/mutations/SetCommentIDMutation.ts b/src/core/client/stream/mutations/SetCommentIDMutation.ts
index ce4eb9eb1..4bacb1181 100644
--- a/src/core/client/stream/mutations/SetCommentIDMutation.ts
+++ b/src/core/client/stream/mutations/SetCommentIDMutation.ts
@@ -10,7 +10,7 @@ export interface SetCommentIDInput {
 
 export type SetCommentIDMutation = (input: SetCommentIDInput) => Promise<void>;
 
-async function commit(
+export async function commit(
   environment: Environment,
   input: SetCommentIDInput,
   { pym }: TalkContext
diff --git a/src/core/client/stream/mutations/SetNetworkStatusMutation.spec.ts b/src/core/client/stream/mutations/SetNetworkStatusMutation.spec.ts
new file mode 100644
index 000000000..1a6196c45
--- /dev/null
+++ b/src/core/client/stream/mutations/SetNetworkStatusMutation.spec.ts
@@ -0,0 +1,26 @@
+import { Environment, RecordSource } from "relay-runtime";
+
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import { NETWORK_ID, NETWORK_TYPE } from "../local";
+
+import { commit } from "./SetNetworkStatusMutation";
+
+let environment: Environment;
+const source: RecordSource = new RecordSource();
+
+beforeAll(() => {
+  environment = createRelayEnvironment({
+    source,
+    initLocalState: (localRecord, sourceProxy) => {
+      const networkRecord = sourceProxy.create(NETWORK_ID, NETWORK_TYPE);
+      networkRecord.setValue(false, "isOffline");
+      localRecord.setLinkedRecord(networkRecord, "network");
+    },
+  });
+});
+
+it("Sets comment id", () => {
+  commit(environment, { isOffline: true });
+  expect(source.get(NETWORK_ID)!.isOffline).toEqual(true);
+});
diff --git a/src/core/client/stream/mutations/SetNetworkStatusMutation.ts b/src/core/client/stream/mutations/SetNetworkStatusMutation.ts
index 87d15e83f..5f2fa6486 100644
--- a/src/core/client/stream/mutations/SetNetworkStatusMutation.ts
+++ b/src/core/client/stream/mutations/SetNetworkStatusMutation.ts
@@ -12,7 +12,10 @@ export type SetNetworkStatusMutation = (
   input: SetNetworkStatusInput
 ) => Promise<void>;
 
-async function commit(environment: Environment, input: SetNetworkStatusInput) {
+export async function commit(
+  environment: Environment,
+  input: SetNetworkStatusInput
+) {
   return commitLocalUpdate(environment, store => {
     const record = store.get(NETWORK_ID)!;
     record.setValue(input.isOffline, "isOffline");
diff --git a/src/core/client/stream/test/createEnvironment.ts b/src/core/client/stream/test/createEnvironment.ts
deleted file mode 100644
index 0276c0b4e..000000000
--- a/src/core/client/stream/test/createEnvironment.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { IResolvers } from "graphql-tools";
-import { createFetch } from "relay-local-schema";
-import {
-  commitLocalUpdate,
-  Environment,
-  Network,
-  RecordProxy,
-  RecordSource,
-  Store,
-} from "relay-runtime";
-
-import { loadSchema } from "talk-common/graphql";
-import {
-  createAndRetain,
-  LOCAL_ID,
-  LOCAL_TYPE,
-  wrapFetchWithLogger,
-} from "talk-framework/lib/relay";
-
-export interface CreateEnvironmentParams {
-  /** graphql resolvers */
-  resolvers: IResolvers<any, any>;
-  /** Allows to set initial state for Local state */
-  initLocalState?: (local: RecordProxy) => void;
-  /** If enabled, graphql responses will be logged to the console */
-  logNetwork?: boolean;
-}
-
-/**
- * create Relay environment for integration tests.
- */
-export default function createEnvironment(params: CreateEnvironmentParams) {
-  const schema = loadSchema("tenant", params.resolvers);
-  const environment = new Environment({
-    network: Network.create(
-      wrapFetchWithLogger(createFetch({ schema }), params.logNetwork)
-    ),
-    store: new Store(new RecordSource()),
-  });
-  if (params.initLocalState) {
-    commitLocalUpdate(environment, s => {
-      const root = s.getRoot();
-      const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
-      root.setLinkedRecord(localRecord, "local");
-      params.initLocalState!(localRecord);
-    });
-  }
-  return environment;
-}
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx
index b168a66d2..0f2c1642d 100644
--- a/src/core/client/stream/test/loadMore.spec.tsx
+++ b/src/core/client/stream/test/loadMore.spec.tsx
@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
 
 const connectionStub = sinon.stub().throws();
@@ -61,10 +61,13 @@ const resolvers = {
   },
 };
 
-const environment = createEnvironment({
-  // Set this to true, to see graphql responses.
-  logNetwork: false,
-  resolvers,
+const environment = createRelayEnvironment({
+  network: {
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    projectName: "tenant",
+  },
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
   },
diff --git a/src/core/client/stream/test/permalinkView.spec.tsx b/src/core/client/stream/test/permalinkView.spec.tsx
index c056ef4aa..09b0c05fe 100644
--- a/src/core/client/stream/test/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/permalinkView.spec.tsx
@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
 
 const commentStub = {
@@ -44,10 +44,13 @@ const resolvers = {
   },
 };
 
-const environment = createEnvironment({
-  // Set this to true, to see graphql responses.
-  logNetwork: false,
-  resolvers,
+const environment = createRelayEnvironment({
+  network: {
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    projectName: "tenant",
+  },
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue(commentStub.id, "commentID");
diff --git a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
index 17be1416e..4ee8ebb5c 100644
--- a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
@@ -4,10 +4,9 @@ import { RecordProxy } from "relay-runtime";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
-
 const resolvers = {
   Query: {
     comment: () => null,
@@ -15,10 +14,13 @@ const resolvers = {
   },
 };
 
-const environment = createEnvironment({
-  // Set this to true, to see graphql responses.
-  logNetwork: false,
-  resolvers,
+const environment = createRelayEnvironment({
+  network: {
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    projectName: "tenant",
+  },
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue("unknown-asset-id", "assetID");
     localRecord.setValue("unknown-comment-id", "commentID");
diff --git a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
index 3f905ce4b..473e6d510 100644
--- a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
 
 const commentStub = {
@@ -40,10 +40,13 @@ const resolvers = {
   },
 };
 
-const environment = createEnvironment({
-  // Set this to true, to see graphql responses.
-  logNetwork: false,
-  resolvers,
+const environment = createRelayEnvironment({
+  network: {
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    projectName: "tenant",
+  },
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue("unknown-comment-id", "commentID");
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx
index 468317624..221dc19c0 100644
--- a/src/core/client/stream/test/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/renderReplies.spec.tsx
@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
 import { assetWithReplies } from "./fixtures";
 
 const resolvers = {
@@ -20,10 +20,13 @@ const resolvers = {
   },
 };
 
-const environment = createEnvironment({
-  // Set this to true, to see graphql responses.
-  logNetwork: false,
-  resolvers,
+const environment = createRelayEnvironment({
+  network: {
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    projectName: "tenant",
+  },
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetWithReplies.id, "assetID");
   },
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx
index 361f6e2c2..3c31c1080 100644
--- a/src/core/client/stream/test/renderStream.spec.tsx
+++ b/src/core/client/stream/test/renderStream.spec.tsx
@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
 import { assets } from "./fixtures";
 
 const resolvers = {
@@ -20,10 +20,13 @@ const resolvers = {
   },
 };
 
-const environment = createEnvironment({
-  // Set this to true, to see graphql responses.
-  logNetwork: false,
-  resolvers,
+const environment = createRelayEnvironment({
+  network: {
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    projectName: "tenant",
+  },
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assets[0].id, "assetID");
   },
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx
index 7bf111990..71f857331 100644
--- a/src/core/client/stream/test/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/showAllReplies.spec.tsx
@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
 
 const connectionStub = sinon.stub().throws();
@@ -77,10 +77,13 @@ const resolvers = {
   },
 };
 
-const environment = createEnvironment({
-  // Set this to true, to see graphql responses.
-  logNetwork: false,
-  resolvers,
+const environment = createRelayEnvironment({
+  network: {
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    projectName: "tenant",
+  },
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
   },

From 8a97ed162cb5227c8a3303e60d115ea8ae5d72e3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 6 Aug 2018 22:35:14 +0200
Subject: [PATCH 69/69] Fix types

---
 src/core/client/stream/mutations/index.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/core/client/stream/mutations/index.ts b/src/core/client/stream/mutations/index.ts
index bbe1b2b00..1b71335e7 100644
--- a/src/core/client/stream/mutations/index.ts
+++ b/src/core/client/stream/mutations/index.ts
@@ -1,3 +1,15 @@
-export * from "./CreateCommentMutation";
-export * from "./SetNetworkStatusMutation";
-export * from "./SetCommentIDMutation";
+export {
+  withCreateCommentMutation,
+  CreateCommentMutation,
+  CreateCommentInput,
+} from "./CreateCommentMutation";
+export {
+  withSetNetworkStatusMutation,
+  SetNetworkStatusMutation,
+  SetNetworkStatusInput,
+} from "./SetNetworkStatusMutation";
+export {
+  withSetCommentIDMutation,
+  SetCommentIDMutation,
+  SetCommentIDInput,
+} from "./SetCommentIDMutation";