Add no-forward-ref rule (#7)

Since React 19, we no longer need forwardRef and can use simpler syntax.
This rule reminds us not to use forwardRef.

Author: denis-sokolov

src/config/other.ts

@@ -10,6 +10,7 @@ export const otherRules = {
   "@denis-sokolov/no-single-letter-generic-types": "error",
   "@denis-sokolov/no-todos": "error",
 
+  "@qawolf/no-forward-ref": "error",
   "@qawolf/no-utils": "error",
   "@qawolf/restrict-names": "error",
   "@qawolf/restrict-stop-propagation": "error",

src/rules/index.ts

@@ -5,6 +5,7 @@ import importsConfigValid from "./imports-config-valid";
 import importsPrefix from "./imports-prefix";
 import maxLines from "./max-lines";
 import noFloatingPromises from "./no-floating-promises";
+import noForwardRef from "./no-forward-ref";
 import noUtils from "./no-utils";
 import restrictNames from "./restrict-names";
 import restrictNewError from "./restrict-new-error";
@@ -22,4 +23,5 @@ export const rules = {
   "restrict-react-namespace": restrictReactNamespace,
   "restrict-stop-propagation": restrictStopPropagation,
   "no-floating-promises": noFloatingPromises,
+  "no-forward-ref": noForwardRef,
 } satisfies Record<string, RuleDefinition>;

src/rules/no-forward-ref.test.ts

@@ -0,0 +1,28 @@
+import { valid, invalid } from "./tester";
+import rule from "./no-forward-ref";
+
+valid(rule, "can import Ref", "import { type Ref } from 'react'");
+valid(rule, "can use ref prop in jsx", "<Component ref={ref} />");
+
+invalid(
+  rule,
+  "can not import forwardRef",
+  "import { forwardRef } from 'react'",
+);
+invalid(
+  rule,
+  "can not import type forwardRef",
+  "import { type forwardRef } from 'react'",
+);
+
+invalid(
+  rule,
+  "can not import forwardRef with other imports",
+  "import { type Ref, forwardRef, useState } from 'react'",
+);
+
+invalid(
+  rule,
+  "can not import ForwardedRef",
+  "import { type ForwardedRef } from 'react'",
+);

src/rules/no-forward-ref.ts

@@ -0,0 +1,14 @@
+import { defineImportsRule } from "../imports";
+
+export default defineImportsRule(function (details) {
+  const { names, imported } = details;
+  if (imported.type !== "other") return { allowed: true };
+  if (!names.all.includes("forwardRef") && !names.all.includes("ForwardedRef"))
+    return { allowed: true };
+
+  return {
+    allowed: false,
+    forbiddenNames: ["forwardRef", "ForwardedRef"],
+    message: `Use the ref prop on your component instead. https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop`,
+  };
+});