eslint-plugin-primer-react 7.0.2-rc.1b371c5 → 7.0.3-rc.fae9e4d

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-primer-react
 
+## 7.0.3
+
+### Patch Changes
+
+- [#364](https://github.com/primer/eslint-plugin-primer-react/pull/364) [`ec701d2`](https://github.com/primer/eslint-plugin-primer-react/commit/ec701d29d35a0a3f09eea2f66dbe28b4be81957f) Thanks [@pksjce](https://github.com/pksjce)! - Add rule for Link to not be allowed without href
+
 ## 7.0.2
 
 ### Patch Changes

package/package.json

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

package/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',
+        },
+      ],
+    },
+  ],
+})

package/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',
+            })
+          }
+        }
+      },
+    }
+  },
+}