eslint-plugin-primer-react 8.1.0 → 8.2.0-rc.18e9359

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "8.1.0",
+  "version": "8.2.0-rc.18e9359",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "engines": {
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@styled-system/props": "^5.1.5",
-    "@typescript-eslint/utils": "8.39.0",
+    "@typescript-eslint/utils": "8.43.0",
     "eslint-plugin-github": "^6.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-traverse": "^1.0.0",
@@ -46,7 +46,7 @@
     "@github/markdownlint-github": "^0.6.3",
     "@github/prettier-config": "0.0.6",
     "@types/jest": "^30.0.0",
-    "@typescript-eslint/rule-tester": "8.39.0",
+    "@typescript-eslint/rule-tester": "8.42.0",
     "eslint": "^9.0.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-filenames": "^1.3.2",

package/src/rules/__tests__/use-styled-react-import.test.js

@@ -56,6 +56,53 @@ ruleTester.run('use-styled-react-import', rule, {
       ],
     },
 
+    // Invalid: ActionList.Item with sx prop and ActionList imported from @primer/react
+    {
+      code: `import { ActionList } from '@primer/react'
+             const Component = () => <ActionList.Item sx={{ color: 'red' }}>Content</ActionList.Item>`,
+      output: `import { ActionList } from '@primer/styled-react'
+             const Component = () => <ActionList.Item sx={{ color: 'red' }}>Content</ActionList.Item>`,
+      errors: [
+        {
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'ActionList'},
+        },
+      ],
+    },
+
+    // Invalid: FormControl used both with and without sx prop - should use alias
+    {
+      code: `import { FormControl } from '@primer/react'
+             const Component = () => (
+               <div>
+                 <FormControl></FormControl>
+                 <FormControl sx={{ color: 'red' }}>
+                   <FormControl.Label visuallyHidden>Label</FormControl.Label>
+                 </FormControl>
+               </div>
+             )`,
+      output: `import { FormControl } from '@primer/react'
+import { FormControl as StyledFormControl } from '@primer/styled-react'
+             const Component = () => (
+               <div>
+                 <FormControl></FormControl>
+                 <StyledFormControl sx={{ color: 'red' }}>
+                   <StyledFormControl.Label visuallyHidden>Label</StyledFormControl.Label>
+                 </StyledFormControl>
+               </div>
+             )`,
+      errors: [
+        {
+          messageId: 'useStyledReactImportWithAlias',
+          data: {componentName: 'FormControl', aliasName: 'StyledFormControl'},
+        },
+        {
+          messageId: 'useAliasedComponent',
+          data: {componentName: 'FormControl', aliasName: 'StyledFormControl'},
+        },
+      ],
+    },
+
     // Invalid: Button with sx prop imported from @primer/react
     {
       code: `import { Button } from '@primer/react'
@@ -249,3 +296,64 @@ import { Button as StyledButton, Link } from '@primer/styled-react'
     },
   ],
 })
+
+// Test configuration options
+ruleTester.run('use-styled-react-import with custom configuration', rule, {
+  valid: [
+    // Valid: Custom component not in default list
+    {
+      code: `import { CustomButton } from '@primer/react'
+             const Component = () => <CustomButton sx={{ color: 'red' }}>Click me</CustomButton>`,
+      options: [{}], // Using default configuration
+    },
+
+    // Valid: Custom component in custom list used without sx prop
+    {
+      code: `import { CustomButton } from '@primer/react'
+             const Component = () => <CustomButton>Click me</CustomButton>`,
+      options: [{styledComponents: ['CustomButton']}],
+    },
+
+    // Valid: Custom component with sx prop imported from styled-react
+    {
+      code: `import { CustomButton } from '@primer/styled-react'
+             const Component = () => <CustomButton sx={{ color: 'red' }}>Click me</CustomButton>`,
+      options: [{styledComponents: ['CustomButton']}],
+    },
+
+    // Valid: Box not in custom list, so sx usage is allowed from @primer/react
+    {
+      code: `import { Box } from '@primer/react'
+             const Component = () => <Box sx={{ color: 'red' }}>Content</Box>`,
+      options: [{styledComponents: ['CustomButton']}], // Box not included
+    },
+  ],
+  invalid: [
+    // Invalid: Custom component with sx prop should be from styled-react
+    {
+      code: `import { CustomButton } from '@primer/react'
+             const Component = () => <CustomButton sx={{ color: 'red' }}>Click me</CustomButton>`,
+      output: `import { CustomButton } from '@primer/styled-react'
+             const Component = () => <CustomButton sx={{ color: 'red' }}>Click me</CustomButton>`,
+      options: [{styledComponents: ['CustomButton']}],
+      errors: [
+        {
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'CustomButton'},
+        },
+      ],
+    },
+    // Invalid: Custom utility should be from styled-react
+    {
+      code: `import { customSx } from '@primer/react'`,
+      output: `import { customSx } from '@primer/styled-react'`,
+      options: [{styledUtilities: ['customSx']}],
+      errors: [
+        {
+          messageId: 'moveToStyledReact',
+          data: {importName: 'customSx'},
+        },
+      ],
+    },
+  ],
+})

package/src/rules/use-styled-react-import.js

@@ -3,8 +3,8 @@
 const url = require('../url')
 const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
 
-// Components that should be imported from @primer/styled-react when used with sx prop
-const styledComponents = new Set([
+// Default components that should be imported from @primer/styled-react when used with sx prop
+const defaultStyledComponents = [
   'ActionList',
   'ActionMenu',
   'Box',
@@ -23,13 +23,13 @@ const styledComponents = new Set([
   'Truncate',
   'Octicon',
   'Dialog',
-])
+]
 
-// Types that should be imported from @primer/styled-react
-const styledTypes = new Set(['BoxProps', 'SxProp', 'BetterSystemStyleObject'])
+// Default types that should be imported from @primer/styled-react
+const defaultStyledTypes = ['BoxProps', 'SxProp', 'BetterSystemStyleObject']
 
-// Utilities that should be imported from @primer/styled-react
-const styledUtilities = new Set(['sx'])
+// Default utilities that should be imported from @primer/styled-react
+const defaultStyledUtilities = ['sx']
 
 /**
  * @type {import('eslint').Rule.RuleModule}
@@ -43,7 +43,29 @@ module.exports = {
       url: url(module),
     },
     fixable: 'code',
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          styledComponents: {
+            type: 'array',
+            items: {type: 'string'},
+            description: 'Components that should be imported from @primer/styled-react when used with sx prop',
+          },
+          styledTypes: {
+            type: 'array',
+            items: {type: 'string'},
+            description: 'Types that should be imported from @primer/styled-react',
+          },
+          styledUtilities: {
+            type: 'array',
+            items: {type: 'string'},
+            description: 'Utilities that should be imported from @primer/styled-react',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
     messages: {
       useStyledReactImport: 'Import {{ componentName }} from "@primer/styled-react" when using with sx prop',
       useStyledReactImportWithAlias:
@@ -54,6 +76,11 @@ module.exports = {
     },
   },
   create(context) {
+    // Get configuration options or use defaults
+    const options = context.options[0] || {}
+    const styledComponents = new Set(options.styledComponents || defaultStyledComponents)
+    const styledTypes = new Set(options.styledTypes || defaultStyledTypes)
+    const styledUtilities = new Set(options.styledUtilities || defaultStyledUtilities)
     const componentsWithSx = new Set()
     const componentsWithoutSx = new Set() // Track components used without sx
     const allUsedComponents = new Set() // Track all used components
@@ -105,9 +132,14 @@ module.exports = {
         // Check if this is an aliased component from styled-react
         const originalComponentName = aliasMapping.get(componentName) || componentName
 
+        // For compound components like "ActionList.Item", we need to check the parent component
+        const parentComponentName = originalComponentName.includes('.')
+          ? originalComponentName.split('.')[0]
+          : originalComponentName
+
         // Track all used components that are in our styled components list
-        if (styledComponents.has(originalComponentName)) {
-          allUsedComponents.add(originalComponentName)
+        if (styledComponents.has(parentComponentName)) {
+          allUsedComponents.add(parentComponentName)
 
           // Check if this component has an sx prop
           const hasSxProp = openingElement.attributes.some(
@@ -115,17 +147,17 @@ module.exports = {
           )
 
           if (hasSxProp) {
-            componentsWithSx.add(originalComponentName)
+            componentsWithSx.add(parentComponentName)
             jsxElementsWithSx.push({node, componentName: originalComponentName, openingElement})
           } else {
-            componentsWithoutSx.add(originalComponentName)
+            componentsWithoutSx.add(parentComponentName)
 
             // If this is an aliased component without sx, we need to track it for renaming
             if (aliasMapping.has(componentName)) {
               jsxElementsWithoutSx.push({
                 node,
                 localName: componentName,
-                originalName: originalComponentName,
+                originalName: parentComponentName,
                 openingElement,
               })
             }
@@ -266,17 +298,14 @@ module.exports = {
               messageId: 'useAliasedComponent',
               data: {componentName, aliasName},
               fix(fixer) {
-                const fixes = []
+                const sourceCode = context.getSourceCode()
+                const jsxText = sourceCode.getText(jsxNode)
 
-                // Replace the component name in the JSX opening tag
-                fixes.push(fixer.replaceText(openingElement.name, aliasName))
+                // Replace all instances of the component name (both main component and compound components)
+                const componentPattern = new RegExp(`\\b${componentName}(?=\\.|\\s|>)`, 'g')
+                const aliasedText = jsxText.replace(componentPattern, aliasName)
 
-                // Replace the component name in the JSX closing tag if it exists
-                if (jsxNode.closingElement) {
-                  fixes.push(fixer.replaceText(jsxNode.closingElement.name, aliasName))
-                }
-
-                return fixes
+                return fixer.replaceText(jsxNode, aliasedText)
               },
             })
           }