feat: apply basic airbnb-base eslint rules (#490)

### Description Of Changes
Applies [UIKIT-3632](https://sendbird.atlassian.net/browse/UIKIT-3632)

5 simple eslint rules are applied as a first step 
 - forced to use double quotes -> single quote 
 - removed redundant spaces
 - added trailing commas 
 - fixed wrong indentation
 - removed duplicated imports
\w eslint-config-airbnb-base plugin (bundle size info 👉🏻 https://bundlephobia.com/package/[email protected]) 

and disabled other rules for now but will enable one-by-one and create a PR for each.

Author: AhyoungRyu

.eslintrc.json

@@ -1,5 +1,10 @@
 {
   "root": true,
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2020,
@@ -11,18 +16,85 @@
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
+      }
     }
   },
   "rules": {
     "no-unused-expressions": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-expressions": "error",
-    "react/display-name": "off"
+    "react/display-name": "off",
+    "import/extensions": "off",
+    // TODO(Ahyoung): uncomment below after find a way not to get an error \w type.d.ts
+    // "import/extensions": [
+    //   "warn",
+    //   "ignorePackages",
+    //   {
+    //     "js": "never",
+    //     "jsx": "never",
+    //     "ts": "never",
+    //     "tsx": "never"
+    //   }
+    // ],
+    // TODO(Ahyoung): fix and remove one by one
+    "no-floating-decimal": "off",
+    "no-shadow": "off",
+    "no-useless-return": "off",
+    "no-else-return": "off",
+    "no-param-reassign": "off",
+    "no-useless-escape": "off",
+    "no-underscore-dangle": "off",
+    "no-confusing-arrow": "off",
+    "no-mixed-operators": "off",
+    "no-nested-ternary": "off",
+    "no-unneeded-ternary": "off",
+    "no-use-before-define": "off",
+    "no-cond-assign": "off",
+    "no-plusplus": "off",
+    "no-bitwise": "off",
+    "no-restricted-syntax": "off",
+    "no-prototype-builtins": "off",
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/no-useless-path-segments": "off",
+    "import/prefer-default-export": "off",
+    "import/order": "off",
+    "import/no-named-as-default-member": "off",
+    "object-curly-newline": "off",
+    "object-shorthand": "off",
+    "consistent-return": "off",
+    "max-len": "off",
+    "arrow-body-style": "off",
+    "function-paren-newline": "off",
+    "prefer-template": "off",
+    "semi": "off",
+    "padded-blocks": "off",
+    "arrow-parens": "off",
+    "dot-notation": "off",
+    "camelcase": "off",
+    "radix": "off",
+    "prefer-destructuring": "off",
+    "default-case": "off",
+    "curly": "off",
+    "yoda": "off",
+    "brace-style": "off",
+    "nonblock-statement-body-position": "off",
+    "func-names": "off"
   },
   "extends": [
     "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "airbnb-base"
   ],
   "plugins": [
     "react",

package.json

@@ -46,8 +46,9 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "lint": "yarn run eslint; yarn run eslint-ts",
-    "eslint": "eslint --no-eslintrc  -c .eslintrc.js 'src/**'",
-    "eslint-ts": "eslint --no-eslintrc -c .eslintrc.json './src/**/*.ts*'",
+    "lint:fix": "yarn run eslint --fix; yarn run eslint-ts --fix",
+    "eslint": "eslint --no-eslintrc -c .eslintrc.js 'src/**'",
+    "eslint-ts": "eslint --no-eslintrc -c .eslintrc.json 'src/**/*.ts*'",
     "stylelint": "stylelint 'src/**'",
     "generate-component": "plop",
     "deploy-storybook": "storybook-to-ghpages",
@@ -111,8 +112,9 @@
     "dts-bundle-generator": "^6.5.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb-base": "^14.0.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.20.0",
+    "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",

src/hooks/VoicePlayer/dux/actionTypes.ts

@@ -1,4 +1,4 @@
-import { ObjectValues } from "../../../utils/typeHelpers/objectValues";
+import { ObjectValues } from '../../../utils/typeHelpers/objectValues';
 
 export const actionTypes = {
   INITIALIZE_AUDIO_UNIT: 'INITIALIZE_AUDIO_UNIT',

src/hooks/VoicePlayer/dux/reducer.ts

@@ -4,13 +4,13 @@ import {
   ON_VOICE_PLAYER_PAUSE,
   ON_VOICE_PLAYER_PLAY,
   SET_CURRENT_PLAYER,
-} from "./actionTypes";
+} from './actionTypes';
 import {
   AudioStorageUnit,
   AudioUnitDefaultValue,
   VoicePlayerInitialState,
   VoicePlayerStatus,
-} from "./initialState";
+} from './initialState';
 
 type InitializeAudioUnitPayload = { groupKey: string };
 type SetCurrentPlayerPayload = { audioPlayer: HTMLAudioElement, groupKey: string };

src/hooks/VoicePlayer/index.tsx

@@ -37,7 +37,7 @@ export interface VoicePlayerContext {
   voicePlayerStore: VoicePlayerInitialState;
 }
 
-const noop = () => {/* noop */ };
+const noop = () => { /* noop */ };
 const VoicePlayerStoreDefaultValue = {
   currentGroupKey: '',
   currentPlayer: null,

src/hooks/VoicePlayer/useVoicePlayer.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
-import { useVoicePlayerContext } from ".";
-import { VOICE_PLAYER_AUDIO_ID } from "../../utils/consts";
-import { useVoiceRecorderContext } from "../VoiceRecorder";
+import { useEffect, useState } from 'react';
+import { useVoicePlayerContext } from '.';
+import { VOICE_PLAYER_AUDIO_ID } from '../../utils/consts';
+import { useVoiceRecorderContext } from '../VoiceRecorder';
 
-import { AudioUnitDefaultValue, VoicePlayerStatus } from "./dux/initialState";
-import { generateGroupKey } from "./utils";
+import { AudioUnitDefaultValue, VoicePlayerStatus } from './dux/initialState';
+import { generateGroupKey } from './utils';
 
 export interface UseVoicePlayerProps {
   key: string;

src/hooks/VoiceRecorder/WebAudioUtils.ts

@@ -1,5 +1,5 @@
 // Thanks to https://codesandbox.io/s/media-recorder-api-downsampling-16k-mp3-encode-using-lame-js-forked-n1pblw
-import { WavHeader, Mp3Encoder } from "../../_externals/lamejs/lame.all.js";
+import { WavHeader, Mp3Encoder } from '../../_externals/lamejs/lame.all';
 
 function encodeMp3(arrayBuffer: ArrayBuffer): WavHeader {
   const wav = WavHeader.readHeader(new DataView(arrayBuffer));
@@ -37,7 +37,7 @@ function encodeMp3(arrayBuffer: ArrayBuffer): WavHeader {
 
 // Convert audioFile to arrayBuffer, because Mp3Encoder requires a parameter of ArrayBuffer type
 function downsampleToWav(file: File, callback: (buffer: ArrayBuffer) => void): void {
-  //Browser compatibility
+  // Browser compatibility
   // https://caniuse.com/?search=AudioContext
   const audioCtx = new AudioContext();
   const fileReader = new FileReader();
@@ -68,6 +68,7 @@ function downsampleToWav(file: File, callback: (buffer: ArrayBuffer) => void): v
           offlineAudioCtx
             .startRendering()
             .then(renderCompleteHandler)
+            // eslint-disable-next-line no-console
             .catch((err) => console.warn(err));
         }
       };

src/hooks/VoiceRecorder/index.tsx

@@ -24,7 +24,7 @@ export interface VoiceRecorderContext {
   stop: () => void,
   isRecordable: boolean;
 }
-const noop = () => {/* noop */ };
+const noop = () => { /* noop */ };
 const VoiceRecorderContext = createContext<VoiceRecorderContext>({
   start: noop,
   stop: noop,
@@ -52,7 +52,7 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
           mimeType: VOICE_RECORDER_MIME_TYPE,
           audioBitsPerSecond: VOICE_RECORDER_AUDIO_BITS,
         });
-        mediaRecorder.ondataavailable = (e) => {// when recording stops
+        mediaRecorder.ondataavailable = (e) => { // when recording stops
           logger.info('VoiceRecorder: Succeeded getting an available data.', e.data);
           const audioFile = new File([e.data], VOICE_MESSAGE_FILE_NAME, {
             lastModified: new Date().getTime(),

src/hooks/VoiceRecorder/useVoiceRecorder.tsx

@@ -25,7 +25,7 @@ export interface UseVoiceRecorderContext {
   recordingStatus: VoiceRecorderStatus;
 }
 
-const noop = () => {/* noop */};
+const noop = () => { /* noop */ };
 
 export const useVoiceRecorder = ({
   onRecordingStarted = noop,

src/hooks/useLongPress.tsx

@@ -61,7 +61,7 @@ interface UseLongPressType<T> {
   onTouchEnd: (e: React.TouchEvent<T>) => void;
 }
 
-export default function useLongPress<T> ({
+export default function useLongPress<T>({
   onLongPress,
   onClick,
 }: PressHandlers<T>, {
@@ -117,7 +117,7 @@ export default function useLongPress<T> ({
     if (shouldPreventDefault && target.current) {
       target.current.removeEventListener('touchend', preventDefault);
     }
-  },[shouldPreventDefault, onClick, longPressTriggered, dragTriggered]);
+  }, [shouldPreventDefault, onClick, longPressTriggered, dragTriggered]);
 
   return {
     onMouseDown: (e: React.MouseEvent<T>) => start(e),