Feature/upgrade core dependencies (#490)

* Upgrade core dependencies

  * angular
  * nestjs
  * Nx
  * rxjs
  * storybook

* Temporarily fix imports for storybook

* Update changelog

.gitignore

@@ -23,6 +23,7 @@
 !.vscode/settings.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Upgraded `angular` from version `12.2.4` to `13.0.2`
+- Upgraded `angular-material-css-vars` from version `2.1.2` to `3.0.0`
+- Upgraded `nestjs` from version `7.6.18` to `8.2.3`
+- Upgraded `Nx` from version `12.8.0` to `13.2.2`
+- Upgraded `rxjs` from version `6.6.7` to `7.4.0`
+- Upgraded `storybook` from version `6.3.8` to `6.4.0-rc.3`
+
 ## 1.80.0 - 23.11.2021
 
 ### Added

angular.json

@@ -1,22 +1,5 @@
 {
   "version": 1,
-  "cli": {
-    "defaultCollection": "@nrwl/nest"
-  },
-  "defaultProject": "api",
-  "schematics": {
-    "@nrwl/angular:application": {
-      "linter": "eslint",
-      "unitTestRunner": "jest",
-      "e2eTestRunner": "cypress"
-    },
-    "@nrwl/angular:library": {
-      "linter": "eslint",
-      "unitTestRunner": "jest"
-    },
-    "@nrwl/nest": {},
-    "@nrwl/angular:component": {}
-  },
   "projects": {
     "api": {
       "root": "apps/api",
@@ -69,7 +52,8 @@
           },
           "outputs": ["coverage/apps/api"]
         }
-      }
+      },
+      "tags": []
     },
     "client": {
       "projectType": "application",
@@ -201,7 +185,8 @@
           },
           "outputs": ["coverage/apps/client"]
         }
-      }
+      },
+      "tags": []
     },
     "client-e2e": {
       "root": "apps/client-e2e",
@@ -221,7 +206,9 @@
             }
           }
         }
-      }
+      },
+      "tags": [],
+      "implicitDependencies": ["client"]
     },
     "common": {
       "root": "libs/common",
@@ -242,7 +229,8 @@
             "passWithNoTests": true
           }
         }
-      }
+      },
+      "tags": []
     },
     "ui": {
       "projectType": "library",
@@ -300,7 +288,8 @@
             }
           }
         }
-      }
+      },
+      "tags": []
     },
     "ui-e2e": {
       "root": "apps/ui-e2e",
@@ -326,7 +315,9 @@
             "lintFilePatterns": ["apps/ui-e2e/**/*.{js,ts}"]
           }
         }
-      }
+      },
+      "tags": [],
+      "implicitDependencies": ["ui"]
     }
   }
 }

apps/api/src/main.ts

@@ -20,22 +20,20 @@ async function bootstrap() {
   const port = process.env.PORT || 3333;
   await app.listen(port, () => {
     logLogo();
-    Logger.log(`Listening at http://localhost:${port}`, '', false);
-    Logger.log('', '', false);
+    Logger.log(`Listening at http://localhost:${port}`);
+    Logger.log('');
   });
 }
 
 function logLogo() {
-  Logger.log('   ________               __  ____      ___', '', false);
-  Logger.log('  / ____/ /_  ____  _____/ /_/ __/___  / (_)___', '', false);
-  Logger.log(' / / __/ __ \\/ __ \\/ ___/ __/ /_/ __ \\/ / / __ \\', '', false);
-  Logger.log('/ /_/ / / / / /_/ (__  ) /_/ __/ /_/ / / / /_/ /', '', false);
+  Logger.log('   ________               __  ____      ___');
+  Logger.log('  / ____/ /_  ____  _____/ /_/ __/___  / (_)___');
+  Logger.log(' / / __/ __ \\/ __ \\/ ___/ __/ /_/ __ \\/ / / __ \\');
+  Logger.log('/ /_/ / / / / /_/ (__  ) /_/ __/ /_/ / / / /_/ /');
   Logger.log(
-    `\\____/_/ /_/\\____/____/\\__/_/  \\____/_/_/\\____/ ${environment.version}`,
-    '',
-    false
+    `\\____/_/ /_/\\____/____/\\__/_/  \\____/_/_/\\____/ ${environment.version}`
   );
-  Logger.log('', '', false);
+  Logger.log('');
 }
 
 bootstrap();

