eslint-plugin-primer-react 6.2.0-rc.2c85052 → 7.0.0-rc.414f409

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "6.2.0-rc.2c85052",
+  "version": "7.0.0-rc.414f409",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/configs/recommended.js

@@ -17,10 +17,11 @@ module.exports = {
     'primer-react/a11y-explicit-heading': 'error',
     'primer-react/no-deprecated-props': 'warn',
     'primer-react/a11y-remove-disable-tooltip': 'error',
-    'primer-react/a11y-use-next-tooltip': 'error',
+    'primer-react/a11y-use-accessible-tooltip': 'error',
     'primer-react/no-unnecessary-components': 'error',
     'primer-react/prefer-action-list-item-onselect': 'error',
     'primer-react/enforce-css-module-identifier-casing': 'error',
+    'primer-react/enforce-css-module-default-import': ['error', {enforceName: '(^classes$|Classes$)'}],
   },
   settings: {
     github: {

package/src/index.js

@@ -9,12 +9,13 @@ module.exports = {
     'no-deprecated-props': require('./rules/no-deprecated-props'),
     'a11y-link-in-text-block': require('./rules/a11y-link-in-text-block'),
     'a11y-remove-disable-tooltip': require('./rules/a11y-remove-disable-tooltip'),
-    'a11y-use-next-tooltip': require('./rules/a11y-use-next-tooltip'),
+    'a11y-use-accessible-tooltip': require('./rules/a11y-use-accessible-tooltip'),
     'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
     'no-wildcard-imports': require('./rules/no-wildcard-imports'),
     'no-unnecessary-components': require('./rules/no-unnecessary-components'),
     'prefer-action-list-item-onselect': require('./rules/prefer-action-list-item-onselect'),
     'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
+    'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
   },
   configs: {
     recommended: require('./configs/recommended'),

package/src/rules/__tests__/a11y-use-accessible-tooltip.test.js

@@ -0,0 +1,59 @@
+const rule = require('../a11y-use-accessible-tooltip')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('a11y-use-accessible-tooltip', rule, {
+  valid: [`import {Tooltip} from '@primer/react';`],
+  invalid: [
+    // Single import from deprecated
+    {
+      code: `import {Tooltip} from '@primer/react/deprecated';`,
+      errors: [{messageId: 'useAccessibleTooltip'}],
+      output: `import {Tooltip} from '@primer/react';`,
+    },
+    // Multiple imports from deprecated
+    {
+      code: `import {Tooltip, Button} from '@primer/react/deprecated';`,
+      errors: [{messageId: 'useAccessibleTooltip'}],
+      output: `import {Button} from '@primer/react/deprecated';\nimport {Tooltip} from '@primer/react';`,
+    },
+    // Multiple imports from deprecated
+    {
+      code: `import {Button, Tooltip, Stack} from '@primer/react/deprecated';`,
+      errors: [{messageId: 'useAccessibleTooltip'}],
+      output: `import {Button, Stack} from '@primer/react/deprecated';\nimport {Tooltip} from '@primer/react';`,
+    },
+    // Single import from deprecated with an existing import from @primer/react
+    {
+      code: `import {Tooltip} from '@primer/react/deprecated';import {ActionList, ActionMenu} from '@primer/react';`,
+      errors: [{messageId: 'useAccessibleTooltip', line: 1}],
+      output: `import {ActionList, ActionMenu, Tooltip} from '@primer/react';`,
+    },
+    // Multiple imports from deprecated with an existing import from @primer/react
+    {
+      code: `import {Dialog, Tooltip} from '@primer/react/deprecated';import {ActionList, ActionMenu} from '@primer/react';`,
+      errors: [{messageId: 'useAccessibleTooltip', line: 1}],
+      output: `import {Dialog} from '@primer/react/deprecated';import {ActionList, ActionMenu, Tooltip} from '@primer/react';`,
+    },
+    {
+      code: `import {ActionList, ActionMenu, Tooltip, Button} from '@primer/react/deprecated';\n<Tooltip aria-label="tooltip text" noDelay={true} wrap={true} align="left"><Button>Button</Button></Tooltip>`,
+      errors: [
+        {messageId: 'useAccessibleTooltip', line: 1},
+        {messageId: 'useTextProp', line: 2},
+        {messageId: 'noDelayRemoved', line: 2},
+        {messageId: 'wrapRemoved', line: 2},
+        {messageId: 'alignRemoved', line: 2},
+      ],
+      output: `import {ActionList, ActionMenu, Button} from '@primer/react/deprecated';\nimport {Tooltip} from '@primer/react';\n<Tooltip text="tooltip text"   ><Button>Button</Button></Tooltip>`,
+    },
+  ],
+})

package/src/rules/__tests__/enforce-css-module-default-import.js

@@ -0,0 +1,88 @@
+const rule = require('../enforce-css-module-default-import')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('enforce-css-module-default-import', rule, {
+  valid: [
+    'import classes from "a.module.css";',
+    'import {default as classes} from "a.module.css";',
+    'import staticClasses from "a.module.css";',
+    'import fooClasses from "a.module.css";',
+    'import whatever from "a.js";',
+    'import whatever from "a.module.js";',
+    'import whatever from "a.css";',
+    'import {whatever} from "a.js";',
+    'import {whatever} from "a.css";',
+    {
+      code: 'import classes from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+    },
+    {
+      code: 'import sharedClasses from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+    },
+  ],
+  invalid: [
+    {
+      code: 'import {foo} from "a.module.css";',
+      errors: [
+        {
+          messageId: 'notDefault',
+        },
+      ],
+    },
+    {
+      code: 'import _, {foo} from "a.module.css";',
+      errors: [
+        {
+          messageId: 'notDefault',
+        },
+      ],
+    },
+    {
+      code: 'import foobar from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+      errors: [
+        {
+          messageId: 'badName',
+        },
+      ],
+    },
+    {
+      code: 'import someclasses from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+      errors: [
+        {
+          messageId: 'badName',
+        },
+      ],
+    },
+    {
+      code: 'import {default as foobar} from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+      errors: [
+        {
+          messageId: 'badName',
+        },
+      ],
+    },
+    {
+      code: 'import {default as someclasses} from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+      errors: [
+        {
+          messageId: 'badName',
+        },
+      ],
+    },
+  ],
+})

package/src/rules/__tests__/enforce-css-module-identifier-casing.test.js

@@ -19,6 +19,7 @@ ruleTester.run('enforce-css-module-identifier-casing', rule, {
     'import classes from "a.module.css"; function Foo() { return <Box className={`${classes.Foo}`}/> }',
     'import classes from "a.module.css"; function Foo() { return <Box className={`${classes["Foo"]}`}/> }',
     'import classes from "a.module.css"; let x = "Foo"; function Foo() { return <Box className={`${classes[x]}`}/> }',
+    'import {Foo} from "a.module.css"; function Bar() { return <Box className={Foo}/> }',
   ],
   invalid: [
     {
@@ -30,6 +31,15 @@ ruleTester.run('enforce-css-module-identifier-casing', rule, {
         },
       ],
     },
+    {
+      code: 'import {foo} from "a.module.css"; function Bar() { return <Box className={foo}/> }',
+      errors: [
+        {
+          messageId: 'pascal',
+          data: {name: 'foo'},
+        },
+      ],
+    },
     {
       code: 'import classes from "a.module.css"; function Foo() { return <Box className={clsx(classes.foo)}/> }',
       errors: [

package/src/rules/a11y-use-accessible-tooltip.js

@@ -0,0 +1,148 @@
+'use strict'
+const url = require('../url')
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'recommends the use of @primer/react Tooltip component',
+      category: 'Best Practices',
+      recommended: true,
+      url: url(module),
+    },
+    fixable: true,
+    schema: [],
+    messages: {
+      useAccessibleTooltip: 'Please use @primer/react Tooltip component that has accessibility improvements',
+      useTextProp: 'Please use the text prop instead of aria-label',
+      noDelayRemoved: 'noDelay prop is removed. Tooltip now has no delay by default',
+      wrapRemoved: 'wrap prop is removed. Tooltip now wraps by default',
+      alignRemoved: 'align prop is removed. Please use the direction prop instead.',
+    },
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== '@primer/react/deprecated') {
+          return
+        }
+        const hasTooltip = node.specifiers.some(
+          specifier => specifier.imported && specifier.imported.name === 'Tooltip',
+        )
+
+        if (!hasTooltip) {
+          return
+        }
+
+        const hasOtherImports = node.specifiers.length > 1
+
+        const sourceCode = context.getSourceCode()
+        // Checking to see if there is an existing root (@primer/react) import
+        // Assuming there is one root import per file
+        const rootImport = sourceCode.ast.body.find(statement => {
+          return statement.type === 'ImportDeclaration' && statement.source.value === '@primer/react'
+        })
+
+        const tooltipSpecifier = node.specifiers.find(
+          specifier => specifier.imported && specifier.imported.name === 'Tooltip',
+        )
+
+        const hasRootImport = rootImport !== undefined
+
+        context.report({
+          node,
+          messageId: 'useAccessibleTooltip',
+          fix(fixer) {
+            const fixes = []
+            if (!hasOtherImports) {
+              // If Tooltip is the only import and no existing @primer/react import, replace the whole import statement
+              if (!hasRootImport) fixes.push(fixer.replaceText(node.source, `'@primer/react'`))
+              if (hasRootImport) {
+                //  remove the entire import statement
+                fixes.push(fixer.remove(node))
+                // find the last specifier in the existing @primer/react import and insert Tooltip after that
+                const lastSpecifier = rootImport.specifiers[rootImport.specifiers.length - 1]
+                fixes.push(fixer.insertTextAfter(lastSpecifier, `, Tooltip`))
+              }
+            } else {
+              // There are other imports from the deprecated bundle but no existing @primer/react import, so remove the Tooltip import and add a new import statement with the correct path.
+              const previousToken = sourceCode.getTokenBefore(tooltipSpecifier)
+              const nextToken = sourceCode.getTokenAfter(tooltipSpecifier)
+              const hasTrailingComma = nextToken && nextToken.value === ','
+              const hasLeadingComma = previousToken && previousToken.value === ','
+
+              let rangeToRemove
+
+              if (hasTrailingComma) {
+                rangeToRemove = [tooltipSpecifier.range[0], nextToken.range[1] + 1]
+              } else if (hasLeadingComma) {
+                rangeToRemove = [previousToken.range[0], tooltipSpecifier.range[1]]
+              } else {
+                rangeToRemove = [tooltipSpecifier.range[0], tooltipSpecifier.range[1]]
+              }
+              // Remove Tooltip from the import statement
+              fixes.push(fixer.removeRange(rangeToRemove))
+
+              if (!hasRootImport) {
+                fixes.push(fixer.insertTextAfter(node, `\nimport {Tooltip} from '@primer/react';`))
+              } else {
+                // find the last specifier in the existing @primer/react import and insert Tooltip after that
+                const lastSpecifier = rootImport.specifiers[rootImport.specifiers.length - 1]
+                fixes.push(fixer.insertTextAfter(lastSpecifier, `, Tooltip`))
+              }
+            }
+            return fixes
+          },
+        })
+      },
+      JSXOpeningElement(node) {
+        const openingElName = getJSXOpeningElementName(node)
+        if (openingElName !== 'Tooltip') {
+          return
+        }
+        const ariaLabel = getJSXOpeningElementAttribute(node, 'aria-label')
+        if (ariaLabel !== undefined) {
+          context.report({
+            node,
+            messageId: 'useTextProp',
+            fix(fixer) {
+              return fixer.replaceText(ariaLabel.name, 'text')
+            },
+          })
+        }
+        const noDelay = getJSXOpeningElementAttribute(node, 'noDelay')
+        if (noDelay !== undefined) {
+          context.report({
+            node,
+            messageId: 'noDelayRemoved',
+            fix(fixer) {
+              return fixer.remove(noDelay)
+            },
+          })
+        }
+        const wrap = getJSXOpeningElementAttribute(node, 'wrap')
+        if (wrap !== undefined) {
+          context.report({
+            node,
+            messageId: 'wrapRemoved',
+            fix(fixer) {
+              return fixer.remove(wrap)
+            },
+          })
+        }
+        const align = getJSXOpeningElementAttribute(node, 'align')
+        if (align !== undefined) {
+          context.report({
+            node,
+            messageId: 'alignRemoved',
+            fix(fixer) {
+              return fixer.remove(align)
+            },
+          })
+        }
+      },
+    }
+  },
+}

