Merge branch 'main' into skip-import-system-props

Author: SferaDev

CHANGELOG.md

@@ -1,5 +1,23 @@
 # eslint-plugin-primer-react
 
+## 0.7.3
+
+### Patch Changes
+
+- [#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
+
+## 0.7.2
+
+### Patch Changes
+
+- [#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`
+
+## 0.7.1
+
+### Patch Changes
+
+- [#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
+
 ## 0.7.0
 
 ### Minor Changes
@@ -30,7 +48,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 = {
@@ -45,7 +63,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:
 

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() = () => <Box color="some.deprecated.color">Incorrect</Box>
@@ -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() = () => <Box color="some.color">Correct</Box>
@@ -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 <Box color={color}>{children}</Box>
@@ -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 = {

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'
 
 <Button width={200} />
 <Button width={200} sx={{height: 300}} />
@@ -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
 <Button someOtherProp="foo" />
@@ -51,7 +51,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:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "0.7.0",
+  "version": "0.7.3",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package.json

@@ -28,14 +28,16 @@ const ruleTester = new RuleTester({
 ruleTester.run('no-deprecated-colors', rule, {
   valid: [
     `import {Box} from '@other/design-system'; <Box color="text.primary">Hello</Box>`,
-    `import {Box} from "@primer/components"; <Box color="fg.default">Hello</Box>`,
-    `import {hello} from "@primer/components"; hello("colors.text.primary")`,
-    `import {themeGet} from "@primer/components"; themeGet("space.text.primary")`,
+    `import {Box} from "@primer/react"; <Box color="fg.default">Hello</Box>`,
+    `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'; <Box sx={styles}>Hello</Box>`,
-    `import {Box} from '@primer/components'; <Box sx={{color: text.primary}}>Hello</Box>`,
-    `import {Box} from '@primer/components'; <Box sx={{color: "fg.default"}}>Hello</Box>`,
+    `import {Box} from '@primer/react'; <Box sx={styles}>Hello</Box>`,
+    `import {Box} from '@primer/react'; <Box sx={{color: text.primary}}>Hello</Box>`,
+    `import {Box} from '@primer/react'; <Box sx={{color: "fg.default"}}>Hello</Box>`,
     `{color: 'text.primary'}`
   ],
   invalid: [
@@ -50,8 +52,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; function Example() { return <Box color="text.primary">Hello</Box> }`,
-      output: `import {Box} from "@primer/components"; function Example() { return <Box color="fg.default">Hello</Box> }`,
+      code: `import {Box} from "@primer/react"; function Example() { return <Box color="text.primary">Hello</Box> }`,
+      output: `import {Box} from "@primer/react"; function Example() { return <Box color="fg.default">Hello</Box> }`,
       errors: [
         {
           message: '"text.primary" is deprecated. Use "fg.default" instead.'
@@ -69,97 +71,97 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import Box from '@primer/components/lib-esm/Box'; function Example() { return <Box color="text.primary">Hello</Box> }`,
-      output: `import Box from '@primer/components/lib-esm/Box'; function Example() { return <Box color="fg.default">Hello</Box> }`,
+      code: `import Box from '@primer/react/lib-esm/Box'; function Example() { return <Box color="text.primary">Hello</Box> }`,
+      output: `import Box from '@primer/react/lib-esm/Box'; function Example() { return <Box color="fg.default">Hello</Box> }`,
       errors: [
         {
           message: '"text.primary" is deprecated. Use "fg.default" instead.'
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; const Example = () => <Box color="text.primary">Hello</Box>`,
-      output: `import {Box} from "@primer/components"; const Example = () => <Box color="fg.default">Hello</Box>`,
+      code: `import {Box} from "@primer/react"; const Example = () => <Box color="text.primary">Hello</Box>`,
+      output: `import {Box} from "@primer/react"; const Example = () => <Box color="fg.default">Hello</Box>`,
       errors: [
         {
           message: '"text.primary" is deprecated. Use "fg.default" instead.'
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box bg="bg.primary" m={1} />`,
-      output: `import {Box} from "@primer/components"; <Box bg="canvas.default" m={1} />`,
+      code: `import {Box} from "@primer/react"; <Box bg="bg.primary" m={1} />`,
+      output: `import {Box} from "@primer/react"; <Box bg="canvas.default" m={1} />`,
       errors: [
         {
           message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{bg: "bg.primary", m: 1, ...rest}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{bg: "canvas.default", m: 1, ...rest}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{bg: "bg.primary", m: 1, ...rest}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{bg: "canvas.default", m: 1, ...rest}} />`,
       errors: [
         {
           message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => theme.shadows.autocomplete.shadow}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => theme.shadows.shadow.medium}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => theme.shadows.autocomplete.shadow}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => theme.shadows.shadow.medium}} />`,
       errors: [
         {
           message: '"theme.shadows.autocomplete.shadow" is deprecated. Use "theme.shadows.shadow.medium" instead.'
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.text.primary}\`}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.fg.default}\`}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.text.primary}\`}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.fg.default}\`}} />`,
       errors: [
         {
           message: '"theme.colors.text.primary" is deprecated. Use "theme.colors.fg.default" instead.'
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.text.primary}\`}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.fg.default}\`}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.text.primary}\`}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.fg.default}\`}} />`,
       errors: [
         {
           message: '"t.colors.text.primary" is deprecated. Use "t.colors.fg.default" instead.'
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{"&:hover": {bg: "bg.primary"}}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{"&:hover": {bg: "canvas.default"}}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{"&:hover": {bg: "bg.primary"}}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{"&:hover": {bg: "canvas.default"}}} />`,
       errors: [
         {
           message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box color="auto.green.5" />`,
+      code: `import {Box} from "@primer/react"; <Box color="auto.green.5" />`,
       errors: [
         {
           message: '"auto.green.5" is deprecated.',
           suggestions: [
             {
               desc: 'Use "success.fg" instead.',
-              output: `import {Box} from "@primer/components"; <Box color="success.fg" />`
+              output: `import {Box} from "@primer/react"; <Box color="success.fg" />`
             },
             {
               desc: 'Use "success.emphasis" instead.',
-              output: `import {Box} from "@primer/components"; <Box color="success.emphasis" />`
+              output: `import {Box} from "@primer/react"; <Box color="success.emphasis" />`
             }
           ]
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box color="fade.fg10" />`,
+      code: `import {Box} from "@primer/react"; <Box color="fade.fg10" />`,
       errors: [
         {
           message:
@@ -168,8 +170,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box, Text} from "@primer/components"; <Box bg="bg.primary"><Text color="text.primary">Hello</Text></Box>`,
-      output: `import {Box, Text} from "@primer/components"; <Box bg="canvas.default"><Text color="fg.default">Hello</Text></Box>`,
+      code: `import {Box, Text} from "@primer/react"; <Box bg="bg.primary"><Text color="text.primary">Hello</Text></Box>`,
+      output: `import {Box, Text} from "@primer/react"; <Box bg="canvas.default"><Text color="fg.default">Hello</Text></Box>`,
       errors: [
         {
           message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
@@ -180,17 +182,17 @@ 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.'
         }
       ]
     },
     {
-      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.'