aboutsummaryrefslogtreecommitdiffstats
path: root/uidev
diff options
context:
space:
mode:
authorLibravatar Stefan Malzner <stefan@adlk.io>2019-01-28 11:35:25 +0100
committerLibravatar Stefan Malzner <stefan@adlk.io>2019-01-28 11:35:25 +0100
commit9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46 (patch)
tree038dc5e0a209d06e1c15c1e3c4740d5bdda96f8a /uidev
parentAdd href and type to button component (diff)
downloadferdium-app-9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46.tar.gz
ferdium-app-9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46.tar.zst
ferdium-app-9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46.zip
Update packages
Diffstat (limited to 'uidev')
-rw-r--r--uidev/src/app.tsx8
-rw-r--r--uidev/src/stories/badge.stories.tsx21
-rw-r--r--uidev/src/stories/headline.stories.tsx54
-rw-r--r--uidev/src/stories/icon.stories.tsx53
-rw-r--r--uidev/src/stories/infobox.stories.tsx126
-rw-r--r--uidev/src/stories/loader.stories.tsx14
-rw-r--r--uidev/src/stories/select.stories.tsx320
7 files changed, 596 insertions, 0 deletions
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
index 0fd524e34..870911c2f 100644
--- a/uidev/src/app.tsx
+++ b/uidev/src/app.tsx
@@ -7,8 +7,14 @@ import injectSheet from 'react-jss';
7 7
8import { WithTheme } from './withTheme'; 8import { WithTheme } from './withTheme';
9 9
10import './stories/badge.stories';
10import './stories/button.stories'; 11import './stories/button.stories';
12import './stories/headline.stories';
13import './stories/icon.stories';
14import './stories/infobox.stories';
11import './stories/input.stories'; 15import './stories/input.stories';
16import './stories/loader.stories';
17import './stories/select.stories';
12import './stories/toggle.stories'; 18import './stories/toggle.stories';
13 19
14import { store } from './stores'; 20import { store } from './stores';
@@ -31,6 +37,8 @@ const styles = {
31 position: 'fixed' as CSS.PositionProperty, 37 position: 'fixed' as CSS.PositionProperty,
32 listStyleType: 'none', 38 listStyleType: 'none',
33 fontSize: 14, 39 fontSize: 14,
40 overflow: 'scroll',
41 height: '100%',
34 }, 42 },
35 storyList: { 43 storyList: {
36 paddingLeft: 18, 44 paddingLeft: 18,
diff --git a/uidev/src/stories/badge.stories.tsx b/uidev/src/stories/badge.stories.tsx
new file mode 100644
index 000000000..6de2034bf
--- /dev/null
+++ b/uidev/src/stories/badge.stories.tsx
@@ -0,0 +1,21 @@
1import React from 'react';
2
3import { Badge } from '@meetfranz/ui';
4import { storiesOf } from '../stores/stories';
5
6storiesOf('Badge')
7 .add('Basic', () => (
8 <>
9 <Badge>New</Badge>
10 </>
11 ))
12 .add('Styles', () => (
13 <>
14 <Badge type="primary">Primary</Badge>
15 <Badge type="secondary">secondary</Badge>
16 <Badge type="success">success</Badge>
17 <Badge type="warning">warning</Badge>
18 <Badge type="danger">danger</Badge>
19 <Badge type="inverted">inverted</Badge>
20 </>
21 ));
diff --git a/uidev/src/stories/headline.stories.tsx b/uidev/src/stories/headline.stories.tsx
new file mode 100644
index 000000000..f42771cae
--- /dev/null
+++ b/uidev/src/stories/headline.stories.tsx
@@ -0,0 +1,54 @@
1import { observable } from 'mobx';
2import { observer } from 'mobx-react';
3import React from 'react';
4import uuid from 'uuid/v4';
5
6import { H1, H2, H3, H4 } from '@meetfranz/ui';
7import { storiesOf } from '../stores/stories';
8
9// interface IStoreArgs {
10// value?: boolean;
11// checked?: boolean;
12// label?: string;
13// id?: string;
14// name?: string;
15// disabled?: boolean;
16// error?: string;
17// }
18
19// const createStore = (args?: IStoreArgs) => {
20// return observable(Object.assign({
21// id: `element-${uuid()}`,
22// name: 'toggle',
23// label: 'Label',
24// value: true,
25// checked: false,
26// disabled: false,
27// error: '',
28// }, args));
29// };
30
31// const WithStoreToggle = observer(({ store }: { store: any }) => (
32// <>
33// <Toggle
34// value={store.value}
35// checked={store.checked}
36// label={store.label}
37// id={store.id}
38// name={store.name}
39// disabled={store.disabled}
40// error={store.error}
41// onChange={() => store.checked = !store.checked}
42// />
43// </>
44// ));
45
46storiesOf('Typo')
47 .add('Headlines', () => (
48 <>
49 <H1>Welcome to the world of tomorrow</H1>
50 <H2>Welcome to the world of tomorrow</H2>
51 <H3>Welcome to the world of tomorrow</H3>
52 <H4>Welcome to the world of tomorrow</H4>
53 </>
54 ));
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx
new file mode 100644
index 000000000..c8e7f8ced
--- /dev/null
+++ b/uidev/src/stories/icon.stories.tsx
@@ -0,0 +1,53 @@
1import { observable } from 'mobx';
2import { observer } from 'mobx-react';
3import React from 'react';
4import uuid from 'uuid/v4';
5
6import { Icon } from '@meetfranz/ui';
7import { storiesOf } from '../stores/stories';
8
9// interface IStoreArgs {
10// value?: boolean;
11// checked?: boolean;
12// label?: string;
13// id?: string;
14// name?: string;
15// disabled?: boolean;
16// error?: string;
17// }
18
19// const createStore = (args?: IStoreArgs) => {
20// return observable(Object.assign({
21// id: `element-${uuid()}`,
22// name: 'toggle',
23// label: 'Label',
24// value: true,
25// checked: false,
26// disabled: false,
27// error: '',
28// }, args));
29// };
30
31// const WithStoreToggle = observer(({ store }: { store: any }) => (
32// <>
33// <Toggle
34// value={store.value}
35// checked={store.checked}
36// label={store.label}
37// id={store.id}
38// name={store.name}
39// disabled={store.disabled}
40// error={store.error}
41// onChange={() => store.checked = !store.checked}
42// />
43// </>
44// ));
45
46storiesOf('Icon')
47 .add('Basic', () => (
48 <>
49 <Icon icon="mdiAccountCircle" />
50 <Icon icon="mdiAccountCircle" size={2} />
51 <Icon icon="mdiAccountCircle" size={3} />
52 </>
53 ));
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
new file mode 100644
index 000000000..2a5e8b0d5
--- /dev/null
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -0,0 +1,126 @@
1import { observable } from 'mobx';
2import { observer } from 'mobx-react';
3import React from 'react';
4
5import { Infobox } from '@meetfranz/ui';
6import { storiesOf } from '../stores/stories';
7
8interface IStoreArgs {
9 icon?: string;
10 ctaLabel?: string;
11 type?: string;
12 dismissable?: boolean;
13}
14
15const createStore = (args?: IStoreArgs) => {
16 return observable(Object.assign({
17 type: 'primary',
18 ctaOnClick: () => {
19 alert('on click handler');
20 },
21 }, args));
22};
23
24const WithStoreInfobox = observer(({ store, children }: { store: any, children: string | React.ReactNode }) => (
25 <>
26 <Infobox
27 icon={store.icon}
28 ctaLabel={store.ctaLabel}
29 type={store.type}
30 ctaOnClick={store.ctaOnClick}
31 dismissable={store.dismissable}
32 >
33 {children}
34 </Infobox>
35 </>
36));
37
38storiesOf('Infobox')
39 .add('Basic', () => (
40 <WithStoreInfobox store={createStore()}>Welcome to the world of tomorrow</WithStoreInfobox>
41 ))
42 .add('Icon + Dismissable', () => (
43 <WithStoreInfobox
44 store={createStore({
45 icon: 'mdiEarth',
46 dismissable: true,
47 })}
48 >
49 Welcome to the world of tomorrow
50 </WithStoreInfobox>
51 ))
52 .add('With CTA', () => (
53 <WithStoreInfobox
54 store={createStore({
55 icon: 'mdiEarth',
56 ctaLabel: 'Ok, hi!',
57 })}
58 >
59 Welcome to the world of tomorrow
60 </WithStoreInfobox>
61 ))
62 .add('With long text', () => (
63 <WithStoreInfobox
64 store={createStore({
65 icon: 'mdiEarth',
66 ctaLabel: 'Ok, hi!',
67 })}
68 >
69 Franz is your messaging app / former Emperor of Austria and combines chat & messaging services into one application. Franz currently supports Slack, WhatsApp, WeChat, HipChat, Facebook Messenger, Telegram, Google Hangouts,GroupMe, Skype and many more.
70 </WithStoreInfobox>
71 ))
72 .add('Secondary', () => (
73 <WithStoreInfobox
74 store={createStore({
75 icon: 'mdiEarth',
76 ctaLabel: 'Ok, hi!',
77 type: 'secondary',
78 })}
79 >
80 Welcome to the world of tomorrow
81 </WithStoreInfobox>
82 ))
83 .add('Success', () => (
84 <WithStoreInfobox
85 store={createStore({
86 icon: 'mdiEarth',
87 ctaLabel: 'Ok, hi!',
88 type: 'success',
89 })}
90 >
91 Welcome to the world of tomorrow
92 </WithStoreInfobox>
93 ))
94 .add('Warning', () => (
95 <WithStoreInfobox
96 store={createStore({
97 icon: 'mdiEarth',
98 ctaLabel: 'Ok, hi!',
99 type: 'warning',
100 })}
101 >
102 Welcome to the world of tomorrow
103 </WithStoreInfobox>
104 ))
105 .add('Danger', () => (
106 <WithStoreInfobox
107 store={createStore({
108 icon: 'mdiEarth',
109 ctaLabel: 'Ok, hi!',
110 type: 'danger',
111 })}
112 >
113 Welcome to the world of tomorrow
114 </WithStoreInfobox>
115 ))
116 .add('Inverted', () => (
117 <WithStoreInfobox
118 store={createStore({
119 icon: 'mdiEarth',
120 ctaLabel: 'Ok, hi!',
121 type: 'inverted',
122 })}
123 >
124 Welcome to the world of tomorrow
125 </WithStoreInfobox>
126 ));
diff --git a/uidev/src/stories/loader.stories.tsx b/uidev/src/stories/loader.stories.tsx
new file mode 100644
index 000000000..84e813c04
--- /dev/null
+++ b/uidev/src/stories/loader.stories.tsx
@@ -0,0 +1,14 @@
1import { observable } from 'mobx';
2import { observer } from 'mobx-react';
3import React from 'react';
4import uuid from 'uuid/v4';
5
6import { Loader } from '@meetfranz/ui';
7import { storiesOf } from '../stores/stories';
8
9storiesOf('Loader')
10 .add('Basic', () => (
11 <>
12 <Loader />
13 </>
14 ));
diff --git a/uidev/src/stories/select.stories.tsx b/uidev/src/stories/select.stories.tsx
new file mode 100644
index 000000000..81f7f08a6
--- /dev/null
+++ b/uidev/src/stories/select.stories.tsx
@@ -0,0 +1,320 @@
1import React from 'react';
2import uuid from 'uuid/v4';
3
4import { Select } from '@meetfranz/forms';
5import { storiesOf } from '../stores/stories';
6
7const defaultProps = () => {
8 const id = uuid();
9 return {
10 label: 'Label',
11 id: `test-${id}`,
12 name: `test-${id}`,
13 options: {
14 AF: 'Afghanistan',
15 AL: 'Albania',
16 DZ: 'Algeria',
17 AS: 'American Samoa',
18 AD: 'Andorra',
19 AO: 'Angola',
20 AI: 'Anguilla',
21 AQ: 'Antarctica',
22 AG: 'Antigua and Barbuda',
23 AR: 'Argentina',
24 AM: 'Armenia',
25 AW: 'Aruba',
26 AC: 'Ascension Island',
27 AU: 'Australia',
28 AT: 'Austria',
29 AZ: 'Azerbaijan',
30 BS: 'Bahamas',
31 BH: 'Bahrain',
32 BD: 'Bangladesh',
33 BB: 'Barbados',
34 BY: 'Belarus',
35 BE: 'Belgium',
36 BZ: 'Belize',
37 BJ: 'Benin',
38 BM: 'Bermuda',
39 BT: 'Bhutan',
40 BO: 'Bolivia',
41 BA: 'Bosnia and Herzegovina',
42 BW: 'Botswana',
43 BV: 'Bouvet Island',
44 BR: 'Brazil',
45 BQ: 'British Antarctic Territory',
46 IO: 'British Indian Ocean Territory',
47 VG: 'British Virgin Islands',
48 BN: 'Brunei',
49 BG: 'Bulgaria',
50 BF: 'Burkina Faso',
51 BI: 'Burundi',
52 KH: 'Cambodia',
53 CM: 'Cameroon',
54 CA: 'Canada',
55 IC: 'Canary Islands',
56 CT: 'Canton and Enderbury Islands',
57 CV: 'Cape Verde',
58 KY: 'Cayman Islands',
59 CF: 'Central African Republic',
60 EA: 'Ceuta and Melilla',
61 TD: 'Chad',
62 CL: 'Chile',
63 CN: 'China',
64 CX: 'Christmas Island',
65 CP: 'Clipperton Island',
66 CC: 'Cocos [Keeling] Islands',
67 CO: 'Colombia',
68 KM: 'Comoros',
69 CD: 'Congo - Kinshasa',
70 CG: 'Congo [Republic]',
71 CK: 'Cook Islands',
72 CR: 'Costa Rica',
73 HR: 'Croatia',
74 CU: 'Cuba',
75 CY: 'Cyprus',
76 CZ: 'Czech Republic',
77 CI: 'Côte d’Ivoire',
78 DK: 'Denmark',
79 DG: 'Diego Garcia',
80 DJ: 'Djibouti',
81 DM: 'Dominica',
82 DO: 'Dominican Republic',
83 NQ: 'Dronning Maud Land',
84 TL: 'East Timor',
85 EC: 'Ecuador',
86 EG: 'Egypt',
87 SV: 'El Salvador',
88 GQ: 'Equatorial Guinea',
89 ER: 'Eritrea',
90 EE: 'Estonia',
91 ET: 'Ethiopia',
92 FK: 'Falkland Islands',
93 FO: 'Faroe Islands',
94 FJ: 'Fiji',
95 FI: 'Finland',
96 FR: 'France',
97 GF: 'French Guiana',
98 PF: 'French Polynesia',
99 TF: 'French Southern Territories',
100 FQ: 'French Southern and Antarctic Territories',
101 GA: 'Gabon',
102 GM: 'Gambia',
103 GE: 'Georgia',
104 DE: 'Germany',
105 GH: 'Ghana',
106 GI: 'Gibraltar',
107 GR: 'Greece',
108 GL: 'Greenland',
109 GD: 'Grenada',
110 GP: 'Guadeloupe',
111 GU: 'Guam',
112 GT: 'Guatemala',
113 GG: 'Guernsey',
114 GN: 'Guinea',
115 GW: 'Guinea-Bissau',
116 GY: 'Guyana',
117 HT: 'Haiti',
118 HM: 'Heard Island and McDonald Islands',
119 HN: 'Honduras',
120 HK: 'Hong Kong',
121 HU: 'Hungary',
122 IS: 'Iceland',
123 IN: 'India',
124 ID: 'Indonesia',
125 IR: 'Iran',
126 IQ: 'Iraq',
127 IE: 'Ireland',
128 IM: 'Isle of Man',
129 IL: 'Israel',
130 IT: 'Italy',
131 JM: 'Jamaica',
132 JP: 'Japan',
133 JE: 'Jersey',
134 JT: 'Johnston Island',
135 JO: 'Jordan',
136 KZ: 'Kazakhstan',
137 KE: 'Kenya',
138 KI: 'Kiribati',
139 XK: 'Kosovo',
140 KW: 'Kuwait',
141 KG: 'Kyrgyzstan',
142 LA: 'Laos',
143 LV: 'Latvia',
144 LB: 'Lebanon',
145 LS: 'Lesotho',
146 LR: 'Liberia',
147 LY: 'Libya',
148 LI: 'Liechtenstein',
149 LT: 'Lithuania',
150 LU: 'Luxembourg',
151 MO: 'Macau',
152 MK: 'Macedonia',
153 MG: 'Madagascar',
154 MW: 'Malawi',
155 MY: 'Malaysia',
156 MV: 'Maldives',
157 ML: 'Mali',
158 MT: 'Malta',
159 MH: 'Marshall Islands',
160 MQ: 'Martinique',
161 MR: 'Mauritania',
162 MU: 'Mauritius',
163 YT: 'Mayotte',
164 FX: 'Metropolitan France',
165 MX: 'Mexico',
166 FM: 'Micronesia',
167 MI: 'Midway Islands',
168 MD: 'Moldova',
169 MC: 'Monaco',
170 MN: 'Mongolia',
171 ME: 'Montenegro',
172 MS: 'Montserrat',
173 MA: 'Morocco',
174 MZ: 'Mozambique',
175 MM: 'Myanmar [Burma]',
176 NA: 'Namibia',
177 NR: 'Nauru',
178 NP: 'Nepal',
179 NL: 'Netherlands',
180 AN: 'Netherlands Antilles',
181 NC: 'New Caledonia',
182 NZ: 'New Zealand',
183 NI: 'Nicaragua',
184 NE: 'Niger',
185 NG: 'Nigeria',
186 NU: 'Niue',
187 NF: 'Norfolk Island',
188 KP: 'North Korea',
189 VD: 'North Vietnam',
190 MP: 'Northern Mariana Islands',
191 NO: 'Norway',
192 OM: 'Oman',
193 QO: 'Outlying Oceania',
194 PC: 'Pacific Islands Trust Territory',
195 PK: 'Pakistan',
196 PW: 'Palau',
197 PS: 'Palestinian Territories',
198 PA: 'Panama',
199 PZ: 'Panama Canal Zone',
200 PG: 'Papua New Guinea',
201 PY: 'Paraguay',
202 YD: 'Peoples Democratic Republic of Yemen',
203 PE: 'Peru',
204 PH: 'Philippines',
205 PN: 'Pitcairn Islands',
206 PL: 'Poland',
207 PT: 'Portugal',
208 PR: 'Puerto Rico',
209 QA: 'Qatar',
210 RO: 'Romania',
211 RU: 'Russia',
212 RW: 'Rwanda',
213 RE: 'Réunion',
214 BL: 'Saint Barthélemy',
215 SH: 'Saint Helena',
216 KN: 'Saint Kitts and Nevis',
217 LC: 'Saint Lucia',
218 MF: 'Saint Martin',
219 PM: 'Saint Pierre and Miquelon',
220 VC: 'Saint Vincent and the Grenadines',
221 WS: 'Samoa',
222 SM: 'San Marino',
223 SA: 'Saudi Arabia',
224 SN: 'Senegal',
225 RS: 'Serbia',
226 CS: 'Serbia and Montenegro',
227 SC: 'Seychelles',
228 SL: 'Sierra Leone',
229 SG: 'Singapore',
230 SK: 'Slovakia',
231 SI: 'Slovenia',
232 SB: 'Solomon Islands',
233 SO: 'Somalia',
234 ZA: 'South Africa',
235 GS: 'South Georgia and the South Sandwich Islands',
236 KR: 'South Korea',
237 ES: 'Spain',
238 LK: 'Sri Lanka',
239 SD: 'Sudan',
240 SR: 'Suriname',
241 SJ: 'Svalbard and Jan Mayen',
242 SZ: 'Swaziland',
243 SE: 'Sweden',
244 CH: 'Switzerland',
245 SY: 'Syria',
246 ST: 'São Tomé and Príncipe',
247 TW: 'Taiwan',
248 TJ: 'Tajikistan',
249 TZ: 'Tanzania',
250 TH: 'Thailand',
251 TG: 'Togo',
252 TK: 'Tokelau',
253 TO: 'Tonga',
254 TT: 'Trinidad and Tobago',
255 TA: 'Tristan da Cunha',
256 TN: 'Tunisia',
257 TR: 'Turkey',
258 TM: 'Turkmenistan',
259 TC: 'Turks and Caicos Islands',
260 TV: 'Tuvalu',
261 UM: 'U.S. Minor Outlying Islands',
262 PU: 'U.S. Miscellaneous Pacific Islands',
263 VI: 'U.S. Virgin Islands',
264 UG: 'Uganda',
265 UA: 'Ukraine',
266 AE: 'United Arab Emirates',
267 GB: 'United Kingdom',
268 US: 'United States',
269 UY: 'Uruguay',
270 UZ: 'Uzbekistan',
271 VU: 'Vanuatu',
272 VA: 'Vatican City',
273 VE: 'Venezuela',
274 VN: 'Vietnam',
275 WK: 'Wake Island',
276 WF: 'Wallis and Futuna',
277 EH: 'Western Sahara',
278 YE: 'Yemen',
279 ZM: 'Zambia',
280 ZW: 'Zimbabwe',
281 AX: 'Åland Islands',
282 },
283 actionText: 'Select country',
284 // defaultValue: 'AT',
285 onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
286 };
287};
288
289storiesOf('Select')
290 .add('Basic', () => (
291 <Select
292 {...defaultProps()}
293 />
294 ))
295 .add('With preselection', () => (
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 />
313 ))
314 .add('With error', () => (
315 <Select
316 {...defaultProps()}
317 showSearch
318 error="Your selection was a bit too funky for my taste"
319 />
320 ));
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-04 00:12:13 +0000