Bugfix/fix storybook setup (#4168)

* Fix storybook setup

* Update changelog

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Improved the handling of a missing url in the endpoint to fetch the logo of an asset or a platform
+- Fixed the _Storybook_ setup
 
 ## 2.132.0 - 2024-12-30
 
@@ -47,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Upgraded `ngx-markdown` from version `18.0.0` to `19.0.0`
 - Upgraded `Nx` from version `20.1.2` to `20.3.0`
 - Upgraded `prisma` from version `6.0.1` to `6.1.0`
+- Upgraded `storybook` from version `8.2.5` to `8.4.7`
 - Upgraded `zone.js` from version `0.14.10` to `0.15.0`
 
 ### Fixed

libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts

@@ -4,47 +4,48 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import '@angular/localize/init';
 import { MatButtonModule } from '@angular/material/button';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfValueModule } from '../value';
-import { FireCalculatorComponent } from './fire-calculator.component';
+import { GfValueComponent } from '../value';
+import { GfFireCalculatorComponent } from './fire-calculator.component';
 import { FireCalculatorService } from './fire-calculator.service';
 
 export default {
   title: 'FIRE Calculator',
-  component: FireCalculatorComponent,
+  component: GfFireCalculatorComponent,
   decorators: [
     moduleMetadata({
-      declarations: [FireCalculatorComponent],
       imports: [
         CommonModule,
         FormsModule,
-        GfValueModule,
+        GfFireCalculatorComponent,
+        GfValueComponent,
         MatButtonModule,
+        MatDatepickerModule,
         MatFormFieldModule,
         MatInputModule,
         NgxSkeletonLoaderModule,
         NoopAnimationsModule,
         ReactiveFormsModule
       ],
-      providers: [FireCalculatorService]
+      providers: [FireCalculatorService, provideNativeDateAdapter()]
     })
   ]
-} as Meta<FireCalculatorComponent>;
+} as Meta<GfFireCalculatorComponent>;
 
-const Template: Story<FireCalculatorComponent> = (
-  args: FireCalculatorComponent
-) => ({
-  props: args
-});
+type Story = StoryObj<GfFireCalculatorComponent>;
 
-export const Simple = Template.bind({});
-Simple.args = {
+export const Simple: Story = {
+  args: {
     currency: 'USD',
     fireWealth: 0,
     locale: locale
+  }
 };

libs/ui/src/lib/line-chart/line-chart.component.stories.ts

@@ -1,26 +1,24 @@
 import { CommonModule } from '@angular/common';
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { LineChartComponent } from './line-chart.component';
+import { GfLineChartComponent } from './line-chart.component';
 
 export default {
   title: 'Line Chart',
-  component: LineChartComponent,
+  component: GfLineChartComponent,
   decorators: [
     moduleMetadata({
-      declarations: [LineChartComponent],
-      imports: [CommonModule, NgxSkeletonLoaderModule]
+      imports: [CommonModule, GfLineChartComponent, NgxSkeletonLoaderModule]
     })
   ]
-} as Meta<LineChartComponent>;
+} as Meta<GfLineChartComponent>;
 
-const Template: Story<LineChartComponent> = (args: LineChartComponent) => ({
-  props: args
-});
+type Story = StoryObj<GfLineChartComponent>;
 
