refactor: integrate typescript-eslint-plugin (#252)

## 📜 Description
<!-- Describe your changes in detail -->
added @typescript-eslint/eslint-plugin to support importing and
exporting types with eslint to avoid adding some types file in the final
build. Also, it would be useful to have a more strict eslint in the
project 🙂 .


## 💡 Motivation and Context
<!-- Why is this change required? What problem does it solve? -->
<!-- If it fixes an open issue, please link to the issue here. -->
code base improvement
## 📢 Changelog

- Created .eslintrc.cjs with eslint configuration.
- Added @typescript-eslint/eslint-plugin, @typescript-eslint/parser and
eslint-plugin-jest

## 🤔 How Has This Been Tested?
<!-- Please describe in detail how you tested your changes. -->
<!-- Include details of your testing environment, and the tests you ran
to -->
<!-- see how your change affects other areas of the code, etc. -->

Tested with the `yarn lint` command 🙂 . 

## 📝 Checklist

- [x] CI successfully passed

.eslintrc.cjs

@@ -0,0 +1,102 @@
+module.exports = {
+  root: true,
+  plugins: ['@typescript-eslint', 'react', 'react-native', 'jest', 'import'],
+  extends: [
+    '@react-native',
+    'prettier',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:jest/recommended',
+    'plugin:import/typescript',
+  ],
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+        project: '<root>/tsconfig.json',
+      },
+    },
+  },
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        quoteProps: 'consistent',
+        singleQuote: true,
+        tabWidth: 2,
+        trailingComma: 'es5',
+        useTabs: false,
+      },
+    ],
+    // react
+    'react-hooks/exhaustive-deps': 'warn',
+    // typescript
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      { prefer: 'type-imports' },
+    ],
+    '@typescript-eslint/no-var-requires': 'warn',
+    // import
+    'sort-imports': [
+      'error',
+      {
+        // sort destructure imports
+        ignoreCase: false,
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ['none', 'all', 'single', 'multiple'],
+        allowSeparatedGroups: true,
+      },
+    ],
+    'import/order': [
+      'error',
+      {
+        'groups': [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+          'type',
+        ],
+        'alphabetize': {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+        'newlines-between': 'always',
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['src/specs/**'],
+      rules: {
+        '@typescript-eslint/ban-types': [
+          'error',
+          {
+            extendDefaults: true,
+            types: {
+              '{}': false,
+            },
+          },
+        ],
+      },
+    },
+  ],
+  env: {
+    'react-native/react-native': true,
+    'jest/globals': true,
+  },
+  ignorePatterns: [
+    'node_modules/**',
+    'lib/**',
+    'example/**',
+    'FabricExample/**',
+    'docs/**',
+    'scripts/**',
+  ],
+};

package.json

@@ -60,10 +60,15 @@
     "@release-it/conventional-changelog": "^2.0.0",
     "@types/jest": "^29.2.1",
     "@types/react": "^18.0.24",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "clang-format": "^1.8.0",
     "commitlint": "^11.0.0",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^7.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-prettier": "^3.1.3",
     "husky": "^6.0.0",
     "jest": "^29.2.1",
