This PR converts the hardcoded data structures in the use-styled-react-import ESLint rule into configurable arguments, making the rule more flexible for different project needs while maintaining full backward compatibility.

Changes Made

🔧 Core Implementation Changes

• Converted static data structures to configurable options in src/rules/use-styled-react-import.js:

  • styledComponents - Components that should be imported from @primer/styled-react when used with sx prop
  • styledTypes - Types that should always be imported from @primer/styled-react
  • styledUtilities - Utilities that should always be imported from @primer/styled-react

• Added JSON Schema validation for configuration options with proper type checking and descriptions

• Maintained backward compatibility - rule works identically with no configuration (uses same defaults as before)

📝 Configuration Options

The rule now accepts an optional configuration object:

{
 "rules": {
 "@primer/primer-react/use-styled-react-import": [
 "error",
 {
 "styledComponents": ["Button", "Box", "CustomComponent"],
 "styledTypes": ["BoxProps", "CustomProps"], 
 "styledUtilities": ["sx", "customSx"]
 }
 ]
 }
}

🧪 Testing Improvements

• Added comprehensive test coverage in src/rules/__tests__/use-styled-react-import.test.js:
  • Tests for custom configuration scenarios
  • Tests for default behavior unchanged
  • Tests for edge cases (components not in custom lists)
  • All 23 test cases pass (6 new configuration tests added)

📚 Documentation Updates

• Updated rule documentation in docs/rules/use-styled-react-import.md:
  • Added detailed "Options" section explaining each configuration property
  • Included example configurations with code samples
  • Added examples showing correct/incorrect usage with custom configurations

Benefits

✅ Flexibility

• Teams can customize which components require styled-react imports
• Support for custom components beyond the default Primer set
• Configurable types and utilities lists

✅ Backward Compatibility

• Zero breaking changes - existing configurations continue to work unchanged
• Default values match original hardcoded behavior exactly
• No migration required for existing usage

✅ Developer Experience

• Clear JSON schema validation with helpful error messages
• Comprehensive documentation with examples
• Intuitive configuration structure

Usage Examples

Before (unchanged)

{
 "rules": {
 "@primer/primer-react/use-styled-react-import": "error"
 }
}

After (new capability)

{
 "rules": {
 "@primer/primer-react/use-styled-react-import": [
 "error", 
 {
 "styledComponents": ["CustomButton", "CustomBox"],
 "styledUtilities": ["customSx"]
 }
 ]
 }
}

Code Examples

Custom Component Configuration

❌ Invalid with custom config:

// With styledComponents: ["CustomButton"]
import { CustomButton } from '@primer/react'
const Component = () => <CustomButton sx={{color: 'red'}}>Click me</CustomButton>

✅ Valid with custom config:

// With styledComponents: ["CustomButton"] 
import { CustomButton } from '@primer/styled-react'
const Component = () => <CustomButton sx={{color: 'red'}}>Click me</CustomButton>

✅ Components not in custom list are unaffected:

// Box not in custom styledComponents list, so sx usage allowed from @primer/react
import { Box } from '@primer/react'
const Component = () => <Box sx={{color: 'red'}}>Content</Box>

Testing

• ✅ All existing tests pass (305/305 total)
• ✅ New configuration tests pass
• ✅ ESLint validation passes
• ✅ Markdown linting passes
• ✅ Full backward compatibility verified

Migration Guide

No migration required! This is a purely additive change. Existing rule configurations will continue to work exactly as before.

To take advantage of the new configuration options, simply add the configuration object as shown in the examples above.