apps/api/tsconfig.app.json

@@ -6,6 +6,6 @@
     "emitDecoratorMetadata": true,
     "target": "es2015"
   },
-  "exclude": ["**/*.spec.ts"],
+  "exclude": ["**/*.spec.ts", "**/*.test.ts"],
   "include": ["**/*.ts"]
 }

apps/api/tsconfig.spec.json

@@ -5,5 +5,5 @@
     "module": "commonjs",
     "types": ["jest", "node"]
   },
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
 }

apps/client/jest.config.js

@@ -14,5 +14,8 @@ module.exports = {
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment'
   ],
-  transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular' }
+  transform: {
+    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular'
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)']
 };

apps/client/src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

apps/client/src/styles.scss

@@ -3,7 +3,7 @@
 @import './styles/bootstrap';
 @import './styles/table';
 
-@import '~angular-material-css-vars/main';
+@import '~angular-material-css-vars/src/lib/main';
 
 @import '~svgmap/dist/svgMap';
 

apps/client/src/styles/ghostfolio-style.scss

@@ -1,6 +1,6 @@
 $mat-css-dark-theme-selector: '.is-dark-theme';
 
-@import '~angular-material-css-vars/public-util';
+@import '~angular-material-css-vars/src/lib/public-util';
 
 $alpha-disabled-text: 0.38;
 $alpha-hover: 0.04;

apps/client/tsconfig.spec.json

@@ -6,5 +6,5 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
 }

libs/common/tsconfig.lib.json

@@ -5,5 +5,5 @@
     "types": []
   },
   "include": ["**/*.ts"],
-  "exclude": ["**/*.spec.ts"]
+  "exclude": ["**/*.spec.ts", "**/*.test.ts"]
 }

libs/common/tsconfig.spec.json

@@ -7,9 +7,13 @@
   },
   "include": [
     "**/*.spec.ts",
+    "**/*.test.ts",
     "**/*.spec.tsx",
+    "**/*.test.tsx",
     "**/*.spec.js",
+    "**/*.test.js",
     "**/*.spec.jsx",
+    "**/*.test.jsx",
     "**/*.d.ts"
   ]
 }

libs/ui/.storybook/tsconfig.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "emitDecoratorMetadata": true
   },
-  "exclude": ["../**/*.spec.ts"],
+  "exclude": ["../**/*.spec.ts", "../**/*.test.ts"],
   "include": ["../src/**/*", "*.js"]
 }

libs/ui/jest.config.js

@@ -10,8 +10,9 @@ module.exports = {
   },
   coverageDirectory: '../../coverage/libs/ui',
   transform: {
-    '^.+\\.(ts|js|html)$': 'jest-preset-angular'
+    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular'
   },
+  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -10,8 +10,6 @@ import {
   OnDestroy,
   ViewChild
 } from '@angular/core';
