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

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';
 import Icon from '../icon';
 import Badge from './index';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  badgeClasses?: string;
-  iconClasses?: string;
-  inverted?: boolean;
-  className?: string;
-}
-
 const styles = (theme: Theme) => ({
   badge: {
     height: 'auto',
@@ -32,6 +25,13 @@ const styles = (theme: Theme) => ({
   },
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  badgeClasses?: string;
+  iconClasses?: string;
+  inverted?: boolean;
+  className?: string;
+}
+
 class ProBadgeComponent extends Component<IProps> {
   render() {
     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';
 
 import { Theme } from '../../../themes';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  type: string;
-  className?: string;
-  children: ReactNode;
-}
-
 const badgeStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map(style => {
+  Object.keys(theme.styleTypes).map(style =>
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
         color: theme.styleTypes[style].contrast,
         border: theme.styleTypes[style].border,
       },
-    });
-  });
+    }),
+  );
 
   return styles;
 };
@@ -44,6 +38,12 @@ const styles = (theme: Theme) => ({
   ...badgeStyles(theme),
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  type: string;
+  className?: string;
+  children: ReactNode;
+}
+
 class BadgeComponent extends Component<IProps> {
   public static defaultProps = {
     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 @@
+/* eslint-disable no-use-before-define */
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Property } from 'csstype';
@@ -135,7 +136,7 @@ interface IProps extends IFormField, WithStylesProps<typeof styles> {
   label?: string;
   disabled?: boolean;
   id?: string;
-  type?: 'button' | 'reset' | 'submit' | undefined;
+  type?: 'button' | 'reset' | 'submit';
   onClick?: MouseEventHandler<HTMLInputElement>;
   buttonType?: ButtonType;
   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 @@
 import {
+  ChangeEvent,
   Component,
   createRef,
   InputHTMLAttributes,
-  ReactElement,
   RefObject,
 } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { SliderPicker } from 'react-color';
+import { Color, ColorResult, SliderPicker } from 'react-color';
 import { noop } from 'lodash';
 import { FormFields } from '../../../@types/mobx-form.types';
 
 interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields {
-  className?: string;
-  focus?: boolean;
-  onColorChange?: () => void;
-  error: string;
+  onColorChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 @observer
@@ -23,20 +20,13 @@ class ColorPickerInput extends Component<IProps> {
   private inputElement: RefObject<HTMLInputElement> =
     createRef<HTMLInputElement>();
 
-  componentDidMount(): void {
-    const { focus = false } = this.props;
-    if (focus && this.inputElement?.current) {
-      this.inputElement.current.focus();
-    }
+  onChange(color: ColorResult, event: ChangeEvent<HTMLInputElement>): void {
+    const { onColorChange, onChange = noop } = this.props;
+    onColorChange(event);
+    onChange(color.hex);
   }
 
-  onChange({ hex }: { hex: string }): void {
-    const { onColorChange = noop, onChange = noop } = this.props;
-    onColorChange();
-    onChange(hex);
-  }
-
-  render(): ReactElement {
+  render() {
     const {
       id,
       name,
@@ -45,7 +35,6 @@ class ColorPickerInput extends Component<IProps> {
       disabled = false,
       className = null,
       type = 'text',
-      error = '',
       onChange = noop,
     } = this.props;
 
@@ -53,20 +42,14 @@ class ColorPickerInput extends Component<IProps> {
       <div
         className={classnames({
           'franz-form__field': true,
-          'has-error': error,
           [`${className}`]: className,
         })}
         ref={this.inputElement}
       >
         <SliderPicker
-          color={value}
-          onChange={this.onChange.bind(this)}
-          id={`${id}-SliderPicker`}
-          type={type}
+          color={value as Color}
+          onChange={(color, event) => this.onChange(color, event)}
           className="franz-form__input"
-          name={name}
-          placeholder={placeholder}
-          disabled={disabled}
         />
         <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker">
           <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';
 import { Theme } from '../../../themes';
 import { Omit } from '../typings/generic';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  children: ReactNode;
-  level?: number;
-  className?: string;
-  id?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-}
-
 const styles = (theme: Theme) => ({
   headline: {
     fontWeight: 'lighter',
@@ -45,6 +37,14 @@ const styles = (theme: Theme) => ({
   },
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  children: ReactNode;
+  level?: number;
+  className?: string;
+  id?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
 class HeadlineComponent extends Component<IProps> {
   render(): ReactElement {
     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';
 
 import { Theme } from '../../../themes';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  icon: string;
-  size?: number;
-  className?: string;
-}
-
 const styles = (theme: Theme) => ({
   icon: {
     fill: theme.colorText,
   },
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  icon: string;
+  size?: number;
+  className?: string;
+}
+
 class IconComponent extends Component<IProps> {
   render(): ReactElement {
     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 @@
+/* eslint-disable no-use-before-define */
 import { mdiClose } from '@mdi/js';
 import classnames from 'classnames';
 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';
 import { Component } from 'react';
 import injectStyle, { WithStylesProps } from 'react-jss';
 import ReactLoader from 'react-loader';
+import { Theme } from '../../../themes';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  className?: string;
-  color?: string;
-}
-
-const styles = theme => ({
+const styles = (theme: Theme) => ({
   container: {
     position: 'relative',
     height: 60,
@@ -17,6 +13,11 @@ const styles = theme => ({
   color: theme.colorText,
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  className?: string;
+  color?: string;
+}
+
 class LoaderComponent extends Component<IProps> {
   render() {
     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';
 import { IFormField } from '../typings/generic';
 import Wrapper from '../wrapper';
 
-interface IProps
-  extends InputHTMLAttributes<HTMLInputElement>,
-    IFormField,
-    WithStylesProps<typeof styles> {
-  className?: string;
-}
-
 const buttonTransition: string = window?.matchMedia(
   '(prefers-reduced-motion: no-preference)',
 )
@@ -62,6 +55,13 @@ const styles = (theme: Theme) => ({
   },
 });
 
+interface IProps
+  extends InputHTMLAttributes<HTMLInputElement>,
+    IFormField,
+    WithStylesProps<typeof styles> {
+  className?: string;
+}
+
 class Toggle extends Component<IProps> {
   render(): ReactElement {
     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 {
   noMargin?: boolean;
 }
 
-export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+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';
 import { Component, ReactNode } from 'react';
 import injectStyle, { WithStylesProps } from 'react-jss';
 
+// eslint-disable-next-line no-use-before-define
 interface IProps extends WithStylesProps<typeof styles> {
   children: ReactNode;
   className?: string;
   identifier: string;
+  // eslint-disable-next-line react/no-unused-prop-types
   noMargin?: boolean;
 }