chore: upgrade angular version to 17.2 EBS-1380 STPA-343 (#229)

* chore: nx repair

* chore: migrate to nx 15.5.0 from 15.4.5

* fix(cypress): table-card test to be compatible with cypress v12

* fix(cypress): table test to be compatible with cypress v12

* fix(cypress): reorderable-list test to be compatible with cypress v12

* chore: upgrade node and typescript

* chore: migrate to nx 15.8.0 from 15.5.0

* chore: migrate to nx 16.1.0 from 15.8.0

* fix: tsconfig types

* chore: upgrade prettier

* chore: upgrade jest

* chore: upgrade storybook to 7.2.2

* fix(storybook): rename list.stories.mdx to list.mdx

* chore(storybook): refactor main files from js to ts and use ESM format

* chore(storybook): refactor preview from js to ts and use ESM format

* chore(storybook): upgrade storybook addons

* chore: upgrade jest-preset-angular, axe-storybook-testing, sanitize-html; add eslint-plugin-storybook

* chore: upgrade cypress-storybook

* chore: use raw md file type in circle stories

* chore: set eslint allowCircularSelfDependency to true

* chore: migrate to nx 16.4.0 from 16.1.0

* chore: migrate to nx 16.7.0 from 16.4.0

* fix(ui): ivy compiler 'used before initialization' problems in toast and datepicker components

* chore: migrate to nx 17.1.1 from 16.7.0

* chore: remove workspace-lint usage, since the command is removed from nx 17

* chore: remove workspace-lint usage, since the command is removed starting from nx 17

* chore: migrate to nx 17.3.1 from 17.1.1

* chore: migrate to nx 18.1.1 from 17.3.1

* chore: upgrade node

* chore: libraries' peer dependencies versions

* chore: remove story sorting

* fix(storybook): installation stories

* fix(storybook): colors stories

* chore(storybook): provide BrowserAnimationsModule in preview inseatd of storybook.module import

* chore(ui): handle deprecated parameters.notes in stories

* chore: updated package-lock

* chore: updated package-lock

* chore: use addon-storysource instead of storybook-addon-html

* chore(storybook): configure preview

* fix(storybook): colors stories

* fix: markdown tables

* chore(storybook): update peer dependencies versions in angular and ng-diagrams installation stories

* fix(ui): toast.service story

* fix(cypress): table and table-card tests

* format: with updated prettier and editorconfig rules

* chore(ng-diagrams): fix lint error

* chore: allow root main.ts import to pass module-boundaries rule

* chore: fix e2e linting errors

* chore: revert notes import from .md?raw to .md

* fix(ui-e2e): circle component tests

* fix(ui): replace '@' in html story with @

* chore(ui): remove aria-busy from datepicker html story

* chore(ui): add missing aria roles to datepicker

* fix(ui): button text without underline story

* fix(ui): form item with inline form elements story

* fix(ui): use initial template for NestedTracks story

* chore(storybook): disable automatic opening of Storybook

* chore(ng-diagrams): upgrade to angular 17.2

BREAKING CHANGE: upgrade to angular 17.2

* chore(storybook): upgrade to storybook 7.6

BREAKING CHANGE: upgrade to storybook 7.6

* chore(ui): upgrade to angular 17.2

BREAKING CHANGE: upgrade to angular 17.2

* chore: remove duplicate empty line from readme

---------

Co-authored-by: Ceisi Peik <[email protected]>

.editorconfig

@@ -5,6 +5,7 @@ root = true
 charset = utf-8
 indent_style = space
 indent_size = 2
+max_line_length = 80
 insert_final_newline = true
 trim_trailing_whitespace = true
 

.eslintrc.json

@@ -1,16 +1,17 @@
 {
   "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,
-            "allow": [],
+            "allowCircularSelfDependency": true,
+            "allow": [".storybook/main"],
             "depConstraints": [
               {
                 "sourceTag": "*",
@@ -35,13 +36,14 @@
     },
     {
       "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": {}
     }
-  ]
+  ],
+  "extends": ["plugin:storybook/recommended"]
 }

.gitignore

@@ -42,6 +42,7 @@ testem.log
 Thumbs.db
 
 .angular
+.nx
 .vscode/settings.json
 libs/storybook/.storybook/documentation.json
 /build-storybook.log

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run format && npm run affected:lint && npm run workspace-lint && npm run lint:css && npm run lint:svg
+npm run format && npm run affected:lint && npm run lint:css && npm run lint:svg

