aboutsummaryrefslogtreecommitdiffstats
path: root/uidev
diff options
context:
space:
mode:
authorLibravatar Stefan Malzner <stefan@adlk.io>2019-01-14 22:26:06 +0100
committerLibravatar Stefan Malzner <stefan@adlk.io>2019-01-14 22:26:06 +0100
commit8b4231e3109d4b29e4d90f4553f718a1d7867bc5 (patch)
treeb7c89bd60d01cca3692a3e6df580669fd08a4b27 /uidev
parentUpdate package.json (diff)
downloadferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.tar.gz
ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.tar.zst
ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.zip
Add buttons
Diffstat (limited to 'uidev')
-rw-r--r--uidev/src/app.html6
-rw-r--r--uidev/src/app.tsx7
-rw-r--r--uidev/src/stories/button.stories.tsx74
-rw-r--r--uidev/src/stories/input.stories.tsx51
-rw-r--r--uidev/src/withTheme/index.tsx1
-rw-r--r--uidev/webpack.config.js7
6 files changed, 117 insertions, 29 deletions
diff --git a/uidev/src/app.html b/uidev/src/app.html
index 40801775e..2557bf25e 100644
--- a/uidev/src/app.html
+++ b/uidev/src/app.html
@@ -4,12 +4,6 @@
4<head> 4<head>
5 <title>UIDev</title> 5 <title>UIDev</title>
6 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet"> 6 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet">
7 <style>
8 * {
9 font-family: 'Open Sans', sans-serif;
10 font-size: 14px;
11 }
12 </style>
13</head> 7</head>
14 8
15<body> 9<body>
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
index 6a5c578f2..0fd524e34 100644
--- a/uidev/src/app.tsx
+++ b/uidev/src/app.tsx
@@ -7,14 +7,20 @@ import injectSheet from 'react-jss';
7 7
8import { WithTheme } from './withTheme'; 8import { WithTheme } from './withTheme';
9 9
10import './stories/button.stories';
10import './stories/input.stories'; 11import './stories/input.stories';
11import './stories/toggle.stories'; 12import './stories/toggle.stories';
12 13
13import { store } from './stores'; 14import { store } from './stores';
14 15
16import { theme, ThemeType } from '@meetfranz/theme';
17const defaultTheme = theme(ThemeType.default);
18
15const styles = { 19const styles = {
16 '@global body': { 20 '@global body': {
17 margin: 0, 21 margin: 0,
22 fontSize: defaultTheme.uiFontSize,
23 fontFamily: '\'Open Sans\', sans-serif',
18 }, 24 },
19 container: { 25 container: {
20 display: 'flex', 26 display: 'flex',
@@ -24,6 +30,7 @@ const styles = {
24 width: 300, 30 width: 300,
25 position: 'fixed' as CSS.PositionProperty, 31 position: 'fixed' as CSS.PositionProperty,
26 listStyleType: 'none', 32 listStyleType: 'none',
33 fontSize: 14,
27 }, 34 },
28 storyList: { 35 storyList: {
29 paddingLeft: 18, 36 paddingLeft: 18,
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
new file mode 100644
index 000000000..1a54eb6bf
--- /dev/null
+++ b/uidev/src/stories/button.stories.tsx
@@ -0,0 +1,74 @@
1import { observable } from 'mobx';
2import { observer } from 'mobx-react';
3import React from 'react';
4
5import { Button } from '@meetfranz/forms';
6import { storiesOf } from '../stores/stories';
7
8const defaultProps = {
9 label: 'Button',
10 id: 'test1',
11 name: 'test1',
12 type: 'button',
13 onClick: (e: React.MouseEvent<HTMLButtonElement>) => console.log('click event', e),
14 disabled: false,
15};
16
17const createStore = (args?: any) => {
18 return observable(Object.assign({}, defaultProps, args));
19};
20
21const WithStoreButton = observer(({ store }: { store: any }) => (
22 <>
23 <Button
24 {...Object.assign({}, defaultProps, store)}
25 onClick={() => {
26 store.busy = !store.busy;
27
28 window.setTimeout(() => {
29 store.busy = !store.busy;
30 }, 1000);
31 }}
32 />
33 </>
34));
35
36storiesOf('Button')
37 .add('Basic', () => (
38 <WithStoreButton store={createStore()} />
39 ))
40 .add('Secondary', () => (
41 <WithStoreButton store={createStore({
42 buttonType: 'secondary',
43 })} />
44 ))
45 .add('Warning', () => (
46 <WithStoreButton store={createStore({
47 buttonType: 'warning',
48 })} />
49 ))
50 .add('Danger', () => (
51 <WithStoreButton store={createStore({
52 buttonType: 'danger',
53 })} />
54 ))
55 .add('Inverted', () => (
56 <WithStoreButton store={createStore({
57 buttonType: 'inverted',
58 })} />
59 ))
60 .add('Full width', () => (
61 <WithStoreButton store={createStore({
62 stretch: true,
63 })} />
64 ))
65 .add('Disabled', () => (
66 <WithStoreButton store={createStore({
67 disabled: true,
68 })} />
69 ))
70 .add('With loader', () => (
71 <WithStoreButton store={createStore({
72 busy: true,
73 })} />
74 ));
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx
index 9862ee479..c522a10c7 100644
--- a/uidev/src/stories/input.stories.tsx
+++ b/uidev/src/stories/input.stories.tsx
@@ -1,61 +1,68 @@
1import React from 'react'; 1import React from 'react';
2import uuid from 'uuid/v4';
2 3
3import { Input } from '@meetfranz/forms'; 4import { Input } from '@meetfranz/forms';
4import { storiesOf } from '../stores/stories'; 5import { storiesOf } from '../stores/stories';
5 6
6const defaultProps = { 7const defaultProps = () => {
7 label: 'Label', 8 const id = uuid();
8 id: 'test1', 9 return {
9 name: 'test1', 10 label: 'Label',
10 onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), 11 id: `test-${id}`,
12 name: `test-${id}`,
13 onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
14 };
11}; 15};
12 16
13const defaultPasswordProps = { 17const defaultPasswordProps = () => {
14 label: 'Password', 18 const id = uuid();
15 type: 'password', 19 return {
16 id: 'test1', 20 label: 'Password',
17 name: 'test1', 21 id: `test-${id}`,
18 onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), 22 name: `test-${id}`,
23 type: 'password',
24 onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
25 };
19}; 26};
20 27
21storiesOf('Input') 28storiesOf('Input')
22 .add('Basic', () => ( 29 .add('Basic', () => (
23 <Input 30 <Input
24 {...defaultProps} 31 {...defaultProps()}
25 placeholder="Placeholder text" 32 placeholder="Placeholder text"
26 /> 33 />
27 )) 34 ))
28 .add('Without Label', () => ( 35 .add('Without Label', () => (
29 <Input 36 <Input
30 {...defaultProps} 37 {...defaultProps()}
31 showLabel={false} 38 showLabel={false}
32 /> 39 />
33 )) 40 ))
34 .add('Disabled', () => ( 41 .add('Disabled', () => (
35 <Input {...defaultProps} disabled /> 42 <Input {...defaultProps()} disabled />
36 )) 43 ))
37 .add('With prefix', () => ( 44 .add('With prefix', () => (
38 <Input 45 <Input
39 {...defaultProps} 46 {...defaultProps()}
40 prefix="https://" 47 prefix="https://"
41 /> 48 />
42 )) 49 ))
43 .add('With suffix', () => ( 50 .add('With suffix', () => (
44 <Input 51 <Input
45 {...defaultProps} 52 {...defaultProps()}
46 suffix=".meetfranz.com" 53 suffix=".meetfranz.com"
47 /> 54 />
48 )) 55 ))
49 .add('With pre-suffix', () => ( 56 .add('With pre-suffix', () => (
50 <Input 57 <Input
51 {...defaultProps} 58 {...defaultProps()}
52 prefix="https://" 59 prefix="https://"
53 suffix=".meetfranz.com" 60 suffix=".meetfranz.com"
54 /> 61 />
55 )) 62 ))
56 .add('With error', () => ( 63 .add('With error', () => (
57 <Input 64 <Input
58 {...defaultProps} 65 {...defaultProps()}
59 value="faulty input" 66 value="faulty input"
60 error="This is a generic error message." 67 error="This is a generic error message."
61 /> 68 />
@@ -64,25 +71,25 @@ storiesOf('Input')
64storiesOf('Password') 71storiesOf('Password')
65 .add('Basic', () => ( 72 .add('Basic', () => (
66 <Input 73 <Input
67 {...defaultPasswordProps} 74 {...defaultPasswordProps()}
68 /> 75 />
69 )) 76 ))
70 .add('Show password toggle', () => ( 77 .add('Show password toggle', () => (
71 <Input 78 <Input
72 {...defaultPasswordProps} 79 {...defaultPasswordProps()}
73 showPasswordToggle 80 showPasswordToggle
74 /> 81 />
75 )) 82 ))
76 .add('Score password', () => ( 83 .add('Score password', () => (
77 <Input 84 <Input
78 {...defaultPasswordProps} 85 {...defaultPasswordProps()}
79 showPasswordToggle 86 showPasswordToggle
80 scorePassword 87 scorePassword
81 /> 88 />
82 )) 89 ))
83 .add('Score password with error', () => ( 90 .add('Score password with error', () => (
84 <Input 91 <Input
85 {...defaultPasswordProps} 92 {...defaultPasswordProps()}
86 error="Password is too short" 93 error="Password is too short"
87 showPasswordToggle 94 showPasswordToggle
88 scorePassword 95 scorePassword
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx
index d7d4be3de..17a1074d3 100644
--- a/uidev/src/withTheme/index.tsx
+++ b/uidev/src/withTheme/index.tsx
@@ -24,7 +24,6 @@ const styles = (theme: Theme) => ({
24 borderRadius: theme.borderRadiusSmall, 24 borderRadius: theme.borderRadiusSmall,
25 marginBottom: 20, 25 marginBottom: 20,
26 padding: 20, 26 padding: 20,
27 paddingBottom: 5,
28 background: theme.colorContentBackground, 27 background: theme.colorContentBackground,
29 }, 28 },
30}); 29});
diff --git a/uidev/webpack.config.js b/uidev/webpack.config.js
index 8c4a4ade9..74ea870ef 100644
--- a/uidev/webpack.config.js
+++ b/uidev/webpack.config.js
@@ -12,6 +12,9 @@ module.exports = {
12 }, 12 },
13 resolve: { 13 resolve: {
14 extensions: ['.tsx', '.ts', '.js'], 14 extensions: ['.tsx', '.ts', '.js'],
15 alias: {
16 react: path.resolve('../node_modules/react'),
17 },
15 }, 18 },
16 mode: 'none', 19 mode: 'none',
17 plugins: [ 20 plugins: [
@@ -19,4 +22,8 @@ module.exports = {
19 template: path.join('src', 'app.html'), 22 template: path.join('src', 'app.html'),
20 }), 23 }),
21 ], 24 ],
25 devServer: {
26 inline: true,
27 port: 8008,
28 },
22}; 29};
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-04 00:40:02 +0000