package/src/rules/enforce-css-module-default-import.js

@@ -0,0 +1,62 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    schema: [
+      {
+        properties: {
+          enforceName: {
+            type: 'string',
+          },
+        },
+      },
+    ],
+    messages: {
+      badName: 'This default import should match {{enforceName}}',
+      notDefault: 'Class modules should only import the default object.',
+      noDefault: 'Class modules should always import default.',
+    },
+  },
+  create(context) {
+    const enforceName = new RegExp(context.options[0]?.enforceName || '.*')
+    return {
+      ['ImportDeclaration>Literal[value=/.module.css$/]']: function (node) {
+        node = node.parent
+        const defaultSpecifier = node.specifiers.find(spec => spec.type === 'ImportDefaultSpecifier')
+        const otherSpecifiers = node.specifiers.filter(spec => spec.type !== 'ImportDefaultSpecifier')
+        const asDefaultSpecifier = otherSpecifiers.find(spec => spec.imported?.name === 'default')
+        if (!node.specifiers.length) {
+          context.report({
+            node,
+            messageId: 'noDefault',
+          })
+        } else if (otherSpecifiers.length === 1 && asDefaultSpecifier) {
+          if (!enforceName.test(asDefaultSpecifier.local.name)) {
+            context.report({
+              node,
+              messageId: 'badName',
+              data: {enforceName},
+            })
+          }
+        } else if (otherSpecifiers.length) {
+          context.report({
+            node,
+            messageId: 'notDefault',
+          })
+        } else if (!defaultSpecifier) {
+          context.report({
+            node,
+            messageId: 'noDefault',
+          })
+        }
+        if (defaultSpecifier && !enforceName.test(defaultSpecifier.local.name)) {
+          context.report({
+            node,
+            messageId: 'badName',
+            data: {enforceName},
+          })
+        }
+      },
+    }
+  },
+}

