Skip to content

Commit 1b3fcd5

Browse files
stomitastomita
committed
adjust select story as csf3
1 parent 2556454 commit 1b3fcd5

File tree

1 file changed

+156
-133
lines changed

1 file changed

+156
-133
lines changed

‎stories/Select.stories.tsx‎

Lines changed: 156 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,174 +1,197 @@
11
import React from 'react';
2-
import { action } from '@storybook/addon-actions';
3-
import { text, boolean } from '@storybook/addon-knobs';
42
import { Select, Option } from '../src/scripts';
5-
export default {
3+
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
4+
5+
/**
6+
*
7+
*/
8+
const meta: ComponentMeta<typeof Select> = {
69
title: 'Select',
10+
component: Select,
11+
subcomponents: { Option },
12+
argTypes: {
13+
onChange: { action: 'change' },
14+
onBlur: { action: 'blur' },
15+
},
716
};
8-
export const ControlledWithKnobs = {
9-
render: () => (
10-
<Select
11-
label={text('label', 'Select Label')}
12-
error={text('error', '')}
13-
required={boolean('required', false)}
14-
value={text('value', '')}
15-
disabled={boolean('disabled', false)}
16-
onChange={action('change')}
17-
onBlur={action('blur')}
18-
>
17+
export default meta;
18+
19+
/**
20+
*
21+
*/
22+
export const ControlledWithKnobs: ComponentStoryObj<typeof Select> = {
23+
render: (args) => (
24+
<Select {...args}>
1925
<Option label='Option One' value='1' />
2026
<Option label='Option Two' value='2' />
2127
<Option label='Option Three' value='3' />
2228
</Select>
2329
),
2430
name: 'Controlled with knobs',
31+
args: {
32+
label: 'Select Label',
33+
},
2534
parameters: {
26-
info: 'Select controlled with knobs',
35+
docs: {
36+
description: {
37+
story: 'Select controlled with knobs',
38+
},
39+
},
2740
},
2841
};
29-
export const Default = {
30-
render: () => (
31-
<Select
32-
label='Select Label'
33-
onChange={action('change')}
34-
onBlur={action('blur')}
35-
>
36-
<Option label='Option One' value='1' />
37-
<Option label='Option Two' value='2' />
38-
<Option label='Option Three' value='3' />
39-
</Select>
40-
),
42+
43+
/**
44+
*
45+
*/
46+
export const Default: ComponentStoryObj<typeof Select> = {
47+
...ControlledWithKnobs,
48+
name: 'Default',
49+
args: {},
4150
parameters: {
42-
info: 'Default Select control',
51+
docs: {
52+
description: {
53+
story: 'Default Select control',
54+
},
55+
},
4356
},
4457
};
45-
export const Required = {
46-
render: () => (
47-
<Select
48-
label='Select Label'
49-
required
50-
onChange={action('change')}
51-
onBlur={action('blur')}
52-
>
53-
<Option label='Option One' value='1' />
54-
<Option label='Option Two' value='2' />
55-
<Option label='Option Three' value='3' />
56-
</Select>
57-
),
58+
59+
/**
60+
*
61+
*/
62+
export const Required: ComponentStoryObj<typeof Select> = {
63+
...Default,
64+
name: 'Required',
65+
args: {
66+
label: 'Select Label',
67+
required: true,
68+
},
5869
parameters: {
59-
info: 'Select control with required attribute',
70+
docs: {
71+
description: {
72+
story: 'Select control with required attribute',
73+
},
74+
},
6075
},
6176
};
62-
export const Error = {
63-
render: () => (
64-
<Select
65-
label='Select Label'
66-
required
67-
error='This field is required'
68-
onChange={action('change')}
69-
onBlur={action('blur')}
70-
>
71-
<Option label='Option One' value='1' />
72-
<Option label='Option Two' value='2' />
73-
<Option label='Option Three' value='3' />
74-
</Select>
75-
),
77+
78+
/**
79+
*
80+
*/
81+
export const Error: ComponentStoryObj<typeof Select> = {
82+
...Default,
83+
name: 'Error',
84+
args: {
85+
label: 'Select Label',
86+
required: true,
87+
error: 'This field is required',
88+
},
7689
parameters: {
77-
info: 'Select control with error message',
90+
docs: {
91+
description: {
92+
story: 'Select control with error message',
93+
},
94+
},
7895
},
7996
};
80-
export const Disabled = {
81-
render: () => (
82-
<Select
83-
label='Select Label'
84-
disabled
85-
onChange={action('change')}
86-
onBlur={action('blur')}
87-
>
88-
<Option label='Option One' value='1' />
89-
<Option label='Option Two' value='2' />
90-
<Option label='Option Three' value='3' />
91-
</Select>
92-
),
97+
98+
/**
99+
*
100+
*/
101+
export const Disabled: ComponentStoryObj<typeof Select> = {
102+
...Default,
103+
name: 'Disabled',
104+
args: {
105+
label: 'Select Label',
106+
disabled: true,
107+
},
93108
parameters: {
94-
info: 'Select control with disabled status',
109+
docs: {
110+
description: {
111+
story: 'Select control with disabled status',
112+
},
113+
},
95114
},
96115
};
97-
export const MultipleDefault = {
98-
render: () => (
99-
<Select
100-
label='Select Label'
101-
onChange={action('change')}
102-
onBlur={action('blur')}
103-
value={['2', '3']}
104-
multiple
105-
>
106-
<Option label='Option One' value='1' />
107-
<Option label='Option Two' value='2' />
108-
<Option label='Option Three' value='3' />
109-
</Select>
110-
),
116+
117+
/**
118+
*
119+
*/
120+
export const MultipleDefault: ComponentStoryObj<typeof Select> = {
121+
...Default,
111122
name: 'Multiple - Default',
123+
args: {
124+
label: 'Select Label',
125+
value: ['2', '3'],
126+
multiple: true,
127+
},
112128
parameters: {
113-
info: 'Multiple Select control',
129+
docs: {
130+
description: {
131+
story: 'Multiple Select control',
132+
},
133+
},
114134
},
115135
};
116-
export const MultipleRequired = {
117-
render: () => (
118-
<Select
119-
label='Select Label'
120-
required
121-
onChange={action('change')}
122-
onBlur={action('blur')}
123-
multiple
124-
>
125-
<Option label='Option One' value='1' />
126-
<Option label='Option Two' value='2' />
127-
<Option label='Option Three' value='3' />
128-
</Select>
129-
),
136+
137+
/**
138+
*
139+
*/
140+
export const MultipleRequired: ComponentStoryObj<typeof Select> = {
141+
...Default,
130142
name: 'Multiple - Required',
143+
args: {
144+
label: 'Select Label',
145+
required: true,
146+
multiple: true,
147+
},
131148
parameters: {
132-
info: 'Multiple Select control with required attribute',
149+
docs: {
150+
description: {
151+
story: 'Multiple Select control with required attribute',
152+
},
153+
},
133154
},
134155
};
135-
export const MultipleError = {
136-
render: () => (
137-
<Select
138-
label='Select Label'
139-
required
140-
error='This field is required'
141-
onChange={action('change')}
142-
onBlur={action('blur')}
143-
multiple
144-
>
145-
<Option label='Option One' value='1' />
146-
<Option label='Option Two' value='2' />
147-
<Option label='Option Three' value='3' />
148-
</Select>
149-
),
156+
157+
/**
158+
*
159+
*/
160+
export const MultipleError: ComponentStoryObj<typeof Select> = {
161+
...Default,
150162
name: 'Multiple - Error',
163+
args: {
164+
label: 'Select Label',
165+
required: true,
166+
error: 'This field is required',
167+
multiple: true,
168+
},
151169
parameters: {
152-
info: 'Multiple Select control with error message',
170+
docs: {
171+
description: {
172+
story: 'Multiple Select control with error message',
173+
},
174+
},
153175
},
154176
};
155-
export const MultipleDisabled = {
156-
render: () => (
157-
<Select
158-
label='Select Label'
159-
disabled
160-
onChange={action('change')}
161-
onBlur={action('blur')}
162-
value={['2', '3']}
163-
multiple
164-
>
165-
<Option label='Option One' value='1' />
166-
<Option label='Option Two' value='2' />
167-
<Option label='Option Three' value='3' />
168-
</Select>
169-
),
177+
178+
/**
179+
*
180+
*/
181+
export const MultipleDisabled: ComponentStoryObj<typeof Select> = {
182+
...Default,
170183
name: 'Multiple - Disabled',
184+
args: {
185+
label: 'Select Label',
186+
disabled: true,
187+
value: ['2', '3'],
188+
multiple: true,
189+
},
171190
parameters: {
172-
info: 'Multiple Select control with disabled status',
191+
docs: {
192+
description: {
193+
story: 'Multiple Select control with disabled status',
194+
},
195+
},
173196
},
174197
};

0 commit comments

Comments
 (0)