Chore: Upgrade packages and remove unnecessary dependencies (#410)

- Upgrades to React 16
- Removes react-addons-shallow-compare
- autobind-decorator is not upgraded to latest due to incompatibility
- chai/sinon are not upgraded to latest due to testing incompatibilities

.stylelintrc

@@ -1,9 +1,13 @@
 {
     "extends": "stylelint-config-standard",
-    "plugins": ["stylelint-order"],
+    "plugins": [
+        "stylelint-order",
+        "stylelint-scss"
+    ],
     "rules": {
         "indentation": 4,
         "at-rule-no-vendor-prefix": true,
+        "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin"] }],
         "media-feature-name-no-vendor-prefix": true,
         "property-no-vendor-prefix": true,
         "selector-no-vendor-prefix": true,

README.md

@@ -318,14 +318,14 @@ For more script commands see `package.json`. Test coverage reports are available
 ### Config files
 
 * .babelrc - https://babeljs.io/docs/usage/babelrc/
-* .conventional-changelog-lintrc - https://github.com/marionebl/conventional-changelog-lint
 * .editorconfig - http://editorconfig.org/
 * .eslintignore - http://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories
 * .eslintrc - http://eslint.org/docs/user-guide/configuring
 * .gitignore - https://git-scm.com/docs/gitignore
 * .stylelintrc - https://stylelint.io/user-guide/configuration/
 * .travis.yml - https://docs.travis-ci.com/user/customizing-the-build
 * browserslist - https://github.com/ai/browserslist
+* commitlint.config.js - https://github.com/marionebl/commitlint
 * postcss.config.js - https://github.com/postcss/postcss-loader
 
 Support

.conventional-changelog-lintrc → commitlint.config.js

@@ -1,5 +1,5 @@
-{
-    "rules": {
+module.exports = {
+    rules: {
         "body-leading-blank": [
             2,
             "always"
@@ -67,4 +67,4 @@
             0
         ]
     }
-}
+};

package.json

@@ -9,16 +9,17 @@
     "url": "git@github.com:box/box-content-preview.git"
   },
   "devDependencies": {
+    "@commitlint/cli": "^3.2.0",
     "autobind-decorator": "^1.3.4",
-    "autoprefixer": "^6.7.7",
+    "autoprefixer": "^7.1.4",
     "babel-core": "^6.25.0",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.4.1",
+    "babel-eslint": "^8.0.1",
+    "babel-loader": "^7.1.2",
     "babel-plugin-istanbul": "^4.1.4",
     "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-plugin-transform-require-ignore": "0.1.0",
+    "babel-plugin-transform-require-ignore": "0.1.1",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.24.0",
     "babel-preset-es2016": "^6.22.0",
@@ -27,24 +28,24 @@
     "chai-as-promised": "5.3.0",
     "chai-dom": "^1.5.0",
     "conventional-changelog-cli": "^1.3.2",
-    "conventional-changelog-lint": "^1.1.7",
     "conventional-github-releaser": "^1.1.12",
-    "css-loader": "^0.27.3",
+    "create-react-class": "^15.6.2",
+    "css-loader": "^0.28.7",
     "cssnano-cli": "^1.0.5",
     "deepmerge": "^1.5.0",
-    "eslint": "^3.17.1",
-    "eslint-config-airbnb": "^14.1.0",
-    "eslint-config-prettier": "^2.3.0",
+    "eslint": "^4.7.2",
+    "eslint-config-airbnb": "^15.1.0",
+    "eslint-config-prettier": "^2.6.0",
     "eslint-import-resolver-webpack": "^0.8.3",
     "eslint-plugin-babel": "^4.1.1",
     "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.10.0",
-    "extract-text-webpack-plugin": "2.1.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.4.0",
+    "extract-text-webpack-plugin": "3.0.0",
     "fetch-mock": "^5.12.1",
     "fetch-mock-forwarder": "^1.0.0",
-    "file-loader": "^0.10.1",
-    "husky": "^0.13.4",
+    "file-loader": "^0.11.2",
+    "husky": "^0.14.3",
     "i18n-webpack-plugin": "^1.0.0",
     "jsuri": "^1.3.1",
     "karma": "^1.5.0",
@@ -64,7 +65,7 @@
     "karma-sinon-stub-promise": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.4",
-    "lint-staged": "^3.4.2",
+    "lint-staged": "^4.2.3",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
@@ -73,29 +74,29 @@
     "mojito-rb-gen": "^0.0.1",
     "node-noop": "^1.0.0",
     "node-sass": "^4.5.0",
-    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
     "phantomjs-prebuilt": "^2.1.14",
-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^2.0.6",
     "prettier": "^1.5.3",
     "prettier-eslint-cli": "^4.1.1",
     "rangy": "^1.3.0",
     "raw-loader": "^0.5.1",
     "rbush": "^2.0.1",
-    "react": "^15.6.1",
-    "react-addons-shallow-compare": "^15.6.0",
-    "react-dom": "^15.6.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "react-virtualized": "^9.9.0",
     "sass-loader": "^6.0.6",
     "selenium-webdriver": "^3.5.0",
-    "sinon": "1.17.7",
-    "sinon-chai": "2.8.0",
+    "sinon": "^1.17.7",
+    "sinon-chai": "2.13.0",
     "sinon-stub-promise": "^4.0.0",
     "string-replace-loader": "^1.3.0",
-    "style-loader": "^0.14.1",
-    "stylelint": "^7.9.0",
-    "stylelint-config-standard": "^16.0.0",
-    "stylelint-order": "^0.4.1",
-    "webpack": "^2.2.1",
+    "style-loader": "^0.18.2",
+    "stylelint": "^8.1.1",
+    "stylelint-config-standard": "^17.0.0",
+    "stylelint-order": "^0.7.0",
+    "stylelint-scss": "^2.1.0",
+    "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.8.3",
     "whatwg-fetch": "^2.0.3"
   },
