Skip to content

Commit 67bed06

Browse files
Copilotpksjce
Copilot
and
pksjce
committed
Add no-deprecated-flash rule to discourage Flash component usage
Co-authored-by: pksjce <[email protected]>
1 parent f0db77a commit 67bed06

File tree

4 files changed

+402
-0
lines changed

4 files changed

+402
-0
lines changed

‎docs/rules/no-deprecated-flash.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# No Deprecated Flash
2+
3+
## Rule Details
4+
5+
This rule discourages the use of Flash component and suggests using Banner component from `@primer/react/experimental` instead.
6+
7+
Flash component is deprecated and will be removed from @primer/react. The Banner component provides the same functionality and should be used instead.
8+
9+
👎 Examples of **incorrect** code for this rule
10+
11+
```jsx
12+
import {Flash} from '@primer/react'
13+
14+
function ExampleComponent() {
15+
return <Flash variant="warning">Warning message</Flash>
16+
}
17+
```
18+
19+
```jsx
20+
import {Flash} from '@primer/react'
21+
22+
function ExampleComponent() {
23+
return (
24+
<Flash
25+
variant="warning"
26+
sx={{fontSize: 0, borderRadius: 0, py: 2, px: 3}}
27+
className="custom-class"
28+
>
29+
Banner content
30+
</Flash>
31+
)
32+
}
33+
```
34+
35+
👍 Examples of **correct** code for this rule:
36+
37+
```jsx
38+
import {Banner} from '@primer/react/experimental'
39+
40+
function ExampleComponent() {
41+
return <Banner variant="warning">Warning message</Banner>
42+
}
43+
```
44+
45+
```jsx
46+
import {Banner} from '@primer/react/experimental'
47+
48+
function ExampleComponent() {
49+
return (
50+
<Banner
51+
variant="warning"
52+
sx={{fontSize: 0, borderRadius: 0, py: 2, px: 3}}
53+
className="custom-class"
54+
>
55+
Banner content
56+
</Banner>
57+
)
58+
}
59+
```
60+
61+
## Auto-fix
62+
63+
This rule provides automatic fixes that:
64+
- Replace `Flash` component usage with `Banner`
65+
- Update import statements from `@primer/react` to `@primer/react/experimental`
66+
- Preserve all props, attributes, and children content
67+
- Handle mixed imports appropriately
68+
- Avoid duplicate Banner imports when they already exist

