[Fix] forbid-prop-types: Ignore objects that are not of type React.PropTypes

CHANGELOG.md

@@ -19,6 +19,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`display-name`]: fix identifying `_` as a capital letter ([#3335][] @apbarrero)
 * [`require-default-props`]: avoid a crash when function has no props param ([#3350][] @noahnu)
 * [`display-name`], component detection: fix HOF returning null as Components ([#3347][] @jxm-math)
+* [`forbid-prop-types`]: Ignore objects that are not of type React.PropTypes ([#3326][] @TildaDares)
 
 ### Changed
 * [Refactor] [`jsx-indent-props`]: improved readability of the checkNodesIndent function ([#3315][] @caroline223)
@@ -40,6 +41,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3331]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3331
 [#3328]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3328
 [#3327]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3327
+[#3326]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3326
 [#3321]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3321
 [#3320]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3320
 [#3317]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3317

lib/rules/forbid-prop-types.js

@@ -60,6 +60,27 @@ module.exports = {
     const configuration = context.options[0] || {};
     const checkContextTypes = configuration.checkContextTypes || false;
     const checkChildContextTypes = configuration.checkChildContextTypes || false;
+    let propTypesPackageName = null;
+    let reactPackageName = null;
+    let isForeignPropTypesPackage = false;
+
+    function isPropTypesPackage(node) {
+      return (
+        node.type === 'Identifier'
+        && (
+          node.name === null
+          || node.name === propTypesPackageName
+          || !isForeignPropTypesPackage
+        )
+      ) || (
+        node.type === 'MemberExpression'
+        && (
+          node.object.name === null
+          || node.object.name === reactPackageName
+          || !isForeignPropTypesPackage
+        )
+      );
+    }
 
     function isForbidden(type) {
       const forbid = configuration.forbid || DEFAULTS;
@@ -113,12 +134,18 @@ module.exports = {
             value = value.object;
           }
           if (value.type === 'CallExpression') {
+            if (!isPropTypesPackage(value.callee)) {
+              return;
+            }
             value.arguments.forEach((arg) => {
               const name = arg.type === 'MemberExpression' ? arg.property.name : arg.name;
               reportIfForbidden(name, declaration, name);
             });
             value = value.callee;
           }
+          if (!isPropTypesPackage(value)) {
+            return;
+          }
           if (value.property) {
             target = value.property.name;
           } else if (value.type === 'Identifier') {
@@ -157,9 +184,35 @@ module.exports = {
     }
 
     return {
+      ImportDeclaration(node) {
+        if (node.source && node.source.value === 'prop-types') { // import PropType from "prop-types"
+          if (node.specifiers.length > 0) {
+            propTypesPackageName = node.specifiers[0].local.name;
+          }
+        } else if (node.source && node.source.value === 'react') { // import { PropTypes } from "react"
+          if (node.specifiers.length > 0) {
+            reactPackageName = node.specifiers[0].local.name; // guard against accidental anonymous `import "react"`
+          }
+          if (node.specifiers.length >= 1) {
+            const propTypesSpecifier = node.specifiers.find((specifier) => (
+              specifier.imported && specifier.imported.name === 'PropTypes'
+            ));
+            if (propTypesSpecifier) {
+              propTypesPackageName = propTypesSpecifier.local.name;
+            }
+          }
+        } else { // package is not imported from "react" or "prop-types"
+          // eslint-disable-next-line no-lonely-if
+          if (node.specifiers.some((x) => x.local.name === 'PropTypes')) { // assert: node.specifiers.length > 1
+            isForeignPropTypesPackage = true;
+          }
+        }
+      },
+
       'ClassProperty, PropertyDefinition'(node) {
         if (
           !propsUtil.isPropTypesDeclaration(node)
+          && !isPropTypesPackage(node)
           && !shouldCheckContextTypes(node)
           && !shouldCheckChildContextTypes(node)
         ) {
@@ -171,6 +224,7 @@ module.exports = {
       MemberExpression(node) {
         if (
           !propsUtil.isPropTypesDeclaration(node)
+          && !isPropTypesPackage(node)
           && !shouldCheckContextTypes(node)
           && !shouldCheckChildContextTypes(node)
         ) {
@@ -181,6 +235,14 @@ module.exports = {
       },
 
       CallExpression(node) {
+        if (
+          node.callee.object
+          && !isPropTypesPackage(node.callee.object)
+          && !propsUtil.isPropTypesDeclaration(node.callee)
+        ) {
+          return;
+        }
+
         if (
           node.arguments.length > 0
           && (node.callee.name === 'shape' || astUtil.getPropertyName(node.callee) === 'shape')
@@ -192,6 +254,7 @@ module.exports = {
       MethodDefinition(node) {
         if (
           !propsUtil.isPropTypesDeclaration(node)
+          && !isPropTypesPackage(node)
           && !shouldCheckContextTypes(node)
           && !shouldCheckChildContextTypes(node)
         ) {
@@ -213,6 +276,7 @@ module.exports = {
 
           if (
             !propsUtil.isPropTypesDeclaration(property)
+            && !isPropTypesPackage(property)
             && !shouldCheckContextTypes(property)
             && !shouldCheckChildContextTypes(property)
           ) {

tests/lib/rules/forbid-prop-types.js

@@ -627,6 +627,91 @@ ruleTester.run('forbid-prop-types', rule, {
           bar: PropTypes.shape(Foo),
         };
       `,
+    },
+    {
+      code: `
+        import yup from "yup"
+        const formValidation = Yup.object().shape({
+          name: Yup.string(),
+          customer_ids: Yup.array()
+        });
+      `,
+    },
+    {
+      code: `
+        import yup from "Yup"
+        const validation = yup.object().shape({
+          address: yup.object({
+            city: yup.string(),
+            zip: yup.string(),
+          })
+        })
+      `,
+      options: [
+        {
+          forbid: ['string', 'object'],
+        },
+      ],
+    },
+    {
+      code: `
+        import yup from "yup"
+        Yup.array(
+          Yup.object().shape({
+            value: Yup.number()
+          })
+        )
+      `,
+      options: [{ forbid: ['number'] }],
+    },
+    {
+      code: `
+        import CustomPropTypes from "prop-types";
+        class Component extends React.Component {};
+        Component.propTypes = {
+          a: CustomPropTypes.shape({
+            b: CustomPropTypes.String,
+            c: CustomPropTypes.number.isRequired,
+          })
+        }
+      `,
+    },
+    {
+      code: `
+        import CustomReact from "react"
+        class Component extends React.Component {};
+        Component.propTypes = {
+          b: CustomReact.PropTypes.string,
+        }
+      `,
+    },
+    {
+      code: `
+        import PropTypes from "yup"
+        class Component extends React.Component {};
+        Component.propTypes = {
+          b: PropTypes.array(),
+        }
+      `,
+    },
+    {
+      code: `
+        import { PropTypes, shape, any } from "yup"
+        class Component extends React.Component {};
+        Component.propTypes = {
+          b: PropTypes.any,
+        }
+      `,
+      options: [{ forbid: ['any'] }],
+    },
+    {
+      code: `
+        import { PropTypes } from "not-react"
+        class Component extends React.Component {};
+        Component.propTypes = {
+          b: PropTypes.array(),
+        }
+      `,
     }
   )),
 
@@ -1724,17 +1809,17 @@ ruleTester.run('forbid-prop-types', rule, {
         import React from './React';
 
         import { arrayOf, object } from 'prop-types';
-        
+
         const App = ({ foo }) => (
           <div>
             Hello world {foo}
           </div>
         );
-        
+
         App.propTypes = {
           foo: arrayOf(object)
         }
-        
+
         export default App;
       `,
       errors: [
@@ -1749,17 +1834,17 @@ ruleTester.run('forbid-prop-types', rule, {
         import React from './React';
 
         import PropTypes, { arrayOf } from 'prop-types';
-        
+
         const App = ({ foo }) => (
           <div>
             Hello world {foo}
           </div>
         );
-        
+
         App.propTypes = {
           foo: arrayOf(PropTypes.object)
         }
-        
+
         export default App;
       `,
       errors: [
@@ -1769,5 +1854,56 @@ ruleTester.run('forbid-prop-types', rule, {
         },
       ],
     },
+    {
+      code: `
+        import CustomPropTypes from "prop-types";
+        class Component extends React.Component {};
+        Component.propTypes = {
+          a: CustomPropTypes.shape({
+            b: CustomPropTypes.String,
+            c: CustomPropTypes.object.isRequired,
+          })
+        }
+      `,
+      errors: [
+        {
+          messageId: 'forbiddenPropType',
+          data: { target: 'object' },
+        },
+      ],
+    },
+    {
+      code: `
+        import { PropTypes as CustomPropTypes } from "react";
+        class Component extends React.Component {};
+        Component.propTypes = {
+          a: CustomPropTypes.shape({
+            b: CustomPropTypes.String,
+            c: CustomPropTypes.object.isRequired,
+          })
+        }
+      `,
+      errors: [
+        {
+          messageId: 'forbiddenPropType',
+          data: { target: 'object' },
+        },
+      ],
+    },
+    {
+      code: `
+        import CustomReact from "react"
+        class Component extends React.Component {};
+        Component.propTypes = {
+          b: CustomReact.PropTypes.object,
+        }
+      `,
+      errors: [
+        {
+          messageId: 'forbiddenPropType',
+          data: { target: 'object' },
+        },
+      ],
+    },
   ]),
 });