CI upgrades (#856)

.github/workflows/check_for_changeset.yml

@@ -18,7 +18,7 @@ jobs:
     name: Check for changeset
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: 'Check for changeset'
         uses: brettcannon/check-for-changed-files@v1
         with:

.github/workflows/ci.yml

@@ -14,12 +14,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Cache dependencies
         uses: actions/cache@v4

.github/workflows/figma_connect_publish.yml

@@ -14,7 +14,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 

.github/workflows/integration_test_astro.yml

@@ -22,9 +22,9 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Caching dependencies
         uses: actions/cache@v4

.github/workflows/integration_test_cra.yml

@@ -22,9 +22,9 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Caching dependencies
         uses: actions/cache@v4
@@ -71,7 +71,11 @@ jobs:
         run: cd ./packages/react && npm pack
 
       - name: Configuring Create React App
-        run: npx create-react-app ${{env.CRA_FOLDER}} --template typescript
+        # Lack of React 19 support broke CRA. See https://github.com/facebook/create-react-app/issues/13717. 
+        # Remove yarn when create-react-app supports React 19
+        run: |
+        npm install --global yarn 
+        yarn create-react-app ${{env.CRA_FOLDER}} --template typescript
 
       - name: Retrieving package version
         id: package-version

.github/workflows/integration_test_nextjs.yml

@@ -22,9 +22,9 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Caching dependencies
         uses: actions/cache@v4
@@ -83,30 +83,26 @@ jobs:
         run: |
           cd ${{env.NEXTJS_FOLDER}}
           cp ../packages/react/primer-react-brand-${{ steps.package-version.outputs.current-version}}.tgz ./
-          npm install primer-react-brand-${{ steps.package-version.outputs.current-version}}.tgz --legacy-peer-deps
+          npm install primer-react-brand-${{ steps.package-version.outputs.current-version}}.tgz
 
       - name: Prefer ESM imports
         run: |
           mv ./packages/e2e/integration-tests/fixtures/index.esm.ts ./packages/e2e/integration-tests/fixtures/index.ts
           rm ./packages/e2e/integration-tests/fixtures/index.cjs.ts
 
+      - name: Copying required files
+        run: |
+          rm ./${{env.NEXTJS_FOLDER}}/app/page.tsx
+          cp ./packages/e2e/integration-tests/nextjs/page.tsx ./${{env.NEXTJS_FOLDER}}/app
+
       - name: Copying required files
         run: |
           cp ./packages/e2e/integration-tests/nextjs/page.tsx ./${{env.NEXTJS_FOLDER}}/app
-          cp ./packages/e2e/integration-tests/nextjs/.eslintrc ./${{env.NEXTJS_FOLDER}}
           cp ./packages/e2e/cypress.config.js ./${{env.NEXTJS_FOLDER}}
           mkdir ${{env.NEXTJS_FOLDER}}/integration-tests
           cp -r ./packages/e2e/integration-tests/fixtures ./${{env.NEXTJS_FOLDER}}/integration-tests
           cp -r ./packages/e2e/integration-tests/tests ./${{env.NEXTJS_FOLDER}}/integration-tests
 
-      # - name: Patching postcss bug in v12 of Next.js
-      #   uses: DamianReeves/write-file-action@master
-      #   with:
-      #     path: ${{env.NEXTJS_FOLDER}}/postcss.config.json
-      #     contents: |
-      #       {"plugins": []}
-      #     write-mode: overwrite
-
       - name: Excluded cypress tests in-place
         # includes temp workaround for cypress bug. remove when fixed
         # https://github.com/cypress-io/cypress/issues/27448
@@ -116,6 +112,12 @@ jobs:
         run: |
           npm run lint -- --fix
 
+      # Needed to fix compilation errors and conflicts between TS and React type defs.
+      # All subsequent steps should not be dependent on the primer/brand repo contents.
+      - name: Clean workspace before testing
+        run: |
+          find . -maxdepth 1 -mindepth 1 -not -name ${{env.NEXTJS_FOLDER}} -exec rm -rf {} +
+
       - name: Testing compile-time build
         run: cd ${{env.NEXTJS_FOLDER}} && npm run build
 

.github/workflows/integration_test_remix.yml

@@ -22,7 +22,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: '20'
 

.github/workflows/release_canary.yml

@@ -14,15 +14,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         run: npm ci

.github/workflows/release_candidate.yml

@@ -13,13 +13,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 
@@ -67,15 +67,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         run: npm ci

.github/workflows/ui_test_accessibility.yml

@@ -14,12 +14,12 @@ jobs:
       labels: ubuntu-latest-16-cores
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Cache dependencies
         uses: actions/cache@v4

.github/workflows/ui_test_primitives_diff.yml

@@ -10,18 +10,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Checkout reference branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.base_ref }}
           path: temp-main
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Cache dependencies
         uses: actions/cache@v4

