diff --git a/rules/S6775/javascript/metadata.json b/rules/S6775/javascript/metadata.json new file mode 100644 index 00000000000..5fe16eae44d --- /dev/null +++ b/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" + } +} diff --git a/rules/S6775/javascript/rule.adoc b/rules/S6775/javascript/rule.adoc new file mode 100644 index 00000000000..afccbebac72 --- /dev/null +++ b/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
{foo}{bar}
; +} + +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
{foo}{bar}
; +} + +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
{foo}{bar}
; +} + +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
{foo}{bar}
; +} + +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] diff --git a/rules/S6775/metadata.json b/rules/S6775/metadata.json new file mode 100644 index 00000000000..2c63c085104 --- /dev/null +++ b/rules/S6775/metadata.json @@ -0,0 +1,2 @@ +{ +}