Upgrade eslint configuration and apply some rules on code

.eslintrc.js

@@ -1,35 +1,35 @@
-{
-    "parser": "babel-eslint",
-    "plugins": [
-        "react"
-    ],
-
-    "ecmaFeatures": {
-        "jsx": true,
-        "modules": true,
-        "classes": true,
-        "defaultParams": true,
-        "destructuring": true,
-        "spread": true,
-        "arrowFunctions": true,
-        "blockBindings": true,
-        "objectLiteralComputedProperties": true,
-        "objectLiteralDuplicateProperties": true,
-        "objectLiteralShorthandMethods": true,
-        "objectLiteralShorthandProperties": true,
-        "restParams": true,
-        "superInFunctions": true,
-        "templateStrings": true,
-        "experimentalObjectRestSpread": true
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 2018,
+        ecmaFeatures: {
+            jsx: true,
+        },
+        project: './tsconfig.json',
     },
 
-    "env": {
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
+
+    env: {
         "browser": true,
         "commonjs": true,
         "es6": true
     },
 
-    "extends": "eslint:recommended",
+    plugins: [
+        '@typescript-eslint',
+    ],
+
+    extends: [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:@typescript-eslint/recommended',
+    ],
 
     // @see: http://eslint.org/docs/rules/
     "rules": {
@@ -114,7 +114,7 @@
         "no-path-concat": "warn",
 
         // stylistic
-        "array-bracket-spacing": "error",
+        "array-bracket-spacing": "off", // disable because we want spaces on destructured arrays
         "block-spacing": ["error", "never"],
         "brace-style": ["error", "1tbs", {"allowSingleLine": true}],
         "comma-spacing": "error",
@@ -180,13 +180,18 @@
         "react/display-name": "warn",
         "react/forbid-prop-types": "warn",
         "react/jsx-boolean-value": "warn",
-        "react/jsx-closing-bracket-location": "warn",
+        'react/jsx-closing-bracket-location': ['warn', {
+            nonEmpty: 'line-aligned',
+            selfClosing: 'after-props',
+        }],
         "react/jsx-curly-spacing": "warn",
         "react/jsx-handler-names": ["warn", {"eventHandlerPrefix": "on", "eventHandlerPropPrefix": "on"}],
         "react/jsx-indent-props": "warn",
         "react/jsx-key": "warn",
-        "react/jsx-max-props-per-line": ["warn", {"maximum": 3}],
-        "react/jsx-no-bind": "warn",
+        'react/jsx-max-props-per-line': 'off',
+        "react/jsx-no-bind": ['error', {
+            allowArrowFunctions: true,
+        }],
         "react/jsx-no-duplicate-props": "warn",
         "react/jsx-no-literals": "off",
         "react/jsx-no-undef": "warn",
@@ -205,9 +210,14 @@
         "react/no-string-refs": "warn",
         "react/no-unknown-property": "warn",
         "react/prefer-es6-class": "warn",
-        "react/prop-types": "warn",
+        "react/prop-types": "off", // disable in favor of typescript
         "react/react-in-jsx-scope": "off",
         "react/self-closing-comp": "warn",
-        "react/sort-comp": ["warn", {"order": ["lifecycle", "render", "everything-else"]}]
-    }
-}
+        "react/sort-comp": ["warn", {"order": ["lifecycle", "render", "everything-else"]}],
+
+        // TypeScript
+        '@typescript-eslint/array-type': ['error', 'generic'],
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+    },
+};

package.json

