feat(react-x): add 'no-unused-props' rule (#1161)

Signed-off-by: Ulrich Stark <[email protected]>
Signed-off-by: REL1CX <[email protected]>
Co-authored-by: REL1CX <[email protected]>

Author: ulrichstark

apps/website/content/docs/migration.mdx

@@ -125,7 +125,7 @@ The following table compares all rules from `eslint-plugin-react` with their ESL
 | [`no-unsafe`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md)                                                         | [`no-unsafe-component-will-mount`](/docs/rules/no-unsafe-component-will-mount) + [`no-unsafe-component-will-receive-props`](/docs/rules/no-unsafe-component-will-receive-props) + [`no-unsafe-component-will-update`](/docs/rules/no-unsafe-component-will-update)                                                       | ✅           | 🟡     |
 | [`no-unstable-nested-components`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md)                 | [`no-nested-component-definitions`](/docs/rules/no-nested-component-definitions)                                                                                                                                                                                                                                         | ✅           | ✅      |
 | [`no-unused-class-component-methods`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-class-component-methods.md)         | [`no-unused-class-component-members`](/docs/rules/no-unused-class-component-members)                                                                                                                                                                                                                                     | ✅           | 🚫     |
-| [`no-unused-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md)                                   | [`no-prop-types`](/docs/rules/no-prop-types)                                                                                                                                                                                                                                                                             | ✅           | 🚫     |
+| [`no-unused-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md)                                   | [`no-unused-props`](/docs/rules/no-unused-props)                                                                                                                                                                                                                                                                         | ✅           | 🚫     |
 | [`no-unused-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-state.md)                                             | [`no-unused-state`](/docs/rules/no-unused-state)                                                                                                                                                                                                                                                                         | ✅           | 🚫     |
 | [`no-will-update-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md)                           | [`no-set-state-in-component-will-update`](/docs/rules/no-set-state-in-component-will-update)                                                                                                                                                                                                                             | ✅           | ✅      |
 | [`prefer-es6-class`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md)                                           | [`no-prop-types`](/docs/rules/no-prop-types)                                                                                                                                                                                                                                                                             | ✅           | 🚫     |

apps/website/content/docs/rules/meta.json

@@ -55,6 +55,7 @@
     "no-unstable-context-value",
     "no-unstable-default-props",
     "no-unused-class-component-members",
+    "no-unused-props",
     "no-unused-state",
     "no-use-context",
     "no-useless-forward-ref",

apps/website/content/docs/rules/overview.mdx

@@ -82,6 +82,7 @@ The `jsx-*` rules check for issues exclusive to JSX syntax, which are absent fro
 | [`no-unstable-context-value`](./no-unstable-context-value)                           | 1️⃣ |           | Prevents non-stable values (i.e. object literals) from being used as a value for `Context.Provider` |          |
 | [`no-unstable-default-props`](./no-unstable-default-props)                           | 1️⃣ |           | Prevents using referential-type values as default props in object destructuring                     |          |
 | [`no-unused-class-component-members`](./no-unused-class-component-members)           | 1️⃣ |           | Warns unused class component methods and properties                                                 |          |
+| [`no-unused-props`](./no-unused-props)                                               | 0️⃣ |           | Warns about unused component prop declarations                                                      |          |
 | [`no-unused-state`](./no-unused-state)                                               | 1️⃣ |           | Warns unused class component state                                                                  |          |
 | [`no-use-context`](./no-use-context)                                                 | 1️⃣ |   `🔄`    | Replaces usages of `useContext` with `use`                                                          | >=19.0.0 |
 | [`no-useless-forward-ref`](./no-useless-forward-ref)                                 | 1️⃣ |           | Disallow useless `forwardRef` calls on components that don't use `ref`s                             |          |

packages/plugins/eslint-plugin-react-x/src/configs/recommended.ts

@@ -56,6 +56,7 @@ export const rules = {
   "react-x/no-unstable-context-value": "warn",
   "react-x/no-unstable-default-props": "warn",
   "react-x/no-unused-class-component-members": "warn",
+  // "react-x/no-unused-props": "warn",
   "react-x/no-unused-state": "warn",
   "react-x/no-use-context": "warn",
   "react-x/no-useless-forward-ref": "warn",

packages/plugins/eslint-plugin-react-x/src/plugin.ts

@@ -51,6 +51,7 @@ import noUnsafeComponentWillUpdate from "./rules/no-unsafe-component-will-update
 import noUnstableContextValue from "./rules/no-unstable-context-value";
 import noUnstableDefaultProps from "./rules/no-unstable-default-props";
 import noUnusedClassComponentMembers from "./rules/no-unused-class-component-members";
+import noUnusedProps from "./rules/no-unused-props";
 import noUnusedState from "./rules/no-unused-state";
 import noUseContext from "./rules/no-use-context";
 import noUselessForwardRef from "./rules/no-useless-forward-ref";
@@ -127,6 +128,7 @@ export const plugin = {
     "no-unstable-context-value": noUnstableContextValue,
     "no-unstable-default-props": noUnstableDefaultProps,
     "no-unused-class-component-members": noUnusedClassComponentMembers,
+    "no-unused-props": noUnusedProps,
     "no-unused-state": noUnusedState,
     "no-use-context": noUseContext,
     "no-useless-forward-ref": noUselessForwardRef,

packages/plugins/eslint-plugin-react-x/src/rules/no-unused-props.md

@@ -0,0 +1,81 @@
+---
+title: no-unused-props
+---
+
+**Full Name in `eslint-plugin-react-x`**
+
+```sh copy
+react-x/no-unused-props
+```
+
+**Full Name in `@eslint-react/eslint-plugin`**
+
+```sh copy
+@eslint-react/no-unused-props
+```
+
+## Description
+
+Warns about unused component prop declarations.
+
+Unused props increase maintenance overhead and may mislead consumers of the component into thinking the prop is required or meaningful, even when it has no effect.
+
+This is the TypeScript-only version of [`eslint-plugin-react/no-unused-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md). In contrast to the original rule, this rule
+
+- doesn't support the legacy propTypes syntax
+- combines the used props of one type definition declared by multiple components
+
+## Examples
+
+### Failing
+
+```tsx
+interface Props {
+  abc: string; // used
+  hello: string; // NOT used
+}
+
+function Component(props: Props) {
+  const { abc } = props; // `hello` isn't accessed from `props`
+  return null;
+}
+```
+
+### Passing
+
+```tsx
+interface Props {
+  abc: string; // used
+  hello: string; // used
+}
+
+function Component(props: Props) {
+  const { abc, hello } = props;
+  return null;
+}
+```
+
+```tsx
+interface Props {
+  abc: string; // used by Component1
+  hello: string; // used by Component2
+}
+
+function Component1({ abc }: Props) {
+  return null;
+}
+
+function Component2({ hello }: Props) {
+  return null;
+}
+```
+
+## Implementation
+
+- [Rule source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-props.ts)
+- [Test source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-props.spec.ts)
+
+## See Also
+
+- [`no-prop-types`](/docs/rules/no-prop-types)\
+  Disallows `propTypes`