Add lint rule for deprecated Flash usage

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 70736adb-aaef-4999-bbdd-c76914f5f8aa

Author: llastflowers

README.md

@@ -43,6 +43,7 @@ ESLint rules for Primer React
 - [enforce-css-module-default-import](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/enforce-css-module-default-import.md)
 - [enforce-css-module-identifier-casing](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/enforce-css-module-identifier-casing.md)
 - [new-color-css-vars](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/new-color-css-vars.md)
+- [no-deprecated-components](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-components.md)
 - [no-deprecated-entrypoints](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-entrypoints.md)
 - [no-deprecated-experimental-components](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-experimental-components.md)
 - [no-deprecated-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-props.md)

docs/rules/no-deprecated-components.md

@@ -0,0 +1,22 @@
+# No deprecated components
+
+## Rule details
+
+This rule discourages imports of deprecated Primer React components from
+`@primer/react` and `@primer/react/deprecated`.
+
+👎 Example of **incorrect** code for this rule:
+
+```jsx
+import {Flash} from '@primer/react'
+```
+
+👍 Example of **correct** code for this rule:
+
+```jsx
+import {Banner} from '@primer/react'
+```
+
+Follow the
+[Flash migration guide](https://primer.style/product/getting-started/react/migration-guides/primer-flash)
+when replacing `Flash` with `Banner`.

src/configs/recommended.js

@@ -11,6 +11,7 @@ module.exports = {
   rules: {
     'primer-react/direct-slot-children': 'error',
 
+    'primer-react/no-deprecated-components': 'warn',
     'primer-react/no-deprecated-experimental-components': 'warn',
     'primer-react/a11y-tooltip-interactive-trigger': 'error',
     'primer-react/new-color-css-vars': 'error',

src/index.js

@@ -12,6 +12,7 @@ module.exports = {
     'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
     'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
     'new-color-css-vars': require('./rules/new-color-css-vars'),
+    'no-deprecated-components': require('./rules/no-deprecated-components'),
     'no-deprecated-entrypoints': require('./rules/no-deprecated-entrypoints'),
     'no-deprecated-experimental-components': require('./rules/no-deprecated-experimental-components'),
     'no-deprecated-props': require('./rules/no-deprecated-props'),

src/rules/__tests__/no-deprecated-components.test.js

@@ -0,0 +1,55 @@
+'use strict'
+
+const {RuleTester} = require('eslint')
+const rule = require('../no-deprecated-components')
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+})
+
+const error = {
+  messageId: 'deprecatedComponent',
+  data: {
+    component: 'Flash',
+    replacement: 'Banner',
+    migrationGuide: 'https://primer.style/product/getting-started/react/migration-guides/primer-flash',
+  },
+}
+
+ruleTester.run('no-deprecated-components', rule, {
+  valid: [
+    {
+      code: `import {Banner} from '@primer/react'`,
+    },
+    {
+      code: `import {Flash} from '@example/react'`,
+    },
+    {
+      code: `import PrimerReact from '@primer/react'`,
+    },
+    {
+      code: `import * as PrimerReact from '@primer/react'`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import {Flash} from '@primer/react'`,
+      errors: [error],
+    },
+    {
+      code: `import {Flash} from '@primer/react/deprecated'`,
+      errors: [error],
+    },
+    {
+      code: `import {Flash as LegacyFlash} from '@primer/react'`,
+      errors: [error],
+    },
+    {
+      code: `import {Button, Flash, Link} from '@primer/react'`,
+      errors: [error],
+    },
+  ],
+})

src/rules/no-deprecated-components.js

@@ -0,0 +1,66 @@
+'use strict'
+
+const url = require('../url')
+
+const migrationGuide = 'https://primer.style/product/getting-started/react/migration-guides/primer-flash'
+
+const deprecatedComponents = new Map([
+  [
+    'Flash',
+    {
+      replacement: 'Banner',
+      migrationGuide,
+    },
+  ],
+])
+
+const primerReactEntrypoints = new Set(['@primer/react', '@primer/react/deprecated'])
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Discourage the use of deprecated Primer React components',
+      recommended: true,
+      url: url(module),
+    },
+    messages: {
+      deprecatedComponent:
+        '`{{component}}` is deprecated. Use `{{replacement}}` from `@primer/react` instead. See the migration guide: {{migrationGuide}}',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (!primerReactEntrypoints.has(node.source.value)) {
+          return
+        }
+
+        for (const specifier of node.specifiers) {
+          if (specifier.type !== 'ImportSpecifier') {
+            continue
+          }
+
+          const component = deprecatedComponents.get(specifier.imported.name)
+          if (!component) {
+            continue
+          }
+
+          context.report({
+            node: specifier,
+            messageId: 'deprecatedComponent',
+            data: {
+              component: specifier.imported.name,
+              replacement: component.replacement,
+              migrationGuide: component.migrationGuide,
+            },
+          })
+        }
+      },
+    }
+  },
+}