Upgrade to React v19 and Storybook v8

[meissadia]

Closes #393

Keep up-to-date with the latest major React release. For compatibility, also requires upgrading to Storybook v8.

Changes

• Upgrade to React v19
  • Run related migration scripts
    • npx react-codemod update-react-imports
    • npx codemod@latest react/19/migration-recipe (no changes)
    • npx types-react-codemod@latest preset-19 ./
      • import type { JSX } from 'react'; does address a TSC error, so those have been kept in place
• Upgrade to Storybook v8 (required for React v19)
  • Migrate deprecated file formats
    • npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
    • npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
  • Upgrade Storybook: npx storybook@latest upgrade
    • [Required] Removed deprecated feature storyStoreV7
    • [Required] Upgrade to Vite v4+
    • Run code migrations
      • github-flavored-markdown-mdx (yes)
      • autodocsTrue (yes)
      • remove-argtypes-regex (yes)
        • Check for implicit spies: npx storybook migrate find-implicit-spies --glob="./src/**/*.stories.*" (None found)
        • Removed deprecated configuration setting: argTypesRegex
      • upgradeStorybookRelatedDependencies (yes)
      • react-docgen (yes)
      • visual-tests-addon (no)
      • autodocs-tags (yes)
  • Remove incompatible add-on: yarn remove display-element-css
  • Replace @storybook/jest with @storybook/test per guidance

How to test this PR

• DSR unit tests all pass (yarn test)
• SBL Frontend: Functional integration is successful (e2e tests all pass), confirming that our (used) components still operate as expected
• SBL Frontend: Run snapshot tests to verify that DSR styles remain unchanged
  • sbl-frontend > yarn && yarn test:e2e:snapshot --headless
  • Snapshot tests look acceptable. No undesired changes found.

TODO

• Best way to verify I haven't broken/disabled/removed any critical DSR functionality?
  • We don't have E2E testing implemented here yet, so I don't think we have an automated option.
  • There seem to be snapshot tests implemented in the Github actions workflows but we have not established the baseline snapshots yet.
  • We can rely on SBL Frontend's snapshot tests to at least verify the components we have integrated there. I'm currently working to identify any differences.

Potential blocker: Github actions failure -- Hanging process during yarn test:ci

Jan 30 - This seems to be an intermittent error because, right now, the tests are passing without the hanging process 🤷🏾‍♂️

Note: this seems to be a pre-existing issue not caused by these upgrades

• git checkout main && git pull && yarn && yarn test:ci shows the same failure

close timed out after 10000ms
Tests closed successfully but something prevents Vite server from exiting
You can try to identify the cause by enabling "hanging-process" reporter. See https://vitest.dev/config/#reporters

Attempted workarounds:

• yarn run vitest --reporter=hanging-process shows lots of the following, enough to overrun my terminal buffer, so I'm working to capture the full output for further evaluation

  # FILEHANDLE
  node:internal/async_hooks:202
  

• Using Node v22 instead of v20 does not fix it
• Upgrading vitest does not fix it
• Running with different "pool" type does not fix: yarn run vitest run --pool=threads

[netlify]

✅ Deploy Preview for cfpb-design-system-react ready!

Name	Link
🔨 Latest commit	233ee50
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system-react/deploys/679be936e8a0620008ada8ac
😎 Deploy Preview	https://deploy-preview-396--cfpb-design-system-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.