diff options
author | MCMXC <16797721+mcmxcdev@users.noreply.github.com> | 2023-07-29 21:12:16 -0600 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-07-30 08:42:16 +0530 |
commit | 32f76b74a69ad4d60a014bf075c39517888436bc (patch) | |
tree | 753378cc30f52d1e0e51be64b5a83d39f08f39c8 /src/components/ui | |
parent | 6.4.1-nightly.15 [skip ci] (diff) | |
download | ferdium-app-32f76b74a69ad4d60a014bf075c39517888436bc.tar.gz ferdium-app-32f76b74a69ad4d60a014bf075c39517888436bc.tar.zst ferdium-app-32f76b74a69ad4d60a014bf075c39517888436bc.zip |
refactor: various improvements (#1296)
* refactor: various improvements
- enable no-use-before-define eslint rule
- shuffle code to conform to no-use-before-define eslint rule
- remove btoa dependency which is deprecated and replace with Buffer.from(string).toString('base64')
- convert some any types into useful ones
- add type annotations where possible
- remove unused @types/expect.js
- install @types/semver and ts-node which were missing
- repair and rewrite add-crowdin-contributors script
- remove export keyword from variables which are never consumed in another file
- remove unity indicator hack where linked issue was closed
- remove module declaration for kebab-case which is unused
- add missing state interface for certain components
- remove default exports for files which already have a named export
- export IRecipePreview so it can be used throughout codebase
- remove unused removeCacheForCallWith method from CachedRequest.ts
- cleanup unused colors and styles inside legacy theme
* - improve ColorPickerInput
- fix invalid DOM nesting with div inside p in EditSettingsForm
- fix progressbarAccentColor color picker not updating input when using slider
- install missing @types/react-color dependency
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/badge/ProBadge.tsx | 14 | ||||
-rw-r--r-- | src/components/ui/badge/index.tsx | 18 | ||||
-rw-r--r-- | src/components/ui/button/index.tsx | 3 | ||||
-rw-r--r-- | src/components/ui/colorPickerInput/index.tsx | 37 | ||||
-rw-r--r-- | src/components/ui/headline/index.tsx | 16 | ||||
-rw-r--r-- | src/components/ui/icon/index.tsx | 12 | ||||
-rw-r--r-- | src/components/ui/infobox/index.tsx | 1 | ||||
-rw-r--r-- | src/components/ui/loader/index.tsx | 13 | ||||
-rw-r--r-- | src/components/ui/toggle/index.tsx | 14 | ||||
-rw-r--r-- | src/components/ui/typings/generic.ts | 2 | ||||
-rw-r--r-- | src/components/ui/wrapper/index.tsx | 2 |
11 files changed, 60 insertions, 72 deletions
diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx index 62c45b77c..a5947d3a8 100644 --- a/src/components/ui/badge/ProBadge.tsx +++ b/src/components/ui/badge/ProBadge.tsx | |||
@@ -7,13 +7,6 @@ import { Theme } from '../../../themes'; | |||
7 | import Icon from '../icon'; | 7 | import Icon from '../icon'; |
8 | import Badge from './index'; | 8 | import Badge from './index'; |
9 | 9 | ||
10 | interface IProps extends WithStylesProps<typeof styles> { | ||
11 | badgeClasses?: string; | ||
12 | iconClasses?: string; | ||
13 | inverted?: boolean; | ||
14 | className?: string; | ||
15 | } | ||
16 | |||
17 | const styles = (theme: Theme) => ({ | 10 | const styles = (theme: Theme) => ({ |
18 | badge: { | 11 | badge: { |
19 | height: 'auto', | 12 | height: 'auto', |
@@ -32,6 +25,13 @@ const styles = (theme: Theme) => ({ | |||
32 | }, | 25 | }, |
33 | }); | 26 | }); |
34 | 27 | ||
28 | interface IProps extends WithStylesProps<typeof styles> { | ||
29 | badgeClasses?: string; | ||
30 | iconClasses?: string; | ||
31 | inverted?: boolean; | ||
32 | className?: string; | ||
33 | } | ||
34 | |||
35 | class ProBadgeComponent extends Component<IProps> { | 35 | class ProBadgeComponent extends Component<IProps> { |
36 | render() { | 36 | render() { |
37 | const { classes, badgeClasses, iconClasses, inverted, className } = | 37 | const { classes, badgeClasses, iconClasses, inverted, className } = |
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx index 33e2f5d53..44fbf2d4a 100644 --- a/src/components/ui/badge/index.tsx +++ b/src/components/ui/badge/index.tsx | |||
@@ -4,23 +4,17 @@ import injectStyle, { WithStylesProps } from 'react-jss'; | |||
4 | 4 | ||
5 | import { Theme } from '../../../themes'; | 5 | import { Theme } from '../../../themes'; |
6 | 6 | ||
7 | interface IProps extends WithStylesProps<typeof styles> { | ||
8 | type: string; | ||
9 | className?: string; | ||
10 | children: ReactNode; | ||
11 | } | ||
12 | |||
13 | const badgeStyles = (theme: Theme) => { | 7 | const badgeStyles = (theme: Theme) => { |
14 | const styles = {}; | 8 | const styles = {}; |
15 | Object.keys(theme.styleTypes).map(style => { | 9 | Object.keys(theme.styleTypes).map(style => |
16 | Object.assign(styles, { | 10 | Object.assign(styles, { |
17 | [style]: { | 11 | [style]: { |
18 | background: theme.styleTypes[style].accent, | 12 | background: theme.styleTypes[style].accent, |
19 | color: theme.styleTypes[style].contrast, | 13 | color: theme.styleTypes[style].contrast, |
20 | border: theme.styleTypes[style].border, | 14 | border: theme.styleTypes[style].border, |
21 | }, | 15 | }, |
22 | }); | 16 | }), |
23 | }); | 17 | ); |
24 | 18 | ||
25 | return styles; | 19 | return styles; |
26 | }; | 20 | }; |
@@ -44,6 +38,12 @@ const styles = (theme: Theme) => ({ | |||
44 | ...badgeStyles(theme), | 38 | ...badgeStyles(theme), |
45 | }); | 39 | }); |
46 | 40 | ||
41 | interface IProps extends WithStylesProps<typeof styles> { | ||
42 | type: string; | ||
43 | className?: string; | ||
44 | children: ReactNode; | ||
45 | } | ||
46 | |||
47 | class BadgeComponent extends Component<IProps> { | 47 | class BadgeComponent extends Component<IProps> { |
48 | public static defaultProps = { | 48 | public static defaultProps = { |
49 | type: 'primary', | 49 | type: 'primary', |
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index 1b648b1d5..3c31ca952 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | /* eslint-disable no-use-before-define */ | ||
1 | import Icon from '@mdi/react'; | 2 | import Icon from '@mdi/react'; |
2 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
3 | import { Property } from 'csstype'; | 4 | import { Property } from 'csstype'; |
@@ -135,7 +136,7 @@ interface IProps extends IFormField, WithStylesProps<typeof styles> { | |||
135 | label?: string; | 136 | label?: string; |
136 | disabled?: boolean; | 137 | disabled?: boolean; |
137 | id?: string; | 138 | id?: string; |
138 | type?: 'button' | 'reset' | 'submit' | undefined; | 139 | type?: 'button' | 'reset' | 'submit'; |
139 | onClick?: MouseEventHandler<HTMLInputElement>; | 140 | onClick?: MouseEventHandler<HTMLInputElement>; |
140 | buttonType?: ButtonType; | 141 | buttonType?: ButtonType; |
141 | loaded?: boolean; | 142 | loaded?: boolean; |
diff --git a/src/components/ui/colorPickerInput/index.tsx b/src/components/ui/colorPickerInput/index.tsx index 2367175bd..39fd0220a 100644 --- a/src/components/ui/colorPickerInput/index.tsx +++ b/src/components/ui/colorPickerInput/index.tsx | |||
@@ -1,21 +1,18 @@ | |||
1 | import { | 1 | import { |
2 | ChangeEvent, | ||
2 | Component, | 3 | Component, |
3 | createRef, | 4 | createRef, |
4 | InputHTMLAttributes, | 5 | InputHTMLAttributes, |
5 | ReactElement, | ||
6 | RefObject, | 6 | RefObject, |
7 | } from 'react'; | 7 | } from 'react'; |
8 | import { observer } from 'mobx-react'; | 8 | import { observer } from 'mobx-react'; |
9 | import classnames from 'classnames'; | 9 | import classnames from 'classnames'; |
10 | import { SliderPicker } from 'react-color'; | 10 | import { Color, ColorResult, SliderPicker } from 'react-color'; |
11 | import { noop } from 'lodash'; | 11 | import { noop } from 'lodash'; |
12 | import { FormFields } from '../../../@types/mobx-form.types'; | 12 | import { FormFields } from '../../../@types/mobx-form.types'; |
13 | 13 | ||
14 | interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields { | 14 | interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields { |
15 | className?: string; | 15 | onColorChange: (event: ChangeEvent<HTMLInputElement>) => void; |
16 | focus?: boolean; | ||
17 | onColorChange?: () => void; | ||
18 | error: string; | ||
19 | } | 16 | } |
20 | 17 | ||
21 | @observer | 18 | @observer |
@@ -23,20 +20,13 @@ class ColorPickerInput extends Component<IProps> { | |||
23 | private inputElement: RefObject<HTMLInputElement> = | 20 | private inputElement: RefObject<HTMLInputElement> = |
24 | createRef<HTMLInputElement>(); | 21 | createRef<HTMLInputElement>(); |
25 | 22 | ||
26 | componentDidMount(): void { | 23 | onChange(color: ColorResult, event: ChangeEvent<HTMLInputElement>): void { |
27 | const { focus = false } = this.props; | 24 | const { onColorChange, onChange = noop } = this.props; |
28 | if (focus && this.inputElement?.current) { | 25 | onColorChange(event); |
29 | this.inputElement.current.focus(); | 26 | onChange(color.hex); |
30 | } | ||
31 | } | 27 | } |
32 | 28 | ||
33 | onChange({ hex }: { hex: string }): void { | 29 | render() { |
34 | const { onColorChange = noop, onChange = noop } = this.props; | ||
35 | onColorChange(); | ||
36 | onChange(hex); | ||
37 | } | ||
38 | |||
39 | render(): ReactElement { | ||
40 | const { | 30 | const { |
41 | id, | 31 | id, |
42 | name, | 32 | name, |
@@ -45,7 +35,6 @@ class ColorPickerInput extends Component<IProps> { | |||
45 | disabled = false, | 35 | disabled = false, |
46 | className = null, | 36 | className = null, |
47 | type = 'text', | 37 | type = 'text', |
48 | error = '', | ||
49 | onChange = noop, | 38 | onChange = noop, |
50 | } = this.props; | 39 | } = this.props; |
51 | 40 | ||
@@ -53,20 +42,14 @@ class ColorPickerInput extends Component<IProps> { | |||
53 | <div | 42 | <div |
54 | className={classnames({ | 43 | className={classnames({ |
55 | 'franz-form__field': true, | 44 | 'franz-form__field': true, |
56 | 'has-error': error, | ||
57 | [`${className}`]: className, | 45 | [`${className}`]: className, |
58 | })} | 46 | })} |
59 | ref={this.inputElement} | 47 | ref={this.inputElement} |
60 | > | 48 | > |
61 | <SliderPicker | 49 | <SliderPicker |
62 | color={value} | 50 | color={value as Color} |
63 | onChange={this.onChange.bind(this)} | 51 | onChange={(color, event) => this.onChange(color, event)} |
64 | id={`${id}-SliderPicker`} | ||
65 | type={type} | ||
66 | className="franz-form__input" | 52 | className="franz-form__input" |
67 | name={name} | ||
68 | placeholder={placeholder} | ||
69 | disabled={disabled} | ||
70 | /> | 53 | /> |
71 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | 54 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> |
72 | <input | 55 | <input |
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx index 424190a6a..8e40fa896 100644 --- a/src/components/ui/headline/index.tsx +++ b/src/components/ui/headline/index.tsx | |||
@@ -11,14 +11,6 @@ import injectStyle, { WithStylesProps } from 'react-jss'; | |||
11 | import { Theme } from '../../../themes'; | 11 | import { Theme } from '../../../themes'; |
12 | import { Omit } from '../typings/generic'; | 12 | import { Omit } from '../typings/generic'; |
13 | 13 | ||
14 | interface IProps extends WithStylesProps<typeof styles> { | ||
15 | children: ReactNode; | ||
16 | level?: number; | ||
17 | className?: string; | ||
18 | id?: string; | ||
19 | onClick?: MouseEventHandler<HTMLButtonElement>; | ||
20 | } | ||
21 | |||
22 | const styles = (theme: Theme) => ({ | 14 | const styles = (theme: Theme) => ({ |
23 | headline: { | 15 | headline: { |
24 | fontWeight: 'lighter', | 16 | fontWeight: 'lighter', |
@@ -45,6 +37,14 @@ const styles = (theme: Theme) => ({ | |||
45 | }, | 37 | }, |
46 | }); | 38 | }); |
47 | 39 | ||
40 | interface IProps extends WithStylesProps<typeof styles> { | ||
41 | children: ReactNode; | ||
42 | level?: number; | ||
43 | className?: string; | ||
44 | id?: string; | ||
45 | onClick?: MouseEventHandler<HTMLButtonElement>; | ||
46 | } | ||
47 | |||
48 | class HeadlineComponent extends Component<IProps> { | 48 | class HeadlineComponent extends Component<IProps> { |
49 | render(): ReactElement { | 49 | render(): ReactElement { |
50 | const { classes, level, className, children, id, onClick } = this.props; | 50 | const { classes, level, className, children, id, onClick } = this.props; |
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx index 5b432a194..04a00d0e0 100644 --- a/src/components/ui/icon/index.tsx +++ b/src/components/ui/icon/index.tsx | |||
@@ -5,18 +5,18 @@ import injectStyle, { WithStylesProps } from 'react-jss'; | |||
5 | 5 | ||
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | 7 | ||
8 | interface IProps extends WithStylesProps<typeof styles> { | ||
9 | icon: string; | ||
10 | size?: number; | ||
11 | className?: string; | ||
12 | } | ||
13 | |||
14 | const styles = (theme: Theme) => ({ | 8 | const styles = (theme: Theme) => ({ |
15 | icon: { | 9 | icon: { |
16 | fill: theme.colorText, | 10 | fill: theme.colorText, |
17 | }, | 11 | }, |
18 | }); | 12 | }); |
19 | 13 | ||
14 | interface IProps extends WithStylesProps<typeof styles> { | ||
15 | icon: string; | ||
16 | size?: number; | ||
17 | className?: string; | ||
18 | } | ||
19 | |||
20 | class IconComponent extends Component<IProps> { | 20 | class IconComponent extends Component<IProps> { |
21 | render(): ReactElement { | 21 | render(): ReactElement { |
22 | const { classes, icon, size = 1, className } = this.props; | 22 | const { classes, icon, size = 1, className } = this.props; |
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx index 28ec2ff90..a1c4f9d21 100644 --- a/src/components/ui/infobox/index.tsx +++ b/src/components/ui/infobox/index.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | /* eslint-disable no-use-before-define */ | ||
1 | import { mdiClose } from '@mdi/js'; | 2 | import { mdiClose } from '@mdi/js'; |
2 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
3 | import { noop } from 'lodash'; | 4 | import { noop } from 'lodash'; |
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx index 361fc477b..957899bdc 100644 --- a/src/components/ui/loader/index.tsx +++ b/src/components/ui/loader/index.tsx | |||
@@ -2,13 +2,9 @@ import classnames from 'classnames'; | |||
2 | import { Component } from 'react'; | 2 | import { Component } from 'react'; |
3 | import injectStyle, { WithStylesProps } from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | import ReactLoader from 'react-loader'; | 4 | import ReactLoader from 'react-loader'; |
5 | import { Theme } from '../../../themes'; | ||
5 | 6 | ||
6 | interface IProps extends WithStylesProps<typeof styles> { | 7 | const styles = (theme: Theme) => ({ |
7 | className?: string; | ||
8 | color?: string; | ||
9 | } | ||
10 | |||
11 | const styles = theme => ({ | ||
12 | container: { | 8 | container: { |
13 | position: 'relative', | 9 | position: 'relative', |
14 | height: 60, | 10 | height: 60, |
@@ -17,6 +13,11 @@ const styles = theme => ({ | |||
17 | color: theme.colorText, | 13 | color: theme.colorText, |
18 | }); | 14 | }); |
19 | 15 | ||
16 | interface IProps extends WithStylesProps<typeof styles> { | ||
17 | className?: string; | ||
18 | color?: string; | ||
19 | } | ||
20 | |||
20 | class LoaderComponent extends Component<IProps> { | 21 | class LoaderComponent extends Component<IProps> { |
21 | render() { | 22 | render() { |
22 | const { classes, className, color } = this.props; | 23 | const { classes, className, color } = this.props; |
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx index 48f68943b..275d28bf6 100644 --- a/src/components/ui/toggle/index.tsx +++ b/src/components/ui/toggle/index.tsx | |||
@@ -9,13 +9,6 @@ import Label from '../label'; | |||
9 | import { IFormField } from '../typings/generic'; | 9 | import { IFormField } from '../typings/generic'; |
10 | import Wrapper from '../wrapper'; | 10 | import Wrapper from '../wrapper'; |
11 | 11 | ||
12 | interface IProps | ||
13 | extends InputHTMLAttributes<HTMLInputElement>, | ||
14 | IFormField, | ||
15 | WithStylesProps<typeof styles> { | ||
16 | className?: string; | ||
17 | } | ||
18 | |||
19 | const buttonTransition: string = window?.matchMedia( | 12 | const buttonTransition: string = window?.matchMedia( |
20 | '(prefers-reduced-motion: no-preference)', | 13 | '(prefers-reduced-motion: no-preference)', |
21 | ) | 14 | ) |
@@ -62,6 +55,13 @@ const styles = (theme: Theme) => ({ | |||
62 | }, | 55 | }, |
63 | }); | 56 | }); |
64 | 57 | ||
58 | interface IProps | ||
59 | extends InputHTMLAttributes<HTMLInputElement>, | ||
60 | IFormField, | ||
61 | WithStylesProps<typeof styles> { | ||
62 | className?: string; | ||
63 | } | ||
64 | |||
65 | class Toggle extends Component<IProps> { | 65 | class Toggle extends Component<IProps> { |
66 | render(): ReactElement { | 66 | render(): ReactElement { |
67 | const { | 67 | const { |
diff --git a/src/components/ui/typings/generic.ts b/src/components/ui/typings/generic.ts index 3aec0bc40..bf45e4ce0 100644 --- a/src/components/ui/typings/generic.ts +++ b/src/components/ui/typings/generic.ts | |||
@@ -6,5 +6,5 @@ export interface IFormField { | |||
6 | noMargin?: boolean; | 6 | noMargin?: boolean; |
7 | } | 7 | } |
8 | 8 | ||
9 | export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; | ||
10 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; | 9 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; |
10 | export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; | ||
diff --git a/src/components/ui/wrapper/index.tsx b/src/components/ui/wrapper/index.tsx index d733d050e..450d09fd1 100644 --- a/src/components/ui/wrapper/index.tsx +++ b/src/components/ui/wrapper/index.tsx | |||
@@ -2,10 +2,12 @@ import classnames from 'classnames'; | |||
2 | import { Component, ReactNode } from 'react'; | 2 | import { Component, ReactNode } from 'react'; |
3 | import injectStyle, { WithStylesProps } from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | 4 | ||
5 | // eslint-disable-next-line no-use-before-define | ||
5 | interface IProps extends WithStylesProps<typeof styles> { | 6 | interface IProps extends WithStylesProps<typeof styles> { |
6 | children: ReactNode; | 7 | children: ReactNode; |
7 | className?: string; | 8 | className?: string; |
8 | identifier: string; | 9 | identifier: string; |
10 | // eslint-disable-next-line react/no-unused-prop-types | ||
9 | noMargin?: boolean; | 11 | noMargin?: boolean; |
10 | } | 12 | } |
11 | 13 | ||