6 files changed, 105 insertions, 128 deletions

diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js
deleted file mode 100644
index 55fe97e82..000000000
--- a/src/components/ui/FAB.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Floating Action Button (FAB)
- */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-
-import { oneOrManyChildElements } from '../../prop-types';
-
-@observer
-class Button extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func,
-    type: PropTypes.string,
-    children: oneOrManyChildElements.isRequired,
-    htmlForm: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: null,
-    disabled: false,
-    onClick: () => {},
-    type: 'button',
-    htmlForm: '',
-  };
-
-  element = null;
-
-  render() {
-    const { className, disabled, onClick, type, children, htmlForm } =
-      this.props;
-
-    const buttonProps = {
-      className: classnames({
-        ferdi__fab: true,
-        [`${className}`]: className,
-      }),
-      type,
-    };
-
-    if (disabled) {
-      buttonProps.disabled = true;
-    }
-
-    if (onClick) {
-      buttonProps.onClick = onClick;
-    }
-
-    if (htmlForm) {
-      buttonProps.form = htmlForm;
-    }
-
-    return (
-      // disabling rule as button has type defined in `buttonProps`
-      <button {...buttonProps} type="button">
-        {children}
-      </button>
-    );
-  }
-}
-
-export default Button;
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
new file mode 100644
index 000000000..583c9d556
--- /dev/null
+++ b/src/components/ui/FAB.tsx
@@ -0,0 +1,51 @@
+/**
+ * Floating Action Button (FAB)
+ */
+import { Component, ReactChildren } from 'react';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+type Props = {
+  className: string;
+  disabled: boolean;
+  onClick: () => void;
+  type: string;
+  children: ReactChildren;
+  htmlForm: string;
+};
+
+@observer
+class Button extends Component<Props> {
+  static defaultProps = {
+    disabled: false,
+    onClick: () => {},
+    type: 'button',
+    htmlForm: '',
+  };
+
+  element = null;
+
+  render() {
+    const { className, disabled, onClick, type, children, htmlForm } =
+      this.props;
+
+    const buttonProps = {
+      className: classnames({
+        ferdi__fab: true,
+        [`${className}`]: className,
+      }),
+      type,
+      disabled,
+      onClick,
+      form: htmlForm,
+    };
+
+    return (
+      <button {...buttonProps} type="button">
+        {children}
+      </button>
+    );
+  }
+}
+
+export default Button;
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.tsx
index c51d39a9b..4b25be502 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.tsx
@@ -1,23 +1,21 @@
-import { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
-import Dropzone from 'react-dropzone';
+import Dropzone, { DropzoneRef } from 'react-dropzone';
 import { isWindows } from '../../environment';
 
-@observer
-class ImageUpload extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    multiple: PropTypes.bool,
-    textDelete: PropTypes.string.isRequired,
-    textUpload: PropTypes.string.isRequired,
-  };
+type Props = {
+  field: typeof Field;
+  className: string;
+  multiple: boolean;
+  textDelete: string;
+  textUpload: string;
+};
 
