Add more eslint rules (#4672)

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->

* Rules for whole repo:
* '`@typescript-eslint/no-duplicate-type-constituents': 'error'` - means
that types like `number|number` are not allowed
  * `eqeqeq: 'error' - you can't compare with `==`, use `===` instead
  
* `'no-unreachable': 'error'` - no unreachable code, especially inside a
function, after return statement.
  
* Rules for examples in folder app:
  * `'react-native/no-unused-styles': 'error'`,
* `'react-native/no-raw-text': 'off'`, - this rule is very convenient,
but due to this bug
[LINK](Intellicode/eslint-plugin-react-native#270)
we can't use it with CI 😠
  * `'no-inline-styles/no-inline-styles': 'error'`
* `'react-native/no-inline-styles': 'off'`, (this rule does not allow
variable styles with ternary operators, so I've used the one above)
  
  * `'react-native/no-single-element-style-arrays': 'error'`,
* Create separate .eslintrc.js config for tests with separate rules
  * `'jest/no-disabled-tests': 'warn'`,
  
  * `'jest/no-focused-tests': 'error'`,
  * `'jest/no-identical-title': 'error'`,
  * `'jest/prefer-to-have-length': 'warn'`,
  * `'jest/valid-expect': 'error'`,

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->
CI check pass ✅

---------

Co-authored-by: Aleksandra Cynk <aleksandracynk@swmansion.com>
Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>

.eslintrc.js

@@ -1,6 +1,9 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+  },
   extends: [
     'standard',
     'plugin:@typescript-eslint/recommended',
@@ -34,9 +37,8 @@ module.exports = {
     ],
     '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     '@typescript-eslint/no-var-requires': 'warn',
-    '@typescript-eslint/consistent-type-imports': [
-      'error',
-      { prefer: 'type-imports' },
-    ],
+    '@typescript-eslint/no-duplicate-type-constituents': 'error',
+    eqeqeq: 'error',
+    'no-unreachable': 'error',
   },
 };

__tests__/.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  root: true,
+  extends: [
+    'standard',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:import/typescript',
+  ],
+  plugins: ['jest', 'react-native'],
+  env: {
+    'react-native/react-native': true,
+    'jest/globals': true,
+  },
+  settings: {
+    'import/resolver': {
+      'babel-module': {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+  rules: {
+    'jest/no-disabled-tests': 'warn',
+    'jest/no-focused-tests': 'error',
+    'jest/no-identical-title': 'error',
+    'jest/prefer-to-have-length': 'warn',
+    'jest/valid-expect': 'error',
+  },
+};

__tests__/plugin.test.ts

@@ -1023,8 +1023,8 @@ describe('babel plugin', () => {
   it('is indempotent for common cases', () => {
     function resultIsIdempotent(input: string) {
       const firstResult = runPlugin(input).code;
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const secondResult = runPlugin(firstResult!).code;
+      assert(firstResult);
+      const secondResult = runPlugin(firstResult).code;
       return firstResult === secondResult;
     }
 

app/.eslintrc.js

@@ -1,8 +1,13 @@
 module.exports = {
   root: true,
   extends: '@react-native',
+  plugins: ['eslint-plugin-no-inline-styles'],
   rules: {
+    'no-inline-styles/no-inline-styles': 'error',
     'react-native/no-inline-styles': 'off',
     '@typescript-eslint/no-shadow': 'off',
+    'react-native/no-unused-styles': 'error',
+    'react-native/no-raw-text': 'off',
+    'react-native/no-single-element-style-arrays': 'error',
   },
 };

app/src/examples/AnimatedStyleUpdateExample.tsx

@@ -4,7 +4,7 @@ import Animated, {
   useAnimatedStyle,
   Easing,
 } from 'react-native-reanimated';
-import { View, Button } from 'react-native';
+import { View, Button, StyleSheet } from 'react-native';
 import React from 'react';
 
 export default function AnimatedStyleUpdateExample(): React.ReactElement {
@@ -22,17 +22,8 @@ export default function AnimatedStyleUpdateExample(): React.ReactElement {
   });
 
   return (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: 'column',
-      }}>
-      <Animated.View
-        style={[
-          { width: 100, height: 80, backgroundColor: 'black', margin: 30 },
-          style,
-        ]}
-      />
+    <View style={styles.container}>
+      <Animated.View style={[styles.box, style]} />
       <Button
         title="toggle"
         onPress={() => {
@@ -42,3 +33,16 @@ export default function AnimatedStyleUpdateExample(): React.ReactElement {
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  box: {
+    width: 100,
+    height: 80,
+    backgroundColor: 'black',
+    margin: 30,
+  },
+});

app/src/examples/AnimatedTabBarExample.tsx

@@ -79,6 +79,10 @@ const styles = StyleSheet.create({
     height: 64,
     zIndex: 2,
   },
+  tabs: {
+    position: 'absolute',
+    left: -tabWidth,
+  },
   activeIcon: {
     backgroundColor: 'white',
     width: 40,
@@ -87,6 +91,16 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  circleIcon: {
+    position: 'absolute',
+    width: width,
+    top: -8,
+    left: width / 2,
+    height: 64,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 5,
+  },
 });
 
 type ButtonProps = {
@@ -140,7 +154,7 @@ type ActiveIconProps = {
   activeIndex: Animated.SharedValue<number>;
   width: number;
 };
-function ActiveIcon({ item, index, activeIndex, width }: ActiveIconProps) {
+function ActiveIcon({ item, index, activeIndex }: ActiveIconProps) {
   const circleIconStyle = useAnimatedStyle(() => {
     const isActive = index === activeIndex.value;
     const yOffset = isActive ? 0 : 80;
@@ -154,20 +168,7 @@ function ActiveIcon({ item, index, activeIndex, width }: ActiveIconProps) {
   });
 
   return (
-    <Animated.View
-      style={[
-        {
-          position: 'absolute',
-          width: width,
-          top: -8,
-          left: width / 2,
-          height: 64,
-          justifyContent: 'center',
-          alignItems: 'center',
-          zIndex: 5,
-        },
-        circleIconStyle,
-      ]}>
+    <Animated.View style={[styles.circleIcon, circleIconStyle]}>
       <View style={styles.activeIcon}>
         <FontAwesomeIcon icon={item} color="black" size={25} />
       </View>
@@ -192,8 +193,7 @@ function Bar() {
 
   return (
     <View style={styles.container}>
-      <Animated.View
-        style={[{ position: 'absolute', left: -tabWidth }, indicatorStyle]}>
+      <Animated.View style={[styles.tabs, indicatorStyle]}>
         {tabs.map((tab, index) => (
           <ActiveIcon
             index={index}

app/src/examples/ChatHeadsExample.tsx

@@ -159,23 +159,31 @@ function Followers({
 
 export default function ChatHeadsExample(): React.ReactElement {
   return (
-    <View style={{ flex: 1, margin: 50 }}>
+    <View style={styles.container}>
       <ChatHeads>
-        <View style={[styles.head, { backgroundColor: 'black' }]} />
-        <View style={[styles.head, { backgroundColor: 'blue' }]} />
-        <View style={[styles.head, { backgroundColor: 'green' }]} />
-        <View style={[styles.head, { backgroundColor: 'yellow' }]} />
+        <View style={[styles.head, styles.black]} />
+        <View style={[styles.head, styles.blue]} />
+        <View style={[styles.head, styles.green]} />
+        <View style={[styles.head, styles.yellow]} />
       </ChatHeads>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    margin: 50,
+  },
   head: {
     width: 40,
     height: 40,
   },
   headContainer: {
     position: 'absolute',
   },
+  black: { backgroundColor: 'black' },
+  blue: { backgroundColor: 'blue' },
+  green: { backgroundColor: 'green' },
+  yellow: { backgroundColor: 'yellow' },
 });

app/src/examples/ChessboardExample.tsx

@@ -72,9 +72,6 @@ const styles = StyleSheet.create({
     height: 400,
     // prevents calling _state->updateState from RNScreens after each change because of view flattening
   },
-  buttons: {
-    marginVertical: 50,
-  },
   chessboard: {
     alignItems: 'flex-start',
   },

app/src/examples/CubesExample.tsx

@@ -320,12 +320,6 @@ const componentStyle = StyleSheet.create({
   cubesContainer: {
     flexDirection: 'row',
   },
-  square: {
-    width: 50,
-    height: 50,
-    backgroundColor: 'black',
-    margin: 30,
-  },
   box: {
     width: 100,
     height: 100,
@@ -334,15 +328,6 @@ const componentStyle = StyleSheet.create({
     left: 0,
     backfaceVisibility: 'hidden',
   },
-  red: {
-    backgroundColor: 'red',
-  },
-  green: {
-    backgroundColor: 'green',
-  },
-  blue: {
-    backgroundColor: 'blue',
-  },
   compass: {
     backgroundColor: 'black',
     width: 20,

app/src/examples/DragAndSnapExample.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import Animated, {
   useSharedValue,
   withSpring,
@@ -62,18 +62,21 @@ export default function DragAndSnapExample(): React.ReactElement {
   });
 
   return (
-    <View style={{ flex: 1, margin: 50 }}>
+    <View style={styles.container}>
       <PanGestureHandler onGestureEvent={gestureHandler}>
-        <Animated.View
-          style={[
-            {
-              width: 40,
-              height: 40,
-            },
-            stylez,
-          ]}
-        />
+        <Animated.View style={[styles.box, stylez]} />
       </PanGestureHandler>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    margin: 50,
+  },
+  box: {
+    width: 40,
+    height: 40,
+  },
+});

app/src/examples/ExtrapolationExample.tsx

@@ -86,13 +86,7 @@ export default function ExtrapolationExample(): React.ReactElement {
   return (
     <>
       <PanGestureHandler onGestureEvent={gestureHandler}>
-        <Animated.View
-          style={[
-            styles.circle,
-            { zIndex: 1, backgroundColor: '#001a72' },
-            stylez,
-          ]}
-        />
+        <Animated.View style={[styles.circle, stylez]} />
       </PanGestureHandler>
       <Animated.View style={[styles.circle, button1Style]} />
       <Animated.View style={[styles.circle, button2Style]} />
@@ -109,6 +103,7 @@ const styles = StyleSheet.create({
     top: 400,
     alignSelf: 'center',
     borderRadius: 25,
-    backgroundColor: 'red',
+    zIndex: 1,
+    backgroundColor: '#001a72',
   },
 });

app/src/examples/IPodExample.tsx

@@ -163,7 +163,7 @@ export default function IPodExample(): React.ReactElement {
           return (
             <Animated.View key={i} style={[styles.item, uas]}>
               <View style={styles.cover}>
-                <Text style={{ fontSize: 80, textAlign: 'center' }}>♪</Text>
+                <Text style={styles.noteText}>♪</Text>
               </View>
               <Text style={styles.label}>{artist}</Text>
               <Text style={[styles.label, styles.songLabel]}>{song}</Text>
@@ -208,13 +208,6 @@ const styles = StyleSheet.create({
     marginBottom: 40,
     backgroundColor: 'white',
   },
-  ball: {
-    width: SMALL_BALL_SIZE,
-    height: SMALL_BALL_SIZE,
-    backgroundColor: 'orange',
-    borderRadius: SMALL_BALL_SIZE,
-    position: 'absolute',
-  },
   innerBall: {
     position: 'absolute',
     width: INNER_BALL_SIZE,
@@ -239,4 +232,8 @@ const styles = StyleSheet.create({
     margin: 20,
     marginLeft: ITEM_SIZE.size / 2 - 100 / 2,
   },
+  noteText: {
+    fontSize: 80,
+    textAlign: 'center',
+  },
 });