eslint-plugin-primer-react 5.4.0-rc.61b506f → 5.5.0-rc.40574df

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-primer-react
 
+## 5.5.0
+
+### Minor Changes
+
+- [#204](https://github.com/primer/eslint-plugin-primer-react/pull/204) [`e2cab87`](https://github.com/primer/eslint-plugin-primer-react/commit/e2cab872c265f4211750436fad32fe5fd8927c5c) Thanks [@joshblack](https://github.com/joshblack)! - Add use-deprecated-from-deprecated rule
+
 ## 5.4.0
 
 ### Minor Changes

package/docs/rules/use-deprecated-from-deprecated.md

@@ -0,0 +1,25 @@
+# Use Deprecated from Deprecated
+
+## Rule Details
+
+This rule enforces the usage of deprecated imports from `@primer/react/deprecated`.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+import {Dialog} from '@primer/react'
+
+function ExampleComponent() {
+  return <Dialog>{/* ... */}</Dialog>
+}
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {Dialog} from '@primer/react/deprecated'
+
+function ExampleComponent() {
+  return <Dialog>{/* ... */}</Dialog>
+}
+```

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "eslint-plugin-primer-react",
-      "version": "5.3.0",
+      "version": "5.4.0",
       "license": "MIT",
       "dependencies": {
         "@styled-system/props": "^5.1.5",
@@ -1890,9 +1890,9 @@
       }
     },
     "node_modules/@pkgr/core": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.0.tgz",
-      "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
       "engines": {
         "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
       },
@@ -3862,12 +3862,12 @@
       }
     },
     "node_modules/eslint-plugin-prettier": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
-      "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
+      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
       "dependencies": {
         "prettier-linter-helpers": "^1.0.0",
-        "synckit": "^0.8.6"
+        "synckit": "^0.9.1"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -7631,9 +7631,9 @@
       }
     },
     "node_modules/synckit": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
-      "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",
+      "integrity": "sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==",
       "dependencies": {
         "@pkgr/core": "^0.1.0",
         "tslib": "^2.6.2"
@@ -7762,9 +7762,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
     },
     "node_modules/type-detect": {
       "version": "4.0.8",
@@ -9682,9 +9682,9 @@
       }
     },
     "@pkgr/core": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.0.tgz",
-      "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ=="
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA=="
     },
     "@sinclair/typebox": {
       "version": "0.27.8",
@@ -11264,12 +11264,12 @@
       "integrity": "sha512-Lf4YW/bL6Un1R6A76pRZyE1dl1vr31G/ev8UzIc/geCgFWyrKil8hVjYqWVKGB/UIGmb6Slzs9T0wNezdSVegw=="
     },
     "eslint-plugin-prettier": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
-      "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
+      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
       "requires": {
         "prettier-linter-helpers": "^1.0.0",
-        "synckit": "^0.8.6"
+        "synckit": "^0.9.1"
       }
     },
     "eslint-rule-documentation": {
@@ -13821,9 +13821,9 @@
       "integrity": "sha512-Bh05dSOnJBf3miNMqpsormfNtfidA/GxQVakhtn0T4DECWKeXQRQUceYjJ+OxYiiLdGe4Jo9iFV8wICFapFeIA=="
     },
     "synckit": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
-      "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",
+      "integrity": "sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==",
       "requires": {
         "@pkgr/core": "^0.1.0",
         "tslib": "^2.6.2"
@@ -13919,9 +13919,9 @@
       }
     },
     "tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
     },
     "type-detect": {
       "version": "4.0.8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "5.4.0-rc.61b506f",
+  "version": "5.5.0-rc.40574df",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -10,6 +10,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-next-tooltip': require('./rules/a11y-use-next-tooltip'),
+    'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
   },
   configs: {
     recommended: require('./configs/recommended'),

package/src/rules/__tests__/use-deprecated-from-deprecated.test.js

@@ -0,0 +1,66 @@
+'use strict'
+
+const {RuleTester} = require('eslint')
+const rule = require('../use-deprecated-from-deprecated')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('use-deprecated-from-deprecated', rule, {
+  valid: [],
+  invalid: [
+    // Single deprecated import
+    {
+      code: `import {Tooltip} from '@primer/react'`,
+      output: `import {Tooltip} from '@primer/react/deprecated'`,
+      errors: ['Import deprecated components from @primer/react/deprecated'],
+    },
+
+    // Single deprecated import with existing deprecated entrypoint
+    {
+      code: `import {Tooltip} from '@primer/react'
+import {Dialog} from '@primer/react/deprecated'`,
+      output: `\nimport {Dialog, Tooltip} from '@primer/react/deprecated'`,
+      errors: ['Import deprecated components from @primer/react/deprecated'],
+    },
+
+    // Multiple deprecated imports
+    {
+      code: `import {Dialog, Tooltip} from '@primer/react'`,
+      output: `import {Dialog, Tooltip} from '@primer/react/deprecated'`,
+      errors: ['Import deprecated components from @primer/react/deprecated'],
+    },
+
+    // Mixed deprecated and non-deprecated imports
+    {
+      code: `import {Button, Tooltip} from '@primer/react'`,
+      output: `import {Button, } from '@primer/react'
+import {Tooltip} from '@primer/react/deprecated'`,
+      errors: ['Import deprecated components from @primer/react/deprecated'],
+    },
+
+    // Mixed deprecated and non-deprecated imports with existing deprecated
+    {
+      code: `import {Button, Tooltip} from '@primer/react'
+import {Dialog} from '@primer/react/deprecated'`,
+      output: `import {Button, } from '@primer/react'
+import {Dialog, Tooltip} from '@primer/react/deprecated'`,
+      errors: ['Import deprecated components from @primer/react/deprecated'],
+    },
+
+    // Multiple mixed deprecated and non-deprecated imports
+    {
+      code: `import {Button, Dialog, Tooltip} from '@primer/react'`,
+      output: `import {Button,  } from '@primer/react'
+import {Dialog, Tooltip} from '@primer/react/deprecated'`,
+      errors: ['Import deprecated components from @primer/react/deprecated'],
+    },
+  ],
+})

package/src/rules/use-deprecated-from-deprecated.js

@@ -0,0 +1,130 @@
+'use strict'
+
+const url = require('../url')
+
+const components = [
+  {
+    identifier: 'Dialog',
+    entrypoint: '@primer/react',
+  },
+  {
+    identifier: 'Octicon',
+    entrypoint: '@primer/react',
+  },
+  {
+    identifier: 'Pagehead',
+    entrypoint: '@primer/react',
+  },
+  {
+    identifier: 'TabNav',
+    entrypoint: '@primer/react',
+  },
+  {
+    identifier: 'Tooltip',
+    entrypoint: '@primer/react',
+  },
+]
+
+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 deprecated components from the `@primer/react/deprecated` entrypoint',
+      recommended: true,
+      url: url(module),
+    },
+    fixable: true,
+    schema: [],
+  },
+  create(context) {
+    const sourceCode = context.getSourceCode()
+
+    return {
+      ImportDeclaration(node) {
+        if (!entrypoints.has(node.source.value)) {
+          return
+        }
+
+        const entrypoint = entrypoints.get(node.source.value)
+        const deprecated = node.specifiers.filter(specifier => {
+          return entrypoint.has(specifier.imported.name)
+        })
+
+        if (deprecated.length === 0) {
+          return
+        }
+
+        const deprecatedEntrypoint = node.parent.body.find(node => {
+          if (node.type !== 'ImportDeclaration') {
+            return false
+          }
+
+          return node.source.value === '@primer/react/deprecated'
+        })
+
+        // All imports are deprecated
+        if (deprecated.length === node.specifiers.length) {
+          context.report({
+            node,
+            message: 'Import deprecated components from @primer/react/deprecated',
+            *fix(fixer) {
+              if (deprecatedEntrypoint) {
+                const lastSpecifier = deprecatedEntrypoint.specifiers[deprecatedEntrypoint.specifiers.length - 1]
+
+                yield fixer.remove(node)
+                yield fixer.insertTextAfter(
+                  lastSpecifier,
+                  `, ${node.specifiers.map(specifier => specifier.imported.name).join(', ')}`,
+                )
+              } else {
+                yield fixer.replaceText(node.source, `'@primer/react/deprecated'`)
+              }
+            },
+          })
+        } else {
+          // There is a mix of deprecated and non-deprecated imports
+          context.report({
+            node,
+            message: 'Import deprecated components from @primer/react/deprecated',
+            *fix(fixer) {
+              for (const specifier of deprecated) {
+                yield fixer.remove(specifier)
+                const comma = sourceCode.getTokenAfter(specifier)
+                if (comma.value === ',') {
+                  yield fixer.remove(comma)
+                }
+              }
+
+              if (deprecatedEntrypoint) {
+                const lastSpecifier = deprecatedEntrypoint.specifiers[deprecatedEntrypoint.specifiers.length - 1]
+                yield fixer.insertTextAfter(
+                  lastSpecifier,
+                  `, ${deprecated.map(specifier => specifier.imported.name).join(', ')}`,
+                )
+              } else {
+                yield fixer.insertTextAfter(
+                  node,
+                  `\nimport {${deprecated
+                    .map(specifier => specifier.imported.name)
+                    .join(', ')}} from '@primer/react/deprecated'`,
+                )
+              }
+            },
+          })
+        }
+      },
+    }
+  },
+}