chore: integrate eslint properly

- Use ESLint in CI
- Upgrade to Flat Configuration
- Fix Codebase of all linting errors and warnings
- Use unused imports plugin

Author: rainerhahnekamp

.eslintignore

@@ -19,6 +19,7 @@ jobs:
           node-version: '18'
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
+      - run: pnpm run lint:all
       - run: pnpm run test:all
       - run: pnpm run build:all
       - run: ./integration-tests.sh

.eslintrc.json

@@ -1 +1,2 @@
 pnpm lint-staged
+pnpm verify:all

.github/workflows/build.yml

@@ -0,0 +1,29 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.cjs');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'demo',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'demo',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  }
+];

.husky/pre-commit

@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 export default {
   displayName: 'demo',
   preset: '../../jest.preset.js',

apps/demo-e2e/.eslintrc.json

@@ -24,8 +24,6 @@
           "apps/demo/src/assets"
         ],
         "styles": [
-          "node_modules/@angular-architects/paper-design/assets/css/bootstrap.css",
-          "node_modules/@angular-architects/paper-design/assets/scss/paper-dashboard.scss",
           "@angular/material/prebuilt-themes/deeppurple-amber.css",
           "apps/demo/src/styles.css"
         ],

apps/demo-e2e/playwright.config.ts

@@ -1,23 +1,29 @@
-<demo-sidebar-cmp>
-  <div class="nav">
+<mat-toolbar color="primary">
+  <span>NgRx Toolkit Demo</span>
+</mat-toolbar>
+<mat-drawer-container class="container">
+  <mat-drawer mode="side" opened>
     <mat-nav-list>
       <a mat-list-item routerLink="/todo">DevTools</a>
       <a mat-list-item routerLink="/flight-search">withRedux</a>
-      <a mat-list-item routerLink="/flight-search-data-service-simple">withDataService (Simple)</a>
-      <a mat-list-item routerLink="/flight-search-data-service-dynamic">withDataService (Dynamic)</a>
-      <a mat-list-item routerLink="/flight-search-with-pagination">withPagination</a>
-      <a mat-list-item routerLink="/flight-search-redux-connector">Redux Connector</a>
+      <a mat-list-item routerLink="/flight-search-data-service-simple"
+        >withDataService (Simple)</a
+      >
+      <a mat-list-item routerLink="/flight-search-data-service-dynamic"
+        >withDataService (Dynamic)</a
+      >
+      <a mat-list-item routerLink="/flight-search-with-pagination"
+        >withPagination</a
+      >
+      <a mat-list-item routerLink="/flight-search-redux-connector"
+        >Redux Connector</a
+      >
       <a mat-list-item routerLink="/todo-storage-sync">withStorageSync</a>
     </mat-nav-list>
-  </div>
-
-  <div class="content">
-    <mat-toolbar color="primary">
-      <span>NGRX Toolkit Demo</span>
-    </mat-toolbar>
-
-    <div class="app-container">
-      <router-outlet></router-outlet>
+  </mat-drawer>
+  <mat-drawer-content>
+    <div class="content">
+      <router-outlet />
     </div>
-  </div>
-</demo-sidebar-cmp>
+  </mat-drawer-content>
+</mat-drawer-container>

apps/demo-e2e/project.json

@@ -1,30 +1,39 @@
-import { SelectionModel } from '@angular/cdk/collections';
-import { Component, effect, inject } from '@angular/core';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { Component } from '@angular/core';
+import { MatTableModule } from '@angular/material/table';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { Todo, TodoStore } from './devtools/todo-store';
 import { MatIconModule } from '@angular/material/icon';
-import { CategoryStore } from './category.store';
 import { RouterLink, RouterOutlet } from '@angular/router';
-import { SidebarComponent } from './core/sidebar/sidebar.component';
 import { CommonModule } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatListItem, MatListModule } from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import {
+  MatDrawer,
+  MatDrawerContainer,
+  MatDrawerContent,
+} from '@angular/material/sidenav';
 
 @Component({
   selector: 'demo-root',
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
   imports: [
     MatTableModule,
     MatCheckboxModule,
     MatIconModule,
     MatListModule,
     RouterLink,
     RouterOutlet,
-    SidebarComponent,
     CommonModule,
     MatToolbarModule,
+    MatDrawer,
+    MatDrawerContainer,
+    MatDrawerContent,
   ],
+  styles: `
+    .container {
+      display: inline;
+    }
+    .content {
+    margin: 4em;
+  }`,
 })
 export class AppComponent {}

apps/demo-e2e/src/example.spec.ts

@@ -1,7 +1,6 @@
 import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { appRoutes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 import { LayoutModule } from '@angular/cdk/layout';

apps/demo/.eslintrc.json

@@ -1,5 +1,5 @@
 import { Component, effect, inject, input } from '@angular/core';
-import { MatCard, MatCardModule } from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
 import { Todo } from './todo-store';
 import { signalStore, withState } from '@ngrx/signals';
 import {

apps/demo/eslint.config.cjs

@@ -1,10 +1,9 @@
-import { Component, effect, inject, input } from '@angular/core';
+import { Component, effect, inject } from '@angular/core';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import { Todo, TodoStore } from './todo-store';
-import { CategoryStore } from '../category.store';
 import { TodoDetailComponent } from './todo-detail.component';
 
 @Component({