INT-3274: Upgrade to Angular 17 (#367)

* INT-3274: Updated bug_report template

* INT-3274: Updated deps to Angular 17 and fixed tests

* INT-3274: Added new storybook dependencies

* INT-3274: Added angular.json for storybook compat

* INT-3274: Added .browserslistrc

* INT-3274: Migrated stories to new v7 storybook format

* INT-3274: Added `preinstall` back

* INT-3274: Eslint fix

* INT-3274: Moved target change to storybook specific tsconfig, and put back comment

* INT-3274: Reverted unnecessary format

* INT-3274: Edited comment

* INT-3274: Trimmed out unnecessary builds and props from `angular.json`

* INT-3274: Add gh-pages for storybook deployment

* INT-3274: Patch angular update

* INT-3274: Removed old tslint ignore

* INT-3274: Fix rxjs deprecated usage

* INT-3274: Recreated yarn.lock

* INT:3274: Use node v20 for Jenkins CI

* INT-3274: Disable storybook telemetry

* INT-3274: Removed react dev dependencies

* INT-3274: Added react and react-dom back as they're peer dependencies of storybook addons

* INT-3274: Fixed storybook warnings about included unused imports

* INT-3274: Upgrade dependencies

* INT-3274: Added changelog entries

* INT-3274: Updated issue template code sandbox

* INT-3274: Remove zone.js-11 dependency

* INT-3274: Use waluigi v7

* INT-3274: Bumb minor version

* INT-3274: Added publish step back again

* INT-3274: Add testContainer arg

* INT-3274: Add "yarn build" step

* INT-2974: Support OnPush change detection (#368)

* INT-2974: Now uses OnPush change detection

* INT-2974: Added a story to show support for OnPush change detection form/parent element

* INT-2974: Added changelog entry

* INT-3274: Bumb patch version

As feature/INT-2974 used 7.1.0-rc tag already

* INT-3274: rc.2

* INT-3274: Change `6-dev` loading test to use `6` instead

* INT-3274: Refactored to `isObserved` fn

* INT-3274: Simplified the ScriptLoader to use plain rxjs

---------

Co-authored-by: Andrew Herron <[email protected]>

Author: danoaky-tiny

.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.js

@@ -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/main.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/preview.ts

@@ -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"]
 }

.storybook/tsconfig.json

@@ -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

CHANGELOG.md

@@ -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"
+    }
+  }
 )