chore(general): update NX, dependencies, and eslint config

.github/ISSUE_TEMPLATE/1-bug-report.yaml

@@ -60,7 +60,7 @@ body:
     id: other
     attributes:
       label: Anything else?
-  
+
   - type: dropdown
     id: contribute
     attributes:

.github/ISSUE_TEMPLATE/2-feature-request.yaml

@@ -39,7 +39,7 @@ body:
       label: Alternatives considered
     validations:
       required: true
-  
+
   - type: dropdown
     id: contribute
     attributes:
@@ -48,4 +48,4 @@ body:
         - 'Yes'
         - 'No'
     validations:
-      required: true
+      required: true

.github/workflows/ci.yml

@@ -18,9 +18,9 @@ jobs:
       fail-fast: true
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Cache node modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:
@@ -30,9 +30,9 @@ jobs:
             ${{ runner.os }}-build-${{ env.cache-name }}-
             ${{ runner.os }}-build-
             ${{ runner.os }}-
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'npm'
 
       - name: Install dependencies

.github/workflows/docs.yml

@@ -17,18 +17,18 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: webfactory/ssh-agent@v0.5.3
+      - uses: actions/checkout@v4
+      - uses: webfactory/ssh-agent@v0.9.0
         with:
           ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         with:
           node-version: '16.x'
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

.gitignore

@@ -38,4 +38,7 @@ testem.log
 .DS_Store
 Thumbs.db
 .angular
-.nx/cache
+.nx/cache
+.nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.prettierignore

@@ -4,4 +4,5 @@
 /coverage
 /docs/**/*.md
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

.prettierrc

@@ -1,3 +1,11 @@
 {
-  "singleQuote": true
-}
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.component.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

apps/ng/eslint.config.mjs

@@ -0,0 +1,34 @@
+import baseConfig from '../../eslint.config.mjs';
+import nx from '@nx/eslint';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'elf',
+          style: 'camelCase',
+        },
+      ],
+
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'elf',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    rules: {},
+  },
+];

apps/ng/project.json

@@ -4,6 +4,7 @@
   "projectType": "application",
   "sourceRoot": "apps/ng/src",
   "prefix": "elf",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
@@ -62,7 +63,8 @@
           "buildTarget": "ng:build:development"
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
@@ -81,6 +83,5 @@
         "jestConfig": "apps/ng/jest.config.ts"
       }
     }
-  },
-  "tags": []
+  }
 }

apps/ng/src/app/auth/login/login.component.scss

@@ -32,4 +32,3 @@ input[type='password'] {
   color: #7e3ab7;
   opacity: 0.7;
 }
-

apps/ng/src/app/contacts/contacts.component.html

@@ -2,37 +2,40 @@
   <h1 class="d-flex justify-content-center mb-4">Contacts</h1>
 
   @if (contacts$ | async; as contacts) {
-  <section>
-    <table class="table table-striped mb-4">
-      <thead>
-        <tr>
-          <th scope="col">Name</th>
-          <th scope="col">Address</th>
-          <th scope="col">Email</th>
-        </tr>
-      </thead>
+    <section>
+      <table class="table table-striped mb-4">
+        <thead>
+          <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Address</th>
+            <th scope="col">Email</th>
+          </tr>
+        </thead>
 
-      <tbody>
-        @for (contact of contacts; track contact) {
-        <tr>
-          <td>{{ contact.name }}</td>
-          <td>{{ contact.address }}</td>
-          <td>&#64;{{ contact.email }}</td>
-        </tr>
-        }
-      </tbody>
-    </table>
+        <tbody>
+          @for (contact of contacts; track contact) {
+            <tr>
+              <td>{{ contact.name }}</td>
+              <td>{{ contact.address }}</td>
+              <td>&#64;{{ contact.email }}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
 
-    @if (paginationData$ | async; as paginationData) {
-    <ul class="pagination d-flex justify-content-center">
-      @for (page of paginationData | paginationControls; track page; let i =
-      $index) {
-      <li class="page-item page-link" (click)="updateActivePage(i + 1)">
-        {{ i + 1 }}
-      </li>
+      @if (paginationData$ | async; as paginationData) {
+        <ul class="pagination d-flex justify-content-center">
+          @for (
+            page of paginationData | paginationControls;
+            track page;
+            let i = $index
+          ) {
+            <li class="page-item page-link" (click)="updateActivePage(i + 1)">
+              {{ i + 1 }}
+            </li>
+          }
+        </ul>
       }
-    </ul>
-    }
-  </section>
+    </section>
   }
 </section>

apps/ng/src/app/contacts/contacts.component.ts

@@ -16,7 +16,7 @@ export class ContactsComponent implements OnInit {
 
   constructor(
     private service: ContactsService,
-    private repo: ContactsRepository
+    private repo: ContactsRepository,
   ) {}
 
   ngOnInit() {

apps/ng/src/app/contacts/state/contacts.repository.ts

@@ -22,7 +22,7 @@ interface Contact {
 const store = createStore(
   { name: 'contacts' },
   withPagination(),
-  withEntities<Contact>()
+  withEntities<Contact>(),
 );
 
 @Injectable({ providedIn: 'root' })
@@ -43,8 +43,8 @@ export class ContactsRepository {
       updatePaginationData(pagination),
       setPage(
         page,
-        data.map((c) => c.id)
-      )
+        data.map((c) => c.id),
+      ),
     );
   }
 

apps/ng/src/app/contacts/state/contacts.service.ts

@@ -13,7 +13,7 @@ export class ContactsService {
     return timer(300).pipe(
       map(() => getData({ page })),
       tap((res) => this.repo.addContacts(page, res)),
-      skipWhilePageExists(this.repo.store, page)
+      skipWhilePageExists(this.repo.store, page),
     );
   }
 }

apps/ng/src/app/gallery/gallery.component.html

@@ -1,24 +1,23 @@
 <div>
   <h1>Artworks:</h1>
   @if (items$ | async; as items) {
-
-  <div class="gallery-container">
-    @for (galleryItem of items; track trackByFn($index, galleryItem)) {
-    <div>
-      <h2>{{ galleryItem.title }}</h2>
-      <img [alt]="galleryItem.title" [src]="galleryItem.image" />
-      @if (!galleryItem.open) {
-      <div class="pointer" (click)="toggleItemOpen(galleryItem.id)">
-        click for more details
-      </div>
-      } @if (galleryItem.open) {
-      <div class="pointer" (click)="toggleItemOpen(galleryItem.id)">
-        {{ galleryItem.description }}
-      </div>
+    <div class="gallery-container">
+      @for (galleryItem of items; track trackByFn($index, galleryItem)) {
+        <div>
+          <h2>{{ galleryItem.title }}</h2>
+          <img [alt]="galleryItem.title" [src]="galleryItem.image" />
+          @if (!galleryItem.open) {
+            <div class="pointer" (click)="toggleItemOpen(galleryItem.id)">
+              click for more details
+            </div>
+          }
+          @if (galleryItem.open) {
+            <div class="pointer" (click)="toggleItemOpen(galleryItem.id)">
+              {{ galleryItem.description }}
+            </div>
+          }
+        </div>
       }
     </div>
-    }
-  </div>
-
   }
 </div>

apps/ng/src/app/gallery/gallery.component.ts

@@ -12,7 +12,7 @@ export class GalleryComponent implements OnInit {
 
   constructor(
     private service: GalleryService,
-    private galleryRepo: GalleryRepository
+    private galleryRepo: GalleryRepository,
   ) {}
 
   toggleItemOpen(galleryItemId: number) {