feat: Add no inline style rule (#131)

* BREAKING CHANGE: Add no-inline-style custom rule

* feat: add no-inline-style rule to recommended config

Author: remilry

example-app/eslint-breaking-examples/break-no-inline-style.tsx

@@ -0,0 +1,5 @@
+import { View } from "react-native";
+
+export const MyComponent = () => {
+  return <View style={{ flex: 1 }} />;
+};

packages/eslint-plugin/README.md

@@ -131,6 +131,7 @@ This plugin exports some custom rules that you can optionally use in your projec
 | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------- | :-- |
 | [await-user-event](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/await-user-event.md)                 | Enforces awaiting userEvent calls                          | 🔧  |
 | [no-different-displayname](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-different-displayname.md) | Enforce component displayName to match with component name | 🔧  |
+| [no-inline-style](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-inline-style.md)                   | Detect inline styles in JSX                                |     |
 | [prefer-user-event](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/prefer-user-event.md)               | Enforces usage of userEvent over fireEvent in tests.       | 🔧  |
 | [require-named-effect](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/require-named-effect.md)         | Enforces the use of named functions inside a useEffect     |     |
 

packages/eslint-plugin/docs/rules/no-inline-style.md

@@ -0,0 +1,45 @@
+# Detect inline styles in JSX (`@bam.tech/no-inline-style`)
+
+<!-- end auto-generated rule header -->
+
+> **Note:** This rule is a flat config adaptation of [`react-native/no-inline-styles`](https://github.com/Intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-inline-styles.md).
+
+Disallows the use of inline styles in JSX elements.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+const MyComponent = () => <View style={{ flex: 1 }} />;
+```
+
+```jsx
+const MyComponent = () => (
+  <View style={[styles.container, { marginTop: 10 }]} />
+);
+```
+
+```jsx
+const MyComponent = () => (
+  <View style={condition ? { flex: 1 } : { flex: 2 }} />
+);
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});
+
+const MyComponent = () => <View style={styles.container} />;
+```
+
+```jsx
+const MyComponent = () => <View style={[styles.container, styles.active]} />;
+```
+
+```jsx
+const MyComponent = ({ style }) => <View style={style} />;
+```

packages/eslint-plugin/lib/configs/recommended.ts

@@ -8,6 +8,7 @@ import { noDifferentDisplaynameRule } from "../rules/no-different-displayname";
 import { requireNamedEffectRule } from "../rules/require-named-effect";
 import { preferUserEventRule } from "../rules/prefer-user-event";
 import { awaitUserEventRule } from "../rules/await-user-event";
+import { noInlineStyleRule } from "../rules/no-inline-style";
 const eslintPluginPrettierRecommended = require("eslint-plugin-prettier/recommended");
 
 // @TODO Add the @bam.tech/import plugins
@@ -43,6 +44,7 @@ export const recommendedConfig = tseslint.config(
       "react/jsx-no-useless-fragment": "error",
       "@bam.tech/no-different-displayname": "error",
       "@bam.tech/require-named-effect": "error",
+      "@bam.tech/no-inline-style": "error",
       // ☢️ Rules that require type information must be added to the `.ts` overrides section below
     },
     plugins: {
@@ -55,6 +57,7 @@ export const recommendedConfig = tseslint.config(
           "require-named-effect": requireNamedEffectRule,
           "prefer-user-event": preferUserEventRule,
           "await-user-event": awaitUserEventRule,
+          "no-inline-style": noInlineStyleRule,
         },
       },
     },

packages/eslint-plugin/lib/rules/index.ts

@@ -2,10 +2,12 @@ import { awaitUserEventRule } from "./await-user-event";
 import { noDifferentDisplaynameRule } from "./no-different-displayname";
 import { preferUserEventRule } from "./prefer-user-event";
 import { requireNamedEffectRule } from "./require-named-effect";
+import { noInlineStyleRule } from "./no-inline-style";
 
 export default {
   "await-user-event": awaitUserEventRule,
   "prefer-user-event": preferUserEventRule,
   "require-named-effect": requireNamedEffectRule,
   "no-different-displayname": noDifferentDisplaynameRule,
+  "no-inline-style": noInlineStyleRule,
 };