Feature/move toggle component to @ghostfolio/ui and set up Storybook story (#5248)

* Move toggle component to @ghostfolio/ui

* Set up Storybook story

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added a _Storybook_ story for the activity type component
+- Added a _Storybook_ story for the toggle component
 
 ### Changed
 

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -1,4 +1,3 @@
-import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -12,6 +11,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { HoldingType, HoldingsViewMode } from '@ghostfolio/common/types';
 import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
+import { GfToggleComponent } from '@ghostfolio/ui/toggle';
 import { GfTreemapChartComponent } from '@ghostfolio/ui/treemap-chart';
 
 import { CommonModule } from '@angular/common';

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -28,7 +28,7 @@
             [defaultValue]="holdingType"
             [isLoading]="false"
             [options]="holdingTypeOptions"
-            (change)="onChangeHoldingType($event.value)"
+            (valueChange)="onChangeHoldingType($event.value)"
           />
         </div>
       </div>

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -1,5 +1,4 @@
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
-import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
@@ -43,7 +42,6 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './home-overview.html'
 })
 export class GfHomeOverviewComponent implements OnDestroy, OnInit {
-  public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public errors: AssetProfileIdentifier[];
   public hasError: boolean;

apps/client/src/app/components/markets/markets.component.ts

@@ -1,5 +1,4 @@
 import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
-import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { resetHours } from '@ghostfolio/common/helper';
@@ -13,6 +12,7 @@ import {
 import { FearAndGreedIndexMode } from '@ghostfolio/common/types';
 import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
+import { GfToggleComponent } from '@ghostfolio/ui/toggle';
 
 import {
   ChangeDetectionStrategy,

apps/client/src/app/components/markets/markets.html

@@ -9,7 +9,7 @@
             [defaultValue]="fearAndGreedIndexMode"
             [isLoading]="false"
             [options]="fearAndGreedIndexModeOptions"
-            (change)="onChangeFearAndGreedIndexMode($event.value)"
+            (valueChange)="onChangeFearAndGreedIndexMode($event.value)"
           />
         </div>
       }

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -1,6 +1,5 @@
 import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
-import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -17,6 +16,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { AiPromptMode, GroupBy } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
+import { GfToggleComponent } from '@ghostfolio/ui/toggle';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { Clipboard } from '@angular/cdk/clipboard';
@@ -68,7 +68,6 @@ export class GfAnalysisPageComponent implements OnDestroy, OnInit {
   public benchmarkDataItems: HistoricalDataItem[] = [];
   public benchmarks: Partial<SymbolProfile>[];
   public bottom3: PortfolioPosition[];
-  public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public dividendsByGroup: InvestmentItem[];
   public dividendTimelineDataLabel = $localize`Dividend`;

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -375,7 +375,7 @@
           [defaultValue]="mode"
           [isLoading]="false"
           [options]="modeOptions"
-          (change)="onChangeGroupBy($event.value)"
+          (valueChange)="onChangeGroupBy($event.value)"
         />
       </div>
       @if (streaks) {
@@ -432,7 +432,7 @@
           [defaultValue]="mode"
           [isLoading]="false"
           [options]="modeOptions"
-          (change)="onChangeGroupBy($event.value)"
+          (valueChange)="onChangeGroupBy($event.value)"
         />
       </div>
       <div class="chart-container">

libs/ui/src/lib/toggle/index.ts

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

libs/ui/src/lib/toggle/toggle.component.stories.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatRadioModule } from '@angular/material/radio';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { GfToggleComponent } from './toggle.component';
+
+export default {
+  title: 'Toggle',
+  component: GfToggleComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, MatRadioModule, ReactiveFormsModule]
+    })
+  ]
+} as Meta<GfToggleComponent>;
+
+type Story = StoryObj<GfToggleComponent>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: '1d',
+    isLoading: false,
+    options: [
+      { label: 'Today', value: '1d' },
+      { label: 'YTD', value: 'ytd' },
+      { label: '1Y', value: '1y' },
+      { label: '5Y', value: '5y' },
+      { label: 'Max', value: 'max' }
+    ]
+  }
+};

apps/client/src/app/components/toggle/toggle.component.ts → libs/ui/src/lib/toggle/toggle.component.ts

@@ -20,19 +20,11 @@ import { MatRadioModule } from '@angular/material/radio';
   templateUrl: './toggle.component.html'
 })
 export class GfToggleComponent implements OnChanges {
-  public static DEFAULT_DATE_RANGE_OPTIONS: ToggleOption[] = [
-    { label: $localize`Today`, value: '1d' },
-    { label: $localize`YTD`, value: 'ytd' },
-    { label: $localize`1Y`, value: '1y' },
-    { label: $localize`5Y`, value: '5y' },
-    { label: $localize`Max`, value: 'max' }
-  ];
-
   @Input() defaultValue: string;
   @Input() isLoading: boolean;
-  @Input() options: ToggleOption[];
+  @Input() options: ToggleOption[] = [];
 
-  @Output() change = new EventEmitter<Pick<ToggleOption, 'value'>>();
+  @Output() valueChange = new EventEmitter<Pick<ToggleOption, 'value'>>();
 
   public optionFormControl = new FormControl<string>(undefined);
 
@@ -41,6 +33,6 @@ export class GfToggleComponent implements OnChanges {
   }
 
   public onValueChange() {
-    this.change.emit({ value: this.optionFormControl.value });
+    this.valueChange.emit({ value: this.optionFormControl.value });
   }
 }