feat: provide angular 15 showcase

.github/dependabot.yml

@@ -58,6 +58,31 @@ updates:
           - '@commitlint*'
           - '@babel*'
 
+  - package-ecosystem: 'npm'
+    directory: '/showcase/angular-lts-showcase'
+    open-pull-requests-limit: 10
+    schedule:
+      interval: 'daily'
+      time: '04:00'
+      timezone: 'Europe/Berlin'
+    ignore:
+      - dependency-name: 'ng-packagr'
+        update-types: ['version-update:semver-major']
+      # Especially as we're using multiple major versions of Angular, we want to update the major version by ourselves
+      - dependency-name: '@angular/cli'
+        update-types: ['version-update:semver-major']
+      - dependency-name: '@angular/core'
+        update-types: ['version-update:semver-major']
+      - dependency-name: '@angular/compiler'
+        update-types: ['version-update:semver-major']
+      - dependency-name: '@angular/common'
+        update-types: ['version-update:semver-major']
+      - dependency-name: '@angular/forms'
+        update-types: ['version-update:semver-major']
+      - dependency-name: '@angular/platform-browser-dynamic'
+        update-types: ['version-update:semver-major']
+    pull-request-branch-name:
+      separator: '-'
   - package-ecosystem: 'npm'
     directory: '/showcase/angular-lts-minus-1-showcase'
     open-pull-requests-limit: 10

.github/labeler.yml

