Create rule S6759: React props should be read-only (#3043)

docs/header_names/allowed_framework_names.adoc

@@ -48,6 +48,7 @@
 * Java Cryptography Extension
 * Apache HttpClient
 // JS
+* Flow.js
 * Node.js
 * Express.js
 * SSH2
@@ -61,6 +62,7 @@
 * Formidable
 * Multer
 * Passport
+* TypeScript
 // PHP
 * Core PHP
 * Guzzle

rules/S6759/javascript/metadata.json

@@ -0,0 +1,26 @@
+{
+  "title": "React props should be read-only",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6759",
+  "sqKey": "S6759",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "covered",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "HIGH",
+      "RELIABILITY": "MEDIUM",
+      "SECURITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  }
+}

rules/S6759/javascript/rule.adoc

@@ -0,0 +1,82 @@
+== Why is this an issue?
+
+React props should be read-only because it helps to enforce the principle of immutability in React components. By making props read-only, you ensure that the data passed from a parent component to a child component cannot be modified directly by the child component. This helps maintain a clear data flow and prevents unexpected side effects.
+
+If props were mutable, child components could modify the props directly, leading to unpredictable behavior and making it harder to track down bugs. By enforcing read-only props, React promotes a more predictable and maintainable codebase. Additionally, read-only props enable performance optimizations in React's rendering process by avoiding unnecessary re-renders of components.
+
+Overall, enforcing read-only props in React helps improve code reliability, maintainability, and performance.
+
+== How to fix it in Flow.js
+
+You should use Flow.js's modifier `+` to mark your component props as read-only.
+
+=== Code examples
+
+==== Noncompliant code example
+
+[source,javascript,diff-id=1,diff-type=noncompliant]
+----
+type Props = {
+  name: string, // Noncompliant: 'name' is mutable
+}
+class Welcome extends React.Component<Props> {
+  render () {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+----
+
+==== Compliant solution
+
+[source,javascript,diff-id=1,diff-type=compliant]
+----
+type Props = {
+  +name: string,
+}
+class Welcome extends React.Component<Props> {
+  render () {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+----
+
+== How to fix it in TypeScript
+
+You should use TypeScript's modifier `readonly` to mark your component props as read-only.
+
+=== Code examples
+
+==== Noncompliant code example
+
+[source,javascript,diff-id=2,diff-type=noncompliant]
+----
+type Props = {
+  name: string; // Noncompliant: 'name' is mutable
+}
+class Welcome extends React.Component<Props> {
+  render () {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+----
+
+==== Compliant solution
+
+[source,javascript,diff-id=2,diff-type=compliant]
+----
+type Props = {
+  readonly name: string;
+}
+class Welcome extends React.Component<Props> {
+  render () {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+----
+
+== Resources
+=== Documentation
+
+* https://react.dev/learn/passing-props-to-a-component[React - Passing Props to a Component]
+* https://flow.org/en/docs/types/objects/#read-only-object-properties[Flow.js - Read-only object properties]
+* https://www.typescriptlang.org/docs/handbook/2/classes.html#readonly[TypeScript - readonly]

rules/S6759/metadata.json

@@ -0,0 +1,2 @@
+{
+}