Bump to Angular 18 (#121)

* update

* schematics

* first update

* update material

* updates

* Lint

* ignore

* Fix

* standalone

* standalone end

* remove ng module

* fix test

* Fix app test

* README

Author: loicgreffier

.eslintrc.json

@@ -4,3 +4,4 @@ target
 *.iml
 node_modules
 package-lock.json
+.eslintcache

.gitignore

@@ -0,0 +1 @@
+npm run lint-staged

.husky/pre-commit

@@ -2,11 +2,19 @@
   "arrowParens": "always",
   "bracketSpacing": true,
   "endOfLine": "auto",
-  "printWidth": 140,
+  "printWidth": 120,
   "quoteProps": "consistent",
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "none",
-  "useTabs": false
-}
+  "useTabs": false,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

.huskyrc

@@ -37,7 +37,7 @@ In general, we follow the ["fork-and-pull" Git workflow](https://github.com/susa
 
 ## Style Guide
 
-### Code Style
+### Back-End
 
 We maintain a consistent code style using [Checkstyle](https://checkstyle.sourceforge.io/).
 
@@ -53,4 +53,10 @@ Before you start contributing new code, it is recommended to:
 - Install the IntelliJ [CheckStyle-IDEA](https://plugins.jetbrains.com/plugin/1065-checkstyle-idea) plugin.
 - Configure the plugin to use Suricate Widget Tester's Checkstyle configuration file.
 
-Adhering to this code style ensures consistency and helps maintain code quality throughout the project.
+### Front-End
+
+We maintain a consistent code style using [ESLint](https://eslint.org) and [Prettier](https://prettier.io).
+
+We use [Husky](https://typicode.github.io/husky/) and [Lint-Staged](https://github.com/lint-staged/lint-staged) to perform linting and formatting checks before committing.
+
+After the first `npm install`, everything should be set up automatically.

.prettierrc

@@ -9,27 +9,26 @@
       "sourceRoot": "src/main/webapp",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "target/dist/public",
+            "outputPath": {
+              "base": "target/dist/public"
+            },
             "index": "src/main/webapp/index.html",
-            "main": "src/main/webapp/main.ts",
             "tsConfig": "src/main/webapp/tsconfig.app.json",
             "polyfills": [
-              "zone.js",
-              "src/main/webapp/polyfills.ts"
+              "zone.js"
             ],
             "assets": [
               "src/main/webapp/assets"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "node_modules/normalize-scss/sass",
                 "node_modules/@fortawesome/fontawesome-free/scss"
               ]
             },
             "styles": [
-              "src/main/webapp/sass/styles.scss"
+              "src/main/webapp/styles.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
@@ -40,8 +39,7 @@
             "namedChunks": false,
             "aot": true,
             "extractLicenses": false,
-            "vendorChunk": true,
-            "buildOptimizer": true
+            "browser": "src/main/webapp/main.ts"
           },
           "configurations": {
             "production": {
@@ -68,9 +66,7 @@
               "sourceMap": true,
               "namedChunks": false,
               "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": true,
-              "buildOptimizer": true
+              "extractLicenses": true
             }
           },
           "defaultConfiguration": ""
@@ -97,21 +93,19 @@
           "options": {
             "polyfills": [
               "zone.js",
-              "zone.js/testing",
-              "src/main/webapp/polyfills.ts"
+              "zone.js/testing"
             ],
             "tsConfig": "src/main/webapp/tsconfig.spec.json",
             "assets": [
               "src/main/webapp/assets"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "node_modules/normalize-scss/sass",
                 "node_modules/@fortawesome/fontawesome-free/scss"
               ]
             },
             "styles": [
-              "src/main/webapp/sass/styles.scss"
+              "src/main/webapp/styles.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",

.readme/dashboard.png

@@ -0,0 +1,62 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
+const simpleImportSort = require('eslint-plugin-simple-import-sort');
+const unusedImports = require('eslint-plugin-unused-imports');
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    plugins: {
+      "simple-import-sort": simpleImportSort,
+      "unused-imports": unusedImports,
+    },
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+      eslintPluginPrettierRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "unused-imports/no-unused-imports": 'error',
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "suricate",
+          style: "kebab-case",
+        },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "after-used",
+          argsIgnorePattern: "^ignored",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^ignored"
+        }
+      ]
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);

CONTRIBUTING.md

@@ -10,55 +10,64 @@
     "test": "ng test",
     "test-ci": "ng test --no-watch --no-progress --code-coverage --browsers=ChromeHeadlessNoSandbox",
     "lint": "ng lint",
-    "prettyformat": "pretty-quick --staged"
+    "prepare": "husky",
+    "lint-staged": "lint-staged"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.8",
-    "@angular/cdk": "^17.0.4",
-    "@angular/common": "^17.0.8",
-    "@angular/compiler": "^17.0.8",
-    "@angular/core": "^17.0.8",
-    "@angular/forms": "^17.0.8",
-    "@angular/material": "^17.0.4",
-    "@angular/platform-browser": "^17.0.8",
-    "@angular/platform-browser-dynamic": "^17.0.8",
-    "@angular/router": "^17.0.8",
-    "@fortawesome/fontawesome-free": "^6.5.1",
-    "@katoid/angular-grid-layout": "^2.2.0",
+    "@angular/animations": "^18.2.13",
+    "@angular/cdk": "^18.2.14",
+    "@angular/common": "^18.2.13",
+    "@angular/compiler": "^18.2.13",
+    "@angular/core": "^18.2.13",
+    "@angular/forms": "^18.2.13",
+    "@angular/material": "^18.2.14",
+    "@angular/platform-browser": "^18.2.13",
+    "@angular/platform-browser-dynamic": "^18.2.13",
+    "@angular/router": "^18.2.13",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@katoid/angular-grid-layout": "^3.0.0",
     "jquery": "^3.7.1",
-    "moment": "^2.22.1",
-    "normalize-scss": "^7.0.1",
-    "rxjs": "6.5.3",
+    "moment": "^2.30.1",
+    "rxjs": "7.4.0",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.9",
-    "@angular-eslint/builder": "^17.2.0",
-    "@angular-eslint/eslint-plugin": "^17.2.0",
-    "@angular-eslint/eslint-plugin-template": "^17.2.0",
-    "@angular-eslint/schematics": "^17.2.0",
-    "@angular-eslint/template-parser": "^17.2.0",
-    "@angular/cli": "^17.0.9",
-    "@angular/compiler-cli": "^17.0.8",
+    "@angular-devkit/build-angular": "^18.2.12",
+    "@angular-eslint/builder": "^18.4.3",
+    "@angular-eslint/eslint-plugin": "^18.4.3",
+    "@angular-eslint/eslint-plugin-template": "^18.4.3",
+    "@angular-eslint/schematics": "^18.4.3",
+    "@angular-eslint/template-parser": "^18.4.3",
+    "@angular/cli": "^18.2.12",
+    "@angular/compiler-cli": "^18.2.13",
+    "@eslint/js": "^9.17.0",
     "@types/jasmine": "~5.1.4",
     "@types/node": "^20.10.2",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
-    "eslint-plugin-deprecation": "^2.0.0",
-    "husky": "^8.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "angular-eslint": "^19.0.2",
+    "eslint": "^9.8.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "husky": "^9.1.7",
     "jasmine-core": "~5.1.1",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.7.0",
+    "lint-staged": "^15.3.0",
     "prettier": "^3.2.4",
-    "pretty-quick": "^4.0.0",
-    "protractor": "~7.0.0",
+    "prettier-eslint": "^16.3.0",
     "ts-node": "~10.9.1",
-    "typescript": "~5.2.2"
+    "typescript": "~5.5.4",
+    "typescript-eslint": "^8.0.0"
+  },
+  "lint-staged": {
+    "**/*.{js,mjs,cjs,ts}": "eslint --cache --fix --max-warnings 0 src/main/webapp"
   }
 }

angular.json

@@ -1,18 +1,26 @@
-import { TestBed } from '@angular/core/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
 import { AppComponent } from './app.component';
-import { MockModule } from './mock/mock.module';
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MockModule],
-      declarations: [AppComponent]
+      imports: [AppComponent],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting(), provideAnimationsAsync()]
     }).compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
 });