Merge pull request #41 from primer/skip-import-check

Add `skipImportCheck` to `direct-slot-children` rule

Author: colebemis

docs/rules/direct-slot-children.md

@@ -37,3 +37,10 @@ const App = () => (
   </PageLayout>
 )
 ```
+
+## Options
+
+- `skipImportCheck` (default: `false`)
+
+  By default, the `direct-slot-children` rule will only check for direct slot children in components that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is used for internal linting in the [primer/react](https://github.com/prime/react) repository.
+

src/rules/__tests__/direct-slot-children.test.js

@@ -15,7 +15,11 @@ ruleTester.run('direct-slot-children', rule, {
   valid: [
     `import {PageLayout} from '@primer/react'; <PageLayout><PageLayout.Header>Header</PageLayout.Header><PageLayout.Footer>Footer</PageLayout.Footer></PageLayout>`,
     `import {PageLayout} from '@primer/react'; <PageLayout><div><PageLayout.Pane>Header</PageLayout.Pane></div></PageLayout>`,
-    `import {PageLayout} from 'some-library'; <PageLayout.Header>Header</PageLayout.Header>`
+    `import {PageLayout} from './PageLayout'; <PageLayout.Header>Header</PageLayout.Header>`,
+    {
+      code: `import {Foo} from './Foo'; <Foo><div><Foo.Bar></Foo.Bar></div></Foo>`,
+      options: [{skipImportCheck: true}]
+    }
   ],
   invalid: [
     {
@@ -62,6 +66,16 @@ ruleTester.run('direct-slot-children', rule, {
           data: {childName: 'TreeView.LeadingVisual', parentName: 'TreeView.Item'}
         }
       ]
+    },
+    {
+      code: `import {PageLayout} from './PageLayout'; <PageLayout><div><PageLayout.Header>Header</PageLayout.Header></div></PageLayout>`,
+      options: [{skipImportCheck: true}],
+      errors: [
+        {
+          messageId: 'directSlotChildren',
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
+        }
+      ]
     }
   ]
 })

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

@@ -20,7 +20,7 @@ ruleTester.run('no-system-props', rule, {
     `import {ProgressBar} from '@primer/react'; <ProgressBar bg="howdy" />`,
     `import {Button} from '@primer/react'; <Button {...someExpression()} />`,
     `import {Button} from '@primer/react'; <Button variant="large" />`,
-    `import {Button} from '@primer/react'; <Button size="large" />`,
+    `import {Button} from '@primer/react'; <Button size="large" />`
   ],
   invalid: [
     {
@@ -144,6 +144,28 @@ ruleTester.run('no-system-props', rule, {
           data: {propNames: 'width', componentName: 'Text'}
         }
       ]
+    },
+    {
+      code: `import {Button} from '../Button'; <Button width={200} />`,
+      options: [{skipImportCheck: true}],
+      output: `import {Button} from '../Button'; <Button  sx={{width: 200}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width', componentName: 'Button'}
+        }
+      ]
+    },
+    {
+      code: `import {Foo} from '../Foo'; <Foo width={200} />`,
+      options: [{skipImportCheck: true}],
+      output: `import {Foo} from '../Foo'; <Foo  sx={{width: 200}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width', componentName: 'Foo'}
+        }
+      ]
     }
   ]
 })

src/rules/direct-slot-children.js

@@ -20,7 +20,15 @@ const slotChildToParentMap = Object.entries(slotParentToChildMap).reduce((acc, [
 module.exports = {
   meta: {
     type: 'problem',
-    schema: [],
+    schema: [
+      {
+        properties: {
+          skipImportCheck: {
+            type: 'boolean'
+          }
+        }
+      }
+    ],
     messages: {
       directSlotChildren: '{{childName}} must be a direct child of {{parentName}}.'
     }
@@ -30,9 +38,16 @@ module.exports = {
       JSXOpeningElement(jsxNode) {
         const name = getJSXOpeningElementName(jsxNode)
 
+        // If `skipImportCheck` is true, this rule will check for direct slot children
+        // in any components (not just ones that are imported from `@primer/react`).
+        const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
+
         // If component is a Primer component and a slot child,
         // check if it's a direct child of the slot parent
-        if (isPrimerComponent(jsxNode.name, context.getScope(jsxNode)) && slotChildToParentMap[name]) {
+        if (
+          (skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) &&
+          slotChildToParentMap[name]
+        ) {
           const JSXElement = jsxNode.parent
           const parent = JSXElement.parent
 

src/rules/no-system-props.js

@@ -52,7 +52,7 @@ module.exports = {
   },
   create(context) {
     // 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/components`).
+    // 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