feat: add new components

Add new presentational components and the required mocks and tests to test them:

Components:

* Text Input (default, touched, valid, error)
* Typography Kit
* Dispute Card
* Nav Bar
* Toasts (info, message, success, error, confirm, etc)

Mocks:

* Timezone
* Current time

Also add the --pure-lockfile flag to the travis-ci install script.

.gitignore

@@ -1,30 +1,30 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
+# Environment Variables
+/.env
+
 # Dependencies
 /node_modules/
 
+# Styles
+/src/**/*.css
+
 # Testing
 /coverage/
 
-# Production
-/build/
-
-# Docs
+# Documentation
 /docs/
 
-# Env Vars
-/.env
-
-# Misc
-/.DS_Store
+# Production
+/build/
 
 # Logs
 /yarn-debug.log*
 /yarn-error.log*
 
-# Styles
-/src/**/*.css
-
 # Editors
 /.vscode/
 /.idea/*
+
+# Misc
+/.DS_Store

.storybook/addons.js

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

.storybook/config.js

@@ -1,12 +1,39 @@
 import React from 'react'
 import { configure, addDecorator } from '@storybook/react'
 import { host } from 'storybook-host'
-import 'normalize.css'
+import { combineReducers, applyMiddleware, createStore } from 'redux'
+import { Provider } from 'react-redux'
+import ReduxToastr, { reducer as toastr } from 'react-redux-toastr'
+import { MemoryRouter } from 'react-router-dom'
+
+import GlobalComponents from '../src/bootstrap/global-components'
+
+import '../src/bootstrap/app.css'
 
 addDecorator(
   host({
     title: 'Kleros UI-Kit',
     align: 'center middle'
   })
 )
+
+const store = createStore(
+  combineReducers({
+    toastr
+  }),
+  applyMiddleware(store => next => action => {
+    console.log(action)
+    return next(action)
+  })
+)
+addDecorator(story => (
+  <Provider store={store}>
+    <div>
+      {console.log(store.getState())}
+      <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+      <GlobalComponents />
+    </div>
+  </Provider>
+))
+
 configure(() => require('../stories/index.js'), module)

.storybook/webpack.config.js

@@ -5,7 +5,11 @@ module.exports = {
     rules: [
       {
         test: /\.s?css$/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.png$/,
+        use: ['url-loader']
       }
     ]
   }

.stylelintrc

@@ -1,10 +1,12 @@
 {
   "extends": "stylelint-config-standard",
   "ignoreFiles": ["./dist/**", "./node_modules/**"],
-  "plugins": ["stylelint-order", "stylelint-selector-bem-pattern"],
+  "plugins": ["stylelint-scss", "stylelint-order", "stylelint-selector-bem-pattern"],
   "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
     "selector-list-comma-newline-after": "always-multi-line",
-    "order/order": ["custom-properties", "declarations"],
+    "order/order": ["dollar-variables", "at-variables", "less-mixins", "custom-properties", "declarations", "at-rules", "rules"],
     "order/properties-alphabetical-order": true,
     "plugin/selector-bem-pattern": {
       "componentName": "^[A-Z][A-Za-z]+$",

.travis.yml

@@ -5,6 +5,7 @@ cache:
   directories:
     - node_modules
   yarn: true
+install: yarn install --pure-lockfile
 script:
   - yarn run build:scss
   - yarn run lint

package.json

@@ -20,10 +20,10 @@
     "cz": "git-cz",
     "start:js": "react-scripts start",
     "start:scss":
-      "yarn run build:scss && node-sass-chokidar ./src/ -o ./src/ --watch --recursive",
+      "yarn run build:scss && node-sass-chokidar ./src -o ./src --watch",
     "start:storybook": "start-storybook -p 9001 -c .storybook",
     "build:js": "react-scripts build",
-    "build:scss": "node-sass-chokidar ./src/ -o ./src/",
+    "build:scss": "node-sass-chokidar ./src -o ./src",
     "start": "npm-run-all -p start:scss start:js",
     "build": "npm-run-all build:scss build:js",
     "build:analyze": "source-map-explorer build/static/js/main.*",
@@ -60,9 +60,11 @@
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
     "react-redux": "^5.0.6",
+    "react-redux-toastr": "^7.2.0",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^5.0.0-alpha.9",
     "react-scripts": "1.1.0",
+    "react-tooltip": "^3.4.0",
     "redux": "^3.7.2",
     "redux-form": "^7.2.1",
     "redux-saga": "^0.16.0"
@@ -71,8 +73,10 @@
     "@commitlint/cli": "^6.0.2",
     "@commitlint/config-conventional": "^6.0.2",
     "@commitlint/prompt": "^6.0.2",
+    "@dump247/storybook-state": "^1.2.1",
     "@storybook/addon-actions": "^3.3.10",
     "@storybook/addon-storyshots": "^3.3.10",
+    "@storybook/addons": "^3.3.10",
     "@storybook/react": "^3.3.10",
     "@storybook/storybook-deployer": "^2.2.0",
     "commitizen": "^2.9.6",
@@ -103,12 +107,13 @@
     "react-test-renderer": "^16.2.0",
     "redux-immutable-state-invariant": "^2.1.0",
     "redux-unhandled-action": "^1.3.0",
-    "sass-loader": "^6.0.6",
     "standard-version": "^4.3.0",
     "storybook-host": "^4.1.5",
     "stylelint": "^8.4.0",
     "stylelint-config-standard": "^18.0.0",
     "stylelint-order": "^0.8.0",
-    "stylelint-selector-bem-pattern": "^2.0.0"
+    "stylelint-scss": "^2.2.0",
+    "stylelint-selector-bem-pattern": "^2.0.0",
+    "timezone-mock": "^0.0.7"
   }
 }

src/bootstrap/app.js

@@ -8,6 +8,7 @@ import { Switch, Route } from 'react-router-dom'
 import Balance from '../containers/balance'
 
 import Initializer from './initializer'
+import GlobalComponents from './global-components'
 
 import './app.css'
 
@@ -25,6 +26,7 @@ const App = ({ store, history, testElement }) => (
           {testElement}
         </div>
       </ConnectedRouter>
+      <GlobalComponents />
     </Initializer>
   </Provider>
 )

src/bootstrap/app.scss

@@ -1,5 +1,18 @@
 @import '~normalize.css';
+@import '~react-redux-toastr/lib/css/react-redux-toastr.min.css';
 @import '../styles/_colors.scss';
+@import '../styles/_typography.scss';
+@import '../styles/_toastr.scss';
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  color: $text;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+}
 
 html,
 body,
@@ -16,5 +29,4 @@ body,
   background: $background;
   display: flex;
   flex-direction: column;
-  font-family: sans-serif;
 }

src/bootstrap/global-components.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import ReactTooltip from 'react-tooltip'
+import ReduxToastr from 'react-redux-toastr'
+
+export default () => (
+  <div>
+    <ReactTooltip />
+    <ReduxToastr
+      timeOut={0}
+      position="top-center"
+      transitionIn="bounceInDown"
+      transitionOut="bounceOutUp"
+      progressBar
+    />
+  </div>
+)

src/bootstrap/initializer.js

@@ -11,9 +11,12 @@ import { eth } from './dapp-api'
 
 class Initializer extends PureComponent {
   static propTypes = {
+    children: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.arrayOf(PropTypes.element.isRequired)
+    ]).isRequired,
     accounts: walletSelectors.accountsShape.isRequired,
-    fetchAccounts: PropTypes.func.isRequired,
-    children: PropTypes.element.isRequired
+    fetchAccounts: PropTypes.func.isRequired
   }
 
   state = { isWeb3Loaded: eth.accounts !== undefined }