eslint-plugin-primer-react 4.0.3 → 4.0.4-rc.5058fcb

package/src/rules/__tests__/new-css-vars-have-fallback.test.js

@@ -0,0 +1,31 @@
+const rule = require('../new-color-css-vars-have-fallback')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('new-color-css-vars-have-fallback', rule, {
+  valid: [
+    {
+      code: `<circle stroke="var(--fgColor-muted, var(--color-fg-muted))" strokeWidth="2" />`,
+    },
+  ],
+  invalid: [
+    {
+      code: `<circle stroke="var(--fgColor-muted)" strokeWidth="2" />`,
+      errors: [
+        {
+          message:
+            'Expected a fallback value for CSS variable --fgColor-muted. New color variables fallbacks, check primer.style/primitives to find the correct value.',
+        },
+      ],
+    },
+  ],
+})

package/src/rules/__tests__/no-deprecated-colors.test.js

@@ -4,12 +4,12 @@ const {RuleTester} = require('eslint')
 const deprecatedVars = {
   'text.primary': 'fg.default',
   'bg.primary': 'canvas.default',
-  'auto.green.5': ['success.fg', 'success.emphasis']
+  'auto.green.5': ['success.fg', 'success.emphasis'],
 }
 
 const removedVars = {
   'fade.fg10': null,
-  'autocomplete.shadow': 'shadow.medium'
+  'autocomplete.shadow': 'shadow.medium',
 }
 
 jest.mock('@primer/primitives/dist/deprecated/colors', () => deprecatedVars)
@@ -20,9 +20,9 @@ const ruleTester = new RuleTester({
     ecmaVersion: 'latest',
     sourceType: 'module',
     ecmaFeatures: {
-      jsx: true
-    }
-  }
+      jsx: true,
+    },
+  },
 })
 
 ruleTester.run('no-deprecated-colors', rule, {
@@ -38,7 +38,7 @@ ruleTester.run('no-deprecated-colors', rule, {
     `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'}`
+    `{color: 'text.primary'}`,
   ],
   invalid: [
     {
@@ -47,18 +47,18 @@ ruleTester.run('no-deprecated-colors', rule, {
       options: [{checkAllStrings: true}],
       errors: [
         {
-          message: '"text.primary" is deprecated. Use "fg.default" instead.'
-        }
-      ]
+          message: '"text.primary" is deprecated. Use "fg.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"text.primary" is deprecated. Use "fg.default" instead.',
+        },
+      ],
     },
     {
       code: `import {Box} from "../components"; function Example() { return <Box color="text.primary">Hello</Box> }`,
@@ -66,81 +66,81 @@ ruleTester.run('no-deprecated-colors', rule, {
       options: [{skipImportCheck: true}],
       errors: [
         {
-          message: '"text.primary" is deprecated. Use "fg.default" instead.'
-        }
-      ]
+          message: '"text.primary" is deprecated. Use "fg.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"text.primary" is deprecated. Use "fg.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"text.primary" is deprecated. Use "fg.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"theme.shadows.autocomplete.shadow" is deprecated. Use "theme.shadows.shadow.medium" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"theme.colors.text.primary" is deprecated. Use "theme.colors.fg.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"t.colors.text.primary" is deprecated. Use "t.colors.fg.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.',
+        },
+      ],
     },
     {
       code: `import {Box} from "@primer/react"; <Box color="auto.green.5" />`,
@@ -150,72 +150,72 @@ ruleTester.run('no-deprecated-colors', rule, {
           suggestions: [
             {
               desc: 'Use "success.fg" instead.',
-              output: `import {Box} from "@primer/react"; <Box color="success.fg" />`
+              output: `import {Box} from "@primer/react"; <Box color="success.fg" />`,
             },
             {
               desc: 'Use "success.emphasis" instead.',
-              output: `import {Box} from "@primer/react"; <Box color="success.emphasis" />`
-            }
-          ]
-        }
-      ]
+              output: `import {Box} from "@primer/react"; <Box color="success.emphasis" />`,
+            },
+          ],
+        },
+      ],
     },
     {
       code: `import {Box} from "@primer/react"; <Box color="fade.fg10" />`,
       errors: [
         {
           message:
-            '"fade.fg10" is deprecated. Go to https://primer.style/primitives or reach out in the #primer channel on Slack to find a suitable replacement.'
-        }
-      ]
+            '"fade.fg10" is deprecated. Go to https://primer.style/primitives or reach out in the #primer channel on Slack to find a suitable replacement.',
+        },
+      ],
     },
     {
       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.'
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.',
         },
         {
-          message: '"text.primary" is deprecated. Use "fg.default" instead.'
-        }
-      ]
+          message: '"text.primary" is deprecated. Use "fg.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.',
+        },
+      ],
     },
     {
       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.'
-        }
-      ]
+          message: '"shadows.autocomplete.shadow" is deprecated. Use "shadows.shadow.medium" instead.',
+        },
+      ],
     },
     {
       code: `import {get} from "./constants"; get("colors.text.primary")`,
       output: `import {get} from "./constants"; get("colors.fg.default")`,
       errors: [
         {
-          message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.'
-        }
-      ]
+          message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.',
+        },
+      ],
     },
     {
       code: `import {get} from "../constants"; get("colors.text.primary")`,
       output: `import {get} from "../constants"; get("colors.fg.default")`,
       errors: [
         {
-          message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.'
-        }
-      ]
-    }
-  ]
+          message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.',
+        },
+      ],
+    },
+  ],
 })

