Transform JSX components to TSX (#755)

* color picker types
* Import
* SetupAssistant
* Services & appear
* ServiceWebView
* SettingsLayout
* ImportantScreen
* WorkspaceDrawer
* SetupAssistant

* chore: update vscode settings
* chore: removed stale Import screen component & its tree

3 files changed, 104 insertions, 107 deletions

diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx
deleted file mode 100644
index da1fffb71..000000000
--- a/src/components/ui/ColorPickerInput.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  Component,
-  createRef,
-  RefObject,
-} from 'react';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import { SliderPicker } from 'react-color';
-import { noop } from 'lodash';
-import { Field } from '../../@types/mobx-form.types';
-
-interface IProps {
-  field: Field;
-  className?: string;
-  focus?: boolean;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-}
-
-// TODO - [TS DEBT] check if field can be spread instead of having it single field attribute in interface
-@observer
-class ColorPickerInput extends Component<IProps> {
-  private inputElement: RefObject<HTMLInputElement> =
-    createRef<HTMLInputElement>();
-
-  componentDidMount() {
-    const { focus = false } = this.props;
-    if (focus) {
-      this.focus();
-    }
-  }
-
-  onChange(e: ChangeEvent<HTMLInputElement>) {
-    const { field, onChange = noop } = this.props;
-
-    onChange(e);
-    if (field.onChange) {
-      field.onChange(e);
-    }
-  }
-
-  focus() {
-    if (this.inputElement && this.inputElement.current) {
-      this.inputElement.current.focus();
-    }
-  }
-
-  handleChangeComplete = (color: { hex: string }) => {
-    const { field } = this.props;
-    field.value = color.hex;
-  };
-
-  render() {
-    const { field, className = null } = this.props;
-
-    let { type } = field;
-    type = 'text';
-
-    return (
-      <div
-        className={classnames({
-          'franz-form__field': true,
-          'has-error': field.error,
-          [`${className}`]: className,
-        })}
-      >
-        <SliderPicker
-          color={field.value}
-          onChangeComplete={this.handleChangeComplete}
-          id={field.id}
-          type={type}
-          className="franz-form__input"
-          name={field.name}
-          value={field.value}
-          placeholder={field.placeholder}
-          onBlur={field.onBlur}
-          onFocus={field.onFocus}
-          ref={this.inputElement}
-          disabled={field.disabled}
-        />
-        <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker">
-          <input
-            id={field.id}
-            type={type}
-            className="franz-form__input"
-            name={field.name}
-            value={field.value}
-            placeholder={field.placeholder}
-            onChange={e => this.onChange(e)}
-            onBlur={field.onBlur}
-            onFocus={field.onFocus}
-            ref={this.inputElement}
-            disabled={field.disabled}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default ColorPickerInput;
diff --git a/src/components/ui/colorPickerInput/index.tsx b/src/components/ui/colorPickerInput/index.tsx
new file mode 100644
index 000000000..9bab6efec
--- /dev/null
+++ b/src/components/ui/colorPickerInput/index.tsx
@@ -0,0 +1,88 @@
+import {
+  Component,
+  createRef,
+  InputHTMLAttributes,
+  ReactElement,
+  RefObject,
+} from 'react';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { 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;
+}
+
+@observer
+class ColorPickerInput extends Component<IProps> {
+  private inputElement: RefObject<HTMLInputElement> =
+    createRef<HTMLInputElement>();
+
+  componentDidMount(): void {
+    const { focus = false } = this.props;
+    if (focus && this.inputElement && this.inputElement.current) {
+      this.inputElement.current.focus();
+    }
+  }
+
+  onChange({ hex }: { hex: string }): void {
+    const { onColorChange = noop, onChange = noop } = this.props;
+    onColorChange();
+    onChange(hex);
+  }
+
+  render(): ReactElement {
+    const {
+      id,
+      name,
+      value = '',
+      placeholder = '',
+      disabled = false,
+      className = null,
+      type = 'text',
+      error = '',
+      onChange = noop,
+    } = this.props;
+
+    return (
+      <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}
+          className="franz-form__input"
+          name={name}
+          placeholder={placeholder}
+          disabled={disabled}
+        />
+        <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker">
+          <input
+            id={`${id}-Input`}
+            type={type}
+            className="franz-form__input"
+            name={name}
+            value={value}
+            placeholder={placeholder}
+            onChange={onChange}
+            disabled={disabled}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ColorPickerInput;
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index bf097b6a6..2076f6ba6 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -5,11 +5,22 @@ interface IProps {
   children: ReactNode;
   transitionName?: string;
   className?: string;
+  transitionAppear?: boolean;
+  transitionLeave?: boolean;
+  transitionAppearTimeout?: number;
+  transitionEnterTimeout?: number;
+  transitionLeaveTimeout?: number;
 }
+
 const Appear = ({
   children,
   transitionName = 'fadeIn',
   className = '',
+  transitionAppear = true,
+  transitionLeave = true,
+  transitionAppearTimeout = 1500,
+  transitionEnterTimeout = 1500,
+  transitionLeaveTimeout = 1500,
 }: IProps): ReactElement | null => {
   const [mounted, setMounted] = useState(false);
 
@@ -24,11 +35,11 @@ const Appear = ({
   return (
     <CSSTransitionGroup
       transitionName={transitionName}
-      transitionAppear
-      transitionLeave
-      transitionAppearTimeout={1500}
-      transitionEnterTimeout={1500}
-      transitionLeaveTimeout={1500}
+      transitionAppear={transitionAppear}
+      transitionLeave={transitionLeave}
+      transitionAppearTimeout={transitionAppearTimeout}
+      transitionEnterTimeout={transitionEnterTimeout}
+      transitionLeaveTimeout={transitionLeaveTimeout}
       className={className}
     >
       {children}