diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-07-30 10:54:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-30 14:24:54 +0530 |
commit | f4b4416ea52d564bc2dbe543a82084ed98843ccc (patch) | |
tree | 7ca6b23571c86458a6b799746c91a7191de02715 /packages/ui | |
parent | 5.6.1-nightly.8 [skip ci] (diff) | |
download | ferdium-app-f4b4416ea52d564bc2dbe543a82084ed98843ccc.tar.gz ferdium-app-f4b4416ea52d564bc2dbe543a82084ed98843ccc.tar.zst ferdium-app-f4b4416ea52d564bc2dbe543a82084ed98843ccc.zip |
chore: migrate from tslint to @typescript-eslint (#1706)
- update .eslintrc to work for .js and .ts
- update devDependencies
- lint properly both root /src and nested /packages
- update webhint recommended setting for tsconfig.json to shrink output
- Manage all eslint rules from the repo root
- escape single quotes in scripts to please windows build
Co-authored-by: Vijay A <avijayr@protonmail.com>
Diffstat (limited to 'packages/ui')
-rw-r--r-- | packages/ui/src/badge/ProBadge.tsx | 11 | ||||
-rw-r--r-- | packages/ui/src/badge/index.tsx | 9 | ||||
-rw-r--r-- | packages/ui/src/headline/index.tsx | 15 | ||||
-rw-r--r-- | packages/ui/src/icon/index.tsx | 7 | ||||
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 49 | ||||
-rw-r--r-- | packages/ui/src/loader/index.tsx | 10 | ||||
-rw-r--r-- | packages/ui/tslint.json | 3 |
7 files changed, 35 insertions, 69 deletions
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx index 73db47068..63d5d673a 100644 --- a/packages/ui/src/badge/ProBadge.tsx +++ b/packages/ui/src/badge/ProBadge.tsx | |||
@@ -3,7 +3,7 @@ import classnames from 'classnames'; | |||
3 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
5 | 5 | ||
6 | import { Badge, Icon } from '../'; | 6 | import { Badge, Icon } from '..'; |
7 | import { Theme } from '../../../theme'; | 7 | import { Theme } from '../../../theme'; |
8 | import { IWithStyle } from '../typings/generic'; | 8 | import { IWithStyle } from '../typings/generic'; |
9 | 9 | ||
@@ -34,13 +34,8 @@ const styles = (theme: Theme) => ({ | |||
34 | 34 | ||
35 | class ProBadgeComponent extends Component<IProps> { | 35 | class ProBadgeComponent extends Component<IProps> { |
36 | render() { | 36 | render() { |
37 | const { | 37 | const { classes, badgeClasses, iconClasses, inverted, className } = |
38 | classes, | 38 | this.props; |
39 | badgeClasses, | ||
40 | iconClasses, | ||
41 | inverted, | ||
42 | className, | ||
43 | } = this.props; | ||
44 | 39 | ||
45 | return ( | 40 | return ( |
46 | <Badge | 41 | <Badge |
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx index 0ba383673..5dd735879 100644 --- a/packages/ui/src/badge/index.tsx +++ b/packages/ui/src/badge/index.tsx | |||
@@ -13,7 +13,7 @@ interface IProps extends IWithStyle { | |||
13 | 13 | ||
14 | const badgeStyles = (theme: Theme) => { | 14 | const badgeStyles = (theme: Theme) => { |
15 | const styles = {}; | 15 | const styles = {}; |
16 | Object.keys(theme.styleTypes).map((style) => { | 16 | Object.keys(theme.styleTypes).map(style => { |
17 | Object.assign(styles, { | 17 | Object.assign(styles, { |
18 | [style]: { | 18 | [style]: { |
19 | background: theme.styleTypes[style].accent, | 19 | background: theme.styleTypes[style].accent, |
@@ -51,12 +51,7 @@ class BadgeComponent extends Component<IProps> { | |||
51 | }; | 51 | }; |
52 | 52 | ||
53 | render() { | 53 | render() { |
54 | const { | 54 | const { classes, children, type, className } = this.props; |
55 | classes, | ||
56 | children, | ||
57 | type, | ||
58 | className, | ||
59 | } = this.props; | ||
60 | 55 | ||
61 | return ( | 56 | return ( |
62 | <div | 57 | <div |
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx index 11b6125cd..bf3d4418c 100644 --- a/packages/ui/src/headline/index.tsx +++ b/packages/ui/src/headline/index.tsx | |||
@@ -37,13 +37,7 @@ const styles = (theme: Theme) => ({ | |||
37 | 37 | ||
38 | class HeadlineComponent extends Component<IProps> { | 38 | class HeadlineComponent extends Component<IProps> { |
39 | render() { | 39 | render() { |
40 | const { | 40 | const { classes, level, className, children, id } = this.props; |
41 | classes, | ||
42 | level, | ||
43 | className, | ||
44 | children, | ||
45 | id, | ||
46 | } = this.props; | ||
47 | 41 | ||
48 | return React.createElement( | 42 | return React.createElement( |
49 | `h${level}`, | 43 | `h${level}`, |
@@ -63,7 +57,12 @@ class HeadlineComponent extends Component<IProps> { | |||
63 | 57 | ||
64 | const Headline = injectStyle(styles)(HeadlineComponent); | 58 | const Headline = injectStyle(styles)(HeadlineComponent); |
65 | 59 | ||
66 | const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => <Headline level={level} {...props}>{props.children}</Headline>; | 60 | const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => |
61 | ( | ||
62 | <Headline level={level} {...props}> | ||
63 | {props.children} | ||
64 | </Headline> | ||
65 | ); | ||
67 | 66 | ||
68 | export const H1 = createH(1); | 67 | export const H1 = createH(1); |
69 | export const H2 = createH(2); | 68 | export const H2 = createH(2); |
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx index ed55eccfe..b644a9234 100644 --- a/packages/ui/src/icon/index.tsx +++ b/packages/ui/src/icon/index.tsx | |||
@@ -24,12 +24,7 @@ class IconComponent extends Component<IProps> { | |||
24 | }; | 24 | }; |
25 | 25 | ||
26 | render() { | 26 | render() { |
27 | const { | 27 | const { classes, icon, size, className } = this.props; |
28 | classes, | ||
29 | icon, | ||
30 | size, | ||
31 | className, | ||
32 | } = this.props; | ||
33 | 28 | ||
34 | if (!icon) { | 29 | if (!icon) { |
35 | console.warn('No Icon specified'); | 30 | console.warn('No Icon specified'); |
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index bd62fc4ea..961262001 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -3,8 +3,8 @@ import classnames from 'classnames'; | |||
3 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
5 | 5 | ||
6 | import { Icon } from '..'; | ||
6 | import { Theme } from '../../../theme'; | 7 | import { Theme } from '../../../theme'; |
7 | import { Icon } from '../'; | ||
8 | import { IWithStyle } from '../typings/generic'; | 8 | import { IWithStyle } from '../typings/generic'; |
9 | 9 | ||
10 | interface IProps extends IWithStyle { | 10 | interface IProps extends IWithStyle { |
@@ -27,7 +27,7 @@ interface IState { | |||
27 | 27 | ||
28 | const buttonStyles = (theme: Theme) => { | 28 | const buttonStyles = (theme: Theme) => { |
29 | const styles = {}; | 29 | const styles = {}; |
30 | Object.keys(theme.styleTypes).map((style) => { | 30 | Object.keys(theme.styleTypes).map(style => { |
31 | Object.assign(styles, { | 31 | Object.assign(styles, { |
32 | [style]: { | 32 | [style]: { |
33 | background: theme.styleTypes[style].accent, | 33 | background: theme.styleTypes[style].accent, |
@@ -73,18 +73,21 @@ const styles = (theme: Theme) => ({ | |||
73 | marginRight: 10, | 73 | marginRight: 10, |
74 | }, | 74 | }, |
75 | close: { | 75 | close: { |
76 | color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 76 | color: (props: IProps) => |
77 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
77 | marginRight: -5, | 78 | marginRight: -5, |
78 | border: 0, | 79 | border: 0, |
79 | background: 'none', | 80 | background: 'none', |
80 | }, | 81 | }, |
81 | cta: { | 82 | cta: { |
82 | borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 83 | borderColor: (props: IProps) => |
84 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
83 | borderRadius: theme.borderRadiusSmall, | 85 | borderRadius: theme.borderRadiusSmall, |
84 | borderStyle: 'solid', | 86 | borderStyle: 'solid', |
85 | borderWidth: 1, | 87 | borderWidth: 1, |
86 | background: 'none', | 88 | background: 'none', |
87 | color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 89 | color: (props: IProps) => |
90 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
88 | marginLeft: 15, | 91 | marginLeft: 15, |
89 | padding: [4, 10], | 92 | padding: [4, 10], |
90 | fontSize: theme.uiFontSize, | 93 | fontSize: theme.uiFontSize, |
@@ -113,9 +116,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
113 | }; | 116 | }; |
114 | 117 | ||
115 | dismiss() { | 118 | dismiss() { |
116 | const { | 119 | const { onDismiss } = this.props; |
117 | onDismiss, | ||
118 | } = this.props; | ||
119 | 120 | ||
120 | this.setState({ | 121 | this.setState({ |
121 | isDismissing: true, | 122 | isDismissing: true, |
@@ -129,7 +130,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
129 | this.setState({ | 130 | this.setState({ |
130 | dismissed: true, | 131 | dismissed: true, |
131 | }); | 132 | }); |
132 | }, 3000); | 133 | }, 3000); |
133 | } | 134 | } |
134 | 135 | ||
135 | componentWillUnmount(): void { | 136 | componentWillUnmount(): void { |
@@ -144,26 +145,24 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
144 | icon, | 145 | icon, |
145 | type, | 146 | type, |
146 | ctaLabel, | 147 | ctaLabel, |
147 | ctaLoading, | ||
148 | ctaOnClick, | 148 | ctaOnClick, |
149 | dismissable, | 149 | dismissable, |
150 | className, | 150 | className, |
151 | } = this.props; | 151 | } = this.props; |
152 | 152 | ||
153 | const { | 153 | const { isDismissing, dismissed } = this.state; |
154 | isDismissing, | ||
155 | dismissed, | ||
156 | } = this.state; | ||
157 | 154 | ||
158 | if (dismissed) { | 155 | if (dismissed) { |
159 | return null; | 156 | return null; |
160 | } | 157 | } |
161 | 158 | ||
162 | return ( | 159 | return ( |
163 | <div className={classnames({ | 160 | <div |
164 | [classes.wrapper]: true, | 161 | className={classnames({ |
165 | [`${className}`]: className, | 162 | [classes.wrapper]: true, |
166 | })}> | 163 | [`${className}`]: className, |
164 | })} | ||
165 | > | ||
167 | <div | 166 | <div |
168 | className={classnames({ | 167 | className={classnames({ |
169 | [classes.infobox]: true, | 168 | [classes.infobox]: true, |
@@ -172,18 +171,10 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
172 | })} | 171 | })} |
173 | data-type="franz-infobox" | 172 | data-type="franz-infobox" |
174 | > | 173 | > |
175 | {icon && ( | 174 | {icon && <Icon icon={icon} className={classes.icon} />} |
176 | <Icon icon={icon} className={classes.icon} /> | 175 | <div className={classes.content}>{children}</div> |
177 | )} | ||
178 | <div className={classes.content}> | ||
179 | {children} | ||
180 | </div> | ||
181 | {ctaLabel && ( | 176 | {ctaLabel && ( |
182 | <button | 177 | <button className={classes.cta} onClick={ctaOnClick} type="button"> |
183 | className={classes.cta} | ||
184 | onClick={ctaOnClick} | ||
185 | type="button" | ||
186 | > | ||
187 | {ctaLabel} | 178 | {ctaLabel} |
188 | </button> | 179 | </button> |
189 | )} | 180 | )} |
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx index e2701a8e9..244aa9dc9 100644 --- a/packages/ui/src/loader/index.tsx +++ b/packages/ui/src/loader/index.tsx | |||
@@ -3,7 +3,6 @@ import React, { Component } from 'react'; | |||
3 | import injectStyle, { withTheme } from 'react-jss'; | 3 | import injectStyle, { withTheme } from 'react-jss'; |
4 | import ReactLoader from 'react-loader'; | 4 | import ReactLoader from 'react-loader'; |
5 | 5 | ||
6 | import { Theme } from '../../../theme'; | ||
7 | import { IWithStyle } from '../typings/generic'; | 6 | import { IWithStyle } from '../typings/generic'; |
8 | 7 | ||
9 | interface IProps extends IWithStyle { | 8 | interface IProps extends IWithStyle { |
@@ -11,7 +10,7 @@ interface IProps extends IWithStyle { | |||
11 | color?: string; | 10 | color?: string; |
12 | } | 11 | } |
13 | 12 | ||
14 | const styles = (theme: Theme) => ({ | 13 | const styles = () => ({ |
15 | container: { | 14 | container: { |
16 | position: 'relative', | 15 | position: 'relative', |
17 | height: 60, | 16 | height: 60, |
@@ -20,12 +19,7 @@ const styles = (theme: Theme) => ({ | |||
20 | 19 | ||
21 | class LoaderComponent extends Component<IProps> { | 20 | class LoaderComponent extends Component<IProps> { |
22 | render() { | 21 | render() { |
23 | const { | 22 | const { classes, className, color, theme } = this.props; |
24 | classes, | ||
25 | className, | ||
26 | color, | ||
27 | theme, | ||
28 | } = this.props; | ||
29 | 23 | ||
30 | return ( | 24 | return ( |
31 | <div | 25 | <div |
diff --git a/packages/ui/tslint.json b/packages/ui/tslint.json deleted file mode 100644 index 0946f2096..000000000 --- a/packages/ui/tslint.json +++ /dev/null | |||
@@ -1,3 +0,0 @@ | |||
1 | { | ||
2 | "extends": "../../tslint.json" | ||
3 | } | ||