-import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
-import { getBackgroundColor } from '@ghostfolio/common/helper';
 import {
   Chart,
   Filler,
@@ -22,6 +20,11 @@ import {
   TimeScale
 } from 'chart.js';
 
+import {
+  primaryColorRgb,
+  secondaryColorRgb
+} from '../../../../common/src/lib/config'; // TODO: @ghostfolio/common/config
+import { getBackgroundColor } from '../../../../common/src/lib/helper'; // TODO: @ghostfolio/common/helper
 import { LineChartItem } from './interfaces/line-chart.interface';
 
 @Component({

libs/ui/src/lib/logo/logo.component.scss

@@ -1,7 +1,7 @@
 :host {
   .logo {
     background-color: rgba(var(--dark-primary-text));
-    mask: url(~apps/client/src/assets/ghost.svg) no-repeat center;
+    mask: url('/assets/ghost.svg') no-repeat center;
   }
 
   .name {

libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts

@@ -1,6 +1,6 @@
-import { GfLogoModule } from '@ghostfolio/ui/logo';
 import { Meta, Story, moduleMetadata } from '@storybook/angular';
 
+import { GfLogoModule } from '../../../../ui/src/lib/logo'; // TODO: @ghostfolio/ui/logo
 import { NoTransactionsInfoComponent } from './no-transactions-info.component';
 
 export default {

libs/ui/src/lib/no-transactions-info/no-transactions-info.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { GfLogoModule } from '@ghostfolio/ui/logo';
 
+import { GfLogoModule } from '../../../../ui/src/lib/logo'; // TODO: @ghostfolio/ui/logo
 import { NoTransactionsInfoComponent } from './no-transactions-info.component';
 
 @NgModule({

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -8,8 +8,6 @@ import {
   OnDestroy,
   ViewChild
 } from '@angular/core';
-import { UNKNOWN_KEY } from '@ghostfolio/common/config';
-import { getTextColor } from '@ghostfolio/common/helper';
 import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { Tooltip } from 'chart.js';
 import { LinearScale } from 'chart.js';
@@ -19,6 +17,9 @@ import { Chart } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import * as Color from 'color';
 
+import { UNKNOWN_KEY } from '../../../../common/src/lib/config'; // TODO: @ghostfolio/common/config
+import { getTextColor } from '../../../../common/src/lib/helper'; // TODO: @ghostfolio/common/helper
+
 @Component({
   selector: 'gf-portfolio-proportion-chart',
   changeDetection: ChangeDetectionStrategy.OnPush,

libs/ui/src/lib/trend-indicator/trend-indicator.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { MarketState } from '@ghostfolio/api/services/interfaces/interfaces';
-import { DateRange } from '@ghostfolio/common/types';
+
+import { MarketState } from '../../../../../apps/api/src/services/interfaces/interfaces'; // TODO: @ghostfolio/api/services/interfaces/interfaces
+import { DateRange } from '../../../../common/src/lib/types'; // TODO: @ghostfolio/common/types
 
 @Component({
   selector: 'gf-trend-indicator',

libs/ui/src/lib/value/value.component.ts

@@ -4,10 +4,11 @@ import {
   Input,
   OnChanges
 } from '@angular/core';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
 import { format, isDate } from 'date-fns';
 import { isNumber } from 'lodash';
 
+import { DEFAULT_DATE_FORMAT } from '../../../../common/src/lib/config'; // TODO: @ghostfolio/common/config
+
 @Component({
   selector: 'gf-value',
   changeDetection: ChangeDetectionStrategy.OnPush,

libs/ui/tsconfig.lib.json

@@ -12,6 +12,7 @@
   "exclude": [
     "src/test-setup.ts",
     "**/*.spec.ts",
+    "**/*.test.ts",
     "**/*.stories.ts",
     "**/*.stories.js"
   ],

libs/ui/tsconfig.spec.json

@@ -6,5 +6,5 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
 }

nx.json

@@ -23,32 +23,11 @@
           "test",
           "e2e",
           "build-storybook"
-        ]
+        ],
+        "parallel": 1
       }
     }
   },
-  "projects": {
-    "api": {
-      "tags": []
-    },
-    "client": {
-      "tags": []
-    },
-    "client-e2e": {
-      "tags": [],
-      "implicitDependencies": ["client"]
-    },
-    "common": {
-      "tags": []
-    },
-    "ui": {
-      "tags": []
-    },
-    "ui-e2e": {
-      "tags": [],
-      "implicitDependencies": ["ui"]
-    }
-  },
   "targetDependencies": {
     "build": [
       {
@@ -56,5 +35,22 @@
         "projects": "dependencies"
       }
     ]
+  },
+  "cli": {
+    "defaultCollection": "@nrwl/nest"
+  },
+  "defaultProject": "api",
+  "generators": {
+    "@nrwl/angular:application": {
+      "linter": "eslint",
+      "unitTestRunner": "jest",
+      "e2eTestRunner": "cypress"
+    },
+    "@nrwl/angular:library": {
+      "linter": "eslint",
+      "unitTestRunner": "jest"
+    },
+    "@nrwl/nest": {},
+    "@nrwl/angular:component": {}
   }
 }

package.json

@@ -48,27 +48,27 @@
     "workspace-generator": "nx workspace-generator"
   },
   "dependencies": {
-    "@angular/animations": "12.2.4",
-    "@angular/cdk": "12.2.4",
-    "@angular/common": "12.2.4",
-    "@angular/compiler": "12.2.4",
-    "@angular/core": "12.2.4",
-    "@angular/forms": "12.2.4",
-    "@angular/material": "12.2.4",
-    "@angular/platform-browser": "12.2.4",
-    "@angular/platform-browser-dynamic": "12.2.4",
-    "@angular/router": "12.2.4",
+    "@angular/animations": "13.0.2",
+    "@angular/cdk": "13.0.2",
+    "@angular/common": "13.0.2",
+    "@angular/compiler": "13.0.2",
+    "@angular/core": "13.0.2",
+    "@angular/forms": "13.0.2",
+    "@angular/material": "13.0.2",
+    "@angular/platform-browser": "13.0.2",
+    "@angular/platform-browser-dynamic": "13.0.2",
+    "@angular/router": "13.0.2",
     "@codewithdan/observable-store": "2.2.11",
     "@dinero.js/currencies": "2.0.0-alpha.8",
-    "@nestjs/common": "7.6.18",
-    "@nestjs/config": "0.6.3",
-    "@nestjs/core": "7.6.18",
-    "@nestjs/jwt": "7.2.0",
-    "@nestjs/passport": "7.1.6",
-    "@nestjs/platform-express": "7.6.18",
-    "@nestjs/schedule": "0.4.3",
-    "@nestjs/serve-static": "2.1.4",
-    "@nrwl/angular": "12.8.0",
+    "@nestjs/common": "8.2.3",
+    "@nestjs/config": "1.1.3",
+    "@nestjs/core": "8.2.3",
+    "@nestjs/jwt": "8.0.0",
+    "@nestjs/passport": "8.0.1",
+    "@nestjs/platform-express": "8.2.3",
+    "@nestjs/schedule": "1.0.2",
+    "@nestjs/serve-static": "2.2.2",
+    "@nrwl/angular": "13.2.2",
     "@prisma/client": "2.30.2",
     "@simplewebauthn/browser": "4.1.0",
     "@simplewebauthn/server": "4.1.0",
@@ -76,7 +76,7 @@
     "@stripe/stripe-js": "1.15.0",
     "@types/papaparse": "5.2.6",
     "alphavantage": "2.2.0",
-    "angular-material-css-vars": "2.1.2",
+    "angular-material-css-vars": "3.0.0",
     "bent": "7.3.12",
     "big.js": "6.1.1",
     "bootstrap": "4.6.0",
@@ -108,7 +108,7 @@
     "prisma": "2.30.2",
     "reflect-metadata": "0.1.13",
     "round-to": "5.0.0",
-    "rxjs": "6.6.7",
+    "rxjs": "7.4.0",
     "stripe": "8.156.0",
     "svgmap": "2.6.0",
     "tslib": "2.0.0",
@@ -117,56 +117,56 @@
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.2.4",
-    "@angular-eslint/eslint-plugin": "12.3.1",
-    "@angular-eslint/eslint-plugin-template": "12.3.0",
-    "@angular-eslint/template-parser": "12.3.0",
-    "@angular/cli": "12.2.4",
-    "@angular/compiler-cli": "12.2.4",
-    "@angular/language-service": "12.2.4",
-    "@angular/localize": "12.2.4",
-    "@nestjs/schematics": "7.3.1",
-    "@nestjs/testing": "7.6.18",
-    "@nrwl/cli": "12.8.0",
-    "@nrwl/cypress": "12.8.0",
-    "@nrwl/eslint-plugin-nx": "12.8.0",
-    "@nrwl/jest": "12.8.0",
-    "@nrwl/nest": "12.8.0",
-    "@nrwl/node": "12.8.0",
-    "@nrwl/storybook": "12.9.0",
-    "@nrwl/tao": "12.8.0",
-    "@nrwl/workspace": "12.8.0",
-    "@storybook/addon-essentials": "6.3.8",
-    "@storybook/angular": "6.3.8",
-    "@storybook/builder-webpack5": "6.3.8",
-    "@storybook/manager-webpack5": "6.3.8",
+    "@angular-devkit/build-angular": "13.0.3",
+    "@angular-eslint/eslint-plugin": "13.0.1",
+    "@angular-eslint/eslint-plugin-template": "13.0.1",
+    "@angular-eslint/template-parser": "13.0.1",
+    "@angular/cli": "13.0.3",
+    "@angular/compiler-cli": "13.0.2",
+    "@angular/language-service": "13.0.2",
+    "@angular/localize": "13.0.2",
+    "@nestjs/schematics": "8.0.5",
+    "@nestjs/testing": "8.2.3",
+    "@nrwl/cli": "13.2.2",
+    "@nrwl/cypress": "13.2.2",
+    "@nrwl/eslint-plugin-nx": "13.2.2",
+    "@nrwl/jest": "13.2.2",
+    "@nrwl/nest": "13.2.2",
+    "@nrwl/node": "13.2.2",
+    "@nrwl/storybook": "13.2.2",
+    "@nrwl/tao": "13.2.2",
+    "@nrwl/workspace": "13.2.2",
+    "@storybook/addon-essentials": "6.4.0-rc.3",
+    "@storybook/angular": "6.4.0-rc.3",
+    "@storybook/builder-webpack5": "6.4.0-rc.3",
+    "@storybook/manager-webpack5": "6.4.0-rc.3",
     "@types/big.js": "6.1.2",
     "@types/cache-manager": "3.4.2",
     "@types/color": "3.0.2",
-    "@types/jest": "26.0.20",
+    "@types/jest": "27.0.2",
     "@types/lodash": "4.14.174",
     "@types/node": "14.14.33",
-    "@types/passport-google-oauth20": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "4.27.0",
-    "@typescript-eslint/parser": "4.27.0",
+    "@types/passport-google-oauth20": "2.0.11",
+    "@typescript-eslint/eslint-plugin": "5.4.0",
+    "@typescript-eslint/parser": "5.4.0",
     "codelyzer": "6.0.1",
     "cypress": "6.2.1",
     "dotenv": "10.0.0",
-    "eslint": "7.28.0",
+    "eslint": "8.3.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-cypress": "2.10.3",
-    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-import": "2.25.3",
     "import-sort-cli": "6.0.0",
     "import-sort-parser-typescript": "6.0.0",
     "import-sort-style-module": "6.0.0",
-    "jest": "27.0.3",
-    "jest-preset-angular": "9.0.3",
+    "jest": "27.2.3",
+    "jest-preset-angular": "11.0.0",
     "prettier": "2.3.2",
     "replace-in-file": "6.2.0",
     "rimraf": "3.0.2",
-    "ts-jest": "27.0.3",
+    "ts-jest": "27.0.5",
     "ts-node": "9.1.1",
-    "typescript": "4.3.5"
+    "typescript": "4.4.4"
   },
   "engines": {
     "node": ">=14"