Migrate to node 16, npm 7. (#3773)

* Migrate to node 16 and nmp 7. * Step 2 * Moving eslint to one package.json * Fix package for 3D * Update package files * Fix package.json. Update package-lock.json. Update DockeFile.ui * Change "node-sass" to "sass" due to snyk issues * Automatically update your stylesheets due to DEPRECATION WARNING from sass * Moving all dev dependencies to root package.json * Remove unnecessary dependence from cvat-core-package.json * Update of the year in copyrights * Update CHANGELOG.md * Define workspaces * Update npm command to root package.json * Update npm commands and corresponding files * Update npm command. * Fix Dockerfile.ui * Fix error loading rule '@typescript-eslint/dot-notation' * Fix eslint check issue Co-authored-by: Boris Sekachev <boris.sekachev@intel.com>
4 years ago · e484aa7587
parent 8fea50780d
commit e484aa7587
34 changed files with 66655 additions and 109518 deletions
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@ -7,7 +7,7 @@ jobs:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
-            node-version: 12
+            node-version: '16.x'

      - name: Run checks
        run: |
@ -21,10 +21,8 @@ jobs:
          done

          if [[ ! -z ${changed_files_eslint} ]]; then
-            for package_files in `find -maxdepth 2 -name "package.json" -type f`; do
-              cd $(dirname $package_files) && npm ci && cd ${{ github.workspace }}
-            done
-            npm install eslint-detailed-reporter --save-dev
+            npm ci
+            npm install eslint-detailed-reporter --save-dev --legacy-peer-deps
            mkdir -p eslint_report

            echo "ESLint version: "`npx eslint --version`
--- a/.github/workflows/github_pages.yml
+++ b/.github/workflows/github_pages.yml
@ -23,7 +23,7 @@ jobs:
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
-          node-version: '14.x'
+          node-version: '16.x'

      - name: Install npm packages
        working-directory: ./site
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@ -126,7 +126,7 @@ jobs:
          key: ${{ runner.os }}-build-ui-${{ steps.get-sha.outputs.sha }}
      - uses: actions/setup-node@v2
        with:
-            node-version: 12
+            node-version: '16.x'
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1.1.2
      - name: Building CVAT server image
--- a/.github/workflows/publish_docker_images.yml
+++ b/.github/workflows/publish_docker_images.yml
@ -22,7 +22,7 @@ jobs:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
-            node-version: 12
+            node-version: '16.x'
      - name: Run end-to-end tests
        env:
          DJANGO_SU_NAME: 'admin'
--- a/.github/workflows/remark.yml
+++ b/.github/workflows/remark.yml
@ -7,7 +7,7 @@ jobs:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
-            node-version: 12
+            node-version: '16.x'

      - name: Run checks
        run: |
--- a/.github/workflows/schedule.yml
+++ b/.github/workflows/schedule.yml
@ -10,7 +10,7 @@ jobs:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
-            node-version: 12
+            node-version: '16.x'
      - name: Build CVAT
        env:
          DJANGO_SU_NAME: "admin"
--- a/.github/workflows/stylelint.yml
+++ b/.github/workflows/stylelint.yml
@ -7,7 +7,7 @@ jobs:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
-            node-version: 12
+            node-version: '16.x'

      - name: Run checks
        run: |
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 - UI tracking has been reworked (<https://github.com/openvinotoolkit/cvat/pull/3571>)
 - Manifest generation: Reduce creating time (<https://github.com/openvinotoolkit/cvat/pull/3712>)
+- Migration from NPM 6 to NPM 7 (<https://github.com/openvinotoolkit/cvat/pull/3773>)

 ### Deprecated

--- a/Dockerfile.ci
+++ b/Dockerfile.ci
@ -14,7 +14,7 @@ RUN apt-get update && \
        && \
    curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
    echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | tee /etc/apt/sources.list.d/google-chrome.list && \
-    curl https://deb.nodesource.com/setup_12.x | bash - && \
+    curl https://deb.nodesource.com/setup_16.x | bash - && \
    DEBIAN_FRONTEND=noninteractive apt-get --no-install-recommends install -yq \
        google-chrome-stable \
        nodejs \
--- a/Dockerfile.ui
+++ b/Dockerfile.ui
@ -1,4 +1,4 @@
-FROM node:lts-buster AS cvat-ui
+FROM node:stretch AS cvat-ui

 ARG http_proxy
 ARG https_proxy
@ -16,31 +16,16 @@ ENV TERM=xterm \
    LC_ALL='C.UTF-8'

 # Install dependencies
+COPY package*.json /tmp/
 COPY cvat-core/package*.json /tmp/cvat-core/
 COPY cvat-canvas/package*.json /tmp/cvat-canvas/
 COPY cvat-canvas3d/package*.json /tmp/cvat-canvas3d/
 COPY cvat-ui/package*.json /tmp/cvat-ui/
 COPY cvat-data/package*.json /tmp/cvat-data/

-# Install cvat-data dependencies
-WORKDIR /tmp/cvat-data/
-RUN npm ci
-
-# Install cvat-core dependencies
-WORKDIR /tmp/cvat-core/
-RUN npm ci
-
-# Install cvat-canvas dependencies
-WORKDIR /tmp/cvat-canvas/
-RUN npm ci
-
-# Install cvat-canvas dependencies
-WORKDIR /tmp/cvat-canvas3d/
-RUN npm ci
-
-# Install cvat-ui dependencies
-WORKDIR /tmp/cvat-ui/
-RUN npm ci
+# Install common dependencies
+WORKDIR /tmp/
+RUN npm ci --ignore-scripts

 # Build source code
 COPY cvat-data/ /tmp/cvat-data/
@ -48,7 +33,7 @@ COPY cvat-core/ /tmp/cvat-core/
 COPY cvat-canvas3d/ /tmp/cvat-canvas3d/
 COPY cvat-canvas/ /tmp/cvat-canvas/
 COPY cvat-ui/ /tmp/cvat-ui/
-RUN npm run build
+RUN npm run build:cvat-ui

 FROM nginx:mainline-alpine
 # Replace default.conf configuration to remove unnecessary rules
--- a/cvat-canvas/.eslintrc.js
+++ b/cvat-canvas/.eslintrc.js
@ -1,4 +1,4 @@
-// Copyright (C) 2019-2020 Intel Corporation
+// Copyright (C) 2019-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -9,6 +9,8 @@ module.exports = {
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 6,
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
    },
    plugins: ['@typescript-eslint', 'import'],
    extends: [
@ -18,6 +20,7 @@ module.exports = {
        'plugin:import/warnings',
        'plugin:import/typescript',
    ],
+    ignorePatterns: ['.eslintrc.js'],
    rules: {
        '@typescript-eslint/no-explicit-any': 0,
        '@typescript-eslint/indent': ['warn', 4],
--- a/cvat-canvas/package-lock.json
+++ b/cvat-canvas/package-lock.json
--- a/cvat-canvas/package.json
+++ b/cvat-canvas/package.json
@ -15,39 +15,12 @@
    "not IE 11",
    "> 2%"
  ],
+  "devDependencies": {},
  "dependencies": {
    "svg.draggable.js": "2.2.2",
    "svg.draw.js": "^2.0.4",
    "svg.js": "2.7.1",
    "svg.resize.js": "1.4.3",
    "svg.select.js": "3.0.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.12.13",
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-typescript": "^7.3.3",
-    "@types/node": "^12.6.8",
-    "@typescript-eslint/eslint-plugin": "^1.13.0",
-    "@typescript-eslint/parser": "^1.13.0",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.4.2",
-    "dts-bundle-webpack": "^1.0.2",
-    "eslint": "^6.1.0",
-    "eslint-config-airbnb-typescript": "^4.0.1",
-    "eslint-config-typescript-recommended": "^1.4.17",
-    "eslint-plugin-import": "^2.22.1",
-    "node-sass": "^4.14.1",
-    "nodemon": "^2.0.7",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.0.0",
-    "typescript": "^3.5.3",
-    "webpack": "^5.20.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
  }
 }
--- a/cvat-canvas3d/.eslintrc.js
+++ b/cvat-canvas3d/.eslintrc.js
@ -9,6 +9,8 @@ module.exports = {
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 6,
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
    },
    plugins: ['@typescript-eslint', 'import'],
    extends: [
@ -18,6 +20,7 @@ module.exports = {
        'plugin:import/warnings',
        'plugin:import/typescript',
    ],
+    ignorePatterns: ['.eslintrc.js'],
    rules: {
        '@typescript-eslint/no-explicit-any': 0,
        '@typescript-eslint/indent': ['warn', 4],
--- a/cvat-canvas3d/package-lock.json
+++ b/cvat-canvas3d/package-lock.json
--- a/cvat-canvas3d/package.json
+++ b/cvat-canvas3d/package.json
@ -15,37 +15,10 @@
    "not IE 11",
    "> 2%"
  ],
-  "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-typescript": "^7.3.3",
-    "@types/node": "^12.6.8",
-    "@typescript-eslint/eslint-plugin": "^1.13.0",
-    "@typescript-eslint/parser": "^1.13.0",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.4.2",
-    "dts-bundle-webpack": "^1.0.2",
-    "eslint": "^6.1.0",
-    "eslint-config-airbnb-typescript": "^4.0.1",
-    "eslint-config-typescript-recommended": "^1.4.17",
-    "eslint-plugin-import": "^2.18.2",
-    "node-sass": "^4.14.1",
-    "nodemon": "^1.19.4",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.0.0",
-    "typescript": "^3.5.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
-  },
+  "devDependencies": {},
  "dependencies": {
    "@types/three": "^0.125.3",
    "camera-controls": "^1.25.3",
-    "three": "^0.125.0"
+    "three": "^0.126.1"
  }
 }
--- a/cvat-core/package-lock.json
+++ b/cvat-core/package-lock.json
--- a/cvat-core/package.json
+++ b/cvat-core/package.json
@ -18,25 +18,10 @@
    "> 2%"
  ],
  "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
-    "airbnb": "0.0.2",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.6",
    "coveralls": "^3.0.5",
-    "eslint": "6.1.0",
-    "eslint-config-airbnb-base": "14.0.0",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jest": "^24.1.0",
-    "eslint-plugin-no-unsafe-innerhtml": "^1.0.16",
-    "eslint-plugin-no-unsanitized": "^3.0.2",
-    "eslint-plugin-security": "^1.4.0",
    "jest": "^26.6.3",
    "jest-junit": "^6.4.0",
-    "jsdoc": "^3.6.6",
-    "webpack": "^4.31.0",
-    "webpack-cli": "^3.3.2"
+    "jsdoc": "^3.6.6"
  },
  "dependencies": {
    "axios": "^0.21.4",
@ -50,7 +35,6 @@
    "js-cookie": "^2.2.0",
    "platform": "^1.3.5",
    "quickhull": "^1.0.3",
-    "store": "^2.0.12",
-    "worker-loader": "^2.0.0"
+    "store": "^2.0.12"
  }
 }
