open-source-mirrors
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Bugfix/fix storybook setup (#4168)

Browse Source 
* Fix storybook setup

* Update changelog
pull/4056/merge
Karel De Smet 4 days ago committed by GitHub
parent a4ee33f6df
commit 68868df41a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 390 additions and 379 deletions
Show Stats Download Patch File Download Diff File

2
CHANGELOG.md
Unescape View File

@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed ### Fixed
- Improved the handling of a missing url in the endpoint to fetch the logo of an asset or a platform - 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 ## 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 `ngx-markdown` from version `18.0.0` to `19.0.0`
- Upgraded `Nx` from version `20.1.2` to `20.3.0` - Upgraded `Nx` from version `20.1.2` to `20.3.0`
- Upgraded `prisma` from version `6.0.1` to `6.1.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` - Upgraded `zone.js` from version `0.14.10` to `0.15.0`
### Fixed ### Fixed

37
libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts
Unescape View File

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

443
libs/ui/src/lib/line-chart/line-chart.component.stories.ts
Unescape View File

@ -1,235 +1,234 @@
import { CommonModule } from '@angular/common'; 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 { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { LineChartComponent } from './line-chart.component'; import { GfLineChartComponent } from './line-chart.component';
export default { export default {
title: 'Line Chart', title: 'Line Chart',
component: LineChartComponent, component: GfLineChartComponent,
decorators: [ decorators: [
moduleMetadata({ moduleMetadata({
declarations: [LineChartComponent], imports: [CommonModule, GfLineChartComponent, NgxSkeletonLoaderModule]
imports: [CommonModule, NgxSkeletonLoaderModule]
}) })
] ]
} as Meta<LineChartComponent>; } as Meta<GfLineChartComponent>;
const Template: Story<LineChartComponent> = (args: LineChartComponent) => ({ type Story = StoryObj<GfLineChartComponent>;
props: args
});
export const Simple = Template.bind({}); export const Simple: Story = {
Simple.args = { args: {
historicalDataItems: [ historicalDataItems: [
{ {
date: '2017-01-01', date: '2017-01-01',
value: 2561.60376 value: 2561.60376
}, },
{ {
date: '2017-02-01', date: '2017-02-01',
value: 2261.60376 value: 2261.60376
}, },
{ {
date: '2017-03-01', date: '2017-03-01',
value: 2268.68157074 value: 2268.68157074
}, },
{ {
date: '2017-04-01', date: '2017-04-01',
value: 2525.2942 value: 2525.2942
}, },
{ {
date: '2017-05-01', date: '2017-05-01',
value: 2929.3595107399997 value: 2929.3595107399997
}, },
{ {
date: '2017-06-01', date: '2017-06-01',
value: 3088.5172438900004 value: 3088.5172438900004
}, },
{ {
date: '2017-07-01', date: '2017-07-01',
value: 3281.2490946300004 value: 3281.2490946300004
}, },
{ {
date: '2017-08-01', date: '2017-08-01',
value: 4714.57822537 value: 4714.57822537
}, },
{ {
date: '2017-09-01', date: '2017-09-01',
value: 5717.262455259565 value: 5717.262455259565
}, },
{ {
date: '2017-10-01', date: '2017-10-01',
value: 5338.742482334544 value: 5338.742482334544
}, },
{ {
date: '2017-11-01', date: '2017-11-01',
value: 6361.263771554509 value: 6361.263771554509
}, },
{ {
date: '2017-12-01', date: '2017-12-01',
value: 8373.260491904595 value: 8373.260491904595
}, },
{ {
date: '2018-01-01', date: '2018-01-01',
value: 9783.208968191562 value: 9783.208968191562
}, },
{ {
date: '2018-02-01', date: '2018-02-01',
value: 7841.2667100173 value: 7841.2667100173
}, },
{ {
date: '2018-03-01', date: '2018-03-01',
value: 8582.133039380678 value: 8582.133039380678
}, },
{ {
date: '2018-04-01', date: '2018-04-01',
value: 5901.8362986766715 value: 5901.8362986766715
}, },
{ {
date: '2018-05-01', date: '2018-05-01',
value: 7367.392976151925 value: 7367.392976151925
}, },
{ {
date: '2018-06-01', date: '2018-06-01',
value: 6490.164314049853 value: 6490.164314049853
}, },
{ {
date: '2018-07-01', date: '2018-07-01',
value: 6365.351621654618 value: 6365.351621654618
}, },
{ {
date: '2018-08-01', date: '2018-08-01',
value: 6614.532706931272 value: 6614.532706931272
}, },
{ {
date: '2018-09-01', date: '2018-09-01',
value: 6402.052882414409 value: 6402.052882414409
}, },
{ {
date: '2018-10-01', date: '2018-10-01',
value: 15270.327917651943 value: 15270.327917651943
}, },
{ {
date: '2018-11-01', date: '2018-11-01',
value: 13929.833891940816 value: 13929.833891940816
}, },
{ {
date: '2018-12-01', date: '2018-12-01',
value: 12995.832254431414 value: 12995.832254431414
}, },
{ {
date: '2019-01-01', date: '2019-01-01',
value: 11792.447013828998 value: 11792.447013828998
}, },
{ {
date: '2019-02-01', date: '2019-02-01',
value: 11988.224284346446 value: 11988.224284346446
}, },
{ {
date: '2019-03-01', date: '2019-03-01',
value: 13536.39667099519 value: 13536.39667099519
}, },
{ {
date: '2019-04-01', date: '2019-04-01',
value: 14301.83740090022 value: 14301.83740090022
}, },
{ {
date: '2019-05-01', date: '2019-05-01',
value: 14902.994910520581 value: 14902.994910520581
}, },
{ {
date: '2019-06-01', date: '2019-06-01',
value: 15373.418326284132 value: 15373.418326284132
}, },
{ {
date: '2019-07-01', date: '2019-07-01',
value: 17545.70705465703 value: 17545.70705465703
}, },
{ {
date: '2019-08-01', date: '2019-08-01',
value: 17206.28500223782 value: 17206.28500223782
}, },
{ {
date: '2019-09-01', date: '2019-09-01',
value: 17782.445200108898 value: 17782.445200108898
}, },
{ {
date: '2019-10-01', date: '2019-10-01',
value: 17050.25875252655 value: 17050.25875252655
}, },
{ {
date: '2019-11-01', date: '2019-11-01',
value: 18517.053521416237 value: 18517.053521416237
}, },
{ {
date: '2019-12-01', date: '2019-12-01',
value: 17850.649021651363 value: 17850.649021651363
}, },
{ {
date: '2020-01-01', date: '2020-01-01',
value: 18817.269786559067 value: 18817.269786559067
}, },
{ {
date: '2020-02-01', date: '2020-02-01',
value: 22769.842312027653 value: 22769.842312027653
}, },
{ {
date: '2020-03-01', date: '2020-03-01',
value: 23065.56002316582 value: 23065.56002316582
}, },
{ {
date: '2020-04-01', date: '2020-04-01',
value: 19738.122641884733 value: 19738.122641884733
}, },
{ {
date: '2020-05-01', date: '2020-05-01',
value: 25112.281463810643 value: 25112.281463810643
}, },
{ {
date: '2020-06-01', date: '2020-06-01',
value: 28753.054132147452 value: 28753.054132147452
}, },
{ {
date: '2020-07-01', date: '2020-07-01',
value: 32207.62827031543 value: 32207.62827031543
}, },
{ {
date: '2020-08-01', date: '2020-08-01',
value: 37837.88816828611 value: 37837.88816828611
}, },
{ {
date: '2020-09-01', date: '2020-09-01',
value: 50018.740185519295 value: 50018.740185519295
}, },
{ {
date: '2020-10-01', date: '2020-10-01',
value: 46593.322295801525 value: 46593.322295801525
}, },
{ {
date: '2020-11-01', date: '2020-11-01',
value: 44440.18743231742 value: 44440.18743231742
}, },
{ {
date: '2020-12-01', date: '2020-12-01',
value: 57582.23077536893 value: 57582.23077536893
}, },
{ {
date: '2021-01-01', date: '2021-01-01',
value: 68823.02446077733 value: 68823.02446077733
}, },
{ {
date: '2021-02-01', date: '2021-02-01',
value: 64516.42092139593 value: 64516.42092139593
}, },
{ {
date: '2021-03-01', date: '2021-03-01',
value: 82465.97581106682 value: 82465.97581106682
}, },
{ {
date: '2021-03-18', date: '2021-03-18',
value: 86666.03082624623 value: 86666.03082624623
} }
], ],
isAnimated: true isAnimated: true
}
}; };

32
libs/ui/src/lib/logo/logo.component.stories.ts
Unescape View File

@ -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 { export default {
title: 'Logo', title: 'Logo',
component: LogoComponent, component: GfLogoComponent,
decorators: [ decorators: [
moduleMetadata({ moduleMetadata({
imports: [] imports: []
}) })
] ]
} as Meta<LogoComponent>; } as Meta<GfLogoComponent>;
const Template: Story<LogoComponent> = (args: LogoComponent) => ({ type Story = StoryObj<GfLogoComponent>;
props: args
});
export const Default = Template.bind({}); export const Default: Story = {
Default.args = {}; args: {}
};
export const Large = Template.bind({}); export const Large: Story = {
Large.args = { args: {
size: 'large' size: 'large'
}
}; };
export const NoLabel = Template.bind({}); export const NoLabel: Story = {
NoLabel.args = { args: {
showLabel: false showLabel: false
}
}; };

24
libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts
Unescape View File

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

47
libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts
Unescape View File

@ -1,38 +1,39 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import '@angular/localize/init'; 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 { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { PortfolioProportionChartComponent } from './portfolio-proportion-chart.component'; import { GfPortfolioProportionChartComponent } from './portfolio-proportion-chart.component';
export default { export default {
title: 'Portfolio Proportion Chart', title: 'Portfolio Proportion Chart',
component: PortfolioProportionChartComponent, component: GfPortfolioProportionChartComponent,
decorators: [ decorators: [
moduleMetadata({ moduleMetadata({
declarations: [PortfolioProportionChartComponent], imports: [
imports: [CommonModule, NgxSkeletonLoaderModule] CommonModule,
GfPortfolioProportionChartComponent,
NgxSkeletonLoaderModule
]
}) })
] ]
} as Meta<PortfolioProportionChartComponent>; } as Meta<GfPortfolioProportionChartComponent>;
const Template: Story<PortfolioProportionChartComponent> = ( type Story = StoryObj<GfPortfolioProportionChartComponent>;
args: PortfolioProportionChartComponent
) => ({
props: args
});
export const Simple = Template.bind({}); export const Simple: Story = {
Simple.args = { args: {
baseCurrency: 'USD', baseCurrency: 'USD',
keys: ['name'], keys: ['name'],
locale: 'en-US', locale: 'en-US',
positions: { positions: {
Africa: { name: 'Africa', value: 983.22461479889288 }, Africa: { name: 'Africa', value: 983.22461479889288 },
Asia: { name: 'Asia', value: 12074.754633964973 }, Asia: { name: 'Asia', value: 12074.754633964973 },
Europe: { name: 'Europe', value: 34432.837085290535 }, Europe: { name: 'Europe', value: 34432.837085290535 },
'North America': { name: 'North America', value: 26539.89987780503 }, 'North America': { name: 'North America', value: 26539.89987780503 },
Oceania: { name: 'Oceania', value: 1402.220605072031 }, Oceania: { name: 'Oceania', value: 1402.220605072031 },
'South America': { name: 'South America', value: 4938.25202180719859 } 'South America': { name: 'South America', value: 4938.25202180719859 }
}
} }
}; };

27
libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts
Unescape View File

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

59
libs/ui/src/lib/trend-indicator/trend-indicator.component.stories.ts
Unescape View File

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

98
libs/ui/src/lib/value/value.component.stories.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save