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

1 files changed, 88 insertions, 0 deletions

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;