Merge pull request #42 from shiftcode/#23-angular19-new

Update to Angular19

.github/workflows/main.yml

@@ -62,7 +62,7 @@ jobs:
           REGISTRY_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       # install dependencies
       - name: Install
-        run: HUSKY=0 npm ci
+        run: HUSKY=0 npm ci  --include=optional
       # lint
       - name: Lint
         run: npm run lint:ci

.gitignore

@@ -8,6 +8,11 @@ apps/**/dist
 apps/**/coverage
 /out-tsc
 
+#eslint cache
+libs/aws/.eslintcache
+libs/components/.eslintcache
+libs/core/.eslintcache
+.eslintcache
 # dependencies
 /node_modules
 

README.md

@@ -19,6 +19,7 @@ Shows the mapping between the angular version and our lib versions.
 
 | Angular Version | Lib Version |
 |-----------------|-------------|
+| `^19`           | `^7`        | 
 | `^18`           | `^6`        | 
 | `^17`           | `^5`        |
 | `^16`           | `^4`        |

angular.json

@@ -66,11 +66,12 @@
       "prefix": "sg",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "apps/styleguide/dist",
+            "outputPath": {
+              "base": "apps/styleguide/dist"
+            },
             "index": "apps/styleguide/src/index.html",
-            "main": "apps/styleguide/src/main.ts",
             "tsConfig": "apps/styleguide/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "polyfills": [
@@ -83,16 +84,15 @@
             "styles": [
               "apps/styleguide/src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "apps/styleguide/src/main.ts"
           },
           "configurations": {
             "production": {
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -166,17 +166,14 @@
       "displayBlock": true,
       "changeDetection": "OnPush",
       "viewEncapsulation": "None",
-      "skipTests": true,
-      "standalone": true
+      "skipTests": true
     },
     "@schematics/angular:directive": {
       "prefix": "sc",
-      "skipTests": true,
-      "standalone": true
+      "skipTests": true
     },
     "@schematics/angular:pipe": {
-      "skipTests": true,
-      "standalone": true
+      "skipTests": true
     },
     "@schematics/angular:service": {
       "skipTests": true

apps/styleguide/.eslintrc.cjs

@@ -0,0 +1,31 @@
+module.exports = {
+  // automatically extends root eslint-config (which extends @shiftcode/eslint-config-recommended for TS)
+  extends: ['@shiftcode/eslint-config-recommended/ng-config'],
+  ignorePatterns: ['src/assets/**/*'],
+  overrides: [
+    {
+      plugins: ['@shiftcode/rules'],
+      files: ['*.ts'],
+      rules: {
+        'import/no-extraneous-dependencies': ['error', { packageDir: '../..' }],
+        'import/no-internal-modules': [
+          'error',
+          {
+            allow: ['rxjs/*'],
+          },
+        ],
+      },
+    },
+  ],
+  parserOptions: {
+    project: ['./tsconfig.eslint.json'],
+    tsconfigRootDir: __dirname,
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    env: {
+      browser: true,
+      node: true,
+      es6: true,
+    },
+  },
+}

apps/styleguide/.lintstagedrc.yml

@@ -0,0 +1,8 @@
+"*.{ts,html}":
+  - npm run prettier:staged
+  - npm run lint:staged
+src/**/*.scss:
+  - npm run prettier:staged
+# sort package.json keys
+./package.json:
+  - sort-package-json

apps/styleguide/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@shiftcode/styleguide",
+  "private": true,
+  "scripts": {
+    "lint": "npm run lint:ci -- --fix",
+    "lint:ci": "eslint ./src",
+    "lint:staged": "eslint --fix",
+    "prettier": "prettier --write --config ../../.prettierrc.yml 'src/**/*.{ts,html,scss}'",
+    "prettier:staged": "prettier --write --config ../../.prettierrc.yml"
+  }
+}

apps/styleguide/src/app/app.component.html

@@ -2,9 +2,11 @@
 <div class="app">
   <nav class="app__nav">
     <ul>
-      <li *ngFor="let link of navItems">
-        <a [routerLink]="[basePath, link.path]">{{link.title}}</a>
-      </li>
+      @for (link of navItems; track link) {
+        <li>
+          <a [routerLink]="[basePath, link.path]">{{ link.title }}</a>
+        </li>
+      }
     </ul>
   </nav>
   <div class="app__content">

apps/styleguide/src/app/app.component.scss

@@ -19,7 +19,6 @@
     }
 
     li {
-
     }
 
     a {
@@ -40,7 +39,6 @@
     }
   }
 
