Add no-deprecated-flash ESLint rule to warn against Flash component usage

.changeset/chilled-masks-lay.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Add no-deprecated-flash ESLint rule to warn against Flash component usage

docs/rules/no-deprecated-flash.md

@@ -0,0 +1,61 @@
+# No Deprecated Flash
+
+## Rule Details
+
+This rule discourages the use of Flash component and suggests using Banner component from `@primer/react/experimental` instead.
+
+Flash component is deprecated and will be removed from @primer/react. The Banner component provides the same functionality and should be used instead.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+import {Flash} from '@primer/react'
+
+function ExampleComponent() {
+  return <Flash variant="warning">Warning message</Flash>
+}
+```
+
+```jsx
+import {Flash} from '@primer/react'
+
+function ExampleComponent() {
+  return (
+    <Flash variant="warning" sx={{fontSize: 0, borderRadius: 0, py: 2, px: 3}} className="custom-class">
+      Banner content
+    </Flash>
+  )
+}
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {Banner} from '@primer/react/experimental'
+
+function ExampleComponent() {
+  return <Banner variant="warning">Warning message</Banner>
+}
+```
+
+```jsx
+import {Banner} from '@primer/react/experimental'
+
+function ExampleComponent() {
+  return (
+    <Banner variant="warning" className="custom-class">
+      Banner content
+    </Banner>
+  )
+}
+```
+
+## Auto-fix
+
+This rule provides automatic fixes that:
+
+- Replace `Flash` component usage with `Banner`
+- Update import statements from `@primer/react` to `@primer/react/experimental`
+- Preserve all props, attributes, and children content
+- Handle mixed imports appropriately
+- Avoid duplicate Banner imports when they already exist

src/index.js

@@ -19,6 +19,7 @@ module.exports = {
     'prefer-action-list-item-onselect': require('./rules/prefer-action-list-item-onselect'),
     'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
     'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
+    'no-deprecated-flash': require('./rules/no-deprecated-flash'),
     'use-styled-react-import': require('./rules/use-styled-react-import'),
   },
   configs: {

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

@@ -0,0 +1,156 @@
+'use strict'
+
+const {RuleTester} = require('eslint')
+const rule = require('../no-deprecated-flash')
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('no-deprecated-flash', rule, {
+  valid: [
+    // Banner import and usage is valid
+    {
+      code: `import {Banner} from '@primer/react/experimental'
+
+function Component() {
+  return <Banner variant="warning">Content</Banner>
+}`,
+    },
+    // Flash imported from other packages is valid
+    {
+      code: `import {Flash} from 'some-other-package'
+
+function Component() {
+  return <Flash>Content</Flash>
+}`,
+    },
+    // No import of Flash
+    {
+      code: `import {Button} from '@primer/react'
+
+function Component() {
+  return <Button>Click me</Button>
+}`,
+    },
+  ],
+  invalid: [
+    // Basic Flash import and usage
+    {
+      code: `import {Flash} from '@primer/react'
+
+function Component() {
+  return <Flash variant="warning">Banner content</Flash>
+}`,
+      errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
+    },
+
+    // Flash with complex props
+    {
+      code: `import {Flash} from '@primer/react'
+
+function Component() {
+  return (
+    <Flash 
+      variant="warning" 
+      className="custom-class"
+    >
+      Banner content
+    </Flash>
+  )
+}`,
+      errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
+    },
+
+    // Mixed imports - Flash with other components
+    {
+      code: `import {Button, Flash, Text} from '@primer/react'
+
+function Component() {
+  return (
+    <div>
+      <Button>Click me</Button>
+      <Flash variant="error">Error message</Flash>
+      <Text>Some text</Text>
+    </div>
+  )
+}`,
+      errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
+    },
+
+    // Flash only import
+    {
+      code: `import {Flash} from '@primer/react'
+
+function Component() {
+  return <Flash>Just Flash</Flash>
+}`,
+      errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
+    },
+
+    // Self-closing Flash
+    {
+      code: `import {Flash} from '@primer/react'
+
+function Component() {
+  return <Flash variant="info" />
+}`,
+      errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
+    },
+
+    // Multiple Flash components
+    {
+      code: `import {Flash} from '@primer/react'
+
+function Component() {
+  return (
+    <div>
+      <Flash variant="warning">Warning</Flash>
+      <Flash variant="error">Error</Flash>
+    </div>
+  )
+}`,
+      errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
+    },
+
+    // Flash with existing Banner import (should not duplicate)
+    {
+      code: `import {Flash} from '@primer/react'
+import {Banner} from '@primer/react/experimental'
+
+function Component() {
+  return (
+    <div>
+      <Flash variant="warning">Flash message</Flash>
+      <Banner variant="info">Banner message</Banner>
+    </div>
+  )
+}`,
+      errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
+    },
+
+    // Flash with existing experimental imports like TooltipV2
+    {
+      code: `import {Flash} from '@primer/react'
+import {TooltipV2} from '@primer/react/experimental'
+
+function Component() {
+  return (
+    <div>
+      <Flash variant="warning">Flash message</Flash>
+      <TooltipV2>Tooltip content</TooltipV2>
+    </div>
+  )
+}`,
+      errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
+    },
+  ],
+})

src/rules/no-deprecated-flash.js

@@ -0,0 +1,67 @@
+'use strict'
+
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+const {isPrimerComponent} = require('../utils/is-primer-component')
+const url = require('../url')
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Flash component is deprecated. Use Banner from @primer/react/experimental instead.',
+      recommended: true,
+      url: url(module),
+    },
+    schema: [],
+    messages: {
+      flashDeprecated: 'Flash component is deprecated. Use Banner from @primer/react/experimental instead.',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode()
+
+    return {
+      ImportDeclaration(node) {
+        // Check if importing Flash from @primer/react
+        if (node.source.value !== '@primer/react') {
+          return
+        }
+
+        const flashSpecifier = node.specifiers.find(
+          specifier => specifier.type === 'ImportSpecifier' && specifier.imported?.name === 'Flash',
+        )
+
+        if (!flashSpecifier) {
+          return
+        }
+
+        context.report({
+          node: flashSpecifier,
+          messageId: 'flashDeprecated',
+        })
+      },
+
+      JSXElement(node) {
+        const elementName = getJSXOpeningElementName(node.openingElement)
+
+        if (elementName !== 'Flash') {
+          return
+        }
+
+        // Check if Flash is imported from @primer/react using isPrimerComponent
+        const scope = sourceCode.getScope ? sourceCode.getScope(node.openingElement) : context.getScope()
+        if (!isPrimerComponent(node.openingElement.name, scope)) {
+          return
+        }
+
+        context.report({
+          node: node.openingElement.name,
+          messageId: 'flashDeprecated',
+        })
+      },
+    }
+  },
+}