INT-3274: Upgrade to Angular 17

.browserslistrc

@@ -0,0 +1,4 @@
+>0.2%
+not dead
+not ie > 0
+not op_mini all

.eslintrc.json

@@ -43,5 +43,8 @@
         "semi": "error"
       }
     }
+  ],
+  "extends": [
+    "plugin:storybook/recommended"
   ]
-}
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -9,7 +9,7 @@ assignees: ''
 
 **What is the current behavior?**
 
-**Please provide the steps to reproduce and if possible a minimal demo of the problem via [codesandbox.io](https://codesandbox.io/s/6zlmmkkk1n?fontsize=14) or similar.**
+**Please provide the steps to reproduce and if possible a minimal demo of the problem via [codesandbox.io](https://codesandbox.io/p/sandbox/elegant-pare-6sxwqz?file=src/app/app.component.ts) or similar.**
 
 **What is the expected behavior?**
 

.gitignore

@@ -9,3 +9,4 @@
 /node_modules
 /out*
 /.angular/cache
+storybook-static

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/angular";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/angular",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  core: {
+    disableTelemetry: true
+  }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/angular";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/tsconfig.json

@@ -5,6 +5,11 @@
     // Since it throws an error:
     // ERROR TS2536: Type 'K' cannot be used to index type 'HTMLElementTagNameMap'.
     // ERROR in @ephox/sugar/lib/main/ts/ephox/sugar/api/dom/Replication.d.ts
-    "skipLibCheck": true
-  }
+    "skipLibCheck": true,
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "target": "ES2022"
+  },
+  "include": ["../stories/**/*.ts", "./preview.ts"]
 }

CHANGELOG.md

@@ -5,8 +5,17 @@ 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
+
+## 7.1.1 - 2024-04-04
 ### Fixed
 - Updated CI library to latest
+- Updated dependencies. #INT-3274
+- Usage of RxJS deprecated operators. #INT-3274
+### Added
+- Support for Angular 15, 16 & 17. #INT-3274
+- Support for the OnPush change detection strategy. #INT-2974
+### Improved
+- Updated Storybook to v8, as well as now using CSFv3 components. #INT-3274
 
 ## 7.0.0 - 2022-06-27
 ### Added

Jenkinsfile

@@ -1,32 +1,36 @@
 #!groovy
 @Library('waluigi@release/7') _
 
