diff --git a/.changeset/shaggy-coins-boil.md b/.changeset/shaggy-coins-boil.md
new file mode 100644
index 00000000..095b934d
--- /dev/null
+++ b/.changeset/shaggy-coins-boil.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Replace references to `@primer/components` with `@primer/react`
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8269d1eb..cf69121c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,7 +36,7 @@
```js
/* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
- import {Box} from '@primer/components'
+ import {Box} from '@primer/react'
function ExampleComponent() {
const styles = {
@@ -51,7 +51,7 @@
### Patch Changes
-- [#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.
+- [#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.
* [#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:
diff --git a/docs/rules/no-deprecated-colors.md b/docs/rules/no-deprecated-colors.md
index 98468d9f..818282cc 100644
--- a/docs/rules/no-deprecated-colors.md
+++ b/docs/rules/no-deprecated-colors.md
@@ -12,7 +12,7 @@ This rule disallows references to color variables that are deprecated in [Primer
```jsx
/* eslint primer-react/no-deprecated-colors: "error" */
-import {Box, themeGet} from '@primer/components'
+import {Box, themeGet} from '@primer/react'
import styled from 'styled-components'
const SystemPropExample() = () => Incorrect
@@ -30,7 +30,7 @@ const ThemeGetExample = styled.div`
```jsx
/* eslint primer-react/no-deprecated-colors: "error" */
-import {Box, themeGet} from '@primer/components'
+import {Box, themeGet} from '@primer/react'
import styled from 'styled-components'
const SystemPropExample() = () => Correct
@@ -48,11 +48,11 @@ const ThemeGetExample = styled.div`
- `skipImportCheck` (default: `false`)
- 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.
+ 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.
```js
/* eslint primer-react/no-deprecated-colors: ["warn", {"skipImportCheck": true}] */
- import {Box} from '@primer/components'
+ import {Box} from '@primer/react'
function MyBox({color, children}) {
return {children}
@@ -70,7 +70,7 @@ const ThemeGetExample = styled.div`
```js
/* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
- import {Box} from '@primer/components'
+ import {Box} from '@primer/react'
function ExampleComponent() {
const styles = {
diff --git a/docs/rules/no-system-props.md b/docs/rules/no-system-props.md
index 0bc2f706..957c6599 100644
--- a/docs/rules/no-system-props.md
+++ b/docs/rules/no-system-props.md
@@ -14,7 +14,7 @@ This rule disallows the use of any styled-system prop on Primer components, as t
```jsx
/* eslint primer-react/no-system-props: "error" */
-import {Button} from '@primer/components'
+import {Button} from '@primer/react'
@@ -24,7 +24,7 @@ import {Button} from '@primer/components'
```jsx
/* eslint primer-react/no-system-props: "error" */
-import {Box, Button, ProgressBar} from '@primer/components'
+import {Box, Button, ProgressBar} from '@primer/react'
import {Avatar} from 'some-other-library'
// Non-system props are allowed
@@ -47,7 +47,7 @@ import {Avatar} from 'some-other-library'
```js
/* eslint primer-react/no-system-props: ["warn", {"includeUtilityComponents": true}] */
- import {Box} from '@primer/components'
+ import {Box} from '@primer/react'
function App() {
// Enabling `includeUtilityComponents` will find system prop usage on utility components like this:
diff --git a/package-lock.json b/package-lock.json
index 08e75c5f..98da3968 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "eslint-plugin-primer-react",
- "version": "0.6.0",
+ "version": "0.7.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/src/rules/__tests__/no-deprecated-colors.test.js b/src/rules/__tests__/no-deprecated-colors.test.js
index 4ac4d34f..44e4b151 100644
--- a/src/rules/__tests__/no-deprecated-colors.test.js
+++ b/src/rules/__tests__/no-deprecated-colors.test.js
@@ -28,16 +28,16 @@ const ruleTester = new RuleTester({
ruleTester.run('no-deprecated-colors', rule, {
valid: [
`import {Box} from '@other/design-system'; Hello`,
- `import {Box} from "@primer/components"; Hello`,
- `import {hello} from "@primer/components"; hello("colors.text.primary")`,
- `import {themeGet} from "@primer/components"; themeGet("space.text.primary")`,
- `import {themeGet} from "@primer/components"; themeGet(props.backgroundColorThemeValue)`,
- `import {themeGet} from "@primer/components"; themeGet(2)`,
+ `import {Box} from "@primer/react"; Hello`,
+ `import {hello} from "@primer/react"; hello("colors.text.primary")`,
+ `import {themeGet} from "@primer/react"; themeGet("space.text.primary")`,
+ `import {themeGet} from "@primer/react"; themeGet(props.backgroundColorThemeValue)`,
+ `import {themeGet} from "@primer/react"; themeGet(2)`,
`import {themeGet} from "@other/design-system"; themeGet("colors.text.primary")`,
`import {get} from "@other/constants"; get("space.text.primary")`,
- `import {Box} from '@primer/components'; Hello`,
- `import {Box} from '@primer/components'; Hello`,
- `import {Box} from '@primer/components'; Hello`,
+ `import {Box} from '@primer/react'; Hello`,
+ `import {Box} from '@primer/react'; Hello`,
+ `import {Box} from '@primer/react'; Hello`,
`{color: 'text.primary'}`
],
invalid: [
@@ -52,8 +52,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box} from "@primer/components"; function Example() { return Hello }`,
- output: `import {Box} from "@primer/components"; function Example() { return Hello }`,
+ code: `import {Box} from "@primer/react"; function Example() { return Hello }`,
+ output: `import {Box} from "@primer/react"; function Example() { return Hello }`,
errors: [
{
message: '"text.primary" is deprecated. Use "fg.default" instead.'
@@ -71,8 +71,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import Box from '@primer/components/lib-esm/Box'; function Example() { return Hello }`,
- output: `import Box from '@primer/components/lib-esm/Box'; function Example() { return Hello }`,
+ code: `import Box from '@primer/react/lib-esm/Box'; function Example() { return Hello }`,
+ output: `import Box from '@primer/react/lib-esm/Box'; function Example() { return Hello }`,
errors: [
{
message: '"text.primary" is deprecated. Use "fg.default" instead.'
@@ -80,8 +80,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box} from "@primer/components"; const Example = () => Hello`,
- output: `import {Box} from "@primer/components"; const Example = () => Hello`,
+ code: `import {Box} from "@primer/react"; const Example = () => Hello`,
+ output: `import {Box} from "@primer/react"; const Example = () => Hello`,
errors: [
{
message: '"text.primary" is deprecated. Use "fg.default" instead.'
@@ -89,8 +89,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box} from "@primer/components"; `,
- output: `import {Box} from "@primer/components"; `,
+ code: `import {Box} from "@primer/react"; `,
+ output: `import {Box} from "@primer/react"; `,
errors: [
{
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
@@ -98,8 +98,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box} from "@primer/components"; `,
- output: `import {Box} from "@primer/components"; `,
+ code: `import {Box} from "@primer/react"; `,
+ output: `import {Box} from "@primer/react"; `,
errors: [
{
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
@@ -107,8 +107,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box} from "@primer/components"; theme.shadows.autocomplete.shadow}} />`,
- output: `import {Box} from "@primer/components"; theme.shadows.shadow.medium}} />`,
+ code: `import {Box} from "@primer/react"; theme.shadows.autocomplete.shadow}} />`,
+ output: `import {Box} from "@primer/react"; theme.shadows.shadow.medium}} />`,
errors: [
{
message: '"theme.shadows.autocomplete.shadow" is deprecated. Use "theme.shadows.shadow.medium" instead.'
@@ -116,8 +116,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box} from "@primer/components"; \`0 1px 2px \${theme.colors.text.primary}\`}} />`,
- output: `import {Box} from "@primer/components"; \`0 1px 2px \${theme.colors.fg.default}\`}} />`,
+ code: `import {Box} from "@primer/react"; \`0 1px 2px \${theme.colors.text.primary}\`}} />`,
+ output: `import {Box} from "@primer/react"; \`0 1px 2px \${theme.colors.fg.default}\`}} />`,
errors: [
{
message: '"theme.colors.text.primary" is deprecated. Use "theme.colors.fg.default" instead.'
@@ -125,8 +125,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box} from "@primer/components"; \`0 1px 2px \${t.colors.text.primary}\`}} />`,
- output: `import {Box} from "@primer/components"; \`0 1px 2px \${t.colors.fg.default}\`}} />`,
+ code: `import {Box} from "@primer/react"; \`0 1px 2px \${t.colors.text.primary}\`}} />`,
+ output: `import {Box} from "@primer/react"; \`0 1px 2px \${t.colors.fg.default}\`}} />`,
errors: [
{
message: '"t.colors.text.primary" is deprecated. Use "t.colors.fg.default" instead.'
@@ -134,8 +134,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box} from "@primer/components"; `,
- output: `import {Box} from "@primer/components"; `,
+ code: `import {Box} from "@primer/react"; `,
+ output: `import {Box} from "@primer/react"; `,
errors: [
{
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
@@ -143,25 +143,25 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box} from "@primer/components"; `,
+ code: `import {Box} from "@primer/react"; `,
errors: [
{
message: '"auto.green.5" is deprecated.',
suggestions: [
{
desc: 'Use "success.fg" instead.',
- output: `import {Box} from "@primer/components"; `
+ output: `import {Box} from "@primer/react"; `
},
{
desc: 'Use "success.emphasis" instead.',
- output: `import {Box} from "@primer/components"; `
+ output: `import {Box} from "@primer/react"; `
}
]
}
]
},
{
- code: `import {Box} from "@primer/components"; `,
+ code: `import {Box} from "@primer/react"; `,
errors: [
{
message:
@@ -170,8 +170,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {Box, Text} from "@primer/components"; Hello`,
- output: `import {Box, Text} from "@primer/components"; Hello`,
+ code: `import {Box, Text} from "@primer/react"; Hello`,
+ output: `import {Box, Text} from "@primer/react"; Hello`,
errors: [
{
message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
@@ -182,8 +182,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {themeGet} from "@primer/components"; themeGet("colors.text.primary")`,
- output: `import {themeGet} from "@primer/components"; themeGet("colors.fg.default")`,
+ code: `import {themeGet} from "@primer/react"; themeGet("colors.text.primary")`,
+ output: `import {themeGet} from "@primer/react"; themeGet("colors.fg.default")`,
errors: [
{
message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.'
@@ -191,8 +191,8 @@ ruleTester.run('no-deprecated-colors', rule, {
]
},
{
- code: `import {themeGet} from "@primer/components"; themeGet("shadows.autocomplete.shadow")`,
- output: `import {themeGet} from "@primer/components"; themeGet("shadows.shadow.medium")`,
+ code: `import {themeGet} from "@primer/react"; themeGet("shadows.autocomplete.shadow")`,
+ output: `import {themeGet} from "@primer/react"; themeGet("shadows.shadow.medium")`,
errors: [
{
message: '"shadows.autocomplete.shadow" is deprecated. Use "shadows.shadow.medium" instead.'
diff --git a/src/rules/__tests__/no-system-props.test.js b/src/rules/__tests__/no-system-props.test.js
index 5053fe05..d143c6a5 100644
--- a/src/rules/__tests__/no-system-props.test.js
+++ b/src/rules/__tests__/no-system-props.test.js
@@ -13,18 +13,18 @@ const ruleTester = new RuleTester({
ruleTester.run('no-system-props', rule, {
valid: [
- `import {Button} from '@primer/components'; `,
+ `import {Button} from '@primer/react'; `,
`import {Button} from 'coles-cool-design-system'; `,
- `import {Button} from '@primer/components'; `,
- `import {Box} from '@primer/components'; `,
- `import {ProgressBar} from '@primer/components'; `,
- `import {Button} from '@primer/components'; `,
- `import {Button} from '@primer/components'; `
+ `import {Button} from '@primer/react'; `,
+ `import {Box} from '@primer/react'; `,
+ `import {ProgressBar} from '@primer/react'; `,
+ `import {Button} from '@primer/react'; `,
+ `import {Button} from '@primer/react'; `
],
invalid: [
{
- code: `import {Button} from '@primer/components'; `,
- output: `import {Button} from '@primer/components'; `,
+ code: `import {Button} from '@primer/react'; `,
+ output: `import {Button} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -33,8 +33,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Button} from '@primer/components'; `,
- output: `import {Button} from '@primer/components'; `,
+ code: `import {Button} from '@primer/react'; `,
+ output: `import {Button} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -43,8 +43,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Button} from '@primer/components'; `,
- output: `import {Button} from '@primer/components'; `,
+ code: `import {Button} from '@primer/react'; `,
+ output: `import {Button} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -53,8 +53,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Button} from '@primer/components'; `,
- output: `import {Button} from '@primer/components'; `,
+ code: `import {Button} from '@primer/react'; `,
+ output: `import {Button} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -63,8 +63,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Button} from '@primer/components'; `,
- output: `import {Button} from '@primer/components'; `,
+ code: `import {Button} from '@primer/react'; `,
+ output: `import {Button} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -73,8 +73,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Button} from '@primer/components'; `,
- output: `import {Button} from '@primer/components'; `,
+ code: `import {Button} from '@primer/react'; `,
+ output: `import {Button} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -83,8 +83,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Button} from '@primer/components'; `,
- output: `import {Button} from '@primer/components'; `,
+ code: `import {Button} from '@primer/react'; `,
+ output: `import {Button} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -93,8 +93,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Button} from '@primer/components'; `,
- output: `import {Button} from '@primer/components'; `,
+ code: `import {Button} from '@primer/react'; `,
+ output: `import {Button} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -103,8 +103,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Button} from '@primer/components'; `,
- output: `import {Button} from '@primer/components'; `,
+ code: `import {Button} from '@primer/react'; `,
+ output: `import {Button} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -113,8 +113,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Label} from '@primer/components'; `,
- output: `import {Label} from '@primer/components'; `,
+ code: `import {Label} from '@primer/react'; `,
+ output: `import {Label} from '@primer/react'; `,
errors: [
{
messageId: 'noSystemProps',
@@ -123,8 +123,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Box} from '@primer/components'; `,
- output: `import {Box} from '@primer/components'; `,
+ code: `import {Box} from '@primer/react'; `,
+ output: `import {Box} from '@primer/react'; `,
options: [{includeUtilityComponents: true}],
errors: [
{
@@ -134,8 +134,8 @@ ruleTester.run('no-system-props', rule, {
]
},
{
- code: `import {Text} from '@primer/components'; `,
- output: `import {Text} from '@primer/components'; `,
+ code: `import {Text} from '@primer/react'; `,
+ output: `import {Text} from '@primer/react'; `,
options: [{includeUtilityComponents: true}],
errors: [
{
diff --git a/src/rules/no-deprecated-colors.js b/src/rules/no-deprecated-colors.js
index dd895675..bbc52875 100644
--- a/src/rules/no-deprecated-colors.js
+++ b/src/rules/no-deprecated-colors.js
@@ -28,7 +28,7 @@ module.exports = {
},
create(context) {
// If `skipImportCheck` is true, this rule will check for deprecated colors
- // used in any components (not just ones that are imported from `@primer/components`).
+ // used in any components (not just ones that are imported from `@primer/react`).
const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
const checkAllStrings = context.options[0] ? context.options[0].checkAllStrings : false
@@ -43,7 +43,7 @@ module.exports = {
}
},
JSXOpeningElement(node) {
- // Skip if component was not imported from @primer/components
+ // Skip if component was not imported from @primer/react
if (!skipImportCheck && !isPrimerComponent(node.name, context.getScope(node))) {
return
}
@@ -138,7 +138,7 @@ module.exports = {
function isThemeGet(identifier, scope, skipImportCheck = false) {
if (!skipImportCheck) {
- return isImportedFrom(/^@primer\/components/, identifier, scope) && identifier.name === 'themeGet'
+ return isImportedFrom(/^@primer\/react/, identifier, scope) && identifier.name === 'themeGet'
}
return identifier.name === 'themeGet'
diff --git a/src/utils/is-primer-component.js b/src/utils/is-primer-component.js
index bb333c06..863bba34 100644
--- a/src/utils/is-primer-component.js
+++ b/src/utils/is-primer-component.js
@@ -1,6 +1,6 @@
const {isImportedFrom} = require('./is-imported-from')
function isPrimerComponent(identifier, scope) {
- return isImportedFrom(/^@primer\/components/, identifier, scope)
+ return isImportedFrom(/^@primer\/react/, identifier, scope)
}
exports.isPrimerComponent = isPrimerComponent