Add rule for Link to not be allowed without href (#364)

* Add rule for Link to not be allowed without href

* Fix the message

* Remove fixable property

* Create curvy-stingrays-decide.md

Author: pksjce

.changeset/curvy-stingrays-decide.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Add rule for Link to not be allowed without href

src/rules/__tests__/enforce-button-for-link-with-nohref.test.js

@@ -0,0 +1,86 @@
+const rule = require('../enforce-button-for-link-with-nohref')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('enforce-button-for-link-with-nohref', rule, {
+  valid: [
+    // Link with href attribute
+    `import {Link} from '@primer/react';
+    <Link href="https://example.com">Valid Link</Link>`,
+
+    // Link with href and inline prop
+    `import {Link} from '@primer/react';
+    <Link inline href="https://example.com">Valid Inline Link</Link>`,
+
+    // Link with href and className
+    `import {Link} from '@primer/react';
+    <Link className="some-class" href="https://example.com">Valid Link with Class</Link>`,
+
+    // Link with href, inline, and className
+    `import {Link} from '@primer/react';
+    <Link className="some-class" inline href="https://example.com">Valid Inline Link with Class</Link>`,
+
+    // Link with href as variable
+    `import {Link} from '@primer/react';
+    const url = '/about';
+    <Link href={url}>About</Link>`,
+
+    // Button component (not Link)
+    `import {Button} from '@primer/react';
+    <Button onClick={handleClick}>Click me</Button>`,
+
+    // Regular HTML link (not Primer Link)
+    `<a onClick={handleClick}>Click me</a>`,
+
+    // Link from different package
+    `import {Link} from 'react-router-dom';
+    <Link to="/about">About</Link>`,
+  ],
+  invalid: [
+    {
+      code: `import {Link} from '@primer/react';
+      <Link>Invalid Link without href</Link>`,
+      errors: [
+        {
+          messageId: 'noLinkWithoutHref',
+        },
+      ],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <Link className="some-class">Invalid Link with class but no href</Link>`,
+      errors: [
+        {
+          messageId: 'noLinkWithoutHref',
+        },
+      ],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <Link inline>Invalid inline Link without href</Link>`,
+      errors: [
+        {
+          messageId: 'noLinkWithoutHref',
+        },
+      ],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <Link onClick={handleClick}>Invalid Link with onClick but no href</Link>`,
+      errors: [
+        {
+          messageId: 'noLinkWithoutHref',
+        },
+      ],
+    },
+  ],
+})

src/rules/enforce-button-for-link-with-nohref.js

@@ -0,0 +1,41 @@
+const url = require('../url')
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+const {isPrimerComponent} = require('../utils/is-primer-component')
+
+module.exports = {
+  meta: {
+    type: 'error',
+    docs: {
+      description: 'Disallow usage of Link component without href',
+      recommended: true,
+      url: url(module),
+    },
+    messages: {
+      noLinkWithoutHref: 'Links without href and other side effects are not accessible. Use a Button instead.',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
+    return {
+      JSXElement(node) {
+        const openingElement = node.openingElement
+        const elementName = getJSXOpeningElementName(openingElement)
+
+        // Check if this is a Link component from @primer/react
+        if (elementName === 'Link' && isPrimerComponent(openingElement.name, sourceCode.getScope(node))) {
+          // Check if the Link has an href attribute
+          const hrefAttribute = getJSXOpeningElementAttribute(openingElement, 'href')
+
+          if (!hrefAttribute) {
+            context.report({
+              node: openingElement,
+              messageId: 'noLinkWithoutHref',
+            })
+          }
+        }
+      },
+    }
+  },
+}