no-system-props: Add option to ignore specific component names (#152)

* add ability to ignore specific names

* Create quiet-poets-rescue.md

* Update quiet-poets-rescue.md

Author: siddharthkp

.changeset/quiet-poets-rescue.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+no-system-props: Add option to ignore specific component names

src/rules/__tests__/no-system-props.test.js

@@ -23,6 +23,11 @@ ruleTester.run('no-system-props', rule, {
     `import {Button} from '@primer/react'; <Button size="large" />`,
     `import {ActionMenu} from '@primer/react'; <ActionMenu.Overlay width="large" />`,
     {code: `<img width="200px" />`, options: [{skipImportCheck: true}]},
+    {code: `<Placeholder width="200px" />`, options: [{skipImportCheck: true, ignoreNames: ['Placeholder']}]},
+    {
+      code: `<Placeholder.Header width="200px" />`,
+      options: [{skipImportCheck: true, ignoreNames: ['Placeholder.Header']}],
+    },
   ],
   invalid: [
     {

src/rules/no-system-props.js

@@ -56,12 +56,9 @@ module.exports = {
     schema: [
       {
         properties: {
-          skipImportCheck: {
-            type: 'boolean',
-          },
-          includeUtilityComponents: {
-            type: 'boolean',
-          },
+          skipImportCheck: {type: 'boolean'},
+          includeUtilityComponents: {type: 'boolean'},
+          ignoreNames: {type: 'array'},
         },
       },
     ],
@@ -73,8 +70,8 @@ module.exports = {
     // If `skipImportCheck` is true, this rule will check for deprecated styled system props
     // used in any components (not just ones that are imported from `@primer/react`).
     const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
-
     const includeUtilityComponents = context.options[0] ? context.options[0].includeUtilityComponents : false
+    const ignoreNames = context.options[0] ? context.options[0].ignoreNames || [] : []
 
     const excludedComponents = new Set([
       ...alwaysExcludedComponents,
@@ -93,6 +90,7 @@ module.exports = {
         }
 
         const componentName = getJSXOpeningElementName(jsxNode)
+        if (ignoreNames.length && ignoreNames.includes(componentName)) return
 
         if (excludedComponents.has(componentName)) return