@@ -105,7 +106,7 @@
     "build-rb": "mojito-rb-gen -s src/i18n -o src/i18n/json -b en-US.properties",
     "ci": "yarn run clean && yarn run build-rb && yarn run lint && yarn run test && yarn run build-ci && yarn run functional-tests-ci",
     "clean": "rm -rf dist && rm -rf reports/coverage && rm -rf src/i18n/json",
-    "commitmsg": "conventional-changelog-lint -e",
+    "commitmsg": "commitlint -e",
     "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",
     "functional-tests": "python -m SimpleHTTPServer 8000 & node ./node_modules/mocha/bin/mocha --recursive ./functional-tests/ --timeout 10000 ; killall python -m SimpleHTTPServer 8000",

src/lib/annotations/AnnotationDialog.js

@@ -505,8 +505,8 @@ class AnnotationDialog extends EventEmitter {
             </div>
             <div class="comment-text">${text}</div>
             <button class="bp-btn-plain ${CLASS_BUTTON_DELETE_COMMENT} ${annotation.permissions.can_delete
-            ? ''
-            : constants.CLASS_HIDDEN}" data-type="${constants.DATA_TYPE_DELETE}" title="${__('annotation_delete')}">
+    ? ''
+    : constants.CLASS_HIDDEN}" data-type="${constants.DATA_TYPE_DELETE}" title="${__('annotation_delete')}">
                 ${ICON_DELETE}
             </button>
             <div class="${CLASS_DELETE_CONFIRMATION} ${constants.CLASS_HIDDEN}">
@@ -685,8 +685,8 @@ class AnnotationDialog extends EventEmitter {
                 <div class="${CLASS_REPLY_CONTAINER}">
                     <textarea class="${constants.CLASS_TEXTAREA} ${CLASS_REPLY_TEXTAREA}"
                         placeholder="${__(
-                            'annotation_reply_placeholder'
-                        )}" data-type="${constants.DATA_TYPE_REPLY_TEXTAREA}"></textarea>
+        'annotation_reply_placeholder'
+    )}" data-type="${constants.DATA_TYPE_REPLY_TEXTAREA}"></textarea>
                     <div class="${constants.CLASS_BUTTON_CONTAINER} ${constants.CLASS_HIDDEN}">
                         <button class="bp-btn ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}" data-type="${constants.DATA_TYPE_CANCEL_REPLY}">
                             ${__('annotation_cancel')}

src/lib/viewers/box3d/Box3DViewer.js

@@ -30,7 +30,6 @@ const CLASS_VR_ENABLED = 'vr-enabled';
 /**
  * Box3DViewer
  * This is the entry point for Box3D Preview Base
- * @class
  */
 @autobind
 class Box3DViewer extends BaseViewer {

src/lib/viewers/box3d/model3d/Model3DControls.js

@@ -24,7 +24,6 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from
  * Model3dControls
  * This class handles the UI for 3d preview controls. This includes Reset,
  * Render Mode selection, VR and fullscreen buttons.
- * @class
  */
 @autobind
 class Model3DControls extends Box3DControls {

src/lib/viewers/box3d/model3d/Model3DViewer.js

@@ -27,7 +27,6 @@ const LOAD_TIMEOUT = 180000; // 3 minutes
 /**
  * Model3d
  * This is the entry point for the model3d preview.
- * @class
  */
 @autobind
 class Model3DViewer extends Box3DViewer {

src/lib/viewers/text/__tests__/CSVViewer-test.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
+import createReactClass from 'create-react-class';
 import CSVViewer from '../CSVViewer';
 import TextBaseViewer from '../TextBaseViewer';
 import BaseViewer from '../../BaseViewer';
@@ -153,8 +154,7 @@ describe('lib/viewers/text/CSVViewer', () => {
 
     describe('finishLoading()', () => {
         it('should render CSV and finish setting up UI', () => {
-            /* eslint-disable react/prefer-es6-class */
-            window.BoxCSV = React.createClass({
+            window.BoxCSV = createReactClass({
                 destroy: sandbox.stub(),
                 renderCSV: sandbox.mock(),
                 render: () => {