Skip to content

Commit 3fc66a4

Browse files
author
berdysheva
committed
feat: refactoring storybook pt1
1 parent 6fa730e commit 3fc66a4

File tree

18 files changed

+300
-1374
lines changed

18 files changed

+300
-1374
lines changed

‎src/blocks/Banner/__stories__/Banner.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const WithThemeTemplate: Story<BannerBlockModel> = (args) => (
2323
);
2424

2525
export const Default = DefaultTemplate.bind({});
26-
export const WithTheme = WithThemeTemplate.bind({});
26+
export const DarkTheme = WithThemeTemplate.bind({});
2727

2828
Default.args = data.default.content as BannerBlockProps;
29-
WithTheme.args = data.withTheme.content as BannerBlockProps;
29+
DarkTheme.args = data.darkTheme.content as BannerBlockProps;

‎src/blocks/Banner/__stories__/data.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
2-
"withTheme": {
2+
"darkTheme": {
33
"content": {
44
"theme": "dark",
55
"type": "banner-block",
66
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
77
"subtitle": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
8-
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png",
8+
"image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png",
99
"disableCompress": true,
10-
"color": "#000",
10+
"color": "#262626",
1111
"button": {
1212
"text": "Learn more",
1313
"url": "https://example.com"
@@ -21,13 +21,13 @@
2121
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
2222
"subtitle": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
2323
"image": {
24-
"light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
25-
"dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-white.png"
24+
"light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
25+
"dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png"
2626
},
2727
"disableCompress": true,
2828
"color": {
29-
"light": "#EEF3FE",
30-
"dark": "#000"
29+
"light": "#EFF2F8",
30+
"dark": "#262626"
3131
},
3232
"button": {
3333
"text": "Learn more",

‎src/blocks/CardLayout/__stories__/CardLayout.stories.tsx‎

Lines changed: 42 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,61 @@
1-
import React from 'react';
1+
import React, {Fragment} from 'react';
22
import {Meta, Story} from '@storybook/react/types-6-0';
33

44
import CardLayout from '../CardLayout';
5-
import {CardLayoutBlockModel, CardLayoutBlockProps} from '../../../models';
6-
import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
5+
import {CardLayoutBlockModel, CardLayoutBlockProps, SubBlockModels} from '../../../models';
6+
import {PageConstructor} from '../../../containers/PageConstructor';
77

88
import data from './data.json';
99

10-
const getPaddingsStoryName = (size: string) => {
11-
return data.cardsPaddings.storyName.replace('{{size}}', size);
12-
};
13-
1410
export default {
1511
title: 'Blocks/CardLayout',
1612
component: CardLayout,
1713
} as Meta;
1814

15+
const createCardArray = (count: number, card: any) => {
16+
const cardArray = [];
17+
for (let i = 0; i < count; i++) {
18+
cardArray.push(card);
19+
}
20+
21+
return cardArray;
22+
};
23+
1924
const DefaultTemplate: Story<CardLayoutBlockModel> = (args) => (
2025
<PageConstructor content={{blocks: [args]}} />
2126
);
2227

23-
const PaddingsTemplate: Story<CardLayoutBlockModel> = (args) => (
24-
<PageConstructor
25-
content={{
26-
blocks: [
27-
{
28-
...args,
29-
title: getPaddingsStoryName('s'),
30-
children: args.children?.map((child) => ({...child, paddingBottom: 's'})),
31-
},
32-
{
33-
...args,
34-
title: getPaddingsStoryName('m'),
35-
children: args.children?.map((child) => ({...child, paddingBottom: 'm'})),
36-
},
37-
{
38-
...args,
39-
title: getPaddingsStoryName('l'),
40-
children: args.children?.map((child) => ({...child, paddingBottom: 'l'})),
41-
},
42-
{
43-
...args,
44-
title: getPaddingsStoryName('xl'),
45-
children: args.children?.map((child) => ({...child, paddingBottom: 'xl'})),
46-
},
47-
],
48-
}}
49-
/>
28+
const ColSizeTemplate: Story<CardLayoutBlockModel> = (args) => (
29+
<Fragment>
30+
<PageConstructor
31+
content={{
32+
blocks: [
33+
{
34+
...args,
35+
description: data.colSizes.four.description,
36+
colSizes: data.colSizes.four.colSizes,
37+
},
38+
{
39+
...args,
40+
description: data.colSizes.two.description,
41+
colSizes: data.colSizes.two.colSizes,
42+
children: createCardArray(8, data.colSizes.two.card) as SubBlockModels[],
43+
},
44+
],
45+
}}
46+
/>
47+
</Fragment>
5048
);
5149

52-
export const CardsWithImage = DefaultTemplate.bind([]);
53-
export const CardsWithImageFullScreen = DefaultTemplate.bind([]);
54-
export const CardsWithImageAllProps = DefaultTemplate.bind([]);
55-
export const BackgroundCardsPaddings = PaddingsTemplate.bind([]);
56-
export const BackgroundCardsBackgroundColor = DefaultTemplate.bind([]);
57-
export const BackgroundCardsContentSizes = DefaultTemplate.bind([]);
58-
export const BackgroundCardsThemes = DefaultTemplate.bind([]);
59-
60-
CardsWithImage.args = data.cardsWithImage.content as CardLayoutBlockProps;
61-
CardsWithImage.storyName = data.cardsWithImage.storyName;
62-
63-
CardsWithImageFullScreen.args = data.cardsWithImageFullScreen.content as CardLayoutBlockProps;
64-
CardsWithImageFullScreen.storyName = data.cardsWithImageFullScreen.storyName;
65-
66-
CardsWithImageAllProps.args = data.cardsWithImageAllProps.content as CardLayoutBlockProps;
67-
CardsWithImageAllProps.storyName = data.cardsWithImageAllProps.storyName;
68-
69-
BackgroundCardsPaddings.args = data.cardsPaddings.content as CardLayoutBlockProps;
70-
71-
BackgroundCardsBackgroundColor.args = data.cardsBackgroundColor.content as CardLayoutBlockProps;
72-
BackgroundCardsBackgroundColor.storyName = data.cardsBackgroundColor.storyName;
50+
export const Default = DefaultTemplate.bind({});
51+
export const ColSize = ColSizeTemplate.bind({});
7352

74-
BackgroundCardsContentSizes.args = data.cardsContentSizes.content as CardLayoutBlockProps;
75-
BackgroundCardsContentSizes.storyName = data.cardsContentSizes.storyName;
53+
Default.args = {
54+
...data.default.content,
55+
children: createCardArray(6, data.default.card),
56+
} as CardLayoutBlockProps;
7657

77-
BackgroundCardsThemes.args = data.backgroundCardThemes.content as CardLayoutBlockProps;
78-
BackgroundCardsThemes.storyName = data.backgroundCardThemes.storyName;
58+
ColSize.args = {
59+
...data.default.content,
60+
children: createCardArray(8, data.colSizes.four.card),
61+
} as CardLayoutBlockProps;

0 commit comments

Comments
 (0)