‎src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ module.exports = {
1919
'prefer-action-list-item-onselect': require('./rules/prefer-action-list-item-onselect'),
2020
'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
2121
'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
22+
'no-deprecated-flash': require('./rules/no-deprecated-flash'),
2223
},
2324
configs: {
2425
recommended: require('./configs/recommended'),

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

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
'use strict'
2+
3+
const {RuleTester} = require('eslint')
4+
const rule = require('../no-deprecated-flash')
5+
6+
const ruleTester = new RuleTester({
7+
languageOptions: {
8+
ecmaVersion: 'latest',
9+
sourceType: 'module',
10+
parserOptions: {
11+
ecmaFeatures: {
12+
jsx: true,
13+
},
14+
},
15+
},
16+
})
17+
18+
ruleTester.run('no-deprecated-flash', rule, {
19+
valid: [
20+
// Banner import and usage is valid
21+
{
22+
code: `import {Banner} from '@primer/react/experimental'
23+
24+
function Component() {
25+
return <Banner variant="warning">Content</Banner>
26+
}`,
27+
},
28+
// Flash imported from other packages is valid
29+
{
30+
code: `import {Flash} from 'some-other-package'
31+
32+
function Component() {
33+
return <Flash>Content</Flash>
34+
}`,
35+
},
36+
// No import of Flash
37+
{
38+
code: `import {Button} from '@primer/react'
39+
40+
function Component() {
41+
return <Button>Click me</Button>
42+
}`,
43+
},
44+
],
45+
invalid: [
46+
// Basic Flash import and usage
47+
{
48+
code: `import {Flash} from '@primer/react'
49+
50+
function Component() {
51+
return <Flash variant="warning">Banner content</Flash>
52+
}`,
53+
output: `import {Banner} from '@primer/react/experimental'
54+
55+
function Component() {
56+
return <Banner variant="warning">Banner content</Banner>
57+
}`,
58+
errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
59+
},
60+
61+
// Flash with complex props
62+
{
63+
code: `import {Flash} from '@primer/react'
64+
65+
function Component() {
66+
return (
67+
<Flash
68+
variant="warning"
69+
sx={{fontSize: 0, borderRadius: 0, py: 2, px: 3}}
70+
className="custom-class"
71+
>
72+
Banner content
73+
</Flash>
74+
)
75+
}`,
76+
output: `import {Banner} from '@primer/react/experimental'
77+
78+
function Component() {
79+
return (
80+
<Banner
81+
variant="warning"
82+
sx={{fontSize: 0, borderRadius: 0, py: 2, px: 3}}
83+
className="custom-class"
84+
>
85+
Banner content
86+
</Banner>
87+
)
88+
}`,
89+
errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
90+
},
91+
92+
// Mixed imports - Flash with other components
93+
{
94+
code: `import {Button, Flash, Text} from '@primer/react'
95+
96+
function Component() {
97+
return (
98+
<div>
99+
<Button>Click me</Button>
100+
<Flash variant="error">Error message</Flash>
101+
<Text>Some text</Text>
102+
</div>
103+
)
104+
}`,
105+
output: `import {Button, Text} from '@primer/react'
106+
import {Banner} from '@primer/react/experimental'
107+
108+
function Component() {
109+
return (
110+
<div>
111+
<Button>Click me</Button>
112+
<Banner variant="error">Error message</Banner>
113+
<Text>Some text</Text>
114+
</div>
115+
)
116+
}`,
117+
errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
118+
},
119+
120+
// Flash only import
121+
{
122+
code: `import {Flash} from '@primer/react'
123+
124+
function Component() {
125+
return <Flash>Just Flash</Flash>
126+
}`,
127+
output: `import {Banner} from '@primer/react/experimental'
128+
129+
function Component() {
130+
return <Banner>Just Flash</Banner>
131+
}`,
132+
errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
133+
},
134+
135+
// Self-closing Flash
136+
{
137+
code: `import {Flash} from '@primer/react'
138+
139+
function Component() {
140+
return <Flash variant="info" />
141+
}`,
142+
output: `import {Banner} from '@primer/react/experimental'
143+
144+
function Component() {
145+
return <Banner variant="info" />
146+
}`,
147+
errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
148+
},
149+
150+
// Multiple Flash components
151+
{
152+
code: `import {Flash} from '@primer/react'
153+
154+
function Component() {
155+
return (
156+
<div>
157+
<Flash variant="warning">Warning</Flash>
158+
<Flash variant="error">Error</Flash>
159+
</div>
160+
)
161+
}`,
162+
output: `import {Banner} from '@primer/react/experimental'
163+
164+
function Component() {
165+
return (
166+
<div>
167+
<Banner variant="warning">Warning</Banner>
168+
<Banner variant="error">Error</Banner>
169+
</div>
170+
)
171+
}`,
172+
errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
173+
},
174+
175+
// Flash with existing Banner import (should not duplicate)
176+
{
177+
code: `import {Flash} from '@primer/react'
178+
import {Banner} from '@primer/react/experimental'
179+
180+
function Component() {
181+
return (
182+
<div>
183+
<Flash variant="warning">Flash message</Flash>
184+
<Banner variant="info">Banner message</Banner>
185+
</div>
186+
)
187+
}`,
188+
output: `import {Banner} from '@primer/react/experimental'
189+
190+
function Component() {
191+
return (
192+
<div>
193+
<Banner variant="warning">Flash message</Banner>
194+
<Banner variant="info">Banner message</Banner>
195+
</div>
196+
)
197+
}`,
198+
errors: [{messageId: 'flashDeprecated'}, {messageId: 'flashDeprecated'}],
199+
},
200+
],
201+
})

0 commit comments

Comments
 (0)