-beehiveFlowBuild(
-    container: [
-      tag: '18',
-      resourceRequestMemory: '4Gi',
-      resourceLimitCpu: '4',
-      resourceLimitMemory: '4Gi'
-    ],
-    test: {
-      bedrockBrowsers(testDirs: [ "tinymce-angular-component/src/test/ts/browser" ])
-    },
-    customSteps: {
-      stage("storybook") {
-        def status = beehiveFlowStatus();
-        if (status.branchState == 'releaseReady' && status.isLatest) {
-          sshagent (credentials: ['ccde5b3d-cf13-4d70-88cf-ae1e6dfd4ef4']) {
-            sh 'yarn storybook-to-ghpages'
-          }
-        } else {
-          echo "Skipping publish as is not latest release"
-          sh 'yarn storybook-to-ghpages --dry-run'
+mixedBeehiveFlow(
+  testPrefix: 'Tiny-Angular',
+  testDirs: [ "tinymce-angular-component/src/test/ts/browser" ],
+  platforms: [
+    [ browser: 'chrome', headless: true ],
+    [ browser: 'firefox', provider: 'aws', buckets: 1 ],
+    [ browser: 'safari', provider: 'lambdatest', os: 'macOS Sonoma', buckets: 1 ]
+  ],
+  testContainer: [
+    tag: '20',
+    resourceRequestMemory: '4Gi',
+    resourceLimitCpu: '4',
+    resourceLimitMemory: '4Gi'
+  ],
+  customSteps: {
+    stage("storybook") {
+      def status = beehiveFlowStatus()
+      if (status.branchState == 'releaseReady' && status.isLatest) {
+        sshagent (credentials: ['3e856116-029e-4c8d-b57d-593b2fba3cb2']) {
+          exec('yarn storybook-to-ghpages')
         }
+      } else {
+        echo "Skipping as is not latest release"
       }
-    },
-    publish: {
-      tinyNpm.withNpmPublishCredentials('dist/tinymce-angular') {
-        sh "yarn beehive-flow publish --working-dir dist/tinymce-angular"
-      }
     }
+  },
+  publish: {
+    sh "yarn build"
+    tinyNpm.withNpmPublishCredentials('dist/tinymce-angular') {
+      sh "yarn beehive-flow publish --working-dir dist/tinymce-angular"
+    }
+  }
 )

angular.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "projects": {
+    "angular": {
+      "projectType": "library",
+      "root": "",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/tinymce-angular",
+            "index": "",
+            "main": "",
+            "tsConfig": "tsconfig.json"
+          }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "angular:build",
+            "compodoc": false,
+            "port": 9001
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "angular:build",
+            "compodoc": false,
+            "outputDir": "storybook-static"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false,
+    "packageManager": "yarn"
+  }
+}

package.json

@@ -4,68 +4,73 @@
   "license": "MIT",
   "scripts": {
     "preinstall": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"",
-    "storybook": "yarn start-storybook -p 9001 -c .storybook",
     "test": "yarn bedrock-auto -b chrome-headless -f tinymce-angular-component/src/test/ts/**/*Test.ts",
     "test-manual": "bedrock -f tinymce-angular-component/src/test/ts/**/*Test.ts",
     "clean": "yarn rimraf dist",
     "lint": "eslint tinymce-angular-component/src/**/*.ts stories/**/*.ts",
     "build": "yarn run clean && ng-packagr -p tinymce-angular-component/ng-package.json && json -I -f dist/tinymce-angular/package.json -e 'this.version=process.env.npm_package_version' && copyfiles README.md dist/tinymce-angular/",
-    "postinstall": "ngcc --properties es2015 browser module main"
+    "storybook": "ng run angular:storybook",
+    "build-storybook": "ng run angular:build-storybook",
+    "deploy-storybook": "yarn build-storybook && gh-pages -d ./storybook-static -u 'tiny-bot <[email protected]>'"
   },
   "private": true,
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.4",
-    "@angular-devkit/core": "^14.0.4",
-    "@angular/animations": "^14.0.4",
-    "@angular/cdk": "^14.0.4",
-    "@angular/cli": "^14.0.4",
-    "@angular/common": "^14.0.4",
-    "@angular/compiler": "^14.0.4",
-    "@angular/compiler-cli": "^14.0.4",
-    "@angular/core": "^14.0.4",
-    "@angular/forms": "^14.0.4",
-    "@angular/language-service": "^14.0.4",
-    "@angular/material": "^14.0.4",
-    "@angular/platform-browser": "^14.0.4",
-    "@angular/platform-browser-dynamic": "^14.0.4",
-    "@babel/core": "^7.14.0",
-    "@ephox/agar": "^7.1.1",
-    "@ephox/bedrock-client": "^13.0.0",
-    "@ephox/bedrock-server": "^13.2.1",
-    "@ephox/sugar": "^9.0.3",
-    "@storybook/addon-notes": "~5.3.21",
-    "@storybook/angular": "6.5.9",
-    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/manager-webpack5": "6.5.9",
-    "@storybook/storybook-deployer": "^2.8.12",
+    "@angular-devkit/build-angular": "^17.3.1",
+    "@angular-devkit/core": "^17.3.1",
+    "@angular/animations": "^17.3.1",
+    "@angular/cdk": "^17.3.1",
+    "@angular/cli": "^17.3.1",
+    "@angular/common": "^17.3.1",
+    "@angular/compiler": "^17.3.1",
+    "@angular/compiler-cli": "^17.3.1",
+    "@angular/core": "^17.3.1",
+    "@angular/forms": "^17.3.1",
+    "@angular/language-service": "^17.3.1",
+    "@angular/material": "^17.3.1",
+    "@angular/platform-browser": "^17.3.1",
+    "@angular/platform-browser-dynamic": "^17.3.1",
+    "@babel/core": "^7.24.3",
+    "@ephox/agar": "^8.0.1",
+    "@ephox/bedrock-client": "^14.1.1",
+    "@ephox/bedrock-server": "^14.1.3",
+    "@ephox/sugar": "^9.3.1",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/angular": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/test": "^8.0.4",
     "@tinymce/beehive-flow": "^0.19.0",
-    "@tinymce/eslint-plugin": "^2.0.1",
-    "@tinymce/miniature": "^5.0.1",
-    "@types/node": "^18.6.1",
-    "autoprefixer": "^8.1.0",
-    "babel-loader": "^8.2.2",
-    "codelyzer": "^5.0.1",
+    "@tinymce/eslint-plugin": "^2.3.1",
+    "@tinymce/miniature": "^6.0.0",
+    "@types/node": "^20.11.30",
+    "autoprefixer": "^10.4.19",
+    "babel-loader": "^9.1.3",
+    "codelyzer": "^6.0.2",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.19.3",
+    "core-js": "^3.36.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "gh-pages": "^6.1.0",
     "json": "11.0.0",
-    "ng-packagr": "^14.0.3",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "regenerator-runtime": "^0.13.7",
-    "rimraf": "^3.0.2",
-    "rxjs": "^7.4.0",
+    "ng-packagr": "^17.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "regenerator-runtime": "^0.14.1",
+    "rimraf": "^5.0.5",
+    "rxjs": "^7.8.1",
+    "storybook": "^8.0.4",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
     "tinymce-6": "npm:tinymce@^6",
     "to-string-loader": "^1.1.5",
-    "tslib": "^2.4.0",
-    "typescript": "~4.7.4",
-    "webpack": "^5.64.1",
-    "zone.js": "~0.11.4"
+    "tslib": "^2.6.2",
+    "typescript": "~5.4.3",
+    "webpack": "^5.91.0",
+    "zone.js": "~0.14.4"
   },
   "dependencies": {
     "tinymce": "^5.10.7"
   },
-  "version": "7.0.1-rc",
+  "version": "7.1.1-rc.2",
   "name": "@tinymce/tinymce-angular"
 }