eslint-plugin-primer-react 0.7.0 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -2
- package/docs/rules/no-deprecated-colors.md +5 -5
- package/docs/rules/no-system-props.md +3 -3
- package/package.json +1 -1
- package/src/rules/__tests__/no-deprecated-colors.test.js +36 -34
- package/src/rules/__tests__/no-system-props.test.js +30 -30
- package/src/rules/no-deprecated-colors.js +12 -5
- package/src/utils/is-primer-component.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# eslint-plugin-primer-react
|
|
2
2
|
|
|
3
|
+
## 0.7.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#24](https://github.com/primer/eslint-plugin-primer-react/pull/24) [`e5565ae`](https://github.com/primer/eslint-plugin-primer-react/commit/e5565ae890f55927c0b1dd96d8943efc1e0bbbfa) Thanks [@colebemis](https://github.com/colebemis)! - Replace references to `@primer/components` with `@primer/react`
|
|
8
|
+
|
|
9
|
+
## 0.7.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#22](https://github.com/primer/eslint-plugin-primer-react/pull/22) [`87d0fd6`](https://github.com/primer/eslint-plugin-primer-react/commit/87d0fd6af8a18a2a570c3770571b16fe3b5c3a30) Thanks [@dmarcey](https://github.com/dmarcey)! - Ignore non-literal, non-string arguments to `themeGet` in `no-deprecated-colors` rule
|
|
14
|
+
|
|
3
15
|
## 0.7.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -30,7 +42,7 @@
|
|
|
30
42
|
|
|
31
43
|
```js
|
|
32
44
|
/* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
|
|
33
|
-
import {Box} from '@primer/
|
|
45
|
+
import {Box} from '@primer/react'
|
|
34
46
|
|
|
35
47
|
function ExampleComponent() {
|
|
36
48
|
const styles = {
|
|
@@ -45,7 +57,7 @@
|
|
|
45
57
|
|
|
46
58
|
### Patch Changes
|
|
47
59
|
|
|
48
|
-
- [#7](https://github.com/primer/eslint-plugin-primer-react/pull/7) [`d9dfb8d`](https://github.com/primer/eslint-plugin-primer-react/commit/d9dfb8de6d6dc42efe606517db7a0dd90d5c5578) Thanks [@colebemis](https://github.com/colebemis)! - Add `skipImportCheck` option. By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/
|
|
60
|
+
- [#7](https://github.com/primer/eslint-plugin-primer-react/pull/7) [`d9dfb8d`](https://github.com/primer/eslint-plugin-primer-react/commit/d9dfb8de6d6dc42efe606517db7a0dd90d5c5578) Thanks [@colebemis](https://github.com/colebemis)! - Add `skipImportCheck` option. By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is useful for linting custom components that pass color-related props down to Primer React components.
|
|
49
61
|
|
|
50
62
|
* [#6](https://github.com/primer/eslint-plugin-primer-react/pull/6) [`dd14594`](https://github.com/primer/eslint-plugin-primer-react/commit/dd14594b05e4d800baa76771f5b911d77352a983) Thanks [@colebemis](https://github.com/colebemis)! - The `no-deprecated-colors` rule can now find deprecated colors in the following cases:
|
|
51
63
|
|
|
@@ -12,7 +12,7 @@ This rule disallows references to color variables that are deprecated in [Primer
|
|
|
12
12
|
|
|
13
13
|
```jsx
|
|
14
14
|
/* eslint primer-react/no-deprecated-colors: "error" */
|
|
15
|
-
import {Box, themeGet} from '@primer/
|
|
15
|
+
import {Box, themeGet} from '@primer/react'
|
|
16
16
|
import styled from 'styled-components'
|
|
17
17
|
|
|
18
18
|
const SystemPropExample() = () => <Box color="some.deprecated.color">Incorrect</Box>
|
|
@@ -30,7 +30,7 @@ const ThemeGetExample = styled.div`
|
|
|
30
30
|
|
|
31
31
|
```jsx
|
|
32
32
|
/* eslint primer-react/no-deprecated-colors: "error" */
|
|
33
|
-
import {Box, themeGet} from '@primer/
|
|
33
|
+
import {Box, themeGet} from '@primer/react'
|
|
34
34
|
import styled from 'styled-components'
|
|
35
35
|
|
|
36
36
|
const SystemPropExample() = () => <Box color="some.color">Correct</Box>
|
|
@@ -48,11 +48,11 @@ const ThemeGetExample = styled.div`
|
|
|
48
48
|
|
|
49
49
|
- `skipImportCheck` (default: `false`)
|
|
50
50
|
|
|
51
|
-
By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/
|
|
51
|
+
By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is useful for linting custom components that pass color-related props down to Primer React components.
|
|
52
52
|
|
|
53
53
|
```js
|
|
54
54
|
/* eslint primer-react/no-deprecated-colors: ["warn", {"skipImportCheck": true}] */
|
|
55
|
-
import {Box} from '@primer/
|
|
55
|
+
import {Box} from '@primer/react'
|
|
56
56
|
|
|
57
57
|
function MyBox({color, children}) {
|
|
58
58
|
return <Box color={color}>{children}</Box>
|
|
@@ -70,7 +70,7 @@ const ThemeGetExample = styled.div`
|
|
|
70
70
|
|
|
71
71
|
```js
|
|
72
72
|
/* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
|
|
73
|
-
import {Box} from '@primer/
|
|
73
|
+
import {Box} from '@primer/react'
|
|
74
74
|
|
|
75
75
|
function ExampleComponent() {
|
|
76
76
|
const styles = {
|
|
@@ -14,7 +14,7 @@ This rule disallows the use of any styled-system prop on Primer components, as t
|
|
|
14
14
|
|
|
15
15
|
```jsx
|
|
16
16
|
/* eslint primer-react/no-system-props: "error" */
|
|
17
|
-
import {Button} from '@primer/
|
|
17
|
+
import {Button} from '@primer/react'
|
|
18
18
|
|
|
19
19
|
<Button width={200} />
|
|
20
20
|
<Button width={200} sx={{height: 300}} />
|
|
@@ -24,7 +24,7 @@ import {Button} from '@primer/components'
|
|
|
24
24
|
|
|
25
25
|
```jsx
|
|
26
26
|
/* eslint primer-react/no-system-props: "error" */
|
|
27
|
-
import {Box, Button, ProgressBar} from '@primer/
|
|
27
|
+
import {Box, Button, ProgressBar} from '@primer/react'
|
|
28
28
|
import {Avatar} from 'some-other-library'
|
|
29
29
|
// Non-system props are allowed
|
|
30
30
|
<Button someOtherProp="foo" />
|
|
@@ -47,7 +47,7 @@ import {Avatar} from 'some-other-library'
|
|
|
47
47
|
|
|
48
48
|
```js
|
|
49
49
|
/* eslint primer-react/no-system-props: ["warn", {"includeUtilityComponents": true}] */
|
|
50
|
-
import {Box} from '@primer/
|
|
50
|
+
import {Box} from '@primer/react'
|
|
51
51
|
|
|
52
52
|
function App() {
|
|
53
53
|
// Enabling `includeUtilityComponents` will find system prop usage on utility components like this:
|
package/package.json
CHANGED
|
@@ -28,14 +28,16 @@ const ruleTester = new RuleTester({
|
|
|
28
28
|
ruleTester.run('no-deprecated-colors', rule, {
|
|
29
29
|
valid: [
|
|
30
30
|
`import {Box} from '@other/design-system'; <Box color="text.primary">Hello</Box>`,
|
|
31
|
-
`import {Box} from "@primer/
|
|
32
|
-
`import {hello} from "@primer/
|
|
33
|
-
`import {themeGet} from "@primer/
|
|
31
|
+
`import {Box} from "@primer/react"; <Box color="fg.default">Hello</Box>`,
|
|
32
|
+
`import {hello} from "@primer/react"; hello("colors.text.primary")`,
|
|
33
|
+
`import {themeGet} from "@primer/react"; themeGet("space.text.primary")`,
|
|
34
|
+
`import {themeGet} from "@primer/react"; themeGet(props.backgroundColorThemeValue)`,
|
|
35
|
+
`import {themeGet} from "@primer/react"; themeGet(2)`,
|
|
34
36
|
`import {themeGet} from "@other/design-system"; themeGet("colors.text.primary")`,
|
|
35
37
|
`import {get} from "@other/constants"; get("space.text.primary")`,
|
|
36
|
-
`import {Box} from '@primer/
|
|
37
|
-
`import {Box} from '@primer/
|
|
38
|
-
`import {Box} from '@primer/
|
|
38
|
+
`import {Box} from '@primer/react'; <Box sx={styles}>Hello</Box>`,
|
|
39
|
+
`import {Box} from '@primer/react'; <Box sx={{color: text.primary}}>Hello</Box>`,
|
|
40
|
+
`import {Box} from '@primer/react'; <Box sx={{color: "fg.default"}}>Hello</Box>`,
|
|
39
41
|
`{color: 'text.primary'}`
|
|
40
42
|
],
|
|
41
43
|
invalid: [
|
|
@@ -50,8 +52,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
50
52
|
]
|
|
51
53
|
},
|
|
52
54
|
{
|
|
53
|
-
code: `import {Box} from "@primer/
|
|
54
|
-
output: `import {Box} from "@primer/
|
|
55
|
+
code: `import {Box} from "@primer/react"; function Example() { return <Box color="text.primary">Hello</Box> }`,
|
|
56
|
+
output: `import {Box} from "@primer/react"; function Example() { return <Box color="fg.default">Hello</Box> }`,
|
|
55
57
|
errors: [
|
|
56
58
|
{
|
|
57
59
|
message: '"text.primary" is deprecated. Use "fg.default" instead.'
|
|
@@ -69,8 +71,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
69
71
|
]
|
|
70
72
|
},
|
|
71
73
|
{
|
|
72
|
-
code: `import Box from '@primer/
|
|
73
|
-
output: `import Box from '@primer/
|
|
74
|
+
code: `import Box from '@primer/react/lib-esm/Box'; function Example() { return <Box color="text.primary">Hello</Box> }`,
|
|
75
|
+
output: `import Box from '@primer/react/lib-esm/Box'; function Example() { return <Box color="fg.default">Hello</Box> }`,
|
|
74
76
|
errors: [
|
|
75
77
|
{
|
|
76
78
|
message: '"text.primary" is deprecated. Use "fg.default" instead.'
|
|
@@ -78,8 +80,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
78
80
|
]
|
|
79
81
|
},
|
|
80
82
|
{
|
|
81
|
-
code: `import {Box} from "@primer/
|
|
82
|
-
output: `import {Box} from "@primer/
|
|
83
|
+
code: `import {Box} from "@primer/react"; const Example = () => <Box color="text.primary">Hello</Box>`,
|
|
84
|
+
output: `import {Box} from "@primer/react"; const Example = () => <Box color="fg.default">Hello</Box>`,
|
|
83
85
|
errors: [
|
|
84
86
|
{
|
|
85
87
|
message: '"text.primary" is deprecated. Use "fg.default" instead.'
|
|
@@ -87,8 +89,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
87
89
|
]
|
|
88
90
|
},
|
|
89
91
|
{
|
|
90
|
-
code: `import {Box} from "@primer/
|
|
91
|
-
output: `import {Box} from "@primer/
|
|
92
|
+
code: `import {Box} from "@primer/react"; <Box bg="bg.primary" m={1} />`,
|
|
93
|
+
output: `import {Box} from "@primer/react"; <Box bg="canvas.default" m={1} />`,
|
|
92
94
|
errors: [
|
|
93
95
|
{
|
|
94
96
|
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
|
|
@@ -96,8 +98,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
96
98
|
]
|
|
97
99
|
},
|
|
98
100
|
{
|
|
99
|
-
code: `import {Box} from "@primer/
|
|
100
|
-
output: `import {Box} from "@primer/
|
|
101
|
+
code: `import {Box} from "@primer/react"; <Box sx={{bg: "bg.primary", m: 1, ...rest}} />`,
|
|
102
|
+
output: `import {Box} from "@primer/react"; <Box sx={{bg: "canvas.default", m: 1, ...rest}} />`,
|
|
101
103
|
errors: [
|
|
102
104
|
{
|
|
103
105
|
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
|
|
@@ -105,8 +107,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
105
107
|
]
|
|
106
108
|
},
|
|
107
109
|
{
|
|
108
|
-
code: `import {Box} from "@primer/
|
|
109
|
-
output: `import {Box} from "@primer/
|
|
110
|
+
code: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => theme.shadows.autocomplete.shadow}} />`,
|
|
111
|
+
output: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => theme.shadows.shadow.medium}} />`,
|
|
110
112
|
errors: [
|
|
111
113
|
{
|
|
112
114
|
message: '"theme.shadows.autocomplete.shadow" is deprecated. Use "theme.shadows.shadow.medium" instead.'
|
|
@@ -114,8 +116,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
114
116
|
]
|
|
115
117
|
},
|
|
116
118
|
{
|
|
117
|
-
code: `import {Box} from "@primer/
|
|
118
|
-
output: `import {Box} from "@primer/
|
|
119
|
+
code: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.text.primary}\`}} />`,
|
|
120
|
+
output: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.fg.default}\`}} />`,
|
|
119
121
|
errors: [
|
|
120
122
|
{
|
|
121
123
|
message: '"theme.colors.text.primary" is deprecated. Use "theme.colors.fg.default" instead.'
|
|
@@ -123,8 +125,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
123
125
|
]
|
|
124
126
|
},
|
|
125
127
|
{
|
|
126
|
-
code: `import {Box} from "@primer/
|
|
127
|
-
output: `import {Box} from "@primer/
|
|
128
|
+
code: `import {Box} from "@primer/react"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.text.primary}\`}} />`,
|
|
129
|
+
output: `import {Box} from "@primer/react"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.fg.default}\`}} />`,
|
|
128
130
|
errors: [
|
|
129
131
|
{
|
|
130
132
|
message: '"t.colors.text.primary" is deprecated. Use "t.colors.fg.default" instead.'
|
|
@@ -132,8 +134,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
132
134
|
]
|
|
133
135
|
},
|
|
134
136
|
{
|
|
135
|
-
code: `import {Box} from "@primer/
|
|
136
|
-
output: `import {Box} from "@primer/
|
|
137
|
+
code: `import {Box} from "@primer/react"; <Box sx={{"&:hover": {bg: "bg.primary"}}} />`,
|
|
138
|
+
output: `import {Box} from "@primer/react"; <Box sx={{"&:hover": {bg: "canvas.default"}}} />`,
|
|
137
139
|
errors: [
|
|
138
140
|
{
|
|
139
141
|
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
|
|
@@ -141,25 +143,25 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
141
143
|
]
|
|
142
144
|
},
|
|
143
145
|
{
|
|
144
|
-
code: `import {Box} from "@primer/
|
|
146
|
+
code: `import {Box} from "@primer/react"; <Box color="auto.green.5" />`,
|
|
145
147
|
errors: [
|
|
146
148
|
{
|
|
147
149
|
message: '"auto.green.5" is deprecated.',
|
|
148
150
|
suggestions: [
|
|
149
151
|
{
|
|
150
152
|
desc: 'Use "success.fg" instead.',
|
|
151
|
-
output: `import {Box} from "@primer/
|
|
153
|
+
output: `import {Box} from "@primer/react"; <Box color="success.fg" />`
|
|
152
154
|
},
|
|
153
155
|
{
|
|
154
156
|
desc: 'Use "success.emphasis" instead.',
|
|
155
|
-
output: `import {Box} from "@primer/
|
|
157
|
+
output: `import {Box} from "@primer/react"; <Box color="success.emphasis" />`
|
|
156
158
|
}
|
|
157
159
|
]
|
|
158
160
|
}
|
|
159
161
|
]
|
|
160
162
|
},
|
|
161
163
|
{
|
|
162
|
-
code: `import {Box} from "@primer/
|
|
164
|
+
code: `import {Box} from "@primer/react"; <Box color="fade.fg10" />`,
|
|
163
165
|
errors: [
|
|
164
166
|
{
|
|
165
167
|
message:
|
|
@@ -168,8 +170,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
168
170
|
]
|
|
169
171
|
},
|
|
170
172
|
{
|
|
171
|
-
code: `import {Box, Text} from "@primer/
|
|
172
|
-
output: `import {Box, Text} from "@primer/
|
|
173
|
+
code: `import {Box, Text} from "@primer/react"; <Box bg="bg.primary"><Text color="text.primary">Hello</Text></Box>`,
|
|
174
|
+
output: `import {Box, Text} from "@primer/react"; <Box bg="canvas.default"><Text color="fg.default">Hello</Text></Box>`,
|
|
173
175
|
errors: [
|
|
174
176
|
{
|
|
175
177
|
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
|
|
@@ -180,8 +182,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
180
182
|
]
|
|
181
183
|
},
|
|
182
184
|
{
|
|
183
|
-
code: `import {themeGet} from "@primer/
|
|
184
|
-
output: `import {themeGet} from "@primer/
|
|
185
|
+
code: `import {themeGet} from "@primer/react"; themeGet("colors.text.primary")`,
|
|
186
|
+
output: `import {themeGet} from "@primer/react"; themeGet("colors.fg.default")`,
|
|
185
187
|
errors: [
|
|
186
188
|
{
|
|
187
189
|
message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.'
|
|
@@ -189,8 +191,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
189
191
|
]
|
|
190
192
|
},
|
|
191
193
|
{
|
|
192
|
-
code: `import {themeGet} from "@primer/
|
|
193
|
-
output: `import {themeGet} from "@primer/
|
|
194
|
+
code: `import {themeGet} from "@primer/react"; themeGet("shadows.autocomplete.shadow")`,
|
|
195
|
+
output: `import {themeGet} from "@primer/react"; themeGet("shadows.shadow.medium")`,
|
|
194
196
|
errors: [
|
|
195
197
|
{
|
|
196
198
|
message: '"shadows.autocomplete.shadow" is deprecated. Use "shadows.shadow.medium" instead.'
|
|
@@ -13,18 +13,18 @@ const ruleTester = new RuleTester({
|
|
|
13
13
|
|
|
14
14
|
ruleTester.run('no-system-props', rule, {
|
|
15
15
|
valid: [
|
|
16
|
-
`import {Button} from '@primer/
|
|
16
|
+
`import {Button} from '@primer/react'; <Button sx={{width: 200}} />`,
|
|
17
17
|
`import {Button} from 'coles-cool-design-system'; <Button width={200} />`,
|
|
18
|
-
`import {Button} from '@primer/
|
|
19
|
-
`import {Box} from '@primer/
|
|
20
|
-
`import {ProgressBar} from '@primer/
|
|
21
|
-
`import {Button} from '@primer/
|
|
22
|
-
`import {Button} from '@primer/
|
|
18
|
+
`import {Button} from '@primer/react'; <Button someOtherProp="foo" />`,
|
|
19
|
+
`import {Box} from '@primer/react'; <Box width={200} />`,
|
|
20
|
+
`import {ProgressBar} from '@primer/react'; <ProgressBar bg="howdy" />`,
|
|
21
|
+
`import {Button} from '@primer/react'; <Button {...someExpression()} />`,
|
|
22
|
+
`import {Button} from '@primer/react'; <Button variant="large" />`
|
|
23
23
|
],
|
|
24
24
|
invalid: [
|
|
25
25
|
{
|
|
26
|
-
code: `import {Button} from '@primer/
|
|
27
|
-
output: `import {Button} from '@primer/
|
|
26
|
+
code: `import {Button} from '@primer/react'; <Button width={200} />`,
|
|
27
|
+
output: `import {Button} from '@primer/react'; <Button sx={{width: 200}} />`,
|
|
28
28
|
errors: [
|
|
29
29
|
{
|
|
30
30
|
messageId: 'noSystemProps',
|
|
@@ -33,8 +33,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
33
33
|
]
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
code: `import {Button} from '@primer/
|
|
37
|
-
output: `import {Button} from '@primer/
|
|
36
|
+
code: `import {Button} from '@primer/react'; <Button width="200" />`,
|
|
37
|
+
output: `import {Button} from '@primer/react'; <Button sx={{width: "200"}} />`,
|
|
38
38
|
errors: [
|
|
39
39
|
{
|
|
40
40
|
messageId: 'noSystemProps',
|
|
@@ -43,8 +43,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
43
43
|
]
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
|
-
code: `import {Button} from '@primer/
|
|
47
|
-
output: `import {Button} from '@primer/
|
|
46
|
+
code: `import {Button} from '@primer/react'; <Button width={"200"} />`,
|
|
47
|
+
output: `import {Button} from '@primer/react'; <Button sx={{width: "200"}} />`,
|
|
48
48
|
errors: [
|
|
49
49
|
{
|
|
50
50
|
messageId: 'noSystemProps',
|
|
@@ -53,8 +53,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
53
53
|
]
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
|
-
code: `import {Button} from '@primer/
|
|
57
|
-
output: `import {Button} from '@primer/
|
|
56
|
+
code: `import {Button} from '@primer/react'; <Button width={myWidth} />`,
|
|
57
|
+
output: `import {Button} from '@primer/react'; <Button sx={{width: myWidth}} />`,
|
|
58
58
|
errors: [
|
|
59
59
|
{
|
|
60
60
|
messageId: 'noSystemProps',
|
|
@@ -63,8 +63,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
63
63
|
]
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
|
-
code: `import {Button} from '@primer/
|
|
67
|
-
output: `import {Button} from '@primer/
|
|
66
|
+
code: `import {Button} from '@primer/react'; <Button width={200} height={100} />`,
|
|
67
|
+
output: `import {Button} from '@primer/react'; <Button sx={{width: 200, height: 100}} />`,
|
|
68
68
|
errors: [
|
|
69
69
|
{
|
|
70
70
|
messageId: 'noSystemProps',
|
|
@@ -73,8 +73,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
73
73
|
]
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
|
-
code: `import {Button} from '@primer/
|
|
77
|
-
output: `import {Button} from '@primer/
|
|
76
|
+
code: `import {Button} from '@primer/react'; <Button width={200} sx={{height: 200}} />`,
|
|
77
|
+
output: `import {Button} from '@primer/react'; <Button sx={{height: 200, width: 200}} />`,
|
|
78
78
|
errors: [
|
|
79
79
|
{
|
|
80
80
|
messageId: 'noSystemProps',
|
|
@@ -83,8 +83,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
83
83
|
]
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
code: `import {Button} from '@primer/
|
|
87
|
-
output: `import {Button} from '@primer/
|
|
86
|
+
code: `import {Button} from '@primer/react'; <Button width={200} sx={{width: 300}} />`,
|
|
87
|
+
output: `import {Button} from '@primer/react'; <Button sx={{width: 300}} />`,
|
|
88
88
|
errors: [
|
|
89
89
|
{
|
|
90
90
|
messageId: 'noSystemProps',
|
|
@@ -93,8 +93,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
93
93
|
]
|
|
94
94
|
},
|
|
95
95
|
{
|
|
96
|
-
code: `import {Button} from '@primer/
|
|
97
|
-
output: `import {Button} from '@primer/
|
|
96
|
+
code: `import {Button} from '@primer/react'; <Button width={200} sx={myStylez} />`,
|
|
97
|
+
output: `import {Button} from '@primer/react'; <Button width={200} sx={myStylez} />`,
|
|
98
98
|
errors: [
|
|
99
99
|
{
|
|
100
100
|
messageId: 'noSystemProps',
|
|
@@ -103,8 +103,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
103
103
|
]
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
|
-
code: `import {Button} from '@primer/
|
|
107
|
-
output: `import {Button} from '@primer/
|
|
106
|
+
code: `import {Button} from '@primer/react'; <Button width={200} sx={{...partialStyles, width: 100}} />`,
|
|
107
|
+
output: `import {Button} from '@primer/react'; <Button sx={{...partialStyles, width: 100}} />`,
|
|
108
108
|
errors: [
|
|
109
109
|
{
|
|
110
110
|
messageId: 'noSystemProps',
|
|
@@ -113,8 +113,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
113
113
|
]
|
|
114
114
|
},
|
|
115
115
|
{
|
|
116
|
-
code: `import {Label} from '@primer/
|
|
117
|
-
output: `import {Label} from '@primer/
|
|
116
|
+
code: `import {Label} from '@primer/react'; <Label width={200} outline />`,
|
|
117
|
+
output: `import {Label} from '@primer/react'; <Label outline sx={{width: 200}} />`,
|
|
118
118
|
errors: [
|
|
119
119
|
{
|
|
120
120
|
messageId: 'noSystemProps',
|
|
@@ -123,8 +123,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
123
123
|
]
|
|
124
124
|
},
|
|
125
125
|
{
|
|
126
|
-
code: `import {Box} from '@primer/
|
|
127
|
-
output: `import {Box} from '@primer/
|
|
126
|
+
code: `import {Box} from '@primer/react'; <Box width={200} />`,
|
|
127
|
+
output: `import {Box} from '@primer/react'; <Box sx={{width: 200}} />`,
|
|
128
128
|
options: [{includeUtilityComponents: true}],
|
|
129
129
|
errors: [
|
|
130
130
|
{
|
|
@@ -134,8 +134,8 @@ ruleTester.run('no-system-props', rule, {
|
|
|
134
134
|
]
|
|
135
135
|
},
|
|
136
136
|
{
|
|
137
|
-
code: `import {Text} from '@primer/
|
|
138
|
-
output: `import {Text} from '@primer/
|
|
137
|
+
code: `import {Text} from '@primer/react'; <Text width={200} />`,
|
|
138
|
+
output: `import {Text} from '@primer/react'; <Text sx={{width: 200}} />`,
|
|
139
139
|
options: [{includeUtilityComponents: true}],
|
|
140
140
|
errors: [
|
|
141
141
|
{
|
|
@@ -28,7 +28,7 @@ module.exports = {
|
|
|
28
28
|
},
|
|
29
29
|
create(context) {
|
|
30
30
|
// If `skipImportCheck` is true, this rule will check for deprecated colors
|
|
31
|
-
// used in any components (not just ones that are imported from `@primer/
|
|
31
|
+
// used in any components (not just ones that are imported from `@primer/react`).
|
|
32
32
|
const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
|
|
33
33
|
|
|
34
34
|
const checkAllStrings = context.options[0] ? context.options[0].checkAllStrings : false
|
|
@@ -43,7 +43,7 @@ module.exports = {
|
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
45
|
JSXOpeningElement(node) {
|
|
46
|
-
// Skip if component was not imported from @primer/
|
|
46
|
+
// Skip if component was not imported from @primer/react
|
|
47
47
|
if (!skipImportCheck && !isPrimerComponent(node.name, context.getScope(node))) {
|
|
48
48
|
return
|
|
49
49
|
}
|
|
@@ -118,11 +118,18 @@ module.exports = {
|
|
|
118
118
|
return
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
const
|
|
121
|
+
const argument = node.arguments[0]
|
|
122
|
+
// Skip if the argument is not a Literal (themeGet(props.backgroundColor))
|
|
123
|
+
// or a string themeGet(2)
|
|
124
|
+
if (argument.type !== 'Literal' || typeof argument.value !== 'string') {
|
|
125
|
+
return
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
const [key, ...path] = argument.value.split('.')
|
|
122
129
|
const name = path.join('.')
|
|
123
130
|
|
|
124
131
|
if (['colors', 'shadows'].includes(key) && Object.keys(deprecations).includes(name)) {
|
|
125
|
-
replaceDeprecatedColor(context,
|
|
132
|
+
replaceDeprecatedColor(context, argument, name, str => [key, str].join('.'))
|
|
126
133
|
}
|
|
127
134
|
}
|
|
128
135
|
}
|
|
@@ -131,7 +138,7 @@ module.exports = {
|
|
|
131
138
|
|
|
132
139
|
function isThemeGet(identifier, scope, skipImportCheck = false) {
|
|
133
140
|
if (!skipImportCheck) {
|
|
134
|
-
return isImportedFrom(/^@primer\/
|
|
141
|
+
return isImportedFrom(/^@primer\/react/, identifier, scope) && identifier.name === 'themeGet'
|
|
135
142
|
}
|
|
136
143
|
|
|
137
144
|
return identifier.name === 'themeGet'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const {isImportedFrom} = require('./is-imported-from')
|
|
2
2
|
|
|
3
3
|
function isPrimerComponent(identifier, scope) {
|
|
4
|
-
return isImportedFrom(/^@primer\/
|
|
4
|
+
return isImportedFrom(/^@primer\/react/, identifier, scope)
|
|
5
5
|
}
|
|
6
6
|
exports.isPrimerComponent = isPrimerComponent
|