Add git hook

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["standard", "standard-jsx"],
+  "extends": ["prettier", "prettier/react"],
   "parser": "babel-eslint",
   "env": {
     "jest": true

.prettierignore

@@ -0,0 +1,4 @@
+storybook-static/
+node_modules/
+build/
+.git/

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "parser": "babylon",
+  "printWidth": 80,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false,
+  "arrowParens": "avoid",
+}

package.json

@@ -5,17 +5,11 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
-    "@storybook/storybook-deployer": "^2.0.0",
-    "babel-eslint": "^8.0.1",
-    "babel-polyfill": "^6.26.0",
     "blockies": "^0.0.2",
     "blockies-identicon": "^0.1.0",
     "crypto-js": "^3.1.9-1",
-    "enzyme": "^3.2.0",
     "global": "^4.3.2",
     "kleros-api": "^0.0.47",
-    "node-sass-chokidar": "^0.0.3",
-    "npm-run-all": "^4.1.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-fontawesome": "^1.6.1",
@@ -25,26 +19,34 @@
     "redux-devtools-extension": "^2.13.2",
     "redux-form": "^7.0.4",
     "redux-thunk": "^2.2.0",
-    "storybook-router": "^0.2.9",
     "web3": "^0.20.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.2.6",
     "@storybook/addon-links": "^3.2.6",
     "@storybook/react": "^3.2.8",
+    "@storybook/storybook-deployer": "^2.0.0",
+    "babel-eslint": "^8.0.1",
+    "babel-polyfill": "^6.26.0",
     "coveralls": "^3.0.0",
+    "enzyme": "^3.2.0",
     "enzyme-adapter-react-15": "^1.0.5",
     "enzyme-to-json": "^3.3.0",
     "eslint": "^4.9.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-config-standard-jsx": "^4.0.2",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-node": "^5.2.0",
     "eslint-plugin-promise": "^3.6.0",
-    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-react": "^7.5.1",
     "eslint-plugin-standard": "^3.0.1",
+    "husky": "^0.14.3",
+    "lint-staged": "^6.0.0",
+    "node-sass-chokidar": "^0.0.3",
+    "npm-run-all": "^4.1.1",
+    "prettier": "1.9.2",
     "react-scripts": "1.0.13",
-    "react-test-renderer": "^15.5.0"
+    "react-test-renderer": "^15.5.0",
+    "storybook-router": "^0.2.9"
   },
   "scripts": {
     "start-js": "react-scripts start",
@@ -54,23 +56,31 @@
     "test:coverage": "npm test -- --coverage",
     "test:coveralls": "cat ./coverage/lcov.info | coveralls",
     "eject": "react-scripts eject",
-    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
-    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
-    "lint": "./node_modules/.bin/eslint src",
-    "lint-fix": "./node_modules/.bin/eslint src --fix",
+    "build-css":
+      "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
+    "watch-css":
+      "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
+    "lint":
+      "./node_modules/.bin/prettier 'src/**/*.js' 'src/**/*.scss' --write && ./node_modules/.bin/eslint src",
+    "lint-fix":
+      "./node_modules/.bin/prettier 'src/**/*.js' 'src/**/*.scss' --write && ./node_modules/.bin/eslint src --fix",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public",
     "deploy-storybook": "storybook-to-ghpages",
-    "postinstall": "npm rebuild node-sass"
+    "postinstall": "npm rebuild node-sass",
+    "precommit": "lint-staged"
   },
   "jest": {
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx}",
-      "!<rootDir>/node_modules/"
-    ]
+    "snapshotSerializers": ["enzyme-to-json/serializer"],
+    "collectCoverageFrom": ["src/**/*.{js,jsx}", "!<rootDir>/node_modules/"]
   },
-  "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
+  "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
+  "lint-staged": {
+    "*.{js,scss}": [
+      "prettier --write",
+      "eslint",
+      "jest --findRelatedTests",
+      "git add"
+    ]
+  }
 }

