eslint-plugin-primer-react 8.4.0 → 8.5.0-rc.1eb9de5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "8.4.0",
+  "version": "8.5.0-rc.1eb9de5",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "engines": {
@@ -46,7 +46,7 @@
     "@github/markdownlint-github": "^0.6.3",
     "@github/prettier-config": "0.0.6",
     "@types/jest": "^30.0.0",
-    "@typescript-eslint/rule-tester": "8.44.1",
+    "@typescript-eslint/rule-tester": "8.46.2",
     "eslint": "^9.0.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-filenames": "^1.3.2",

package/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: {

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

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

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