eslint-plugin-primer-react 0.7.1 → 0.7.3
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 -36
- package/src/rules/__tests__/no-system-props.test.js +30 -30
- package/src/rules/no-deprecated-colors.js +3 -3
- package/src/rules/no-system-props.js +2 -1
- 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.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#27](https://github.com/primer/eslint-plugin-primer-react/pull/27) [`19cbc53`](https://github.com/primer/eslint-plugin-primer-react/commit/19cbc530471f11c4c053ce830e23cb72f36b2c16) Thanks [@colebemis](https://github.com/colebemis)! - `no-system-props`: Ignore `bg` prop on `PointerBox` component
|
|
8
|
+
|
|
9
|
+
## 0.7.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#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`
|
|
14
|
+
|
|
3
15
|
## 0.7.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -36,7 +48,7 @@
|
|
|
36
48
|
|
|
37
49
|
```js
|
|
38
50
|
/* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
|
|
39
|
-
import {Box} from '@primer/
|
|
51
|
+
import {Box} from '@primer/react'
|
|
40
52
|
|
|
41
53
|
function ExampleComponent() {
|
|
42
54
|
const styles = {
|
|
@@ -51,7 +63,7 @@
|
|
|
51
63
|
|
|
52
64
|
### Patch Changes
|
|
53
65
|
|
|
54
|
-
- [#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/
|
|
66
|
+
- [#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.
|
|
55
67
|
|
|
56
68
|
* [#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:
|
|
57
69
|
|
|
@@ -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,16 +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/
|
|
34
|
-
`import {themeGet} from "@primer/
|
|
35
|
-
`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)`,
|
|
36
36
|
`import {themeGet} from "@other/design-system"; themeGet("colors.text.primary")`,
|
|
37
37
|
`import {get} from "@other/constants"; get("space.text.primary")`,
|
|
38
|
-
`import {Box} from '@primer/
|
|
39
|
-
`import {Box} from '@primer/
|
|
40
|
-
`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>`,
|
|
41
41
|
`{color: 'text.primary'}`
|
|
42
42
|
],
|
|
43
43
|
invalid: [
|
|
@@ -52,8 +52,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
52
52
|
]
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
|
-
code: `import {Box} from "@primer/
|
|
56
|
-
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> }`,
|
|
57
57
|
errors: [
|
|
58
58
|
{
|
|
59
59
|
message: '"text.primary" is deprecated. Use "fg.default" instead.'
|
|
@@ -71,8 +71,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
71
71
|
]
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
|
-
code: `import Box from '@primer/
|
|
75
|
-
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> }`,
|
|
76
76
|
errors: [
|
|
77
77
|
{
|
|
78
78
|
message: '"text.primary" is deprecated. Use "fg.default" instead.'
|
|
@@ -80,8 +80,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
80
80
|
]
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
|
-
code: `import {Box} from "@primer/
|
|
84
|
-
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>`,
|
|
85
85
|
errors: [
|
|
86
86
|
{
|
|
87
87
|
message: '"text.primary" is deprecated. Use "fg.default" instead.'
|
|
@@ -89,8 +89,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
89
89
|
]
|
|
90
90
|
},
|
|
91
91
|
{
|
|
92
|
-
code: `import {Box} from "@primer/
|
|
93
|
-
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} />`,
|
|
94
94
|
errors: [
|
|
95
95
|
{
|
|
96
96
|
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
|
|
@@ -98,8 +98,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
98
98
|
]
|
|
99
99
|
},
|
|
100
100
|
{
|
|
101
|
-
code: `import {Box} from "@primer/
|
|
102
|
-
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}} />`,
|
|
103
103
|
errors: [
|
|
104
104
|
{
|
|
105
105
|
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
|
|
@@ -107,8 +107,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
107
107
|
]
|
|
108
108
|
},
|
|
109
109
|
{
|
|
110
|
-
code: `import {Box} from "@primer/
|
|
111
|
-
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}} />`,
|
|
112
112
|
errors: [
|
|
113
113
|
{
|
|
114
114
|
message: '"theme.shadows.autocomplete.shadow" is deprecated. Use "theme.shadows.shadow.medium" instead.'
|
|
@@ -116,8 +116,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
116
116
|
]
|
|
117
117
|
},
|
|
118
118
|
{
|
|
119
|
-
code: `import {Box} from "@primer/
|
|
120
|
-
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}\`}} />`,
|
|
121
121
|
errors: [
|
|
122
122
|
{
|
|
123
123
|
message: '"theme.colors.text.primary" is deprecated. Use "theme.colors.fg.default" instead.'
|
|
@@ -125,8 +125,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
125
125
|
]
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
code: `import {Box} from "@primer/
|
|
129
|
-
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}\`}} />`,
|
|
130
130
|
errors: [
|
|
131
131
|
{
|
|
132
132
|
message: '"t.colors.text.primary" is deprecated. Use "t.colors.fg.default" instead.'
|
|
@@ -134,8 +134,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
134
134
|
]
|
|
135
135
|
},
|
|
136
136
|
{
|
|
137
|
-
code: `import {Box} from "@primer/
|
|
138
|
-
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"}}} />`,
|
|
139
139
|
errors: [
|
|
140
140
|
{
|
|
141
141
|
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
|
|
@@ -143,25 +143,25 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
143
143
|
]
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
|
-
code: `import {Box} from "@primer/
|
|
146
|
+
code: `import {Box} from "@primer/react"; <Box color="auto.green.5" />`,
|
|
147
147
|
errors: [
|
|
148
148
|
{
|
|
149
149
|
message: '"auto.green.5" is deprecated.',
|
|
150
150
|
suggestions: [
|
|
151
151
|
{
|
|
152
152
|
desc: 'Use "success.fg" instead.',
|
|
153
|
-
output: `import {Box} from "@primer/
|
|
153
|
+
output: `import {Box} from "@primer/react"; <Box color="success.fg" />`
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
desc: 'Use "success.emphasis" instead.',
|
|
157
|
-
output: `import {Box} from "@primer/
|
|
157
|
+
output: `import {Box} from "@primer/react"; <Box color="success.emphasis" />`
|
|
158
158
|
}
|
|
159
159
|
]
|
|
160
160
|
}
|
|
161
161
|
]
|
|
162
162
|
},
|
|
163
163
|
{
|
|
164
|
-
code: `import {Box} from "@primer/
|
|
164
|
+
code: `import {Box} from "@primer/react"; <Box color="fade.fg10" />`,
|
|
165
165
|
errors: [
|
|
166
166
|
{
|
|
167
167
|
message:
|
|
@@ -170,8 +170,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
170
170
|
]
|
|
171
171
|
},
|
|
172
172
|
{
|
|
173
|
-
code: `import {Box, Text} from "@primer/
|
|
174
|
-
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>`,
|
|
175
175
|
errors: [
|
|
176
176
|
{
|
|
177
177
|
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
|
|
@@ -182,8 +182,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
182
182
|
]
|
|
183
183
|
},
|
|
184
184
|
{
|
|
185
|
-
code: `import {themeGet} from "@primer/
|
|
186
|
-
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")`,
|
|
187
187
|
errors: [
|
|
188
188
|
{
|
|
189
189
|
message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.'
|
|
@@ -191,8 +191,8 @@ ruleTester.run('no-deprecated-colors', rule, {
|
|
|
191
191
|
]
|
|
192
192
|
},
|
|
193
193
|
{
|
|
194
|
-
code: `import {themeGet} from "@primer/
|
|
195
|
-
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")`,
|
|
196
196
|
errors: [
|
|
197
197
|
{
|
|
198
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
|
}
|
|
@@ -138,7 +138,7 @@ module.exports = {
|
|
|
138
138
|
|
|
139
139
|
function isThemeGet(identifier, scope, skipImportCheck = false) {
|
|
140
140
|
if (!skipImportCheck) {
|
|
141
|
-
return isImportedFrom(/^@primer\/
|
|
141
|
+
return isImportedFrom(/^@primer\/react/, identifier, scope) && identifier.name === 'themeGet'
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
return identifier.name === 'themeGet'
|
|
@@ -17,7 +17,8 @@ const excludedComponentProps = new Map([
|
|
|
17
17
|
['Dialog', new Set(['width', 'height'])],
|
|
18
18
|
['ProgressBar', new Set(['bg'])],
|
|
19
19
|
['Spinner', new Set(['size'])],
|
|
20
|
-
['StyledOcticon', new Set(['size'])]
|
|
20
|
+
['StyledOcticon', new Set(['size'])],
|
|
21
|
+
['PointerBox', new Set(['bg'])]
|
|
21
22
|
])
|
|
22
23
|
|
|
23
24
|
const alwaysExcludedProps = new Set(['variant'])
|
|
@@ -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
|