@@ -16,7 +16,7 @@
     "homepage": "https://gitlab.com/elyby/email-renderer#README",
     "scripts": {
         "start": "webpack-dev-server --mode=development --progress --colors",
-        "lint": "eslint ./src",
+        "lint": "eslint",
         "i18n:collect": "./scripts/i18n-collect/index.js",
         "i18n:pull": "node scripts/i18n-crowdin/index.js pull",
         "i18n:push": "node scripts/i18n-crowdin/index.js push",
@@ -37,11 +37,12 @@
         "@types/react": "^16.8.17",
         "@types/react-intl": "^2.3.17",
         "@types/webpack-env": "^1.13.9",
-        "babel-eslint": "^6.0.0",
+        "@typescript-eslint/eslint-plugin": "^1.9.0",
+        "@typescript-eslint/parser": "^1.9.0",
         "babel-loader": "^8.0.5",
         "babel-preset-react-hot": "^1.0.5",
-        "eslint": "^3.1.1",
-        "eslint-plugin-react": "^6.0.0",
+        "eslint": "^5.16.0",
+        "eslint-plugin-react": "^7.13.0",
         "extended-translations-loader": "file:webpack-utils/extended-translations-loader",
         "file-loader": "^3.0.1",
         "html-webpack-plugin": "^3.2.0",

src/App.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 import React, { FunctionComponent } from 'react';
 import { IntlProvider, addLocaleData } from 'react-intl';
 

src/components/BaseLayout.tsx

@@ -4,8 +4,7 @@ import styles from './styles';
 
 import { Table } from 'components/table';
 
-const BaseLayout: FunctionComponent = ({ children }) => {
-    return (
+const BaseLayout: FunctionComponent = ({ children }) => (
     <Table style={styles.body}>
         <tr>
             <td>
@@ -19,7 +18,6 @@ const BaseLayout: FunctionComponent = ({ children }) => {
             </td>
         </tr>
     </Table>
-    );
-};
+);
 
 export default BaseLayout;

src/components/Html.tsx

@@ -1,19 +1,15 @@
 import React, { FunctionComponent } from 'react';
 
-const Html: FunctionComponent = ({ children }) => {
-    return (
+const Html: FunctionComponent = ({ children }) => (
     <html>
         <head>
             <meta name="viewport" content="width=device-width" />
             <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
         </head>
-            <body style={{
-                margin: 0
-            }}>
+        <body style={{ margin: 0 }}>
             {children}
         </body>
     </html>
-    );
-};
+);
 
 export default Html;

src/components/blocks/code/Code.tsx

@@ -15,8 +15,7 @@ interface Props {
     color?: Colors;
 }
 
-const Code: FunctionComponent<Props> = ({ code, link, label, color = 'green' }) => {
-    return (
+const Code: FunctionComponent<Props> = ({ code, link, label, color = 'green' }) => (
     <div style={styles.codeWrapper}>
         <div>
             <a href={link}>
@@ -33,7 +32,6 @@ const Code: FunctionComponent<Props> = ({ code, link, label, color = 'green' })
             <Input value={code} color={color} />
         </div>
     </div>
-    );
-};
+);
 
 export default Code;

src/components/layout/content/Content.tsx

@@ -2,12 +2,10 @@ import React, { FunctionComponent } from 'react';
 
 import styles from './styles';
 
-const Content: FunctionComponent = ({ children }) => {
-    return (
+const Content: FunctionComponent = ({ children }) => (
     <div style={styles.content}>
         {children}
     </div>
-    );
-};
+);
 
 export default Content;

src/components/layout/header/Header.tsx

@@ -11,8 +11,7 @@ interface Props {
     title: ReactElement;
 }
 
-const Userbar: FunctionComponent<Props> = ({ username, title }) => {
-    return (
+const Userbar: FunctionComponent<Props> = ({ username, title }) => (
     <Table style={styles.headerImage}>
         <tr>
             <td style={styles.headerTextContainer}>
@@ -24,7 +23,6 @@ const Userbar: FunctionComponent<Props> = ({ username, title }) => {
             </td>
         </tr>
     </Table>
-    );
-};
+);
 
 export default Userbar;

src/components/layout/userbar/Userbar.tsx

@@ -5,8 +5,7 @@ import { Table } from 'components/table';
 import styles from './styles';
 import logoImage from './logo.png';
 
-const Userbar: FunctionComponent = () => {
-    return (
+const Userbar: FunctionComponent = () => (
     <Table style={styles.userbar}>
         <tr>
             <td style={styles.marginColumn} />
@@ -18,7 +17,6 @@ const Userbar: FunctionComponent = () => {
             <td>&nbsp;</td>
         </tr>
     </Table>
-    );
-};
+);
 
 export default Userbar;

src/components/table/Table.tsx

@@ -6,8 +6,7 @@ interface Props {
     style?: CSSProperties;
 }
 
-const Table: FunctionComponent<Props> = ({ children, style }) => {
-    return (
+const Table: FunctionComponent<Props> = ({ children, style }) => (
     <table cellPadding="0" cellSpacing="0" style={{
         ...styles.table,
         ...style
@@ -16,7 +15,6 @@ const Table: FunctionComponent<Props> = ({ children, style }) => {
             {children}
         </tbody>
     </table>
-    );
-};
+);
 
 export default Table;

src/components/ui/button/Button.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, FunctionComponent, ReactElement } from 'react';
 
-import { Colors, green } from 'components/ui/colors';
+import { Colors } from 'components/ui/colors';
 
 import styles from './styles';
 
@@ -10,9 +10,7 @@ interface Props {
     color?: Colors;
 }
 
-const Button: FunctionComponent<Props> = ({ label, style, color = 'green' }) => {
-
-    return (
+const Button: FunctionComponent<Props> = ({ label, style, color = 'green' }) => (
     <div style={{
         ...styles.button,
         ...styles[color],
@@ -20,7 +18,6 @@ const Button: FunctionComponent<Props> = ({ label, style, color = 'green' }) =>
     }}>
         {label}
     </div>
-    );
-};
+);
 
 export default Button;

src/components/ui/button/styles.ts

@@ -7,7 +7,7 @@ function generateColor({ base }: Color): CSSProperties {
     };
 }
 
-type Styles = {
+interface Styles {
     [key: string]: CSSProperties;
 }
 

src/components/ui/input/Input.tsx

@@ -10,16 +10,14 @@ interface Props {
     style?: CSSProperties;
 }
 
-const Input: FunctionComponent<Props> = ({ value, style, color = 'green' }) => {
-    return (
+const Input: FunctionComponent<Props> = ({ value, style, color = 'green' }) => (
     <div style={{
         ...styles.input,
         ...styles[color],
-            ...style
+        ...style,
     }}>
         {value}
     </div>
-    );
-};
+);
 
 export default Input;

src/devTools/List.tsx

@@ -7,11 +7,10 @@ interface Props {
     onChange: (item: string) => any;
 }
 
-const List: FunctionComponent<Props> = ({ label, items, active, onChange = () => {} }) => {
-    return (
+const List: FunctionComponent<Props> = ({ label, items, active, onChange = () => {} }) => (
     <div>
         {label}:
-            {items.map((item) =>
+        {items.map((item) => (
             <a
                 href="#"
                 key={item}
@@ -26,9 +25,8 @@ const List: FunctionComponent<Props> = ({ label, items, active, onChange = () =>
             >
                 {item}
             </a>
-            )}
+        ))}
     </div>
-    );
-};
+);
 
 export default List;

src/emails/forgotPassword/ForgotPassword.tsx

@@ -14,8 +14,7 @@ interface Props {
     code: string;
 }
 
-const ForgotPassword: FunctionComponent<Props> = ({ username, link, code }) => {
-    return (
+const ForgotPassword: FunctionComponent<Props> = ({ username, link, code }) => (
     <div>
         <Userbar />
 
@@ -44,7 +43,6 @@ const ForgotPassword: FunctionComponent<Props> = ({ username, link, code }) => {
 
         <Footer />
     </div>
-    );
-};
+);
 
 export default ForgotPassword;

src/emails/register/Register.tsx

@@ -18,8 +18,7 @@ interface Props {
     code: string;
 }
 
-const Register: FunctionComponent<Props> = ({ username, link, code }) => {
-    return (
+const Register: FunctionComponent<Props> = ({ username, link, code }) => (
     <div>
         <Userbar />
 
@@ -116,7 +115,6 @@ const Register: FunctionComponent<Props> = ({ username, link, code }) => {
 
         <Footer />
     </div>
-    );
-};
+);
 
 export default Register;

src/i18n/module.d.ts

@@ -6,7 +6,7 @@ declare module 'i18n/index.json' {
             englishName: string;
             progress: number;
             isReleased: boolean;
-        },
+        };
     };
     export default content;
 }

src/index.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 // NOTE: we are requiring with require(), to enable dynamic dependencies
 // depending on ENV, where App is running in.
 // This allows us better support of hmr and reduces bundle size

src/typings/file-loader.d.ts

@@ -1,9 +1,9 @@
-declare module "*.png" {
+declare module '*.png' {
     const content: string;
     export default content;
 }
 
-declare module "*.jpg" {
+declare module '*.jpg' {
     const content: string;
     export default content;
 }

src/typings/json-loader.d.ts

@@ -3,7 +3,7 @@ declare module '*.intl.json' {
         [key: string]: {
             id: string;
             defaultMessage: string;
-        },
+        };
     };
     export default content;
 }