Skip to content

Commit 06e9399

Browse files
authored
chore: right story for list (#1156)
1 parent e46a84d commit 06e9399

15 files changed

+492
-349
lines changed

.storybook/utils.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
import yfm from '@diplodoc/transform';
2+
import {ConstructorBlock} from '../src';
3+
import {contentTransformer} from '../src/text-transform';
24

35
export const yfmTransform = (content: string) => yfm(content).result.html;
6+
7+
export const blockListTransform = (blocksList: ConstructorBlock[]) =>
8+
contentTransformer({content: {blocks: blocksList}, options: {lang: 'en'}}).blocks;
9+
10+
export const blockTransform = (block: ConstructorBlock) =>
11+
contentTransformer({content: {blocks: [block]}, options: {lang: 'en'}}).blocks[0];
Lines changed: 90 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,22 @@
11
import {Meta, StoryFn} from '@storybook/react';
22

3-
import {yfmTransform} from '../../../../.storybook/utils';
4-
import CardLayout from '../../../blocks/CardLayout/CardLayout';
3+
import {blockListTransform, blockTransform} from '../../../../.storybook/utils';
4+
import CardLayout, {CardLayoutBlockProps} from '../../../blocks/CardLayout/CardLayout';
55
import {BlockBase} from '../../../components';
66
import {ConstructorRow} from '../../../containers/PageConstructor/components/ConstructorRow';
77
import {Grid} from '../../../grid';
8-
import {BackgroundCardProps, ButtonProps, ContentItemProps, LinkProps} from '../../../models';
8+
import {BackgroundCardProps} from '../../../models';
99
import BackgroundCard from '../BackgroundCard';
1010

1111
import data from './data.json';
1212

13-
const transformContentList = (list: ContentItemProps[]) =>
14-
list.map((item) => {
15-
return {
16-
...item,
17-
text: item?.text && yfmTransform(item.text),
18-
};
19-
}) as ContentItemProps[];
20-
21-
const getPaddingBottomTitle = (padding: string) =>
22-
data.paddings.title.replace('{{padding}}', padding);
23-
2413
export default {
2514
component: BackgroundCard,
2615
title: 'Components/Cards/BackgroundCard',
2716
argTypes: {
2817
backgroundColor: {
2918
control: {type: 'color'},
3019
},
31-
paddingBottom: {
32-
control: {type: 'radio', labels: {undefined: 'default'}},
33-
options: [undefined, 's', 'm', 'l', 'xl'],
34-
},
3520
theme: {
3621
control: {type: 'radio', labels: {undefined: 'default'}},
3722
options: [undefined, 'dark', 'light'],
@@ -40,189 +25,125 @@ export default {
4025
} as Meta;
4126

4227
const DefaultTemplate: StoryFn<BackgroundCardProps> = (args) => (
43-
<div style={{display: 'flex'}}>
44-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
45-
<BackgroundCard {...args} additionalInfo={yfmTransform(data.common.additionalInfo)} />
46-
</div>
47-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
48-
<BackgroundCard {...args} links={data.common.links as LinkProps[]} />
49-
</div>
50-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
51-
<BackgroundCard {...args} buttons={data.common.buttons as ButtonProps[]} />
52-
</div>
53-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
54-
<BackgroundCard {...args} list={transformContentList(data.common.list)} />
55-
</div>
28+
<div style={{maxWidth: '400px'}}>
29+
<BackgroundCard {...args} />
5630
</div>
5731
);
5832

59-
const PaddingsTemplate: StoryFn<BackgroundCardProps> = (args) => (
33+
const VariousContentTemplate: StoryFn<Record<number, {}>> = (args) => (
6034
<div style={{display: 'flex'}}>
61-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
62-
<BackgroundCard {...args} title={getPaddingBottomTitle('S')} paddingBottom="s" />
63-
</div>
64-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
65-
<BackgroundCard {...args} title={getPaddingBottomTitle('M')} paddingBottom="m" />
66-
</div>
67-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
68-
<BackgroundCard {...args} title={getPaddingBottomTitle('L')} paddingBottom="l" />
69-
</div>
70-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
71-
<BackgroundCard {...args} title={getPaddingBottomTitle('XL')} paddingBottom="xl" />
72-
</div>
73-
</div>
74-
);
75-
76-
const CardThemesTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
77-
<div style={{display: 'flex'}}>
78-
{args.items.map((item, i) => (
79-
<div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
80-
<BackgroundCard
81-
{...item}
82-
list={transformContentList(
83-
item.theme === 'dark'
84-
? data.common.themed.darkList
85-
: data.common.themed.lightList,
86-
)}
87-
/>
35+
{Object.values(args).map((item, index) => (
36+
<div key={index} style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
37+
<BackgroundCard {...item} />
8838
</div>
8939
))}
9040
</div>
9141
);
9242

93-
const BackgroundColorTemplate: StoryFn<BackgroundCardProps> = (args) => (
43+
const CardThemesTemplate: StoryFn<Record<number, BackgroundCardProps>> = (args) => (
9444
<div style={{display: 'flex'}}>
95-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
96-
<BackgroundCard {...args} additionalInfo={yfmTransform(data.common.additionalInfo)} />
97-
</div>
98-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
99-
<BackgroundCard {...args} links={data.common.links as LinkProps[]} />
100-
</div>
101-
<div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
102-
<BackgroundCard
103-
{...args}
104-
buttons={data.cardThemes.content[1].buttons as ButtonProps[]}
105-
/>
106-
</div>
107-
</div>
108-
);
109-
110-
const WithUrlTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
111-
<div style={{display: 'flex'}}>
112-
{args.items.map((item, i) => (
113-
<div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
45+
{Object.values(args).map((item, index) => (
46+
<div style={{maxWidth: '400px', padding: '0 8px'}} key={index}>
11447
<BackgroundCard {...item} />
11548
</div>
11649
))}
11750
</div>
11851
);
11952

120-
const ControlPositionTemplate: StoryFn<BackgroundCardProps> = (args) => (
53+
const ControlPositionTemplate: StoryFn<
54+
Record<number, CardLayoutBlockProps & {children: BackgroundCardProps[]}>
55+
> = (args) => (
12156
<Grid>
12257
<ConstructorRow>
123-
<BlockBase>
124-
<CardLayout title={data.cardLayout.contentTitle} animated={false}>
125-
{data.cardLayout.items.map((item, index) => (
126-
<BackgroundCard
127-
key={index}
128-
{...(item as Partial<BackgroundCardProps>)}
129-
{...args}
130-
controlPosition="content"
131-
/>
132-
))}
133-
</CardLayout>
134-
</BlockBase>
135-
<BlockBase>
136-
<CardLayout
137-
title={data.cardLayout.footerTitle}
138-
description={data.cardLayout.footerDescription}
139-
animated={false}
140-
>
141-
{data.cardLayout.items.map((item, index) => (
142-
<BackgroundCard
143-
key={index}
144-
{...(item as Partial<BackgroundCardProps>)}
145-
{...args}
146-
controlPosition="footer"
147-
/>
148-
))}
149-
</CardLayout>
150-
</BlockBase>
58+
{Object.values(args).map(({children, ...rest}, contentLayoutIndex) => (
59+
<BlockBase key={contentLayoutIndex}>
60+
<CardLayout {...rest}>
61+
{children.map((item, index) => (
62+
<BackgroundCard key={index} {...item} />
63+
))}
64+
</CardLayout>
65+
</BlockBase>
66+
))}
15167
</ConstructorRow>
15268
</Grid>
15369
);
15470

15571
export const Default = DefaultTemplate.bind({});
156-
export const WithBackgroundImage = DefaultTemplate.bind({});
157-
export const Paddings = PaddingsTemplate.bind({});
72+
export const VariousContent = VariousContentTemplate.bind([]);
73+
export const WithBackgroundImage = VariousContentTemplate.bind([]);
74+
export const Paddings = VariousContentTemplate.bind([]);
15875
export const CardThemes = CardThemesTemplate.bind([]);
159-
export const BorderLine = DefaultTemplate.bind({});
160-
export const BackgroundColor = BackgroundColorTemplate.bind({});
161-
export const WithUrl = WithUrlTemplate.bind({});
162-
export const ControlPosition = ControlPositionTemplate.bind({});
163-
164-
const DefaultArgs = {
165-
title: data.common.title,
166-
text: yfmTransform(data.common.text),
76+
export const BorderLine = VariousContentTemplate.bind([]);
77+
export const BackgroundColor = VariousContentTemplate.bind([]);
78+
export const WithUrl = CardThemesTemplate.bind([]);
79+
export const ControlPosition = ControlPositionTemplate.bind([]);
80+
81+
Default.args = blockTransform(data.default) as BackgroundCardProps;
82+
83+
VariousContent.args = blockListTransform(data.props) as BackgroundCardProps[];
84+
VariousContent.parameters = {
85+
controls: {
86+
include: Object.keys(data.props),
87+
},
16788
};
16889

169-
Default.args = {
170-
...DefaultArgs,
171-
} as BackgroundCardProps;
90+
WithBackgroundImage.args = blockListTransform(
91+
data.props.map((item) => ({...item, ...data.withBackgroundImage})),
92+
) as BackgroundCardProps[];
93+
WithBackgroundImage.parameters = {
94+
controls: {
95+
include: Object.keys(data.props),
96+
},
97+
};
17298

173-
WithBackgroundImage.args = {
174-
...DefaultArgs,
175-
...data.withBackgroundImage.content,
176-
} as BackgroundCardProps;
99+
Paddings.args = blockListTransform(
100+
data.withPaddings.map((item) => ({...item, ...data.withBackgroundImage})),
101+
) as BackgroundCardProps[];
102+
Paddings.parameters = {
103+
controls: {
104+
include: Object.keys(data.withPaddings),
105+
},
106+
};
177107

178-
Paddings.args = {
179-
...DefaultArgs,
180-
...data.withBackgroundImage.content,
181-
} as BackgroundCardProps;
108+
CardThemes.args = blockListTransform(data.cardThemes) as BackgroundCardProps[];
109+
CardThemes.parameters = {
110+
controls: {
111+
include: Object.keys(data.cardThemes),
112+
},
113+
};
182114

183-
CardThemes.args = {
184-
items: [...data.cardThemes.content].map((item) => ({
185-
...DefaultArgs,
115+
BorderLine.args = blockListTransform(
116+
data.props.map((item) => ({
186117
...item,
187-
})) as BackgroundCardProps[],
118+
...data.withBackgroundImage,
119+
...data.borderLine,
120+
})),
121+
) as BackgroundCardProps[];
122+
BorderLine.parameters = {
123+
controls: {
124+
include: Object.keys(data.props),
125+
},
188126
};
189127

190-
BorderLine.args = {
191-
...DefaultArgs,
192-
...data.borderLine.content,
193-
...data.withBackgroundImage.content,
194-
} as BackgroundCardProps;
195-
196-
BackgroundColor.args = {
197-
...DefaultArgs,
198-
...data.backgroundColor.content,
199-
} as BackgroundCardProps;
200-
201-
WithUrl.args = {
202-
items: [
203-
data.cardThemes.content[1],
204-
data.withBackgroundImage.content,
205-
data.borderLine.content,
206-
data.backgroundColor.content,
207-
data.borderNone.content,
208-
].map((item) => ({
209-
...DefaultArgs,
210-
...item,
211-
url: data.url,
212-
urlTitle: data.urlTitle,
213-
})) as BackgroundCardProps[],
128+
BackgroundColor.args = blockListTransform(data.backgroundColor) as BackgroundCardProps[];
129+
BackgroundColor.parameters = {
130+
controls: {
131+
include: Object.keys(data.backgroundColor),
132+
},
214133
};
215134

216-
ControlPosition.argTypes = {
217-
controlPosition: {table: {disable: true}},
218-
url: {table: {disable: true}},
219-
urlTitle: {table: {disable: true}},
220-
analyticsEvents: {table: {disable: true}},
221-
title: {table: {disable: true}},
222-
text: {table: {disable: true}},
223-
titleId: {table: {disable: true}},
224-
textId: {table: {disable: true}},
225-
list: {table: {disable: true}},
226-
links: {table: {disable: true}},
227-
buttons: {table: {disable: true}},
135+
WithUrl.args = blockListTransform(data.withUrl) as BackgroundCardProps[];
136+
WithUrl.parameters = {
137+
controls: {
138+
include: Object.keys(data.withUrl),
139+
},
140+
};
141+
142+
ControlPosition.args = blockListTransform(data.controlPosition) as (CardLayoutBlockProps & {
143+
children: BackgroundCardProps[];
144+
})[];
145+
ControlPosition.parameters = {
146+
controls: {
147+
include: Object.keys(data.controlPosition),
148+
},
228149
};

0 commit comments

Comments
 (0)