diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-08-05 16:48:25 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-08-05 16:48:25 +0200 |
commit | e1e46986d902adc4c19ee009016290f9733a7d61 (patch) | |
tree | 0f44c1c9b3d0ee2d4d5fa9086d5e7ac5bbfc5772 | |
parent | bump version to 5.2.1-beta.1 (diff) | |
download | ferdium-app-e1e46986d902adc4c19ee009016290f9733a7d61.tar.gz ferdium-app-e1e46986d902adc4c19ee009016290f9733a7d61.tar.zst ferdium-app-e1e46986d902adc4c19ee009016290f9733a7d61.zip |
Enable tree shaking for icons
-rw-r--r-- | packages/forms/src/button/index.tsx | 12 | ||||
-rw-r--r-- | packages/ui/src/badge/ProBadge.tsx | 3 | ||||
-rw-r--r-- | packages/ui/src/icon/index.tsx | 12 | ||||
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 3 | ||||
-rw-r--r-- | uidev/src/stories/button.stories.tsx | 6 | ||||
-rw-r--r-- | uidev/src/stories/icon.stories.tsx | 47 | ||||
-rw-r--r-- | uidev/src/stories/infobox.stories.tsx | 17 |
7 files changed, 26 insertions, 74 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index 9faedc8f1..b53c2da05 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -1,4 +1,3 @@ | |||
1 | import * as mdiIcons from '@mdi/js'; | ||
2 | import Icon from '@mdi/react'; | 1 | import Icon from '@mdi/react'; |
3 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
@@ -21,7 +20,7 @@ interface IProps extends IFormField, IWithStyle { | |||
21 | stretch?: boolean; | 20 | stretch?: boolean; |
22 | loaded?: boolean; | 21 | loaded?: boolean; |
23 | busy?: boolean; | 22 | busy?: boolean; |
24 | icon?: keyof typeof mdiIcons; | 23 | icon?: string; |
25 | href?: string; | 24 | href?: string; |
26 | target?: string; | 25 | target?: string; |
27 | } | 26 | } |
@@ -175,7 +174,7 @@ class ButtonComponent extends Component<IProps> { | |||
175 | onClick, | 174 | onClick, |
176 | buttonType, | 175 | buttonType, |
177 | loaded, | 176 | loaded, |
178 | icon: iconName, | 177 | icon, |
179 | busy: busyProp, | 178 | busy: busyProp, |
180 | href, | 179 | href, |
181 | target, | 180 | target, |
@@ -185,13 +184,6 @@ class ButtonComponent extends Component<IProps> { | |||
185 | busy, | 184 | busy, |
186 | } = this.state; | 185 | } = this.state; |
187 | 186 | ||
188 | let icon = ''; | ||
189 | if (iconName && mdiIcons[iconName]) { | ||
190 | icon = mdiIcons[iconName]; | ||
191 | } else if (iconName && !mdiIcons[iconName]) { | ||
192 | console.warn(`Icon '${iconName}' was not found`); | ||
193 | } | ||
194 | |||
195 | let showLoader = false; | 187 | let showLoader = false; |
196 | if (loaded) { | 188 | if (loaded) { |
197 | showLoader = !loaded; | 189 | showLoader = !loaded; |
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx index 612e23210..c18cb4a0c 100644 --- a/packages/ui/src/badge/ProBadge.tsx +++ b/packages/ui/src/badge/ProBadge.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | import { mdiStar } from '@mdi/js'; | ||
1 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
3 | import React, { Component } from 'react'; | 4 | import React, { Component } from 'react'; |
@@ -49,7 +50,7 @@ class ProBadgeComponent extends Component<IProps> { | |||
49 | ])} | 50 | ])} |
50 | > | 51 | > |
51 | <Icon | 52 | <Icon |
52 | icon="mdiStar" | 53 | icon={mdiStar} |
53 | className={classnames([ | 54 | className={classnames([ |
54 | classes.icon, | 55 | classes.icon, |
55 | inverted && classes.invertedIcon, | 56 | inverted && classes.invertedIcon, |
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx index e30d3396d..af467c085 100644 --- a/packages/ui/src/icon/index.tsx +++ b/packages/ui/src/icon/index.tsx | |||
@@ -1,4 +1,3 @@ | |||
1 | import * as mdiIcons from '@mdi/js'; | ||
2 | import MdiIcon from '@mdi/react'; | 1 | import MdiIcon from '@mdi/react'; |
3 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
@@ -8,7 +7,7 @@ import injectStyle from 'react-jss'; | |||
8 | import { IWithStyle } from '../typings/generic'; | 7 | import { IWithStyle } from '../typings/generic'; |
9 | 8 | ||
10 | interface IProps extends IWithStyle { | 9 | interface IProps extends IWithStyle { |
11 | icon: keyof typeof mdiIcons; | 10 | icon: string; |
12 | size?: number; | 11 | size?: number; |
13 | className?: string; | 12 | className?: string; |
14 | } | 13 | } |
@@ -27,16 +26,13 @@ class IconComponent extends Component<IProps> { | |||
27 | render() { | 26 | render() { |
28 | const { | 27 | const { |
29 | classes, | 28 | classes, |
30 | icon: iconName, | 29 | icon, |
31 | size, | 30 | size, |
32 | className, | 31 | className, |
33 | } = this.props; | 32 | } = this.props; |
34 | 33 | ||
35 | let icon = ''; | 34 | if (!icon) { |
36 | if (iconName && mdiIcons[iconName]) { | 35 | console.warn('No Icon specified'); |
37 | icon = mdiIcons[iconName]; | ||
38 | } else if (iconName && !mdiIcons[iconName]) { | ||
39 | console.warn(`Icon '${iconName}' was not found`); | ||
40 | } | 36 | } |
41 | 37 | ||
42 | return ( | 38 | return ( |
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index 9066a623e..5070ee7ef 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | import { mdiClose } from '@mdi/js'; | ||
1 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
3 | import React, { Component } from 'react'; | 4 | import React, { Component } from 'react'; |
@@ -192,7 +193,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
192 | onClick={this.dismiss.bind(this)} | 193 | onClick={this.dismiss.bind(this)} |
193 | className={classes.close} | 194 | className={classes.close} |
194 | > | 195 | > |
195 | <Icon icon="mdiClose" /> | 196 | <Icon icon={mdiClose} /> |
196 | </button> | 197 | </button> |
197 | )} | 198 | )} |
198 | </div> | 199 | </div> |
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx index f7537895c..5c1c9246d 100644 --- a/uidev/src/stories/button.stories.tsx +++ b/uidev/src/stories/button.stories.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import { mdiInformation } from '@mdi/js'; | ||
1 | import { observable } from 'mobx'; | 2 | import { observable } from 'mobx'; |
2 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
3 | import React from 'react'; | 4 | import React from 'react'; |
4 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
5 | 6 | ||
6 | import { Button, Input } from '@meetfranz/forms'; | 7 | import { Button, Input } from '@meetfranz/forms'; |
7 | import { classes } from 'istanbul-lib-coverage'; | ||
8 | import { Classes } from 'jss'; | 8 | import { Classes } from 'jss'; |
9 | import { storiesOf } from '../stores/stories'; | 9 | import { storiesOf } from '../stores/stories'; |
10 | 10 | ||
@@ -92,7 +92,7 @@ storiesOf('Button') | |||
92 | )) | 92 | )) |
93 | .add('With icon', () => ( | 93 | .add('With icon', () => ( |
94 | <WithStoreButton store={createStore({ | 94 | <WithStoreButton store={createStore({ |
95 | icon: 'mdiInformation', | 95 | icon: mdiInformation, |
96 | })} /> | 96 | })} /> |
97 | )) | 97 | )) |
98 | .add('As link', () => ( | 98 | .add('As link', () => ( |
@@ -131,7 +131,7 @@ storiesOf('Button') | |||
131 | <div className={classes.combinedElements}> | 131 | <div className={classes.combinedElements}> |
132 | <Input showLabel={false} className={classes.input} noMargin /> | 132 | <Input showLabel={false} className={classes.input} noMargin /> |
133 | <WithStoreButton store={createStore({ | 133 | <WithStoreButton store={createStore({ |
134 | icon: 'mdiInformation', | 134 | icon: mdiInformation, |
135 | })} /> | 135 | })} /> |
136 | </div> | 136 | </div> |
137 | )), | 137 | )), |
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx index c8e7f8ced..f9aa1635b 100644 --- a/uidev/src/stories/icon.stories.tsx +++ b/uidev/src/stories/icon.stories.tsx | |||
@@ -1,53 +1,14 @@ | |||
1 | import { observable } from 'mobx'; | 1 | import { mdiAccountCircle } from '@mdi/js'; |
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | 2 | import React from 'react'; |
4 | import uuid from 'uuid/v4'; | ||
5 | 3 | ||
6 | import { Icon } from '@meetfranz/ui'; | 4 | import { Icon } from '@meetfranz/ui'; |
7 | import { storiesOf } from '../stores/stories'; | 5 | import { storiesOf } from '../stores/stories'; |
8 | 6 | ||
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 | |||
46 | storiesOf('Icon') | 7 | storiesOf('Icon') |
47 | .add('Basic', () => ( | 8 | .add('Basic', () => ( |
48 | <> | 9 | <> |
49 | <Icon icon="mdiAccountCircle" /> | 10 | <Icon icon={mdiAccountCircle} /> |
50 | <Icon icon="mdiAccountCircle" size={2} /> | 11 | <Icon icon={mdiAccountCircle} size={2} /> |
51 | <Icon icon="mdiAccountCircle" size={3} /> | 12 | <Icon icon={mdiAccountCircle} size={3} /> |
52 | </> | 13 | </> |
53 | )); | 14 | )); |
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx index 144855376..c3442da0d 100644 --- a/uidev/src/stories/infobox.stories.tsx +++ b/uidev/src/stories/infobox.stories.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | import { mdiEarth } from '@mdi/js'; | ||
1 | import { observable } from 'mobx'; | 2 | import { observable } from 'mobx'; |
2 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
3 | import React from 'react'; | 4 | import React from 'react'; |
@@ -44,7 +45,7 @@ storiesOf('Infobox') | |||
44 | .add('Icon + Dismissable', () => ( | 45 | .add('Icon + Dismissable', () => ( |
45 | <WithStoreInfobox | 46 | <WithStoreInfobox |
46 | store={createStore({ | 47 | store={createStore({ |
47 | icon: 'mdiEarth', | 48 | icon: mdiEarth, |
48 | dismissable: true, | 49 | dismissable: true, |
49 | })} | 50 | })} |
50 | > | 51 | > |
@@ -54,7 +55,7 @@ storiesOf('Infobox') | |||
54 | .add('With CTA', () => ( | 55 | .add('With CTA', () => ( |
55 | <WithStoreInfobox | 56 | <WithStoreInfobox |
56 | store={createStore({ | 57 | store={createStore({ |
57 | icon: 'mdiEarth', | 58 | icon: mdiEarth, |
58 | ctaLabel: 'Ok, hi!', | 59 | ctaLabel: 'Ok, hi!', |
59 | })} | 60 | })} |
60 | > | 61 | > |
@@ -64,7 +65,7 @@ storiesOf('Infobox') | |||
64 | .add('With long text', () => ( | 65 | .add('With long text', () => ( |
65 | <WithStoreInfobox | 66 | <WithStoreInfobox |
66 | store={createStore({ | 67 | store={createStore({ |
67 | icon: 'mdiEarth', | 68 | icon: mdiEarth, |
68 | ctaLabel: 'Ok, hi!', | 69 | ctaLabel: 'Ok, hi!', |
69 | })} | 70 | })} |
70 | > | 71 | > |
@@ -74,7 +75,7 @@ storiesOf('Infobox') | |||
74 | .add('Secondary', () => ( | 75 | .add('Secondary', () => ( |
75 | <WithStoreInfobox | 76 | <WithStoreInfobox |
76 | store={createStore({ | 77 | store={createStore({ |
77 | icon: 'mdiEarth', | 78 | icon: mdiEarth, |
78 | ctaLabel: 'Ok, hi!', | 79 | ctaLabel: 'Ok, hi!', |
79 | type: 'secondary', | 80 | type: 'secondary', |
80 | })} | 81 | })} |
@@ -85,7 +86,7 @@ storiesOf('Infobox') | |||
85 | .add('Success', () => ( | 86 | .add('Success', () => ( |
86 | <WithStoreInfobox | 87 | <WithStoreInfobox |
87 | store={createStore({ | 88 | store={createStore({ |
88 | icon: 'mdiEarth', | 89 | icon: mdiEarth, |
89 | ctaLabel: 'Ok, hi!', | 90 | ctaLabel: 'Ok, hi!', |
90 | type: 'success', | 91 | type: 'success', |
91 | })} | 92 | })} |
@@ -96,7 +97,7 @@ storiesOf('Infobox') | |||
96 | .add('Warning', () => ( | 97 | .add('Warning', () => ( |
97 | <WithStoreInfobox | 98 | <WithStoreInfobox |
98 | store={createStore({ | 99 | store={createStore({ |
99 | icon: 'mdiEarth', | 100 | icon: mdiEarth, |
100 | ctaLabel: 'Ok, hi!', | 101 | ctaLabel: 'Ok, hi!', |
101 | type: 'warning', | 102 | type: 'warning', |
102 | })} | 103 | })} |
@@ -107,7 +108,7 @@ storiesOf('Infobox') | |||
107 | .add('Danger', () => ( | 108 | .add('Danger', () => ( |
108 | <WithStoreInfobox | 109 | <WithStoreInfobox |
109 | store={createStore({ | 110 | store={createStore({ |
110 | icon: 'mdiEarth', | 111 | icon: mdiEarth, |
111 | ctaLabel: 'Ok, hi!', | 112 | ctaLabel: 'Ok, hi!', |
112 | type: 'danger', | 113 | type: 'danger', |
113 | })} | 114 | })} |
@@ -118,7 +119,7 @@ storiesOf('Infobox') | |||
118 | .add('Inverted', () => ( | 119 | .add('Inverted', () => ( |
119 | <WithStoreInfobox | 120 | <WithStoreInfobox |
120 | store={createStore({ | 121 | store={createStore({ |
121 | icon: 'mdiEarth', | 122 | icon: mdiEarth, |
122 | ctaLabel: 'Ok, hi!', | 123 | ctaLabel: 'Ok, hi!', |
123 | type: 'inverted', | 124 | type: 'inverted', |
124 | })} | 125 | })} |