.prettierignore

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

.prettierrc

@@ -1,3 +1,9 @@
 {
-  "singleQuote": true
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "semi": true,
+  "bracketSpacing": true,
+  "trailingComma": "es5",
+  "bracketSameLine": true
 }

.storybook/main.ts

@@ -0,0 +1,47 @@
+import { StorybookConfig } from '@storybook/angular';
+import remarkGfm from 'remark-gfm';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  stories: [],
+  addons: [
+    '@storybook/addon-controls',
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        loaderOptions: {
+          prettierConfig: { printWidth: 80, singleQuote: false },
+        },
+      },
+    },
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y',
+    'storybook-addon-pseudo-states',
+    '@storybook/addon-viewport',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  core: { disableTelemetry: true },
+  docs: {
+    autodocs: true,
+  },
+  // uncomment the property below if you want to apply some webpack config globally
+  // webpackFinal: async (config, { configType }) => {
+  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
+  //   // Return the altered config
+  //   return config;
+  // },
+};
+
+export default config;

apps/react-sandbox-e2e/cypress.config.ts

@@ -1,6 +1,15 @@
 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),
+  e2e: {
+    ...nxE2EPreset(__dirname),
+    /**
+     * TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
+     * This can cause tests to start breaking where not indended.
+     * You should consider enabling this once you verify tests do not depend on each other
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#Test-Isolation
+     **/
+    testIsolation: false,
+  },
 });

apps/react-sandbox-e2e/project.json

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

apps/react-sandbox/.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     [
-      "@nrwl/react/babel",
+      "@nx/react/babel",
       {
         "runtime": "automatic"
       }

apps/react-sandbox/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {

apps/react-sandbox/jest.config.ts

@@ -3,8 +3,8 @@ export default {
   displayName: 'react-sandbox',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }],
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
 };

apps/react-sandbox/project.json

@@ -5,7 +5,7 @@
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "@nrwl/webpack:webpack",
+      "executor": "@nx/webpack:webpack",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
@@ -25,7 +25,8 @@
           "libs/styles/src/lib/scss/main.scss"
         ],
         "scripts": [],
-        "webpackConfig": "@nrwl/react/plugins/webpack"
+        "webpackConfig": "apps/react-sandbox/webpack.config.js",
+        "isolatedConfig": true
       },
       "configurations": {
         "development": {
@@ -51,7 +52,7 @@
       }
     },
     "serve": {
-      "executor": "@nrwl/webpack:dev-server",
+      "executor": "@nx/webpack:dev-server",
       "defaultConfiguration": "development",
       "options": {
         "buildTarget": "react-sandbox:build",
@@ -68,18 +69,14 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["apps/react-sandbox/**/*.{ts,tsx,js,jsx}"]
-      }
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/react-sandbox/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "apps/react-sandbox/jest.config.ts"
       }
     }
   },

apps/react-sandbox/tsconfig.app.json

@@ -2,11 +2,15 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node"]
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ],
   "exclude": [
     "jest.config.ts",

apps/react-sandbox/tsconfig.spec.json

@@ -3,7 +3,12 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": [
+      "jest",
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "include": [
     "jest.config.ts",
@@ -18,7 +23,7 @@
     "src/**/*.d.ts"
   ],
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
   ]
 }

apps/react-sandbox/webpack.config.js

@@ -0,0 +1,15 @@
+const { composePlugins, withNx } = require('@nx/webpack');
+const { withReact } = require('@nx/react');
+
+// Nx plugins for webpack.
+module.exports = composePlugins(
+  withNx(),
+  withReact(),
+  (config, { options, context }) => {
+    // Update the webpack config as needed here.
+    // e.g. config.plugins.push(new MyPlugin())
+    // For more information on webpack config and Nx see:
+    // https://nx.dev/packages/webpack/documents/webpack-config-setup
+    return config;
+  }
+);

apps/ria-e2e/cypress.config.ts

@@ -1,6 +1,15 @@
 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(__filename),
+  e2e: {
+    ...nxE2EPreset(__filename),
+    /**
+     * TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
+     * This can cause tests to start breaking where not indended.
+     * You should consider enabling this once you verify tests do not depend on each other
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#Test-Isolation
+     **/
+    testIsolation: false,
+  },
 });

apps/ria-e2e/project.json

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