chore: Nx migration to v17

* Angular updated to v16
* Storybook updated to v7
* npm packages rescoped from nrwl to nx

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -1,12 +1,12 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -25,12 +25,12 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     },
     {
@@ -40,5 +40,6 @@
       },
       "rules": {}
     }
-  ]
+  ],
+  "extends": ["plugin:storybook/recommended"]
 }

.gitignore

@@ -38,4 +38,5 @@ testem.log
 
 # System Files
 .DS_Store
-Thumbs.db
+Thumbs.db
+.nx/cache

.prettierignore

@@ -2,4 +2,5 @@
 
 /dist
 /coverage
-.angular
+.angular
+/.nx/cache

apps/filmpire-e2e/cypress.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress';
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 export default defineConfig({
   e2e: nxE2EPreset(__dirname),

apps/filmpire-e2e/project.json

@@ -5,7 +5,7 @@
   "projectType": "application",
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/filmpire-e2e/cypress.config.ts",
         "devServerTarget": "filmpire:serve:development",
@@ -18,7 +18,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/filmpire-e2e/**/*.{js,ts}"]

apps/filmpire/.eslintrc.json

@@ -5,7 +5,7 @@
     {
       "files": ["*.ts"],
       "extends": [
-        "plugin:@nrwl/nx/angular",
+        "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
@@ -29,7 +29,7 @@
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]

apps/filmpire/project.json

@@ -78,13 +78,13 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": ["apps/filmpire/**/*.ts", "apps/filmpire/**/*.html"]
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "apps/filmpire/jest.config.ts",

apps/filmpire/tailwind.config.js

@@ -1,4 +1,4 @@
-const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
 const { join } = require('path');
 
 /** @type {import('tailwindcss').Config} */

decorate-angular-cli.js

@@ -27,9 +27,11 @@ const cp = require('child_process');
 const isWindows = os.platform() === 'win32';
 let output;
 try {
-  output = require('@nrwl/workspace').output;
+  output = require('@nx/workspace').output;
 } catch (e) {
-  console.warn('Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.');
+  console.warn(
+    'Angular CLI could not be decorated to enable computation caching. Please ensure @nx/workspace is installed.'
+  );
   process.exit(0);
 }
 
@@ -46,24 +48,32 @@ function symlinkNgCLItoNxCLI() {
        * This is the most reliable way to create symlink-like behavior on Windows.
        * Such that it works in all shells and works with npx.
        */
-      ['', '.cmd', '.ps1'].forEach(ext => {
-        if (fs.existsSync(nxPath + ext)) fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext));
+      ['', '.cmd', '.ps1'].forEach((ext) => {
+        if (fs.existsSync(nxPath + ext))
+          fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext));
       });
     } else {
       // If unix-based, symlink
       cp.execSync(`ln -sf ./nx ${ngPath}`);
     }
-  }
-  catch(e) {
-    output.error({ title: 'Unable to create a symlink from the Angular CLI to the Nx CLI:' + e.message });
+  } catch (e) {
+    output.error({
+      title:
+        'Unable to create a symlink from the Angular CLI to the Nx CLI:' +
+        e.message,
+    });
     throw e;
   }
 }
 
 try {
   symlinkNgCLItoNxCLI();
   require('nx/src/adapter/decorate-cli').decorateCli();
-  output.log({ title: 'Angular CLI has been decorated to enable computation caching.' });
-} catch(e) {
-  output.error({ title: 'Decoration of the Angular CLI did not complete successfully' });
+  output.log({
+    title: 'Angular CLI has been decorated to enable computation caching.',
+  });
+} catch (e) {
+  output.error({
+    title: 'Decoration of the Angular CLI did not complete successfully',
+  });
 }

jest.config.ts

@@ -1,4 +1,4 @@
-import { getJestProjects } from '@nrwl/jest';
+import { getJestProjects } from '@nx/jest';
 
 export default {
   projects: getJestProjects(),

jest.preset.js

@@ -1,3 +1,3 @@
-const nxPreset = require('@nrwl/jest/preset').default;
+const nxPreset = require('@nx/jest/preset').default;
 
 module.exports = { ...nxPreset };

libs/api-interfaces/project.json

@@ -5,7 +5,7 @@
   "projectType": "library",
   "targets": {
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["libs/api-interfaces/**/*.ts"]

libs/core-data/.eslintrc.json

@@ -23,13 +23,13 @@
         ]
       },
       "extends": [
-        "plugin:@nrwl/nx/angular",
+        "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ]
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]

libs/core-data/project.json

@@ -6,7 +6,7 @@
   "prefix": "ng-filmpire",
   "targets": {
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "libs/core-data/jest.config.ts",
@@ -20,7 +20,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": [

libs/core-data/src/lib/services/auth/auth.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { AuthSession, AuthToken, User } from '@ng-filmpire/api-interfaces';
-import { tap } from 'rxjs';
+import { delay, tap } from 'rxjs';
 import { environment } from '../environments/environment';
 
 @Injectable({

libs/material/.eslintrc.json

@@ -23,13 +23,13 @@
         ]
       },
       "extends": [
-        "plugin:@nrwl/nx/angular",
+        "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ]
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]

libs/material/project.json

@@ -6,7 +6,7 @@
   "prefix": "ng-filmpire",
   "targets": {
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "libs/material/jest.config.ts",
@@ -20,7 +20,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["libs/material/**/*.ts", "libs/material/**/*.html"]

libs/ui/.eslintrc.json

@@ -23,13 +23,13 @@
         ]
       },
       "extends": [
-        "plugin:@nrwl/nx/angular",
+        "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ]
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     },
     {

libs/ui/.storybook/main.js

@@ -1,8 +1,16 @@
 module.exports = {
-  core: { builder: 'webpack5' },
   stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
   staticDirs: [{ from: '../src/assets', to: '/assets' }],
+
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 };
 
 // To customize your webpack configuration you can use the webpackFinal field.

libs/ui/.storybook/preview.js

@@ -1,16 +1,12 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
-import { moduleMetadata } from '@storybook/angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+import { applicationConfig } from '@storybook/angular';
 
 export const decorators = [
-  moduleMetadata({
-    imports: [
-      BrowserAnimationsModule,
-      ReactiveFormsModule,
-      RouterTestingModule,
-      HttpClientTestingModule,
-    ],
+  applicationConfig({
+    imports: [ReactiveFormsModule, RouterModule, HttpClientTestingModule],
+    providers: [provideAnimations()],
   }),
 ];

libs/ui/project.json

@@ -6,7 +6,7 @@
   "prefix": "ng-filmpire",
   "targets": {
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "libs/ui/jest.config.ts",
@@ -20,7 +20,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["libs/ui/**/*.ts", "libs/ui/**/*.html"]

libs/ui/src/lib/featured-media-slider/featured-media-slider.component.stories.ts

@@ -1,10 +1,10 @@
+import { MaterialModule } from '@ng-filmpire/material';
 import {
   Meta,
   componentWrapperDecorator,
   moduleMetadata,
 } from '@storybook/angular';
 import { FeaturedMediaSliderComponent } from './featured-media-slider.component';
-import { MaterialModule } from '@ng-filmpire/material';
 
 export default {
   title: 'FeaturedMediaSliderComponent',