@@ -110,33 +115,6 @@
       }
     }
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native",
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
-        }
-      ],
-      "react-hooks/exhaustive-deps": "warn"
-    },
-    "globals": {
-      "jest": "readonly"
-    }
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
   "prettier": {
     "quoteProps": "consistent",
     "singleQuote": true,

src/animated.tsx

@@ -1,18 +1,20 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
+import { Animated, Platform, StyleSheet } from 'react-native';
 import Reanimated, { useSharedValue } from 'react-native-reanimated';
 
-import { KeyboardAnimationContext, KeyboardContext } from './context';
-import { useSharedHandlers, useAnimatedValue } from './internal';
 import { KeyboardControllerView } from './bindings';
+import { KeyboardContext } from './context';
+import { useAnimatedValue, useSharedHandlers } from './internal';
+import { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';
 import { useAnimatedKeyboardHandler } from './reanimated';
 
+import type { KeyboardAnimationContext } from './context';
 import type {
   KeyboardControllerProps,
   KeyboardHandler,
   NativeEvent,
 } from './types';
-import { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';
+import type { ViewStyle } from 'react-native';
 
 const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
   Animated.createAnimatedComponent(

src/bindings.native.ts

@@ -1,4 +1,4 @@
-import { Platform, NativeEventEmitter } from 'react-native';
+import { NativeEventEmitter, Platform } from 'react-native';
 
 import type {
   KeyboardControllerModule,

src/bindings.ts

@@ -1,10 +1,12 @@
-import { EmitterSubscription, View } from 'react-native';
+import { View } from 'react-native';
+
 import type {
   KeyboardControllerModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
   KeyboardGestureAreaProps,
 } from './types';
+import type { EmitterSubscription } from 'react-native';
 
 const NOOP = () => {};
 export const KeyboardController: KeyboardControllerModule = {

src/components/KeyboardAvoidingView/hooks.ts

@@ -1,4 +1,5 @@
 import { useSharedValue } from 'react-native-reanimated';
+
 import { useKeyboardHandler } from '../../hooks';
 
 export const useKeyboardAnimation = () => {

src/components/KeyboardAvoidingView/index.tsx

@@ -1,20 +1,18 @@
 import React, { forwardRef, useCallback, useMemo } from 'react';
-import {
-  LayoutRectangle,
-  useWindowDimensions,
-  View,
-  ViewProps,
-} from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 import Reanimated, {
-  useAnimatedStyle,
-  useWorkletCallback,
-  useSharedValue,
-  useDerivedValue,
   interpolate,
   runOnUI,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  useWorkletCallback,
 } from 'react-native-reanimated';
+
 import { useKeyboardAnimation } from './hooks';
 
+import type { LayoutRectangle, ViewProps } from 'react-native';
+
 type Props = {
   /**
    * Specify how to react to the presence of the keyboard.

src/constants.ts

@@ -12,6 +12,8 @@ export enum AndroidSoftInputModes {
   SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,
   SOFT_INPUT_STATE_HIDDEN = 2,
   SOFT_INPUT_STATE_UNCHANGED = 1,
+  // temporarily disable this rule to avoid breaking changes.
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
   SOFT_INPUT_STATE_UNSPECIFIED = 0,
   SOFT_INPUT_STATE_VISIBLE = 4,
 }

src/context.ts

@@ -1,8 +1,9 @@
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react';
 import { Animated } from 'react-native';
 
-import type { SharedValue } from 'react-native-reanimated';
 import type { KeyboardHandlers } from './types';
+import type React from 'react';
+import type { SharedValue } from 'react-native-reanimated';
 
 export type AnimatedContext = {
   progress: Animated.Value;

src/hooks.ts

@@ -1,15 +1,13 @@
-import { DependencyList, useEffect } from 'react';
+import { useEffect } from 'react';
 
-import {
-  AnimatedContext,
-  ReanimatedContext,
-  useKeyboardContext,
-} from './context';
 import { KeyboardController } from './bindings';
 import { AndroidSoftInputModes } from './constants';
+import { useKeyboardContext } from './context';
 import { uuid } from './utils';
 
+import type { AnimatedContext, ReanimatedContext } from './context';
 import type { KeyboardHandler } from './types';
+import type { DependencyList } from 'react';
 
 export const useResizeMode = () => {
   useEffect(() => {

src/internal.ts

@@ -15,7 +15,9 @@ import type { Handlers, NativeEvent } from './types';
  *  onEvent2: () => {},
  * }
  */
-export function useSharedHandlers<T extends Record<string, Function>>() {
+export function useSharedHandlers<
+  T extends Record<string, (event: NativeEvent) => void>
+>() {
   const handlers = useSharedValue<Handlers<T>>({});
   const jsHandlers = useRef<Handlers<T>>({});
 

src/replicas.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Keyboard, Platform } from 'react-native';
 import {
   runOnUI,
@@ -8,10 +8,10 @@ import {
   useWorkletCallback,
   withSpring,
 } from 'react-native-reanimated';
-import { useReanimatedKeyboardAnimation } from './hooks';
 
 import { KeyboardController } from './bindings';
 import { AndroidSoftInputModes } from './constants';
+import { useReanimatedKeyboardAnimation } from './hooks';
 
 const availableOSEventType = Platform.OS === 'ios' ? 'Will' : 'Did';
 

src/specs/KeyboardControllerViewNativeComponent.ts

@@ -1,11 +1,12 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
 import type { HostComponent } from 'react-native';
 import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {
   DirectEventHandler,
   Double,
   Int32,
 } from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 type KeyboardMoveEvent = Readonly<{
   height: Double;

src/specs/KeyboardGestureAreaNativeComponent.ts

@@ -1,7 +1,8 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
 import type { HostComponent } from 'react-native';
 import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 export interface NativeProps extends ViewProps {
   interpolator?: WithDefault<'linear' | 'ios', 'linear'>;

src/specs/NativeKeyboardController.ts

@@ -1,6 +1,7 @@
-import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
 
+import type { TurboModule } from 'react-native';
+
 export interface Spec extends TurboModule {
   readonly getConstants: () => {};
 

src/specs/NativeStatusBarManagerCompat.ts

@@ -1,6 +1,7 @@
-import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
 
+import type { TurboModule } from 'react-native';
+
 export interface Spec extends TurboModule {
   readonly getConstants: () => {};