eslint-plugin-primer-react 7.0.0-rc.903d3f3 → 7.0.0-rc.b44d6d2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "7.0.0-rc.903d3f3",
+  "version": "7.0.0-rc.b44d6d2",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {
@@ -34,8 +34,8 @@
     "eslint-traverse": "^1.0.0",
     "lodash": "^4.17.21",
     "styled-system": "^5.1.5",
-    "@typescript-eslint/utils": "8.18.1",
-    "typescript": "^5.5.3"
+    "@typescript-eslint/utils": "8.26.0",
+    "typescript": "^5.8.2"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
@@ -45,7 +45,7 @@
     "eslint": "^8.42.0",
     "eslint-plugin-prettier": "^5.2.1",
     "jest": "^29.7.0",
-    "markdownlint-cli2": "^0.14.0",
+    "markdownlint-cli2": "^0.17.1",
     "markdownlint-cli2-formatter-pretty": "^0.0.7",
     "@typescript-eslint/rule-tester": "7.16.0",
     "@types/jest": "^29.5.13"

package/src/configs/recommended.js

@@ -12,9 +12,11 @@ module.exports = {
   rules: {
     'primer-react/direct-slot-children': 'error',
     'primer-react/no-system-props': 'warn',
+    'primer-react/no-deprecated-experimental-components': 'warn',
     'primer-react/a11y-tooltip-interactive-trigger': 'error',
     'primer-react/new-color-css-vars': 'error',
     'primer-react/a11y-explicit-heading': 'error',
+    'primer-react/a11y-no-title-usage': 'error',
     'primer-react/no-deprecated-props': 'warn',
     'primer-react/a11y-remove-disable-tooltip': 'error',
     'primer-react/a11y-use-accessible-tooltip': 'error',

package/src/index.js

@@ -3,6 +3,7 @@ module.exports = {
     'direct-slot-children': require('./rules/direct-slot-children'),
     'no-deprecated-entrypoints': require('./rules/no-deprecated-entrypoints'),
     'no-system-props': require('./rules/no-system-props'),
+    'no-deprecated-experimental-components': require('./rules/no-deprecated-experimental-components'),
     'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),
     'new-color-css-vars': require('./rules/new-color-css-vars'),
     'a11y-explicit-heading': require('./rules/a11y-explicit-heading'),
@@ -10,6 +11,7 @@ module.exports = {
     'a11y-link-in-text-block': require('./rules/a11y-link-in-text-block'),
     'a11y-remove-disable-tooltip': require('./rules/a11y-remove-disable-tooltip'),
     'a11y-use-accessible-tooltip': require('./rules/a11y-use-accessible-tooltip'),
+    'a11y-no-title-usage': require('./rules/a11y-no-title-usage'),
     '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'),

package/src/rules/__tests__/a11y-no-title-usage.test.js

@@ -0,0 +1,27 @@
+const rule = require('../a11y-no-title-usage')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('a11y-no-title-usage', rule, {
+  valid: [
+    `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />`,
+    `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle />`,
+    `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} />`,
+  ],
+  invalid: [
+    {
+      code: `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={false} />`,
+      output: `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} />`,
+      errors: [{messageId: 'noTitleOnRelativeTime'}],
+    },
+  ],
+})

package/src/rules/__tests__/a11y-tooltip-interactive-trigger.test.js

@@ -67,6 +67,22 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Link>
     </Tooltip>
     `,
+    `
+    import {Tooltip, Link} from '@primer/react';
+    <Tooltip aria-label="product" direction="e">
+      <Link to={productLink}>
+        Product
+      </Link>
+    </Tooltip>
+    `,
+    `
+    import {Tooltip, Link} from '@primer/react';
+    <Tooltip aria-label="product" direction="e">
+      <Link to="https://github.com">
+        Product
+      </Link>
+    </Tooltip>
+    `,
   ],
   invalid: [
     {

package/src/rules/__tests__/no-deprecated-experimental-components.test.js

@@ -0,0 +1,44 @@
+'use strict'
+
+const {RuleTester} = require('eslint')
+const rule = require('../no-deprecated-experimental-components')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('no-deprecated-experimental-components', rule, {
+  valid: [
+    {
+      code: `import {SelectPanel} from '@primer/react'`,
+    },
+    {
+      code: `import {DataTable} from '@primer/react/experimental'`,
+    },
+    {
+      code: `import {DataTable, ActionBar} from '@primer/react/experimental'`,
+    },
+  ],
+  invalid: [
+    // Single experimental import
+    {
+      code: `import {SelectPanel} from '@primer/react/experimental'`,
+      errors: [
+        'SelectPanel is deprecated. Please import from the stable entrypoint (@primer/react) if available, or check https://primer.style/product/components/ for alternative components.',
+      ],
+    },
+    // Multiple experimental import
+    {
+      code: `import {SelectPanel, DataTable, ActionBar} from '@primer/react/experimental'`,
+      errors: [
+        'SelectPanel is deprecated. Please import from the stable entrypoint (@primer/react) if available, or check https://primer.style/product/components/ for alternative components.',
+      ],
+    },
+  ],
+})

package/src/rules/a11y-no-title-usage.js

@@ -0,0 +1,37 @@
+const url = require('../url')
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+
+module.exports = {
+  meta: {
+    type: 'error',
+    docs: {
+      description: 'Disallow usage of title attribute on some components',
+      recommended: true,
+      url: url(module),
+    },
+    messages: {
+      noTitleOnRelativeTime: 'Avoid using the title attribute on RelativeTime.',
+    },
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(jsxNode) {
+        const title = getJSXOpeningElementAttribute(jsxNode, 'noTitle')
+
+        if (title && title.value && title.value.expression && title.value.expression.value !== true) {
+          context.report({
+            node: title,
+            messageId: 'noTitleOnRelativeTime',
+            fix(fixer) {
+              const start = title.range[0] - 1
+              const end = title.range[1]
+              return fixer.removeRange([start, end])
+            },
+          })
+        }
+      },
+    }
+  },
+}

package/src/rules/a11y-tooltip-interactive-trigger.js

@@ -23,7 +23,7 @@ const isAnchorTag = el => {
 }
 
 const isJSXValue = attributes => {
-  const node = attributes.find(attribute => propName(attribute) === 'href')
+  const node = attributes.find(attribute => propName(attribute) === 'href' || propName(attribute))
   const isJSXExpression = node.value.type === 'JSXExpressionContainer' && node && typeof getPropValue(node) === 'string'
 
   return isJSXExpression
@@ -31,8 +31,14 @@ const isJSXValue = attributes => {
 
 const isInteractiveAnchor = child => {
   const hasHref = getJSXOpeningElementAttribute(child.openingElement, 'href')
-  if (!hasHref) return false
-  const href = getJSXOpeningElementAttribute(child.openingElement, 'href').value.value
+  const hasTo = getJSXOpeningElementAttribute(child.openingElement, 'to')
+
+  if (!hasHref && !hasTo) return false
+
+  const href = hasHref
+    ? getJSXOpeningElementAttribute(child.openingElement, 'href').value.value
+    : getJSXOpeningElementAttribute(child.openingElement, 'to').value.value
+
   const hasJSXValue = isJSXValue(child.openingElement.attributes)
   const isAnchorInteractive = (typeof href === 'string' && href !== '') || hasJSXValue
 

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

@@ -57,7 +57,7 @@ module.exports = {
             const ref = context.sourceCode
               .getScope(node)
               .references.find(reference => reference.identifier.name === node.property.name)
-            const def = ref.resolved?.defs?.[0]
+            const def = ref?.resolved?.defs?.[0]
             if (def?.node?.init?.type === 'Literal') {
               if (!casingMatches(def.node.init.value || '', casing)) {
                 context.report({

package/src/rules/no-deprecated-experimental-components.js

@@ -0,0 +1,67 @@
+'use strict'
+
+const url = require('../url')
+
+const components = [
+  {
+    identifier: 'SelectPanel',
+    entrypoint: '@primer/react/experimental',
+  },
+]
+
+const entrypoints = new Map()
+
+for (const component of components) {
+  if (!entrypoints.has(component.entrypoint)) {
+    entrypoints.set(component.entrypoint, new Set())
+  }
+  entrypoints.get(component.entrypoint).add(component.identifier)
+}
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Use a stable component from the `@primer/react` entrypoint, or check the docs for alternatives',
+      recommended: true,
+      url: url(module),
+    },
+    fixable: true,
+    schema: [],
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (!entrypoints.has(node.source.value)) {
+          return
+        }
+
+        const entrypoint = entrypoints.get(node.source.value)
+
+        const experimental = node.specifiers.filter(specifier => {
+          return entrypoint.has(specifier.imported.name)
+        })
+
+        const components = experimental.map(specifier => specifier.imported.name)
+
+        if (experimental.length === 0) {
+          return
+        }
+
+        if (experimental.length > 0) {
+          const message = `${components.join(', ')} ${
+            components.length > 1 ? 'are' : 'is'
+          } deprecated. Please import from the stable entrypoint (@primer/react) if available, or check https://primer.style/product/components/ for alternative components.`
+
+          context.report({
+            node,
+            message,
+          })
+        }
+      },
+    }
+  },
+}