+@observer
+class ImageUpload extends Component<Props> {
   static defaultProps = {
-    className: null,
     multiple: false,
   };
 
@@ -25,7 +23,7 @@ class ImageUpload extends Component {
     path: null,
   };
 
-  dropzoneRef = null;
+  dropzoneRef: DropzoneRef | null = null;
 
   onDrop(acceptedFiles) {
     const { field } = this.props;
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.tsx
index 71c6b9552..1173c11e7 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.tsx
@@ -1,31 +1,22 @@
-import { Component } from 'react';
+import { Component, ReactChildren } from 'react';
 import { observer, inject } from 'mobx-react';
-import PropTypes from 'prop-types';
 import Loader from 'react-loader';
 
-import { oneOrManyChildElements } from '../../prop-types';
+import { FerdiStores } from '../../stores.types';
+
+type Props = {
+  children: ReactChildren;
+  loaded: boolean;
+  className: string;
+  color: string;
+  stores: FerdiStores;
+};
 
 @inject('stores')
 @observer
-class LoaderComponent extends Component {
-  static propTypes = {
-    children: oneOrManyChildElements,
-    loaded: PropTypes.bool,
-    className: PropTypes.string,
-    color: PropTypes.string,
-    stores: PropTypes.shape({
-      settings: PropTypes.shape({
-        app: PropTypes.shape({
-          accentColor: PropTypes.string.isRequired,
-        }).isRequired,
-      }).isRequired,
-    }).isRequired,
-  };
-
+class LoaderComponent extends Component<Props> {
   static defaultProps = {
-    children: null,
     loaded: false,
-    className: '',
     color: 'ACCENT',
   };
 
@@ -40,7 +31,6 @@ class LoaderComponent extends Component {
     return (
       <Loader
         loaded={loaded}
-        // lines={10}
         width={4}
         scale={0.6}
         color={color}
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.tsx
index 5354dbfe1..594ea70e4 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.tsx
@@ -1,20 +1,18 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 
-@observer
-class Radio extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    focus: PropTypes.bool,
-    showLabel: PropTypes.bool,
-  };
+type Props = {
+  field: typeof Field;
+  className: string;
+  focus: boolean;
+  showLabel: boolean;
+};
 
+@observer
+class Radio extends Component<Props> {
   static defaultProps = {
-    className: null,
     focus: false,
     showLabel: true,
   };
@@ -28,6 +26,7 @@ class Radio extends Component {
   }
 
   focus() {
+    // @ts-expect-error Object is possibly 'null'.
     this.inputElement.focus();
   }
 
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.tsx
index 2e8793a2b..af55b0e11 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.tsx
@@ -1,23 +1,22 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { ChangeEvent, Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
 
-@observer
-class SearchInput extends Component {
-  static propTypes = {
-    value: PropTypes.string,
-    placeholder: PropTypes.string,
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    onReset: PropTypes.func,
-    name: PropTypes.string,
-    throttle: PropTypes.bool,
-    throttleDelay: PropTypes.number,
-    autoFocus: PropTypes.bool,
-  };
+type Props = {
+  value: string;
+  placeholder: string;
+  className: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onReset: () => void;
+  name: string;
+  throttle: boolean;
+  throttleDelay: number;
+  autoFocus: boolean;
+};
 
+@observer
+class SearchInput extends Component<Props> {
   static defaultProps = {
     value: '',
     placeholder: '',
@@ -32,7 +31,7 @@ class SearchInput extends Component {
 
   input = null;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -49,24 +48,27 @@ class SearchInput extends Component {
     const { autoFocus } = this.props;
 
     if (autoFocus) {
+      // @ts-expect-error Object is possibly 'null'.
       this.input.focus();
     }
   }
 
-  onChange(e) {
+  onChange(e: ChangeEvent<HTMLInputElement>) {
     const { throttle, onChange } = this.props;
     const { value } = e.target;
     this.setState({ value });
 
     if (throttle) {
       e.persist();
+      // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'.
       this.throttledOnChange(value);
     } else {
+      // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'.
       onChange(value);
     }
   }
 
-  throttledOnChange(e) {
+  throttledOnChange(e: ChangeEvent<HTMLInputElement>) {
     const { onChange } = this.props;
 
     onChange(e);
@@ -81,6 +83,7 @@ class SearchInput extends Component {
 
   render() {
     const { className, name, placeholder } = this.props;
+    // @ts-expect-error Property 'value' does not exist on type 'Readonly<{}>'.
     const { value } = this.state;
 
     return (
@@ -94,6 +97,7 @@ class SearchInput extends Component {
             value={value}
             onChange={e => this.onChange(e)}
             ref={ref => {
+              // @ts-expect-error Type 'HTMLInputElement | null' is not assignable to type 'null'.
               this.input = ref;
             }}
           />