Fixes for use-styled-react-import rule for compound components (#406)

* Update rule to check sub components and imports

* When a component is aliased all sub components also get aliased.

* Fix typo in changeset for eslint-plugin-primer-react

Author: jonrohan

.changeset/good-cobras-pay.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Fixes for `use-styled-react-import` rule for compound components.

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'

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

@@ -132,27 +132,32 @@ 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(
             attr => attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'sx',
           )
 
           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,
               })
             }
@@ -293,17 +298,14 @@ module.exports = {
               messageId: 'useAliasedComponent',
               data: {componentName, aliasName},
               fix(fixer) {
-                const fixes = []
-
-                // Replace the component name in the JSX opening tag
-                fixes.push(fixer.replaceText(openingElement.name, aliasName))
+                const sourceCode = context.getSourceCode()
+                const jsxText = sourceCode.getText(jsxNode)
 
-                // Replace the component name in the JSX closing tag if it exists
-                if (jsxNode.closingElement) {
-                  fixes.push(fixer.replaceText(jsxNode.closingElement.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)
 
-                return fixes
+                return fixer.replaceText(jsxNode, aliasedText)
               },
             })
           }