[New]forbid-component-props: add propNameRegex to allow / disallow prop name patterns

Author: akulsr0

docs/rules/forbid-component-props.md

@@ -44,7 +44,7 @@ Examples of **correct** code for this rule:
 ### `forbid`
 
 An array specifying the names of props that are forbidden. The default value of this option is `['className', 'style']`.
-Each array element can either be a string with the property name or object specifying the property name, an optional
+Each array element can either be a string with the property name or object specifying the property name or regex, an optional
 custom message, and a component allowlist:
 
 ```js
@@ -55,6 +55,16 @@ custom message, and a component allowlist:
 }
 ```
 
+For regex:
+
+```js
+{
+  "propNameRegex": '.-.',
+  "allowedFor": ['div'],
+  "message": "Avoid using kebab-case except div"
+}
+```
+
 Use `disallowedFor` as an exclusion list to warn on props for specific components. `disallowedFor` must have at least one item.
 
 ```js
@@ -65,6 +75,16 @@ Use `disallowedFor` as an exclusion list to warn on props for specific component
 }
 ```
 
+For regex:
+
+```js
+{
+  "propNameRegex": ".-.",
+  "disallowedFor": ["MyComponent"],
+  "message": "Avoid using kebab-case for MyComponent"
+}
+```
+
 ### Related rules
 
 - [forbid-dom-props](./forbid-dom-props.md)

lib/rules/forbid-component-props.js

@@ -70,6 +70,35 @@ module.exports = {
                 required: ['disallowedFor'],
                 additionalProperties: false,
               },
+
+              {
+                type: 'object',
+                properties: {
+                  propNameRegex: { type: 'string' },
+                  allowedFor: {
+                    type: 'array',
+                    uniqueItems: true,
+                    items: { type: 'string' },
+                  },
+                  message: { type: 'string' },
+                },
+                additionalProperties: false,
+              },
+              {
+                type: 'object',
+                properties: {
+                  propNameRegex: { type: 'string' },
+                  disallowedFor: {
+                    type: 'array',
+                    uniqueItems: true,
+                    minItems: 1,
+                    items: { type: 'string' },
+                  },
+                  message: { type: 'string' },
+                },
+                required: ['disallowedFor'],
+                additionalProperties: false,
+              },
             ],
           },
         },
@@ -81,16 +110,31 @@ module.exports = {
     const configuration = context.options[0] || {};
     const forbid = new Map((configuration.forbid || DEFAULTS).map((value) => {
       const propName = typeof value === 'string' ? value : value.propName;
+      const propRegex = value.propNameRegex;
+      const prop = propName || propRegex;
       const options = {
         allowList: typeof value === 'string' ? [] : (value.allowedFor || []),
         disallowList: typeof value === 'string' ? [] : (value.disallowedFor || []),
         message: typeof value === 'string' ? null : value.message,
+        isRegex: !!value.propNameRegex,
       };
-      return [propName, options];
+      return [prop, options];
     }));
 
+    function getPropOptions(prop) {
+      // Get config options having regex
+      const propNameRegexArray = [...forbid.entries()].filter(([, options]) => options.isRegex);
+      // Match current prop with regex options, return if matched
+      const propNameRegex = propNameRegexArray.find(([propRegex]) => new RegExp(propRegex).test(prop));
+      // Get options for matched propNameRegex
+      const propNameRegexOptions = propNameRegex && propNameRegex[1];
+
+      const options = forbid.get(prop) || propNameRegexOptions;
+      return options;
+    }
+
     function isForbidden(prop, tagName) {
-      const options = forbid.get(prop);
+      const options = getPropOptions(prop);
       if (!options) {
         return false;
       }
@@ -121,7 +165,7 @@ module.exports = {
           return;
         }
 
-        const customMessage = forbid.get(prop).message;
+        const customMessage = getPropOptions(prop).message;
 
         report(context, customMessage || messages.propIsForbidden, !customMessage && 'propIsForbidden', {
           node,

tests/lib/rules/forbid-component-props.js

@@ -248,6 +248,23 @@ ruleTester.run('forbid-component-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        const MyComponent = () => (
+          <div aria-label="welcome" />
+        );
+      `,
+      options: [
+        {
+          forbid: [
+            {
+              propNameRegex: '.-.',
+              allowedFor: ['div'],
+            },
+          ],
+        },
+      ],
+    },
   ]),
 
   invalid: parsers.all([
@@ -568,5 +585,114 @@ ruleTester.run('forbid-component-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        const MyComponent = () => (
+          <Foo kebab-case-prop={123} />
+        );
+      `,
+      options: [
+        {
+          forbid: [
+            {
+              propNameRegex: '.-.',
+            },
+          ],
+        },
+      ],
+      errors: [
+        {
+          messageId: 'propIsForbidden',
+          data: { prop: 'kebab-case-prop' },
+          line: 3,
+          column: 16,
+          type: 'JSXAttribute',
+        },
+      ],
+    },
+    {
+      code: `
+        const MyComponent = () => (
+          <Foo kebab-case-prop={123} />
+        );
+      `,
+      options: [
+        {
+          forbid: [
+            {
+              propNameRegex: '.-.',
+              message: 'Avoid using kebab-case',
+            },
+          ],
+        },
+      ],
+      errors: [
+        {
+          message: 'Avoid using kebab-case',
+          line: 3,
+          column: 16,
+          type: 'JSXAttribute',
+        },
+      ],
+    },
+    {
+      code: `
+        const MyComponent = () => (
+          <div>
+            <div aria-label="Hello Akul" />
+            <Foo kebab-case-prop={123} />
+          </div>
+        );
+      `,
+      options: [
+        {
+          forbid: [
+            {
+              propNameRegex: '.-.',
+              allowedFor: ['div'],
+            },
+          ],
+        },
+      ],
+      errors: [
+        {
+          messageId: 'propIsForbidden',
+          data: { prop: 'kebab-case-prop' },
+          line: 5,
+          column: 18,
+          type: 'JSXAttribute',
+        },
+      ],
+    },
+    {
+      code: `
+        const MyComponent = () => (
+          <div>
+            <div aria-label="Hello Akul" />
+            <h1 data-id="my-heading" />
+            <Foo kebab-case-prop={123} />
+          </div>
+        );
+      `,
+      options: [
+        {
+          forbid: [
+            {
+              propNameRegex: '.-.',
+              disallowedFor: ['Foo'],
+            },
+          ],
+        },
+      ],
+      errors: [
+        {
+          messageId: 'propIsForbidden',
+          data: { prop: 'kebab-case-prop' },
+          line: 6,
+          column: 18,
+          type: 'JSXAttribute',
+        },
+      ],
+    },
   ]),
 });