eslint-plugin-primer-react 8.1.0 → 8.2.0-rc.1772227

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # eslint-plugin-primer-react
 
+## 8.2.0
+
+### Minor Changes
+
+- [#407](https://github.com/primer/eslint-plugin-primer-react/pull/407) [`2f25480`](https://github.com/primer/eslint-plugin-primer-react/commit/2f25480c3341c1d1afb6fc040c5c5deee416d71c) Thanks [@jonrohan](https://github.com/jonrohan)! - Make `use-styled-react-import` rule configurable
+
+### Patch Changes
+
+- [#406](https://github.com/primer/eslint-plugin-primer-react/pull/406) [`d72e8c4`](https://github.com/primer/eslint-plugin-primer-react/commit/d72e8c4c172d1c37da201a20cde0b7b2bd9ab283) Thanks [@jonrohan](https://github.com/jonrohan)! - Fixes for `use-styled-react-import` rule for compound components.
+
 ## 8.1.0
 
 ### Minor Changes

package/docs/rules/use-styled-react-import.md

@@ -12,7 +12,7 @@ Enforce importing components that use `sx` prop from `@primer/styled-react` inst
 
 This rule detects when certain Primer React components are used with the `sx` prop and ensures they are imported from the temporary `@primer/styled-react` package instead of `@primer/react`. When the same components are used without the `sx` prop, it ensures they are imported from `@primer/react` instead of `@primer/styled-react`.
 
-When a component is used both with and without the `sx` prop in the same file, the rule will import the styled version with an alias (e.g., `StyledButton`) and update the JSX usage accordingly to avoid naming conflicts.
+When a component is used with the `sx` prop anywhere in the file, the entire component import is moved to `@primer/styled-react`, simplifying the import structure.
 
 It also moves certain types and utilities to the styled-react package.
 
@@ -111,17 +111,64 @@ const Component = () => <Button>Click me</Button>
 ```
 
 ```jsx
-// When a component is used both ways, use an alias for the styled version
-import {Button} from '@primer/react'
-import {Button as StyledButton} from '@primer/styled-react'
+// When a component is used with sx prop anywhere, import from styled-react
+import {Button} from '@primer/styled-react'
 
 const Component1 = () => <Button>Click me</Button>
-const Component2 = () => <StyledButton sx={{color: 'red'}}>Styled me</StyledButton>
+const Component2 = () => <Button sx={{color: 'red'}}>Styled me</Button>
 ```
 
 ## Options
 
-This rule has no options.
+This rule accepts an optional configuration object with the following properties:
+
+- `styledComponents` (array of strings): Components that should be imported from `@primer/styled-react` when used with `sx` prop. Defaults to the list shown above.
+- `styledTypes` (array of strings): Types that should always be imported from `@primer/styled-react`. Defaults to `['BoxProps', 'SxProp', 'BetterSystemStyleObject']`.
+- `styledUtilities` (array of strings): Utilities that should always be imported from `@primer/styled-react`. Defaults to `['sx']`.
+
+### Example Configuration
+
+```json
+{
+  "rules": {
+    "@primer/primer-react/use-styled-react-import": [
+      "error",
+      {
+        "styledComponents": ["Button", "Box", "CustomComponent"],
+        "styledTypes": ["BoxProps", "CustomProps"],
+        "styledUtilities": ["sx", "customSx"]
+      }
+    ]
+  }
+}
+```
+
+### Configuration Examples
+
+#### ❌ Incorrect with custom configuration
+
+```jsx
+// With styledComponents: ["CustomButton"]
+import {CustomButton} from '@primer/react'
+
+const Component = () => <CustomButton sx={{color: 'red'}}>Click me</CustomButton>
+```
+
+#### ✅ Correct with custom configuration
+
+```jsx
+// With styledComponents: ["CustomButton"]
+import {CustomButton} from '@primer/styled-react'
+
+const Component = () => <CustomButton sx={{color: 'red'}}>Click me</CustomButton>
+```
+
+```jsx
+// Box is not in custom styledComponents list, so it can be used with sx from @primer/react
+import {Box} from '@primer/react'
+
+const Component = () => <Box sx={{color: 'red'}}>Content</Box>
+```
 
 ## When Not To Use It