Add a11y-use-next-tooltip rule

docs/rules/use-next-tooltip.md

@@ -0,0 +1,16 @@
+# 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'
+```

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

@@ -0,0 +1,39 @@
+const rule = require('../use-next-tooltip')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('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';`,
+      errors: [{messageId: 'useNextTooltip'}],
+      output: `import {Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';`,
+    },
+    {
+      code: `import {ActionList, ActionMenu, Tooltip, Button} from '@primer/react';`,
+      errors: [{messageId: 'useNextTooltip'}],
+      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';`,
+    },
+  ],
+})

src/rules/use-next-tooltip.js

@@ -0,0 +1,60 @@
+'use strict'
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'recommends the use of @primer/react/next Tooltip component',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: true,
+    schema: [],
+    messages: {
+      useNextTooltip: 'Please use @primer/react/next Tooltip component that has accessibility improvements',
+    },
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== '@primer/react') {
+          return
+        }
+        const hasTooltip = node.specifiers.some(
+          specifier => specifier.imported && specifier.imported.name === 'Tooltip',
+        )
+
+        const hasOtherImports = node.specifiers.some(
+          specifier => specifier.imported && specifier.imported.name !== 'Tooltip',
+        )
+        if (!hasTooltip) {
+          return
+        }
+        context.report({
+          node,
+          messageId: 'useNextTooltip',
+          fix(fixer) {
+            // If Tooltip is the only import, replace the whole import statement
+            if (!hasOtherImports) {
+              return fixer.replaceText(node.source, `'@primer/react/next'`)
+            } else {
+              // Otherwise, remove Tooltip from the import statement and add a new import statement with the correct path
+              const tooltipSpecifier = node.specifiers.find(
+                specifier => specifier.imported && specifier.imported.name === 'Tooltip',
+              )
+              return [
+                // remove tooltip specifier and the space and comma after it
+                fixer.removeRange([tooltipSpecifier.range[0], tooltipSpecifier.range[1] + 2]),
+                // fixer.remove(tooltipSpecifier),
+                fixer.insertTextAfterRange(
+                  [node.range[1], node.range[1]],
+                  `\nimport {Tooltip} from '@primer/react/next';`,
+                ),
+              ]
+            }
+          },
+        })
+      },
+    }
+  },
+}