From 68868df41a6e106b4b73e4e8bbf309399076e2e1 Mon Sep 17 00:00:00 2001 From: Karel De Smet Date: Mon, 6 Jan 2025 22:49:55 +0100 Subject: [PATCH] Bugfix/fix storybook setup (#4168) * Fix storybook setup * Update changelog --- CHANGELOG.md | 2 + .../fire-calculator.component.stories.ts | 37 +- .../line-chart.component.stories.ts | 443 +++++++++--------- .../ui/src/lib/logo/logo.component.stories.ts | 32 +- .../no-transactions-info.component.stories.ts | 24 +- ...olio-proportion-chart.component.stories.ts | 47 +- .../premium-indicator.component.stories.ts | 27 +- .../trend-indicator.component.stories.ts | 59 +-- .../src/lib/value/value.component.stories.ts | 98 ++-- 9 files changed, 390 insertions(+), 379 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4908eff68..f669ea14e 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts index 637ee3bd9..0ad868ff9 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts +++ b/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; +} as Meta; -const Template: Story = ( - args: FireCalculatorComponent -) => ({ - props: args -}); +type Story = StoryObj; -export const Simple = Template.bind({}); -Simple.args = { - currency: 'USD', - fireWealth: 0, - locale: locale +export const Simple: Story = { + args: { + currency: 'USD', + fireWealth: 0, + locale: locale + } }; diff --git a/libs/ui/src/lib/line-chart/line-chart.component.stories.ts b/libs/ui/src/lib/line-chart/line-chart.component.stories.ts index 59580a136..9770074d2 100644 --- a/libs/ui/src/lib/line-chart/line-chart.component.stories.ts +++ b/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; +} as Meta; -const Template: Story = (args: LineChartComponent) => ({ - props: args -}); +type Story = StoryObj; -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 + } }; diff --git a/libs/ui/src/lib/logo/logo.component.stories.ts b/libs/ui/src/lib/logo/logo.component.stories.ts index 196043eb3..c720ebd92 100644 --- a/libs/ui/src/lib/logo/logo.component.stories.ts +++ b/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; +} as Meta; -const Template: Story = (args: LogoComponent) => ({ - props: args -}); +type Story = StoryObj; -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 + } }; diff --git a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts index 13a3404ee..faf536244 100644 --- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts +++ b/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; +} as Meta; -const Template: Story = ( - args: NoTransactionsInfoComponent -) => ({ - props: args -}); +type Story = StoryObj; -export const Default = Template.bind({}); -Default.args = {}; +export const Default: Story = { + args: {} +}; diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts index 7d6db1b52..90aa0cee8 100644 --- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts +++ b/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; +} as Meta; -const Template: Story = ( - args: PortfolioProportionChartComponent -) => ({ - props: args -}); +type Story = StoryObj; -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 } + } } }; diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts b/libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts index bdb9c6543..4cf61084c 100644 --- a/libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts +++ b/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; +} as Meta; -const Template: Story = ( - args: PremiumIndicatorComponent -) => ({ - props: args -}); +type Story = StoryObj; -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 + } }; diff --git a/libs/ui/src/lib/trend-indicator/trend-indicator.component.stories.ts b/libs/ui/src/lib/trend-indicator/trend-indicator.component.stories.ts index 0d8438706..1db9e2995 100644 --- a/libs/ui/src/lib/trend-indicator/trend-indicator.component.stories.ts +++ b/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; +} as Meta; -const Template: Story = ( - args: TrendIndicatorComponent -) => ({ - props: args -}); +type Story = StoryObj; -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' + } }; diff --git a/libs/ui/src/lib/value/value.component.stories.ts b/libs/ui/src/lib/value/value.component.stories.ts index fc3e202ea..ff9f5a259 100644 --- a/libs/ui/src/lib/value/value.component.stories.ts +++ b/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; +} as Meta; -const Template: Story = (args: ValueComponent) => ({ - props: args -}); +type Story = StoryObj; -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 + } };