Skip to content

Commit fbb915a

Browse files
majahendzel-vamajahendzel-va
authored
fix(blog): storybook errors (#309)
1 parent 2719146 commit fbb915a

File tree

8 files changed

+186
-36
lines changed

8 files changed

+186
-36
lines changed

‎libs/blog/articles/feature-article/src/lib/article-details/article-details.stories.ts

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,41 @@
1-
import type { Meta, StoryObj } from '@storybook/angular';
1+
import { provideTransloco, translocoConfig } from '@jsverse/transloco';
2+
import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
23

3-
import { Article } from '@angular-love/contracts/articles';
4+
import { TranslocoHttpLoader } from '@angular-love/blog/i18n/data-access';
5+
import { AlLocalizeService } from '@angular-love/blog/i18n/util';
6+
import { Article, SeoData } from '@angular-love/contracts/articles';
7+
import { ConfigService } from '@angular-love/shared/config';
48

59
import { ArticleDetailsComponent } from './article-details.component';
610

11+
const translocoConf = translocoConfig({
12+
availableLangs: ['pl', 'en'],
13+
defaultLang: 'pl',
14+
});
15+
716
const meta: Meta<ArticleDetailsComponent> = {
817
component: ArticleDetailsComponent,
918
title: 'Articles / details',
19+
decorators: [
20+
applicationConfig({
21+
providers: [
22+
ConfigService,
23+
AlLocalizeService,
24+
provideTransloco({
25+
config: translocoConf,
26+
loader: TranslocoHttpLoader,
27+
}),
28+
],
29+
}),
30+
],
1031
};
1132

1233
const articleDetails: Article = {
34+
id: 0,
35+
slug: '',
36+
seo: {} as SeoData,
37+
otherTranslations: {} as any,
38+
lang: 'en',
1339
readingTime: '3',
1440
title: "Why Angular signals won't replace RxJs",
1541
difficulty: 'beginner',

‎libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.stories.ts

Lines changed: 44 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
1+
import { provideTransloco, translocoConfig } from '@jsverse/transloco';
2+
import {
3+
applicationConfig,
4+
Meta,
5+
moduleMetadata,
6+
StoryObj,
7+
} from '@storybook/angular';
28

9+
import { TranslocoHttpLoader } from '@angular-love/blog/i18n/data-access';
10+
import { AlLocalizeService } from '@angular-love/blog/i18n/util';
311
import { ArticleCard } from '@angular-love/blog/shared/types';
412

13+
import { ArticleCompactCardComponent } from '../components/article-compact-card/article-compact-card.component';
14+
import { ArticleHeroCardComponent } from '../components/article-hero-card/article-hero-card.component';
15+
import { ArticleHorizontalCardComponent } from '../components/article-horizontal-card/article-horizontal-card.component';
516
import { ArticleRegularCardComponent } from '../components/article-regular-card/article-regular-card.component';
617

7-
import { CardType, UiArticleCardComponent } from './ui-article-card.component';
18+
import { UiArticleCardComponent } from './ui-article-card.component';
819

920
const article: ArticleCard = {
1021
title: 'Angular Storybook',
@@ -21,20 +32,38 @@ const article: ArticleCard = {
2132
publishDate: new Date('2021-05-01').toISOString(),
2233
};
2334

24-
const layoutCompact: CardType = 'compact';
25-
const layoutHero: CardType = 'hero';
26-
const layoutRegular: CardType = 'regular';
27-
const layoutHorizontal: CardType = 'horizontal';
35+
const translocoConf = translocoConfig({
36+
availableLangs: ['pl', 'en'],
37+
defaultLang: 'pl',
38+
});
2839

2940
const meta: Meta<UiArticleCardComponent> = {
3041
component: UiArticleCardComponent,
3142
subcomponents: {
3243
ArticleUiCardComponent: ArticleRegularCardComponent,
44+
ArticleCompactCardComponent: ArticleCompactCardComponent,
45+
ArticleHeroCardComponent: ArticleHeroCardComponent,
46+
ArticleHorizontalCardComponent: ArticleHorizontalCardComponent,
3347
},
3448
title: 'Articles / UiArticleCardComponent',
3549
decorators: [
3650
moduleMetadata({
37-
imports: [ArticleRegularCardComponent],
51+
imports: [
52+
ArticleRegularCardComponent,
53+
ArticleCompactCardComponent,
54+
ArticleHeroCardComponent,
55+
ArticleHorizontalCardComponent,
56+
],
57+
providers: [AlLocalizeService],
58+
}),
59+
60+
applicationConfig({
61+
providers: [
62+
provideTransloco({
63+
config: translocoConf,
64+
loader: TranslocoHttpLoader,
65+
}),
66+
],
3867
}),
3968
],
4069
};
@@ -45,15 +74,12 @@ type Story = StoryObj<UiArticleCardComponent>;
4574
export const compact: Story = {
4675
args: {
4776
article: article,
48-
cardType: layoutCompact,
4977
},
5078
render: (args) => ({
5179
props: args,
5280
template: `
53-
<div class="w-[408px] h-[232px]">
54-
<al-article-regular-card [article]="article" [cardType]="cardType">
55-
<al-article-hero-card [article]="article" [layout]="cardType.layout"></al-article-hero-card>
56-
</al-article-regular-card>
81+
<div style="width: 405px;">
82+
<al-article-compact-card [article]="article"></al-article-compact-card>
5783
</div>
5884
`,
5985
}),
@@ -62,47 +88,38 @@ export const compact: Story = {
6288
export const hero: Story = {
6389
args: {
6490
article: article,
65-
cardType: layoutHero,
6691
},
6792
render: (args) => ({
6893
props: args,
6994
template: `
70-
<div class="h-[430px]">
71-
<al-article-regular-card [article]="article" [cardType]="cardType">
72-
<al-article-hero-card [article]="article" [layout]="cardType.layout"></al-article-hero-card>
73-
</al-article-regular-card>
95+
<div style="width: 816px;">
96+
<al-article-hero-card [article]="article"></al-article-hero-card>
7497
</div>`,
7598
}),
7699
};
77100

78101
export const horizontal: Story = {
79102
args: {
80103
article: article,
81-
cardType: layoutHorizontal,
82104
},
83105
render: (args) => ({
84106
props: args,
85107
template: `
86-
<div style="width: 100%; height: 230px;">
87-
<al-article-regular-card [article]="article" [cardType]="cardType">
88-
<al-article-regular-card [article]="article" [layout]="cardType.layout"></al-article-regular-card>
89-
</al-article-regular-card>
108+
<div style="height: 230px;">
109+
<al-article-horizontal-card [article]="article"></al-article-horizontal-card>
90110
</div>`,
91111
}),
92112
};
93113

94114
export const regular: Story = {
95115
args: {
96116
article: article,
97-
cardType: layoutRegular,
98117
},
99118
render: (args) => ({
100119
props: args,
101120
template: `
102-
<div style="width: 460px; height: 600px;">
103-
<al-article-regular-card [article]="article" [cardType]="cardType">
104-
<al-article-regular-card [article]="article" [layout]="cardType.layout"></al-article-regular-card>
105-
</al-article-regular-card>
121+
<div style="width: 405px; height: 514px;">
122+
<al-article-regular-card [article]="article"></al-article-regular-card>
106123
</div>`,
107124
}),
108125
};

‎libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.stories.ts

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,36 @@
1-
import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
1+
import { provideTransloco, translocoConfig } from '@jsverse/transloco';
2+
import {
3+
applicationConfig,
4+
Meta,
5+
moduleMetadata,
6+
StoryObj,
7+
} from '@storybook/angular';
8+
9+
import { TranslocoHttpLoader } from '@angular-love/blog/i18n/data-access';
210

311
import { TableOfContentsScrollSpyDirective } from './table-of-contents-scroll-spy.directive';
412
import { TableOfContentsComponent } from './table-of-contents.component';
513

14+
const translocoConf = translocoConfig({
15+
availableLangs: ['pl', 'en'],
16+
defaultLang: 'pl',
17+
});
18+
619
const meta: Meta<TableOfContentsComponent> = {
720
component: TableOfContentsComponent,
821
title: 'Articles / Table of contents',
922
decorators: [
1023
moduleMetadata({
1124
imports: [TableOfContentsScrollSpyDirective],
1225
}),
26+
applicationConfig({
27+
providers: [
28+
provideTransloco({
29+
config: translocoConf,
30+
loader: TranslocoHttpLoader,
31+
}),
32+
],
33+
}),
1334
],
1435
};
1536

‎libs/blog/i18n/data-access/project.json

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,17 @@
1616
"lint": {
1717
"executor": "@nx/eslint:lint"
1818
}
19-
}
19+
},
20+
"nx-enforce-module-boundaries": [
21+
true,
22+
{
23+
"allow": [],
24+
"depConstraints": [
25+
{
26+
"sourceTag": "*",
27+
"onlyDependOnLibsWithTags": ["*"]
28+
}
29+
]
30+
}
31+
]
2032
}

‎libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.stories.ts

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,36 @@
1+
import { provideTransloco, translocoConfig } from '@jsverse/transloco';
12
import { NgIconComponent } from '@ng-icons/core';
2-
import type { Meta, StoryObj } from '@storybook/angular';
3-
import { moduleMetadata } from '@storybook/angular';
3+
import {
4+
applicationConfig,
5+
Meta,
6+
moduleMetadata,
7+
StoryObj,
8+
} from '@storybook/angular';
9+
10+
import { TranslocoHttpLoader } from '@angular-love/blog/i18n/data-access';
411

512
import { FooterComponent } from './footer.component';
613

14+
const translocoConf = translocoConfig({
15+
availableLangs: ['pl', 'en'],
16+
defaultLang: 'pl',
17+
});
18+
719
const meta: Meta<FooterComponent> = {
820
component: FooterComponent,
921
title: 'Components / Footer',
1022
decorators: [
1123
moduleMetadata({
1224
imports: [NgIconComponent],
1325
}),
26+
applicationConfig({
27+
providers: [
28+
provideTransloco({
29+
config: translocoConf,
30+
loader: TranslocoHttpLoader,
31+
}),
32+
],
33+
}),
1434
],
1535
};
1636
export default meta;

‎libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.stories.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,28 @@
1-
import type { Meta, StoryObj } from '@storybook/angular';
1+
import { provideTransloco, translocoConfig } from '@jsverse/transloco';
2+
import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
3+
4+
import { TranslocoHttpLoader } from '@angular-love/blog/i18n/data-access';
25

36
import { UiDifficultyComponent } from './ui-difficulty.component';
47

8+
const translocoConf = translocoConfig({
9+
availableLangs: ['pl', 'en'],
10+
defaultLang: 'pl',
11+
});
12+
513
const meta: Meta<UiDifficultyComponent> = {
614
component: UiDifficultyComponent,
715
title: 'Shared UI / Difficulty',
16+
decorators: [
17+
applicationConfig({
18+
providers: [
19+
provideTransloco({
20+
config: translocoConf,
21+
loader: TranslocoHttpLoader,
22+
}),
23+
],
24+
}),
25+
],
826
};
927

1028
export default meta;

‎libs/blog/shared/ui-pagination/src/lib/pagination/pagination.component.stories.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,28 @@
1-
import { Meta, StoryObj } from '@storybook/angular';
1+
import { provideTransloco, translocoConfig } from '@jsverse/transloco';
2+
import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
3+
4+
import { TranslocoHttpLoader } from '@angular-love/blog/i18n/data-access';
25

36
import { PaginationComponent } from './pagination.component';
47

8+
const translocoConf = translocoConfig({
9+
availableLangs: ['pl', 'en'],
10+
defaultLang: 'pl',
11+
});
12+
513
const meta: Meta<PaginationComponent> = {
614
component: PaginationComponent,
715
title: 'Shared UI / Pagination',
16+
decorators: [
17+
applicationConfig({
18+
providers: [
19+
provideTransloco({
20+
config: translocoConf,
21+
loader: TranslocoHttpLoader,
22+
}),
23+
],
24+
}),
25+
],
826
};
927

1028
export default meta;

‎libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.stories.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,28 @@
1-
import type { Meta, StoryObj } from '@storybook/angular';
1+
import { provideTransloco, translocoConfig } from '@jsverse/transloco';
2+
import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
3+
4+
import { TranslocoHttpLoader } from '@angular-love/blog/i18n/data-access';
25

36
import { SocialMediaIconsComponent } from './social-media-icons.component';
47

8+
const translocoConf = translocoConfig({
9+
availableLangs: ['pl', 'en'],
10+
defaultLang: 'pl',
11+
});
12+
513
const meta: Meta<SocialMediaIconsComponent> = {
614
component: SocialMediaIconsComponent,
715
title: 'Shared ui / Social Media Icons',
16+
decorators: [
17+
applicationConfig({
18+
providers: [
19+
provideTransloco({
20+
config: translocoConf,
21+
loader: TranslocoHttpLoader,
22+
}),
23+
],
24+
}),
25+
],
826
};
927

1028
export default meta;

0 commit comments

Comments
 (0)