chore: migrate from tslint to @typescript-eslint (#1706)

- update .eslintrc to work for .js and .ts
- update devDependencies
- lint properly both root /src and nested /packages
- update webhint recommended setting for tsconfig.json to shrink output
- Manage all eslint rules from the repo root
- escape single quotes in scripts to please windows build

Co-authored-by: Vijay A <avijayr@protonmail.com>

7 files changed, 35 insertions, 69 deletions

diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 73db47068..63d5d673a 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { Badge, Icon } from '../';
+import { Badge, Icon } from '..';
 import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
@@ -34,13 +34,8 @@ const styles = (theme: Theme) => ({
 
 class ProBadgeComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      badgeClasses,
-      iconClasses,
-      inverted,
-      className,
-    } = this.props;
+    const { classes, badgeClasses, iconClasses, inverted, className } =
+      this.props;
 
     return (
       <Badge
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx
index 0ba383673..5dd735879 100644
--- a/packages/ui/src/badge/index.tsx
+++ b/packages/ui/src/badge/index.tsx
@@ -13,7 +13,7 @@ interface IProps extends IWithStyle {
 
 const badgeStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map((style) => {
+  Object.keys(theme.styleTypes).map(style => {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -51,12 +51,7 @@ class BadgeComponent extends Component<IProps> {
   };
 
   render() {
-    const {
-      classes,
-      children,
-      type,
-      className,
-    } = this.props;
+    const { classes, children, type, className } = this.props;
 
     return (
       <div
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx
index 11b6125cd..bf3d4418c 100644
--- a/packages/ui/src/headline/index.tsx
+++ b/packages/ui/src/headline/index.tsx
@@ -37,13 +37,7 @@ const styles = (theme: Theme) => ({
 
 class HeadlineComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      level,
-      className,
-      children,
-      id,
-    } = this.props;
+    const { classes, level, className, children, id } = this.props;
 
     return React.createElement(
       `h${level}`,
@@ -63,7 +57,12 @@ class HeadlineComponent extends Component<IProps> {
 
 const Headline = injectStyle(styles)(HeadlineComponent);
 
-const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => <Headline level={level} {...props}>{props.children}</Headline>;
+const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) =>
+  (
+    <Headline level={level} {...props}>
+      {props.children}
+    </Headline>
+  );
 
 export const H1 = createH(1);
 export const H2 = createH(2);
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx
index ed55eccfe..b644a9234 100644
--- a/packages/ui/src/icon/index.tsx
+++ b/packages/ui/src/icon/index.tsx
@@ -24,12 +24,7 @@ class IconComponent extends Component<IProps> {
   };
 
   render() {
-    const {
-      classes,
-      icon,
-      size,
-      className,
-    } = this.props;
+    const { classes, icon, size, className } = this.props;
 
     if (!icon) {
       console.warn('No Icon specified');
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index bd62fc4ea..961262001 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -3,8 +3,8 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
+import { Icon } from '..';
 import { Theme } from '../../../theme';
-import { Icon } from '../';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -27,7 +27,7 @@ interface IState {
 
 const buttonStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map((style) => {
+  Object.keys(theme.styleTypes).map(style => {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -73,18 +73,21 @@ const styles = (theme: Theme) => ({
     marginRight: 10,
   },
   close: {
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginRight: -5,
     border: 0,
     background: 'none',
   },
   cta: {
-    borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    borderColor: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     borderRadius: theme.borderRadiusSmall,
     borderStyle: 'solid',
     borderWidth: 1,
     background: 'none',
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginLeft: 15,
     padding: [4, 10],
     fontSize: theme.uiFontSize,
@@ -113,9 +116,7 @@ class InfoboxComponent extends Component<IProps, IState> {
   };
 
   dismiss() {
-    const {
-      onDismiss,
-    } = this.props;
+    const { onDismiss } = this.props;
 
     this.setState({
       isDismissing: true,
@@ -129,7 +130,7 @@ class InfoboxComponent extends Component<IProps, IState> {
       this.setState({
         dismissed: true,
       });
-    },         3000);
+    }, 3000);
   }
 
   componentWillUnmount(): void {
@@ -144,26 +145,24 @@ class InfoboxComponent extends Component<IProps, IState> {
       icon,
       type,
       ctaLabel,
-      ctaLoading,
       ctaOnClick,
       dismissable,
       className,
     } = this.props;
 
-    const {
-      isDismissing,
-      dismissed,
-    } = this.state;
+    const { isDismissing, dismissed } = this.state;
 
     if (dismissed) {
       return null;
     }
 
     return (
-      <div className={classnames({
-        [classes.wrapper]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [classes.wrapper]: true,
+          [`${className}`]: className,
+        })}
+      >
         <div
           className={classnames({
             [classes.infobox]: true,
@@ -172,18 +171,10 @@ class InfoboxComponent extends Component<IProps, IState> {
           })}
           data-type="franz-infobox"
         >
-          {icon && (
-            <Icon icon={icon} className={classes.icon} />
-          )}
-          <div className={classes.content}>
-            {children}
-          </div>
+          {icon && <Icon icon={icon} className={classes.icon} />}
+          <div className={classes.content}>{children}</div>
           {ctaLabel && (
-            <button
-              className={classes.cta}
-              onClick={ctaOnClick}
-              type="button"
-            >
+            <button className={classes.cta} onClick={ctaOnClick} type="button">
               {ctaLabel}
             </button>
           )}
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index e2701a8e9..244aa9dc9 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import ReactLoader from 'react-loader';
 
-import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -11,7 +10,7 @@ interface IProps extends IWithStyle {
   color?: string;
 }
 
-const styles = (theme: Theme) => ({
+const styles = () => ({
   container: {
     position: 'relative',
     height: 60,
@@ -20,12 +19,7 @@ const styles = (theme: Theme) => ({
 
 class LoaderComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      className,
-      color,
-      theme,
-    } = this.props;
+    const { classes, className, color, theme } = this.props;
 
     return (
       <div
diff --git a/packages/ui/tslint.json b/packages/ui/tslint.json
deleted file mode 100644
index 0946f2096..000000000
--- a/packages/ui/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../tslint.json"
-}