Create rule S6775: All defaultProps should have non-required PropType (…

…#3082)

SonarSource/SonarJS#4134

rules/S6775/javascript/metadata.json

@@ -0,0 +1,26 @@
+{
+  "title": "All \"defaultProps\" should have non-required PropTypes",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6775",
+  "sqKey": "S6775",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "HIGH",
+      "RELIABILITY": "MEDIUM",
+      "SECURITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  }
+}

rules/S6775/javascript/rule.adoc

@@ -0,0 +1,89 @@
+== Why is this an issue?
+
+React Legacy APIs provide a way to define the default values for props and check the prop types at runtime. This rule verifies if a `defaultProps` definition does have a corresponding `propTypes` definition. If it is missing, this could be the result of errors in refactoring or a spelling mistake.
+
+It is also an error if a `defaultProp` has `propType` that is marked as `isRequired`.
+
+== How to fix it in PropTypes
+
+[source,javascript,diff-id=1,diff-type=noncompliant]
+----
+function MyComponent({foo, bar}) {
+  return <div>{foo}{bar}</div>;    
+}
+
+MyComponent.propTypes = {
+  foo: React.PropTypes.string.isRequired,
+};
+
+MyComponent.defaultProps = {
+  foo: "foo", // Noncompliant: foo is a required prop
+  bar: "bar", // Noncompliant: bar propType is missing
+};
+----
+
+To fix the issue, verify that each `defaultProp` has a corresponding `propType` definition and is not marked as `isRequired`.
+
+[source,javascript,diff-id=1,diff-type=compliant]
+----
+function MyComponent({foo, bar}) {
+  return <div>{foo}{bar}</div>;    
+}
+
+MyComponent.propTypes = {
+  foo: React.PropTypes.string,
+  bar: React.PropTypes.string,
+};
+
+MyComponent.defaultProps = {
+  foo: "foo", 
+  bar: "bar",
+};
+----
+
+
+== How to fix it in TypeScript
+
+[source,javascript,diff-id=2,diff-type=noncompliant]
+----
+type Props = {
+  foo: string,
+  bar?: string
+}
+
+function MyComponent({foo, bar}: Props) {
+  return <div>{foo}{bar}</div>;    
+}
+
+MyComponent.defaultProps = {
+  foo: "foo", // Noncompliant: foo is a required prop
+  bar: "bar", 
+};
+----
+
+To fix the issue, verify that each `defaultProp` has a corresponding type definition and is marked as optional.
+
+[source,javascript,diff-id=2,diff-type=compliant]
+----
+type Props = {
+  foo?: string,
+  bar?: string
+}
+
+function MyComponent({foo, bar}: Props) {
+  return <div>{foo}{bar}</div>;    
+}
+
+MyComponent.defaultProps = {
+  foo: "foo", 
+  bar: "bar", 
+};
+----
+
+
+== Resources
+=== Documentation
+
+* https://react.dev/learn/typescript#typescript-with-react-components[React - TypeScript with React Components]
+* https://react.dev/learn/passing-props-to-a-component#specifying-a-default-value-for-a-prop[React - Specifying a default value for a prop]
+* https://legacy.reactjs.org/docs/typechecking-with-proptypes.html[React Legacy APIs - Typechecking With PropTypes]

rules/S6775/metadata.json

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