Feat/rule image requires accessible prop (#31)

* feat: create image-requires-accessible-prop rule

* test: add test for image-requires-accessible-prop

* feat: add breaking-example in example-app

* docs: add .md for image-requires-accessible-prop

* feat: add quick-fix suggestion

* fix: fix docs linting issues

* chore: remove unnecessary comment

* feat: simplify breaking examples

Author: P0labrD

example-app/.eslintrc

@@ -8,6 +8,7 @@
     }
   ],
   "rules": {
-    "@bam.tech/require-named-effect": "error"
+    "@bam.tech/require-named-effect": "error",
+    "@bam.tech/image-requires-accessible-prop": "error"
   }
 }

example-app/eslint-breaking-examples/break-image-requires-accessible-prop.tsx

@@ -0,0 +1,20 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger an error breaking eslint-plugin-bam-custom-rules:
+// bam-custom-rules/image-requires-accessible-prop
+
+import { Image, View } from "react-native";
+
+const MyComponent = () => {
+  return (
+    <>
+      <Image source={{ uri: "" }} accessibilityIgnoresInvertColors />
+      <OtherImage source={{ uri: "random" }} accessibilityIgnoresInvertColors />
+      <NotReallyAnImage></NotReallyAnImage>
+    </>
+  );
+};
+
+const OtherImage = Image;
+const NotReallyAnImage = View;
+export default MyComponent;

packages/eslint-plugin/README.md

@@ -54,9 +54,13 @@ This plugin exports some custom rules that you can optionally use in your projec
 
 <!-- begin auto-generated rules list -->
 
-| Name                                                       | Description                                            |
-| :--------------------------------------------------------- | :----------------------------------------------------- |
-| [require-named-effect](docs/rules/require-named-effect.md) | Enforces the use of named functions inside a useEffect |
+🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).\
+💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+| Name                                                                           | Description                                            | 🔧  | 💡  |
+| :----------------------------------------------------------------------------- | :----------------------------------------------------- | :-- | :-- |
+| [image-requires-accessible-prop](docs/rules/image-requires-accessible-prop.md) | Require accessible prop on image components            | 🔧  | 💡  |
+| [require-named-effect](docs/rules/require-named-effect.md)                     | Enforces the use of named functions inside a useEffect |     |     |
 
 <!-- end auto-generated rules list -->
 
@@ -67,7 +71,8 @@ To use a rule, just declare it in your `.eslintrc`:
 {
   "plugins": ["@bam.tech"],
   "rules": {
-    "@bam.tech/require-named-effect": "error"
+    "@bam.tech/require-named-effect": "error",
+    "@bam.tech/image-requires-accessible-prop": "error"
   }
 }
 ```

packages/eslint-plugin/docs/rules/image-requires-accessible-prop.md

@@ -0,0 +1,35 @@
+# Require accessible prop on image components (`@bam.tech/image-requires-accessible-prop`)
+
+🔧💡 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) and manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+<!-- end auto-generated rule header -->
+
+Enforces to use an accessible prop on an image.
+
+🔧💡 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) and manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<Image source={{ uri: "" }} />
+```
+
+```jsx
+<BackgroundImage source={{ uri: "" }} />
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<Image source={{ uri: "" }} accessible />
+```
+
+```jsx
+<BackgroundImage source={{ uri: "" }} accessible={false} />
+```
+
+## Further Reading
+
+This rule is only relevant if all your image components are suffixed with `Image`. If the component has children, it won't trigger an error to avoid confusion with containers.

packages/eslint-plugin/lib/rules/image-requires-accessible-prop.js

@@ -0,0 +1,59 @@
+/**
+ * @fileoverview Image requires an accessible prop
+ * @author Paul Briand
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    hasSuggestions: true,
+    type: "problem", // `problem`, `suggestion`, or `layout`
+    docs: {
+      description: "Require accessible prop on image components",
+      recommended: false,
+      url: "https://github.com/bamlab/react-native-project-config/tree/main/packages/eslint-plugin/docs/rules/image-requires-accessible-prop.md", // URL to the documentation page for this rule
+    },
+    fixable: "code", // Or `code` or `whitespace`
+    schema: [], // Add a schema if the rule has options
+    messages: {
+      imageRequiresAccessibleProp: "Image components require accessible prop",
+      suggestAddingAccessibleProp: "Add accessible prop",
+    },
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement: (node) => {
+        console.log(node);
+        if (
+          isImage(node) &&
+          !node.attributes.some((attr) => attr.name.name === "accessible")
+        ) {
+          context.report({
+            node,
+            messageId: "imageRequiresAccessibleProp",
+            suggest: [
+              {
+                messageId: "suggestAddingAccessibleProp",
+                fix: (fixer) => {
+                  const openingTagEnd = node.range[1];
+                  return fixer.insertTextBeforeRange(
+                    [openingTagEnd - (node.selfClosing ? 2 : 1), openingTagEnd],
+                    " accessible={true}"
+                  );
+                },
+              },
+            ],
+          });
+        }
+      },
+    };
+  },
+};
+
+const isImage = require("../utils/isImage");

packages/eslint-plugin/lib/utils/isImage.js

@@ -0,0 +1,16 @@
+module.exports = (element) => {
+  if (element.type === "JSXOpeningElement") {
+    if (
+      element.name.type == "JSXIdentifier" &&
+      element.name.name.endsWith("Image")
+    ) {
+      if (element.parent && element.parent.children.length > 0) {
+        return false;
+      }
+
+      return true;
+    }
+  }
+
+  return false;
+};

packages/eslint-plugin/tests/lib/rules/image-requires-accessible-prop.js

@@ -0,0 +1,45 @@
+/**
+ * @fileoverview Image requires an accessible prop
+ * @author Paul Briand
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/image-requires-accessible-prop"),
+  RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+const ruleTester = new RuleTester({
+  parser: require.resolve("@typescript-eslint/parser"),
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+const valid = [
+  `<Image source={{uri:""}} accessible />`,
+  `<BackgroundImage source={{uri:""}} accessible={false} />`,
+];
+
+const invalid = [
+  `<Image source={{uri:""}} />`,
+  `<BackgroundImage source={{uri:""}} />`,
+];
+
+ruleTester.run("image-requires-accessible-prop", rule, {
+  valid,
+
+  invalid: invalid.map((code) => ({
+    code,
+    errors: ["Image components require accessible prop"],
+  })),
+});