From 95adfd735d658ff1ad8fcdd2086c64d5bbf74b6f Mon Sep 17 00:00:00 2001
From: Dennis Walker <denniswalker.dev@yahoo.com>
Date: Thu, 26 Jun 2025 04:11:06 +0600
Subject: [PATCH 1/2] Add icon in Storybook

---
 .../entity-logo/entity-logo.component.html    |  4 +-
 .../entity-logo.component.stories.ts          | 59 +++++++++++++++++++
 .../lib/entity-logo/entity-logo.component.ts  | 32 ++++++++--
 3 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts

diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.html b/libs/ui/src/lib/entity-logo/entity-logo.component.html
index f0abad285..692fb1d3b 100644
--- a/libs/ui/src/lib/entity-logo/entity-logo.component.html
+++ b/libs/ui/src/lib/entity-logo/entity-logo.component.html
@@ -1,4 +1,6 @@
-@if (src) {
+@if (useLogo) {
+  <gf-logo [showLabel]="true" [size]="size || 'medium'"></gf-logo>
+} @else if (src) {
   <img
     onerror="this.style.display='none'"
     [ngClass]="{ large: size === 'large' }"
diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts b/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts
new file mode 100644
index 000000000..af9f0de0e
--- /dev/null
+++ b/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts
@@ -0,0 +1,59 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { importProvidersFrom } from '@angular/core';
+import { DataSource } from '@prisma/client';
+import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
+
+import { HttpClientMock } from '../mocks/httpClient.mock';
+import { GfEntityLogoComponent } from './entity-logo.component';
+
+export default {
+  title: 'Entity Logo',
+  component: GfEntityLogoComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom(CommonModule, HttpClientModule),
+        {
+          provide: HttpClient,
+          useValue: new HttpClientMock(
+            new Map([
+              [
+                '../api/v1/logo/MANUAL/GHOST',
+                {
+                  logoUrl: '/assets/ghost.svg'
+                }
+              ],
+              [
+                '../api/v1/logo?url=https://ghostfol.io',
+                {
+                  logoUrl: '/assets/ghost.svg'
+                }
+              ]
+            ])
+          )
+        }
+      ]
+    })
+  ]
+} 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',
+    useLogo: true
+  }
+};
diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.ts b/libs/ui/src/lib/entity-logo/entity-logo.component.ts
index 7598fb4d5..4d2f56b26 100644
--- a/libs/ui/src/lib/entity-logo/entity-logo.component.ts
+++ b/libs/ui/src/lib/entity-logo/entity-logo.component.ts
@@ -1,17 +1,21 @@
 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],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [CommonModule, GfLogoComponent],
   selector: 'gf-entity-logo',
   styleUrls: ['./entity-logo.component.scss'],
   templateUrl: './entity-logo.component.html'
@@ -22,14 +26,34 @@ 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.src = `../api/v1/logo?url=${this.url}`;
+      this.http
+        .get<{ logoUrl: string }>(`../api/v1/logo?url=${this.url}`)
+        .pipe(
+          catchError(() => {
+            return of({ logoUrl: '' });
+          })
+        )
+        .subscribe(({ logoUrl }) => {
+          this.src = logoUrl;
+          this.changeDetectorRef.markForCheck();
+        });
     }
   }
 }

From 7117a62341b264a6859e0124beeb960919de7118 Mon Sep 17 00:00:00 2001
From: Dennis Walker <denniswalker.dev@yahoo.com>
Date: Sat, 28 Jun 2025 06:12:59 +0600
Subject: [PATCH 2/2] Reverted all the changes exceprt Storybook.

---
 .../entity-logo/entity-logo.component.html    |  4 +-
 .../entity-logo.component.stories.ts          | 78 ++++++++++++-------
 .../lib/entity-logo/entity-logo.component.ts  | 32 +-------
 3 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.html b/libs/ui/src/lib/entity-logo/entity-logo.component.html
index 692fb1d3b..f0abad285 100644
--- a/libs/ui/src/lib/entity-logo/entity-logo.component.html
+++ b/libs/ui/src/lib/entity-logo/entity-logo.component.html
@@ -1,6 +1,4 @@
-@if (useLogo) {
-  <gf-logo [showLabel]="true" [size]="size || 'medium'"></gf-logo>
-} @else if (src) {
+@if (src) {
   <img
     onerror="this.style.display='none'"
     [ngClass]="{ large: size === 'large' }"
diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts b/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts
index af9f0de0e..0582cf3e4 100644
--- a/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts
+++ b/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 { DataSource } from '@prisma/client';
-import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
+import {
+  applicationConfig,
+  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([
-              [
-                '../api/v1/logo/MANUAL/GHOST',
-                {
-                  logoUrl: '/assets/ghost.svg'
-                }
-              ],
+            new Map<string, any>([
               [
                 '../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',
-    useLogo: true
-  }
+    url: 'https://ghostfol.io'
+  },
+  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>
+    `
+  })
 };
diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.ts b/libs/ui/src/lib/entity-logo/entity-logo.component.ts
index 4d2f56b26..7598fb4d5 100644
--- a/libs/ui/src/lib/entity-logo/entity-logo.component.ts
+++ b/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
-        .get<{ logoUrl: string }>(`../api/v1/logo?url=${this.url}`)
-        .pipe(
-          catchError(() => {
-            return of({ logoUrl: '' });
-          })
-        )
-        .subscribe(({ logoUrl }) => {
-          this.src = logoUrl;
-          this.changeDetectorRef.markForCheck();
-        });
+      this.src = `../api/v1/logo?url=${this.url}`;
     }
   }
 }