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