Convert @primer/react to ESM, don't generate CommonJS bundle.

.changeset/nervous-keys-draw.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+---
+
+Convert @primer/react to ESM and no longer generate CommonJS bundle.
+
+<!-- Changed components: _none_ -->

babel.config.js → babel.config.cjs

@@ -1,4 +1,4 @@
-const defines = require('./babel-defines')
+const defines = require('./babel-defines.cjs')
 
 function replacementPlugin(env) {
   return ['babel-plugin-transform-replace-expressions', {replace: defines[env]}]

docs/gatsby-node.js

@@ -1,4 +1,4 @@
-const defines = require('../babel-defines')
+const defines = require('../babel-defines.cjs')
 const docgen = require('react-docgen-typescript')
 const globby = require('globby')
 

docs/package.json

@@ -23,6 +23,7 @@
     "gatsby-plugin-alias-imports": "^1.0.5",
     "gatsby-plugin-typescript": "2.10.0",
     "graphql": "^15.8.0",
+    "path": "^0.12.7",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-docgen-typescript": "^2.0.0",

docs/src/@primer/gatsby-theme-doctocat/mdx-components.js

@@ -1,8 +1,6 @@
 import {Box, Link} from '@primer/react'
 import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
 import {ComponentChecklist} from '../../component-checklist'
-// eslint-disable-next-line import/no-deprecated
-import {Props} from '../../props'
 import {PropsTable} from '../../props-table'
 import {ComponentProps} from '../../component-props'
 
@@ -11,8 +9,6 @@ export default {
   Link,
   InlineCode,
   ComponentChecklist,
-  // eslint-disable-next-line import/no-deprecated
-  Props,
   PropsTable,
   ComponentProps,
   // HACK: MDX doesn't support rendering subcomponents with dot notation

e2e/components/ActionList.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('ActionList', () => {
   test.describe('Default', () => {

e2e/components/ActionMenu.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('ActionMenu', () => {
   test.describe('Default', () => {

e2e/components/Avatar.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Avatar', () => {
   test.describe('Default', () => {

e2e/components/AvatarPair.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('AvatarPair', () => {
   test.describe('Default', () => {

e2e/components/AvatarStack.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('AvatarStack', () => {
   test.describe('Default', () => {

e2e/components/BranchName.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('BranchName', () => {
   test.describe('Default', () => {

e2e/components/Breadcrumbs.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Breadcrumbs', () => {
   test.describe('Default', () => {

e2e/components/Button.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Button', () => {
   test.describe('Playground', () => {

e2e/components/ButtonGroup.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('ButtonGroup', () => {
   test.describe('Default', () => {

e2e/components/Checkbox.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Checkbox', () => {
   test.describe('Default', () => {

e2e/components/CheckboxGroup.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('CheckboxGroup', () => {
   test.describe('Default', () => {

e2e/components/CircleBadge.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('CircleBadge', () => {
   test.describe('Default', () => {

e2e/components/CircleOcticon.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('CircleOcticon', () => {
   test.describe('Default', () => {

e2e/components/CounterLabel.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('CounterLabel', () => {
   test.describe('Default', () => {

e2e/components/DataTable.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('DataTable', () => {
   test.describe('Default', () => {

e2e/components/Details.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Details', () => {
   test.describe('Default', () => {

e2e/components/FilterList.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('FilterList', () => {
   test.describe('Default', () => {

e2e/components/FilteredSearch.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('FilteredSearch', () => {
   test.describe('Default', () => {

e2e/components/Flash.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Flash', () => {
   test.describe('Default', () => {

e2e/components/Header.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Header', () => {
   test.describe('Default', () => {

e2e/components/Heading.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Heading', () => {
   test.describe('Default', () => {

e2e/components/Hidden.test.ts

@@ -1,7 +1,7 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
-import {viewports} from '../test-helpers/viewports'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
+import {viewports} from '../test-helpers/viewports.js'
 
 test.describe('Hidden', () => {
   test.describe('Default', () => {

e2e/components/IconButton.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('IconButton', () => {
   test.describe('Playground', () => {

e2e/components/InlineAutocomplete.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('InlineAutocomplete', () => {
   test.describe('Default', () => {

e2e/components/Label.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Label', () => {
   test.describe('Default', () => {

e2e/components/LabelGroup.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('LabelGroup', () => {
   test.describe('Default', () => {

e2e/components/Link.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Link', () => {
   test.describe('Default', () => {

e2e/components/LinkButton.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('LinkButton', () => {
   test.describe('Playground', () => {

e2e/components/PageHeader.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 // TODO: remove the color contrast rule once the constract issue is fixed
 test.describe('PageHeader', () => {

e2e/components/PageLayout.test.ts

@@ -1,7 +1,7 @@
 import {test, expect} from '@playwright/test'
 import type {Page} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 const isInViewPort = (page: Page, boundingBox: {x: number; y: number; width: number; height: number}) => {
   let width

e2e/components/Pagehead.test.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
 
 test.describe('Pagehead', () => {
   test.describe('Default', () => {