aboutsummaryrefslogtreecommitdiffstats
path: root/uidev
diff options
context:
space:
mode:
authorLibravatar Markus Hatvan <markus_hatvan@aon.at>2021-10-15 09:48:06 +0200
committerLibravatar GitHub <noreply@github.com>2021-10-15 09:48:06 +0200
commit14d2364fc69e0222133115c55a36286986006098 (patch)
tree9e9b3c41ef742bbe87ca1632b292c67043051957 /uidev
parent5.6.3-nightly.34 [skip ci] (diff)
downloadferdium-app-14d2364fc69e0222133115c55a36286986006098.tar.gz
ferdium-app-14d2364fc69e0222133115c55a36286986006098.tar.zst
ferdium-app-14d2364fc69e0222133115c55a36286986006098.zip
chore: update eslint setup (#2074)
Diffstat (limited to 'uidev')
-rw-r--r--uidev/src/index.tsx4
-rw-r--r--uidev/src/stories/button.stories.tsx165
-rw-r--r--uidev/src/stories/headline.stories.tsx17
-rw-r--r--uidev/src/stories/icon.stories.tsx15
-rw-r--r--uidev/src/stories/infobox.stories.tsx53
-rw-r--r--uidev/src/stories/loader.stories.tsx11
-rw-r--r--uidev/src/withTheme/index.tsx28
-rw-r--r--uidev/webpack.config.js12
8 files changed, 174 insertions, 131 deletions
diff --git a/uidev/src/index.tsx b/uidev/src/index.tsx
index c996d9f69..0f2003d24 100644
--- a/uidev/src/index.tsx
+++ b/uidev/src/index.tsx
@@ -1,8 +1,6 @@
1import { render } from 'react-dom'; 1import { render } from 'react-dom';
2import { App } from './app'; 2import { App } from './app';
3 3
4const app = () => ( 4const app = () => <App />;
5 <App />
6);
7 5
8render(app(), document.querySelector('#root')); 6render(app(), document.querySelector('#root'));
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index e948e8ca4..400063cea 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -32,117 +32,144 @@ const createStore = (args?: any) => observable({ ...defaultProps, ...args });
32const WithStoreButton = observer(({ store }: { store: any }) => ( 32const WithStoreButton = observer(({ store }: { store: any }) => (
33 <> 33 <>
34 <Button 34 <Button
35 {...({ ...defaultProps, ...store })} 35 {...{ ...defaultProps, ...store }}
36 onClick={!store.onClick ? () => { 36 onClick={
37 store.busy = !store.busy; 37 !store.onClick
38 ? () => {
39 store.busy = !store.busy;
38 40
39 window.setTimeout(() => { 41 window.setTimeout(() => {
40 store.busy = !store.busy; 42 store.busy = !store.busy;
41 }, 1000); 43 }, 1000);
42 } : store.onClick} 44 }
45 : store.onClick
46 }
43 /> 47 />
44 </> 48 </>
45)); 49));
46 50
47storiesOf('Button') 51storiesOf('Button')
48 .add('Basic', () => ( 52 .add('Basic', () => <WithStoreButton store={createStore()} />)
49 <WithStoreButton store={createStore()} />
50 ))
51 .add('Secondary', () => ( 53 .add('Secondary', () => (
52 <WithStoreButton store={createStore({ 54 <WithStoreButton
53 buttonType: 'secondary', 55 store={createStore({
54 })} 56 buttonType: 'secondary',
57 })}
55 /> 58 />
56 )) 59 ))
57 .add('Success', () => ( 60 .add('Success', () => (
58 <WithStoreButton store={createStore({ 61 <WithStoreButton
59 buttonType: 'success', 62 store={createStore({
60 })} 63 buttonType: 'success',
64 })}
61 /> 65 />
62 )) 66 ))
63 .add('Warning', () => ( 67 .add('Warning', () => (
64 <WithStoreButton store={createStore({ 68 <WithStoreButton
65 buttonType: 'warning', 69 store={createStore({
66 })} 70 buttonType: 'warning',
71 })}
67 /> 72 />
68 )) 73 ))
69 .add('Danger', () => ( 74 .add('Danger', () => (
70 <WithStoreButton store={createStore({ 75 <WithStoreButton
71 buttonType: 'danger', 76 store={createStore({
72 })} 77 buttonType: 'danger',
78 })}
73 /> 79 />
74 )) 80 ))
75 .add('Inverted', () => ( 81 .add('Inverted', () => (
76 <WithStoreButton store={createStore({ 82 <WithStoreButton
77 buttonType: 'inverted', 83 store={createStore({
78 })} 84 buttonType: 'inverted',
85 })}
79 /> 86 />
80 )) 87 ))
81 .add('Full width', () => ( 88 .add('Full width', () => (
82 <WithStoreButton store={createStore({ 89 <WithStoreButton
83 stretch: true, 90 store={createStore({
84 })} 91 stretch: true,
92 })}
85 /> 93 />
86 )) 94 ))
87 .add('Disabled', () => ( 95 .add('Disabled', () => (
88 <WithStoreButton store={createStore({ 96 <WithStoreButton
89 disabled: true, 97 store={createStore({
90 })} 98 disabled: true,
99 })}
91 /> 100 />
92 )) 101 ))
93 .add('With loader', () => ( 102 .add('With loader', () => (
94 <WithStoreButton store={createStore({ 103 <WithStoreButton
95 busy: true, 104 store={createStore({
96 })} 105 busy: true,
106 })}
97 /> 107 />
98 )) 108 ))
99 .add('With icon', () => ( 109 .add('With icon', () => (
100 <WithStoreButton store={createStore({ 110 <WithStoreButton
101 icon: mdiInformation, 111 store={createStore({
102 })} 112 icon: mdiInformation,
113 })}
103 /> 114 />
104 )) 115 ))
105 .add('As link', () => ( 116 .add('As link', () => (
106 <WithStoreButton store={createStore({ 117 <WithStoreButton
107 href: 'https://meetfranz.com', 118 store={createStore({
108 })} 119 href: 'https://meetfranz.com',
120 })}
109 /> 121 />
110 )) 122 ))
111 .add('As link (target=_blank)', () => ( 123 .add('As link (target=_blank)', () => (
112 <WithStoreButton store={createStore({ 124 <WithStoreButton
113 href: 'https://meetfranz.com', 125 store={createStore({
114 target: '_blank', 126 href: 'https://meetfranz.com',
115 })} 127 target: '_blank',
128 })}
116 /> 129 />
117 )) 130 ))
118 .add('As link (with onClick)', () => ( 131 .add('As link (with onClick)', () => (
119 <WithStoreButton store={createStore({ 132 <WithStoreButton
120 href: 'https://meetfranz.com', 133 store={createStore({
121 onClick: (e: React.MouseEvent<HTMLAnchorElement>) => { 134 href: 'https://meetfranz.com',
122 e.preventDefault(); 135 onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
123 alert('Click event'); 136 e.preventDefault();
124 }, 137 alert('Click event');
125 })} 138 },
139 })}
126 /> 140 />
127 )) 141 ))
128 .add('Long multi-line button', () => ( 142 .add('Long multi-line button', () => (
129 <WithStoreButton store={createStore({ 143 <WithStoreButton
130 label: 'But there is something that I must say to my people, who stand on the warm threshold which leads into the palace of justice: In the process of gaining our rightful place, we must not be guilty of wrongful deeds. Let us not seek to satisfy our thirst for freedom by drinking from the cup of bitterness and hatred. We must forever conduct our struggle on the high plane of dignity and discipline. We must not allow our creative protest to degenerate into physical violence. Again and again, we must rise to the majestic heights of meeting physical force with soul force.', 144 store={createStore({
131 })} 145 label:
146 'But there is something that I must say to my people, who stand on the warm threshold which leads into the palace of justice: In the process of gaining our rightful place, we must not be guilty of wrongful deeds. Let us not seek to satisfy our thirst for freedom by drinking from the cup of bitterness and hatred. We must forever conduct our struggle on the high plane of dignity and discipline. We must not allow our creative protest to degenerate into physical violence. Again and again, we must rise to the majestic heights of meeting physical force with soul force.',
147 })}
132 /> 148 />
133 )) 149 ))
134 .add('Button with Input', injectSheet(styles)(observer(({ classes }: { classes: Classes }) => ( 150 .add(
135 <div className={classes.combinedElements}> 151 'Button with Input',
136 <Input showLabel={false} className={classes.input} noMargin /> 152 injectSheet(styles)(
137 <WithStoreButton store={createStore({})} /> 153 observer(({ classes }: { classes: Classes }) => (
138 </div> 154 <div className={classes.combinedElements}>
139 )))) 155 <Input showLabel={false} className={classes.input} noMargin />
140 .add('Icon Button with Input', injectSheet(styles)(observer(({ classes }: { classes: Classes }) => ( 156 <WithStoreButton store={createStore({})} />
141 <div className={classes.combinedElements}> 157 </div>
142 <Input showLabel={false} className={classes.input} noMargin /> 158 )),
143 <WithStoreButton store={createStore({ 159 ),
144 icon: mdiInformation, 160 )
145 })} 161 .add(
146 /> 162 'Icon Button with Input',
147 </div> 163 injectSheet(styles)(
148 )))); 164 observer(({ classes }: { classes: Classes }) => (
165 <div className={classes.combinedElements}>
166 <Input showLabel={false} className={classes.input} noMargin />
167 <WithStoreButton
168 store={createStore({
169 icon: mdiInformation,
170 })}
171 />
172 </div>
173 )),
174 ),
175 );
diff --git a/uidev/src/stories/headline.stories.tsx b/uidev/src/stories/headline.stories.tsx
index 1f1ab2036..f6a95b1f4 100644
--- a/uidev/src/stories/headline.stories.tsx
+++ b/uidev/src/stories/headline.stories.tsx
@@ -38,12 +38,11 @@ import { storiesOf } from '../stores/stories';
38// </> 38// </>
39// )); 39// ));
40 40
41storiesOf('Typo') 41storiesOf('Typo').add('Headlines', () => (
42 .add('Headlines', () => ( 42 <>
43 <> 43 <H1>Welcome to the world of tomorrow</H1>
44 <H1>Welcome to the world of tomorrow</H1> 44 <H2>Welcome to the world of tomorrow</H2>
45 <H2>Welcome to the world of tomorrow</H2> 45 <H3>Welcome to the world of tomorrow</H3>
46 <H3>Welcome to the world of tomorrow</H3> 46 <H4>Welcome to the world of tomorrow</H4>
47 <H4>Welcome to the world of tomorrow</H4> 47 </>
48 </> 48));
49 ));
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx
index 12c08fd57..73ed1b927 100644
--- a/uidev/src/stories/icon.stories.tsx
+++ b/uidev/src/stories/icon.stories.tsx
@@ -3,11 +3,10 @@ import { mdiAccountCircle } from '@mdi/js';
3import { Icon } from '@meetfranz/ui'; 3import { Icon } from '@meetfranz/ui';
4import { storiesOf } from '../stores/stories'; 4import { storiesOf } from '../stores/stories';
5 5
6storiesOf('Icon') 6storiesOf('Icon').add('Basic', () => (
7 .add('Basic', () => ( 7 <>
8 <> 8 <Icon icon={mdiAccountCircle} />
9 <Icon icon={mdiAccountCircle} /> 9 <Icon icon={mdiAccountCircle} size={2} />
10 <Icon icon={mdiAccountCircle} size={2} /> 10 <Icon icon={mdiAccountCircle} size={3} />
11 <Icon icon={mdiAccountCircle} size={3} /> 11 </>
12 </> 12));
13 ));
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
index 166150606..b5f86e37d 100644
--- a/uidev/src/stories/infobox.stories.tsx
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -14,30 +14,37 @@ interface IStoreArgs {
14 className?: string; 14 className?: string;
15} 15}
16 16
17const createStore = (args?: IStoreArgs) => observable({ type: 'primary', 17const createStore = (args?: IStoreArgs) =>
18 observable({
19 type: 'primary',
18 ctaOnClick: () => { 20 ctaOnClick: () => {
19 alert('on click handler'); 21 alert('on click handler');
20 }, 22 },
21...args }); 23 ...args,
24 });
22 25
23const WithStoreInfobox = observer(({ store, children }: { store: any, children: string | React.ReactNode }) => ( 26const WithStoreInfobox = observer(
24 <> 27 ({ store, children }: { store: any; children: string | React.ReactNode }) => (
25 <Infobox 28 <>
26 icon={store.icon} 29 <Infobox
27 ctaLabel={store.ctaLabel} 30 icon={store.icon}
28 type={store.type} 31 ctaLabel={store.ctaLabel}
29 ctaOnClick={store.ctaOnClick} 32 type={store.type}
30 dismissable={store.dismissable} 33 ctaOnClick={store.ctaOnClick}
31 className={store.className} 34 dismissable={store.dismissable}
32 > 35 className={store.className}
33 {children} 36 >
34 </Infobox> 37 {children}
35 </> 38 </Infobox>
36)); 39 </>
40 ),
41);
37 42
38storiesOf('Infobox') 43storiesOf('Infobox')
39 .add('Basic', () => ( 44 .add('Basic', () => (
40 <WithStoreInfobox store={createStore()}>Welcome to the world of tomorrow</WithStoreInfobox> 45 <WithStoreInfobox store={createStore()}>
46 Welcome to the world of tomorrow
47 </WithStoreInfobox>
41 )) 48 ))
42 .add('Icon + Dismissable', () => ( 49 .add('Icon + Dismissable', () => (
43 <WithStoreInfobox 50 <WithStoreInfobox
@@ -66,7 +73,10 @@ storiesOf('Infobox')
66 ctaLabel: 'Ok, hi!', 73 ctaLabel: 'Ok, hi!',
67 })} 74 })}
68 > 75 >
69 Ferdi is your messaging app / former Emperor of Austria and combines chat & messaging services into one application. Ferdi currently supports Slack, WhatsApp, WeChat, HipChat, Facebook Messenger, Telegram, Google Hangouts,GroupMe, Skype and many more. 76 Ferdi is your messaging app / former Emperor of Austria and combines chat
77 & messaging services into one application. Ferdi currently supports Slack,
78 WhatsApp, WeChat, HipChat, Facebook Messenger, Telegram, Google
79 Hangouts,GroupMe, Skype and many more.
70 </WithStoreInfobox> 80 </WithStoreInfobox>
71 )) 81 ))
72 .add('Secondary', () => ( 82 .add('Secondary', () => (
@@ -125,9 +135,10 @@ storiesOf('Infobox')
125 </WithStoreInfobox> 135 </WithStoreInfobox>
126 )) 136 ))
127 .add('With className', () => ( 137 .add('With className', () => (
128 <WithStoreInfobox store={createStore({ 138 <WithStoreInfobox
129 className: 'franz-is-awesome', 139 store={createStore({
130 })} 140 className: 'franz-is-awesome',
141 })}
131 > 142 >
132 Welcome to the world of tomorrow 143 Welcome to the world of tomorrow
133 </WithStoreInfobox> 144 </WithStoreInfobox>
diff --git a/uidev/src/stories/loader.stories.tsx b/uidev/src/stories/loader.stories.tsx
index ad38dffe8..bbe4d3421 100644
--- a/uidev/src/stories/loader.stories.tsx
+++ b/uidev/src/stories/loader.stories.tsx
@@ -1,9 +1,8 @@
1import { Loader } from '@meetfranz/ui'; 1import { Loader } from '@meetfranz/ui';
2import { storiesOf } from '../stores/stories'; 2import { storiesOf } from '../stores/stories';
3 3
4storiesOf('Loader') 4storiesOf('Loader').add('Basic', () => (
5 .add('Basic', () => ( 5 <>
6 <> 6 <Loader />
7 <Loader /> 7 </>
8 </> 8));
9 ));
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx
index 5184ff340..0e39b4810 100644
--- a/uidev/src/withTheme/index.tsx
+++ b/uidev/src/withTheme/index.tsx
@@ -28,14 +28,22 @@ const styles = (theme: Theme) => ({
28 }, 28 },
29}); 29});
30 30
31const Container = injectSheet(styles)(({ name, classes, story }: { name: string, classes: Classes, story: React.ReactNode }) => ( 31const Container = injectSheet(styles)(
32 <article> 32 ({
33 <h1 className={classes.title}>{name}</h1> 33 name,
34 <div className={classes.container}> 34 classes,
35 {story} 35 story,
36 </div> 36 }: {
37 </article> 37 name: string;
38)); 38 classes: Classes;
39 story: React.ReactNode;
40 }) => (
41 <article>
42 <h1 className={classes.title}>{name}</h1>
43 <div className={classes.container}>{story}</div>
44 </article>
45 ),
46);
39 47
40export const WithTheme = ({ children }: { children: React.ReactChild }) => ( 48export const WithTheme = ({ children }: { children: React.ReactChild }) => (
41 <> 49 <>
@@ -43,6 +51,6 @@ export const WithTheme = ({ children }: { children: React.ReactChild }) => (
43 <ThemeProvider key={key} theme={theme.variables}> 51 <ThemeProvider key={key} theme={theme.variables}>
44 <Container story={children} name={theme.name} /> 52 <Container story={children} name={theme.name} />
45 </ThemeProvider> 53 </ThemeProvider>
46 ))} 54 ))}
47 </> 55 </>
48 ); 56);
diff --git a/uidev/webpack.config.js b/uidev/webpack.config.js
index 74ea870ef..faabac784 100644
--- a/uidev/webpack.config.js
+++ b/uidev/webpack.config.js
@@ -4,11 +4,13 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
4module.exports = { 4module.exports = {
5 entry: './src/index.tsx', 5 entry: './src/index.tsx',
6 module: { 6 module: {
7 rules: [{ 7 rules: [
8 test: /\.tsx?$/, 8 {
9 use: 'ts-loader', 9 test: /\.tsx?$/,
10 exclude: /node_modules/, 10 use: 'ts-loader',
11 }], 11 exclude: /node_modules/,
12 },
13 ],
12 }, 14 },
13 resolve: { 15 resolve: {
14 extensions: ['.tsx', '.ts', '.js'], 16 extensions: ['.tsx', '.ts', '.js'],
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-05 20:34:58 +0000