eslint-plugin-primer-react 0.7.0-rc.6770e43 → 0.7.2-rc.450e475

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +16 -2
  2. package/docs/rules/no-deprecated-colors.md +5 -5
  3. package/docs/rules/no-system-props.md +3 -3
  4. package/package-lock.json +1 -1
  5. package/package.json +1 -1
  6. package/src/rules/__tests__/no-deprecated-colors.test.js +36 -34
  7. package/src/rules/__tests__/no-system-props.test.js +30 -29
  8. package/src/rules/no-deprecated-colors.js +12 -5
  9. package/src/rules/no-system-props.js +6 -6
  10. package/src/utils/is-primer-component.js +1 -1
package/CHANGELOG.md CHANGED
@@ -1,11 +1,25 @@
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
6
18
 
7
19
  - [#18](https://github.com/primer/eslint-plugin-primer-react/pull/18) [`f0c7a3d`](https://github.com/primer/eslint-plugin-primer-react/commit/f0c7a3d1ab1d60df2c95b86c80d930d6ef15bde1) Thanks [@jfuchs](https://github.com/jfuchs)! - Introduced an option on no-system-props to include utility components (includeUtilityComponents).
8
20
 
21
+ * [#20](https://github.com/primer/eslint-plugin-primer-react/pull/20) [`b0824f6`](https://github.com/primer/eslint-plugin-primer-react/commit/b0824f6c7c69cdf7d70d831626be37f606d70f73) Thanks [@jfuchs](https://github.com/jfuchs)! - Updates no-system-props rule to always exclude the 'variant' prop no matter which component.
22
+
9
23
  ## 0.6.1
10
24
 
11
25
  ### Patch Changes
@@ -28,7 +42,7 @@
28
42
 
29
43
  ```js
30
44
  /* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
31
- import {Box} from '@primer/components'
45
+ import {Box} from '@primer/react'
32
46
 
33
47
  function ExampleComponent() {
34
48
  const styles = {
@@ -43,7 +57,7 @@
43
57
 
44
58
  ### Patch Changes
45
59
 
46
- - [#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/components`. 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.
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.
47
61
 
48
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:
49
63
 
package/docs/rules/no-deprecated-colors.md CHANGED
@@ -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/components'
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/components'
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/components`. 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.
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/components'
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/components'
73
+ import {Box} from '@primer/react'
74
74
 
75
75
  function ExampleComponent() {
76
76
  const styles = {
package/docs/rules/no-system-props.md CHANGED
@@ -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/components'
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/components'
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/components'
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-lock.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eslint-plugin-primer-react",
3
- "version": "0.6.0",
3
+ "version": "0.7.1",
4
4
  "lockfileVersion": 1,
5
5
  "requires": true,
6
6
  "dependencies": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eslint-plugin-primer-react",
3
- "version": "0.7.0-rc.6770e43",
3
+ "version": "0.7.2-rc.450e475",
4
4
  "description": "ESLint rules for Primer React",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/rules/__tests__/no-deprecated-colors.test.js 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/components"; <Box color="fg.default">Hello</Box>`,
32
- `import {hello} from "@primer/components"; hello("colors.text.primary")`,
33
- `import {themeGet} from "@primer/components"; themeGet("space.text.primary")`,
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/components'; <Box sx={styles}>Hello</Box>`,
37
- `import {Box} from '@primer/components'; <Box sx={{color: text.primary}}>Hello</Box>`,
38
- `import {Box} from '@primer/components'; <Box sx={{color: "fg.default"}}>Hello</Box>`,
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/components"; function Example() { return <Box color="text.primary">Hello</Box> }`,
54
- output: `import {Box} from "@primer/components"; function Example() { return <Box color="fg.default">Hello</Box> }`,
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/components/lib-esm/Box'; function Example() { return <Box color="text.primary">Hello</Box> }`,
73
- output: `import Box from '@primer/components/lib-esm/Box'; function Example() { return <Box color="fg.default">Hello</Box> }`,
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/components"; const Example = () => <Box color="text.primary">Hello</Box>`,
82
- output: `import {Box} from "@primer/components"; const Example = () => <Box color="fg.default">Hello</Box>`,
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/components"; <Box bg="bg.primary" m={1} />`,
91
- output: `import {Box} from "@primer/components"; <Box bg="canvas.default" m={1} />`,
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/components"; <Box sx={{bg: "bg.primary", m: 1, ...rest}} />`,
100
- output: `import {Box} from "@primer/components"; <Box sx={{bg: "canvas.default", m: 1, ...rest}} />`,
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/components"; <Box sx={{boxShadow: theme => theme.shadows.autocomplete.shadow}} />`,
109
- output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => theme.shadows.shadow.medium}} />`,
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/components"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.text.primary}\`}} />`,
118
- output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.fg.default}\`}} />`,
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/components"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.text.primary}\`}} />`,
127
- output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.fg.default}\`}} />`,
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/components"; <Box sx={{"&:hover": {bg: "bg.primary"}}} />`,
136
- output: `import {Box} from "@primer/components"; <Box sx={{"&:hover": {bg: "canvas.default"}}} />`,
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/components"; <Box color="auto.green.5" />`,
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/components"; <Box color="success.fg" />`
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/components"; <Box color="success.emphasis" />`
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/components"; <Box color="fade.fg10" />`,
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/components"; <Box bg="bg.primary"><Text color="text.primary">Hello</Text></Box>`,
172
- output: `import {Box, Text} from "@primer/components"; <Box bg="canvas.default"><Text color="fg.default">Hello</Text></Box>`,
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/components"; themeGet("colors.text.primary")`,
184
- output: `import {themeGet} from "@primer/components"; themeGet("colors.fg.default")`,
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/components"; themeGet("shadows.autocomplete.shadow")`,
193
- output: `import {themeGet} from "@primer/components"; themeGet("shadows.shadow.medium")`,
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.'
package/src/rules/__tests__/no-system-props.test.js CHANGED
@@ -13,17 +13,18 @@ const ruleTester = new RuleTester({
13
13
 
14
14
  ruleTester.run('no-system-props', rule, {
15
15
  valid: [
16
- `import {Button} from '@primer/components'; <Button sx={{width: 200}} />`,
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/components'; <Button someOtherProp="foo" />`,
19
- `import {Box} from '@primer/components'; <Box width={200} />`,
20
- `import {ProgressBar} from '@primer/components'; <ProgressBar bg="howdy" />`,
21
- `import {Button} from '@primer/components'; <Button {...someExpression()} />`
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" />`
22
23
  ],
23
24
  invalid: [
24
25
  {
25
- code: `import {Button} from '@primer/components'; <Button width={200} />`,
26
- output: `import {Button} from '@primer/components'; <Button sx={{width: 200}} />`,
26
+ code: `import {Button} from '@primer/react'; <Button width={200} />`,
27
+ output: `import {Button} from '@primer/react'; <Button sx={{width: 200}} />`,
27
28
  errors: [
28
29
  {
29
30
  messageId: 'noSystemProps',
@@ -32,8 +33,8 @@ ruleTester.run('no-system-props', rule, {
32
33
  ]
33
34
  },
34
35
  {
35
- code: `import {Button} from '@primer/components'; <Button width="200" />`,
36
- output: `import {Button} from '@primer/components'; <Button sx={{width: "200"}} />`,
36
+ code: `import {Button} from '@primer/react'; <Button width="200" />`,
37
+ output: `import {Button} from '@primer/react'; <Button sx={{width: "200"}} />`,
37
38
  errors: [
38
39
  {
39
40
  messageId: 'noSystemProps',
@@ -42,8 +43,8 @@ ruleTester.run('no-system-props', rule, {
42
43
  ]
43
44
  },
44
45
  {
45
- code: `import {Button} from '@primer/components'; <Button width={"200"} />`,
46
- output: `import {Button} from '@primer/components'; <Button sx={{width: "200"}} />`,
46
+ code: `import {Button} from '@primer/react'; <Button width={"200"} />`,
47
+ output: `import {Button} from '@primer/react'; <Button sx={{width: "200"}} />`,
47
48
  errors: [
48
49
  {
49
50
  messageId: 'noSystemProps',
@@ -52,8 +53,8 @@ ruleTester.run('no-system-props', rule, {
52
53
  ]
53
54
  },
54
55
  {
55
- code: `import {Button} from '@primer/components'; <Button width={myWidth} />`,
56
- output: `import {Button} from '@primer/components'; <Button sx={{width: myWidth}} />`,
56
+ code: `import {Button} from '@primer/react'; <Button width={myWidth} />`,
57
+ output: `import {Button} from '@primer/react'; <Button sx={{width: myWidth}} />`,
57
58
  errors: [
58
59
  {
59
60
  messageId: 'noSystemProps',
@@ -62,8 +63,8 @@ ruleTester.run('no-system-props', rule, {
62
63
  ]
63
64
  },
64
65
  {
65
- code: `import {Button} from '@primer/components'; <Button width={200} height={100} />`,
66
- output: `import {Button} from '@primer/components'; <Button sx={{width: 200, height: 100}} />`,
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}} />`,
67
68
  errors: [
68
69
  {
69
70
  messageId: 'noSystemProps',
@@ -72,8 +73,8 @@ ruleTester.run('no-system-props', rule, {
72
73
  ]
73
74
  },
74
75
  {
75
- code: `import {Button} from '@primer/components'; <Button width={200} sx={{height: 200}} />`,
76
- output: `import {Button} from '@primer/components'; <Button sx={{height: 200, width: 200}} />`,
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}} />`,
77
78
  errors: [
78
79
  {
79
80
  messageId: 'noSystemProps',
@@ -82,8 +83,8 @@ ruleTester.run('no-system-props', rule, {
82
83
  ]
83
84
  },
84
85
  {
85
- code: `import {Button} from '@primer/components'; <Button width={200} sx={{width: 300}} />`,
86
- output: `import {Button} from '@primer/components'; <Button sx={{width: 300}} />`,
86
+ code: `import {Button} from '@primer/react'; <Button width={200} sx={{width: 300}} />`,
87
+ output: `import {Button} from '@primer/react'; <Button sx={{width: 300}} />`,
87
88
  errors: [
88
89
  {
89
90
  messageId: 'noSystemProps',
@@ -92,8 +93,8 @@ ruleTester.run('no-system-props', rule, {
92
93
  ]
93
94
  },
94
95
  {
95
- code: `import {Button} from '@primer/components'; <Button width={200} sx={myStylez} />`,
96
- output: `import {Button} from '@primer/components'; <Button width={200} sx={myStylez} />`,
96
+ code: `import {Button} from '@primer/react'; <Button width={200} sx={myStylez} />`,
97
+ output: `import {Button} from '@primer/react'; <Button width={200} sx={myStylez} />`,
97
98
  errors: [
98
99
  {
99
100
  messageId: 'noSystemProps',
@@ -102,8 +103,8 @@ ruleTester.run('no-system-props', rule, {
102
103
  ]
103
104
  },
104
105
  {
105
- code: `import {Button} from '@primer/components'; <Button width={200} sx={{...partialStyles, width: 100}} />`,
106
- output: `import {Button} from '@primer/components'; <Button sx={{...partialStyles, width: 100}} />`,
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}} />`,
107
108
  errors: [
108
109
  {
109
110
  messageId: 'noSystemProps',
@@ -112,8 +113,8 @@ ruleTester.run('no-system-props', rule, {
112
113
  ]
113
114
  },
114
115
  {
115
- code: `import {Label} from '@primer/components'; <Label width={200} outline />`,
116
- output: `import {Label} from '@primer/components'; <Label outline sx={{width: 200}} />`,
116
+ code: `import {Label} from '@primer/react'; <Label width={200} outline />`,
117
+ output: `import {Label} from '@primer/react'; <Label outline sx={{width: 200}} />`,
117
118
  errors: [
118
119
  {
119
120
  messageId: 'noSystemProps',
@@ -122,8 +123,8 @@ ruleTester.run('no-system-props', rule, {
122
123
  ]
123
124
  },
124
125
  {
125
- code: `import {Box} from '@primer/components'; <Box width={200} />`,
126
- output: `import {Box} from '@primer/components'; <Box sx={{width: 200}} />`,
126
+ code: `import {Box} from '@primer/react'; <Box width={200} />`,
127
+ output: `import {Box} from '@primer/react'; <Box sx={{width: 200}} />`,
127
128
  options: [{includeUtilityComponents: true}],
128
129
  errors: [
129
130
  {
@@ -133,8 +134,8 @@ ruleTester.run('no-system-props', rule, {
133
134
  ]
134
135
  },
135
136
  {
136
- code: `import {Text} from '@primer/components'; <Text width={200} />`,
137
- output: `import {Text} from '@primer/components'; <Text sx={{width: 200}} />`,
137
+ code: `import {Text} from '@primer/react'; <Text width={200} />`,
138
+ output: `import {Text} from '@primer/react'; <Text sx={{width: 200}} />`,
138
139
  options: [{includeUtilityComponents: true}],
139
140
  errors: [
140
141
  {
package/src/rules/no-deprecated-colors.js CHANGED
@@ -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/components`).
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/components
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 [key, ...path] = node.arguments[0].value.split('.')
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, node.arguments[0], name, str => [key, str].join('.'))
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\/components/, identifier, scope) && identifier.name === 'themeGet'
141
+ return isImportedFrom(/^@primer\/react/, identifier, scope) && identifier.name === 'themeGet'
135
142
  }
136
143
 
137
144
  return identifier.name === 'themeGet'
package/src/rules/no-system-props.js CHANGED
@@ -15,13 +15,13 @@ const excludedComponentProps = new Map([
15
15
  ['AnchoredOverlay', new Set(['width', 'height'])],
16
16
  ['Avatar', new Set(['size'])],
17
17
  ['Dialog', new Set(['width', 'height'])],
18
- ['Flash', new Set(['variant'])],
19
- ['Label', new Set(['variant'])],
20
18
  ['ProgressBar', new Set(['bg'])],
21
19
  ['Spinner', new Set(['size'])],
22
20
  ['StyledOcticon', new Set(['size'])]
23
21
  ])
24
22
 
23
+ const alwaysExcludedProps = new Set(['variant'])
24
+
25
25
  module.exports = {
26
26
  meta: {
27
27
  type: 'suggestion',
@@ -65,12 +65,12 @@ module.exports = {
65
65
  // Create an array of system prop attribute nodes
66
66
  let systemProps = Object.values(pick(propsByNameObject))
67
67
 
68
+ let excludedProps = excludedComponentProps.has(jsxNode.name.name)
69
+ ? new Set([...alwaysExcludedProps, ...excludedComponentProps.get(jsxNode.name.name)])
70
+ : alwaysExcludedProps
71
+
68
72
  // Filter out our exceptional props
69
73
  systemProps = systemProps.filter(prop => {
70
- const excludedProps = excludedComponentProps.get(jsxNode.name.name)
71
- if (!excludedProps) {
72
- return true
73
- }
74
74
  return !excludedProps.has(prop.name.name)
75
75
  })
76
76
 
package/src/utils/is-primer-component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  const {isImportedFrom} = require('./is-imported-from')
2
2
 
3
3
  function isPrimerComponent(identifier, scope) {
4
- return isImportedFrom(/^@primer\/components/, identifier, scope)
4
+ return isImportedFrom(/^@primer\/react/, identifier, scope)
5
5
  }
6
6
  exports.isPrimerComponent = isPrimerComponent