Add prettier

.eslintrc

@@ -1,6 +1,6 @@
 {
   "parser": "babel-eslint",
-  "extends": "airbnb",
+  "extends": ["airbnb", "prettier"],
   "env": {
     "browser": true,
   },

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

package.json

@@ -6,7 +6,11 @@
   "scripts": {
     "start": "node ./webpack/server.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,json,css,md}": ["prettier --write", "git add"]
   },
   "author": "Boyd Dames",
   "license": "MIT",
@@ -40,14 +44,18 @@
     "css-loader": "0.26.1",
     "eslint": "3.15.0",
     "eslint-config-airbnb": "11.2.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-import-resolver-webpack": "0.8.1",
     "eslint-loader": "1.6.1",
     "eslint-plugin-import": "1.16.0",
     "eslint-plugin-jsx-a11y": "2.2.2",
     "eslint-plugin-react": "6.9.0",
     "html-webpack-plugin": "2.28.0",
+    "husky": "^0.14.3",
+    "lint-staged": "^6.1.1",
     "node-sass": "4.5.0",
     "postcss-loader": "1.3.0",
+    "prettier": "1.10.2",
     "redux-devtools": "3.3.2",
     "redux-devtools-dock-monitor": "1.1.1",
     "redux-devtools-log-monitor": "1.2.0",

src/app.js

@@ -3,11 +3,7 @@ import ReactDOM from 'react-dom';
 import socketClient from 'socket.io-client';
 
 import configureStore from 'redux/configureStore';
-import {
-  dispatchNewGameAction,
-  dispatchServerActions,
-  getInitialState,
-} from 'redux/utils';
+import { dispatchNewGameAction, dispatchServerActions, getInitialState } from 'redux/utils';
 
 import { Root } from './containers';
 import './styles/app.scss';
@@ -21,7 +17,4 @@ const store = configureStore(getInitialState(), socket);
 dispatchServerActions(store, socket);
 dispatchNewGameAction(store, socket);
 
-ReactDOM.render(
-  <Root store={store} socket={socket} />,
-  document.getElementById('app')
-);
+ReactDOM.render(<Root store={store} socket={socket} />, document.getElementById('app'));

src/components/BoardSide/BoardSide.js

@@ -1,11 +1,7 @@
 import React, { PropTypes } from 'react';
 import styles from './BoardSide.scss';
 
-const BoardSide = ({ children }) => (
-  <div className={styles.BoardSide}>
-    { children }
-  </div>
-);
+const BoardSide = ({ children }) => <div className={styles.BoardSide}>{children}</div>;
 
 BoardSide.propTypes = {
   children: PropTypes.node.isRequired,

src/components/Card/Card.js

@@ -13,14 +13,11 @@ const Card = ({ card, className, isDragging }) => {
 
   return (
     <div className={cardClass}>
-      <div
-        className={styles.CardPortrait}
-        style={{ backgroundImage: `url(${portrait})` }}
-      />
-      <div className={styles.CardMana}>{ mana || 0 }</div>
-      <h1 className={styles.CardName}>{ name }</h1>
-      { attack ? <div className={styles.CardAttack}>{ attack }</div> : null }
-      { defense ? <div className={styles.CardDefense}>{ defense }</div> : null }
+      <div className={styles.CardPortrait} style={{ backgroundImage: `url(${portrait})` }} />
+      <div className={styles.CardMana}>{mana || 0}</div>
+      <h1 className={styles.CardName}>{name}</h1>
+      {attack ? <div className={styles.CardAttack}>{attack}</div> : null}
+      {defense ? <div className={styles.CardDefense}>{defense}</div> : null}
     </div>
   );
 };

src/components/FormInput/FormInput.js

@@ -8,12 +8,12 @@ import formStyles from 'styles/base/forms.scss';
 //
 // eslint-disable-next-line react/prefer-stateless-function
 class FormInput extends Component {
-  handleRef = refHandler => (node) => {
+  handleRef = refHandler => node => {
     if (refHandler) {
       this.node = node;
       refHandler(node);
     }
-  }
+  };
 
   render() {
     const { base, isGrouped, full, inputRef, ...rest } = this.props;
@@ -23,13 +23,7 @@ class FormInput extends Component {
       [formStyles['input--full']]: full,
     });
 
-    return (
-      <input
-        {...rest}
-        ref={this.handleRef(inputRef)}
-        className={inputStyles}
-      />
-    );
+    return <input {...rest} ref={this.handleRef(inputRef)} className={inputStyles} />;
   }
 }
 

src/components/FormInputGroup/FormInputGroup.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import formStyles from 'styles/base/forms.scss';
 
-const FormGroup = (props) => {
+const FormGroup = props => {
   const inputGroupStyles = classNames(
     formStyles.input,
     formStyles['input--group'],
@@ -14,10 +14,7 @@ const FormGroup = (props) => {
 };
 
 FormGroup.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
 };
 
 export default FormGroup;

src/components/Hand/Hand.js

@@ -15,7 +15,7 @@ const Hand = ({ yourTurn, spendableMana, cards }) => {
   const cardList = cards.map((card, index) => {
     const cardClasses = classNames(cardStyles.CardYours, {
       [cardStyles[`CardTotal-${cardsLength}`]]: cardsLength,
-      [cardStyles[`CardNumber-${index + 1}-of-${cardsLength}`]]: (typeof index !== 'undefined'),
+      [cardStyles[`CardNumber-${index + 1}-of-${cardsLength}`]]: typeof index !== 'undefined',
     });
     const canDrag = yourTurn && hasEnoughMana(card, spendableMana);
 
@@ -30,11 +30,7 @@ const Hand = ({ yourTurn, spendableMana, cards }) => {
     );
   });
 
-  return (
-    <div className={styles.Hand}>
-      { cardList }
-    </div>
-  );
+  return <div className={styles.Hand}>{cardList}</div>;
 };
 
 Hand.propTypes = {

src/components/Hero/Hero.js

@@ -7,11 +7,7 @@ const styles = {
   borderRadius: '5px',
 };
 
-const Hero = ({ health }) => (
-  <div style={styles}>
-    { health }
-  </div>
-);
+const Hero = ({ health }) => <div style={styles}>{health}</div>;
 
 Hero.propTypes = {
   health: PropTypes.number.isRequired,

src/components/InvitePlayerModal/InvitePlayerModal.js

@@ -8,16 +8,16 @@ class InvitePlayerModal extends Component {
 
     inviteLinkInput.focus();
     inviteLinkInput.setSelectionRange(0, inviteLinkInput.value.length);
-  }
+  };
 
   copy = () => {
     document.execCommand('copy');
-  }
+  };
 
   selectAndCopy = () => {
     this.select();
     this.copy();
-  }
+  };
 
   render() {
     const { inviteLink, isOpen, onClose } = this.props;
@@ -35,14 +35,16 @@ class InvitePlayerModal extends Component {
         <FormInputGroup>
           <FormInput
             type="text"
-            inputRef={(input) => { this.inviteLinkInput = input; }}
+            inputRef={input => {
+              this.inviteLinkInput = input;
+            }}
             value={inviteLink}
             onClick={this.select}
-            full isGrouped readOnly
+            full
+            isGrouped
+            readOnly
           />
-          <button onClick={this.selectAndCopy}>
-            Copy
-          </button>
+          <button onClick={this.selectAndCopy}>Copy</button>
         </FormInputGroup>
       </Modal>
     );

src/components/Minion/Minion.js

@@ -11,12 +11,8 @@ const Minion = ({ card: { attack, defense, portrait }, exhausted }) => {
 
   return (
     <div className={minionStyles} style={{ backgroundImage: `url(${portrait})` }}>
-      <div className={classNames(styles.MinionStat, styles.MinionAttack)}>
-        { attack || 0 }
-      </div>
-      <div className={classNames(styles.MinionStat, styles.MinionDefense)}>
-        { defense || 0 }
-      </div>
+      <div className={classNames(styles.MinionStat, styles.MinionAttack)}>{attack || 0}</div>
+      <div className={classNames(styles.MinionStat, styles.MinionDefense)}>{defense || 0}</div>
     </div>
   );
 };

src/components/MinionsOnBoard/MinionsOnBoard.js

@@ -1,11 +1,7 @@
 import React, { PropTypes } from 'react';
 import styles from './MinionsOnBoard.scss';
 
-const MinionsOnBoard = ({ children }) => (
-  <div className={styles.MinionsOnBoard}>
-    { children }
-  </div>
-);
+const MinionsOnBoard = ({ children }) => <div className={styles.MinionsOnBoard}>{children}</div>;
 
 MinionsOnBoard.propTypes = {
   children: PropTypes.node.isRequired,

src/components/Modal/Modal.js

@@ -14,7 +14,7 @@ const Modal = ({ children, size = '90%', ...rest }) => (
     }}
     {...rest}
   >
-    { children }
+    {children}
   </ReactModal>
 );
 

src/components/Opponent/Opponent.js

@@ -15,16 +15,14 @@ const Opponent = ({ name, character, handCount, board, actions }) => {
   return (
     <div className={styles.Opponent}>
       <h1 className={styles.OpponentName}>
-        { name || 'Unnamed' } - Mana: { mana.spendableMana }/{ mana.max } and Health: { health }
+        {name || 'Unnamed'} - Mana: {mana.spendableMana}/{mana.max} and Health: {health}
         <TargetableHero ownedBy="OPPONENT" health={health} hitFace={actions.hitFace} />
       </h1>
       <div className={styles.OpponentHandWrapper}>
         <OpponentHand handCount={handCount} />
       </div>
       <BoardSide>
-        <MinionsOnBoard>
-          { minions }
-        </MinionsOnBoard>
+        <MinionsOnBoard>{minions}</MinionsOnBoard>
       </BoardSide>
     </div>
   );

src/components/OpponentHand/OpponentHand.js

@@ -10,11 +10,7 @@ const OpponentHand = ({ handCount }) => {
     <CardBack key={index} margin={margin} className={cardStyles.CardOpponent} />
   ));
 
-  return (
-    <div className={styles.Hand}>
-      { cardList }
-    </div>
-  );
+  return <div className={styles.Hand}>{cardList}</div>;
 };
 
 OpponentHand.propTypes = {

src/components/Player/Player.js

@@ -22,7 +22,7 @@ const Player = ({ name, character, hand, board, exhaustedMinionIds, yourTurn, ac
         />
       </BoardSide>
       <h1 className={styles.PlayerName}>
-        { name || 'Unnamed' } - Mana: { mana.spendableMana }/{ mana.max } and Health: { health }
+        {name || 'Unnamed'} - Mana: {mana.spendableMana}/{mana.max} and Health: {health}
         <TargetableHero ownedBy="PLAYER" health={health} hitFace={actions.hitFace} />
       </h1>
       <div className={styles.PlayerHandWrapper}>

src/components/PlayerCard/PlayerCard.js

@@ -1,17 +1,12 @@
 import React, { PropTypes } from 'react';
 import styles from './PlayerCard.scss';
 
-const PlayerCard = ({
-  playerName,
-  ready = false,
-  button = null,
-  showReady = true,
-}) => (
+const PlayerCard = ({ playerName, ready = false, button = null, showReady = true }) => (
   <section className={styles.PlayerCard}>
     <div className={styles.PlayerCardAvatar} />
-    <h1 className={styles.PlayerCardName}>{ playerName }</h1>
-    <div>{ showReady && (ready ? 'Ready' : 'Not ready') }</div>
-    { button && button }
+    <h1 className={styles.PlayerCardName}>{playerName}</h1>
+    <div>{showReady && (ready ? 'Ready' : 'Not ready')}</div>
+    {button && button}
   </section>
 );
 

src/components/PlayerSide/PlayerSide.js

@@ -2,11 +2,7 @@ import React, { PropTypes } from 'react';
 
 import styles from './PlayerSide.scss';
 
-const PlayerSide = ({ children }) => (
-  <div className={styles.PlayerSide}>
-    { children }
-  </div>
-);
+const PlayerSide = ({ children }) => <div className={styles.PlayerSide}>{children}</div>;
 
 PlayerSide.propTypes = {
   children: PropTypes.element.isRequired,

src/containers/App/App.js

@@ -1,11 +1,7 @@
 import React, { PropTypes } from 'react';
 import sharedStyles from 'components/shared/styles.scss';
 
-const App = ({ children }) => (
-  <div className={sharedStyles.fullSize}>
-    { children }
-  </div>
-);
+const App = ({ children }) => <div className={sharedStyles.fullSize}>{children}</div>;
 
 App.propTypes = {
   children: PropTypes.node,

src/containers/Board/Board.js

@@ -21,7 +21,9 @@ export const Board = ({ yourTurn, player, opponent, actions }) => (
     <PlayerSide>
       <Player {...player} yourTurn={yourTurn} actions={actions} />
     </PlayerSide>
-    <button onClick={actions.endTurn} disabled={!yourTurn}>End turn</button>
+    <button onClick={actions.endTurn} disabled={!yourTurn}>
+      End turn
+    </button>
   </div>
 );
 
@@ -56,16 +58,18 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  actions: bindActionCreators({
-    playCardWithCost,
-    drawCard,
-    hitFace,
-    attackMinion,
-    endTurn,
-  }, dispatch),
+  actions: bindActionCreators(
+    {
+      playCardWithCost,
+      drawCard,
+      hitFace,
+      attackMinion,
+      endTurn,
+    },
+    dispatch
+  ),
 });
 
-export default compose(
-  dragDropContext(HTML5Backend),
-  connect(mapStateToProps, mapDispatchToProps),
-)(Board);
+export default compose(dragDropContext(HTML5Backend), connect(mapStateToProps, mapDispatchToProps))(
+  Board
+);