Require Context suffix for context providers, closes #1295 (#1296)

Author: Rel1cx

packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.mdx

@@ -34,7 +34,9 @@ Replaces usages of `<Context.Provider>` with `<Context>`.
 
 In React 19, you can render `<Context>` as a provider instead of `<Context.Provider>`.
 
-In addition, it is recommended to enable the [`naming-convention/context-name`](./naming-convention-context-name) rule to enforce consistent naming conventions for contexts.
+<Callout type="warning">
+  This rule depends on the [`naming-convention/context-name`](./naming-convention-context-name) rule to identify context components. Make sure to enable that rule to ensure this rule works correctly.
+</Callout>
 
 ## Examples
 
@@ -81,7 +83,7 @@ function App({ children }) {
 
 ## See Also
 
-- [`no-forward-ref`](./no-forward-ref)\
-  Replaces usages of `forwardRef` with passing `ref` as a prop.
 - [`no-use-context`](./no-use-context)\
   Replaces usages of `useContext` with `use`.
+- [`naming-convention/context-name`](./naming-convention-context-name)\
+  Enforces consistent naming conventions for contexts.

packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.spec.ts

@@ -5,19 +5,6 @@ import rule, { RULE_NAME } from "./no-context-provider";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
-    {
-      code: tsx`<context.Provider />`,
-      errors: [
-        {
-          messageId: "noContextProvider",
-        },
-      ],
-      settings: {
-        "react-x": {
-          version: "19.0.0",
-        },
-      },
-    },
     {
       code: tsx`<Context.Provider />`,
       errors: [
@@ -60,47 +47,6 @@ ruleTester.run(RULE_NAME, rule, {
         },
       },
     },
-    {
-      code: tsx`<Foo.Bar.Provider>{children}</Foo.Bar.Provider>`,
-      errors: [
-        {
-          messageId: "noContextProvider",
-        },
-      ],
-      output: tsx`<Foo.Bar>{children}</Foo.Bar>`,
-      settings: {
-        "react-x": {
-          version: "19.0.0",
-        },
-      },
-    },
-    {
-      code: tsx`<foo.Bar.Provider>{children}</foo.Bar.Provider>`,
-      errors: [
-        {
-          messageId: "noContextProvider",
-        },
-      ],
-      output: tsx`<foo.Bar>{children}</foo.Bar>`,
-      settings: {
-        "react-x": {
-          version: "19.0.0",
-        },
-      },
-    },
-    {
-      code: tsx`<foo.bar.Provider>{children}</foo.bar.Provider>`,
-      errors: [
-        {
-          messageId: "noContextProvider",
-        },
-      ],
-      settings: {
-        "react-x": {
-          version: "19.0.0",
-        },
-      },
-    },
   ],
   valid: [
     {
@@ -165,5 +111,19 @@ ruleTester.run(RULE_NAME, rule, {
         },
       },
     },
+    {
+      code: tsx`
+        import { Tooltip } from '@base-ui-components/react/tooltip'
+
+        function Component() {
+          return <Tooltip.Provider>hello world</Tooltip.Provider>;
+        }
+      `,
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
   ],
 });

packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.ts

@@ -49,8 +49,8 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
       const contextSelfName = parts.pop();
       // Exit if the element is not a "Provider"
       if (selfName !== "Provider") return;
-      // Exit if there is no context name
-      if (contextSelfName == null) return;
+      // Exit if there is no context name or it doesn't end with "Context"
+      if (contextSelfName == null || !contextSelfName.endsWith("Context")) return;
       context.report({
         messageId: "noContextProvider",
         node,

packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.mdx

@@ -112,7 +112,3 @@ function MyInput({
 
 - [`no-useless-forward-ref`](./no-useless-forward-ref)\
   Enforces that `forwardRef` is only used when a `ref` parameter is declared.
-- [`no-context-provider`](./no-context-provider)\
-  Replaces usages of `<Context.Provider>` with `<Context>`.
-- [`no-use-context`](./no-use-context)\
-  Replaces usages of `useContext` with `use`.

packages/plugins/eslint-plugin-react-x/src/rules/no-use-context.mdx

@@ -76,5 +76,5 @@ function Button() {
 
 - [`no-context-provider`](./no-context-provider)\
   Replaces usages of `<Context.Provider>` with `<Context>`.
-- [`no-forward-ref`](./no-forward-ref)\
-  Replace usages of `forwardRef` with passing `ref` as a prop.
+- [`naming-convention/context-name`](./naming-convention-context-name)\
+  Enforces consistent naming conventions for contexts.

packages/plugins/eslint-plugin/README.md

@@ -186,8 +186,8 @@ ESLint React is not affiliated with Meta Corporation or [facebook/react](https:/
 
 Contributions are welcome!
 
-Please follow our [contributing guidelines](https://github.com/Rel1cx/eslint-react/tree/main/.github/CONTRIBUTING.md).
+Please follow our [contributing guidelines](https://github.com/Rel1cx/eslint-react/tree/no-context-provider/.github/CONTRIBUTING.md).
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](https://github.com/Rel1cx/eslint-react/tree/main/LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](https://github.com/Rel1cx/eslint-react/tree/no-context-provider/LICENSE) file for details.