Tooltip trigger
+ Header
+
+const App = () => (
+ Content
+Content
+Content
+ +// sx props are allowed +{value}
+}
+```
+
+```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
+}
+```
+
+```js
+import {useResponsiveValue} from 'other-library'
+
+function Component() {
+ // Using useResponsiveValue from a different library is allowed
+ const value = useResponsiveValue(['sm', 'md', 'lg'])
+ return {value}
+}
+```
+
+```js
+import {useCustomHook} from '../hooks/useCustomHook'
+
+function Component() {
+ // Importing other hooks from local paths is allowed
+ const value = useCustomHook(['sm', 'md', 'lg'])
+ return {value}
+}
+```
+
+```js
+function useResponsiveValue() {
+ // Local function definitions are allowed
+ return 'custom implementation'
+}
+
+function Component() {
+ const value = useResponsiveValue()
+ return {value}
+}
+```
+
+## 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.
diff --git a/packages/eslint-plugin-primer-react/docs/rules/no-wildcard-imports.md b/packages/eslint-plugin-primer-react/docs/rules/no-wildcard-imports.md
new file mode 100644
index 00000000000..12779abe485
--- /dev/null
+++ b/packages/eslint-plugin-primer-react/docs/rules/no-wildcard-imports.md
@@ -0,0 +1,25 @@
+# No Wildcard Imports
+
+## Rule Details
+
+This rule enforces that no wildcard imports are used from `@primer/react`.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+import {Dialog} from '@primer/react/lib-esm/Dialog/Dialog'
+
+function ExampleComponent() {
+ return
+}
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {Dialog} from '@primer/react/experimental'
+
+function ExampleComponent() {
+ return
+}
+```
diff --git a/packages/eslint-plugin-primer-react/docs/rules/prefer-action-list-item-onselect.md b/packages/eslint-plugin-primer-react/docs/rules/prefer-action-list-item-onselect.md
new file mode 100644
index 00000000000..a2804751f5d
--- /dev/null
+++ b/packages/eslint-plugin-primer-react/docs/rules/prefer-action-list-item-onselect.md
@@ -0,0 +1,37 @@
+# Prefer using `onSelect` instead of `onClick` for `ActionList.Item` components (`prefer-action-list-item-onselect`)
+
+🔧 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
+
+When using the `onClick` attribute on `ActionList.Item` components, this callback only fires when a user clicks on the element with a mouse. If the user navigates to the element with a keyboard and presses the `Enter` key, the callback will not fire. This produces an inaccessible experience for keyboard users.
+
+Using `onSelect` will lead to a more accessible experience for keyboard users compared to using `onClick`.
+
+This rule is generally auto-fixable, though you may encounter type checking errors that result from not properly handling keyboard events which are not part of the `onSelect` callback signature.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+bla blah Link level 1
; + `, + `import {Link} from '@primer/react'; +bla blahLink level 1
; + `, + `import {Link} from '@primer/react'; + <>somethingLink level 1; + `, + `import {Link} from '@primer/react'; + Link level 1; +`, + `import {Heading, Link} from '@primer/react'; +
+
+`,
+ `import {Link} from '@primer/react';
+ + + Breadcrumb + +
+ Create a thing +
+
+
+`,
+ `import {Link} from '@primer/react';
+
+ by
+
+ Blah blah
+
+
+`,
+ `import {Link} from '@primer/react';
+
+ by
+
+ Blah blah
+
+
+`,
+ `import {Link} from '@primer/react';
+
+ by
+
+ Blah blah
+
+
+ `,
+ `import {Link} from '@primer/react';
+ bla blah + Link text +
+ `, + `import {Link} from '@primer/react'; +bla blah + Link text +
+ `, + ], + invalid: [ + { + code: `import {Link} from '@primer/react'; +bla blahLink level 1
+ `, + errors: [{messageId: 'linkInTextBlock'}], + }, + { + code: `import {Link} from '@primer/react'; +Link level 1 something something
+ `, + errors: [{messageId: 'linkInTextBlock'}], + }, + { + code: `import {Link} from '@primer/react'; +bla blahLink level 1
+ `, + errors: [{messageId: 'linkInTextBlock'}], + }, + { + code: `import {Link} from '@primer/react'; +
+
+ Visible Label
+
+
+
+
`,
+ ],
+ invalid: [
+ {
+ code: `import {FormControl, TextInput} from '@primer/react';
+
+
+ Email
+
+
`,
+ errors: [
+ {
+ messageId: 'duplicateLabel',
+ },
+ ],
+ },
+ ],
+})
diff --git a/packages/eslint-plugin-primer-react/src/rules/__tests__/a11y-no-title-usage.test.js b/packages/eslint-plugin-primer-react/src/rules/__tests__/a11y-no-title-usage.test.js
new file mode 100644
index 00000000000..bd74199e267
--- /dev/null
+++ b/packages/eslint-plugin-primer-react/src/rules/__tests__/a11y-no-title-usage.test.js
@@ -0,0 +1,29 @@
+const rule = require('../a11y-no-title-usage')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+ languageOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ },
+})
+
+ruleTester.run('a11y-no-title-usage', rule, {
+ valid: [
+ `
+
+
+
+
+
+ Save
+
+ Save
++ Save +
+Hello world`)}`,
+ errors: [{messageId}],
+ filename,
+ },
+ {
+ name: `${component} with single-character 'as' prop`,
+ code: `${prcImport}${jsx(`<${component} as="p">Hello world`)}`,
+ output: `${prcImport}${jsx(`Hello world
`)}`, + errors: [{messageId}], + filename, + }, + { + name: `${component} with string element 'as' prop surrounded by unnecessary braces`, + code: `${prcImport}${jsx(`<${component} as={"code"}>Hello world`)}`, + output: `${prcImport}${jsx(`Hello world`)}`,
+ errors: [{messageId}],
+ filename,
+ },
+ {
+ name: `${component} with component reference 'as' prop`,
+ code: `${prcImport}${componentDeclaration}${jsx(`<${component} as={OtherComponent}>Hello world`)}`,
+ output: `${prcImport}${componentDeclaration}${jsx(`Hello world`)}`,
+ errors: [{messageId}],
+ filename,
+ },
+ {
+ name: `${component} from @primer/styled-react with single-character 'as' prop`,
+ code: `${styledReactImport}${jsx(`<${component} as="p">Hello world`)}`,
+ output: `${styledReactImport}${jsx(`Hello world
`)}`, + errors: [{messageId}], + filename, + }, + { + name: `${component} from @primer/styled-react with string element 'as' prop surrounded by unnecessary braces`, + code: `${styledReactImport}${jsx(`<${component} as={"code"}>Hello world`)}`, + output: `${styledReactImport}${jsx(`Hello world`)}`,
+ errors: [{messageId}],
+ filename,
+ },
+ {
+ name: `${component} from @primer/styled-react with component reference 'as' prop`,
+ code: `${styledReactImport}${componentDeclaration}${jsx(`<${component} as={OtherComponent}>Hello world`)}`,
+ output: `${styledReactImport}${componentDeclaration}${jsx(`{value}
+ }`,
+ 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',
+ },
+ ],
+ },
+ ],
+})
diff --git a/packages/eslint-plugin-primer-react/src/rules/__tests__/no-wildcard-imports.test.js b/packages/eslint-plugin-primer-react/src/rules/__tests__/no-wildcard-imports.test.js
new file mode 100644
index 00000000000..cce89227ddd
--- /dev/null
+++ b/packages/eslint-plugin-primer-react/src/rules/__tests__/no-wildcard-imports.test.js
@@ -0,0 +1,384 @@
+'use strict'
+
+const {RuleTester} = require('eslint')
+const rule = require('../no-wildcard-imports')
+
+const ruleTester = new RuleTester({
+ languageOptions: {
+ parser: require(require.resolve('@typescript-eslint/parser', {paths: [require.resolve('eslint-plugin-github')]})),
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ },
+})
+
+ruleTester.run('no-wildcard-imports', rule, {
+ valid: [`import {Button} from '@primer/react'`],
+ invalid: [
+ // Test unknown path from wildcard import
+ {
+ code: `import type {UnknownImport} from '@primer/react/lib-esm/unknown-path'`,
+ errors: [
+ {
+ messageId: 'unknownWildcardImport',
+ },
+ ],
+ },
+
+ // Test type import
+ {
+ code: `import type {SxProp} from '@primer/react/lib-esm/sx'`,
+ output: `import {type SxProp} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/sx',
+ },
+ },
+ ],
+ },
+
+ // Test multiple type imports
+ {
+ code: `import type {BetterSystemStyleObject, SxProp, BetterCssProperties} from '@primer/react/lib-esm/sx'`,
+ output: `import {type BetterSystemStyleObject, type SxProp, type BetterCssProperties} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/sx',
+ },
+ },
+ ],
+ },
+
+ // Test import alias
+ {
+ code: `import type {SxProp as RenamedSxProp} from '@primer/react/lib-esm/sx'`,
+ output: `import {type SxProp as RenamedSxProp} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/sx',
+ },
+ },
+ ],
+ },
+
+ // Test multiple wildcard imports into single entrypoint
+ {
+ code: `import {useResizeObserver} from '@primer/react/lib-esm/hooks/useResizeObserver'
+ import useIsomorphicLayoutEffect from '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect'`,
+ output: `import {useResizeObserver} from '@primer/react'
+ import {useIsomorphicLayoutEffect} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/hooks/useResizeObserver',
+ },
+ },
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect',
+ },
+ },
+ ],
+ },
+
+ // Test renamed wildcard imports
+ {
+ code: `import type {ItemProps} from '@primer/react/lib-esm/deprecated/ActionList/Item'`,
+ output: `import {type ActionListItemProps as ItemProps} from '@primer/react/deprecated'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/deprecated/ActionList/Item',
+ },
+ },
+ ],
+ },
+
+ // Test mixed imports
+ {
+ code: `import {Dialog, type DialogProps} from '@primer/react/lib-esm/Dialog/Dialog'`,
+ output: `import {Dialog, type DialogProps} from '@primer/react/experimental'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/Dialog/Dialog',
+ },
+ },
+ ],
+ },
+
+ // Use existing imports
+ {
+ code: `import {Box, type BoxProps} from '@primer/react'
+import type {BetterSystemStyleObject} from '@primer/react/lib-esm/sx'`,
+ output: `import {Box, type BoxProps, type BetterSystemStyleObject} from '@primer/react'
+`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/sx',
+ },
+ },
+ ],
+ },
+
+ // Test migrations
+
+ // Test helpers ------------------------------------------------------------
+ {
+ code: `import '@primer/react/lib-esm/utils/test-helpers'`,
+ output: `import '@primer/react/test-helpers'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/utils/test-helpers',
+ },
+ },
+ ],
+ },
+
+ // Components --------------------------------------------------------------
+ {
+ code: `import {ButtonBase} from '@primer/react/lib-esm/Button/ButtonBase';
+import type {ButtonBaseProps} from '@primer/react/lib-esm/Button/ButtonBase'`,
+ output: `import {ButtonBase} from '@primer/react/experimental'
+import {type ButtonBaseProps} from '@primer/react/experimental'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/Button/ButtonBase',
+ },
+ },
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/Button/ButtonBase',
+ },
+ },
+ ],
+ },
+ {
+ code: `import type {ButtonBaseProps} from '@primer/react/lib-esm/Button/types'`,
+ output: `import {type ButtonBaseProps} from '@primer/react/experimental'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/Button/types',
+ },
+ },
+ ],
+ },
+ {
+ code: `import {Dialog} from '@primer/react/lib-esm/Dialog/Dialog'`,
+ output: `import {Dialog} from '@primer/react/experimental'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/Dialog/Dialog',
+ },
+ },
+ ],
+ },
+ {
+ code: `import {SelectPanel} from '@primer/react/lib-esm/SelectPanel/SelectPanel'`,
+ output: `import {SelectPanel} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/SelectPanel/SelectPanel',
+ },
+ },
+ ],
+ },
+ {
+ code: `import type {SelectPanelProps} from '@primer/react/lib-esm/SelectPanel/SelectPanel'`,
+ output: `import {type SelectPanelProps} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/SelectPanel/SelectPanel',
+ },
+ },
+ ],
+ },
+ {
+ code: `import type {LabelColorOptions} from '@primer/react/lib-esm/Label/Label'`,
+ output: `import {type LabelColorOptions} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/Label/Label',
+ },
+ },
+ ],
+ },
+ {
+ code: `import VisuallyHidden from '@primer/react/lib-esm/_VisuallyHidden'`,
+ output: `import {VisuallyHidden} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/_VisuallyHidden',
+ },
+ },
+ ],
+ },
+ {
+ code: `import type {IssueLabelTokenProps} from '@primer/react/lib-esm/Token/IssueLabelToken'`,
+ output: `import {type IssueLabelTokenProps} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/Token/IssueLabelToken',
+ },
+ },
+ ],
+ },
+ {
+ code: `import type {ItemProps} from '@primer/react/lib-esm/deprecated/ActionList'`,
+ output: `import {type ActionListItemProps as ItemProps} from '@primer/react/deprecated'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/deprecated/ActionList',
+ },
+ },
+ ],
+ },
+ {
+ code: `import type {GroupedListProps} from '@primer/react/lib-esm/deprecated/ActionList/List'`,
+ output: `import {type ActionListGroupedListProps as GroupedListProps} from '@primer/react/deprecated'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/deprecated/ActionList/List',
+ },
+ },
+ ],
+ },
+ {
+ code: `import {ItemInput} from '@primer/react/lib-esm/deprecated/ActionList/List'`,
+ output: `import {ActionListItemInput as ItemInput} from '@primer/react/deprecated'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/deprecated/ActionList/List',
+ },
+ },
+ ],
+ },
+
+ // Hooks -------------------------------------------------------------------
+
+ // @primer/react/lib-esm/useIsomorphicLayoutEffect
+ {
+ code: `import useIsomorphicLayoutEffect from '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect'`,
+ output: `import {useIsomorphicLayoutEffect} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect',
+ },
+ },
+ ],
+ },
+
+ // @primer/react/lib-esm/hooks/useResizeObserver
+ {
+ code: `import {useResizeObserver} from '@primer/react/lib-esm/hooks/useResizeObserver'`,
+ output: `import {useResizeObserver} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/hooks/useResizeObserver',
+ },
+ },
+ ],
+ },
+
+ // @primer/react/lib-esm/hooks/useProvidedRefOrCreate
+ {
+ code: `import {useProvidedRefOrCreate} from '@primer/react/lib-esm/hooks/useProvidedRefOrCreate'`,
+ output: `import {useProvidedRefOrCreate} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/hooks/useProvidedRefOrCreate',
+ },
+ },
+ ],
+ },
+
+ // @primer/react/lib-esm/hooks/useResponsiveValue
+ {
+ code: `import {useResponsiveValue} from '@primer/react/lib-esm/hooks/useResponsiveValue'`,
+ output: `import {useResponsiveValue} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/hooks/useResponsiveValue',
+ },
+ },
+ ],
+ },
+ {
+ code: `import type {ResponsiveValue} from '@primer/react/lib-esm/hooks/useResponsiveValue'`,
+ output: `import {type ResponsiveValue} from '@primer/react'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/hooks/useResponsiveValue',
+ },
+ },
+ ],
+ },
+
+ // Utilities ---------------------------------------------------------------
+
+ // @primer/react/lib-esm/FeatureFlags/DefaultFeatureFlags
+ {
+ code: `import {DefaultFeatureFlags} from '@primer/react/lib-esm/FeatureFlags/DefaultFeatureFlags'`,
+ output: `import {DefaultFeatureFlags} from '@primer/react/experimental'`,
+ errors: [
+ {
+ messageId: 'wildcardMigration',
+ data: {
+ wildcardEntrypoint: '@primer/react/lib-esm/FeatureFlags/DefaultFeatureFlags',
+ },
+ },
+ ],
+ },
+ ],
+})
diff --git a/packages/eslint-plugin-primer-react/src/rules/__tests__/prefer-action-list-item-onselect.test.js b/packages/eslint-plugin-primer-react/src/rules/__tests__/prefer-action-list-item-onselect.test.js
new file mode 100644
index 00000000000..233221cd174
--- /dev/null
+++ b/packages/eslint-plugin-primer-react/src/rules/__tests__/prefer-action-list-item-onselect.test.js
@@ -0,0 +1,69 @@
+const {RuleTester} = require('@typescript-eslint/rule-tester')
+const rule = require('../prefer-action-list-item-onselect')
+
+const ruleTester = new RuleTester({
+ languageOptions: {
+ parser: require(require.resolve('@typescript-eslint/parser', {paths: [require.resolve('eslint-plugin-github')]})),
+ ecmaVersion: 2018,
+ sourceType: 'module',
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ },
+})
+
+ruleTester.run('prefer-action-list-item-onselect', rule, {
+ valid: [
+ {code: `
+
+ Label
+
+
+ )`,
+ output: `import { FormControl } from '@primer/styled-react'
+ const Component = () => (
+
+
+ Label
+
+
+ )`,
+ errors: [
+ {
+ messageId: 'useStyledReactImport',
+ data: {componentName: 'FormControl'},
+ },
+ ],
+ },
+
+ // Invalid: Button with sx prop imported from @primer/react
+ {
+ code: `import { Button } from '@primer/react'
+ const Component = () => `,
+ output: `import { Button } from '@primer/styled-react'
+ const Component = () => `,
+ errors: [
+ {
+ messageId: 'useStyledReactImport',
+ data: {componentName: 'Button'},
+ },
+ ],
+ },
+
+ // Invalid: ActionList used without sx, ActionList.Item used with sx - should move ActionList to styled-react
+ {
+ code: `import { ActionList, ActionMenu } from '@primer/react'
+ const Component = () => (
+
+
+ Styled box
+
+ )`,
+ output: `import { Button, Avatar } from '@primer/react'
+import { Box } from '@primer/styled-react'
+ const Component = () => (
+
+
+ Styled box
+
+ )`,
+ errors: [
+ {
+ messageId: 'useStyledReactImport',
+ data: {componentName: 'Box'},
+ },
+ ],
+ },
+
+ // Invalid: Utility import from @primer/react that should be from styled-react
+ {
+ code: `import { sx } from '@primer/react'`,
+ output: `import { sx } from '@primer/styled-react'`,
+ errors: [
+ {
+ messageId: 'moveToStyledReact',
+ data: {importName: 'sx'},
+ },
+ ],
+ },
+ {
+ code: `import { useTheme } from '@primer/react'`,
+ output: `import { useTheme } from '@primer/styled-react'`,
+ errors: [
+ {
+ messageId: 'moveToStyledReact',
+ data: {importName: 'useTheme'},
+ },
+ ],
+ },
+ {
+ code: `import { sx, useTheme } from '@primer/react'`,
+ output: `import { sx, useTheme } from '@primer/styled-react'`,
+ errors: [
+ {
+ messageId: 'moveToStyledReact',
+ data: {importName: 'sx'},
+ },
+ {
+ messageId: 'moveToStyledReact',
+ data: {importName: 'useTheme'},
+ },
+ ],
+ },
+
+ // Invalid: Utility import from @primer/react that should be from styled-react, mixed with other imports
+ {
+ code: `import { sx, useAnchoredPosition } from '@primer/react'`,
+ output: `import { useAnchoredPosition } from '@primer/react'
+import { sx } from '@primer/styled-react'`,
+ errors: [
+ {
+ messageId: 'moveToStyledReact',
+ data: {importName: 'sx'},
+ },
+ ],
+ },
+
+ // Invalid: Button and Link, only Button uses sx
+ {
+ code: `import { Button, Link } from '@primer/react'
+ const Component = () => `,
+ output: `import { Link } from '@primer/react'
+import { Button } from '@primer/styled-react'
+ const Component = () => `,
+ errors: [
+ {
+ messageId: 'useStyledReactImport',
+ data: {componentName: 'Button'},
+ },
+ ],
+ },
+
+ // Invalid: Button imported from styled-react but used without sx prop
+ {
+ code: `import { Button } from '@primer/styled-react'
+ const Component = () => `,
+ output: `import { Button } from '@primer/react'
+ const Component = () => `,
+ errors: [
+ {
+ messageId: 'usePrimerReactImport',
+ data: {componentName: 'Button'},
+ },
+ ],
+ },
+
+ // Invalid: and imported from styled-react but used without sx prop
+ {
+ code: `import { Button } from '@primer/react'
+import { Button as StyledButton, Link } from '@primer/styled-react'
+ const Component = () => (
+
+
+
+ Styled button
+
+ )`,
+ output: `import { Button, Link } from '@primer/react'
+
+ const Component = () => (
+
+
+
+ Styled button
+
+ )`,
+ errors: [
+ {
+ messageId: 'usePrimerReactImport',
+ data: {componentName: 'Button'},
+ },
+ {
+ messageId: 'usePrimerReactImport',
+ data: {componentName: 'Link'},
+ },
+ ],
+ },
+
+ // Invalid: Box imported from styled-react but used without sx prop
+ {
+ code: `import { Box } from '@primer/styled-react'
+ const Component = () =>
+
+ Styled box
+
+ )`,
+ output: `import { Box } from '@primer/styled-react'
+import { Button } from '@primer/react'
+ const Component = () => (
+
+
+ Styled box
+
+ )`,
+ errors: [
+ {
+ messageId: 'usePrimerReactImport',
+ data: {componentName: 'Button'},
+ },
+ ],
+ },
+
+ // Invalid: Button and Link used with sx prop - should move both to styled-react
+ {
+ code: `import { Button, Link } from '@primer/react'
+ const Component = () => (
+
+
+
+
+
+ )`,
+ output: `import { Link, Button } from '@primer/styled-react'
+ const Component = () => (
+
+
+
+
+
+ )`,
+ errors: [
+ {
+ messageId: 'useStyledReactImport',
+ data: {componentName: 'Button'},
+ },
+ {
+ messageId: 'useStyledReactImport',
+ data: {componentName: 'Link'},
+ },
+ ],
+ },
+
+ // Invalid: ThemeProvider and BaseStyles - should move to styled-react
+ {
+ code: `
+ import { ThemeProvider, BaseStyles } from '@primer/react'
+ `,
+ output: `
+ import { ThemeProvider, BaseStyles } from '@primer/styled-react'
+ `,
+ errors: [
+ {
+ messageId: 'moveToStyledReact',
+ data: {importName: 'ThemeProvider'},
+ },
+ {
+ messageId: 'moveToStyledReact',
+ data: {importName: 'BaseStyles'},
+ },
+ ],
+ },
+
+ // Invalid: ThemeProvider, Button without sx prop - only ThemeProvider should be from styled-react
+ {
+ code: `
+ import { ThemeProvider, Button } from '@primer/react'
+ const Component = () =>