eslint-plugin-primer-react 5.4.0 → 6.0.0-rc.0df8090

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # eslint-plugin-primer-react
 
+## 6.0.0
+
+### Major Changes
+
+- [#207](https://github.com/primer/eslint-plugin-primer-react/pull/207) [`baff792`](https://github.com/primer/eslint-plugin-primer-react/commit/baff792c0aa01a29374e44e8aa770dbe2cb889a1) Thanks [@iansan5653](https://github.com/iansan5653)! - [Breaking] Adds `no-unnecessary-components` lint rule and enables it by default. This may raise new (typically autofixable) lint errors in existing codebases.
+
+### 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/no-unnecessary-components.md

@@ -0,0 +1,69 @@
+# Disallow unnecessary use of `Box` and `Text` components (no-unnecessary-components)
+
+🔧 The `--fix` option on the [ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can
+automatically fix some of the problems reported by this rule.
+
+## Rule details
+
+The [`Box`](https://primer.style/components/box) and [`Text`](https://primer.style/components/text)
+Primer React components are utilities that exist solely to provide access to `sx` or styled-system
+props.
+
+If these props are not being used, plain HTML element provide better performance, simpler code,
+and improved linting support.
+
+This rule is auto-fixable in nearly all cases. Autofixing respects the presence of an `as` prop.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/no-unnecessary-components: "error" */
+import {Box, Text} from '@primer/react'
+
+<Box>Content</Box>
+<Box style={{padding: '16px'}} className="danger-box">Content</Box>
+<Box as="section">Content</Box>
+
+<Text>Content</Text>
+<Text style={{fontSize: '24px'}} className="large-text">Content</Text>
+<Text as="p">Content</Text>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/no-system-props: "error" */
+import {Box, Text} from '@primer/react'
+
+// Prefer plain HTML elements (autofixable)
+<div>Content</div>
+<div style={{padding: '16px'}} className="danger-box">Content</div>
+<section>Content</section>
+
+<span>Content</span>
+<span style={{fontSize: '24px'}} className="large-text">Content</span>
+<p>Content</p>
+
+// sx props are allowed
+<Box sx={{p: 2}}>Content</Box>
+<Text sx={{mt: 2}} as="p">Content</Text>
+
+// styled-system props are allowed
+<Box p={2}>Content</Box>
+<Text mt={2} as="p">Content</Text>
+```
+
+```jsx
+/* eslint primer-react/no-system-props: ["error", {skipImportCheck: false}] */
+import {Box, Text} from '@primer/brand'
+
+// Other components with the same name are allowed
+<Box>Content</Box>
+<Text>Content</Text>
+```
+
+## Options
+
+- `skipImportCheck` (default: `false`)
+
+  By default, the rule will only check for incorrect uses of `Box` and `Text` components that are are imported from `@primer/react`. You can disable this behavior (checking all components with these names regardless of import source) by setting `skipImportCheck` to `true`.

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/jest.config.js

@@ -0,0 +1,7 @@
+// @ts-check
+
+/** @type {import('jest').Config} **/
+module.exports = {
+  testEnvironment: 'node',
+  testMatch: ['**/__tests__/*.test.js'],
+}