package/src/rules/enforce-css-module-identifier-casing.js

@@ -24,6 +24,16 @@ module.exports = {
   create(context) {
     const casing = context.options[0]?.casing || 'pascal'
     return {
+      ['JSXAttribute[name.name="className"] JSXExpressionContainer>Identifier']: function (node) {
+        if (!identifierIsCSSModuleBinding(node, context)) return
+        if (!casingMatches(node.name || '', casing)) {
+          context.report({
+            node,
+            messageId: casing,
+            data: {name: node.name},
+          })
+        }
+      },
       ['JSXAttribute[name.name="className"] JSXExpressionContainer MemberExpression[object.type="Identifier"]']:
         function (node) {
           if (!identifierIsCSSModuleBinding(node.object, context)) return
@@ -44,8 +54,8 @@ module.exports = {
               })
             }
           } else if (node.computed) {
-            const ref = context
-              .getScope()
+            const ref = context.sourceCode
+              .getScope(node)
               .references.find(reference => reference.identifier.name === node.property.name)
             const def = ref.resolved?.defs?.[0]
             if (def?.node?.init?.type === 'Literal') {

package/src/utils/css-modules.js

@@ -4,8 +4,8 @@ function importBindingIsFromCSSModuleImport(node) {
 
 function identifierIsCSSModuleBinding(node, context) {
   if (node.type !== 'Identifier') return false
-  const ref = context.getScope().references.find(reference => reference.identifier.name === node.name)
-  if (ref.resolved?.defs?.some(importBindingIsFromCSSModuleImport)) {
+  const ref = context.sourceCode.getScope(node).references.find(reference => reference.identifier.name === node.name)
+  if (ref && ref.resolved?.defs?.some(importBindingIsFromCSSModuleImport)) {
     return true
   }
   return false

package/docs/rules/a11y-use-next-tooltip.md

@@ -1,33 +0,0 @@
-# Recommends to use the `next` tooltip instead of the current stable one.
-
-## Rule details
-
-This rule recommends using the tooltip that is imported from `@primer/react/next` instead of the main entrypoint. The components that are exported from `@primer/react/next` are recommended over the main entrypoint ones because `next` components are reviewed and remediated for accessibility issues.
-👎 Examples of **incorrect** code for this rule:
-
-```tsx
-import {Tooltip} from '@primer/react'
-```
-
-👍 Examples of **correct** code for this rule:
-
-```tsx
-import {Tooltip} from '@primer/react/next'
-```
-
-## Icon buttons and tooltips
-
-Even though the below code is perfectly valid, since icon buttons now come with tooltips by default, it is not required to explicitly use the Tooltip component on icon buttons.
-
-```jsx
-import {IconButton} from '@primer/react'
-import {Tooltip} from '@primer/react/next'
-
-function ExampleComponent() {
-  return (
-    <Tooltip text="Search" direction="e">
-      <IconButton icon={SearchIcon} aria-label="Search" />
-    </Tooltip>
-  )
-}
-```

package/src/rules/__tests__/a11y-use-next-tooltip.test.js

@@ -1,61 +0,0 @@
-const rule = require('../a11y-use-next-tooltip')
-const {RuleTester} = require('eslint')
-
-const ruleTester = new RuleTester({
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-})
-
-ruleTester.run('a11y-use-next-tooltip', rule, {
-  valid: [
-    `import {Tooltip} from '@primer/react/next';`,
-    `import {UnderlineNav, Button} from '@primer/react';
-   import {Tooltip} from '@primer/react/next';`,
-    `import {UnderlineNav, Button} from '@primer/react';
-   import {Tooltip, SelectPanel} from '@primer/react/next';`,
-  ],
-  invalid: [
-    {
-      code: `import {Tooltip} from '@primer/react';`,
-      errors: [{messageId: 'useNextTooltip'}],
-      output: `import {Tooltip} from '@primer/react/next';`,
-    },
-    {
-      code: `import {Tooltip, Button} from '@primer/react';\n<Tooltip aria-label="tooltip text"><Button>Button</Button></Tooltip>`,
-      errors: [{messageId: 'useNextTooltip'}, {messageId: 'useTextProp'}],
-      output: `import {Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';\n<Tooltip text="tooltip text"><Button>Button</Button></Tooltip>`,
-    },
-    {
-      code: `import {ActionList, ActionMenu, Tooltip, Button} from '@primer/react';\n<Tooltip aria-label="tooltip text"><Button>Button</Button></Tooltip>`,
-      errors: [
-        {messageId: 'useNextTooltip', line: 1},
-        {messageId: 'useTextProp', line: 2},
-      ],
-      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';\n<Tooltip text="tooltip text"><Button>Button</Button></Tooltip>`,
-    },
-    {
-      code: `import {ActionList, ActionMenu, Button, Tooltip} from '@primer/react';\n<Tooltip aria-label="tooltip text"><Button aria-label="test">Button</Button></Tooltip>`,
-      errors: [
-        {messageId: 'useNextTooltip', line: 1},
-        {messageId: 'useTextProp', line: 2},
-      ],
-      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';\n<Tooltip text="tooltip text"><Button aria-label="test">Button</Button></Tooltip>`,
-    },
-    {
-      code: `import {ActionList, ActionMenu, Tooltip, Button} from '@primer/react';\n<Tooltip aria-label="tooltip text" noDelay={true} wrap={true} align="left"><Button>Button</Button></Tooltip>`,
-      errors: [
-        {messageId: 'useNextTooltip', line: 1},
-        {messageId: 'useTextProp', line: 2},
-        {messageId: 'noDelayRemoved', line: 2},
-        {messageId: 'wrapRemoved', line: 2},
-        {messageId: 'alignRemoved', line: 2},
-      ],
-      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';\n<Tooltip text="tooltip text"   ><Button>Button</Button></Tooltip>`,
-    },
-  ],
-})