fix: eslint configuration

.env.sample

@@ -17,4 +17,6 @@ REACT_APP_FEATURE_TRANSLATION=
 REACT_APP_TRANSIFEX_TOKEN=
 REACT_APP_TRANSIFEX_SECRET=
 TRANSIFEX_TOKEN=
-TRANSIFEX_SECRET=
+TRANSIFEX_SECRET=
+
+SKIP_PREFLIGHT_CHECK=

.eslintignore

@@ -0,0 +1 @@
+build/*

.eslintrc.js

@@ -0,0 +1,156 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    tsconfigRootDir: __dirname,
+    // project: './config-overrides.js',
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+    // 'import/resolver': {
+    //   node: {
+    //     paths: ['src'],
+    //   },
+    // },
+  },
+  extends: [
+    'airbnb',
+  ],
+  plugins: ['cypress', 'import'],
+  rules: {
+    // Place to specify ESLint rules.
+    // Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+    'import/no-unresolved': 'off',
+    'react/prop-types': 0,
+    'no-console': [1, { allow: ['info', 'warn', 'error'] }],
+    'react/jsx-props-no-spreading': [0, {}],
+    'arrow-body-style': 0,
+    'import/no-named-as-default': 0,
+    'import/prefer-default-export': 0,
+    'no-param-reassign': ['error', { props: false }],
+    'import/order': [
+      'warn',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'builtin',
+          },
+          {
+            pattern: 'react**',
+            group: 'builtin',
+          },
+          {
+            pattern: '@react**',
+            group: 'builtin',
+          },
+          {
+            pattern: 'redux_modules/**',
+            group: 'builtin',
+          },
+          {
+            pattern: 'selectors/**',
+            group: 'builtin',
+            position: 'after',
+          },
+          {
+            pattern: 'actions/**',
+            group: 'builtin',
+            position: 'after',
+          },
+          {
+            pattern: 'utils/**',
+            group: 'builtin',
+            position: 'after',
+          },
+          {
+            pattern: '@loadable/**',
+            group: 'builtin',
+            position: 'after',
+          },
+          {
+            pattern: '@transifex/**',
+            group: 'builtin',
+            position: 'after',
+          },
+          {
+            pattern: 'lodash',
+            group: 'builtin',
+          },
+          {
+            pattern: 'reselect',
+            group: 'builtin',
+          },
+          {
+            pattern: 'next/**',
+            group: 'builtin',
+            position: 'after',
+          },
+          {
+            pattern: 'node_modules/**',
+            group: 'builtin',
+          },
+          {
+            pattern: 'hooks/**',
+            group: 'internal',
+            position: 'before',
+          },
+          {
+            pattern: 'scenes/**',
+            group: 'internal',
+            position: 'before',
+          },
+          {
+            pattern: 'containers/**',
+            group: 'internal',
+            position: 'before',
+          },
+          {
+            pattern: 'components/**',
+            group: 'internal',
+          },
+          {
+            pattern: 'services/**',
+            group: 'internal',
+            position: 'after',
+          },
+          {
+            pattern: 'constants/**',
+            group: 'internal',
+            position: 'after',
+          },
+          {
+            pattern: 'styles/**',
+            group: 'internal',
+            position: 'after',
+          },
+          {
+            pattern: 'images/**',
+            group: 'internal',
+            position: 'after',
+          },
+          {
+            pattern: 'svgs/**',
+            group: 'internal',
+            position: 'after',
+          },
+        ],
+        pathGroupsExcludedImportTypes: [
+          'react',
+        ],
+      },
+    ],
+  },
+};

config-overrides.js

@@ -1,8 +1,9 @@
 const path = require('path');
+const rewireReactHotLoader = require('react-app-rewire-hot-loader');
+
 const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
 // Hot reload without eject
 // docs on: https://github.com/cdharris/react-app-rewire-hot-loader
-const rewireReactHotLoader = require('react-app-rewire-hot-loader')
 
 module.exports = function override(config, env) {
   config.resolve = {
@@ -32,9 +33,10 @@ module.exports = function override(config, env) {
       images: path.resolve(__dirname, 'src/assets/images'),
       gifs: path.resolve(__dirname, 'src/assets/gifs'),
       sounds: path.resolve(__dirname, 'src/assets/sounds'),
-      'store-middleware': path.resolve(__dirname, 'src/store/store-middleware')
-    }
-  }
+      'store-middleware': path.resolve(__dirname, 'src/store/store-middleware'),
+    },
+  };
+  // eslint-disable-next-line no-param-reassign
   config = rewireReactHotLoader(config, env);
   return config;
-}
+};

cypress/integration/general-navigation.spec.js

@@ -1,10 +1,10 @@
 describe('General navigation', () => {
-  it('User lands on Data Globe if no path is provided ', function () {
+  it('User lands on Data Globe if no path is provided ', () => {
     cy.visit('https://half-earth.vizzuality.com/', {
-      onBeforeLoad (window) {
-        delete window.navigator.__proto__.serviceWorker
-      }
-    })
-    cy.url().should('include', '/dataGlobe')
-  })
-})
+      onBeforeLoad(window) {
+        delete window.navigator.__proto__.serviceWorker;
+      },
+    });
+    cy.url().should('include', '/dataGlobe');
+  });
+});

cypress/plugins/index.js

@@ -18,4 +18,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

jsconfig.json

@@ -4,4 +4,3 @@
     },
     "exclude": ["node_modules"]
   }
-

package.json

@@ -21,11 +21,13 @@
     "directory-named-webpack-plugin": "^4.0.1",
     "dotenv": "^16.0.1",
     "dotenv-cli": "^5.1.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-react": "^7.30.1",
     "esri-loader": "^3.2.0",
     "framer-motion": "^4.0.3",
     "he-components": "github:vizzuality/half-earth-components#0.2.1",
     "localforage": "^1.10.0",
-    "lodash-es": "4.17.21",
+    "lodash": "4.17.21",
     "node-sass": "yarn:sass",
     "post-robot": "8.0.28",
     "prop-types": "^15.7.2",
@@ -74,7 +76,8 @@
     "docs:serve": "bundle exec jekyll serve",
     "eject": "react-scripts eject",
     "transifex:push": "dotenv cross-var ./node_modules/.bin/txjs-cli push src/ --token=%REACT_APP_TRANSIFEX_TOKEN% --secret=%REACT_APP_TRANSIFEX_SECRET%",
-    "transifex:refresh": "dotenv cross-var ./node_modules/.bin/txjs-cli invalidate --token=%REACT_APP_TRANSIFEX_TOKEN% --secret=%REACT_APP_TRANSIFEX_SECRET%"
+    "transifex:refresh": "dotenv cross-var ./node_modules/.bin/txjs-cli invalidate --token=%REACT_APP_TRANSIFEX_TOKEN% --secret=%REACT_APP_TRANSIFEX_SECRET%",
+    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -92,7 +95,11 @@
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "cypress": "^6.3.0",
-    "eslint-plugin-cypress": "^2.11.2",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "identity-obj-proxy": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "react-app-rewired": "^2.1.1",

src/components/about/about-modal/about-modal.js

@@ -1 +1 @@
-export { default } from  './about-modal-component';
+export { default } from './about-modal-component';

src/components/about/about.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import AboutComponent from  './about-component';
+import AboutComponent from './about-component';
 import { openAboutPageAnalyticsEvent } from 'actions/google-analytics-actions';
 
 export default connect(null, openAboutPageAnalyticsEvent)(AboutComponent);