feat: add ProductImage directive and service; implement storybook for product image component

apps/isa-app/stories/shared/product-image/product-image.stories.ts

@@ -0,0 +1,50 @@
+import { argsToTemplate, type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
+import { ProductImageDirective, provideProductImageUrl } from '@isa/shared/product-image';
+
+type ProductImageInputs = {
+  ean: string;
+  imageWidth: number;
+  imageHeight: number;
+};
+
+const meta: Meta<ProductImageInputs> = {
+  title: 'shared/product-image/ProductImage',
+
+  decorators: [
+    moduleMetadata({
+      imports: [ProductImageDirective],
+      providers: [provideProductImageUrl('https://produktbilder-test.paragon-data.net')],
+    }),
+  ],
+  argTypes: {
+    ean: {
+      control: {
+        type: 'text',
+      },
+    },
+    imageWidth: {
+      control: {
+        type: 'number',
+      },
+    },
+    imageHeight: {
+      control: {
+        type: 'number',
+      },
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `<img sharedProductImage ${argsToTemplate(args)} />`,
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<ProductImageDirective>;
+
+export const Default: Story = {
+  args: {
+    ean: '9783742327529',
+  },
+};

libs/shared/product-image/src/index.ts

@@ -1 +1,2 @@
+export * from './lib/product-image.directive';
 export * from './lib/product-image.service';

libs/shared/product-image/src/lib/product-image.directive.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { ProductImageService } from './product-image.service';
+
+@Directive({ selector: 'img[sharedProductImage]', host: { '[src]': 'src()' } })
+export class ProductImageDirective {
+  readonly productImageService = inject(ProductImageService);
+
+  ean = input.required<string>();
+
+  imageWidth = input<number>(150);
+
+  imageHeight = input<number>(150);
+
+  src = computed(() => {
+    const ean = this.ean();
+    const width = this.imageWidth();
+    const height = this.imageHeight();
+    return this.productImageService.getImageUrl({ imageId: ean, height, width });
+  });
+}

libs/shared/product-image/src/lib/product-image.service.ts

@@ -1,4 +1,4 @@
-import { inject, Injectable, InjectionToken } from '@angular/core';
+import { inject, Injectable, InjectionToken, Provider } from '@angular/core';
 import { Config } from '@isa/core/config';
 import { z } from 'zod';
 
@@ -24,3 +24,13 @@ export class ProductImageService {
     return `${this.imageUrl}/${imageId}_${width}x${height}.jpg?showDummy=${showDummy}`;
   }
 }
+
+export function provideProductImageUrl(url: string): Provider[] {
+  return [
+    ProductImageService,
+    {
+      provide: PRODUCT_IMAGE_URL,
+      useValue: url,
+    },
+  ];
+}