-
   ::ng-deep {
     h2 {
       font-size: 24px;

apps/styleguide/src/app/app.component.ts

@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterLink, RouterOutlet } from '@angular/router'
 import { FlyingFocusComponent } from '@shiftcode/ngx-components'
@@ -7,8 +6,7 @@ import { SUB_ROUTES } from '../routes/routes.const'
 
 @Component({
   selector: 'sg-root',
-  standalone: true,
-  imports: [NgFor, RouterLink, RouterOutlet, FlyingFocusComponent],
+  imports: [RouterLink, RouterOutlet, FlyingFocusComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/styleguide/src/index.html

@@ -1,32 +1,32 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Styleguide</title>
-  <base href="/">
+  <head>
+    <meta charset="utf-8" />
+    <title>Styleguide</title>
+    <base href="/" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <style type="text/css">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <style type="text/css">
+      html {
+        box-sizing: border-box;
+      }
 
-    html {
-      box-sizing: border-box;
-    }
+      body,
+      html {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
 
-    body, html {
-      width: 100%;
-      height: 100%;
-      margin: 0
-    }
-
-    html {
-      overflow-x: hidden;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch
-    }
-  </style>
-</head>
-<body>
-<sg-root></sg-root>
-</body>
+      html {
+        overflow-x: hidden;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+      }
+    </style>
+  </head>
+  <body>
+    <sg-root></sg-root>
+  </body>
 </html>

apps/styleguide/src/main.ts

@@ -15,11 +15,9 @@ bootstrapApplication(AppComponent, {
     provideRouter(ROUTES),
 
     provideLocalStorage({ prefix: 'sg.' }),
-    provideLogger(
-      withBrowserConsoleTransport(() => ({ logLevel: LogLevel.DEBUG })),
-    ),
+    provideLogger(withBrowserConsoleTransport(() => ({ logLevel: LogLevel.DEBUG }))),
     provideNavigationClassHandler('sg-navigating'),
     provideSgConfig(),
   ],
-})
-  .catch((err) => console.error(err))
+  // eslint-disable-next-line no-console
+}).catch((err) => console.error(err))

apps/styleguide/src/provide-sg-config.ts

@@ -1,7 +1,6 @@
 import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core'
 import { TOOLTIP_DEFAULT_OPTIONS, TooltipOptions } from '@shiftcode/ngx-components'
 
-
 export function provideSgConfig(): EnvironmentProviders {
   return makeEnvironmentProviders([
     // tooltip

apps/styleguide/src/routes/routes.const.ts

@@ -26,10 +26,7 @@ export const SUB_ROUTES = [
 export const ROUTES = [
   {
     path: 'styleguide',
-    children: [
-      ...SUB_ROUTES,
-      { path: '**', redirectTo: SUB_ROUTES[0].path },
-    ],
+    children: [...SUB_ROUTES, { path: '**', redirectTo: SUB_ROUTES[0].path }],
   },
   { path: '**', redirectTo: 'styleguide' },
 ] satisfies Routes

apps/styleguide/src/routes/sg-autofocus/sg-autofocus.component.html

@@ -1,5 +1,5 @@
 <h2 scAutoFocus>Autofocus</h2>
-<p> can be used to set the focus on route change to any element (like titles for a11y)</p>
+<p>can be used to set the focus on route change to any element (like titles for a11y)</p>
 
 <button tabindex="0">button 0</button>
 <button tabindex="0">button 1</button>

apps/styleguide/src/routes/sg-autofocus/sg-autofocus.component.scss

@@ -5,7 +5,6 @@
 
   button {
     padding: 12px;
-
   }
 
   *:focus {

apps/styleguide/src/routes/sg-autofocus/sg-autofocus.component.ts

@@ -5,7 +5,6 @@ import { AutoFocusDirective } from '@shiftcode/ngx-components'
   selector: 'sg-sg-autofocus',
   templateUrl: './sg-autofocus.component.html',
   styleUrls: ['./sg-autofocus.component.scss'],
-  standalone: true,
   imports: [AutoFocusDirective],
   encapsulation: ViewEncapsulation.Emulated,
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/styleguide/src/routes/sg-button/sg-button.component.html

@@ -2,14 +2,16 @@ <h2>SC Button (custom button component)</h2>
 <p>Why is that? Check out the behaviour in Safari &#64; MacOS (does not gain focus on click) vs. Firefox/Chrome.</p>
 
 <div class="sg-button__buttons">
-
-  <button id="btn-1" class="sg-button__btn" (click)="counter1 = counter1 + 1">native button (clicked: {{counter1}})
+  <button id="btn-1" class="sg-button__btn" (click)="counter1 = counter1 + 1">
+    native button (clicked: {{ counter1 }})
   </button>
 
-  <sc-button id="btn-2" class="sg-button__btn" (action)="counter2 = counter2 + 1">sc-button (clicked: {{counter2}})
+  <sc-button id="btn-2" class="sg-button__btn" (action)="counter2 = counter2 + 1"
+    >sc-button (clicked: {{ counter2 }})
   </sc-button>
 
-  <sc-button id="btn-3" class="sg-button__btn" (action)="counter3 = counter3 + 1">sc-button (clicked: {{counter3}})
+  <sc-button id="btn-3" class="sg-button__btn" (action)="counter3 = counter3 + 1"
+    >sc-button (clicked: {{ counter3 }})
   </sc-button>
 </div>
-<p>active element: {{activeEl}}</p>
+<p>active element: {{ activeEl }}</p>

apps/styleguide/src/routes/sg-button/sg-button.component.scss

@@ -25,31 +25,42 @@
       padding: 4px 12px;
     }
 
-
     &:hover {
-      &:after {content: 'hover';}
+      &:after {
+        content: 'hover';
+      }
     }
-    &:active { // overrides focus and hover
-      &:after {content: 'active';}
+    &:active {
+      // overrides focus and hover
+      &:after {
+        content: 'active';
+      }
     }
     &:focus {
-      &:after {content: 'focus';}
+      &:after {
+        content: 'focus';
+      }
     }
 
     &:hover:active {
-      &:after {content: 'hover, active';}
+      &:after {
+        content: 'hover, active';
+      }
     }
     &:focus:hover {
-      &:after {content: 'focus, hover';}
+      &:after {
+        content: 'focus, hover';
+      }
     }
     &:focus:active {
-      &:after {content: 'focus, active';}
+      &:after {
+        content: 'focus, active';
+      }
     }
     &:hover:focus:active {
-      &:after {content: 'focus, hover, active';}
+      &:after {
+        content: 'focus, hover, active';
+      }
     }
-
-
   }
-
 }

apps/styleguide/src/routes/sg-button/sg-button.component.ts

@@ -1,11 +1,10 @@
 import { DOCUMENT } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Inject, OnDestroy, Optional } from '@angular/core'
-import { ButtonComponent, SvgComponent, TooltipDirective } from '@shiftcode/ngx-components'
+import { ButtonComponent } from '@shiftcode/ngx-components'
 
 @Component({
   selector: 'sg-button',
-  standalone: true,
-  imports: [ButtonComponent, SvgComponent, TooltipDirective],
+  imports: [ButtonComponent],
   templateUrl: './sg-button.component.html',
   styleUrls: ['./sg-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27,7 +26,6 @@ export class SgButtonComponent implements OnDestroy {
     this.intervalId = setInterval(this.updateActiveEl, 100)
   }
 
-
   ngOnDestroy(): void {
     clearInterval(this.intervalId)
   }