WA-278 - Feature Create Safe

Included routes, forms, validators, tests and in general everything for making possible create safes, save them, load them and visualize them.

.eslintrc

@@ -34,7 +34,14 @@
       "always", {
         "annotationStyle": "line"
       }
-    ]
+    ],
+    "jsx-a11y/anchor-is-valid": [ "error", {
+      "components": [ "Link" ],
+      "specialLink": [ "to", "hrefLeft", "hrefRight" ],
+      "aspects": [ "noHref", "invalidHref", "preferButton" ]
+    }],
+    "react/require-default-props": 0,
+    "react/no-array-index-key": 0
   },
   "env": {
     "jest/globals": true,

.gitignore

@@ -1,6 +1,8 @@
 node_modules/
 build/
 build_webpack/
+build_storybook/
 build/contracts/
 truffle-config.js
 gnosis-safe-contracts/
+.DS_Store

.storybook/addons.js

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

.storybook/config.js

@@ -0,0 +1,35 @@
+import 'babel-polyfill'
+import { addDecorator, configure } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs'
+import { MuiThemeProvider } from 'material-ui/styles'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import StoryRouter from 'storybook-router'
+import { store } from '~/store'
+import theme from '~/theme/mui'
+import 'index.scss'
+
+(function (global) {
+    //Useful for adding data and libraries to window object.
+})(typeof window !== 'undefined' ? window : {});
+
+addDecorator(withKnobs);
+addDecorator(StoryRouter())
+
+addDecorator((story) => (
+  <Provider store={store}>
+    <MuiThemeProvider theme={theme}>
+      { story() }
+    </MuiThemeProvider>
+  </Provider>
+))
+
+const components = require.context('../src/components', true, /\.stories\.((js|ts)x?)$/)
+const routes = require.context('../src/routes', true, /\.stories\.((js|ts)x?)$/)
+
+function loadStories() {
+    components.keys().forEach((filename) => components(filename))
+    routes.keys().forEach((filename) => routes(filename))
+}
+
+configure(loadStories, module)

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet">
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

.storybook/webpack.config.js

@@ -0,0 +1,13 @@
+
+process.env.NODE_ENV = 'development'
+const prodConfig = require('../config/webpack.config.dev');
+
+module.exports = function(storybookConfig, configType) {
+
+    const config = Object.assign({}, prodConfig);
+
+    storybookConfig.module.rules = storybookConfig.module.rules.concat(config.module.rules)
+    storybookConfig.resolve = config.resolve;
+
+    return storybookConfig;
+};

.travis.yml

@@ -4,18 +4,20 @@ node_js:
 os:
   - linux
 before_script:
-  - npm install -g truffle
-  - npm install -g surge
+  - yarn global add truffle@4.1.3
+  - yarn global add surge
   - git clone https://github.com/gnosis/gnosis-safe-contracts.git
   - cd gnosis-safe-contracts
   - truffle compile && cd ..
 after_success:
-  - npm run build
+  - yarn build-storybook
+  - yarn build
   - |
     if [ ${TRAVIS_BRANCH} = "master" ]; then
       export NODE_ENV=production;
     else
       export NODE_ENV=development;
     fi
+  - cd build_webpack/ && cp index.html 200.html && cd ..
   - chmod ugo+x ./config/deploy/deploy.sh
   - ./config/deploy/deploy.sh

config/deploy/deploy.sh

@@ -3,22 +3,28 @@
 
 echo "Deployment script for gnosis-safe-team"
 
+RANGE=500
+
+number=$RANDOM
+let "number %= $RANGE"
+
 # Split on "/", ref: http://stackoverflow.com/a/5257398/689223
 REPO_SLUG_ARRAY=(${TRAVIS_REPO_SLUG//\// })
 REPO_OWNER=${REPO_SLUG_ARRAY[0]}
 REPO_NAME=${REPO_SLUG_ARRAY[1]}
 
 DEPLOY_PATH=./build_webpack
+DEPLOY_PATH_STORYBOOK=./build_storybook
 
 DEPLOY_SUBDOMAIN_UNFORMATTED_LIST=()
 
 if [ "$TRAVIS_PULL_REQUEST" != "false" ]
 then
   if [ "$NODE_ENV" == "production" ]
   then
-    DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(release-${TRAVIS_PULL_REQUEST}-pr)
+    DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(release-${TRAVIS_PULL_REQUEST}-pr-${number})
   else
-    DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(staging-${TRAVIS_PULL_REQUEST}-pr)
+    DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(staging-${TRAVIS_PULL_REQUEST}-pr-${number})
   fi
 elif [ -n "${TRAVIS_TAG// }" ] #TAG is not empty
 then
@@ -58,16 +64,18 @@ do
   echo $DEPLOY_SUBDOMAIN
 
   DEPLOY_DOMAIN=https://${DEPLOY_SUBDOMAIN}-${REPO_NAME}-${REPO_OWNER}.surge.sh
+  DEPLOY_STORYBOOK=https://storybook-${DEPLOY_SUBDOMAIN}-${REPO_NAME}-${REPO_OWNER}.surge.sh
 
   surge --project ${DEPLOY_PATH} --domain $DEPLOY_DOMAIN;
-
+  surge --project ${DEPLOY_PATH_STORYBOOK} --domain $DEPLOY_STORYBOOK
+
   if [ "$TRAVIS_PULL_REQUEST" != "false" ]
   then
     # Using the Issues api instead of the PR api
     # Done so because every PR is an issue, and the issues api allows to post general comments,
     # while the PR api requires that comments are made to specific files and specific commits
     GITHUB_PR_COMMENTS=https://api.github.com/repos/${TRAVIS_REPO_SLUG}/issues/${TRAVIS_PULL_REQUEST}/comments
-    curl -H "Authorization: token ${GITHUB_API_TOKEN}" --request POST ${GITHUB_PR_COMMENTS} --data '{"body":"Travis automatic deployment: '${DEPLOY_DOMAIN}'"}'
+    curl -H "Authorization: token ${GITHUB_API_TOKEN}" --request POST ${GITHUB_PR_COMMENTS} --data '{"body":"Travis automatic deployment:\r\n '${DEPLOY_DOMAIN}' \r\n \r\n Storybook book automatic deployment: \r\n '${DEPLOY_STORYBOOK}'"}'
   fi
 done
 

config/jest/LocalStorageMock.js

@@ -0,0 +1,26 @@
+// @flow
+class LocalStorageMock {
+  store: Object
+
+  constructor() {
+    this.store = {}
+  }
+
+  clear() {
+    this.store = {}
+  }
+
+  getItem(key) {
+    return this.store[key] || null
+  }
+
+  setItem(key, value) {
+    this.store[key] = value.toString()
+  }
+
+  removeItem(key) {
+    delete this.store[key]
+  }
+}
+
+global.localStorage = new LocalStorageMock()

config/jest/Web3Mock.js

@@ -0,0 +1,8 @@
+// @flow
+import Web3 from 'web3'
+
+const window = global.window || {}
+window.web3 = window.web3 || {}
+window.web3.currentProvider = new Web3.providers.HttpProvider('http://localhost:8545')
+
+global.window = window

config/webpack.config.dev.js

@@ -1,4 +1,6 @@
+/*eslint-disable*/
 const autoprefixer = require('autoprefixer');
+const cssmixins = require('postcss-mixins');
 const cssvars = require('postcss-simple-vars');
 const webpack = require('webpack');
 const HtmlWebPackPlugin = require("html-webpack-plugin");
@@ -26,6 +28,7 @@ const postcssPlugins = [
       'not ie < 9', // React doesn't support IE8 anyway
     ]
   }),
+  cssmixins,
   cssvars({
     variables: function () {
         return Object.assign({}, cssvariables);
@@ -115,7 +118,7 @@ module.exports = {
             },
           },
         ],
-    },
+      },
       {
         test: /\.html$/,
         use: [
@@ -124,7 +127,17 @@ module.exports = {
             options: { minimize: false }
           }
         ]
-      }
+      },
+      {
+        test: /\.(jpe?g|png|svg)$/i,
+        exclude: /node_modules/,
+        use: [{
+          loader: "file-loader",
+          options: {
+            name: 'img/[hash].[ext]'
+          }
+        }]
+      },
     ]
   },
   plugins: [

config/webpack.config.prod.js

@@ -1,5 +1,7 @@
+/*eslint-disable*/
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const autoprefixer = require('autoprefixer')
+const cssmixins = require('postcss-mixins');
 const cssvars = require('postcss-simple-vars')
 const webpack = require('webpack')
 
@@ -23,6 +25,7 @@ const postcssPlugins = [
       'not ie < 9', // React doesn't support IE8 anyway
     ],
   }),
