Chore: Add prettier code formatter (#133)

- Follows other UI Kit conventions
- Prettier adheres to eslint rules and adds some additional opinionated formatting
- Added some examples of prettier formatting
- Downgrade sinon to 1.17.7 to fix peer dependency
- Update license in package.json to reflect non-SPDX license

.eslintrc

@@ -1,6 +1,10 @@
 {
     "parser": "babel-eslint",
-    "extends": "airbnb",
+    "extends": [
+        "airbnb",
+        "prettier",
+        "prettier/react"
+    ],
     "env": {
         "es6": true,
         "browser": true,
@@ -25,6 +29,7 @@
         "ActiveXObject": false
     },
     "rules": {
+        "quotes": ["error", "single"],
         "comma-dangle": [2, "never"],
         "indent": [2, 4, {"SwitchCase": 1}],
         "import/imports-first": [0],
@@ -35,7 +40,6 @@
         "no-underscore-dangle": [0],
         "react/jsx-filename-extension": [0],
         "arrow-body-style": [0],
-        "no-mixed-operators": ["error", {"allowSamePrecedence": true}],
         "class-methods-use-this": [0],
         "arrow-parens": ["error", "always"],
         "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],

.vscode/settings.json

@@ -4,5 +4,9 @@
     "typescript.format.enable": false,
     "flow.useNPMPackagedFlow": true,
     "flow.enabled": false,
-    "javascript.validate.enable": false
+    "javascript.validate.enable": false,
+    "prettier.eslintIntegration": true,
+    "prettier.printWidth": 120,
+    "prettier.tabWidth": 4,
+    "prettier.singleQuote": true
 }

package.json

@@ -3,7 +3,7 @@
   "version": "0.124.0",
   "description": "Box Content Preview UI Kit",
   "author": "Box (https://www.box.com/)",
-  "license": "Box Software License Agreement v.05162017",
+  "license": "SEE LICENSE IN LICENSE",
   "repository": {
     "type": "git",
     "url": "[email protected]:box/box-preview.git"
@@ -24,7 +24,7 @@
     "babel-preset-es2016": "^6.22.0",
     "babel-preset-react": "^6.23.0",
     "chai": "^3.5.0",
-    "chai-as-promised": "^5.3.0",
+    "chai-as-promised": "5.3.0",
     "chai-dom": "^1.4.3",
     "conventional-changelog-lint": "^1.1.7",
     "css-loader": "^0.27.3",
@@ -33,6 +33,7 @@
     "es6-promise": "^4.1.0",
     "eslint": "^3.17.1",
     "eslint-config-airbnb": "^14.1.0",
+    "eslint-config-prettier": "^2.1.1",
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-babel": "^4.1.1",
     "eslint-plugin-import": "^2.2.0",
@@ -42,7 +43,7 @@
     "fetch-mock": "^5.9.4",
     "fetch-mock-forwarder": "^1.0.0",
     "file-loader": "^0.10.1",
-    "husky": "^0.13.2",
+    "husky": "^0.13.3",
     "i18n-webpack-plugin": "^0.3.0",
     "isomorphic-fetch": "^2.2.1",
     "karma": "^1.5.0",
@@ -62,6 +63,7 @@
     "karma-sinon-stub-promise": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.3",
+    "lint-staged": "^3.4.2",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
@@ -72,6 +74,8 @@
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "phantomjs-prebuilt": "^2.1.14",
     "postcss-loader": "^1.3.3",
+    "prettier": "^1.3.1",
+    "prettier-eslint-cli": "^4.0.1",
     "query-string": "^4.3.2",
     "rangy": "^1.3.0",
     "raw-loader": "^0.5.1",
@@ -80,8 +84,8 @@
     "react-dom": "^15.4.2",
     "react-virtualized": "^9.3.0",
     "sass-loader": "^6.0.3",
-    "sinon": "^2.0.0",
-    "sinon-chai": "^2.8.0",
+    "sinon": "1.17.7",
+    "sinon-chai": "2.8.0",
     "sinon-stub-promise": "^4.0.0",
     "string-replace-loader": "^1.0.5",
     "style-loader": "^0.14.1",
@@ -101,7 +105,9 @@
     "debug": "NODE_ENV=test ./node_modules/.bin/karma start build/karma.conf.js --no-single-run --auto-watch",
     "dev": "BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack --progress --colors --config build/webpack.config.js",
     "lint": "NODE_ENV=dev ./node_modules/.bin/eslint src/lib && ./node_modules/.bin/stylelint 'src/lib/**/*.scss'",
+    "precommit": "lint-staged",
     "prepush": "yarn run lint",
+    "prettier": "prettier-eslint \"src/lib/**/*.js\" --print-width 120 --single-quote --tab-width 4 --write",
     "prod": "BABEL_ENV=production NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --progress --colors --config build/webpack.config.js",
     "release": "yarn run clean && yarn run build-rb && yarn run lint && yarn run test && yarn run prod",
     "test": "NODE_ENV=test ./node_modules/.bin/karma start build/karma.conf.js",
@@ -110,5 +116,11 @@
     "major": "./build/release.sh -m",
     "minor": "./build/release.sh -n",
     "patch": "./build/release.sh -p"
+  },
+  "lint-staged": {
+    "src/lib/**/*.js": [
+      "prettier-eslint --print-width 120 --single-quote --tab-width 4 --write",
+      "git add"
+    ]
   }
 }