Make use-styled-react-import rule configurable

[jonrohan]

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.

[changeset-bot]

🦋 Changeset detected

Latest commit: b5b4df3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
eslint-plugin-primer-react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull Request Overview

This PR makes the use-styled-react-import ESLint rule configurable by converting hardcoded component, type, and utility lists into configurable options while maintaining full backward compatibility.

• Replaces static Set objects with configurable arrays that can be customized via rule options
• Adds JSON schema validation for the new configuration properties
• Extends test coverage to verify custom configuration scenarios work correctly

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/rules/use-styled-react-import.js	Converts hardcoded arrays to configurable options with schema validation and maintains backward compatibility through defaults
src/rules/__tests__/use-styled-react-import.test.js	Adds comprehensive test cases for custom configuration scenarios including valid/invalid usage patterns
docs/rules/use-styled-react-import.md	Updates documentation with new "Options" section explaining configuration properties and usage examples