+  cssmixins,
   cssvars({
     variables() {
       return Object.assign({}, cssvariables)
@@ -149,6 +152,16 @@ module.exports = {
           ],
         }),
       },
+      {
+        test: /\.(jpe?g|png|svg)$/i,
+        exclude: /node_modules/,
+        use: [{
+          loader: "file-loader",
+          options: {
+            name: 'img/[hash].[ext]'
+          }
+        }]
+      },
     ],
   },
   plugins: [
@@ -175,7 +188,10 @@ module.exports = {
     // Otherwise React will be compiled in the very slow development mode.
     new webpack.DefinePlugin(env),
     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
-    new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
+    new ExtractTextPlugin({
+      filename: 'static/css/[name].[contenthash:8].css',
+      allChunks: true
+    }),
     // Generate a manifest file which contains a mapping of all asset filenames
     // to their corresponding output file so that tools can pick it up without
     // having to parse `index.html`.

config/webpack.config.test.js

@@ -1 +1,2 @@
-import '@babel/polyfill';
+// @flow
+import '@babel/polyfill'

flow-typed/npm/@storybook/addon-actions_v3.x.x.js

@@ -0,0 +1,12 @@
+// flow-typed signature: d33e1b8f0888822895515e3ca6a3f8eb
+// flow-typed version: 1709d3212d/@storybook/addon-actions_v3.x.x/flow_>=v0.25.x
+
+declare module '@storybook/addon-actions' {
+  declare type Action = (name: string) => Function;
+  declare type DecorateFn = (args: Array<any>) => Array<any>;
+
+  declare module.exports: {
+    action: Action,
+    decorateAction(args: Array<DecorateFn>): Action;
+  };
+}