feat(ui): add storybook

Create a storybook in order to aid component development by providing an
easy way to preview components.

.eslintignore

@@ -50,3 +50,6 @@ main.js.map
 .idea
 npm-debug.log.*
 __snapshots__
+
+# Storybook
+storybook-static

.eslintrc

@@ -49,10 +49,12 @@
     "react/forbid-prop-types": 0,
     "camelcase": 0,
     "curly": ["error", "all"],
+    "react/prefer-stateless-function": 0,
     "react/require-default-props": 0,
     "react/style-prop-object": 0,
     "max-len": ["error", { "code": 120, "ignoreUrls": true }],
     "import/no-extraneous-dependencies": 0,
+    "import/prefer-default-export": 0,
     "no-cond-assign": ["error", "except-parens"],
     "no-confusing-arrow": "error",
     "no-mixed-operators": "error",
@@ -73,7 +75,7 @@
   "settings": {
     "import/resolver": {
       "node": {
-        "moduleDirectory": ["app", "app/node_modules", "node_modules"]
+        "moduleDirectory": ["app", "node_modules", "app/node_modules"]
       },
       "webpack": {
         "config": "internals/webpack/webpack.config.eslint.js"

.flowconfig

@@ -6,6 +6,7 @@
 <PROJECT_ROOT>/release/.*
 <PROJECT_ROOT>/dll/.*
 <PROJECT_ROOT>/release/.*
+<PROJECT_ROOT>/storybook-static/.*
 <PROJECT_ROOT>/.git/.*
 .*/node_modules/config-chain/test/broken.json
 
@@ -36,7 +37,8 @@ module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/internals/flow/WebpackAsse
 # Example: components/Foo -> `<project_root>/app/components/Foo`
 module.name_mapper='^components/\(.*\)$' -> '<PROJECT_ROOT>/app/components/\1'
 module.name_mapper='^containers/\(.*\)$' -> '<PROJECT_ROOT>/app/containers/\1'
+module.name_mapper='^icons/\(.*\)$' -> '<PROJECT_ROOT>/app/icons/\1'
 module.name_mapper='^lib/\(.*\)$' -> '<PROJECT_ROOT>/app/lib/\1'
 module.name_mapper='^reducers/\(.*\)$' -> '<PROJECT_ROOT>/app/reducers/\1'
 module.name_mapper='^store/\(.*\)$' -> '<PROJECT_ROOT>/app/store/\1'
-module.name_mapper='^icons/\(.*\)$' -> '<PROJECT_ROOT>/app/icons/\1'
+module.name_mapper='^themes/\(.*\)$' -> '<PROJECT_ROOT>/app/themes/\1'

.gitignore

@@ -54,3 +54,6 @@ npm-debug.log.*
 
 # lnd binary
 resources/bin/
+
+# Storybook
+storybook-static

.prettierignore

@@ -6,7 +6,6 @@ package-lock.json
 node_modules
 coverage
 
-
 # App packaged
 release
 app/main.prod.js
@@ -20,3 +19,6 @@ dist
 dll
 main.js
 main.js.map
+
+# Storybook
+storybook-static

.storybook/addons.js

@@ -0,0 +1,6 @@
+import '@storybook/addon-options/register'
+import '@storybook/addon-actions/register'
+import 'storybook-addon-styled-component-theme/dist/register'
+import '@storybook/addon-storysource/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-console'

.storybook/config.js

@@ -0,0 +1,65 @@
+import { addDecorator, configure, setAddon } from '@storybook/react'
+import { withThemesProvider } from 'storybook-addon-styled-component-theme'
+import { themes } from '@storybook/components'
+import { withOptions } from '@storybook/addon-options'
+import { setDefaults, withInfo } from '@storybook/addon-info'
+import { withConsole } from '@storybook/addon-console'
+import { linkTo } from '@storybook/addon-links'
+import chaptersAddon from 'react-storybook-addon-chapters'
+import StoryRouter from 'storybook-react-router'
+import { dark, light } from 'themes'
+
+import React from 'react'
+import GlobalStyle from 'components/UI/GlobalStyle'
+
+// Info
+addDecorator(
+  withInfo({
+    styles: {
+      button: {
+        base: {
+          background: dark.colors.lightningOrange
+        }
+      }
+    }
+  })
+)
+
+// Router
+addDecorator(StoryRouter({}))
+
+// Chapters
+setAddon(chaptersAddon)
+
+// Console.
+addDecorator((storyFn, context) => withConsole()(storyFn)(context))
+
+// Options
+addDecorator(
+  withOptions({
+    name: 'Zap Desktop',
+    url: 'https://ln-zap.github.io/zap-desktop',
+    theme: themes.dark,
+    hierarchySeparator: /\./
+  })
+)
+
+// Zap Global style.
+addDecorator(story => (
+  <React.Fragment>
+    <GlobalStyle />
+    {story()}
+  </React.Fragment>
+))
+
+// Zap Themes.
+const zapThemes = [dark, light]
+addDecorator(withThemesProvider(zapThemes))
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/)
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
+
+configure(loadStories, module)

.storybook/preview-head.html

@@ -0,0 +1,11 @@
+<style>
+  body {
+    padding: 20px 20px;
+    color: white;
+
+    background-color: #000;
+    background-position: left top;
+    background-image: linear-gradient(0deg, transparent, transparent 7px, rgba(253,152,0,0.25) 7px), linear-gradient(90deg, transparent, transparent 7px, rgba(253,152,0,0.25) 7px);
+    background-size: 8px 8px;
+  }
+</style>

.storybook/webpack.config.js

@@ -0,0 +1,20 @@
+require('@babel/register')
+
+const baseConfig = require('../internals/webpack/webpack.config.base')
+const merge = require('webpack-merge')
+
+const config = merge.smart(baseConfig, {
+  default: {
+    module: {
+      rules: [
+        {
+          test: /\.stories\.jsx?$/,
+          loaders: [require.resolve('@storybook/addon-storysource/loader')],
+          enforce: 'pre'
+        }
+      ]
+    }
+  }
+})
+
+module.exports = config

.stylelintignore

@@ -1 +1,5 @@
+# Style reset
 app/styles/reset.scss
+
+# Storybook
+storybook-static

.stylelintrc

@@ -1,5 +1,8 @@
 {
-  "extends": "stylelint-config-recommended-scss",
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components"
+  ],
   "rules": {
     "no-descending-specificity": null,
     "no-empty-source": null

app/components/App/App.scss

@@ -14,6 +14,6 @@
   height: 20px;
   width: 100%;
   position: absolute;
-  -webkit-user-select: none;
+  user-select: none;
   -webkit-app-region: drag;
 }

app/components/LoadingBolt/LoadingBolt.scss

@@ -1,17 +1,21 @@
 @import 'styles/variables.scss';
 
 .container {
-  z-index: z("loading-bolt", "container");
+  z-index: z('loading-bolt', 'container');
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   text-align: center;
-  background: linear-gradient(-45deg, rgba(255, 189, 89, 1) 10%, rgba(253, 152, 0, 1), var(--lightestBackground), var(--darkestBackground));
+  background: linear-gradient(
+    -45deg,
+    rgba(255, 189, 89, 1) 10%,
+    rgba(253, 152, 0, 1),
+    var(--lightestBackground),
+    var(--darkestBackground)
+  );
   background-size: 400% 400%;
-  -webkit-animation: Gradient 15s ease infinite;
-  -moz-animation: Gradient 15s ease infinite;
   animation: Gradient 15s ease infinite;
 }
 
@@ -19,6 +23,7 @@
   position: relative;
   top: calc(50% - 125px);
   min-height: 250px;
+  color: var(--primaryText);
 
   .bolt svg {
     height: 155px;
@@ -28,7 +33,6 @@
   }
 
   h1 {
-    color: var(--primaryText);
     margin-top: 50px;
     font-size: 25px;
   }
@@ -47,31 +51,3 @@
     background-position: 0% 50%;
   }
 }
