eslint-plugin-primer-react 1.0.1-rc.b346b2e → 2.0.0-rc.022b246

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # eslint-plugin-primer-react
 
+## 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/README.md

@@ -29,5 +29,6 @@ ESLint rules for Primer React
 
 ## Rules
 
+- [direct-slot-children](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/direct-slot-children.md)
 - [no-deprecated-colors](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-colors.md)
 - [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)

package/docs/rules/direct-slot-children.md

@@ -0,0 +1,39 @@
+# Enforce direct parent-child relationship of slot components (direct-slot-children)
+
+Some Primer React components use a slots pattern under the hood to render subcomponents in specific places. For example, the `PageLayout` component renders `PageLayout.Header` in the header area, and `PageLayout.Footer` in the footer area. These subcomponents must be direct children of the parent component, and cannot be nested inside other components.
+
+## Rule details
+
+This rule enforces that slot components are direct children of their parent component.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/direct-slot-children: "error" */
+import {PageLayout} from '@primer/react'
+
+const MyHeader = () => <PageLayout.Header>Header</PageLayout.Header>
+
+const App = () => (
+  <PageLayout>
+    <MyHeader />
+  </PageLayout>
+)
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/direct-slot-children: "error" */
+import {PageLayout} from '@primer/react'
+
+const MyHeader = () => <div>Header</div>
+
+const App = () => (
+  <PageLayout>
+    <PageLayout.Header>
+      <MyHeader />
+    </PageLayout.Header>
+  </PageLayout>
+)
+```

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-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "0.7.4",
+  "version": "1.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "eslint-plugin-primer-react",
-      "version": "0.7.4",
+      "version": "1.0.1",
       "license": "MIT",
       "dependencies": {
         "@styled-system/props": "^5.1.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "1.0.1-rc.b346b2e",
+  "version": "2.0.0-rc.022b246",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {
@@ -29,8 +29,8 @@
     "jest": "^27.0.6"
   },
   "peerDependencies": {
-    "eslint": "^8.0.1",
-    "@primer/primitives": ">=4.6.2"
+    "@primer/primitives": ">=4.6.2",
+    "eslint": "^8.0.1"
   },
   "prettier": "@github/prettier-config",
   "dependencies": {

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

@@ -0,0 +1,67 @@
+const rule = require('../direct-slot-children')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+})
+
+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>`
+  ],
+  invalid: [
+    {
+      code: `import {PageLayout} from '@primer/react'; <PageLayout.Header>Header</PageLayout.Header>`,
+      errors: [
+        {
+          messageId: 'directSlotChildren',
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
+        }
+      ]
+    },
+    {
+      code: `import {PageLayout} from '@primer/react/drafts'; <PageLayout.Header>Header</PageLayout.Header>`,
+      errors: [
+        {
+          messageId: 'directSlotChildren',
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
+        }
+      ]
+    },
+    {
+      code: `import {PageLayout} from '@primer/react'; <div><PageLayout.Header>Header</PageLayout.Header></div>`,
+      errors: [
+        {
+          messageId: 'directSlotChildren',
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
+        }
+      ]
+    },
+    {
+      code: `import {PageLayout} from '@primer/react'; <PageLayout><div><PageLayout.Header>Header</PageLayout.Header></div></PageLayout>`,
+      errors: [
+        {
+          messageId: 'directSlotChildren',
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
+        }
+      ]
+    },
+    {
+      code: `import {TreeView} from '@primer/react'; <TreeView><TreeView.Item><div><TreeView.LeadingVisual>Visual</TreeView.LeadingVisual></div></TreeView.Item></TreeView>`,
+      errors: [
+        {
+          messageId: 'directSlotChildren',
+          data: {childName: 'TreeView.LeadingVisual', parentName: 'TreeView.Item'}
+        }
+      ]
+    }
+  ]
+})

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

@@ -0,0 +1,60 @@
+const {isPrimerComponent} = require('../utils/is-primer-component')
+
+const slotParentToChildMap = {
+  PageLayout: ['PageLayout.Header', 'PageLayout.Footer'],
+  FormControl: ['FormControl.Label', 'FormControl.Caption', 'FormControl.LeadingVisual', 'FormControl.TrailingVisual'],
+  MarkdownEditor: ['MarkdownEditor.Toolbar', 'MarkdownEditor.Actions', 'MarkdownEditor.Label'],
+  'ActionList.Item': ['ActionList.LeadingVisual', 'ActionList.TrailingVisual', 'ActionList.Description'],
+  'TreeView.Item': ['TreeView.LeadingVisual', 'TreeView.TrailingVisual'],
+  RadioGroup: ['RadioGroup.Label', 'RadioGroup.Caption', 'RadioGroup.Validation'],
+  CheckboxGroup: ['CheckboxGroup.Label', 'CheckboxGroup.Caption', 'CheckboxGroup.Validation']
+}
+
+const slotChildToParentMap = Object.entries(slotParentToChildMap).reduce((acc, [parent, children]) => {
+  for (const child of children) {
+    acc[child] = parent
+  }
+  return acc
+}, {})
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [],
+    messages: {
+      directSlotChildren: '{{childName}} must be a direct child of {{parentName}}.'
+    }
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(jsxNode) {
+        const name = getJSXOpeningElementName(jsxNode)
+
+        // 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
+
+          const expectedParentName = slotChildToParentMap[name]
+          if (parent.type !== 'JSXElement' || getJSXOpeningElementName(parent.openingElement) !== expectedParentName) {
+            context.report({
+              node: jsxNode,
+              messageId: 'directSlotChildren',
+              data: {childName: name, parentName: expectedParentName}
+            })
+          }
+        }
+      }
+    }
+  }
+}
+
+// Convert JSXOpeningElement name to string
+function getJSXOpeningElementName(jsxNode) {
+  if (jsxNode.name.type === 'JSXIdentifier') {
+    return jsxNode.name.name
+  } else if (jsxNode.name.type === 'JSXMemberExpression') {
+    return `${jsxNode.name.object.name}.${jsxNode.name.property.name}`
+  }
+}

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/components`).
+    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)
     })
   )

package/src/utils/is-primer-component.js

@@ -1,6 +1,19 @@
 const {isImportedFrom} = require('./is-imported-from')
 
-function isPrimerComponent(identifier, scope) {
+function isPrimerComponent(name, scope) {
+  let identifier
+
+  switch (name.type) {
+    case 'JSXIdentifier':
+      identifier = name
+      break
+    case 'JSXMemberExpression':
+      identifier = name.object
+      break
+    default:
+      return false
+  }
+
   return isImportedFrom(/^@primer\/react/, identifier, scope)
 }
 exports.isPrimerComponent = isPrimerComponent