Add prettier

balance-io · May 16, 2018 · e37958d · e37958d
1 parent 4ec8f41
commit e37958d
Show file tree

Hide file tree

Showing 72 changed files with 2,447 additions and 909 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,11 +1,13 @@
 {
-  "extends": ["react-app"],
+  "plugins": ["prettier"],
+  "extends": ["react-app", "prettier"],
   "rules": {
     "jsx-a11y/href-no-hash": "off",
-    "array-callback-return": "off"
+    "array-callback-return": "off",
+    "prettier/prettier": "error"
   },
   "globals": {
     "document": true,
-    "window": true,
+    "window": true
   }
 }
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "parser": "flow"
+}
diff --git a/package.json b/package.json
@@ -43,15 +43,25 @@
     "build:lambda": "netlify-lambda build src/lambda",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
+    "precommit": "lint-staged",
+    "format": "prettier --write \"src/**/*.js\"",
     "lint": "eslint src --ext .js"
   },
+  "lint-staged": {
+    "src/**/*.js": ["prettier --write", "git add"]
+  },
   "devDependencies": {
     "babel-eslint": "^8.2.2",
     "eslint": "^4.19.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-config-react-app": "^2.1.0",
     "eslint-plugin-flowtype": "^2.46.1",
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0"
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-react": "^7.7.0",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.1.0",
+    "prettier": "^1.12.1"
   }
 }
diff --git a/src/Root.js b/src/Root.js
@@ -7,7 +7,10 @@ import ReduxThunk from 'redux-thunk';
 import reducers from './reducers';
 import Router from './Router';
 
-const store = createStore(reducers, composeWithDevTools(applyMiddleware(ReduxThunk)));
+const store = createStore(
+  reducers,
+  composeWithDevTools(applyMiddleware(ReduxThunk)),
+);
 
 const Root = () => (
   <Provider store={store}>

diff --git a/src/Router.js b/src/Router.js
@@ -16,7 +16,7 @@ class Router extends Component {
     lang.init({
       lng: 'en',
       debug: process.env.NODE_ENV === 'development',
-      resources
+      resources,
     });
   }
   componentDidMount() {
@@ -40,12 +40,12 @@ Router.contextTypes = {
   router: PropTypes.object.isRequired,
   store: PropTypes.object.isRequired,
   email: PropTypes.string,
-  signup: PropTypes.any
+  signup: PropTypes.any,
 };
 
 export default withRouter(
   connect(null, {
     warningOffline,
-    warningOnline
-  })(Router)
+    warningOnline,
+  })(Router),
 );
diff --git a/src/components/AssetIcon.js b/src/components/AssetIcon.js
@@ -9,15 +9,15 @@ const StyledIcon = styled.img`
   height: ${({ size }) => `${size}px`};
 `;
 
