Provide component mapping for github/react preset

[khiga8]

Context

The latest release of github/eslint-plugin-github includes a new React preset which will be recommended to GitHub React projects. This React preset currently:

• extends the jsx-a11y plugin to ensure React projects always include the accessibility rules.
• includes custom JSX accessibility rules

We want the JSX linters to also run on relevant components. For instance, we have a rule that discourages generic link text should also run on <Link>. For greater coverage, eslint-plugin-github added a component mapping configuration that allows custom components (with relevant props) to be treated as a given HTML element.

Update

I am adding the component mapping config for github/react here.

Providing this config here will minimize the need for Primer React consumers to define their own component mappings.

To reviewer

• Any thoughts on config organization?
• Check out this accessibility linting in React ADR for extra content: GitHub staff-only: linting ADR

Upcoming work

We should provide component mappings for jsx-a11y too since that plugin similarly supports component to HTML element mapping. Without it, none of the React components will have accessibility linting coverage. You can read more about this mapping setting for jsx-a11y at the end of this section. Notably, this jsx-a11y setting is less robust since it only allows a 1:1 mapping versus the configuration we created for eslint-plugin-github.

[changeset-bot]

🦋 Changeset detected

Latest commit: a398c56

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	Major

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

[khiga8]

Hmm I think this config will have a dependency on eslint-plugin-github and eslint-plugin-jsx-a11y plugin (since github/react preset includes it).

do you think I should pull this out into a separate config from primer-react/recommended. maybe have a primer-react/github? Or is this fine? Not sure what practices around ESLint config organization is.

[colebemis]

@khiga8 It seems reasonable to include this in the primer-react/recommended config. Do we need to add eslint-plugin-github and eslint-plugin-jsx-a11y as dependencies in the package.json?

Should we consider this a breaking change? plugin:github/react will probably flag more errors and warnings than before.

[khiga8]

@colebemis yes I think we'll need to do that! At least that's what we seem to do in eslint-plugin-github package.json since the presets depend on external plugins. does that sound okay with you?

eslint-plugin-github already specifies jsx-a11y as a dependency. would we need to specify it here too? 🤔

[khiga8]

Should we consider this a breaking change? plugin:github/react will probably flag more errors and warnings than before.

yes, we should to be safe!

[khiga8]

I ran into dependency conflict because of the eslint version specified in eslint-plugin-github so I had to bump this up.

[khiga8]

not sure why it broke a test

EDIT: I fixed it with the change in src/rules/no-deprecated-colors.js. it had to do with an 8.0.0 feature.

(related: Rules require meta.hasSuggestions to provide suggestions)

[colebemis]

Could we also mention that the eslint peer dependency is now ^8.0.1?

[colebemis]

Great work, @khiga8! ✨

Just left a minor comment about the changeset

[khiga8]

Tested this change on dotcom and made a couple fixes to the setting.
Verified it's working as expected.
Merging! :)