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

1 files changed, 10 insertions, 27 deletions

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