Merge 4026a6d into b08f770

.github/workflows/consumer_test.yml

@@ -0,0 +1,45 @@
+name: Consumer test
+on:
+  push: {branches: main}
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  consumer-test:
+    name: Consumer test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm i -g npm@^10.5.1
+      - name: Remove "prepare" script
+        run: npm pkg delete scripts.prepare
+      - name: Install dependencies
+        run: npm ci
+      - name: Build @primer/react
+        run: npm run build -w rollup-plugin-import-css -w @primer/react
+      # Output the artifact as a tarball in `consumer-test`. Write the
+      # information for this package in `consumer-test/pack.json` so we can read
+      # from it later to install the package
+      - name: Create a tarball for the package
+        run: npm pack --pack-destination ../../examples/consumer-test --json > ../../examples/consumer-test/pack.json
+        working-directory: packages/react
+      - name: Clean package directory
+        run: npm run clean:all
+      - name: Test
+        id: test
+        working-directory: examples/consumer-test
+        run: |
+          # Read the filename for the tarball from `pack.json`
+          npm install $(jq -r '.[0].filename' pack.json)
+          npm install
+          npm run check
+      - name: Add annotation
+        if: failure() && steps.test.conclusion == 'failure'
+        run: |
+          echo "::error file=tsconfig.build.json::Test package could not build. See https://github.com/primer/react/blob/main/examples/consumer-test"

e2e/components/ActionList.test.ts

@@ -657,6 +657,34 @@ test.describe('ActionList', () => {
     }
   })
 
+  test.describe('With Trailing Action', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-features--with-trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ActionList.With Trailing Action.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-features--with-trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
   test.describe('Full Variant', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

e2e/components/ButtonGroup.test.ts

@@ -2,57 +2,116 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-const stories = [
-  {
-    title: 'Default',
-    id: 'components-buttongroup--default',
-  },
-  {
-    title: 'Playground',
-    id: 'components-buttongroup--playground',
-  },
-  {
-    title: 'Icon Buttons',
-    id: 'components-buttongroup-features--icon-buttons',
-  },
-  {
-    title: 'As Toolbar',
-    id: 'components-buttongroup-features--as-toolbar',
-  },
-  {
-    title: 'SX Prop',
-    id: 'components-buttongroup-dev--sx-prop',
-  },
-] as const
-
 test.describe('ButtonGroup', () => {
-  for (const story of stories) {
-    test.describe(story.title, () => {
-      for (const theme of themes) {
-        test.describe(theme, () => {
-          test('@vrt', async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                colorScheme: theme,
-              },
-            })
-
-            // Default state
-            expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.${story.title}.${theme}.png`)
-          })
-
-          test('axe @aat', async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                colorScheme: theme,
-              },
-            })
-            await expect(page).toHaveNoViolations()
-          })
-        })
-      }
-    })
-  }
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Icon Buttons', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--icon-buttons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Icon Buttons.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--icon-buttons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('As Toolbar', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--as-toolbar',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.As Toolbar.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--as-toolbar',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

e2e/components/NavList.test.ts

@@ -30,4 +30,34 @@ test.describe('NavList', () => {
       })
     }
   })
+
+  test.describe('With Bad Example of SubNav and TrailingAction', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist-devonly--with-bad-example-of-sub-nav-and-trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(
+            `NavList.With Bad Example of SubNav and TrailingAction.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist-devonly--with-bad-example-of-sub-nav-and-trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

examples/app-router/package.json

@@ -15,7 +15,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "5.x",
-    "typescript": "^5.7.2"
+    "typescript": "^5.6.3"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.1.0",

examples/codesandbox/package.json

@@ -25,7 +25,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",
     "styled-components": "5.x",
-    "typescript": "^5.7.2",
+    "typescript": "^5.6.3",
     "vite": "^5.2.14"
   }
 }

examples/consumer-test/App.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import {Box} from '@primer/react'
+
+export default function App() {
+  return <Box />
+}

examples/consumer-test/README.md

@@ -0,0 +1,25 @@
+# Primer React Consumer Test
+
+This directory is used to run a simple test that asserts that a consumer of
+Primer React can build their own project with strict TypeScript options enabled,
+including `"skipLibCheck": false`.
+
+During Primer React's build process, we run the TypeScript compiler and output
+`.d.ts` declaration files for consumers of Primer React that are using
+TypeScript. If the build script runs with a TypeScript configuration that has
+any files in its `types` or `typeRoots` that import any of our development
+dependencies, it's possible for our build output to be polluted by interface
+augmentations in those dependencies, or in transitive dependencies.
+
+The best way to avoid this is to ensure that any files that import development
+dependencies are excluded in our `tsconfig.build.json` file we use to build
+Primer React.
+
+If a mistake is made and a file is omitted, we will catch those when we attempt
+to build this consumer library, which has `"skipLibCheck": false` in its
+TypeScript configuration.
+
+For historical context, see these issues:
+
+- [v27.0.0 breaks TypeScript typings](https://github.com/primer/react/issues/1163)
+- [Storybook dependency changes types in build output](https://github.com/primer/react/issues/1849)

examples/consumer-test/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example-consumer-test",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.2.19",
+    "@types/styled-components": "^5.1.11",
+    "@primer/react": "37.6.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "styled-components": "^5.3.11",
+    "typescript": "~4.7.2"
+  }
+}

examples/consumer-test/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "skipLibCheck": false, // IMPORTANT: Validates our type outputs
+    "target": "esnext",
+    "module": "commonjs",
+    "allowJs": true,
+    "checkJs": false,
+    "jsx": "preserve",
+    "declaration": true,
+    "noEmit": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["./*.tsx"]
+}