[eslint] Consistent import rules (#4087)

## Description

This PR aims to add new eslint rules, that:

- Require sorted imports
- Require `type` when importing only types

As there would be too many changes, I've decided to split this into two
PRs. This one will be base, similarly as in monorepo migration.

-
#4088
-
#4089

## Test plan

- `yarn lint-js`
- `yarn ts-check`

<img width="1069" height="482" alt="image"
src="https://github.com/user-attachments/assets/5f4e79f6-ae0a-4ec4-9073-b23f89a0f569"
/>

Author: m-bert

.eslintrc.json

@@ -43,6 +43,8 @@
     "@typescript-eslint/no-unsafe-return": "warn",
     "@typescript-eslint/no-non-null-assertion": "warn",
     "@typescript-eslint/ban-types": "warn",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/consistent-type-exports": "error",
 
     // common
     "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -85,6 +87,7 @@
     ],
     "curly": "error",
     "spaced-comment": "error",
-    "no-alert": "warn"
+    "no-alert": "warn",
+    "sort-imports": "error"
   }
 }

apps/basic-example/src/App.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { SafeAreaView, Platform } from 'react-native';
+import { Platform, SafeAreaView } from 'react-native';
+import ContentsButton from './ContentsButton';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-
-import Navigator from './Navigator';
-
-import Text from './Text';
 import NativeDetector from './NativeDetector';
+import Navigator from './Navigator';
 import RuntimeDecoration from './RuntimeDecoration';
-import ContentsButton from './ContentsButton';
+import Text from './Text';
 
 const EXAMPLES = [
   {

apps/basic-example/src/ContentsButton.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { View, StyleSheet, Text, SafeAreaView } from 'react-native';
 import {
   GestureHandlerRootView,
-  ScrollView,
   RectButton,
+  ScrollView,
 } from 'react-native-gesture-handler';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import React from 'react';
 
 export default function ComplexUI() {
   return (

apps/basic-example/src/NativeDetector.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Animated, Button, useAnimatedValue } from 'react-native';
 import {
-  GestureHandlerRootView,
   GestureDetector,
+  GestureHandlerRootView,
   usePanGesture,
 } from 'react-native-gesture-handler';
 

apps/basic-example/src/Navigator.tsx

@@ -1,5 +1,5 @@
+import { BackHandler, Pressable, Text, View } from 'react-native';
 import React, { useEffect, useState } from 'react';
-import { View, Text, Pressable, BackHandler } from 'react-native';
 
 export interface RouteInfo {
   component: React.ComponentType;

apps/basic-example/src/RuntimeDecoration.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-
-import { COLORS } from './colors';
 import Animated, {
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { StyleSheet, Text, View } from 'react-native';
+import { COLORS } from './colors';
 import { useState } from 'react';
 
 export function RuntimeChecker({

apps/basic-example/src/Text.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
 import {
   Gesture,
   GestureDetector,
   InterceptingGestureDetector,
   VirtualGestureDetector,
   useTapGesture,
 } from 'react-native-gesture-handler';
-
+import { StyleSheet, Text, View } from 'react-native';
 import { COLORS } from './colors';
 
 function NativeDetectorExample() {

apps/common-app/src/ListWithHeader/Header.tsx

@@ -1,8 +1,5 @@
-import React, { useEffect } from 'react';
-import { Platform, StyleSheet } from 'react-native';
 import Animated, {
   Easing,
-  SharedValue,
   interpolate,
   measure,
   useAnimatedRef,
@@ -11,7 +8,10 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { Platform, StyleSheet } from 'react-native';
+import React, { useEffect } from 'react';
 import { COLORS } from '../common';
+import type { SharedValue } from 'react-native-reanimated';
 
 // eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
 const SIGNET = require('./signet.png');

apps/common-app/src/ListWithHeader/ListWithHeader.tsx

@@ -1,29 +1,20 @@
-import React, { useEffect } from 'react';
-import {
-  Platform,
-  ScrollViewProps,
-  SectionList,
-  SectionListProps,
-  StyleSheet,
-} from 'react-native';
 import Animated, {
-  SharedValue,
+  runOnJS,
+  useAnimatedProps,
+  useAnimatedReaction,
   useAnimatedRef,
+  useAnimatedStyle,
   useScrollViewOffset,
-  useAnimatedReaction,
   useSharedValue,
-  useAnimatedProps,
-  useAnimatedStyle,
-  runOnJS,
   withSpring,
-  AnimatedRef,
 } from 'react-native-reanimated';
+import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Header, { HEADER_HEIGHT } from './Header';
-import {
-  Gesture,
-  GestureDetector,
-  GestureType,
-} from 'react-native-gesture-handler';
+import { Platform, SectionList, StyleSheet } from 'react-native';
+import React, { useEffect } from 'react';
+import type { ScrollViewProps, SectionListProps } from 'react-native';
+import type { GestureType } from 'react-native-gesture-handler';
 
 const IS_ANDROID = Platform.OS === 'android';
 

apps/common-app/src/common.tsx

@@ -1,25 +1,19 @@
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import type { Platform, StyleProp, ViewStyle } from 'react-native';
 import React, {
-  RefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from 'react';
-import {
-  Text,
-  StyleSheet,
-  ViewStyle,
-  StyleProp,
-  View,
-  Platform,
-} from 'react-native';
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { StyleSheet, Text, View } from 'react-native';
+import type { RefObject } from 'react';
 
 export interface Example {
   name: string;