Reverted all the changes exceprt Storybook.

libs/ui/src/lib/entity-logo/entity-logo.component.html

@@ -1,6 +1,4 @@
-@if (useLogo) {
+@if (src) {
-  <gf-logo [showLabel]="true" [size]="size || 'medium'"></gf-logo>
-} @else if (src) {
   <img
     onerror="this.style.display='none'"
     [ngClass]="{ large: size === 'large' }"

libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts

@@ -1,9 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { importProvidersFrom } from '@angular/core';
+import {
-import { DataSource } from '@prisma/client';
+  applicationConfig,
-import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
+  Meta,
+  moduleMetadata,
+  StoryObj
+} from '@storybook/angular';
 
+import { GfLogoComponent } from '../logo/logo.component';
 import { HttpClientMock } from '../mocks/httpClient.mock';
 import { GfEntityLogoComponent } from './entity-logo.component';
 
@@ -11,49 +15,69 @@ export default {
   title: 'Entity Logo',
   component: GfEntityLogoComponent,
   decorators: [
+    moduleMetadata({
+      imports: [CommonModule, HttpClientModule, GfLogoComponent]
+    }),
     applicationConfig({
       providers: [
-        importProvidersFrom(CommonModule, HttpClientModule),
         {
           provide: HttpClient,
           useValue: new HttpClientMock(
-            new Map([
+            new Map<string, any>([
-              [
-                '../api/v1/logo/MANUAL/GHOST',
-                {
-                  logoUrl: '/assets/ghost.svg'
-                }
-              ],
               [
                 '../api/v1/logo?url=https://ghostfol.io',
-                {
+                { logoUrl: '/assets/ghost.svg' }
-                  logoUrl: '/assets/ghost.svg'
-                }
               ]
             ])
           )
         }
       ]
     })
-  ]
+  ],
+  parameters: {
+    backgrounds: {
+      default: 'light'
+    }
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['large', 'medium'],
+      description: 'Size of the logo'
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Tooltip text for the logo'
+    },
+    url: {
+      control: 'text',
+      description: 'URL for the logo'
+    }
+  }
 } as Meta<GfEntityLogoComponent>;
 
 type Story = StoryObj<GfEntityLogoComponent>;
 
 export const Default: Story = {
-  args: {
-    dataSource: DataSource.MANUAL,
-    symbol: 'GHOST',
-    useLogo: true,
-    size: 'large'
-  }
-};
-
-export const WithUrl: Story = {
   args: {
     size: 'large',
     tooltip: 'Ghostfolio',
-    url: 'https://ghostfol.io',
+    url: 'https://ghostfol.io'
-    useLogo: true
+  },
-  }
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Entity logo component with size ("large"), tooltip ("Ghostfolio") and url ("https://ghostfol.io") inputs.'
+      }
+    }
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div>
+        <gf-logo [showLabel]="true" [size]="size"></gf-logo>
+      </div>
+    `
+  })
 };

libs/ui/src/lib/entity-logo/entity-logo.component.ts

@@ -1,21 +1,17 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   Input,
   OnChanges
 } from '@angular/core';
 import { DataSource } from '@prisma/client';
-import { of } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-
-import { GfLogoComponent } from '../logo/logo.component';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, GfLogoComponent],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-entity-logo',
   styleUrls: ['./entity-logo.component.scss'],
   templateUrl: './entity-logo.component.html'
@@ -26,34 +22,14 @@ export class GfEntityLogoComponent implements OnChanges {
   @Input() symbol: string;
   @Input() tooltip: string;
   @Input() url: string;
-  @Input() useLogo = false;
 
   public src: string;
 
-  public constructor(
-    private readonly changeDetectorRef: ChangeDetectorRef,
-    private readonly http: HttpClient
-  ) {}
-
   public ngOnChanges() {
-    if (this.useLogo) {
-      return;
-    }
-
     if (this.dataSource && this.symbol) {
       this.src = `../api/v1/logo/${this.dataSource}/${this.symbol}`;
     } else if (this.url) {
-      this.http
+      this.src = `../api/v1/logo?url=${this.url}`;
-        .get<{ logoUrl: string }>(`../api/v1/logo?url=${this.url}`)
-        .pipe(
-          catchError(() => {
-            return of({ logoUrl: '' });
-          })
-        )
-        .subscribe(({ logoUrl }) => {
-          this.src = logoUrl;
-          this.changeDetectorRef.markForCheck();
-        });
     }
   }
 }