-const buildAssetSourceUrl = (asset) => {
+const buildAssetSourceUrl = asset => {
   if (!asset) return erc20;
   if (asset.toUpperCase() === 'ETH') return eth;
   return `/tokens/images/${asset}.png`;
-}
+};
 
 const AssetIcon = ({ asset, image, size }) => (
   <StyledIcon
-    onError={(event) => (event.target.src = erc20)}
+    onError={event => (event.target.src = erc20)}
     size={size}
     src={image || buildAssetSourceUrl(asset)}
   />
@@ -26,13 +26,13 @@ const AssetIcon = ({ asset, image, size }) => (
 AssetIcon.propTypes = {
   asset: PropTypes.string,
   image: PropTypes.string,
-  size: PropTypes.number
+  size: PropTypes.number,
 };
 
 AssetIcon.defaultProps = {
   asset: null,
   image: '',
-  size: 20
+  size: 20,
 };
 
 export default AssetIcon;
diff --git a/src/components/Blockie.js b/src/components/Blockie.js
@@ -9,15 +9,15 @@ const StyledWrapper = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 3px;
-  overflow:hidden;
+  overflow: hidden;
   & img {
     width: 100%;
   }
 `;
 
 class Blockie extends Component {
   state = {
-    imgUrl: ''
+    imgUrl: '',
   };
   componentDidMount() {
     this.updateBlockie(this.props);
@@ -33,7 +33,7 @@ class Blockie extends Component {
         bgcolor: props.bgcolor,
         size: props.size,
         scale: props.scale,
-        spotcolor: props.spotcolor
+        spotcolor: props.spotcolor,
       })
       .toDataURL();
     this.setState({ imgUrl });
@@ -53,15 +53,15 @@ Blockie.propTypes = {
   bgcolor: PropTypes.string,
   size: PropTypes.number,
   scale: PropTypes.number,
-  spotcolor: PropTypes.string
+  spotcolor: PropTypes.string,
 };
 
 Blockie.defaultProps = {
   color: null,
   bgcolor: null,
   size: null,
   scale: null,
-  spotcolor: null
+  spotcolor: null,
 };
 
 export default Blockie;
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -18,9 +18,12 @@ const StyledButton = styled.button`
   border: none;
   border-style: none;
   box-sizing: border-box;
-  background-color: ${({ outline, color }) => (outline ? 'transparent' : `rgb(${colors[color]})`)};
-  border: ${({ outline, color }) => (outline ? `1px solid rgb(${colors[color]})` : 'none')};
-  color: ${({ outline, color }) => (outline ? `rgb(${colors[color]})` : `rgb(${colors.white})`)};
+  background-color: ${({ outline, color }) =>
+    outline ? 'transparent' : `rgb(${colors[color]})`};
+  border: ${({ outline, color }) =>
+    outline ? `1px solid rgb(${colors[color]})` : 'none'};
+  color: ${({ outline, color }) =>
+    outline ? `rgb(${colors[color]})` : `rgb(${colors.white})`};
   box-shadow: ${({ outline }) => (outline ? 'none' : `${shadows.soft}`)};
   border-radius: 8px;
   font-size: ${fonts.size.h6};
@@ -39,17 +42,33 @@ const StyledButton = styled.button`
 
   @media (hover: hover) {
     &:hover {
-      transform: ${({ disabled }) => !disabled ? 'translateY(-1px)' : 'none'};
-      background-color: ${({ disabled, hoverColor, color }) => !disabled ? hoverColor ? `rgb(${colors[hoverColor]})` : `rgb(${colors[color]})` : `rgb(${colors[color]})`};
-      box-shadow: ${({ disabled, outline }) => (!disabled ? outline ? 'none' : `${shadows.hover}` : `${shadows.soft}`)};
+      transform: ${({ disabled }) => (!disabled ? 'translateY(-1px)' : 'none')};
+      background-color: ${({ disabled, hoverColor, color }) =>
+        !disabled
+          ? hoverColor
+            ? `rgb(${colors[hoverColor]})`
+            : `rgb(${colors[color]})`
+          : `rgb(${colors[color]})`};
+      box-shadow: ${({ disabled, outline }) =>
+        !disabled
+          ? outline
+            ? 'none'
+            : `${shadows.hover}`
+          : `${shadows.soft}`};
     }
   }
 
   &:active {
-    transform: ${({ disabled }) => !disabled ? 'translateY(1px)' : 'none'};
-    background-color: ${({ disabled, activeColor, color }) => !disabled ? activeColor ? `rgb(${colors[activeColor]})` : `rgb(${colors[color]})` : `rgb(${colors[color]})`};
+    transform: ${({ disabled }) => (!disabled ? 'translateY(1px)' : 'none')};
+    background-color: ${({ disabled, activeColor, color }) =>
+      !disabled
+        ? activeColor
+          ? `rgb(${colors[activeColor]})`
+          : `rgb(${colors[color]})`
+        : `rgb(${colors[color]})`};
     box-shadow: ${({ outline }) => (outline ? 'none' : `${shadows.soft}`)};
-    color: ${({ outline, color }) => (outline ? `rgb(${colors[color]})` : `rgba(${colors.whiteTransparent})`)};
+    color: ${({ outline, color }) =>
+      outline ? `rgb(${colors[color]})` : `rgba(${colors.whiteTransparent})`};
 
     & ${StyledIcon} {
       opacity: 0.8;
@@ -93,7 +112,11 @@ const Button = ({
     {...props}
   >
     <StyledIcon />
-    {fetching ? <Loader size={20} color="white" background={color} /> : children}
+    {fetching ? (
+      <Loader size={20} color="white" background={color} />
+    ) : (
+      children
+    )}
   </StyledButton>
 );
 
@@ -107,7 +130,7 @@ Button.propTypes = {
   activeColor: PropTypes.string,
   disabled: PropTypes.bool,
   icon: PropTypes.any,
-  left: PropTypes.bool
+  left: PropTypes.bool,
 };
 
 Button.defaultProps = {
@@ -119,7 +142,7 @@ Button.defaultProps = {
   activeColor: 'darkGrey',
   disabled: false,
   icon: null,
-  left: false
+  left: false,
 };
 
 export default Button;
diff --git a/src/components/ButtonCustom.js b/src/components/ButtonCustom.js
@@ -37,13 +37,15 @@ const StyledButton = styled.button`
 
   &:disabled {
     opacity: 0.6;
-    box-shadow: ${({ outline }) => (outline ? 'none' : `${shadows.soft}`)} !important;
+    box-shadow: ${({ outline }) =>
+      outline ? 'none' : `${shadows.soft}`} !important;
   }
 
   &:active,
   &:focus {
     opacity: 1;
-    box-shadow: ${({ outline }) => (outline ? 'none' : `${shadows.soft}`)} !important;
+    box-shadow: ${({ outline }) =>
+      outline ? 'none' : `${shadows.soft}`} !important;
   }
 
   & ${StyledIconImage} {
@@ -55,7 +57,8 @@ const StyledButton = styled.button`
   @media (hover: hover) {
     &:hover {
       opacity: 0.6;
-      box-shadow: ${({ outline }) => (outline ? 'none' : `${shadows.soft}`)} !important;
+      box-shadow: ${({ outline }) =>
+        outline ? 'none' : `${shadows.soft}`} !important;
     }
   }
 `;
@@ -85,7 +88,11 @@ const Button = ({
     <StyledIconImage>
       <img src={img} alt="icon" />
     </StyledIconImage>
-    {fetching ? <Loader size={20} color={txtColor} background={bgColor} /> : children}
+    {fetching ? (
+      <Loader size={20} color={txtColor} background={bgColor} />
+    ) : (
+      children
+    )}
   </StyledButton>
 );
 
@@ -97,7 +104,7 @@ Button.propTypes = {
   txtColor: PropTypes.string,
   bgColor: PropTypes.string,
   disabled: PropTypes.bool,
-  left: PropTypes.bool
+  left: PropTypes.bool,
 };
 
 Button.defaultProps = {
@@ -106,7 +113,7 @@ Button.defaultProps = {
   txtColor: 'dark',
   bgColor: 'white',
   disabled: false,
-  left: false
+  left: false,
 };
 
 export default Button;
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -68,7 +68,12 @@ const Card = ({
   children,
   ...props
 }) => (
-  <StyledCard allowOverflow={allowOverflow} background={background} maxWidth={maxWidth} {...props}>
+  <StyledCard
+    allowOverflow={allowOverflow}
+    background={background}
+    maxWidth={maxWidth}
+    {...props}
+  >
     <StyledFetching fetching={fetching}>
       <StyledMessage>{fetchingMessage}</StyledMessage>
       <Loader color="darkGrey" background={background} />
@@ -85,7 +90,7 @@ Card.propTypes = {
   allowOverflow: PropTypes.bool,
   fetchingMessage: PropTypes.string,
   background: PropTypes.string,
-  maxWidth: PropTypes.number
+  maxWidth: PropTypes.number,
 };
 
 Card.defaultProps = {
@@ -94,7 +99,7 @@ Card.defaultProps = {
   fetchingMessage: '',
   background: 'white',
   maxWidth: null,
-  minHeight: null
+  minHeight: null,
 };
 
 export default Card;
diff --git a/src/components/ClickOutside.js b/src/components/ClickOutside.js
@@ -4,14 +4,16 @@ import PropTypes from 'prop-types';
 export default class ClickOutside extends Component {
   static propTypes = {
     onClickOutside: PropTypes.func.isRequired,
-  }
+  };
 
   constructor(props) {
     super(props);
     this.isTouch = false;
   }
 
-  handleContainerRef = (ref) => { this.containerRef = ref; }
+  handleContainerRef = ref => {
+    this.containerRef = ref;
+  };
 
   componentDidMount() {
     document.addEventListener('touchend', this.handle, true);
@@ -23,16 +25,20 @@ export default class ClickOutside extends Component {
     document.removeEventListener('click', this.handle, true);
   }
 
-  handle = (event) => {
+  handle = event => {
     if (event.type === 'touchend') this.isTouch = true;
     if (event.type === 'click' && this.isTouch) return;
     const { onClickOutside } = this.props;
     const el = this.containerRef;
     if (!el.contains(event.target)) onClickOutside(event);
-  }
+  };
 
   render() {
     const { children, onClickOutside, ...props } = this.props;
-    return <div {...props} ref={this.handleContainerRef}>{children}</div>;
+    return (
+      <div {...props} ref={this.handleContainerRef}>
+        {children}
+      </div>
+    );
   }
 }