feat(tooling): add lint-staged with Prettier + ESLint on pre-commit

- Install prettier, lint-staged, eslint-config-prettier
- Configure lint-staged in package.json: Prettier write on staged files, ESLint check on .ts/.html
- Add eslint-config-prettier to .eslintrc.json extends to disable formatting rules that conflict with Prettier
- Configure no-unused-vars to allow _ prefix (intentional destructuring pattern)
- Replace manual prettier/git update-index lines in pre-commit hook with npx lint-staged
- Fix pre-existing ESLint errors: remove unused imports in herowars-guildraid, fix useless escapes in middleware.ts, fix eslint-disable comment in utilityTypes.ts

.eslintrc.json

@@ -1,19 +1,21 @@
 {
     "root": true,
-    "ignorePatterns": [
-        "projects/**/*"
-    ],
-    "overrides": [{
-            "files": [
-                "*.ts"
-            ],
+    "ignorePatterns": ["projects/**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts"],
             "extends": [
                 "eslint:recommended",
                 "plugin:@typescript-eslint/recommended",
                 "plugin:@angular-eslint/recommended",
-                "plugin:@angular-eslint/template/process-inline-templates"
+                "plugin:@angular-eslint/template/process-inline-templates",
+                "prettier"
             ],
             "rules": {
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+                ],
                 "@angular-eslint/directive-selector": [
                     "error",
                     {
@@ -33,13 +35,8 @@
             }
         },
         {
-            "files": [
-                "*.html"
-            ],
-            "extends": [
-                "plugin:@angular-eslint/template/recommended",
-                "plugin:@angular-eslint/template/accessibility"
-            ],
+            "files": ["*.html"],
+            "extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
             "rules": {}
         }
     ]

.husky/pre-commit

@@ -1,3 +1,2 @@
 npm test -- --watch=false
-#prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g') --write --ignore-unknown
-#git update-index --again
+npx lint-staged

package.json

@@ -1,67 +1,81 @@
 {
-  "name": "adastra-app",
-  "version": "1.0.0",
-  "author": "Solide Apps <admin@unespace.com>",
-  "contributors": [
-    "Julien Gautier <julien.gautier@unespace.com>"
-  ],
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "serve": "ng serve --configuration local --port 4201",
-    "dev": "APP_ENV=development ng serve --port 4300 --configuration development",
-    "local": "APP_ENV=local ng serve --port 4400 --configuration local",
-    "lint": "ng lint",
-    "test": "ng test"
-  },
-  "engines": {
-    "node": "^18.19.1 || ^20.11.1"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^18.2.14",
-    "@angular/cdk": "^18.2.14",
-    "@angular/common": "^18.2.14",
-    "@angular/compiler": "^18.2.14",
-    "@angular/core": "^18.2.14",
-    "@angular/forms": "^18.2.14",
-    "@angular/google-maps": "^17.3.8",
-    "@angular/localize": "^18.2.14",
-    "@angular/material": "^18.2.14",
-    "@angular/platform-browser": "^18.2.14",
-    "@angular/platform-browser-dynamic": "^18.2.14",
-    "@angular/router": "^18.2.14",
-    "bootstrap": "^5.3.7",
-    "chart.js": "^4.4.2",
-    "chartist": "^1.3.0",
-    "ng-chartist": "^8.2.0",
-    "ng2-charts": "^6.0.1",
-    "ngx-skeleton-loader": "^9.0.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "^0.14.10"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.21",
-    "@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.21",
-    "@angular/compiler-cli": "^18.2.14",
-    "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "7.2.0",
-    "@typescript-eslint/parser": "7.2.0",
-    "eslint": "^8.57.0",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.4"
-  }
+    "name": "adastra-app",
+    "version": "1.0.0",
+    "author": "Solide Apps <admin@unespace.com>",
+    "contributors": [
+        "Julien Gautier <julien.gautier@unespace.com>"
+    ],
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "watch": "ng build --watch --configuration development",
+        "serve": "ng serve --configuration local --port 4201",
+        "dev": "APP_ENV=development ng serve --port 4300 --configuration development",
+        "local": "APP_ENV=local ng serve --port 4400 --configuration local",
+        "lint": "ng lint",
+        "test": "ng test"
+    },
+    "engines": {
+        "node": "^18.19.1 || ^20.11.1"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^18.2.14",
+        "@angular/cdk": "^18.2.14",
+        "@angular/common": "^18.2.14",
+        "@angular/compiler": "^18.2.14",
+        "@angular/core": "^18.2.14",
+        "@angular/forms": "^18.2.14",
+        "@angular/google-maps": "^17.3.8",
+        "@angular/localize": "^18.2.14",
+        "@angular/material": "^18.2.14",
+        "@angular/platform-browser": "^18.2.14",
+        "@angular/platform-browser-dynamic": "^18.2.14",
+        "@angular/router": "^18.2.14",
+        "bootstrap": "^5.3.7",
+        "chart.js": "^4.4.2",
+        "chartist": "^1.3.0",
+        "ng-chartist": "^8.2.0",
+        "ng2-charts": "^6.0.1",
+        "ngx-skeleton-loader": "^9.0.0",
+        "rxjs": "~7.8.0",
+        "tslib": "^2.3.0",
+        "zone.js": "^0.14.10"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "^18.2.21",
+        "@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.21",
+        "@angular/compiler-cli": "^18.2.14",
+        "@types/jasmine": "~5.1.0",
+        "@typescript-eslint/eslint-plugin": "7.2.0",
+        "@typescript-eslint/parser": "7.2.0",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^10.1.8",
+        "jasmine-core": "~5.1.0",
+        "karma": "~6.4.0",
+        "karma-chrome-launcher": "~3.2.0",
+        "karma-coverage": "~2.2.0",
+        "karma-jasmine": "~5.1.0",
+        "karma-jasmine-html-reporter": "~2.1.0",
+        "lint-staged": "^16.4.0",
+        "prettier": "^3.8.3",
+        "typescript": "~5.5.4"
+    },
+    "lint-staged": {
+        "*.{ts,html,scss,json,md}": [
+            "prettier --write"
+        ],
+        "*.ts": [
+            "eslint --max-warnings=0"
+        ],
+        "*.html": [
+            "eslint --max-warnings=0"
+        ]
+    }
 }

