eslint-plugin-primer-react 0.6.1 → 0.7.1-rc.04b2811

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "0.6.1",
+  "version": "0.7.1-rc.04b2811",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/rules/__tests__/no-deprecated-colors.test.js

@@ -31,6 +31,8 @@ ruleTester.run('no-deprecated-colors', rule, {
     `import {Box} from "@primer/components"; <Box color="fg.default">Hello</Box>`,
     `import {hello} from "@primer/components"; hello("colors.text.primary")`,
     `import {themeGet} from "@primer/components"; themeGet("space.text.primary")`,
+    `import {themeGet} from "@primer/components"; themeGet(props.backgroundColorThemeValue)`,
+    `import {themeGet} from "@primer/components"; themeGet(2)`,
     `import {themeGet} from "@other/design-system"; themeGet("colors.text.primary")`,
     `import {get} from "@other/constants"; get("space.text.primary")`,
     `import {Box} from '@primer/components'; <Box sx={styles}>Hello</Box>`,

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

@@ -18,7 +18,8 @@ ruleTester.run('no-system-props', rule, {
     `import {Button} from '@primer/components'; <Button someOtherProp="foo" />`,
     `import {Box} from '@primer/components'; <Box width={200} />`,
     `import {ProgressBar} from '@primer/components'; <ProgressBar bg="howdy" />`,
-    `import {Button} from '@primer/components'; <Button {...someExpression()} />`
+    `import {Button} from '@primer/components'; <Button {...someExpression()} />`,
+    `import {Button} from '@primer/components'; <Button variant="large" />`
   ],
   invalid: [
     {
@@ -120,6 +121,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'}
+        }
+      ]
     }
   ]
 })

package/src/rules/no-deprecated-colors.js

@@ -118,11 +118,18 @@ module.exports = {
           return
         }
 
-        const [key, ...path] = node.arguments[0].value.split('.')
+        const argument = node.arguments[0]
+        // Skip if the argument is not a Literal (themeGet(props.backgroundColor))
+        // or a string themeGet(2)
+        if (argument.type !== 'Literal' || typeof argument.value !== 'string') {
+          return
+        }
+
+        const [key, ...path] = argument.value.split('.')
         const name = path.join('.')
 
         if (['colors', 'shadows'].includes(key) && Object.keys(deprecations).includes(name)) {
-          replaceDeprecatedColor(context, node.arguments[0], name, str => [key, str].join('.'))
+          replaceDeprecatedColor(context, argument, name, str => [key, str].join('.'))
         }
       }
     }

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

@@ -3,34 +3,50 @@ 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'])],
   ['Avatar', new Set(['size'])],
   ['Dialog', new Set(['width', 'height'])],
-  ['Flash', new Set(['variant'])],
-  ['Label', new Set(['variant'])],
   ['ProgressBar', new Set(['bg'])],
   ['Spinner', new Set(['size'])],
   ['StyledOcticon', new Set(['size'])]
 ])
 
+const alwaysExcludedProps = new Set(['variant'])
+
 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
@@ -49,12 +65,12 @@ module.exports = {
         // Create an array of system prop attribute nodes
         let systemProps = Object.values(pick(propsByNameObject))
 
+        let excludedProps = excludedComponentProps.has(jsxNode.name.name)
+          ? new Set([...alwaysExcludedProps, ...excludedComponentProps.get(jsxNode.name.name)])
+          : alwaysExcludedProps
+
         // Filter out our exceptional props
         systemProps = systemProps.filter(prop => {
-          const excludedProps = excludedComponentProps.get(jsxNode.name.name)
-          if (!excludedProps) {
-            return true
-          }
           return !excludedProps.has(prop.name.name)
         })