- updated classnames to 2.3.1 to use added type definitions

- remove stub type definitions from package.json
- set 'noImplicitAny' false until jss and react-jss packages are upgraded to use own type definitions
- add missing csstype to package/forms and update code to v3

5 files changed, 22 insertions, 29 deletions

diff --git a/packages/forms/package.json b/packages/forms/package.json
index a5b8752aa..29e19b8c7 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -26,6 +26,7 @@
     "@mdi/js": "^3.3.92",
     "@mdi/react": "^1.1.0",
     "@meetfranz/theme": "file:../theme",
+    "csstype": "^3.0.8",
     "react-html-attributes": "^1.4.3",
     "react-loader": "2.4.7"
   },
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index b81154a43..8eba17415 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 { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 import React, { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import Loader from 'react-loader';
@@ -14,7 +14,7 @@ interface IProps extends IFormField, IWithStyle {
   className?: string;
   disabled?: boolean;
   id?: string;
-  type?: "button" | "reset" | "submit" | undefined;
+  type?: 'button' | 'reset' | 'submit' | undefined;
   onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
   buttonType?: ButtonType;
   stretch?: boolean;
@@ -34,13 +34,13 @@ const styles = (theme: Theme) => ({
     borderRadius: theme.borderRadiusSmall,
     border: 'none',
     display: 'inline-flex',
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative' as CSS.Property.Position,
     transition: 'background .5s, opacity 0.3s',
-    textAlign: 'center' as CSS.TextAlignProperty,
+    textAlign: 'center' as CSS.Property.TextAlign,
     outline: 'none',
     alignItems: 'center',
     padding: 0,
-    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
+    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
     // height: theme.buttonHeight,
@@ -113,7 +113,7 @@ const styles = (theme: Theme) => ({
     opacity: theme.inputDisabledOpacity,
   },
   loader: {
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative' as CSS.Property.Position,
     width: 20,
     height: 18,
     zIndex: 9999,
@@ -123,9 +123,9 @@ const styles = (theme: Theme) => ({
     height: 20,
     overflow: 'hidden',
     transition: 'all 0.3s',
-    marginLeft: (props: IProps): number => !props.busy ? 10 : 20,
-    marginRight: (props: IProps): number => !props.busy ? -10 : -20,
-    position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit',
+    marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
+    marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
+    position: (props: IProps): CSS.Property.Position => props.stretch ? 'absolute' : 'inherit',
   },
   icon: {
     margin: [1, 10, 0, -5],
@@ -155,7 +155,7 @@ class ButtonComponent extends Component<IProps> {
       if (this.props.busy) {
         setTimeout(() => {
           this.setState({ busy: nextProps.busy });
-        },         300);
+        }, 300);
       } else {
         this.setState({ busy: nextProps.busy });
       }
@@ -180,9 +180,7 @@ class ButtonComponent extends Component<IProps> {
       target,
     } = this.props;
 
-    const {
-      busy,
-    } = this.state;
+    const { busy } = this.state;
 
     let showLoader = false;
     if (loaded) {
@@ -207,19 +205,13 @@ class ButtonComponent extends Component<IProps> {
           )}
         </div>
         <div className={classes.label}>
-          {icon && (
-            <Icon
-              path={icon}
-              size={0.8}
-              className={classes.icon}
-            />
-          )}
+          {icon && <Icon path={icon} size={0.8} className={classes.icon} />}
           {label}
         </div>
       </>
     );
 
-    let wrapperComponent = null;
+    let wrapperComponent: JSX.Element;
 
     if (!href) {
       wrapperComponent = (
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
index e2ab30a4f..99b0685a8 100644
--- a/packages/forms/src/input/styles.ts
+++ b/packages/forms/src/input/styles.ts
@@ -1,5 +1,5 @@
 import { Theme } from '@meetfranz/theme';
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 
 const prefixStyles = (theme: Theme) => ({
   background: theme.inputPrefixBackground,
@@ -13,7 +13,7 @@ export default (theme: Theme) => ({
   label: {
     '& > div': {
       marginTop: 5,
-    }
+    },
   },
   disabled: {
     opacity: theme.inputDisabledOpacity,
@@ -85,7 +85,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    boxSizing: 'border-box' as CSS.Property.BoxSizing,
     display: 'flex',
     height: theme.inputHeight,
     order: 1,
diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts
index c1cbd76a5..f1fb09367 100644
--- a/packages/forms/src/textarea/styles.ts
+++ b/packages/forms/src/textarea/styles.ts
@@ -1,5 +1,5 @@
 import { Theme } from '@meetfranz/theme';
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 
 export default (theme: Theme) => ({
   label: {
@@ -42,7 +42,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    boxSizing: 'border-box' as CSS.Property.BoxSizing,
     display: 'flex',
     order: 1,
     width: '100%',
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index ea335f281..50716450b 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
@@ -22,7 +22,7 @@ const styles = (theme: Theme) => ({
     background: theme.toggleBackground,
     borderRadius: theme.borderRadius,
     height: theme.toggleHeight,
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative' as CSS.Property.Position,
     width: theme.toggleWidth,
   },
   button: {
@@ -33,7 +33,7 @@ const styles = (theme: Theme) => ({
     height: theme.toggleHeight - 2,
     left: 1,
     top: 1,
-    position: 'absolute' as CSS.PositionProperty,
+    position: 'absolute' as CSS.Property.Position,
     transition: 'all .5s',
   },
   buttonActive: {