package/src/rules/__tests__/no-system-props.test.js

@@ -6,9 +6,9 @@ const ruleTester = new RuleTester({
     ecmaVersion: 'latest',
     sourceType: 'module',
     ecmaFeatures: {
-      jsx: true
-    }
-  }
+      jsx: true,
+    },
+  },
 })
 
 ruleTester.run('no-system-props', rule, {
@@ -21,7 +21,7 @@ ruleTester.run('no-system-props', rule, {
     `import {Button} from '@primer/react'; <Button {...someExpression()} />`,
     `import {Button} from '@primer/react'; <Button variant="large" />`,
     `import {Button} from '@primer/react'; <Button size="large" />`,
-    `import {ActionMenu} from '@primer/react'; <ActionMenu.Overlay width="large" />`
+    `import {ActionMenu} from '@primer/react'; <ActionMenu.Overlay width="large" />`,
   ],
   invalid: [
     {
@@ -30,9 +30,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Button} from '@primer/react'; <Button width="200" />`,
@@ -40,9 +40,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Button} from '@primer/react'; <Button width={"200"} />`,
@@ -50,9 +50,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Button} from '@primer/react'; <Button width={myWidth} />`,
@@ -60,9 +60,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Button} from '@primer/react'; <Button width={200} height={100} />`,
@@ -70,9 +70,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width, height', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width, height', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Button} from '@primer/react'; <Button width={200} sx={{height: 200}} />`,
@@ -80,9 +80,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Button} from '@primer/react'; <Button width={200} sx={{width: 300}} />`,
@@ -90,9 +90,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Button} from '@primer/react'; <Button width={200} sx={myStylez} />`,
@@ -100,9 +100,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Button} from '@primer/react'; <Button width={200} sx={{...partialStyles, width: 100}} />`,
@@ -110,9 +110,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Label} from '@primer/react'; <Label width={200} outline />`,
@@ -120,9 +120,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Label'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Label'},
+        },
+      ],
     },
     {
       code: `import {Box} from '@primer/react'; <Box width={200} />`,
@@ -131,9 +131,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Box'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Box'},
+        },
+      ],
     },
     {
       code: `import {Text} from '@primer/react'; <Text width={200} />`,
@@ -142,9 +142,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Text'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Text'},
+        },
+      ],
     },
     {
       code: `import {Button} from '../Button'; <Button width={200} />`,
@@ -153,9 +153,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Button'},
+        },
+      ],
     },
     {
       code: `import {Foo} from '../Foo'; <Foo width={200} />`,
@@ -164,9 +164,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Foo'}
-        }
-      ]
+          data: {propNames: 'width', componentName: 'Foo'},
+        },
+      ],
     },
     {
       code: `import {Button} from '@primer/react'; <Button.Counter width={200} />`,
@@ -174,9 +174,9 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button.Counter'}
-        }
-      ]
-    }
-  ]
+          data: {propNames: 'width', componentName: 'Button.Counter'},
+        },
+      ],
+    },
+  ],
 })

package/src/rules/a11y-explicit-heading.js

@@ -15,7 +15,7 @@ const isUsingAsProp = elem => {
 
 const isValidAsUsage = value => validHeadings.includes(value.toLowerCase())
 const isInvalid = elem => {
-  if (elem.attributes.length === 1 && elem.attributes[0].type === 'JSXSpreadAttribute') return;
+  if (elem.attributes.length === 1 && elem.attributes[0].type === 'JSXSpreadAttribute') return
 
   const elemAs = isUsingAsProp(elem)
 
@@ -35,32 +35,35 @@ module.exports = {
       {
         properties: {
           skipImportCheck: {
-            type: 'boolean'
-          }
-        }
-      }
+            type: 'boolean',
+          },
+        },
+      },
     ],
     messages: {
       nonExplicitHeadingLevel: 'Heading must have an explicit heading level applied through the `as` prop.',
-      invalidAsValue: 'Usage of `as` must only be used for heading elements (h1-h6).'
-    }
+      invalidAsValue: 'Usage of `as` must only be used for heading elements (h1-h6).',
+    },
   },
-  create: function(context) {
+  create(context) {
     return {
       JSXOpeningElement(jsxNode) {
         const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
 
-        if ((skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) && isHeadingComponent(jsxNode)) {
+        if (
+          (skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) &&
+          isHeadingComponent(jsxNode)
+        ) {
           const error = isInvalid(jsxNode)
 
           if (error) {
             context.report({
               node: jsxNode,
-              messageId: error
+              messageId: error,
             })
           }
         }
-      }
+      },
     }
-  }
-}
+  },
+}