--- a/cvat-data/package-lock.json
+++ b/cvat-data/package-lock.json
--- a/cvat-data/package.json
+++ b/cvat-data/package.json
@ -16,23 +16,7 @@
    "not IE 11",
    "> 2%"
  ],
-  "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
-    "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^7.0.0",
-    "eslint": "^6.4.0",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-no-unsafe-innerhtml": "^1.0.16",
-    "eslint-plugin-no-unsanitized": "^3.0.2",
-    "eslint-plugin-security": "^1.4.0",
-    "nodemon": "^1.19.2",
-    "webpack": "^5.20.2",
-    "webpack-cli": "^3.3.7",
-    "worker-loader": "^2.0.0"
-  },
+  "devDependencies": {},
  "dependencies": {
    "async-mutex": "^0.3.2",
    "jszip": "3.7.1"
--- a/cvat-ui/package-lock.json
+++ b/cvat-ui/package-lock.json
--- a/cvat-ui/package.json
+++ b/cvat-ui/package.json
@ -19,40 +19,7 @@
  ],
  "author": "Intel",
  "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.6.0",
-    "@types/mousetrap": "^1.6.5",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-import": "^1.12.2",
-    "copy-webpack-plugin": "^5.1.2",
-    "css-loader": "^3.2.0",
-    "eslint": "^7.11.0",
-    "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.14.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "react-svg-loader": "^3.0.3",
-    "sass-loader": "^8.0.0",
-    "style-loader": "^1.0.0",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "typescript": "^3.7.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "worker-loader": "^2.0.0"
-  },
+  "devDependencies": {},
  "dependencies": {
    "@ant-design/icons": "^4.6.3",
    "@types/lodash": "^4.14.172",
--- a/cvat-ui/src/base.scss
+++ b/cvat-ui/src/base.scss
@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -6,7 +6,7 @@ $grid-unit-size: 8px;

 $header-height: $grid-unit-size * 7;

-$layout-sm-grid-size: $grid-unit-size / 2;
+$layout-sm-grid-size: $grid-unit-size * 0.5;
 $layout-lg-grid-size: $grid-unit-size * 2;
 $layout-sm-grid-color: rgba(0, 0, 0, 0.15);
 $layout-lg-grid-color: rgba(0, 0, 0, 0.15);
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss
@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -318,7 +318,7 @@
    background: rgb(25, 184, 14);
    height: 80%;
    width: 90%;
-    border-radius: $grid-unit-size / 2;
+    border-radius: $grid-unit-size * 0.5;
 }

 .cvat-label-item-setup-shortcut-button {
@ -415,7 +415,7 @@
    border-radius: 6px;
    border: 1px solid $border-color-3;
    z-index: 100;
-    padding: $grid-unit-size / 2 $grid-unit-size * 2 $grid-unit-size / 2 $grid-unit-size / 2;
+    padding: $grid-unit-size * 0.5 $grid-unit-size * 2 $grid-unit-size * 0.5 $grid-unit-size * 0.5;

    .ant-slider-mark {
        position: static;
--- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
@ -32,7 +32,7 @@
    }

    > .ant-image {
-        margin: $grid-unit-size / 2;
+        margin: $grid-unit-size * 0.5;
    }

    > span {
--- a/cvat-ui/src/components/annotation-page/standard3D-workspace/styles.scss
+++ b/cvat-ui/src/components/annotation-page/standard3D-workspace/styles.scss
@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -14,7 +14,7 @@
    height: 100%;
    width: 100%;
    position: relative;
-    padding: $grid-unit-size/2;
+    padding: $grid-unit-size * 0.5;
 }

 .cvat-canvas3d-orthographic-views {
@ -37,7 +37,7 @@
 }

 .cvat-canvas3d-perspective-arrow-directions-icons-bottom {
-    margin: $grid-unit-size/2;
+    margin: $grid-unit-size * 0.5;
 }

 .cvat-canvas3d-perspective-arrow-directions-icons-color {
@ -52,28 +52,28 @@
 }

 .cvat-canvas3d-perspective-directions-icon {
-    margin: $grid-unit-size/2 $grid-unit-size/4;
+    margin: $grid-unit-size * 0.5 $grid-unit-size * 0.25;
    width: $grid-unit-size * 4;
 }

 .cvat-canvas3d-orthographic-view {
    width: 100%;
    height: 100%;
-    padding-top: $grid-unit-size/2;
-    padding-bottom: $grid-unit-size/2;
+    padding-top: $grid-unit-size * 0.5;
+    padding-bottom: $grid-unit-size * 0.5;
 }

 .cvat-canvas3d-topview {
-    padding-left: $grid-unit-size/2;
-    padding-right: $grid-unit-size/2;
+    padding-left: $grid-unit-size * 0.5;
+    padding-right: $grid-unit-size * 0.5;
 }

 .cvat-canvas3d-sideview {
-    padding-right: $grid-unit-size/2;
+    padding-right: $grid-unit-size * 0.5;
 }

 .cvat-canvas3d-frontview {
-    padding-right: $grid-unit-size/2;
+    padding-right: $grid-unit-size * 0.5;
 }

 .cvat-canvas3d-fullsize {
@ -91,7 +91,7 @@
    top: 0;
    left: 0;
    background-color: grey;
-    height: $grid-unit-size/2;
+    height: $grid-unit-size * 0.5;
 }

 .cvat-canvas3d-header {
@ -115,13 +115,13 @@
    bottom: 0;
    left: 0;
    background-color: grey;
-    height: $grid-unit-size/2;
+    height: $grid-unit-size * 0.5;
    cursor: ns-resize;
 }

 .cvat-resizable-handle-vertical-side {
    position: absolute;
-    width: $grid-unit-size/2;
+    width: $grid-unit-size * 0.5;
    margin-right: auto;
    top: $grid-unit-size * 4.5;
    right: 0;
@ -133,7 +133,7 @@

 .cvat-resizable-handle-vertical-top {
    position: absolute;
-    width: $grid-unit-size/2;
+    width: $grid-unit-size * 0.5;
    margin-right: auto;
    top: $grid-unit-size * 4.5;
    right: 0;
--- a/cvat-ui/src/components/annotation-page/styles.scss
+++ b/cvat-ui/src/components/annotation-page/styles.scss
@ -486,7 +486,7 @@ button.cvat-predictor-button {
            }

            .group-or-rule {
-                border-radius: $grid-unit-size / 4;
+                border-radius: $grid-unit-size * 0.25;
            }

            .group {
--- a/cvat-ui/src/components/create-cloud-storage-page/styles.scss
+++ b/cvat-ui/src/components/create-cloud-storage-page/styles.scss
@ -22,7 +22,7 @@
        width: 100%;
        height: auto;
        border: 1px solid $border-color-1;
-        border-radius: $grid-unit-size / 2;
+        border-radius: $grid-unit-size * 0.5;
        padding: $grid-unit-size * 2;
        background: $background-color-1;
        text-align: initial;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,24 +6,63 @@
  "directories": {
    "test": "tests"
  },
+  "workspaces": [
+    "cvat-data",
+    "cvat-core",
+    "cvat-canvas",
+    "cvat-canvas3d",
+    "cvat-ui"
+  ],
  "dependencies": {},
  "devDependencies": {
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.6.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.6.0",
    "@istanbuljs/nyc-config-babel": "^1.0.1",
+    "@types/mousetrap": "^1.6.5",
+    "@types/node": "^12.6.8",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "airbnb": "0.0.2",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-import": "^1.12.2",
    "babel-plugin-istanbul": "^6.0.0",
    "babel-register": "^6.26.0",
+    "copy-webpack-plugin": "^5.1.2",
    "coveralls": "^3.1.0",
+    "css-loader": "^3.4.2",
+    "dts-bundle-webpack": "^1.0.2",
    "eslint": "^7.11.0",
    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb-base": "14.2.1",
+    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-plugin-cypress": "^2.11.2",
    "eslint-plugin-header": "^3.1.0",
+    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-no-unsafe-innerhtml": "^1.0.16",
+    "eslint-plugin-no-unsanitized": "^3.0.2",
    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-security": "^1.4.0",
+    "html-webpack-plugin": "^3.2.0",
    "husky": "^6.0.0",
    "lint-staged": "^10.4.2",
    "micromatch": "^4.0.2",
+    "nodemon": "^2.0.7",
    "nyc": "^15.1.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.7.0",
    "prettier": "2.1.2",
+    "react-svg-loader": "^3.0.3",
    "remark-cli": "^9.0.0",
    "remark-frontmatter": "^3.0.0",
    "remark-gfm": "^1.0.0",
@ -39,10 +78,19 @@
    "remark-preset-lint-consistent": "^4.0.0",
    "remark-preset-lint-markdown-style-guide": "^4.0.0",
    "remark-preset-lint-recommended": "^5.0.0",
+    "sass": "^1.42.1",
+    "sass-loader": "^10.0.0",
    "source-map-support": "^0.5.19",
+    "style-loader": "^1.0.0",
    "stylelint": "^13.6.1",
    "stylelint-config-standard": "^20.0.0",
-    "vfile-reporter-json": "^2.0.2"
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "typescript": "^3.7.3",
+    "vfile-reporter-json": "^2.0.2",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
+    "worker-loader": "^2.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
@ -55,7 +103,16 @@
    "precommit:cvat-core": "cd cvat-ui && eslint --fix",
    "precommit:cvat-canvas": "cd cvat-ui && eslint --fix",
    "precommit:cvat-canvas3d": "cd cvat-ui && eslint --fix",
-    "precommit:cvat-ui": "cd cvat-ui && eslint --fix"
+    "precommit:cvat-ui": "cd cvat-ui && eslint --fix",
+    "build:cvat-ui": "npm run build --workspace=cvat-ui",
+    "build:cvat-canvas": "npm run build --workspace=cvat-canvas",
+    "build:cvat-canvas3d": "npm run build --workspace=cvat-canvas3d",
+    "build:cvat-core": "npm run build --workspace=cvat-core",
+    "build:cvat-data": "npm run build --workspace=cvat-data",
+    "server:cvat-canvas": "npm run server --workspace=cvat-canvas",
+    "server:cvat-canvas3d": "npm run server --workspace=cvat-canvas3d",
+    "server:cvat-data": "npm run server --workspace=cvat-data",
+    "start:cvat-ui": "npm run start --workspace=cvat-ui"
  },
  "repository": {
    "type": "git",
--- a/site/content/en/docs/contributing/development-environment.md
+++ b/site/content/en/docs/contributing/development-environment.md
@ -14,8 +14,8 @@ description: 'Installing a development environment for different operating syste
  ```

  ```sh
-  # Install Node.js 12
-  curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
+  # Install Node.js 16
+  curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
  sudo apt-get install -y nodejs
  ```

@ -62,9 +62,7 @@ description: 'Installing a development environment for different operating syste
 - Install npm packages for UI and start UI debug server (run the following command from CVAT root directory):

  ```sh
-  npm ci && \
-  cd cvat-core && npm ci && \
-  cd ../cvat-ui && npm ci && npm start
+  npm ci && npm run start:cvat-ui
  ```

  > Note for Mac users
@ -78,7 +76,7 @@ description: 'Installing a development environment for different operating syste
 - Open new terminal (Ctrl + Shift + T), run Visual Studio Code from the virtual environment

  ```sh
-  cd .. && source .env/bin/activate && code
+  source .env/bin/activate && code
  ```

 - Install following VS Code extensions:
--- a/site/content/en/docs/manual/basics/objects-sidebar.md
+++ b/site/content/en/docs/manual/basics/objects-sidebar.md
@ -4,6 +4,7 @@ linkTitle: 'Objects sidebar'
 weight: 9
 description: 'Overview of available functions on the objects sidebar of the annotation tool.'
 ---
+
 ## Hide objects sidebar

 `Hide` - the button hides the object's sidebar.
@ -115,10 +116,10 @@ To assign a number, click on the button placed at the right of a label name on t
 ![](/images/image210.jpg)

 After that you will be able to assign a corresponding label to an object
- by hovering your mouse cursor over it and pressing `Ctrl + Num(0..9)`.
+by hovering your mouse cursor over it and pressing `Ctrl + Num(0..9)`.

 In case you do not point the cursor to the object, pressing `Ctrl + Num(0..9)` will set a chosen label as default,
- so that the next object you create (use `N` key) will automatically have this label assigned.
+so that the next object you create (use `N` key) will automatically have this label assigned.

 ![](/images/image211.jpg)

--- a/site/package-lock.json
+++ b/site/package-lock.json
--- a/tests/package-lock.json
+++ b/tests/package-lock.json