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 = {
-  currency: 'USD',
-  fireWealth: 0,
-  locale: locale
+export const Simple: Story = {
+  args: {
+    currency: 'USD',
+    fireWealth: 0,
+    locale: locale
+  }
 };

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

@@ -1,235 +1,234 @@
 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 = {
-  historicalDataItems: [
-    {
-      date: '2017-01-01',
-      value: 2561.60376
-    },
-    {
-      date: '2017-02-01',
-      value: 2261.60376
-    },
-    {
-      date: '2017-03-01',
-      value: 2268.68157074
-    },
-    {
-      date: '2017-04-01',
-      value: 2525.2942
-    },
-    {
-      date: '2017-05-01',
-      value: 2929.3595107399997
-    },
-    {
-      date: '2017-06-01',
-      value: 3088.5172438900004
-    },
-    {
-      date: '2017-07-01',
-      value: 3281.2490946300004
-    },
-    {
-      date: '2017-08-01',
-      value: 4714.57822537
-    },
-    {
-      date: '2017-09-01',
-      value: 5717.262455259565
-    },
-    {
-      date: '2017-10-01',
-      value: 5338.742482334544
-    },
-    {
-      date: '2017-11-01',
-      value: 6361.263771554509
-    },
-    {
-      date: '2017-12-01',
-      value: 8373.260491904595
-    },
-    {
-      date: '2018-01-01',
-      value: 9783.208968191562
-    },
-    {
-      date: '2018-02-01',
-      value: 7841.2667100173
-    },
-    {
-      date: '2018-03-01',
-      value: 8582.133039380678
-    },
-    {
-      date: '2018-04-01',
-      value: 5901.8362986766715
-    },
-    {
-      date: '2018-05-01',
-      value: 7367.392976151925
-    },
-    {
-      date: '2018-06-01',
-      value: 6490.164314049853
-    },
-    {
-      date: '2018-07-01',
-      value: 6365.351621654618
-    },
-    {
-      date: '2018-08-01',
-      value: 6614.532706931272
-    },
-    {
-      date: '2018-09-01',
-      value: 6402.052882414409
-    },
-    {
-      date: '2018-10-01',
-      value: 15270.327917651943
-    },
-    {
-      date: '2018-11-01',
-      value: 13929.833891940816
-    },
-    {
-      date: '2018-12-01',
-      value: 12995.832254431414
-    },
-    {
-      date: '2019-01-01',
-      value: 11792.447013828998
-    },
-    {
-      date: '2019-02-01',
-      value: 11988.224284346446
-    },
-    {
-      date: '2019-03-01',
-      value: 13536.39667099519
-    },
-    {
-      date: '2019-04-01',
-      value: 14301.83740090022
-    },
-    {
-      date: '2019-05-01',
-      value: 14902.994910520581
-    },
-    {
-      date: '2019-06-01',
-      value: 15373.418326284132
-    },
-    {
-      date: '2019-07-01',
-      value: 17545.70705465703
-    },
-    {
-      date: '2019-08-01',
-      value: 17206.28500223782
-    },
-    {
-      date: '2019-09-01',
-      value: 17782.445200108898
-    },
-    {
-      date: '2019-10-01',
-      value: 17050.25875252655
-    },
-    {
-      date: '2019-11-01',
-      value: 18517.053521416237
-    },
-    {
-      date: '2019-12-01',
-      value: 17850.649021651363
-    },
-    {
-      date: '2020-01-01',
-      value: 18817.269786559067
-    },
-    {
-      date: '2020-02-01',
-      value: 22769.842312027653
-    },
-    {
-      date: '2020-03-01',
-      value: 23065.56002316582
-    },
-    {
-      date: '2020-04-01',
-      value: 19738.122641884733
-    },
-    {
-      date: '2020-05-01',
-      value: 25112.281463810643
-    },
-    {
-      date: '2020-06-01',
-      value: 28753.054132147452
-    },
-    {
-      date: '2020-07-01',
-      value: 32207.62827031543
-    },
-    {
-      date: '2020-08-01',
-      value: 37837.88816828611
-    },
-    {
-      date: '2020-09-01',
-      value: 50018.740185519295
-    },
-    {
-      date: '2020-10-01',
-      value: 46593.322295801525
-    },
-    {
-      date: '2020-11-01',
-      value: 44440.18743231742
-    },
-    {
-      date: '2020-12-01',
-      value: 57582.23077536893
-    },
-    {
-      date: '2021-01-01',
-      value: 68823.02446077733
-    },
-    {
-      date: '2021-02-01',
-      value: 64516.42092139593
-    },
-    {
-      date: '2021-03-01',
-      value: 82465.97581106682
-    },
-    {
-      date: '2021-03-18',
-      value: 86666.03082624623
-    }
-  ],
-  isAnimated: true
+export const Simple: Story = {
+  args: {
+    historicalDataItems: [
+      {
+        date: '2017-01-01',
+        value: 2561.60376
+      },
+      {
+        date: '2017-02-01',
+        value: 2261.60376
+      },
+      {
+        date: '2017-03-01',
+        value: 2268.68157074
+      },
+      {
+        date: '2017-04-01',
+        value: 2525.2942
+      },
+      {
+        date: '2017-05-01',
+        value: 2929.3595107399997
+      },
+      {
+        date: '2017-06-01',
+        value: 3088.5172438900004
+      },
+      {
+        date: '2017-07-01',
+        value: 3281.2490946300004
+      },
+      {
+        date: '2017-08-01',
+        value: 4714.57822537
+      },
+      {
+        date: '2017-09-01',
+        value: 5717.262455259565
+      },
+      {
+        date: '2017-10-01',
+        value: 5338.742482334544
+      },
+      {
+        date: '2017-11-01',
+        value: 6361.263771554509
+      },
+      {
+        date: '2017-12-01',
+        value: 8373.260491904595
+      },
+      {
+        date: '2018-01-01',
+        value: 9783.208968191562
+      },
+      {
+        date: '2018-02-01',
+        value: 7841.2667100173
+      },
+      {
+        date: '2018-03-01',
+        value: 8582.133039380678
+      },
+      {
+        date: '2018-04-01',
+        value: 5901.8362986766715
+      },
+      {
+        date: '2018-05-01',
+        value: 7367.392976151925
+      },
+      {
+        date: '2018-06-01',
+        value: 6490.164314049853
+      },
+      {
+        date: '2018-07-01',
+        value: 6365.351621654618
+      },
+      {
+        date: '2018-08-01',
+        value: 6614.532706931272
+      },
+      {
+        date: '2018-09-01',
+        value: 6402.052882414409
+      },
+      {
+        date: '2018-10-01',
+        value: 15270.327917651943
+      },
+      {
+        date: '2018-11-01',
+        value: 13929.833891940816
+      },
+      {
+        date: '2018-12-01',
+        value: 12995.832254431414
+      },
+      {
+        date: '2019-01-01',
+        value: 11792.447013828998
+      },
+      {
+        date: '2019-02-01',
+        value: 11988.224284346446
+      },
+      {
+        date: '2019-03-01',
+        value: 13536.39667099519
+      },
+      {
+        date: '2019-04-01',
+        value: 14301.83740090022
+      },
+      {
+        date: '2019-05-01',
+        value: 14902.994910520581
+      },
+      {
+        date: '2019-06-01',
+        value: 15373.418326284132
+      },
+      {
+        date: '2019-07-01',
+        value: 17545.70705465703
+      },
+      {
+        date: '2019-08-01',
+        value: 17206.28500223782
+      },
+      {
+        date: '2019-09-01',
+        value: 17782.445200108898
+      },
+      {
+        date: '2019-10-01',
+        value: 17050.25875252655
+      },
+      {
+        date: '2019-11-01',
+        value: 18517.053521416237
+      },
+      {
+        date: '2019-12-01',
+        value: 17850.649021651363
+      },
+      {
+        date: '2020-01-01',
+        value: 18817.269786559067
+      },
+      {
+        date: '2020-02-01',
+        value: 22769.842312027653
+      },
+      {
+        date: '2020-03-01',
+        value: 23065.56002316582
+      },
+      {
+        date: '2020-04-01',
+        value: 19738.122641884733
+      },
+      {
+        date: '2020-05-01',
+        value: 25112.281463810643
+      },
+      {
+        date: '2020-06-01',
+        value: 28753.054132147452
+      },
+      {
+        date: '2020-07-01',
+        value: 32207.62827031543
+      },
+      {
+        date: '2020-08-01',
+        value: 37837.88816828611
+      },
+      {
+        date: '2020-09-01',
+        value: 50018.740185519295
+      },
+      {
+        date: '2020-10-01',
+        value: 46593.322295801525
+      },
+      {
+        date: '2020-11-01',
+        value: 44440.18743231742
+      },
+      {
+        date: '2020-12-01',
+        value: 57582.23077536893
+      },
+      {
+        date: '2021-01-01',
+        value: 68823.02446077733
+      },
+      {
+        date: '2021-02-01',
+        value: 64516.42092139593
+      },
+      {
+        date: '2021-03-01',
+        value: 82465.97581106682
+      },
+      {
+        date: '2021-03-18',
+        value: 86666.03082624623
+      }
+    ],
+    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 = {
-  size: 'large'
+export const Large: Story = {
+  args: {
+    size: 'large'
+  }
 };
 
-export const NoLabel = Template.bind({});
-NoLabel.args = {
-  showLabel: false
+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,38 +1,39 @@
 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 = {
-  baseCurrency: 'USD',
-  keys: ['name'],
-  locale: 'en-US',
-  positions: {
-    Africa: { name: 'Africa', value: 983.22461479889288 },
-    Asia: { name: 'Asia', value: 12074.754633964973 },
-    Europe: { name: 'Europe', value: 34432.837085290535 },
-    'North America': { name: 'North America', value: 26539.89987780503 },
-    Oceania: { name: 'Oceania', value: 1402.220605072031 },
-    'South America': { name: 'South America', value: 4938.25202180719859 }
+export const Simple: Story = {
+  args: {
+    baseCurrency: 'USD',
+    keys: ['name'],
+    locale: 'en-US',
+    positions: {
+      Africa: { name: 'Africa', value: 983.22461479889288 },
+      Asia: { name: 'Asia', value: 12074.754633964973 },
+      Europe: { name: 'Europe', value: 34432.837085290535 },
+      'North America': { name: 'North America', value: 26539.89987780503 },
+      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 = {
-  enableLink: false
+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 = {
-  isLoading: true
+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 = {
-  value: -1
+export const Down: Story = {
+  args: {
+    value: -1
+  }
 };
 
-export const Up = Template.bind({});
-Up.args = {
-  value: 1
+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 = {
-  value: undefined
+export const Loading: Story = {
+  args: {
+    value: undefined
+  }
 };
 
-export const Currency = Template.bind({});
-Currency.args = {
-  isCurrency: true,
-  locale: 'en-US',
-  unit: 'USD',
-  value: 7
+export const Currency: Story = {
+  args: {
+    isCurrency: true,
+    locale: 'en-US',
+    unit: 'USD',
+    value: 7
+  }
 };
 
-export const Label = Template.bind({});
-Label.args = {
-  locale: 'en-US',
-  value: 7.25
+export const Label: Story = {
+  args: {
+    locale: 'en-US',
+    value: 7.25
+  }
 };
 
-export const PerformancePositive = Template.bind({});
-PerformancePositive.args = {
-  locale: 'en-US',
-  colorizeSign: true,
-  isPercent: true,
-  value: 0.0136810853673890378
+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',
-  colorizeSign: true,
-  isPercent: true,
-  value: -0.0136810853673890378
+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',
-  colorizeSign: true,
-  isPercent: true,
-  value: -2.388915360475e-8
+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 = {
-  locale: 'en-US',
-  precision: 3,
-  value: 7.2534802394809285309
+export const Precision: Story = {
+  args: {
+    locale: 'en-US',
+    precision: 3,
+    value: 7.2534802394809285309
+  }
 };