chore: update eslint & its plugin version (#526)

### Description Of Changes
Aims to resolve
[UIKIT-1715](https://sendbird.atlassian.net/browse/UIKIT-1715) and
[UIKIT-3841](https://sendbird.atlassian.net/browse/UIKIT-3841).

Updated ESLint version to latest and related plugins too.

Author: AhyoungRyu

.eslintignore

@@ -3,7 +3,6 @@ __test__/*/**.js
 __test__/*/**.jsx
 *.spec.js
 *.mock.js
-src/ui/MessageInput/index.jsx
 src/_externals/**/*
 
 __snapshots__/**/*

.eslintrc.js

@@ -12,7 +12,7 @@ module.exports = {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
   },
-  parser: 'babel-eslint',
+  parser: "@babel/eslint-parser",
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
@@ -36,6 +36,8 @@ module.exports = {
       },
     ],
     "react/forbid-prop-types": 0,
+    // we don't want to force to define function component only
+    "react/function-component-definition": "off",
     "no-unused-expressions": "off",
     "@typescript-eslint/no-unused-expressions": ["error"],
   },

.eslintrc.json

@@ -1,5 +1,14 @@
 {
   "root": true,
+  "globals": {
+    "JSX": true,
+    "React": true,
+    "ChildNode": true,
+    "ReactElement": true,
+    "globalThis": true,
+    "Locale": true,
+    "SendBird": true
+  },
   "env": {
     "browser": true,
     "es6": true,
@@ -35,6 +44,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-expressions": "error",
     "react/display-name": "off",
+    "react/function-component-definition": "off",
     "import/extensions": [
       "error",
       "ignorePackages",
@@ -61,6 +71,7 @@
     "no-bitwise": "off",
     "no-restricted-syntax": "off",
     "no-prototype-builtins": "off",
+    "no-unsafe-optional-chaining": "off",
     "import/no-unresolved": "off",
     "import/no-extraneous-dependencies": "off",
     "import/no-useless-path-segments": "off",
@@ -89,7 +100,11 @@
     // In some cases, eslint requires semicolon and wants it removed at the same time
     // https://stackoverflow.com/questions/58474874/eslint-demands-semicolon-and-wants-it-removed-at-the-same-time
     "semi": "off",
-    "@typescript-eslint/semi": ["error"]
+    "@typescript-eslint/semi": ["error"],
+    // Not to make ESLint complains a type is only being used as type but recognized as a unused variable
+    // https://stackoverflow.com/questions/57802057/eslint-configuring-no-unused-vars-for-typescript
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error"]
   },
   "extends": [
     "plugin:react/recommended",

README.md

@@ -138,8 +138,8 @@ To read more: https://webpack.js.org/configuration/resolve/#resolvefallback
 ### Creating/exporting new components
 
 1. Define your component inside './src'
-2. Add the following line to './src/index.js'
-  `export NewComponent from './src/location/of/NewComponent';`
+2. Add the following line to './src/index.ts'
+  `export { default as NewComponent } from './src/location/of/NewComponent';`
 3. Add the following line to './exports.js'
   `NewComponent: 'src/location/of/NewComponent',`
 

babel.config.js

@@ -4,5 +4,5 @@ module.exports = {
     '@babel/preset-react',
     '@babel/preset-typescript',
   ],
-  plugins: ['@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-syntax-export-default-from'],
 };

exports.js

@@ -1,6 +1,6 @@
 export default {
   // legacy
-  index: 'src/index.js',
+  index: 'src/index.ts',
 
   // lame-js
   // remove when they remove 1.2.2

package.json

@@ -79,6 +79,7 @@
   "homepage": "https://sendbird.com",
   "devDependencies": {
     "@babel/core": "^7.8.4",
+    "@babel/eslint-parser": "^7.21.8",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-export-default-from": "^7.8.3",
     "@babel/preset-env": "^7.8.3",
@@ -101,24 +102,23 @@
     "@svgr/webpack": "^5.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "autoprefixer": "^9.7.4",
-    "babel-eslint": "^10.0.3",
     "babel-jest": "^29.0.1",
     "babel-loader": "^8.0.6",
     "browserslist": "^4.14.5",
     "caniuse-lite": "^1.0.30001148",
     "css-loader": "^3.4.2",
     "dts-bundle-generator": "^6.5.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint": "^8.40.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "global-jsdom": "^8.5.0",
     "jest": "^29.0.1",
     "jest-environment-jsdom": "^29.0.1",