-export const Simple = Template.bind({});
-Simple.args = {
+export const Simple: Story = {
+  args: {
     historicalDataItems: [
       {
         date: '2017-01-01',
@@ -232,4 +230,5 @@ Simple.args = {
       }
     ],
     isAnimated: true
+  }
 };

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

@@ -1,30 +1,32 @@
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { LogoComponent } from './logo.component';
+import { GfLogoComponent } from './logo.component';
 
 export default {
   title: 'Logo',
-  component: LogoComponent,
+  component: GfLogoComponent,
   decorators: [
     moduleMetadata({
       imports: []
     })
   ]
-} as Meta<LogoComponent>;
+} as Meta<GfLogoComponent>;
 
-const Template: Story<LogoComponent> = (args: LogoComponent) => ({
-  props: args
-});
+type Story = StoryObj<GfLogoComponent>;
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {
+  args: {}
+};
 
-export const Large = Template.bind({});
-Large.args = {
+export const Large: Story = {
+  args: {
     size: 'large'
+  }
 };
 
-export const NoLabel = Template.bind({});
-NoLabel.args = {
+export const NoLabel: Story = {
+  args: {
     showLabel: false
+  }
 };

libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts

@@ -1,25 +1,23 @@
-import { GfLogoModule } from '@ghostfolio/ui/logo';
+import { GfLogoComponent } from '@ghostfolio/ui/logo';
 
 import { RouterTestingModule } from '@angular/router/testing';
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { NoTransactionsInfoComponent } from './no-transactions-info.component';
+import { GfNoTransactionsInfoComponent } from './no-transactions-info.component';
 
 export default {
   title: 'No Transactions Info',
-  component: NoTransactionsInfoComponent,
+  component: GfNoTransactionsInfoComponent,
   decorators: [
     moduleMetadata({
-      imports: [GfLogoModule, RouterTestingModule]
+      imports: [GfLogoComponent, RouterTestingModule]
     })
   ]
-} as Meta<NoTransactionsInfoComponent>;
+} as Meta<GfNoTransactionsInfoComponent>;
 
-const Template: Story<NoTransactionsInfoComponent> = (
-  args: NoTransactionsInfoComponent
-) => ({
-  props: args
-});
+type Story = StoryObj<GfNoTransactionsInfoComponent>;
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {
+  args: {}
+};

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts

@@ -1,29 +1,29 @@
 import { CommonModule } from '@angular/common';
 import '@angular/localize/init';
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { PortfolioProportionChartComponent } from './portfolio-proportion-chart.component';
+import { GfPortfolioProportionChartComponent } from './portfolio-proportion-chart.component';
 
 export default {
   title: 'Portfolio Proportion Chart',
-  component: PortfolioProportionChartComponent,
+  component: GfPortfolioProportionChartComponent,
   decorators: [
     moduleMetadata({
-      declarations: [PortfolioProportionChartComponent],
-      imports: [CommonModule, NgxSkeletonLoaderModule]
+      imports: [
+        CommonModule,
+        GfPortfolioProportionChartComponent,
+        NgxSkeletonLoaderModule
+      ]
     })
   ]
-} as Meta<PortfolioProportionChartComponent>;
+} as Meta<GfPortfolioProportionChartComponent>;
 
-const Template: Story<PortfolioProportionChartComponent> = (
-  args: PortfolioProportionChartComponent
-) => ({
-  props: args
-});
+type Story = StoryObj<GfPortfolioProportionChartComponent>;
 
-export const Simple = Template.bind({});
-Simple.args = {
+export const Simple: Story = {
+  args: {
     baseCurrency: 'USD',
     keys: ['name'],
     locale: 'en-US',
@@ -35,4 +35,5 @@ Simple.args = {
       Oceania: { name: 'Oceania', value: 1402.220605072031 },
       'South America': { name: 'South America', value: 4938.25202180719859 }
     }
+  }
 };

libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts

@@ -1,29 +1,28 @@
 import { CommonModule } from '@angular/common';
 import { RouterTestingModule } from '@angular/router/testing';
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { PremiumIndicatorComponent } from './premium-indicator.component';
+import { GfPremiumIndicatorComponent } from './premium-indicator.component';
 
 export default {
   title: 'Premium Indicator',
-  component: PremiumIndicatorComponent,
+  component: GfPremiumIndicatorComponent,
   decorators: [
     moduleMetadata({
       imports: [CommonModule, RouterTestingModule]
     })
   ]
-} as Meta<PremiumIndicatorComponent>;
+} as Meta<GfPremiumIndicatorComponent>;
 
-const Template: Story<PremiumIndicatorComponent> = (
-  args: PremiumIndicatorComponent
-) => ({
-  props: args
-});
+type Story = StoryObj<GfPremiumIndicatorComponent>;
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {
+  args: {}
+};
 
-export const WithoutLink = Template.bind({});
-WithoutLink.args = {
+export const WithoutLink = {
+  args: {
     enableLink: false
+  }
 };

libs/ui/src/lib/trend-indicator/trend-indicator.component.stories.ts

@@ -1,50 +1,53 @@
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { TrendIndicatorComponent } from './trend-indicator.component';
+import { GfTrendIndicatorComponent } from './trend-indicator.component';
 
 export default {
   title: 'Trend Indicator',
-  component: TrendIndicatorComponent,
+  component: GfTrendIndicatorComponent,
   decorators: [
     moduleMetadata({
       imports: [NgxSkeletonLoaderModule]
     })
   ]
-} as Meta<TrendIndicatorComponent>;
+} as Meta<GfTrendIndicatorComponent>;
 
-const Template: Story<TrendIndicatorComponent> = (
-  args: TrendIndicatorComponent
-) => ({
-  props: args
-});
+type Story = StoryObj<GfTrendIndicatorComponent>;
 
-export const Loading = Template.bind({});
-Loading.args = {
+export const Loading: Story = {
+  args: {
     isLoading: true
+  }
 };
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {
+  args: {}
+};
 
-export const Delayed = Template.bind({});
-Delayed.args = {
-  marketState: 'delayed',
-  range: '1d'
+export const Delayed: Story = {
+  args: {
+    dateRange: '1d',
+    marketState: 'delayed'
+  }
 };
 
-export const Down = Template.bind({});
-Down.args = {
+export const Down: Story = {
+  args: {
     value: -1
+  }
 };
 
-export const Up = Template.bind({});
-Up.args = {
+export const Up: Story = {
+  args: {
     value: 1
+  }
 };
 
-export const MarketClosed = Template.bind({});
-MarketClosed.args = {
-  marketState: 'closed',
-  range: '1d'
+export const MarketClosed: Story = {
+  args: {
+    dateRange: '1d',
+    marketState: 'closed'
+  }
 };

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

@@ -1,71 +1,77 @@
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { ValueComponent } from './value.component';
+import { GfValueComponent } from './value.component';
 
 export default {
   title: 'Value',
-  component: ValueComponent,
+  component: GfValueComponent,
   decorators: [
     moduleMetadata({
       imports: [NgxSkeletonLoaderModule]
     })
   ]
-} as Meta<ValueComponent>;
+} as Meta<GfValueComponent>;
 
-const Template: Story<ValueComponent> = (args: ValueComponent) => ({
-  props: args
-});
+type Story = StoryObj<GfValueComponent>;
 
-export const Loading = Template.bind({});
-Loading.args = {
+export const Loading: Story = {
+  args: {
     value: undefined
+  }
 };
 
-export const Currency = Template.bind({});
-Currency.args = {
+export const Currency: Story = {
+  args: {
     isCurrency: true,
     locale: 'en-US',
     unit: 'USD',
     value: 7
+  }
 };
 
-export const Label = Template.bind({});
-Label.args = {
+export const Label: Story = {
+  args: {
     locale: 'en-US',
     value: 7.25
+  }
 };
 
-export const PerformancePositive = Template.bind({});
-PerformancePositive.args = {
-  locale: 'en-US',
+export const PerformancePositive: Story = {
+  args: {
     colorizeSign: true,
     isPercent: true,
+    locale: 'en-US',
     value: 0.0136810853673890378
+  },
+  name: 'Performance (positive)'
 };
-PerformancePositive.storyName = 'Performance (positive)';
 
-export const PerformanceNegative = Template.bind({});
-PerformanceNegative.args = {
-  locale: 'en-US',
+export const PerformanceNegative: Story = {
+  args: {
     colorizeSign: true,
     isPercent: true,
+    locale: 'en-US',
     value: -0.0136810853673890378
+  },
+  name: 'Performance (negative)'
 };
-PerformanceNegative.storyName = 'Performance (negative)';
 
-export const PerformanceCloseToZero = Template.bind({});
-PerformanceCloseToZero.args = {
-  locale: 'en-US',
+export const PerformanceCloseToZero: Story = {
+  args: {
     colorizeSign: true,
     isPercent: true,
+    locale: 'en-US',
     value: -2.388915360475e-8
+  },
+  name: 'Performance (negative zero)'
 };
-PerformanceCloseToZero.storyName = 'Performance (negative zero)';
 
-export const Precision = Template.bind({});
-Precision.args = {
+export const Precision: Story = {
+  args: {
     locale: 'en-US',
     precision: 3,
     value: 7.2534802394809285309
+  }
 };