chore: modify eslint settings

Author: geekdada

.eslintrc.js

@@ -19,12 +19,12 @@ module.exports = {
   plugins: ['@typescript-eslint', 'import'],
   extends: [
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
     'plugin:import/errors',
     'plugin:import/warnings',
     'plugin:import/typescript',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
-    'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
   ],
   rules: {

.prettierrc.js

@@ -1,6 +1,8 @@
 module.exports = {
   semi: false,
+  useTabs: false,
+  tabWidth: 2,
   singleQuote: true,
   trailingComma: 'all',
-  jsxBracketSameLine: true,
+  bracketSpacing: true
 }

package.json

@@ -20,6 +20,7 @@
     "verify-translation": "zx scripts/verify-translations.mjs"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^1.0.16",
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-angular": "^12.0.1",
     "@craco/craco": "^6.1.1",
@@ -54,8 +55,8 @@
     "@types/react-virtualized": "^9.21.10",
     "@types/semver": "^7.3.4",
     "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/parser": "^5.2.0",
     "autoprefixer": "^9.8.6",
     "await-to-js": "^3.0.0",
     "axios": "^0.21.0",
@@ -69,12 +70,13 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "eslint": "^7.12.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "framer-motion": "^4",
     "fs-extra": "^10.0.0",
     "husky": "^5.2.0",
     "i18next": "^20.3.1",
@@ -89,6 +91,7 @@
     "node-sass": "^6",
     "np": "^7.4.0",
     "npm-debug-log-cleaner": "^1.0.3",
+    "postcss": "^7",
     "postcss-import": "^12.0.1",
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
@@ -102,7 +105,7 @@
     "react-hook-form": "^7.8.4",
     "react-i18next": "^11.10.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^4.0.3",
     "react-scroll-to": "^3.0.0-beta.6",
     "react-tabs": "^3.1.1",
     "react-toastify": "^7.0.3",

src/App.tsx

@@ -1,9 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
 import { find } from 'lodash-es'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { ThemeProvider } from 'emotion-theming'
-import { light } from '@sumup/design-tokens'
+import React, { useCallback, useEffect, useState } from 'react'
 import {
   Switch,
   Route,
@@ -180,7 +178,8 @@ const App: React.FC = () => {
           }
         },
         refreshWhenOffline: true,
-      }}>
+      }}
+    >
       <ScrollToTop />
       <ToastContainer />
       <NetworkErrorModal

src/components/ActionsModal.tsx

@@ -42,7 +42,8 @@ const ActionsModal = ({
             stretch
             key={action.id}
             onClick={action.onClick}
-            variant="primary">
+            variant="primary"
+          >
             {t(action.title)}
           </Button>
         ))}

src/components/Ad.tsx

@@ -70,7 +70,8 @@ const Ad: React.FC = () => {
         <ReactGA.OutboundLink
           eventLabel={`IndexAd_${ad.name}`}
           to={ad.url}
-          target="_blank">
+          target="_blank"
+        >
           <div tw="bg-blue-100 border border-blue-500 rounded text-blue-700 px-4 py-3 flex items-center">
             {showDynamicAd.current && (
               <span tw="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold text-white mr-3">

src/components/BackButton/index.tsx

@@ -17,7 +17,8 @@ const BackButton: React.FC = () => {
       tw="w-8 h-8 mr-3 self-center"
       css={css`
         padding: 0.3rem;
-      `}>
+      `}
+    >
       <ChevronLeft />
     </IconButton>
   )

src/components/FixedFullscreenContainer.tsx

@@ -22,7 +22,8 @@ const FixedFullscreenContainer: React.FC<{
               padding-bottom: env(safe-area-inset-bottom);
             `
           : '',
-      ]}>
+      ]}
+    >
       <div tw="w-full h-full flex flex-col">{props.children}</div>
     </div>
   )

src/components/NetworkErrorModal.tsx

@@ -39,7 +39,8 @@ const NetworkErrorModal: React.FC<NetworkErrorModalProps> = ({
                 <Button
                   onClick={() => {
                     window.location.reload()
-                  }}>
+                  }}
+                >
                   {t('common.reload_window_retry')}
                 </Button>
               ) : (

src/components/NewVersionAlert.tsx

@@ -43,7 +43,8 @@ const NewVersionAlert: React.FC = () => {
       isOpen={isOpen}
       onClose={() => {
         setIsOpen(false)
-      }}>
+      }}
+    >
       {({ onClose }) => (
         <ModalWrapper>
           <ModalHeader title={t('new_version_alert.title')} onClose={onClose} />