@@ -24,6 +24,10 @@ react:
 vue:
   - packages/db-ui-elements-vue/**
 
+# Add 'angular-lts-showcase' label to any file changes for angular-lts-showcase
+angular-lts-showcase:
+  - showcase/angular-lts-showcase/**
+
 # Add 'angular-lts-minus-1-showcase' label to any file changes for angular-lts-minus-1-showcase
 angular-lts-minus-1-showcase:
   - showcase/angular-lts-minus-1-showcase/**

.github/workflows/01-build-all.yml

@@ -17,7 +17,7 @@ jobs:
 
       - name: 👩‍🍳 Bake everything (StoryBook, Playground & Showcases)
         run: |
-          node scripts/build angular-lts-minus-1,react,vue,playground,reactwind withShowcase
+          node scripts/build angular-lts-minus-1,angular-lts,react,vue,playground,reactwind withShowcase
           npm run build:storybook
 
       - name: ⬆ Upload build

.github/workflows/01-build-showcases.yml

@@ -11,7 +11,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        showcases: [angular-lts-minus-1, playground, react, reactwind, vue]
+        showcases:
+          [angular-lts-minus-1, angular-lts, playground, react, reactwind, vue]
     steps:
       - name: ⬇ Checkout repo
         uses: actions/checkout@v4
@@ -22,6 +23,9 @@ jobs:
       - name: ↔ Get download params for showcase
         run: |
           if echo ${{ matrix.showcases }} | grep -c "angular-lts-minus-1"
+          then
+            echo "framework=angular" >> $GITHUB_OUTPUT
+          elif echo ${{ matrix.showcases }} | grep -c "angular-lts"
           then
             echo "framework=angular" >> $GITHUB_OUTPUT
           elif echo ${{ matrix.showcases }} | grep -c "playground"

.github/workflows/01-build-storybook.yml

@@ -27,12 +27,18 @@ jobs:
           name: stencil-default-angular
           path: packages/db-ui-elements-stencil
 
-      - name: ⬇ Download Showcase Angular LTS v.14 dist folder
+      - name: ⬇ Download Showcase Angular LTS -1 dist folder
         uses: ./.github/actions/download-tar-artifact
         with:
           name: showcase-angular-lts-minus-1
           path: showcase/angular-lts-minus-1-showcase/dist
 
+      - name: ⬇ Download Showcase Angular LTS dist folder
+        uses: ./.github/actions/download-tar-artifact
+        with:
+          name: showcase-angular-lts
+          path: showcase/angular-lts-showcase/dist
+
       - name: ⬇ Download Showcase playground dist folder
         uses: ./.github/actions/download-tar-artifact
         with:
@@ -62,6 +68,7 @@ jobs:
           VERSION: ${{ inputs.tag }}
         run: |
           mv showcase/angular-lts-minus-1-showcase/dist/angular-lts-minus-1-showcase packages/db-ui-elements-stencil/www/angular-lts-minus-1-showcase
+          mv showcase/angular-lts-showcase/dist/angular-lts-showcase packages/db-ui-elements-stencil/www/angular-lts-showcase
           mv showcase/playground-showcase/dist/playground-showcase packages/db-ui-elements-stencil/www/playground-showcase
           mv showcase/react-showcase/dist/react-showcase packages/db-ui-elements-stencil/www/react-showcase
           mv showcase/reactwind-showcase/dist/reactwind-showcase packages/db-ui-elements-stencil/www/reactwind-showcase

.vscode/extensions.json

@@ -5,6 +5,6 @@
     "streetsidesoftware.code-spell-checker",
     "html-validate.vscode-html-validate",
     "deque-systems.vscode-axe-linter",
-		"esbenp.prettier-vscode"
+    "esbenp.prettier-vscode"
   ]
 }

README.md

@@ -58,6 +58,7 @@ If you miss a component than [contribute](CONTRIBUTING.md), please.
 ## Framework showcases
 
 * [DB UI Elements with React (CRA)](showcase/react-showcase/README.md)
+* [DB UI Elements with Angular 15](showcase/angular-lts-showcase/README.md)
 * [DB UI Elements with Angular 14](showcase/angular-lts-minus-1-showcase/README.md)
 * [DB UI Elements with Vue](showcase/vue-showcase/README.md)
 

doc/howto-angular.md

@@ -127,6 +127,8 @@ There are 3 ways to use Events in Angular:
 
 ### Example
 
-[Angular Showcase GitHub](https://github.com/db-ui/elements/tree/main/showcase/angular-lts-minus-1-showcase)
+[Angular v.15 Showcase GitHub](https://github.com/db-ui/elements/tree/main/showcase/angular-lts-showcase)
+[Angular v.15 Showcase App](https://db-ui.github.io/elements/angular-lts-showcase/)
 
-[Angular Showcase App](https://db-ui.github.io/elements/angular-lts-minus-1-showcase/)
+[Angular v.14 Showcase GitHub](https://github.com/db-ui/elements/tree/main/showcase/angular-lts-minus-1-showcase)
+[Angular v.14 Showcase App](https://db-ui.github.io/elements/angular-lts-minus-1-showcase/)

e2e/cypress/e2e/99-1-showcases/showcases-tables.cy.js

@@ -1,31 +1,30 @@
 context('showcase', () => {
-  const showcases = require('../../fixtures/showcases.json');
+  const showcases = ['angular-lts-minus-1', 'angular-lts'];
 
-  //showcases.forEach((showcase) => {
-  const showcase = 'angular-lts-minus-1';
-  it(`${showcase}: Test Tables`, () => {
-    cy.showcaseGoto(showcase, 'Tables');
+  showcases.forEach((showcase) => {
+    it(`${showcase}: Test Tables`, () => {
+      cy.showcaseGoto(showcase, 'Tables');
 
-    // 1. DbPagination
-    cy.get('db-pagination > nav > ol > li').eq(6).contains('…');
-    cy.get('db-pagination > nav > ol > li > button')
-      .eq(2)
-      .invoke('attr', 'aria-current')
-      .should('eq', 'page');
-    Array.from(Array(7)).forEach(() => {
-      cy.get('db-pagination > nav > ol > li > button').last().click();
-    });
-    cy.get('db-pagination > nav > ol > li > button')
-      .eq(7)
-      .invoke('attr', 'aria-current')
-      .should('eq', 'page');
+      // 1. DbPagination
+      cy.get('db-pagination > nav > ol > li').eq(6).contains('…');
+      cy.get('db-pagination > nav > ol > li > button')
+        .eq(2)
+        .invoke('attr', 'aria-current')
+        .should('eq', 'page');
+      Array.from(Array(7)).forEach(() => {
+        cy.get('db-pagination > nav > ol > li > button').last().click();
+      });
+      cy.get('db-pagination > nav > ol > li > button')
+        .eq(7)
+        .invoke('attr', 'aria-current')
+        .should('eq', 'page');
 
-    // 2. Table
+      // 2. Table
 
-    cy.get('table').eq(0).find('td').should('have.length', 6);
-    cy.get('table').eq(1).find('td').should('have.length', 6);
+      cy.get('table').eq(0).find('td').should('have.length', 6);
+      cy.get('table').eq(1).find('td').should('have.length', 6);
 
-    //
+      //
+    });
   });
-  //});
 });

e2e/cypress/fixtures/showcases.json

@@ -1 +1 @@
-["angular-lts-minus-1", "react", "vue"]
+["angular-lts-minus-1", "angular-lts", "react", "vue"]

package.json

@@ -2,7 +2,7 @@
   "name": "@db-ui/elements-monorepo",
   "version": "0.0.0",
   "scripts": {
-    "prepare": "cd showcase/react-showcase && npm i && cd ../angular-lts-minus-1-showcase && npm i && cd ../vue-showcase && npm i && cd ../playground-showcase && npm i && cd ../../ && husky install",
+    "prepare": "cd showcase/react-showcase && npm i && cd ../angular-lts-minus-1-showcase && npm i && cd ../angular-lts-showcase && npm i && cd ../vue-showcase && npm i && cd ../playground-showcase && npm i && cd ../../ && husky install",
     "start": "concurrently  \"npm run build.watch.enterprise --workspace=@db-ui/elements\" \"npm run start:storybook\"",
     "start:storybook": "start-storybook -c .storybook -p 6006 --ci",
     "watch:showcase:react": "concurrently  \"npm run build.watch.local --workspace=@db-ui/elements\" \"npm run watch --workspace=@db-ui/react-elements\"",
@@ -15,7 +15,7 @@
     "cypress": "npx cypress run --project ./e2e --env type=actual",
     "cypress:watch": "npx cypress open --project ./e2e --env type=actual",
     "cypress:ci": "start-server-and-test start:storybook http://localhost:6006 cypress",
-    "cypress:full": "node scripts/build angular-lts-minus-1,playground,react,reactwind,vue withShowcase && concurrently  \"npm run cypress:watch\" \"npm run start:storybook\"",
+    "cypress:full": "node scripts/build angular-lts-minus-1,angular-lts,playground,react,reactwind,vue withShowcase && concurrently  \"npm run cypress:watch\" \"npm run start:storybook\"",
     "cypress:snapshot:base": "npx cypress run --project ./e2e --env type=base --config screenshotsFolder=e2e/cypress/snapshots/base",
     "postcypress:snapshot:base": "rimraf --glob e2e/cypress/snapshots/base/**/*-base-*.png && node ./scripts/cypress/snapshot-helper.js",
     "lint:markdownlint": "markdownlint -c .markdown-lint.yml '**/*.md'",

