Feature/add storybook story for no transactions info component (#345)

* Add storybook story for no transactions info component

* Update changelog

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extended the statistics section on the about page by the _GitHub_ contributors count
 - Set up _Storybook_
   - Added a story for the logo component
+  - Added a story for the no transactions info component
   - Added a story for the value component
 
 ## 1.45.0 - 04.09.2021

apps/client/src/app/components/positions-table/positions-table.module.ts

@@ -8,10 +8,10 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfNoTransactionsInfoModule } from '../no-transactions-info/no-transactions-info.module';
 import { GfPositionDetailDialogModule } from '../position/position-detail-dialog/position-detail-dialog.module';
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
 import { PositionsTableComponent } from './positions-table.component';

apps/client/src/app/components/positions/positions.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
-import { GfNoTransactionsInfoModule } from '../no-transactions-info/no-transactions-info.module';
 import { GfPositionModule } from '../position/position.module';
 import { PositionsComponent } from './positions.component';
 

apps/client/src/app/components/rules/rules.module.ts

@@ -3,8 +3,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
-import { GfNoTransactionsInfoModule } from '../no-transactions-info/no-transactions-info.module';
 import { GfPositionModule } from '../position/position.module';
 import { RulesComponent } from './rules.component';
 

apps/client/src/app/pages/home/home-page.module.ts

@@ -5,12 +5,12 @@ import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/client/components/no-transactions-info/no-transactions-info.module';
 import { GfPerformanceChartDialogModule } from '@ghostfolio/client/components/performance-chart-dialog/performance-chart-dialog.module';
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
 import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';
 import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { HomePageRoutingModule } from './home-page-routing.module';
 import { HomePageComponent } from './home-page.component';

apps/client/src/app/pages/zen/zen-page.module.ts

@@ -5,9 +5,9 @@ import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/client/components/no-transactions-info/no-transactions-info.module';
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
 import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { ZenPageRoutingModule } from './zen-page-routing.module';
 import { ZenPageComponent } from './zen-page.component';

libs/ui/.storybook/preview.js

@@ -1 +1,3 @@
+import '@angular/localize/init';
+
 import '!style-loader!css-loader!sass-loader!../../../apps/client/src/styles.scss';

libs/ui/src/lib/no-transactions-info/index.ts

@@ -0,0 +1 @@
+export * from './no-transactions-info.module';

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

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