chore(deps): Upgrade @box/frontend and related dev dependencies (#1135)

box · Dec 23, 2019 · b3bc23f · b3bc23f
1 parent f99bf5a
commit b3bc23f
Show file tree

Hide file tree

Showing 19 changed files with 894 additions and 761 deletions.
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+    '*.js': ['eslint --fix', 'git add'],
+    '*.json': ['prettier --write --parser=json', 'git add'],
+    '*.html': ['prettier --write --parser=html', 'git add'],
+    '*.md': ['prettier --write --parser=markdown', 'git add'],
+    '*.scss': ['prettier --write --parser=scss', 'stylelint --syntax scss --fix', 'git add'],
+};
diff --git a/package.json b/package.json
@@ -14,11 +14,13 @@
         "@babel/plugin-transform-object-assign": "^7.2.0",
         "@babel/preset-env": "^7.5.5",
         "@babel/preset-react": "^7.0.0",
-        "@box/frontend": "^4.0.0",
+        "@box/frontend": "^6.0.0",
         "@box/languages": "^1.0.0",
-        "@commitlint/cli": "^8.1.0",
-        "@commitlint/config-conventional": "8.1.0",
-        "@commitlint/travis-cli": "^8.1.0",
+        "@commitlint/cli": "^8.2.0",
+        "@commitlint/config-conventional": "^8.2.0",
+        "@commitlint/travis-cli": "^8.2.0",
+        "@typescript-eslint/eslint-plugin": "^2.13.0",
+        "@typescript-eslint/parser": "^2.13.0",
         "autoprefixer": "^9.6.1",
         "axios": "^0.19.0",
         "babel-eslint": "^10.0.3",
@@ -30,32 +32,33 @@
         "box-ui-elements": "^11.1.0-beta.18",
         "chai": "^4.2.0",
         "chai-dom": "^1.8.1",
-        "conventional-changelog-cli": "^2.0.23",
+        "conventional-changelog-cli": "^2.0.28",
         "conventional-github-releaser": "^3.1.3",
         "create-react-class": "^15.6.2",
         "css-loader": "^3.1.0",
         "cssnano-cli": "^1.0.5",
         "cypress": "^3.4.1",
         "enzyme": "^3.10.0",
         "enzyme-adapter-react-16": "^1.15.1",
-        "eslint": "^6.3.0",
+        "eslint": "^6.7.2",
         "eslint-config-airbnb": "^18.0.1",
-        "eslint-config-prettier": "^6.2.0",
+        "eslint-config-prettier": "^6.7.0",
         "eslint-import-resolver-webpack": "^0.11.1",
-        "eslint-plugin-babel": "^5.2.0",
+        "eslint-plugin-babel": "^5.3.0",
         "eslint-plugin-chai-friendly": "^0.4.1",
-        "eslint-plugin-cypress": "^2.6.1",
-        "eslint-plugin-flowtype": "^4.3.0",
-        "eslint-plugin-import": "^2.18.2",
-        "eslint-plugin-jest": "^22.16.0",
+        "eslint-plugin-cypress": "^2.8.1",
+        "eslint-plugin-flowtype": "^4.5.2",
+        "eslint-plugin-formatjs": "^1.5.4",
+        "eslint-plugin-import": "^2.19.1",
+        "eslint-plugin-jest": "^23.1.1",
         "eslint-plugin-jsx-a11y": "^6.2.3",
         "eslint-plugin-lodash": "^6.0.0",
-        "eslint-plugin-prettier": "^3.1.0",
-        "eslint-plugin-react": "^7.14.3",
+        "eslint-plugin-prettier": "^3.1.2",
+        "eslint-plugin-react": "^7.17.0",
         "eslint-plugin-react-hooks": "^1.7.0",
         "file-loader": "^4.1.0",
         "fscreen": "^1.0.2",
-        "husky": "^3.0.5",
+        "husky": "^3.1.0",
         "i18n-webpack-plugin": "^1.0.0",
         "jsuri": "^1.3.1",
         "karma": "^4.3.0",
@@ -73,7 +76,7 @@
         "karma-sinon-chai": "^2.0.2",
         "karma-sourcemap-loader": "^0.3.7",
         "karma-webpack": "^4.0.2",
-        "lint-staged": "^9.2.5",
+        "lint-staged": "^9.5.0",
         "lodash": "^4.17.15",
         "mini-css-extract-plugin": "^0.8.0",
         "mocha": "^6.2.0",
@@ -86,8 +89,7 @@
         "phantomjs-prebuilt": "^2.1.16",
         "postcss-loader": "^3.0.0",
         "postcss-sass": "^0.4.1",
-        "prettier": "^1.14.2",
-        "prettier-eslint-cli": "^5.0.0",
+        "prettier": "^1.19.1",
         "raw-loader": "^3.1.0",
         "react": "^16.7.0",
         "react-dom": "^16.7.0",
