Add ESLint support for React and React Native (#4)

* feat(package): add eslint rules for react

* feat(package): add eslint rules for react-native

Author: antoine-cottineau

packages/eslint/README.md

@@ -4,7 +4,7 @@ This project is an ESLint config that gathers all the rules, plugins and parsers
 
 ## How to use?
 
-In your app, run `yarn add --dev @bam.tech/eslint-config @typescript-eslint/eslint-plugin eslint`.
+In your app, run `yarn add --dev @bam.tech/eslint-config eslint-plugin-react-native eslint-plugin-react @typescript-eslint/eslint-plugin eslint`.
 
 In your `.eslintrc` config file, extend the exported configuration:
 

packages/eslint/index.js

@@ -3,11 +3,25 @@
 module.exports = {
   env: {
     node: true,
+    "react-native/react-native": true,
   },
-  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-native/all",
+  ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: "latest",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ["@typescript-eslint", "react-native"],
+  settings: {
+    react: {
+      version: "detect",
+    },
   },
-  plugins: ["@typescript-eslint"],
 };

packages/eslint/package.json

@@ -5,7 +5,9 @@
   "license": "MIT",
   "peerDependencies": {
     "@typescript-eslint/eslint-plugin": ">= 5",
-    "eslint": ">= 8"
+    "eslint": ">= 8",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-native": "^4.0.0"
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^5.48.0"

packages/example-app/break-react-eslint-rules.tsx

@@ -0,0 +1,4 @@
+// This should trigger two errors breaking eslint-plugin-react:
+// react/react-in-jsx-scope
+// react/react-in-jsx-scope
+export const MyComponent = () => <ThisIsAViewThatDoesntExist />;

packages/example-app/break-react-native-eslint-rules.ts

@@ -0,0 +1,9 @@
+// This should trigger two errors breaking eslint-plugin-react-native:
+// react-native/no-color-literals
+// react-native/sort-styles
+const styles = StyleSheet.create({
+  button: {
+    width: 100,
+    color: "green",
+  },
+});

packages/example-app/package.json

@@ -10,7 +10,9 @@
   "devDependencies": {
     "@bam.tech/eslint-config": "*",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "eslint": "^8.31.0"
+    "eslint": "^8.31.0",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-native": "^4.0.0"
   },
   "private": "true"
 }