[Enhance] forbid-component-props accepts allowedForRegex and disallowedForRegex

docs/rules/forbid-component-props.md

@@ -55,7 +55,16 @@ custom message, and a component allowlist:
 }
 ```
 
-Use `disallowedFor` as an exclusion list to warn on props for specific components. `disallowedFor` must have at least one item.
+```js
+{
+ "propName": "someProp",
+ "allowedFor": ["SomeComponent", "AnotherComponent"],
+ "allowedForRegex": "^Icon\d+[A-Z]",
+ "message": "Avoid using someProp except SomeComponent, AnotherComponent, and Icons"
+}
+```
+
+Use `disallowedFor` as an exclusion list to warn on props for specific components. `disallowedFor` must have at least one item, or use `disallowedForRegex`. The two may also be combined.
 
 ```js
 {
@@ -65,6 +74,23 @@ Use `disallowedFor` as an exclusion list to warn on props for specific component
 }
 ```
 
+```js
+{
+ "propName": "someProp",
+ "disallowedForRegex": "^Icon\d+[A-Z]",
+ "message": "Avoid using someProp for Icons"
+}
+```
+
+```js
+{
+ "propName": "someProp",
+ "disallowedFor": ["SomeComponent"],
+ "disallowedForRegex": "^Icon\d+[A-Z]",
+ "message": "Avoid using someProp for SomeComponent and Icons"
+}
+```
+
 ### Related rules
 
 - [forbid-dom-props](./forbid-dom-props.md)

lib/rules/forbid-component-props.js

@@ -50,6 +50,7 @@
  uniqueItems: true,
  items: { type: 'string' },
  },
+ allowedForRegex: { type: 'string' },
  message: { type: 'string' },
  },
  additionalProperties: false,
@@ -64,11 +65,27 @@
  minItems: 1,
  items: { type: 'string' },
  },
+ disallowedForRegex: { type: 'string' },
  message: { type: 'string' },
  },
  required: ['disallowedFor'],
  additionalProperties: false,
  },
+ {
+ type: 'object',
+ properties: {
+ propName: { type: 'string' },
+ disallowedFor: {
+ type: 'array',
+ uniqueItems: true,
+ items: { type: 'string' },
+ },
+ disallowedForRegex: { type: 'string' },
+ message: { type: 'string' },
+ },
+ required: ['disallowedForRegex'],
+ additionalProperties: false,
+ },
  ],
  },
  },
@@ -80,9 +97,22 @@
  const configuration = context.options[0] || {};
  const forbid = new Map((configuration.forbid || DEFAULTS).map((value) => {
  const propName = typeof value === 'string' ? value : value.propName;
+
+ let allowRegex = null;
+ if (typeof value !== 'string' && value.allowedForRegex) {
+ allowRegex = new RegExp(value.allowedForRegex);
+ }
+
+ let disallowRegex = null;
+ if (typeof value !== 'string' && value.disallowedForRegex) {
+ disallowRegex = new RegExp(value.disallowedForRegex);
+ }
+
  const options = {
  allowList: typeof value === 'string' ? [] : (value.allowedFor || []),
+ allowRegex,
  disallowList: typeof value === 'string' ? [] : (value.disallowedFor || []),
+ disallowRegex,
  message: typeof value === 'string' ? null : value.message,
  };
  return [propName, options];
@@ -94,13 +124,23 @@
  return false;
  }
 
- // disallowList should have a least one item (schema configuration)
- const isTagForbidden = options.disallowList.length > 0
- ? options.disallowList.indexOf(tagName) !== -1
- : options.allowList.indexOf(tagName) === -1;
-
  // if the tagName is undefined (`<this.something>`), we assume it's a forbidden element
- return typeof tagName === 'undefined' || isTagForbidden;
+ if (typeof tagName === 'undefined') {
+ return true;
+ }
+
+ // either disallowList should have a least one item or disallowListRegex is given (schema configuration)
+ if (options.disallowList.length > 0 || options.disallowRegex) {
+ return (
+ options.disallowList.indexOf(tagName) !== -1
+ || (options.disallowRegex && options.disallowRegex.test(tagName))
+ );
+ }
+
+ return (
+ options.allowList.indexOf(tagName) === -1
+ && (!options.allowRegex || !options.allowRegex.test(tagName))
+ );
  }
 
  return {

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

@@ -248,6 +248,43 @@ ruleTester.run('forbid-component-props', rule, {
  },
  ],
  },
+ {
+ code: `
+ const item = (<Foo className="foo" />);
+ `,
+ options: [
+ {
+ forbid: [
+ {
+ propName: 'className',
+ allowedForRegex: '^Fo{2}$',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ code: `
+ const item = (
+ <Parent className="foo">
+ <ThingOne className="bar">
+ <ThingTwo className="baz" />
+ </ThingOne>
+ </Parent>
+ );
+ `,
+ options: [
+ {
+ forbid: [
+ {
+ propName: 'className',
+ allowedFor: ['Parent'],
+ allowedForRegex: '^Thing',
+ },
+ ],
+ },
+ ],
+ },
  ]),
 
  invalid: parsers.all([
@@ -568,5 +605,69 @@ ruleTester.run('forbid-component-props', rule, {
  },
  ],
  },
+ {
+ code: `
+ const item = () => (
+ <Foo className="foo">
+ <Bar className="bar" />
+ </Foo>
+ );
+ `,
+ options: [
+ {
+ forbid: [
+ {
+ propName: 'className',
+ disallowedFor: ['Foo'],
+ disallowedForRegex: '^B',
+ },
+ ],
+ },
+ ],
+ errors: [
+ {
+ messageId: 'propIsForbidden',
+ data: { prop: 'className' },
+ line: 3,
+ column: 16,
+ type: 'JSXAttribute',
+ },
+ {
+ messageId: 'propIsForbidden',
+ data: { prop: 'className' },
+ line: 4,
+ column: 18,
+ type: 'JSXAttribute',
+ },
+ ],
+ },
+ {
+ code: `
+ const item = () => (
+ <Foo className="foo">
+ <Bar className="bar" />
+ </Foo>
+ );
+ `,
+ options: [
+ {
+ forbid: [
+ {
+ propName: 'className',
+ disallowedForRegex: '^B',
+ },
+ ],
+ },
+ ],
+ errors: [
+ {
+ messageId: 'propIsForbidden',
+ data: { prop: 'className' },
+ line: 4,
+ column: 18,
+ type: 'JSXAttribute',
+ },
+ ],
+ },
  ]),
 });