packages/db-ui-elements-stencil/src/stories/showcase/showcase-angular-lts.stories.tsx

@@ -0,0 +1,14 @@
+import './showcase.css';
+
+export default {
+  title: '00-Intro/Showcases',
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export const Angular_NG_build = () => {
+  return `<div class="iframe-container">
+      <iframe src="angular-lts-showcase/index.html" height="100vh" width="100%" />
+    </div>`;
+};

scripts/review-page-helper.js

@@ -11,9 +11,15 @@ const getFrom = (framework) => {
   if (framework === 'vue') {
     return /\/vue-showcase/g;
   }
-  if (framework === 'angular') {
+  if (framework === 'angular-lts-minus-1') {
     return /\/angular-lts-minus-1-showcase/g;
   }
+  if (framework === 'angular-lts') {
+    return /\/angular-lts-showcase/g;
+  }
+  if (framework === 'angular') {
+    return /\/angular-showcase/g;
+  }
   if (framework === 'reactwind') {
     return /\/reactwind-showcase/g;
   }
@@ -44,6 +50,14 @@ const run = async () => {
         from: /url\(/g,
         to: 'url(/angular-lts-minus-1-showcase/'
       });
+      await replace({
+        files: [
+          './public/angular-lts-showcase/index.html',
+          './public/angular-lts-showcase/styles.css'
+        ],
+        from: /url\(/g,
+        to: 'url(/angular-lts-showcase/'
+      });
     }
     await replace({
       files: [