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>

8 files changed, 32 insertions, 20 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 6fa3adf92..c0e6b982b 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -7,14 +7,19 @@ import { TitleBar } from 'electron-react-titlebar';
 import Link from '../ui/Link';
 import InfoBar from '../ui/InfoBar';
 
-import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types';
+import {
+  oneOrManyChildElements,
+  globalError as globalErrorPropType,
+} from '../../prop-types';
 import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import { GITHUB_FERDI_URL } from '../../config';
 
-export default @observer class AuthLayout extends Component {
+export default
+@observer
+class AuthLayout extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
     error: globalErrorPropType.isRequired,
@@ -30,7 +35,7 @@ export default @observer class AuthLayout extends Component {
 
   state = {
     shouldShowAppUpdateInfoBar: true,
-  }
+  };
 
   static defaultProps = {
     nextAppReleaseVersion: null,
@@ -57,12 +62,15 @@ export default @observer class AuthLayout extends Component {
 
     return (
       <>
-        {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />}
+        {isWindows && !isFullScreen && (
+          <TitleBar
+            menu={window.ferdi.menu.template}
+            icon="assets/images/logo.svg"
+          />
+        )}
         <div className="auth">
           {!isOnline && (
-            <InfoBar
-              type="warning"
-            >
+            <InfoBar type="warning">
               <span className="mdi mdi-flash" />
               {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
             </InfoBar>
@@ -95,7 +103,11 @@ export default @observer class AuthLayout extends Component {
             })}
           </div>
           {/* </div> */}
-          <Link to={`${GITHUB_FERDI_URL}/ferdi`} className="auth__adlk" target="_blank">
+          <Link
+            to={`${GITHUB_FERDI_URL}/ferdi`}
+            className="auth__adlk"
+            target="_blank"
+          >
             <img src="./assets/images/adlk.svg" alt="" />
           </Link>
         </div>
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 0dedd825a..7bab80280 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -100,7 +100,7 @@ export default @observer class ChangeServer extends Component {
     const { intl } = this.context;
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <h1>{intl.formatMessage(messages.headline)}</h1>
           {form.$('server').value === this.franzServer
           && (
@@ -113,7 +113,7 @@ export default @observer class ChangeServer extends Component {
           && (
             <Input
               placeholder="Custom Server"
-              onChange={e => this.submit(e)}
+              onChange={(e) => this.submit(e)}
               field={form.$('customServer')}
             />
           )}
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index 1fdbea595..2ad8a2409 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -102,7 +102,7 @@ export default @observer class Locked extends Component {
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <img
             src="./assets/images/logo.svg"
             className="auth__logo"
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 52b09eab6..9e6a8d046 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -135,7 +135,7 @@ export default @inject('actions') @observer class Login extends Component {
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <img
             src="./assets/images/logo.svg"
             className="auth__logo"
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index ad34e39af..eafc48502 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -86,7 +86,7 @@ export default @observer class Password extends Component {
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <img
             src="./assets/images/logo.svg"
             className="auth__logo"
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index e03cf9101..bd9069eb7 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -34,7 +34,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     width: '500px !important',
     textAlign: 'center',
@@ -161,7 +161,7 @@ class SetupAssistant extends Component {
     const sanitizedWorkspace = slackWorkspace.trim().replace(/^https?:\/\//, '');
 
     if (sanitizedWorkspace) {
-      const index = services.findIndex(s => s.id === SLACK_ID);
+      const index = services.findIndex((s) => s.id === SLACK_ID);
 
       if (index === -1) {
         const newServices = services;
@@ -215,11 +215,11 @@ class SetupAssistant extends Component {
               <button
                 className={classnames({
                   [classes.serviceContainer]: true,
-                  [classes.selected]: this.state.services.findIndex(s => s.id === id) !== -1,
+                  [classes.selected]: this.state.services.findIndex((s) => s.id === id) !== -1,
                 })}
                 key={id}
                 onClick={() => {
-                  const index = this.state.services.findIndex(s => s.id === id);
+                  const index = this.state.services.findIndex((s) => s.id === id);
                   if (index === -1) {
                     if (id === SLACK_ID) {
                       this.setState({ isSlackModalOpen: true });
@@ -283,7 +283,7 @@ class SetupAssistant extends Component {
               <Input
                 suffix=".slack.com"
                 placeholder="workspace-url"
-                onChange={e => this.setState({ slackWorkspace: e.target.value })}
+                onChange={(e) => this.setState({ slackWorkspace: e.target.value })}
                 value={slackWorkspace}
               />
               <div className={classes.modalActionContainer}>
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 140867ea1..411b6697b 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -138,7 +138,7 @@ export default @inject('actions') @observer class Signup extends Component {
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
-          <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
             <img
               src="./assets/images/logo.svg"
               className="auth__logo"
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 5f2fac64b..cb522e26e 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -84,7 +84,7 @@ export default @inject('actions') @observer class Login extends Component {
           </Link>
         </div>
         <div className="welcome__featured-services">
-          {recipes.map(recipe => (
+          {recipes.map((recipe) => (
             <div
               key={recipe.id}
               className="welcome__featured-service"