src/Components/ActivatePNK/Form/Form.scss

@@ -8,16 +8,16 @@
   .button-container {
     button {
       height: 40px;
-    	width: 180px;
+      width: 180px;
       border: none;
-    	border-radius: 4px;
-    	background: linear-gradient(0deg, #0059ab 0%, #0468c4 100%);
-    	box-shadow: 0 1px 0 0 #024e95;
-    	color: #fff;
-    	font-size: 15px;
-    	font-weight: 600;
-    	line-height: 18px;
-    	text-align: center;
+      border-radius: 4px;
+      background: linear-gradient(0deg, #0059ab 0%, #0468c4 100%);
+      box-shadow: 0 1px 0 0 #024e95;
+      color: #fff;
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 18px;
+      text-align: center;
     }
     margin-top: 34px;
   }

src/Components/ActivatePNK/Form/index.js

@@ -8,42 +8,39 @@ import Input from '../../Input'
 import './Form.css'
 
 const Form = props => {
-  const {
-    handleSubmit,
-    submitting,
-    error,
-    maxTokens = 0,
-    hasErrored
-  } = props
+  const { handleSubmit, submitting, error, maxTokens = 0, hasErrored } = props
 
   return (
-    <form onSubmit={handleSubmit} className='Form-container'>
-      <div className='amount-container'>
+    <form onSubmit={handleSubmit} className="Form-container">
+      <div className="amount-container">
         <Field
-          name='amount'
+          name="amount"
           component={Input}
-          type='number'
+          type="number"
           required
-          innerClassName='input-number'
+          innerClassName="input-number"
           step={1 * 10e-18}
           defaultValue={maxTokens}
         />
       </div>
-      { error && <div><strong>{ error }</strong></div> }
-      <div className='button-container'>
-        <button type='submit' disabled={submitting || error} className='submit'>
-          {
-            submitting &&
+      {error && (
+        <div>
+          <strong>{error}</strong>
+        </div>
+      )}
+      <div className="button-container">
+        <button type="submit" disabled={submitting || error} className="submit">
+          {submitting && (
             <FontAwesome
-              name='circle-o-notch'
+              name="circle-o-notch"
               spin
-              style={{marginRight: '10px'}}
+              style={{ marginRight: '10px' }}
             />
-          }
+          )}
           Activate
         </button>
       </div>
-      { hasErrored && <div>Error contract</div> }
+      {hasErrored && <div>Error contract</div>}
     </form>
   )
 }
@@ -66,16 +63,18 @@ const validate = (values, props) => {
   return errors
 }
 
-export default withRouter(connect(mapStateToProps, null)(
-  reduxForm({
-    form: FORM_NAME,
-    validate,
-    onSubmit (values, dispatch) {
-      return dispatch(activatePinakion(values))
-        .catch(error => {
+export default withRouter(
+  connect(mapStateToProps, null)(
+    reduxForm({
+      form: FORM_NAME,
+      validate,
+      onSubmit(values, dispatch) {
+        return dispatch(activatePinakion(values)).catch(error => {
           if (error) {
-            throw new SubmissionError({_error: 'Error activating pinakion'})
+            throw new SubmissionError({ _error: 'Error activating pinakion' })
           }
         })
-    }
-  })(Form)))
+      }
+    })(Form)
+  )
+)

src/Components/ActivatePNK/index.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import Form from './Form'
 
-const ActivatePNK = (props) => {
+const ActivatePNK = props => {
   return (
-    <div className='ActivatePNK-container'>
+    <div className="ActivatePNK-container">
       <h1>Activate PNK</h1>
       <Form maxTokens={props.maxTokens} />
     </div>

src/Components/Banner/__tests__/index.js

@@ -3,7 +3,7 @@ import Banner from '../index'
 
 describe('Banner - Exists', () => {
   test('render component successfully', () => {
-    const component = shallow(<Banner linkTo='' />)
+    const component = shallow(<Banner linkTo="" />)
     expect(component).toMatchSnapshot()
   })
 })
@@ -21,7 +21,9 @@ describe('Bannner - Render component with props', () => {
   })
 
   test('render component that contains `Go back to the list` text', () => {
-    expect(component.find('Link').props().children).toEqual('← Go back to the list')
+    expect(component.find('Link').props().children).toEqual(
+      '← Go back to the list'
+    )
   })
 
   test('render component with props[linkTo, title, className]', () => {

src/Components/Banner/index.js

@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom'
 import './Banner.css'
 
 const Banner = ({ title, linkTo, children }) => (
-  <div className='dispute-resolution-banner'>
-    <div className='banner-container'>
+  <div className="dispute-resolution-banner">
+    <div className="banner-container">
       <Link to={linkTo}>&#x2190; Go back to the list</Link>
-      <div className='dispute-title'>
+      <div className="dispute-title">
         {title}
         {children}
       </div>

src/Components/ContractsTable/Grid/GridContent/index.js

@@ -9,57 +9,62 @@ import { truncateText } from '../../../../helpers/truncateText'
 import './GridContent.css'
 
 class GridContent extends Component {
-  componentWillMount () {
+  componentWillMount() {
     this.props.getDataContracts()
   }
 
-  render () {
+  render() {
     const { hasErrored, isFetching, contracts = [] } = this.props
     if (hasErrored) {
       return <p>Sorry! There was an error loading the balance</p>
     }
 
     if (isFetching) {
       return (
-        <div className='GridContent-container'>
-          <div className='items loader'>
-            <div className='linear-background-100' />
-            <div className='linear-background-90' />
-            <div className='linear-background-90' />
+        <div className="GridContent-container">
+          <div className="items loader">
+            <div className="linear-background-100" />
+            <div className="linear-background-90" />
+            <div className="linear-background-90" />
           </div>
         </div>
       )
     }
 
     return (
-      <div className='GridContent-container'>
-        <div className='items'>
-          {
-            _.isEmpty(contracts) &&
-            <div className='items-row'>
-              <div className='item item-no-contracts'>
+      <div className="GridContent-container">
+        <div className="items">
+          {_.isEmpty(contracts) && (
+            <div className="items-row">
+              <div className="item item-no-contracts">
                 You have no contracts.
               </div>
             </div>
-          }
-          {
-            contracts.filter(contract => {
-              return contract.arbitrator === process.env.REACT_APP_ARBITRATOR_ADDRESS
-            }).map(contract =>
-              (
-                <Link key={contract.address} to={`contract-summary/${contract.address}`}>
-                  <div className='items-row'>
-                    <div className='item-contract-hash'>{contract.address}</div>
-                    <div className='item item-party-a'>{truncateText(contract.partyA, 10)}</div>
-                    <div className='item item-party-b'>{truncateText(contract.partyB, 10)}</div>
-                    <div className='item item-rule'>
-                      <FontAwesome name='circle-thin' />
-                    </div>
-                  </div>
-                </Link>
+          )}
+          {contracts
+            .filter(contract => {
+              return (
+                contract.arbitrator === process.env.REACT_APP_ARBITRATOR_ADDRESS
               )
-            )
-          }
+            })
+            .map(contract => (
+              <Link
+                key={contract.address}
+                to={`contract-summary/${contract.address}`}>
+                <div className="items-row">
+                  <div className="item-contract-hash">{contract.address}</div>
+                  <div className="item item-party-a">
+                    {truncateText(contract.partyA, 10)}
+                  </div>
+                  <div className="item item-party-b">
+                    {truncateText(contract.partyB, 10)}
+                  </div>
+                  <div className="item item-rule">
+                    <FontAwesome name="circle-thin" />
+                  </div>
+                </div>
+              </Link>
+            ))}
         </div>
       </div>
     )
@@ -80,4 +85,6 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(GridContent))
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(GridContent)
+)