[feat] `no-mix-controlled-with-uncontrolled` and `no-only-value-prop`

[rakleed]

Describe the problem

https://github.com/kotarella1110/eslint-plugin-react-form-fields doesn't work in flat config and ESLint@9, so it would be nice to port or make similar rules in your plugin.

Also, it would be nice to support UI libraries like MUI, Ant Design, Mantine UI, etc.

Describe the solution you'd like

No response

Alternatives considered

No response

Additional context

No response

[Rel1cx]

I personally would like to have these two rules. The first rule was previously proposed in https://github.com/Rel1cx/eslint-react/pull/486 with a different name. However, under the premise of not compromising the plugin's original scope and abstraction layers (to ensure that the react-x plugin doesn't need to focus on platform-specific details or intricacies within third-party UI libraries), implementing these two rules in eslint-plugin-react-x and keeping them synchronized with component props mapping from third-party UI libraries could be quite challenging.

After #486 was proposed, I began conceptualizing ~~a method to provide specs for components and props of UI libraries through external configurations. These configurations would describe the mapping relationships between the user-defined components, user-defined component props, in the UI library and their corresponding host elements, host element attributes. This includes a controlled property to indicate whether a prop is controlled or uncontrolled. Theoretically, this would allow us to implement such rules in eslint-plugin-react-x without breaking the plugin's original scope and abstraction layer, making them applicable beyond just React DOM Additionally, since these configurations are externally supplied to eslint-plugin-react-x, when the configurations provided by eslint-react become outdated, users can overwrite them with updated configurations based on their project's UI library. This ensures the rules correctly recognize components from these UI libraries without waiting for eslint-react updates and releases.~~

[espipj]

Hello it doesn't seem flat configurations are exported anymore? Im talking about the ones added in this PR https://github.com/Rel1cx/eslint-react/pull/11/

[keysmashes]

Something like this would be extremely useful. I'd also be interested in the opposite of react-form-fields/no-only-value-prop – in a codebase I'm working on there are several components with only an onChange (neither value nor even defaultValue), which is clearly wrong, but might sometimes seem to work ok at a quick glance.

[silverwind]

As for custom components, eslint-plugin-react supports such configurations:

{
  "settings": {
    "react": {
      "formComponents": [
        // Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />
        "CustomForm",
        {"name": "SimpleForm", "formAttribute": "endpoint"},
        {"name": "Form", "formAttribute": ["registerEndpoint", "loginEndpoint"]}, // allows specifying multiple properties if necessary
      ],
      "linkComponents": [
        // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
        "Hyperlink",
        {"name": "MyLink", "linkAttribute": "to"},
        {"name": "Link", "linkAttribute": ["to", "href"]}, // allows specifying multiple properties if necessary
      ]
    }
  }
}

So you could support a settings["react-x"].inputComponents in similar fashion to let users declare the names of their custom components, and maybe even the affected props:

{
  inputComponents: [
    {name: "Input", valueAttribute: ["value"], defaultValueAttribute: ["defaultValue"]}
  ]
}