Merge pull request #18 from primer/jfuchs/no-styled-system-props

jfuchs/no styled system props

Author: colebemis

.changeset/few-shoes-refuse.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': minor
+---
+
+Introduced an option on no-system-props to include utility components (includeUtilityComponents).

README.md

@@ -12,7 +12,7 @@ ESLint rules for Primer React
    npm install --save-dev eslint-plugin-primer-react
 
    # or
-   
+
    yarn add --dev eslint-plugin-primer-react
    ```
 
@@ -30,3 +30,4 @@ ESLint rules for Primer React
 ## Rules
 
 - [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)

docs/rules/no-system-props.md

@@ -38,3 +38,19 @@ import {Avatar} from 'some-other-library'
 // System props passed to non-Primer components are allowed
 <Avatar mr={2} />
 ```
+
+## Options
+
+- `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`.
+
+  ```js
+  /* eslint primer-react/no-system-props: ["warn", {"includeUtilityComponents": true}] */
+  import {Box} from '@primer/components'
+
+  function App() {
+    // Enabling `includeUtilityComponents` will find system prop usage on utility components like this:
+    return <Box width={200} />
+  }
+  ```

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

@@ -120,6 +120,28 @@ ruleTester.run('no-system-props', rule, {
           data: {propNames: 'width', componentName: 'Label'}
         }
       ]
+    },
+    {
+      code: `import {Box} from '@primer/components'; <Box width={200} />`,
+      output: `import {Box} from '@primer/components'; <Box  sx={{width: 200}} />`,
+      options: [{includeUtilityComponents: true}],
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width', componentName: 'Box'}
+        }
+      ]
+    },
+    {
+      code: `import {Text} from '@primer/components'; <Text width={200} />`,
+      output: `import {Text} from '@primer/components'; <Text  sx={{width: 200}} />`,
+      options: [{includeUtilityComponents: true}],
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width', componentName: 'Text'}
+        }
+      ]
     }
   ]
 })

src/rules/no-system-props.js

@@ -3,12 +3,13 @@ const {pick} = require('@styled-system/props')
 const {some, last} = require('lodash')
 
 // Components for which we allow all styled system props
-const excludedComponents = new Set([
-  'Box',
-  'Text',
+const alwaysExcludedComponents = new Set([
   'BaseStyles' // BaseStyles will be deprecated eventually
 ])
 
+// Excluded by default, but optionally included:
+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'])],
@@ -25,12 +26,27 @@ module.exports = {
   meta: {
     type: 'suggestion',
     fixable: 'code',
-    schema: [],
+    schema: [
+      {
+        properties: {
+          includeUtilityComponents: {
+            type: 'boolean'
+          }
+        }
+      }
+    ],
     messages: {
       noSystemProps: 'Styled-system props are deprecated ({{ componentName }} called with props: {{ propNames }})'
     }
   },
   create(context) {
+    const includeUtilityComponents = context.options[0] ? context.options[0].includeUtilityComponents : false
+
+    const excludedComponents = new Set([
+      ...alwaysExcludedComponents,
+      ...(includeUtilityComponents ? [] : utilityComponents)
+    ])
+
     return {
       JSXOpeningElement(jsxNode) {
         if (!isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return