Fix: eslint

.eslintrc

@@ -27,6 +27,7 @@
     "max-len": [1, 120, 2],
     "max-params": [2, 3],
     "no-cond-assign": [2, "except-parens"],
+    "no-mixed-operators": ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}],
     "quote-props": 0,
     "lodash/callback-binding": 2,
     "lodash/chain-style": [2, "as-needed"],

CONTRIBUTING.md

@@ -7,7 +7,7 @@
 
 :100: We strive for 100% test coverage, to run tests locally use `npm run test`.
 
-:do_not_litter: We love lint. It keeps things consistent and protects against human error. Linting will be run automatically after running `npm run test`. You can also run `npm run posttest` on its own. See [commit conventions](#commit-conventions).
+:do_not_litter: We love lint. It keeps things consistent and protects against human error. Linting will be run automatically after running `npm run test`. You can also run `npm run lint` on its own. See [commit conventions](#commit-conventions).
 
 :speech_balloon: Ensure that your effort is aligned with the project's roadmap by talking to the maintainers, especially if you are going to spend a lot of time on it.
 

dist/adslot-ui-main-ugly.js

@@ -8751,6 +8751,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return {};
 	};
 
+	var printPathText = function printPathText(node) {
+	  return (0, _lodash2.default)(node.path).map('label').clone().reverse().join(', ');
+	};
+
+	var printAncestorText = function printAncestorText(node) {
+	  return (0, _lodash2.default)(node.ancestors).map('label').join(', ');
+	};
+
 	var TreePickerNodeComponent = function TreePickerNodeComponent(_ref2) {
 	  var disabled = _ref2.disabled;
 	  var expandNode = _ref2.expandNode;
@@ -8762,18 +8770,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  var selected = _ref2.selected;
 	  var valueFormatter = _ref2.valueFormatter;
 
-
-	  var printPathText = function printPathText(node) {
-	    return (0, _lodash2.default)(node.path).map('label').clone().reverse().join(', ');
-	  };
-	  var printAncestorText = function printAncestorText(node) {
-	    return (0, _lodash2.default)(node.ancestors).map('label').join(', ');
-	  };
-
 	  var pathElement = !(_lodash2.default.isEmpty(node.path) && _lodash2.default.isEmpty(node.ancestors)) ? _react2.default.createElement(
 	    'span',
 	    { className: baseClass + '-path' },
-	    !_lodash2.default.isEmpty(node.path) ? printPathText(node) : printAncestorText(node)
+	    _lodash2.default.isEmpty(node.path) ? printAncestorText(node) : printPathText(node)
 	  ) : null;
 
 	  var includeNodeBound = includeNode.bind(null, node);
@@ -21446,9 +21446,9 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	  _createClass(FilePickerComponent, [{
 	    key: 'onChange',
-	    value: function onChange(event) {
-	      this.setState({ fileName: event.target.files[0].name });
-	      this.props.onSelect(event.target.files[0]);
+	    value: function onChange(changeEvent) {
+	      this.setState({ fileName: changeEvent.target.files[0].name });
+	      this.props.onSelect(changeEvent.target.files[0]);
 	    }
 	  }, {
 	    key: 'removeFile',
@@ -21466,6 +21466,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	      var mainClass = (0, _classnames2.default)(_defineProperty({}, baseClass + '-highlight', this.props.isHighlighted), baseClass, 'input-group');
 	      var fileName = this.state.fileName;
 
+	      var onClickHandler = function onClickHandler() {
+	        _this2.fileInput.click();
+	      };
 
 	      return _react2.default.createElement(
 	        'div',
@@ -21489,17 +21492,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	          ) : null,
 	          !fileName && !this.props.disabled ? _react2.default.createElement(
 	            _Button2.default,
-	            { className: 'btn-inverse', onClick: function onClick() {
-	                return _this2.refs.fileInput.click();
-	              } },
+	            { className: 'btn-inverse', onClick: onClickHandler },
 	            _react2.default.createElement(
 	              'span',
 	              null,
 	              this.props.label
 	            ),
 	            _react2.default.createElement('input', {
 	              className: 'file-input',
-	              ref: 'fileInput',
+	              ref: function ref(inputElementRef) {
+	                _this2.fileInput = inputElementRef;
+	              },
+
 	              type: 'file',
 	              onChange: this.onChange,
 	              accept: this.props.filter,

package.json

@@ -5,21 +5,21 @@
   "main": "dist/adslot-ui-main.js",
   "license": "MIT",
   "scripts": {
-    "check-commit": "node scripts/commit-msg",
     "codecov": "cat coverage/coverage-final.json | codecov",
     "dist": "webpack --bail --env=dist",
     "jscs-fix": "jscs ./src ./test --fix",
     "jscs-lint": "jscs ./src ./test",
-    "lint": "eslint ./src --rulesdir ./src && eslint ./test --rulesdir ./test",
-    "posttest": "npm run lint && npm run sass-lint && npm run jscs-lint && npm run check-commit",
+    "sass-lint": "sass-lint './src/**/*.scss' -v",
+    "eslint": "eslint --ext .jsx,.js --rulesdir ./src ./src && eslint  --ext .jsx,.js --rulesdir ./test ./test",
+    "lint": "npm run eslint && npm run sass-lint && npm run jscs-lint",
     "profile": "webpack --env=dist --profile --json > stats.json",
     "release:major": "npm version major && npm publish && git push --follow-tags",
     "release:minor": "npm version minor && npm publish && git push --follow-tags",
     "release:patch": "npm version patch && npm publish && git push --follow-tags",
-    "sass-lint": "sass-lint './src/**/*.scss' -v",
     "start": "node server.js --env=dev",
     "start:cold": "node server.js --env=dev-cold",
     "test": "karma start",
+    "posttest": "npm run lint",
     "test:watch": "karma start --autoWatch=true --singleRun=false"
   },
   "repository": {

scripts/commit-msg

@@ -31,7 +31,7 @@ function splitCommandResultToLines(result) {
 function checkGitCommit() {
   var commitMsgs, failed;
 
-  echo("Validating commit message…");
+  echo("🔍  Validating commit message.");
 
   commitMsgs = [execSilent("git log -1 --format=format:%s --no-merges")];
 
@@ -42,21 +42,21 @@ function checkGitCommit() {
 
   // Check for more than one commit
   if (commitMsgs.length > 1) {
-    echo(" - More than one commit found, please squash.");
+    echo("💔  More than one commit found, please squash.");
     failed = true;
   }
 
   // Only check non-release messages.
   // Ignore long greenkeeper update messages (chore).
   if (!semver.valid(commitMsgs[0]) && !/^chore/.test(commitMsgs[0]) && !/^Revert /.test(commitMsgs[0])) {
     if (commitMsgs[0].slice(0, commitMsgs[0].indexOf("\n")).length > 72) {
-      echo(" - First line of commit message must not exceed 72 characters");
+      echo("💔  First line of commit message must not exceed 72 characters");
       failed = true;
     }
 
     // Check for tag at start of message
     if (!TAG_REGEX.test(commitMsgs[0])) {
-      echo([" - Commit summary must start with one of:",
+      echo(["💔  Commit summary must start with one of:",
         "    'Fix:'",
         "    'Update:'",
         "    'Breaking:'",

scripts/git-hooks/pre-commit

@@ -12,26 +12,67 @@ then
   fi
 fi
 
-echo "Running git pre-commit hook…"
+echo -e "---------------------------\nRunning git pre-commit hook\n---------------------------"
 
 
 # Protect master from accidental commits.
-echo "  - checking branch isn't 'master';"
+echo "🔍  Checking branch isn't master."
 branchName=$(git branch | grep '*' | sed 's/* //')
 if [ $branchName == 'master' ]
 then
-  echo "Failed, attempting to commit to master. Please create a branch for your work." && exit 1
+  echo "💔  Cannot commit to master, please create a branch." && exit 1
 fi
 
 
 # Run linting and commit check.
-echo "  - linting"
-npm run posttest
+STAGED_SRC_FILES=`git diff --staged --name-only HEAD ./src | grep .*\\.js | grep -v json`; # JS & JSX Files included
+STAGED_TEST_FILES=`git diff --staged --name-only HEAD ./test | grep .*\\.js | grep -v json`; # JS & JSX Files included
+STAGED_SASS_FILES=`git diff --staged --name-only HEAD ./src/styles | grep .*\\.scss`;
+SRC_EXIT_CODE=1;
+TEST_EXIT_CODE=1;
+SASS_EXIT_CODE=1;
+JSCS_EXIT_CODE=1;
+COMMIT_MSG_EXIT_CODE=1;
 
+echo "🔍  Running linting on staged files…";
+echo "    - ESLint Source";
+if [ "$STAGED_SRC_FILES" ]; then
+  eslint --rulesdir ./src $STAGED_SRC_FILES && SRC_EXIT_CODE=0;
+else
+  SRC_EXIT_CODE=0;
+fi
 
-# Compile the distribution from source.
-echo "  - compiling distribution files;"
-npm run -s dist && git add dist/*
+echo "    - ESLint Tests";
+if [ "$STAGED_TEST_FILES" ]; then
+  echo "linting test";
+  eslint --rulesdir ./test $STAGED_TEST_FILES && TEST_EXIT_CODE=0;
+else
+  TEST_EXIT_CODE=0;
+fi
+
+echo "    - SASSLint";
+if [ "$STAGED_SASS_FILES" ]; then
+  sass-lint $STAGED_SASS_FILES -v && SASS_EXIT_CODE=0;
+else
+  SASS_EXIT_CODE=0;
+fi
 
+echo "    - JSCSLint";
+if [ "$STAGED_SRC_FILES" ]; then
+  jscs $STAGED_SRC_FILES $STAGED_TEST_FILES && JSCS_EXIT_CODE=0;
+else
+  JSCS_EXIT_CODE=0;
+fi
+
+if [ $SRC_EXIT_CODE -eq 1 ] || [ $TEST_EXIT_CODE -eq 1 ] || [ $SASS_EXIT_CODE -eq 1 ] || [ $JSCS_EXIT_CODE -eq 1 ]; then
+  echo "💔  Linting failed.";
+  exit 1;
+fi
 
-echo "…done."
+echo "🔍  Checking commit message.";
+node scripts/commit-msg && COMMIT_MSG_EXIT_CODE=0;
+if [ $COMMIT_MSG_EXIT_CODE -eq 1 ]; then exit 1; fi
+
+# Compile the distribution from source.
+echo "🔍  Compiling distribution files."
+npm run -s dist && git add dist/*

src/components/Main.jsx

@@ -212,18 +212,11 @@ class AppComponent extends React.Component {
   }
 
   render() {
-    const baseItem = {
-      label: 'Awesome Product',
-      value: 10000,
-    };
-
-    const valueFormatter = (value) => `$${Math.round(value) / 100}`;
-
     const labelFormatter = (item) => `${item.givenName} ${item.surname}`;
 
     const addonFormatter = () => (<Checkbox />);
 
-    const nodeRenderer = (value) => (<Checkbox label={value.label}/>);
+    const nodeRenderer = (value) => (<Checkbox label={value.label} />);
 
     const avatarColor = () => 'cyan';
 
@@ -258,37 +251,6 @@ class AppComponent extends React.Component {
     };
 
     const emptySvgSymbol = { href: '/assets/svg-symbols.svg#checklist-incomplete' };
-    const svgSymbol = { href: '/assets/svg-symbols.svg#list' };
-
-    const rootTypes = [
-      {
-        label: 'Geography',
-        id: '0',
-        svgSymbol,
-        emptySvgSymbol,
-        isRequired: true,
-      },
-      { label: 'Gender', id: '1', svgSymbol, isRequired: false },
-      { label: 'Age', id: '2', svgSymbol, isRequired: false },
-    ];
-
-    const auPath = [{ id: '10', label: 'AU' }];
-
-    const actNode =
-      { id: '0', label: 'Australian Capital Territory', type: 'State', path: auPath, rootTypeId: '0' };
-
-    const ntNode = {
-      id: '1',
-      isExpandable: true,
-      label: 'Northern Territory',
-      path: auPath,
-      rootTypeId: '0',
-      type: 'State',
-      value: 500,
-    };
-
-    const qldNode =
-      { id: '2', label: 'Queensland', type: 'State', path: auPath, value: 500, rootTypeId: '0', isExpandable: true };
 
     return (
       <div className="index">
@@ -360,7 +322,7 @@ class AppComponent extends React.Component {
         </div>
 
         <div className="btn-panel">
-          <a className="btn btn-inverse" href="#">Anchor</a>
+          <a className="btn btn-inverse" href="#top">Anchor</a>
           <span className="btn btn-inverse btn-primary">Span</span>
           <div className="btn btn-inverse btn-success">Div</div>
         </div>

src/components/adslotUi/FilePickerComponent.jsx

@@ -14,9 +14,9 @@ class FilePickerComponent extends React.Component {
     this.removeFile = this.removeFile.bind(this);
   }
 
-  onChange(event) {
-    this.setState({ fileName: event.target.files[0].name });
-    this.props.onSelect(event.target.files[0]);
+  onChange(changeEvent) {
+    this.setState({ fileName: changeEvent.target.files[0].name });
+    this.props.onSelect(changeEvent.target.files[0]);
   }
 
   removeFile() {
@@ -27,6 +27,9 @@ class FilePickerComponent extends React.Component {
   render() {
     const mainClass = classNames({ [`${baseClass}-highlight`]: this.props.isHighlighted }, baseClass, 'input-group');
     const { fileName } = this.state;
+    const onClickHandler = () => {
+      this.fileInput.click();
+    };
 
     return (
       <div className={mainClass}>
@@ -42,18 +45,23 @@ class FilePickerComponent extends React.Component {
         <div className="input-group-btn">
           {fileName ? <Button className="remove-file" onClick={this.removeFile}>×</Button> : null}
           {!fileName && !this.props.disabled ?
-            <Button className="btn-inverse" onClick={() => this.refs.fileInput.click()}>
+            <Button className="btn-inverse" onClick={onClickHandler}>
               <span>{this.props.label}</span>
               <input
                 className="file-input"
-                ref="fileInput"
+                ref={
+                  (inputElementRef) => { this.fileInput = inputElementRef; }
+                }
+
                 type="file"
                 onChange={this.onChange}
                 accept={this.props.filter}
                 data-test-selector={this.props.dts}
               />
-            </Button> :
-            <Button bsStyle="primary" disabled>{this.props.label}</Button>}
+            </Button>
+          :
+            <Button bsStyle="primary" disabled>{this.props.label}</Button>
+          }
         </div>
       </div>
     );

src/components/adslotUi/ListPickerComponent.jsx

@@ -97,7 +97,8 @@ class ListPickerComponent extends React.Component {
         <Modal.Body>
           {props.modalDescription ? <p>{props.modalDescription}</p> : null}
           {_.isEmpty(props.itemInfo) ?
-            <div className="listpicker-component-body">{listPickerPureElement}</div> :
+            <div className="listpicker-component-body">{listPickerPureElement}</div>
+          :
             <div className="listpicker-component-body-split">
               <SplitPane dts={_.kebabCase(props.itemInfo.label)}>
                 <Grid>