Add no-use-responsive-value rule (#443)

* Add no-use-responsive-value

* Add changeset

Author: hectahertz

.changeset/neat-mammals-flow.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': minor
+---
+
+Add no-use-responsive-value

docs/rules/no-use-responsive-value.md

@@ -0,0 +1,102 @@
+# no-use-responsive-value
+
+Disallow using `useResponsiveValue` hook from `@primer/react` or local imports.
+
+## Rule Details
+
+This rule prevents the use of the `useResponsiveValue` hook from:
+
+- `@primer/react` package imports (including `/experimental` and `/deprecated` entrypoints)
+- Local file imports (relative paths containing `useResponsiveValue`)
+
+### Why?
+
+This hook is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches. This rule helps enforce consistent usage of SSR-safe responsive patterns across the codebase.
+
+## Examples
+
+### ❌ Incorrect
+
+```js
+import {useResponsiveValue} from '@primer/react'
+
+function Component() {
+  const value = useResponsiveValue(['sm', 'md', 'lg'])
+  return <div>{value}</div>
+}
+```
+
+```js
+import {Button, useResponsiveValue} from '@primer/react'
+```
+
+```js
+import {useResponsiveValue} from '@primer/react/experimental'
+```
+
+```js
+import {useResponsiveValue} from '../hooks/useResponsiveValue'
+```
+
+```js
+import useResponsiveValue from '../hooks/useResponsiveValue'
+```
+
+```js
+import {useResponsiveValue} from './useResponsiveValue'
+```
+
+### ✅ Correct
+
+```js
+import {Button} from '@primer/react'
+
+function Component() {
+  // Use alternative responsive patterns
+  return <Button>Click me</Button>
+}
+```
+
+```js
+import {useResponsiveValue} from 'other-library'
+
+function Component() {
+  // Using useResponsiveValue from a different library is allowed
+  const value = useResponsiveValue(['sm', 'md', 'lg'])
+  return <div>{value}</div>
+}
+```
+
+```js
+import {useCustomHook} from '../hooks/useCustomHook'
+
+function Component() {
+  // Importing other hooks from local paths is allowed
+  const value = useCustomHook(['sm', 'md', 'lg'])
+  return <div>{value}</div>
+}
+```
+
+```js
+function useResponsiveValue() {
+  // Local function definitions are allowed
+  return 'custom implementation'
+}
+
+function Component() {
+  const value = useResponsiveValue()
+  return <div>{value}</div>
+}
+```
+
+## When Not To Use It
+
+If your project needs to use `useResponsiveValue` from `@primer/react`, you can disable this rule:
+
+```js
+/* eslint primer-react/no-use-responsive-value: "off" */
+```
+
+## Options
+
+This rule has no options.

src/configs/recommended.js

@@ -23,6 +23,7 @@ module.exports = {
     'primer-react/a11y-use-accessible-tooltip': 'error',
     'primer-react/no-unnecessary-components': 'error',
     'primer-react/prefer-action-list-item-onselect': 'error',
+    'primer-react/no-use-responsive-value': 'error',
   },
   settings: {
     github: {

src/index.js

@@ -21,6 +21,7 @@ module.exports = {
     'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
     'use-styled-react-import': require('./rules/use-styled-react-import'),
     'spread-props-first': require('./rules/spread-props-first'),
+    'no-use-responsive-value': require('./rules/no-use-responsive-value'),
   },
   configs: {
     recommended: require('./configs/recommended'),

src/rules/__tests__/no-use-responsive-value.test.js

@@ -0,0 +1,133 @@
+'use strict'
+
+const {RuleTester} = require('eslint')
+const rule = require('../no-use-responsive-value')
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('no-use-responsive-value', rule, {
+  valid: [
+    // Valid - not importing useResponsiveValue
+    `import { Button } from '@primer/react'`,
+
+    // Valid - importing from other modules
+    `import { useResponsiveValue } from 'other-module'`,
+
+    // Valid - using other hooks from @primer/react
+    `import { useTheme } from '@primer/react'`,
+
+    // Valid - function with same name but not imported from @primer/react
+    `function useResponsiveValue() { return 'custom' }`,
+
+    // Valid - importing from unrelated local paths
+    `import { something } from '../utils/helpers'`,
+
+    // Valid - importing other hooks from local paths
+    `import { useCustomHook } from '../hooks/useCustomHook'`,
+  ],
+  invalid: [
+    // Invalid - importing useResponsiveValue from @primer/react
+    {
+      code: `import { useResponsiveValue } from '@primer/react'`,
+      errors: [
+        {
+          messageId: 'noUseResponsiveValue',
+        },
+      ],
+    },
+
+    // Invalid - importing with other imports
+    {
+      code: `import { Button, useResponsiveValue, Box } from '@primer/react'`,
+      errors: [
+        {
+          messageId: 'noUseResponsiveValue',
+        },
+      ],
+    },
+
+    // Invalid - importing as named import with alias
+    {
+      code: `import { useResponsiveValue as useRV } from '@primer/react'
+             function Component() {
+               const value = useRV(['sm', 'md'])
+               return <div>{value}</div>
+             }`,
+      errors: [
+        {
+          messageId: 'noUseResponsiveValue',
+        },
+      ],
+    },
+
+    // Invalid - importing from experimental entrypoint
+    {
+      code: `import { useResponsiveValue } from '@primer/react/experimental'`,
+      errors: [
+        {
+          messageId: 'noUseResponsiveValue',
+        },
+      ],
+    },
+
+    // Invalid - importing from deprecated entrypoint
+    {
+      code: `import { useResponsiveValue } from '@primer/react/deprecated'`,
+      errors: [
+        {
+          messageId: 'noUseResponsiveValue',
+        },
+      ],
+    },
+
+    // Invalid - importing from local hooks path
+    {
+      code: `import { useResponsiveValue } from '../hooks/useResponsiveValue'`,
+      errors: [
+        {
+          messageId: 'noUseResponsiveValue',
+        },
+      ],
+    },
+
+    // Invalid - importing default from local useResponsiveValue file
+    {
+      code: `import useResponsiveValue from '../hooks/useResponsiveValue'`,
+      errors: [
+        {
+          messageId: 'noUseResponsiveValue',
+        },
+      ],
+    },
+
+    // Invalid - importing from nested path containing useResponsiveValue
+    {
+      code: `import { useResponsiveValue } from '../../src/hooks/useResponsiveValue'`,
+      errors: [
+        {
+          messageId: 'noUseResponsiveValue',
+        },
+      ],
+    },
+
+    // Invalid - importing from lib path containing useResponsiveValue
+    {
+      code: `import { useResponsiveValue } from './useResponsiveValue'`,
+      errors: [
+        {
+          messageId: 'noUseResponsiveValue',
+        },
+      ],
+    },
+  ],
+})

src/rules/no-use-responsive-value.js

@@ -0,0 +1,53 @@
+'use strict'
+
+const url = require('../url')
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow using useResponsiveValue hook',
+      recommended: true,
+      url: url(module),
+    },
+    schema: [],
+    messages: {
+      noUseResponsiveValue: 'useResponsiveValue is not allowed. Use alternative responsive patterns instead.',
+    },
+  },
+  create(context) {
+    return {
+      // Check for import declarations
+      ImportDeclaration(node) {
+        // Check for @primer/react imports
+        const isPrimerImport = /@primer\/react/.test(node.source.value)
+        // Check for local imports that might be useResponsiveValue hook
+        const isLocalUseResponsiveValueImport =
+          node.source.value.includes('useResponsiveValue') || node.source.value.includes('/hooks/useResponsiveValue')
+
+        if (!isPrimerImport && !isLocalUseResponsiveValueImport) {
+          return
+        }
+
+        for (const specifier of node.specifiers) {
+          if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'useResponsiveValue') {
+            context.report({
+              node: specifier,
+              messageId: 'noUseResponsiveValue',
+            })
+          }
+          // Also check for default imports from useResponsiveValue files
+          if (specifier.type === 'ImportDefaultSpecifier' && isLocalUseResponsiveValueImport) {
+            context.report({
+              node: specifier,
+              messageId: 'noUseResponsiveValue',
+            })
+          }
+        }
+      },
+    }
+  },
+}