.github/workflows/update_visual_snapshots.yml

@@ -25,9 +25,9 @@ jobs:
           ref: ${{ github.head_ref }}
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Cache dependencies
         uses: actions/cache@v4

.github/workflows/visual_test_storybook.yml

@@ -12,10 +12,10 @@ jobs:
       NODE_ENV: test
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 
@@ -43,12 +43,19 @@ jobs:
         run: NODE_ENV=test npx start-server-and-test 'npx http-server ./apps/storybook/storybook-static -p 6006' 6006 'cd packages/e2e && npx playwright test'
         continue-on-error: true
 
+      - name: Upload error screenshots
+        uses: actions/upload-artifact@v4
+        if: steps.playwright-step.outcome != 'success'
+        with:
+          name: playwright-test-results
+          path: packages/e2e/playwright-test-results
+
       - name: Upload test results
         uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: playwright-report
-          path: playwright-report/
+          path: packages/e2e/playwright-report/
           retention-days: 30
 
       - name: Comment on the PR about no visual differences

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

packages/e2e/integration-tests/fixtures/KitchenSink.tsx

@@ -22,7 +22,7 @@ import {
 import '@primer/react-brand/lib/css/main.css'
 
 export default function KitchenSink() {
-  const inputRef = useRef()
+  const inputRef = useRef(null)
 
   const mockHandler = () => {}
 

packages/e2e/scripts/playwright/playwright.generate-tests.ts

@@ -21,6 +21,7 @@
    * Manual lookup for tests that need animation or side-effects to complete before tests start
    */
   const waitForTimeoutLookup = {
+    'components-faq-features--with-prose': 2000, // for the animation
     'components-faq-features--all-open': 1000, // for the animation
     'components-subdomainnavbar--search-open': 5500, // for the animation
     'components-subdomainnavbar--search-results-visible': 5500, // for the animation
@@ -35,15 +36,15 @@
     'components-button-features--with-hover-interaction': 2000, // for the interaction test
     'components-button-features--secondary-with-hover-interaction': 2000, // for the interaction test
     'components-button-features--subtle-with-hover-interaction': 2000, // for the interaction test
-    'components-anchornav--playground': 1000, // for the animation
-    'components-anchornav-features--fewer-anchor-links': 1000, // for the animation
-    'components-anchornav-features--custom-background': 1000, // for the animation
-    'components-anchornav-features--shorter-labels': 1000, // for the animation
-    'components-anchornav-features--narrow-view': 1000, // for the interaction test
-    'components-anchornav-features--narrow-view-menu-open': 1000, // for the interaction test
-    'components-anchornav-features--regular-view': 1000, // for the interaction test
-    'components-anchornav-features--regular-view-menu-open': 1000, // for the interaction test
-    'components-anchornav-features--longer-labels': 1000, // for the animation
+    'components-anchornav--playground': 2000, // for the animation
+    'components-anchornav-features--fewer-anchor-links': 2000, // for the animation
+    'components-anchornav-features--custom-background': 2000, // for the animation
+    'components-anchornav-features--shorter-labels': 2000, // for the animation
+    'components-anchornav-features--narrow-view': 2000, // for the interaction test
+    'components-anchornav-features--narrow-view-menu-open': 2000, // for the interaction test
+    'components-anchornav-features--regular-view': 2000, // for the interaction test
+    'components-anchornav-features--regular-view-menu-open': 2000, // for the interaction test
+    'components-anchornav-features--longer-labels': 2000, // for the animation
     'components-minimalfooter--default': 5000, // for external social imagery to load
     'components-minimalfooter--playground': 5000, // for external social imagery to load
     'components-minimalfooter-features--dark-theme': 5000, // for external social imagery to load
@@ -92,6 +93,7 @@
     'components-textrevealanimation-examples--with-large-testimonial': 3000, // for the animation
     'components-textrevealanimation-examples--with-hero': 3000, // for the animation
     'components-textrevealanimation-features--animation-on-scroll': 3000, // for the animation
+    'components-footnotes-examples--rivers-with-citations': 3000, // for the images
   }
 
   /**