src/app/components/herowars-guildraid/herowars-guildraid.component.ts

@@ -14,9 +14,7 @@ import { MatStepperIntl, MatStepperModule } from '@angular/material/stepper';
 
 import { ListErrorsComponent } from '@components/shared';
 import { Errors } from '@models';
-import { HWGuildRaid, HWGuildRaidAttacker, HWGuildRaidAttackers, HWGuildRaidStage, HWMember } from '@models/herowars';
-
-import guildRaids from 'src/files-data/hw-guild-raids.json'; // page Asgard -> Guild Raid -> Log
+import { HWGuildRaid, HWGuildRaidStage, HWMember } from '@models/herowars';
 
 @Injectable()
 export class GuildRaidStepperIntl extends MatStepperIntl {
@@ -33,25 +31,26 @@ export class GuildRaidStepperIntl extends MatStepperIntl {
         },
     ],
     imports: [
-        DatePipe, FormsModule, ListErrorsComponent,
-        MatButtonModule, MatCardModule, MatDividerModule, MatFormFieldModule,
-        MatIconModule, MatInputModule, MatStepperModule
+        DatePipe,
+        FormsModule,
+        ListErrorsComponent,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatStepperModule,
     ],
     templateUrl: './herowars-guildraid.component.html',
     styleUrl: './herowars-guildraid.component.scss',
     animations: [
         trigger('flyInOut', [
             state('in', style({ transform: 'translateY(0)' })),
-            transition('void => *', [
-                style({ transform: 'translateY(-100%)' }),
-                animate(200)
-            ]),
-            transition('* => void', [
-                style({ transform: 'translateY(100%)' }),
-                animate(200)
-            ])
-        ])
-    ]
+            transition('void => *', [style({ transform: 'translateY(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateY(100%)' }), animate(200)]),
+        ]),
+    ],
 })
 export class HerowarsGuildraidComponent implements OnInit {
     public title = 'Guild Raids';
@@ -68,12 +67,10 @@ export class HerowarsGuildraidComponent implements OnInit {
     private _raidStages: HWGuildRaidStage[] = [
         { num: 1, name: 'Stage 1', maxPower: 320000, duration: 8, startTime: 0, endTime: 0 },
         { num: 2, name: 'Stage 2', maxPower: 500000, duration: 8, startTime: 0, endTime: 0 },
-        { num: 3, name: 'Stage 3', maxPower: 0, duration: 0, startTime: 0, endTime: 0 }
+        { num: 3, name: 'Stage 3', maxPower: 0, duration: 0, startTime: 0, endTime: 0 },
     ];
 
-    constructor(
-        private _titleService: Title
-    ) { }
+    constructor(private _titleService: Title) {}
 
     ngOnInit() {
         this._titleService.setTitle(this.title);
@@ -81,7 +78,7 @@ export class HerowarsGuildraidComponent implements OnInit {
             data.raids = [];
             data.raidsInfo = {
                 variationAvg: 0,
-                variationSum: 0
+                variationSum: 0,
             };
             return data;
         });
@@ -90,5 +87,4 @@ export class HerowarsGuildraidComponent implements OnInit {
     getMembers(): HWMember[] {
         return this._guildMembers;
     }
-
 }

src/middleware.ts

@@ -1,34 +1,34 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getSession } from "./utils/auth/session";
+import { NextRequest, NextResponse } from 'next/server';
+import { getSession } from './utils/auth/session';
 
 export const config = {
-  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
+    matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
 };
 
 const publicRoutes = [
-  /^\/article\/[^\/]+?\/?$/, // /article/sample-slug
-  /^\/login\/?$/,
-  /^\/profile\/[^\/]+?\/?$/, // /profile/sample-username
-  /^\/profile\/[^\/]+?\/favorites\/?$/, // /profile/sample-username/favorites
-  /^\/register\/?$/,
-  /^\/$/,
+    /^\/article\/[^/]+?\/?$/, // /article/sample-slug
+    /^\/login\/?$/,
+    /^\/profile\/[^/]+?\/?$/, // /profile/sample-username
+    /^\/profile\/[^/]+?\/favorites\/?$/, // /profile/sample-username/favorites
+    /^\/register\/?$/,
+    /^\/$/,
 ] as const;
 
 const isPublicRoutes = (pathname: string) => {
-  return publicRoutes.some((route) => route.test(pathname));
+    return publicRoutes.some((route) => route.test(pathname));
 };
 
 const isPrivateRoutes = (pathname: string) => {
-  return !isPublicRoutes(pathname);
+    return !isPublicRoutes(pathname);
 };
 
 const middleware = async (req: NextRequest) => {
-  const session = await getSession();
-  if (isPrivateRoutes(req.nextUrl.pathname) && session == null) {
-    return NextResponse.redirect(new URL("/login", req.nextUrl));
-  }
+    const session = await getSession();
+    if (isPrivateRoutes(req.nextUrl.pathname) && session == null) {
+        return NextResponse.redirect(new URL('/login', req.nextUrl));
+    }
 
-  return NextResponse.next();
+    return NextResponse.next();
 };
 
 export default middleware;

src/utils/types/utilityTypes.ts

@@ -1,15 +1,16 @@
-/* eslint @typescript-eslint/no-empty-object-type: off */
+/* eslint-disable @typescript-eslint/ban-types */
 export type FilterRequired<T extends Record<PropertyKey, unknown>> = {
-  [P in keyof T as {} extends Pick<T, P> ? never : P]: T[P];
+    [P in keyof T as {} extends Pick<T, P> ? never : P]: T[P];
 };
+/* eslint-enable @typescript-eslint/ban-types */
 
 export type OptionalUndefined<T> = Omit<
-  {
-    [P in keyof T as undefined extends T[P] ? never : P]: T[P];
-  } & {
-    [P in keyof T]?: T[P];
-  },
-  never
+    {
+        [P in keyof T as undefined extends T[P] ? never : P]: T[P];
+    } & {
+        [P in keyof T]?: T[P];
+    },
+    never
 >;
 
 // export type OptionalEmptyObject<T extends Record<PropertyKey, U>, U> = Omit<
@@ -27,12 +28,12 @@ export type OptionalUndefined<T> = Omit<
 // >;
 
 export type GetValueRecursive<T extends object, K extends PropertyKey[]> = K extends [
-  infer First,
-  ...infer Rest extends PropertyKey[],
+    infer First,
+    ...infer Rest extends PropertyKey[],
 ]
-  ? First extends keyof T
-    ? T[First] extends object
-      ? GetValueRecursive<T[First], Rest>
-      : T[First]
-    : never
-  : T;
+    ? First extends keyof T
+        ? T[First] extends object
+            ? GetValueRecursive<T[First], Rest>
+            : T[First]
+        : never
+    : T;