eslint-plugin-primer-react 2.0.0-rc.9730bcf → 2.0.1-rc.a74c9bd

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 # eslint-plugin-primer-react
 
+## 2.0.1
+
+### Patch Changes
+
+- [#43](https://github.com/primer/eslint-plugin-primer-react/pull/43) [`943e49a`](https://github.com/primer/eslint-plugin-primer-react/commit/943e49a62ada544b73320791858398705ed8208e) Thanks [@colebemis](https://github.com/colebemis)! - `direct-slot-children` fixes
+
 ## 2.0.0
 
 ### Major Changes
 
 - [#39](https://github.com/primer/eslint-plugin-primer-react/pull/39) [`96a675d`](https://github.com/primer/eslint-plugin-primer-react/commit/96a675d8865450d3be556135947a29181a56551c) Thanks [@colebemis](https://github.com/colebemis)! - Add `direct-slot-children` rule
 
+### Minor Changes
+
+- [#21](https://github.com/primer/eslint-plugin-primer-react/pull/21) [`5f68eb7`](https://github.com/primer/eslint-plugin-primer-react/commit/5f68eb7e222e2a41c527b5036b1308ff293e7a0d) Thanks [@SferaDev](https://github.com/SferaDev)! - `no-system-props`: Add `skipImportCheck` option
+
 ## 1.0.1
 
 ### Patch Changes

package/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.
+

package/docs/rules/no-system-props.md

@@ -1,4 +1,4 @@
-# Disallow use of styled-system props (no-system-colors)
+# Disallow use of styled-system props (no-system-props)
 
 🔧 The `--fix` option on the [ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
@@ -41,6 +41,10 @@ import {Avatar} from 'some-other-library'
 
 ## Options
 
+- `skipImportCheck` (default: `false`)
+
+  By default, the `no-system-props` rule will only check for styled system props used in functions and components that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is useful for linting custom components that pass styled system props down to Primer React components.
+
 - `includeUtilityComponents` (default: `false`)
 
   By default, `Box` and `Text` are excluded because styled system props are not deprecated in our utility components. If you prefer to avoid styled system props there as well for consistency, you can set `includeUtilityComponents` to `true`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "2.0.0-rc.9730bcf",
+  "version": "2.0.1-rc.a74c9bd",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/configs/recommended.js

@@ -8,14 +8,15 @@ module.exports = {
   plugins: ['primer-react', 'github'],
   extends: ['plugin:github/react'],
   rules: {
+    'primer-react/direct-slot-children': 'error',
     'primer-react/no-deprecated-colors': 'warn',
     'primer-react/no-system-props': 'warn'
   },
   settings: {
     github: {
       components: {
-        Link: { props: { as: { undefined: 'a', 'a': 'a', 'button': 'button'}}},
-        Button: { default: 'button' },
+        Link: {props: {as: {undefined: 'a', a: 'a', button: 'button'}}},
+        Button: {default: 'button'}
       }
     },
     'jsx-a11y': {

package/src/index.js

@@ -1,5 +1,6 @@
 module.exports = {
   rules: {
+    'direct-slot-children': require('./rules/direct-slot-children'),
     'no-deprecated-colors': require('./rules/no-deprecated-colors'),
     'no-system-props': require('./rules/no-system-props')
   },

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

@@ -15,7 +15,12 @@ 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 '@primer/react'; <PageLayout>{true ? <PageLayout.Header>Header</PageLayout.Header> : null}</PageLayout>`,
+    `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 +67,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'}
+        }
+      ]
     }
   ]
 })

package/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'}
+        }
+      ]
     }
   ]
 })

package/src/rules/direct-slot-children.js

@@ -1,4 +1,5 @@
 const {isPrimerComponent} = require('../utils/is-primer-component')
+const {last} = require('lodash')
 
 const slotParentToChildMap = {
   PageLayout: ['PageLayout.Header', 'PageLayout.Footer'],
@@ -20,24 +21,38 @@ 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}}.'
     }
   },
   create(context) {
+    const stack = []
     return {
       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]) {
-          const JSXElement = jsxNode.parent
-          const parent = JSXElement.parent
-
+        if (
+          (skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) &&
+          slotChildToParentMap[name]
+        ) {
           const expectedParentName = slotChildToParentMap[name]
-          if (parent.type !== 'JSXElement' || getJSXOpeningElementName(parent.openingElement) !== expectedParentName) {
+          const parent = last(stack)
+          if (parent !== expectedParentName) {
             context.report({
               node: jsxNode,
               messageId: 'directSlotChildren',
@@ -45,6 +60,13 @@ module.exports = {
             })
           }
         }
+
+        // Push the current element onto the stack
+        stack.push(name)
+      },
+      JSXClosingElement() {
+        // Pop the current element off the stack
+        stack.pop()
       }
     }
   }

package/src/rules/no-system-props.js

@@ -13,7 +13,16 @@ const utilityComponents = new Set(['Box', 'Text'])
 // Components for which we allow a set of prop names
 const excludedComponentProps = new Map([
   ['AnchoredOverlay', new Set(['width', 'height'])],
+  ['Avatar', new Set(['size'])],
+  ['AvatarToken', new Set(['size'])],
+  ['CircleOcticon', new Set(['size'])],
   ['Dialog', new Set(['width', 'height'])],
+  ['IssueLabelToken', new Set(['size'])],
+  ['ProgressBar', new Set(['bg'])],
+  ['Spinner', new Set(['size'])],
+  ['StyledOcticon', new Set(['size'])],
+  ['PointerBox', new Set(['bg'])],
+  ['Token', new Set(['size'])],
   ['PageLayout', new Set(['padding'])],
   ['ProgressBar', new Set(['bg'])],
   ['PointerBox', new Set(['bg'])]
@@ -28,6 +37,9 @@ module.exports = {
     schema: [
       {
         properties: {
+          skipImportCheck: {
+            type: 'boolean'
+          },
           includeUtilityComponents: {
             type: 'boolean'
           }
@@ -39,6 +51,10 @@ 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/react`).
+    const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
+
     const includeUtilityComponents = context.options[0] ? context.options[0].includeUtilityComponents : false
 
     const excludedComponents = new Set([
@@ -48,7 +64,7 @@ module.exports = {
 
     return {
       JSXOpeningElement(jsxNode) {
-        if (!isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
+        if (!skipImportCheck && !isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
         if (excludedComponents.has(jsxNode.name.name)) return
 
         // Create an object mapping from prop name to the AST node for that attribute
@@ -64,7 +80,7 @@ module.exports = {
         // Create an array of system prop attribute nodes
         let systemProps = Object.values(pick(propsByNameObject))
 
-        let excludedProps = excludedComponentProps.has(jsxNode.name.name)
+        const excludedProps = excludedComponentProps.has(jsxNode.name.name)
           ? new Set([...alwaysExcludedProps, ...excludedComponentProps.get(jsxNode.name.name)])
           : alwaysExcludedProps
 
@@ -142,12 +158,12 @@ const excludeSxEntriesFromStyleMap = (stylesMap, sxProp) => {
   if (
     !sxProp.value ||
     sxProp.value.type !== 'JSXExpressionContainer' ||
-    sxProp.value.expression.type != 'ObjectExpression'
+    sxProp.value.expression.type !== 'ObjectExpression'
   ) {
     return stylesMap
   }
   return new Map(
-    [...stylesMap].filter(([key, _value]) => {
+    [...stylesMap].filter(([key]) => {
       return !some(sxProp.value.expression.properties, p => p.type === 'Property' && p.key.name === key)
     })
   )