refactor: remove category libs to use common one (#361)

Author: DDonochVA

libs/blog/articles/feature-angular-in-depth/README.md

@@ -24,8 +24,7 @@
             "prefix": "al",
             "style": "kebab-case"
           }
-        ],
-        "@angular-eslint/prefer-standalone": "off"
+        ]
       }
     },
     {

libs/blog/articles/feature-angular-in-depth/jest.config.ts

@@ -0,0 +1,7 @@
+# blog-articles-feature-category
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test blog-articles-feature-category` to execute the unit tests.

libs/blog/articles/feature-angular-in-depth/project.json

@@ -1,9 +1,8 @@
-/* eslint-disable */
 export default {
-  displayName: 'feature-news',
+  displayName: 'blog-articles-feature-category',
   preset: '../../../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory: '../../../../coverage/libs/blog/articles/feature-news',
+  coverageDirectory: '../../../../coverage/libs/blog/articles/feature-category',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

libs/blog/articles/feature-angular-in-depth/src/index.ts

@@ -1,7 +1,7 @@
 {
-  "name": "blog-articles-feature-guides",
+  "name": "blog-articles-feature-category",
   "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/blog/articles/feature-guides/src",
+  "sourceRoot": "libs/blog/articles/feature-category/src",
   "prefix": "al",
   "projectType": "library",
   "tags": ["scope:client", "type:feature"],
@@ -10,7 +10,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "libs/blog/articles/feature-guides/jest.config.ts"
+        "jestConfig": "libs/blog/articles/feature-category/jest.config.ts"
       }
     },
     "lint": {

libs/blog/articles/feature-angular-in-depth/src/lib/feature-angular-in-depth/feature-angular-in-depth.component.html

@@ -0,0 +1 @@
+export * from './lib/category-articles.component';

libs/blog/articles/feature-angular-in-depth/src/lib/feature-angular-in-depth/feature-angular-in-depth.component.ts

@@ -1,9 +1,11 @@
-<h2 id="latest-articles" class="mb-8 text-4xl font-bold">Latest articles</h2>
+<h2 class="mb-8 text-4xl font-bold" [id]="id()">
+  {{ title() }}
+</h2>
 
 <section
-  aria-labelledby="latest-articles"
   aria-live="polite"
   class="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
+  [attr.aria-labelledby]="id()"
 >
   @if (!articleStore.isFetchArticleListLoading()) {
     @for (article of articleStore.articles(); track article.slug) {

libs/blog/articles/feature-angular-in-depth/src/test-setup.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FeatureGuidesComponent } from './feature-guides.component';
+import { CategoryArticlesComponent } from './category-articles.component';
 
 describe('FeatureGuidesComponent', () => {
-  let component: FeatureGuidesComponent;
-  let fixture: ComponentFixture<FeatureGuidesComponent>;
+  let component: CategoryArticlesComponent;
+  let fixture: ComponentFixture<CategoryArticlesComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FeatureGuidesComponent],
+      imports: [CategoryArticlesComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(FeatureGuidesComponent);
+    fixture = TestBed.createComponent(CategoryArticlesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

libs/blog/articles/feature-angular-in-depth/.eslintrc.json renamed to libs/blog/articles/feature-category/.eslintrc.json

@@ -1,8 +1,11 @@
+import { isPlatformBrowser } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   computed,
   inject,
+  input,
+  PLATFORM_ID,
   signal,
 } from '@angular/core';
 
@@ -16,40 +19,51 @@ import {
   PaginationComponent,
   QueryPaginationDirective,
 } from '@angular-love/blog/shared/ui-pagination';
+import { ArticleCategory } from '@angular-love/contracts/articles';
 import { RepeatDirective } from '@angular-love/utils';
 
 @Component({
-  selector: 'al-news',
+  selector: 'al-category-articles',
   imports: [
-    UiArticleCardComponent,
     PaginationComponent,
     QueryPaginationDirective,
+    UiArticleCardComponent,
     ArticleRegularCardSkeletonComponent,
     RepeatDirective,
   ],
-  templateUrl: './feature-news.component.html',
-  styleUrl: './feature-news.component.scss',
+  templateUrl: './category-articles.component.html',
+  styleUrl: './category-articles.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'flex flex-col  h-full w-full',
   },
 })
-export class FeatureNewsComponent {
-  pagination = signal({ take: 12, skip: 0 });
+export class CategoryArticlesComponent {
+  readonly category = input<ArticleCategory>();
+  readonly excludeCategory = input<string>();
+  readonly title = input.required<string>();
+  readonly id = input.required<string>();
+
+  readonly pagination = signal({ take: 12, skip: 0 });
 
   protected readonly articleStore = inject(ArticleListStore);
 
+  private readonly _platform = inject(PLATFORM_ID);
+
   constructor() {
     const query = computed(() => ({
       ...this.pagination(),
-      category: 'news' as const,
+      ...(this.category() && { category: this.category() }),
+      ...(this.excludeCategory() && {
+        excludeCategory: this.excludeCategory(),
+      }),
     }));
 
     this.articleStore.fetchArticleList(query);
   }
 
   protected pageChange(event: PageChangeEvent) {
-    window.scrollTo(0, 0);
+    isPlatformBrowser(this._platform) && window.scrollTo(0, 0);
     this.pagination.set(event);
   }
 }

libs/blog/articles/feature-category/README.md

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});