-
-@-moz-keyframes Gradient {
-  0% {
-    background-position: 0% 50%;
-  }
-
-  50% {
-    background-position: 100% 50%;
-  }
-
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-@keyframes Gradient {
-  0% {
-    background-position: 0% 50%;
-  }
-
-  50% {
-    background-position: 100% 50%;
-  }
-
-  100% {
-    background-position: 0% 50%;
-  }
-}

app/components/Onboarding/FormContainer/FormContainer.scss

@@ -10,7 +10,7 @@
   height: 20px;
   width: 100%;
   position: absolute;
-  -webkit-user-select: none;
+  user-select: none;
   -webkit-app-region: drag;
 }
 

app/components/UI/GlobalStyle.js

@@ -0,0 +1,22 @@
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
+  }
+
+  * { box-sizing: border-box; }
+
+  body {
+    margin: 0;
+    font-family: 'Roboto Light', 'Roboto', Arial, Helvetica, sans-serif;
+    font-size: 13px;
+    line-height: 1.4;
+    -webkit-font-smoothing: antialiased;
+  }
+`
+
+export default GlobalStyle

app/components/Wallet/Wallet.scss

@@ -62,10 +62,7 @@
     cursor: pointer;
   }
 
-  .bitcoinLogo svg {
-    width: 20px;
-    height: 32px;
-
+  .qrCode svg {
     g {
       fill: var(--gray);
     }
@@ -220,12 +217,7 @@
     width: 30px;
     border: 1px solid rgba(235, 184, 100, 0.1);
     border-left-color: rgba(235, 184, 100, 0.4);
-    -webkit-border-radius: 999px;
-    -moz-border-radius: 999px;
     border-radius: 999px;
-    -webkit-animation: animation-rotate 1000ms linear infinite;
-    -moz-animation: animation-rotate 1000ms linear infinite;
-    -o-animation: animation-rotate 1000ms linear infinite;
     animation: animation-rotate 1000ms linear infinite;
   }
 
@@ -243,24 +235,6 @@
   }
 }
 
-@-webkit-keyframes animation-rotate {
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@-moz-keyframes animation-rotate {
-  100% {
-    -moz-transform: rotate(360deg);
-  }
-}
-
-@-o-keyframes animation-rotate {
-  100% {
-    -o-transform: rotate(360deg);
-  }
-}
-
 @keyframes animation-rotate {
   100% {
     transform: rotate(360deg);

app/package.json

@@ -15,6 +15,6 @@
   "license": "MIT",
   "dependencies": {
     "grpc": "^1.15.0",
-    "react-icons": "^2.2.5"
+    "react-icons": "^2.2.7"
   }
 }

app/styles/.stylelintrc

@@ -0,0 +1,10 @@
+# This file is used by the stylelint CLI to lint CSS files.
+# The .stylelintrc file in the project root directory is configured to lint
+# CSS in JS within Styled Components
+{
+  "extends": ["stylelint-config-recommended-scss"],
+  "rules": {
+    "no-descending-specificity": null,
+    "no-empty-source": null
+  }
+}

app/yarn.lock

@@ -262,12 +262,12 @@ minimatch@^3.0.4:
 
 minimist@0.0.8:
   version "0.0.8"
-  resolved "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
   integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
 minimist@^1.2.0:
   version "1.2.0"
-  resolved "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
 minipass@^2.2.1, minipass@^2.3.3:
@@ -287,7 +287,7 @@ minizlib@^1.1.0:
 
 mkdirp@^0.5.0, mkdirp@^0.5.1:
   version "0.5.1"
-  resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
   dependencies:
     minimist "0.0.8"
@@ -298,14 +298,14 @@ ms@2.0.0:
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
 nan@^2.0.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.0.tgz#574e360e4d954ab16966ec102c0c049fd961a099"
-  integrity sha512-F4miItu2rGnV2ySkXOQoA8FKz/SR2Q2sWP0sbTxNxz/tuokeC8WxOhPMcwi0qIyGtVn/rrSeLbvVkznqCdwYnw==
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.1.tgz#90e22bccb8ca57ea4cd37cc83d3819b52eea6766"
+  integrity sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==
 
 needle@^2.2.1:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.3.tgz#c1b04da378cd634d8befe2de965dc2cfb0fd65ca"
-  integrity sha512-GPL22d/U9cai87FcCPO6e+MT3vyHS2j+zwotakDc7kE2DtUAqFKMXLJCTtRp+5S75vXIwQPvIxkvlctxf9q4gQ==
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.4.tgz#51931bff82533b1928b7d1d69e01f1b00ffd2a4e"
+  integrity sha512-HyoqEb4wr/rsoaIDfTH2aVL9nWtQqba2/HvMv+++m8u0dz808MaagKILxtfeSN7QU7nvbQ79zk3vYOJp9zsNEA==
   dependencies:
     debug "^2.1.2"
     iconv-lite "^0.4.4"
@@ -387,7 +387,7 @@ os-homedir@^1.0.0:
 
 os-locale@^1.4.0:
   version "1.4.0"
-  resolved "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
   integrity sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=
   dependencies:
     lcid "^1.0.0"
@@ -440,7 +440,7 @@ react-icon-base@2.1.0:
   resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"
   integrity sha1-oZbjP98eeqof2jrvu2i9rZ6Cp50=
 
-react-icons@^2.2.5:
+react-icons@^2.2.7:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.7.tgz#d7860826b258557510dac10680abea5ca23cf650"
   integrity sha512-0n4lcGqzJFcIQLoQytLdJCE0DKSA9dkwEZRYoGrIDJZFvIT6Hbajx5mv9geqhqFiNjUgtxg8kPyDfjlhymbGFg==
@@ -449,7 +449,7 @@ react-icons@^2.2.5:
 
 readable-stream@^2.0.6:
   version "2.3.6"
-  resolved "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
   dependencies:
     core-util-is "~1.0.0"
@@ -572,7 +572,7 @@ window-size@^0.1.4:
 
 wrap-ansi@^2.0.0:
   version "2.1.0"
-  resolved "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
   integrity sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=
   dependencies:
     string-width "^1.0.1"
@@ -595,7 +595,7 @@ yallist@^3.0.0, yallist@^3.0.2:
 
 yargs@^3.10.0:
   version "3.32.0"
-  resolved "http://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
   integrity sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=
   dependencies:
     camelcase "^2.0.1"

babel.config.js

@@ -19,6 +19,7 @@ module.exports = {
     '@babel/plugin-proposal-export-default-from',
     '@babel/plugin-transform-classes',
     '@babel/plugin-transform-destructuring',
+    'babel-plugin-styled-components',
     [
       'react-intl-auto',
       {

internals/webpack/webpack.config.base.js

@@ -37,8 +37,7 @@ export default {
    * Determine the array of extensions that should be used to resolve modules.
    */
   resolve: {
-    extensions: ['.js', '.jsx', '.json'],
-    modules: [path.join(rootDir, 'app'), 'node_modules']
+    modules: [path.resolve(rootDir, 'app'), 'node_modules', 'app/node_modules']
   },
 
   plugins: [new IgnorePlugin(/^\.\/locale$/, /moment$/)],

package.json

@@ -34,6 +34,9 @@
     "start": "cross-env NODE_ENV=production electron ./app/",
     "start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r @babel/register ./app/main.dev",
     "start-renderer-dev": "node --trace-warnings -r @babel/register ./node_modules/.bin/webpack-dev-server --config internals/webpack/webpack.config.renderer.dev.js",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook",
+    "storybook:deploy": "npm run storybook:build && gh-pages -t -r git@github.com:LN-Zap/zap-desktop.git -d storybook-static -o origin -b gh-pages",
     "test": "npm run lint && npm run lint-styles && npm run flow && npm run build && npm run test-unit && npm run test-e2e",
     "test-base": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=true ELECTRON_DISABLE_SECURITY_WARNINGS=true node --trace-warnings ./node_modules/jest/bin/jest --maxWorkers=2 --forceExit",
     "test-unit": "npm run test-base -- --coverage ./test/unit",
@@ -41,7 +44,7 @@
     "test-ci": "npm run test-e2e && npm run test-unit"
   },
   "config": {
-    "style_paths": "app/styles/*.scss app/components/**/*.scss",
+    "style_paths": "app/styles/*.scss app/components/**/*.scss app/components/**/*.js",
     "lnd-binary": {
       "binaryVersion": "0.5-beta-21-g25145acc",
       "binarySite": "https://github.com/LN-Zap/lnd/releases/download"
@@ -185,10 +188,11 @@
       "js"
     ],
     "moduleDirectories": [
-      "node_modules",
+      "app",
       "app/node_modules",
-      "app"
+      "node_modules"
     ],
+    "setupTestFrameworkScriptFile": "./test/unit/__helpers__/setup-tests.js",
     "transform": {
       "^.+\\.js$": "babel-jest"
     }
@@ -206,6 +210,15 @@
     "@babel/register": "^7.0.0",
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^7.1.2",
+    "@storybook/addon-actions": "^4.0.0-rc.0",
+    "@storybook/addon-console": "^1.0.4",
+    "@storybook/addon-info": "^4.0.0-rc.0",
+    "@storybook/addon-links": "^4.0.0-rc.0",
+    "@storybook/addon-options": "^4.0.0-rc.0",
+    "@storybook/addon-storysource": "^4.0.0-rc.0",
+    "@storybook/addons": "^4.0.0-rc.0",
+    "@storybook/components": "^4.0.0-rc.0",
+    "@storybook/react": "^4.0.0-rc.0",
     "add-asset-html-webpack-plugin": "^3.0.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -213,6 +226,7 @@
     "babel-loader": "^8.0.0",
     "babel-plugin-react-intl": "^3.0.1",
     "babel-plugin-react-intl-auto": "^1.1.1",
+    "babel-plugin-styled-components": "^1.8.0",
     "babel-preset-react-optimize": "^1.0.1",
     "browserslist": "^4.2.0",
     "chalk": "^2.4.1",
@@ -248,10 +262,12 @@
     "file-loader": "^2.0.0",
     "flow-bin": "^0.83.0",
     "flow-typed": "^2.5.1",
+    "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^3.2.0",
     "husky": "1.1.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.6.0",
+    "jest-styled-components": "^6.2.1",
     "jsdom": "^12.2.0",
     "lint-staged": "^7.3.0",
     "lnd-binary": "^0.3.7",
@@ -260,15 +276,21 @@
     "mock-spawn": "^0.2.6",
     "node-sass": "^4.9.3",
     "prettier": "^1.14.3",
+    "react-storybook-addon-chapters": "^2.1.8",
     "react-test-renderer": "^16.5.2",
     "redux-logger": "^3.0.6",
     "rimraf": "^2.6.2",
     "sass-loader": "^7.1.0",
     "spectron": "^4.0.0",
+    "storybook-addon-styled-component-theme": "^1.0.7",
+    "storybook-react-router": "^1.0.1",
     "style-loader": "^0.23.1",
     "stylelint": "^9.6.0",
+    "stylelint-config-recommended": "^2.1.0",
     "stylelint-config-recommended-scss": "^3.2.0",
+    "stylelint-config-styled-components": "^0.1.1",
     "stylelint-formatter-pretty": "^1.0.3",
+    "stylelint-processor-styled-components": "^1.5.0",
     "stylelint-scss": "^3.3.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.20.2",
@@ -279,6 +301,7 @@
   },
   "dependencies": {
     "@grpc/proto-loader": "^0.3.0",
+    "@rebass/components": "^4.0.0-1",
     "axios": "^0.18.0",
     "bitcoinjs-lib": "^4.0.1",
     "copy-to-clipboard": "^3.0.8",
@@ -308,6 +331,7 @@
     "react-router-dom": "^4.3.1",
     "react-router-redux": "^5.0.0-alpha.9",
     "react-spring": "^5.9.2",
+    "rebass": "^3.0.0-9",
     "redux": "^4.0.0",
     "redux-electron-ipc": "^1.1.13",
     "redux-thunk": "^2.3.0",
@@ -315,6 +339,7 @@
     "satoshi-bitcoin": "^1.0.4",
     "source-map-support": "^0.5.9",
     "split2": "^3.0.0",
+    "styled-components": "^4.0.0-beta.10",
     "tildify": "^1.2.0",
     "untildify": "^3.0.3",
     "validator": "^10.8.0"

stories/_welcome.stories.js

@@ -0,0 +1,5 @@
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Welcome', module).addWithChapters('Zap Style Guide', {
+  subtitle: 'Reusable components for Zap Desktop.'
+})

test/unit/__helpers__/setup-tests.js

@@ -0,0 +1 @@
+import 'jest-styled-components'