chore: upgrade react to latest (#2030)

16 files changed, 25 insertions, 41 deletions

diff --git a/packages/forms/package.json b/packages/forms/package.json
index 5676ed6c3..f073221bc 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -29,11 +29,5 @@
     "csstype": "3.0.8",
     "react-loader": "2.4.7"
   },
-  "peerDependencies": {
-    "classnames": "2.3.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-jss": "8.6.1"
-  },
   "gitHead": "00db2bddccb8bb8ad7d29b8d032876c798b8bbf3"
 }
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index c9ae47d55..d9f372c4b 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -1,7 +1,7 @@
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Property } from 'csstype';
-import React, { Component } from 'react';
+import { Component, MouseEvent } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import Loader from 'react-loader';
 
@@ -22,9 +22,7 @@ interface IProps extends IFormField, IWithStyle {
   id?: string;
   type?: 'button' | 'reset' | 'submit' | undefined;
   onClick: (
-    event:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLAnchorElement>,
+    event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
   ) => void;
   buttonType?: ButtonType;
   stretch?: boolean;
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
index 243321d97..8439bfc8b 100644
--- a/packages/forms/src/error/index.tsx
+++ b/packages/forms/src/error/index.tsx
@@ -1,5 +1,5 @@
 import { Classes } from 'jss';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import injectSheet from 'react-jss';
 
 import styles from './styles';
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index 41751710a..0b16fe688 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -1,7 +1,7 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import React, { Component, createRef } from 'react';
+import { Component, createRef, InputHTMLAttributes } from 'react';
 import injectSheet from 'react-jss';
 
 import { IFormField, IWithStyle } from '../typings/generic';
@@ -18,7 +18,7 @@ interface IData {
 }
 
 interface IProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
+  extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
     IWithStyle {
   focus?: boolean;
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index ad503b785..4d86f23f7 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -1,15 +1,13 @@
 import classnames from 'classnames';
 import { Classes } from 'jss';
-import React, { Component } from 'react';
+import { Component, LabelHTMLAttributes } from 'react';
 import injectSheet from 'react-jss';
 
 import { IFormField } from '../typings/generic';
 
 import styles from './styles';
 
-interface ILabel
-  extends IFormField,
-    React.LabelHTMLAttributes<HTMLLabelElement> {
+interface ILabel extends IFormField, LabelHTMLAttributes<HTMLLabelElement> {
   classes: Classes;
   isRequired: boolean;
 }
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 7806baa2a..d965d3c93 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -5,7 +5,7 @@ import {
 } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import React, { Component, createRef } from 'react';
+import { ChangeEvent, Component, createRef } from 'react';
 import injectStyle from 'react-jss';
 
 import { IFormField, IWithStyle } from '../typings/generic';
@@ -33,7 +33,7 @@ interface IProps extends IFormField, IWithStyle {
   name: string;
   options: IOptions;
   value: string;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   showSearch: boolean;
   data: IData;
 }
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx
index 2d89d1c9f..1b16698eb 100644
--- a/packages/forms/src/textarea/index.tsx
+++ b/packages/forms/src/textarea/index.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { Component, createRef } from 'react';
+import { Component, createRef, TextareaHTMLAttributes } from 'react';
 import injectSheet from 'react-jss';
 
 import { IFormField, IWithStyle } from '../typings/generic';
@@ -15,7 +15,7 @@ interface IData {
 }
 
 interface IProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
     IFormField,
     IWithStyle {
   focus?: boolean;
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index bdf1d22cf..f9ef5775a 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import { Property } from 'csstype';
-import React, { Component } from 'react';
+import { Component, InputHTMLAttributes } from 'react';
 import injectStyle from 'react-jss';
 
 import { IFormField, IWithStyle } from '../typings/generic';
@@ -11,7 +11,7 @@ import { Label } from '../label';
 import { Wrapper } from '../wrapper';
 
 interface IProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
+  extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
     IWithStyle {
   className?: string;
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index 3ae551e2c..ffcd6fe0b 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -1,10 +1,10 @@
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component, ReactNode } from 'react';
 import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
   identifier: string;
   noMargin?: boolean;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 23af393f5..0de76a98b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -27,11 +27,5 @@
     "@meetfranz/theme": "file:../theme",
     "react-loader": "2.4.7"
   },
-  "peerDependencies": {
-    "classnames": "2.3.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-jss": "8.6.1"
-  },
   "gitHead": "254da30f801169fac376bda1439b46cabbb491ad"
 }
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 63d5d673a..be7ed8e58 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -1,6 +1,6 @@
 import { mdiStar } from '@mdi/js';
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import injectStyle from 'react-jss';
 
 import { Badge, Icon } from '..';
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx
index 5dd735879..a8f3ebcbf 100644
--- a/packages/ui/src/badge/index.tsx
+++ b/packages/ui/src/badge/index.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component, ReactNode } from 'react';
 import injectStyle from 'react-jss';
 
 import { Theme } from '../../../theme';
@@ -8,7 +8,7 @@ import { IWithStyle } from '../typings/generic';
 interface IProps extends IWithStyle {
   type: string;
   className?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const badgeStyles = (theme: Theme) => {
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx
index bf3d4418c..b534a6298 100644
--- a/packages/ui/src/headline/index.tsx
+++ b/packages/ui/src/headline/index.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component, createElement, ReactNode } from 'react';
 import injectStyle from 'react-jss';
 
 import { Theme } from '../../../theme';
@@ -8,7 +8,7 @@ import { IWithStyle, Omit } from '../typings/generic';
 interface IProps extends IWithStyle {
   level?: number;
   className?: string;
-  children: string | React.ReactNode;
+  children: string | ReactNode;
   id?: string;
 }
 
@@ -39,7 +39,7 @@ class HeadlineComponent extends Component<IProps> {
   render() {
     const { classes, level, className, children, id } = this.props;
 
-    return React.createElement(
+    return createElement(
       `h${level}`,
       {
         id,
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx
index b644a9234..9753b399c 100644
--- a/packages/ui/src/icon/index.tsx
+++ b/packages/ui/src/icon/index.tsx
@@ -1,6 +1,6 @@
 import MdiIcon from '@mdi/react';
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import injectStyle from 'react-jss';
 
 import { Theme } from '../../../theme';
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 88cfdb620..7bad4a1f2 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,6 +1,6 @@
 import { mdiClose } from '@mdi/js';
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component, ReactNode } from 'react';
 import injectStyle from 'react-jss';
 
 import { Icon } from '..';
@@ -16,7 +16,7 @@ interface IProps extends IWithStyle {
   ctaOnClick?: () => void;
   ctaLabel?: string;
   ctaLoading?: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
   className: string;
 }
 
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index 244aa9dc9..0607bd48b 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import ReactLoader from 'react-loader';