Merged PR 1861: feat(product-router-link): add shared product router link directive and builder

feat(product-router-link): add shared product router link directive and builder

Ref: #5111 #5169

libs/shared/product-router-link/README.md

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

libs/shared/product-router-link/eslint.config.mjs

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

libs/shared/product-router-link/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'shared-product-router-link',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/shared/product-router-link',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/shared/product-router-link/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "shared-product-router-link",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shared/product-router-link/src",
+  "prefix": "shared",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/shared/product-router-link/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/shared/product-router-link/src/index.ts

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

libs/shared/product-router-link/src/lib/index.ts

@@ -0,0 +1,6 @@
+export { ProductRouterLinkDirective } from './product-router-link.directive';
+export { ProductRouterLinkBuilder } from './product-router-link.types';
+export {
+  PRODUCT_ROUTER_LINK_BUILDER,
+  provideProductRouterLinkBuilder,
+} from './product-router-link.providers';

libs/shared/product-router-link/src/lib/product-router-link.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, effect, inject, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { PRODUCT_ROUTER_LINK_BUILDER } from './product-router-link.providers';
+
+@Directive({
+  selector: '[sharedProductRouterLink]',
+  host: {
+    class: 'cursor-pointer',
+  },
+})
+export class ProductRouterLinkDirective extends RouterLink {
+  #builder = inject(PRODUCT_ROUTER_LINK_BUILDER);
+
+  ean = input.required<string>();
+
+  urlEffect = effect(async () => {
+    const ean = this.ean();
+    if (!ean) {
+      return;
+    }
+    const url = await this.#builder(ean);
+    this.routerLink = url;
+  });
+}

libs/shared/product-router-link/src/lib/product-router-link.providers.ts

@@ -0,0 +1,29 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { ProductRouterLinkBuilder } from './product-router-link.types';
+
+/**
+ * Injection token for the product router link builder function.
+ * Provides a default implementation that builds a URL in the format:
+ * `/kunde/{timestamp}/product/details/{ean}/ean`
+ */
+export const PRODUCT_ROUTER_LINK_BUILDER =
+  new InjectionToken<ProductRouterLinkBuilder>('PRODUCT_ROUTER_LINK_BUILDER', {
+    factory: () => (ean: string) =>
+      `/kunde/${Date.now()}/product/details/${ean}/ean`,
+  });
+
+/**
+ * Provides a custom implementation of the product router link builder.
+ * @param builder Custom function to build product URLs from EANs
+ * @returns Provider array to be included in the application's providers
+ */
+export function provideProductRouterLinkBuilder(
+  builder: ProductRouterLinkBuilder,
+): Provider[] {
+  return [
+    {
+      provide: PRODUCT_ROUTER_LINK_BUILDER,
+      useValue: builder,
+    },
+  ];
+}

libs/shared/product-router-link/src/lib/product-router-link.types.ts

@@ -0,0 +1,7 @@
+/**
+ * Represents a function that builds a URL for a product based on its EAN.
+ * Can return either a Promise of a string or a string directly.
+ */
+export type ProductRouterLinkBuilder = (
+  ean: string,
+) => PromiseLike<string> | string;

libs/shared/product-router-link/src/test-setup.ts

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

libs/shared/product-router-link/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/shared/product-router-link/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/shared/product-router-link/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}