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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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
+
 ## 8.1.0
 
 ### Minor Changes

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

@@ -121,7 +121,55 @@ const Component2 = () => <StyledButton sx={{color: 'red'}}>Styled me</StyledButt
 
 ## 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