@@ -99,10 +101,11 @@
         "sinon-chai": "3.3.0",
         "string-replace-loader": "^2.2.0",
         "style-loader": "^0.23.1",
-        "stylelint": "^10.1.0",
+        "stylelint": "^12.0.0",
         "stylelint-config-rational-order": "^0.1.2",
-        "stylelint-config-standard": "^18.2.0",
-        "stylelint-order": "^3.1.0",
+        "stylelint-config-standard": "^19.0.0",
+        "stylelint-order": "^3.1.1",
+        "typescript": "^3.7.4",
         "uglifyjs-webpack-plugin": "^2.1.3",
         "wait-on": "^3.2.0",
         "webpack": "^4.36.1",
@@ -149,13 +152,6 @@
         "last 2 iOS versions",
         "IE 11"
     ],
-    "lint-staged": {
-        "*.js": ["eslint --fix", "git add"],
-        "*.json": ["prettier --write --parser=json", "git add"],
-        "*.html": ["prettier --write --parser=html", "git add"],
-        "*.md": ["prettier --write --parser=markdown", "git add"],
-        "*.scss": ["prettier --write --parser=scss", "stylelint --syntax scss --fix", "git add"]
-    },
     "husky": {
         "hooks": {
             "pre-commit": "lint-staged",

diff --git a/src/lib/__tests__/file-test.js b/src/lib/__tests__/file-test.js
@@ -346,20 +346,23 @@ describe('lib/file', () => {
     });
 
     describe('shouldDownloadWM()', () => {
-        [[false, false, false], [false, true, false], [true, true, true], [true, false, false]].forEach(
-            ([downloadWM, isFileWatermarked, expected]) => {
-                it('should return whether we should download the watermarked representation or original file', () => {
-                    const previewOptions = { downloadWM };
-                    const file = {
-                        watermark_info: {
-                            is_watermarked: isFileWatermarked,
-                        },
-                    };
-
-                    expect(shouldDownloadWM(file, previewOptions)).to.equal(expected);
-                });
-            },
-        );
+        [
+            [false, false, false],
+            [false, true, false],
+            [true, true, true],
+            [true, false, false],
+        ].forEach(([downloadWM, isFileWatermarked, expected]) => {
+            it('should return whether we should download the watermarked representation or original file', () => {
+                const previewOptions = { downloadWM };
+                const file = {
+                    watermark_info: {
+                        is_watermarked: isFileWatermarked,
+                    },
+                };
+
+                expect(shouldDownloadWM(file, previewOptions)).to.equal(expected);
+            });
+        });
     });
 
     describe('canDownload()', () => {

diff --git a/src/lib/__tests__/util-test.js b/src/lib/__tests__/util-test.js
@@ -699,13 +699,15 @@ describe('lib/util', () => {
     });
 
     describe('convertWatermarkPref()', () => {
-        [['any', ''], ['all', 'only_watermarked'], ['none', 'only_non_watermarked']].forEach(
-            ([previewWMPref, expected]) => {
-                it('should convert previewWMPref to value expected by the API', () => {
-                    expect(util.convertWatermarkPref(previewWMPref)).to.equal(expected);
-                });
-            },
-        );
+        [
+            ['any', ''],
+            ['all', 'only_watermarked'],
+            ['none', 'only_non_watermarked'],
+        ].forEach(([previewWMPref, expected]) => {
+            it('should convert previewWMPref to value expected by the API', () => {
+                expect(util.convertWatermarkPref(previewWMPref)).to.equal(expected);
+            });
+        });
     });
 
     describe('handleRepresentationBlobFetch()', () => {

diff --git a/src/lib/_boxui.scss b/src/lib/_boxui.scss
@@ -98,7 +98,7 @@
 
 .bp-btn {
     color: $sunset-grey;
-    font-weight: 400;
+    font-weight: normal;
     letter-spacing: 1px;
     text-shadow: none;
     background-color: $white;

diff --git a/src/lib/viewers/archive/BoxArchive.js b/src/lib/viewers/archive/BoxArchive.js
@@ -12,7 +12,7 @@ class BoxArchive {
      */
     constructor(archiveEl, data) {
         this.archiveEl = archiveEl;
-        this.archiveExplorer = ReactDOM.render(<ArchiveExplorer itemCollection={data} />, this.archiveEl);
+        ReactDOM.render(<ArchiveExplorer ref={this.setRef} itemCollection={data} />, this.archiveEl);
     }
 
     /**
@@ -26,6 +26,10 @@ class BoxArchive {
             this.archiveExplorer = null;
         }
     }
+
+    setRef = archiveExplorer => {
+        this.archiveExplorer = archiveExplorer;
+    };
 }
 
 global.BoxArchive = BoxArchive;

diff --git a/src/lib/viewers/archive/__tests__/BoxArchive-test.js b/src/lib/viewers/archive/__tests__/BoxArchive-test.js
@@ -28,10 +28,11 @@ describe('lib/viewers/archive/BoxArchive', () => {
 
     describe('destroy()', () => {
         it('should unmount the component', () => {
-            sandbox.stub(ReactDOM, 'render').returns({});
+            sandbox.stub(ReactDOM, 'render');
             sandbox.stub(ReactDOM, 'unmountComponentAtNode');
-            archiveComponent = new BoxArchive(containerEl, []);
 
+            archiveComponent = new BoxArchive(containerEl, []);
+            archiveComponent.archiveExplorer = {};
             archiveComponent.destroy();
             archiveComponent = null;
 

diff --git a/src/lib/viewers/box3d/Box3D.scss b/src/lib/viewers/box3d/Box3D.scss
@@ -47,7 +47,7 @@
     z-index: 2;
     margin: auto;
     color: #484848;
-    font-weight: 400;
+    font-weight: normal;
     font-size: 13px;
     background: #fff;
     border: 1px solid #caccd0;

diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -313,7 +313,8 @@ class DocBaseViewer extends BaseViewer {
         if (
             !this.preloader ||
             isWatermarked ||
-            ((this.startPageNum && this.startPageNum !== 1) || this.getCachedPage() !== 1)
+            (this.startPageNum && this.startPageNum !== 1) ||
+            this.getCachedPage() !== 1
         ) {
             return;
         }

diff --git a/src/lib/viewers/error/__tests__/PreviewErrorViewer-test.js b/src/lib/viewers/error/__tests__/PreviewErrorViewer-test.js
@@ -55,7 +55,12 @@ describe('lib/viewers/error/PreviewErrorViewer', () => {
     });
 
     describe('load()', () => {
-        [['zip', true], ['tgz', true], ['flv', true], ['blah', false]].forEach(testCase => {
+        [
+            ['zip', true],
+            ['tgz', true],
+            ['flv', true],
+            ['blah', false],
+        ].forEach(testCase => {
             it('should set appropriate icon', () => {
                 const getIconFromExtensionStub = sandbox.stub(icons, 'getIconFromExtension');
                 const getIconFromNameStub = sandbox.stub(icons, 'getIconFromName');

diff --git a/src/lib/viewers/media/DashViewer.js b/src/lib/viewers/media/DashViewer.js
@@ -796,7 +796,7 @@ class DashViewer extends VideoBaseViewer {
         // that larger than the current videoHeight.
         this.mediaEl.style.width = '';
 
-        if (!fullscreen.isFullscreen(this.containerEl) && (width <= viewport.width && height <= viewport.height)) {
+        if (!fullscreen.isFullscreen(this.containerEl) && width <= viewport.width && height <= viewport.height) {
             // Case 1: The video ends up fitting within the viewport of preview
             // For this case, just set the video player dimensions to match the
             // actual video's dimenstions.

diff --git a/src/lib/viewers/media/MediaControls.scss b/src/lib/viewers/media/MediaControls.scss
@@ -76,7 +76,7 @@
     margin: 0;
     padding: 0;
     color: $white;
-    font-weight: 400;
+    font-weight: normal;
     font-size: 12px;
     text-align: center;
     vertical-align: top;
@@ -168,7 +168,7 @@
     height: 24px;
     padding: 0 0 0 1px; // Padding left 1px because text isn't perfectly centered on Safari/Firefox even with text-align:center. Looks fine with extra-padding on Chrome/IE/Edge
     color: $white;
-    font-weight: 600;
+    font-weight: bold;
     font-size: 12px;
     line-height: 24px;
     letter-spacing: .1em;
@@ -186,7 +186,7 @@
     left: 22px;
     display: none;
     padding: 2px 2px 2px 3px;
-    font-weight: 600;
+    font-weight: bold;
     font-size: 8px;
     line-height: 8px;
     letter-spacing: .1em;

diff --git a/src/lib/viewers/media/Settings.scss b/src/lib/viewers/media/Settings.scss
@@ -157,7 +157,7 @@ $item-hover-color: #f6fafd;
 
 .bp-media-settings-label {
     color: $downtown-grey;
-    font-weight: 400;
+    font-weight: normal;
     font-size: 11px;
     text-transform: uppercase;
 

diff --git a/src/lib/viewers/media/__tests__/DashViewer-test.js b/src/lib/viewers/media/__tests__/DashViewer-test.js
@@ -1051,9 +1051,10 @@ describe('lib/viewers/media/DashViewer', () => {
     describe('calculateVideoDimensions()', () => {
         it('should calculate the video dimensions based on the reps', () => {
             stubs.mockPlayer.expects('isAudioOnly').returns(false);
-            stubs.mockPlayer
-                .expects('getVariantTracks')
-                .returns([{ width: 200, videoId: 1 }, { width: 100, videoId: 2 }]);
+            stubs.mockPlayer.expects('getVariantTracks').returns([
+                { width: 200, videoId: 1 },
+                { width: 100, videoId: 2 },
+            ]);
             dash.calculateVideoDimensions();
             expect(dash.hdVideoId).to.equal(1);
             expect(dash.sdVideoId).to.equal(2);
@@ -1062,9 +1063,10 @@ describe('lib/viewers/media/DashViewer', () => {
 
         it('should use SD video dimensions if no HD', () => {
             stubs.mockPlayer.expects('isAudioOnly').returns(false);
-            stubs.mockPlayer
-                .expects('getVariantTracks')
-                .returns([{ width: 640, videoId: 1, audioId: 2 }, { width: 640, videoId: 1, audioId: 3 }]);
+            stubs.mockPlayer.expects('getVariantTracks').returns([
+                { width: 640, videoId: 1, audioId: 2 },
+                { width: 640, videoId: 1, audioId: 3 },
+            ]);
             dash.calculateVideoDimensions();
             expect(dash.hdVideoId).to.equal(-1);
             expect(dash.sdVideoId).to.equal(1);
@@ -1073,9 +1075,10 @@ describe('lib/viewers/media/DashViewer', () => {
 
         it('should default video dimensions when video is audio-only', () => {
             stubs.mockPlayer.expects('isAudioOnly').returns(true);
-            stubs.mockPlayer
-                .expects('getVariantTracks')
-                .returns([{ width: null, videoId: null, audioId: 1 }, { width: null, videoId: null, audioId: 2 }]);
+            stubs.mockPlayer.expects('getVariantTracks').returns([
+                { width: null, videoId: null, audioId: 1 },
+                { width: null, videoId: null, audioId: 2 },
+            ]);
             dash.calculateVideoDimensions();
             expect(dash.hdVideoId).to.equal(-1);
             expect(dash.sdVideoId).to.equal(-1);

diff --git a/src/lib/viewers/media/__tests__/MediaControls-test.js b/src/lib/viewers/media/__tests__/MediaControls-test.js
@@ -1044,7 +1044,10 @@ describe('lib/viewers/media/MediaControls', () => {
     describe('initAlternateAudio()', () => {
         it('should load alternate audio', () => {
             sandbox.stub(mediaControls.settings, 'loadAlternateAudio');
-            const audios = [{ language: 'eng', role: 'audio0' }, { language: 'rus', role: 'audio1' }];
+            const audios = [
+                { language: 'eng', role: 'audio0' },
+                { language: 'rus', role: 'audio1' },
+            ];
             mediaControls.initAlternateAudio(audios);
             expect(mediaControls.settings.loadAlternateAudio).to.be.calledWith(audios);
         });

diff --git a/src/lib/viewers/media/_mediaBase.scss b/src/lib/viewers/media/_mediaBase.scss
@@ -66,7 +66,6 @@
 .bp-dark {
     .bp-error,
     .bp-loading-text,
-    .bp-error,
     .bp-btn-loading-download {
         color: $white;
     }

diff --git a/src/lib/viewers/text/BoxCSV.js b/src/lib/viewers/text/BoxCSV.js
@@ -65,6 +65,10 @@ class BoxCSV {
     };
     /* eslint-enable react/prop-types */
 
+    setRef = gridComponent => {
+        this.gridComponent = gridComponent;
+    };
+
     /**
      * Renders CSV into an html table
      *
@@ -89,8 +93,9 @@ class BoxCSV {
             columnWidth = (maxWidth - WIDTH_SCROLLER - WIDTH_BORDER) / columnCount;
         }
 
-        this.gridComponent = ReactDOM.render(
+        ReactDOM.render(
             <Grid
+                ref={this.setRef}
                 cellRenderer={this.cellRenderer}
                 className="bp-text-csv-grid"
                 columnCount={columnCount}

diff --git a/src/lib/viewers/text/__tests__/BoxCSV-test.js b/src/lib/viewers/text/__tests__/BoxCSV-test.js
@@ -54,7 +54,11 @@ describe('lib/viewers/text/BoxCSV', () => {
     describe('renderCSV()', () => {
         it('should render Grid using calculated properties', () => {
             const renderStub = sandbox.stub(ReactDOM, 'render');
-            csvComponent.data = [[1, 2], [2, 3], [3, 4]];
+            csvComponent.data = [
+                [1, 2],
+                [2, 3],
+                [3, 4],
+            ];
 
             csvComponent.renderCSV();