diff options
Diffstat (limited to 'uidev')
-rw-r--r-- | uidev/src/stories/input.stories.tsx | 66 | ||||
-rw-r--r-- | uidev/src/stories/select.stories.tsx | 31 | ||||
-rw-r--r-- | uidev/src/stories/textarea.stories.tsx | 25 | ||||
-rw-r--r-- | uidev/src/stories/toggle.stories.tsx | 46 |
4 files changed, 114 insertions, 54 deletions
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx index 4136cfd4d..889539266 100644 --- a/uidev/src/stories/input.stories.tsx +++ b/uidev/src/stories/input.stories.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { v4 as uuid } from 'uuid'; | 2 | import uuid from 'uuid/v4'; |
3 | 3 | ||
4 | import { Input } from '@meetfranz/forms'; | 4 | import { Input } from '@meetfranz/forms'; |
5 | import { storiesOf } from '../stores/stories'; | 5 | import { storiesOf } from '../stores/stories'; |
@@ -10,8 +10,7 @@ const defaultProps = () => { | |||
10 | label: 'Label', | 10 | label: 'Label', |
11 | id: `test-${id}`, | 11 | id: `test-${id}`, |
12 | name: `test-${id}`, | 12 | name: `test-${id}`, |
13 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | 13 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), |
14 | console.log('changed event', e), | ||
15 | }; | 14 | }; |
16 | }; | 15 | }; |
17 | 16 | ||
@@ -22,23 +21,44 @@ const defaultPasswordProps = () => { | |||
22 | id: `test-${id}`, | 21 | id: `test-${id}`, |
23 | name: `test-${id}`, | 22 | name: `test-${id}`, |
24 | type: 'password', | 23 | type: 'password', |
25 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | 24 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), |
26 | console.log('changed event', e), | ||
27 | }; | 25 | }; |
28 | }; | 26 | }; |
29 | 27 | ||
30 | storiesOf('Input') | 28 | storiesOf('Input') |
31 | .add('Basic', () => ( | 29 | .add('Basic', () => ( |
32 | <Input {...defaultProps()} placeholder="Placeholder text" /> | 30 | <Input |
31 | {...defaultProps()} | ||
32 | placeholder="Placeholder text" | ||
33 | /> | ||
34 | )) | ||
35 | .add('Without Label', () => ( | ||
36 | <Input | ||
37 | {...defaultProps()} | ||
38 | showLabel={false} | ||
39 | /> | ||
40 | )) | ||
41 | .add('Disabled', () => ( | ||
42 | <Input {...defaultProps()} disabled /> | ||
43 | )) | ||
44 | .add('With prefix', () => ( | ||
45 | <Input | ||
46 | {...defaultProps()} | ||
47 | prefix="https://" | ||
48 | /> | ||
33 | )) | 49 | )) |
34 | .add('Without Label', () => <Input {...defaultProps()} showLabel={false} />) | ||
35 | .add('Disabled', () => <Input {...defaultProps()} disabled />) | ||
36 | .add('With prefix', () => <Input {...defaultProps()} prefix="https://" />) | ||
37 | .add('With suffix', () => ( | 50 | .add('With suffix', () => ( |
38 | <Input {...defaultProps()} suffix=".meetfranz.com" /> | 51 | <Input |
52 | {...defaultProps()} | ||
53 | suffix=".meetfranz.com" | ||
54 | /> | ||
39 | )) | 55 | )) |
40 | .add('With pre-suffix', () => ( | 56 | .add('With pre-suffix', () => ( |
41 | <Input {...defaultProps()} prefix="https://" suffix=".meetfranz.com" /> | 57 | <Input |
58 | {...defaultProps()} | ||
59 | prefix="https://" | ||
60 | suffix=".meetfranz.com" | ||
61 | /> | ||
42 | )) | 62 | )) |
43 | .add('With error', () => ( | 63 | .add('With error', () => ( |
44 | <Input | 64 | <Input |
@@ -48,16 +68,32 @@ storiesOf('Input') | |||
48 | /> | 68 | /> |
49 | )) | 69 | )) |
50 | .add('Type number with min & max', () => ( | 70 | .add('Type number with min & max', () => ( |
51 | <Input {...defaultProps()} type="number" min={1} max={10} /> | 71 | <Input |
72 | {...defaultProps()} | ||
73 | type="number" | ||
74 | min={1} | ||
75 | max={10} | ||
76 | /> | ||
52 | )); | 77 | )); |
53 | 78 | ||
54 | storiesOf('Password') | 79 | storiesOf('Password') |
55 | .add('Basic', () => <Input {...defaultPasswordProps()} />) | 80 | .add('Basic', () => ( |
81 | <Input | ||
82 | {...defaultPasswordProps()} | ||
83 | /> | ||
84 | )) | ||
56 | .add('Show password toggle', () => ( | 85 | .add('Show password toggle', () => ( |
57 | <Input {...defaultPasswordProps()} showPasswordToggle /> | 86 | <Input |
87 | {...defaultPasswordProps()} | ||
88 | showPasswordToggle | ||
89 | /> | ||
58 | )) | 90 | )) |
59 | .add('Score password', () => ( | 91 | .add('Score password', () => ( |
60 | <Input {...defaultPasswordProps()} showPasswordToggle scorePassword /> | 92 | <Input |
93 | {...defaultPasswordProps()} | ||
94 | showPasswordToggle | ||
95 | scorePassword | ||
96 | /> | ||
61 | )) | 97 | )) |
62 | .add('Score password with error', () => ( | 98 | .add('Score password with error', () => ( |
63 | <Input | 99 | <Input |
diff --git a/uidev/src/stories/select.stories.tsx b/uidev/src/stories/select.stories.tsx index 93e072cd9..51ec6ed88 100644 --- a/uidev/src/stories/select.stories.tsx +++ b/uidev/src/stories/select.stories.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { v4 as uuid } from 'uuid'; | 2 | import uuid from 'uuid/v4'; |
3 | 3 | ||
4 | import { Select } from '@meetfranz/forms'; | 4 | import { Select } from '@meetfranz/forms'; |
5 | import { storiesOf } from '../stores/stories'; | 5 | import { storiesOf } from '../stores/stories'; |
@@ -282,18 +282,35 @@ const defaultProps = () => { | |||
282 | }, | 282 | }, |
283 | actionText: 'Select country', | 283 | actionText: 'Select country', |
284 | // defaultValue: 'AT', | 284 | // defaultValue: 'AT', |
285 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | 285 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), |
286 | console.log('changed event', e), | ||
287 | }; | 286 | }; |
288 | }; | 287 | }; |
289 | 288 | ||
290 | storiesOf('Select') | 289 | storiesOf('Select') |
291 | .add('Basic', () => <Select {...defaultProps()} />) | 290 | .add('Basic', () => ( |
291 | <Select | ||
292 | {...defaultProps()} | ||
293 | /> | ||
294 | )) | ||
292 | .add('With preselection', () => ( | 295 | .add('With preselection', () => ( |
293 | <Select {...defaultProps()} defaultValue="AT" /> | 296 | <Select |
297 | {...defaultProps()} | ||
298 | defaultValue="AT" | ||
299 | /> | ||
300 | )) | ||
301 | .add('With search', () => ( | ||
302 | <Select | ||
303 | {...defaultProps()} | ||
304 | showSearch | ||
305 | /> | ||
306 | )) | ||
307 | .add('Disabled', () => ( | ||
308 | <Select | ||
309 | {...defaultProps()} | ||
310 | showSearch | ||
311 | disabled | ||
312 | /> | ||
294 | )) | 313 | )) |
295 | .add('With search', () => <Select {...defaultProps()} showSearch />) | ||
296 | .add('Disabled', () => <Select {...defaultProps()} showSearch disabled />) | ||
297 | .add('With error', () => ( | 314 | .add('With error', () => ( |
298 | <Select | 315 | <Select |
299 | {...defaultProps()} | 316 | {...defaultProps()} |
diff --git a/uidev/src/stories/textarea.stories.tsx b/uidev/src/stories/textarea.stories.tsx index 09b9fef70..1ab21820b 100644 --- a/uidev/src/stories/textarea.stories.tsx +++ b/uidev/src/stories/textarea.stories.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { v4 as uuid } from 'uuid'; | 2 | import uuid from 'uuid/v4'; |
3 | 3 | ||
4 | import { Textarea } from '@meetfranz/forms'; | 4 | import { Textarea } from '@meetfranz/forms'; |
5 | import { storiesOf } from '../stores/stories'; | 5 | import { storiesOf } from '../stores/stories'; |
@@ -11,8 +11,7 @@ const defaultProps = () => { | |||
11 | id: `test-${id}`, | 11 | id: `test-${id}`, |
12 | name: `test-${id}`, | 12 | name: `test-${id}`, |
13 | rows: 5, | 13 | rows: 5, |
14 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | 14 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), |
15 | console.log('changed event', e), | ||
16 | }; | 15 | }; |
17 | }; | 16 | }; |
18 | 17 | ||
@@ -23,8 +22,22 @@ storiesOf('Textarea') | |||
23 | // placeholder="Placeholder text" | 22 | // placeholder="Placeholder text" |
24 | /> | 23 | /> |
25 | )) | 24 | )) |
26 | .add('10 rows', () => <Textarea {...defaultProps()} rows={10} />) | 25 | .add('10 rows', () => ( |
26 | <Textarea | ||
27 | {...defaultProps()} | ||
28 | rows={10} | ||
29 | /> | ||
30 | )) | ||
27 | .add('With error', () => ( | 31 | .add('With error', () => ( |
28 | <Textarea {...defaultProps()} error="This is a generic error message." /> | 32 | <Textarea |
33 | {...defaultProps()} | ||
34 | error="This is a generic error message." | ||
35 | /> | ||
29 | )) | 36 | )) |
30 | .add('Disabled', () => <Textarea {...defaultProps()} rows={2} disabled />); | 37 | .add('Disabled', () => ( |
38 | <Textarea | ||
39 | {...defaultProps()} | ||
40 | rows={2} | ||
41 | disabled | ||
42 | /> | ||
43 | )); | ||
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx index f54e67596..af6b282bc 100644 --- a/uidev/src/stories/toggle.stories.tsx +++ b/uidev/src/stories/toggle.stories.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import { observable } from 'mobx'; | 1 | import { observable } from 'mobx'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import React from 'react'; | 3 | import React from 'react'; |
4 | import { v4 as uuid } from 'uuid'; | 4 | import uuid from 'uuid/v4'; |
5 | 5 | ||
6 | import { Toggle } from '@meetfranz/forms'; | 6 | import { Toggle } from '@meetfranz/forms'; |
7 | import { storiesOf } from '../stores/stories'; | 7 | import { storiesOf } from '../stores/stories'; |
@@ -16,17 +16,14 @@ interface IStoreArgs { | |||
16 | error?: string; | 16 | error?: string; |
17 | } | 17 | } |
18 | 18 | ||
19 | const createStore = (args?: IStoreArgs) => | 19 | const createStore = (args?: IStoreArgs) => observable({ id: `element-${uuid()}`, |
20 | observable({ | ||
21 | id: `element-${uuid()}`, | ||
22 | name: 'toggle', | 20 | name: 'toggle', |
23 | label: 'Label', | 21 | label: 'Label', |
24 | value: true, | 22 | value: true, |
25 | checked: false, | 23 | checked: false, |
26 | disabled: false, | 24 | disabled: false, |
27 | error: '', | 25 | error: '', |
28 | ...args, | 26 | ...args }); |
29 | }); | ||
30 | 27 | ||
31 | const WithStoreToggle = observer(({ store }: { store: any }) => ( | 28 | const WithStoreToggle = observer(({ store }: { store: any }) => ( |
32 | <> | 29 | <> |
@@ -38,40 +35,37 @@ const WithStoreToggle = observer(({ store }: { store: any }) => ( | |||
38 | name={store.name} | 35 | name={store.name} |
39 | disabled={store.disabled} | 36 | disabled={store.disabled} |
40 | error={store.error} | 37 | error={store.error} |
41 | onChange={() => (store.checked = !store.checked)} | 38 | onChange={() => store.checked = !store.checked} |
42 | /> | 39 | /> |
43 | </> | 40 | </> |
44 | )); | 41 | )); |
45 | 42 | ||
46 | storiesOf('Toggle') | 43 | storiesOf('Toggle') |
47 | .add('Basic', () => <WithStoreToggle store={createStore()} />) | 44 | .add('Basic', () => ( |
45 | <WithStoreToggle store={createStore()} /> | ||
46 | )) | ||
48 | .add('Checked', () => ( | 47 | .add('Checked', () => ( |
49 | <WithStoreToggle | 48 | <WithStoreToggle store={createStore({ |
50 | store={createStore({ | 49 | checked: true, |
51 | checked: true, | 50 | })} |
52 | })} | ||
53 | /> | 51 | /> |
54 | )) | 52 | )) |
55 | .add('Disabled', () => ( | 53 | .add('Disabled', () => ( |
56 | <WithStoreToggle | 54 | <WithStoreToggle store={createStore({ |
57 | store={createStore({ | 55 | checked: true, |
58 | checked: true, | 56 | disabled: true, |
59 | disabled: true, | 57 | })} |
60 | })} | ||
61 | /> | 58 | /> |
62 | )) | 59 | )) |
63 | .add('Long label', () => ( | 60 | .add('Long label', () => ( |
64 | <WithStoreToggle | 61 | <WithStoreToggle store={createStore({ |
65 | store={createStore({ | 62 | label: 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.', |
66 | label: | 63 | })} |
67 | 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.', | ||
68 | })} | ||
69 | /> | 64 | /> |
70 | )) | 65 | )) |
71 | .add('With error', () => ( | 66 | .add('With error', () => ( |
72 | <WithStoreToggle | 67 | <WithStoreToggle store={createStore({ |
73 | store={createStore({ | 68 | error: 'Something went wrong', |
74 | error: 'Something went wrong', | 69 | })} |
75 | })} | ||
76 | /> | 70 | /> |
77 | )); | 71 | )); |