feat: Upgrade to React 19

.happo.cjs

@@ -1,8 +1,6 @@
 const { RemoteBrowserTarget } = require('happo.io')
 const happoPluginStorybook = require('happo-plugin-storybook')
 
-require('dotenv').config()
-
 module.exports = {
   apiKey: process.env.HAPPO_API_KEY,
   apiSecret: process.env.HAPPO_API_SECRET,

.stylelintrc

@@ -1,12 +1,16 @@
 {
-  "plugins": ["stylelint-prettier"],
+  "plugins": [],
   "rules": {
     "at-rule-no-unknown": null,
     "scss/at-rule-no-unknown": true,
-    "prettier/prettier": true,
     "selector-class-pattern": "",
     "scss/function-no-unknown": null,
     "at-rule-empty-line-before": null
   },
-  "extends": ["stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-sass-guidelines", "stylelint-config-css-modules", "stylelint-config-standard-scss"]
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-sass-guidelines",
+    "stylelint-config-css-modules",
+    "stylelint-config-standard-scss"
+  ]
 }

package.json

@@ -69,36 +69,36 @@
   },
   "homepage": "https://github.com/trussworks/react-uswds#readme",
   "peerDependencies": {
+    "@types/react": "^16.x || ^17.x || ^18.x || ^19.x",
+    "@types/react-dom": "^16.x || ^17.x || ^18.x || ^19.x",
     "@uswds/uswds": "^3.7.1",
     "focus-trap-react": "^10.2.3",
-    "react": "^16.x || ^17.x || ^18.x",
-    "react-dom": "^16.x || ^17.x || ^18.x"
+    "react": "^16.x || ^17.x || ^18.x || ^19.x",
+    "react-dom": "^16.x || ^17.x || ^18.x || ^19.x"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
     "@laynezh/vite-plugin-lib-assets": "^0.5.14",
-    "@storybook/addon-a11y": "^8.0.4",
-    "@storybook/addon-essentials": "^8.0.4",
-    "@storybook/addon-interactions": "^8.0.4",
-    "@storybook/addon-links": "^8.0.4",
-    "@storybook/addon-mdx-gfm": "^8.0.4",
-    "@storybook/addons": "^7.6.10",
-    "@storybook/blocks": "^8.0.0",
-    "@storybook/manager-api": "^8.0.4",
-    "@storybook/react": "^8.0.4",
-    "@storybook/react-vite": "^8.0.4",
-    "@storybook/test": "^8.0.4",
-    "@storybook/theming": "^8.0.4",
+    "@storybook/addon-a11y": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-mdx-gfm": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/manager-api": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/theming": "^8.6.4",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.0.4",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@types/react-test-renderer": "^18.0.7",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
     "@uswds/uswds": "3.7.1",
@@ -125,18 +125,15 @@
     "husky": "^9.0.10",
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sass": "^1.26.0",
-    "storybook": "^8.0.4",
-    "stylelint": "^16.2.1",
+    "storybook": "^8.6.4",
+    "stylelint": "^16.12.0",
     "stylelint-config-css-modules": "^4.4.0",
-    "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended": "^14.0.0",
     "stylelint-config-sass-guidelines": "^12.1.0",
     "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-prettier": "^5.0.0",
     "typescript": "^5.1.6",
     "vite": "^5.0.12",
     "vite-plugin-checker": "^0.7.0",
@@ -151,8 +148,6 @@
     "json-schema": "0.4.0",
     "trim": "0.0.3",
     "trim-newlines": "3.0.1",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18",
     "@typescript-eslint/utils": "8.26.1"
   },
   "packageManager": "[email protected]"

src/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { Accordion, AccordionItemProps } from './Accordion'
 
 export default {
@@ -100,15 +100,15 @@ const testItems: AccordionItemProps[] = [
   },
 ]
 
-export const Borderless = (): React.ReactElement => (
+export const Borderless = (): JSX.Element => (
   <Accordion bordered={false} items={testItems} />
 )
 
-export const Bordered = (): React.ReactElement => (
+export const Bordered = (): JSX.Element => (
   <Accordion bordered={true} items={testItems} />
 )
 
-export const Multiselectable = (): React.ReactElement => (
+export const Multiselectable = (): JSX.Element => (
   <Accordion items={testItems} multiselectable={true} />
 )
 
@@ -166,6 +166,6 @@ const customTestItems: AccordionItemProps[] = [
   },
 ]
 
-export const CustomTitles = (): React.ReactElement => (
+export const CustomTitles = (): JSX.Element => (
   <Accordion bordered={true} items={customTestItems} />
 )

src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, type JSX } from 'react'
 import classnames from 'classnames'
 
 import { HeadingLevel } from '../../types/headingLevel'
@@ -28,7 +28,7 @@ export const AccordionItem = ({
   className,
   headingLevel,
   handleToggle,
-}: AccordionItemProps): React.ReactElement => {
+}: AccordionItemProps): JSX.Element => {
   const headingClasses = classnames('usa-accordion__heading', className)
   const contentClasses = classnames(
     'usa-accordion__content',
@@ -67,7 +67,7 @@ export const Accordion = ({
   items,
   className,
   multiselectable = false,
-}: AccordionProps & JSX.IntrinsicElements['div']): React.ReactElement => {
+}: AccordionProps & JSX.IntrinsicElements['div']): JSX.Element => {
   const [openItems, setOpenState] = useState(
     items.filter((i) => !!i.expanded).map((i) => i.id)
   )

src/components/Alert/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { Alert } from './Alert'
 
 import { Button } from '../Button/Button'
@@ -26,31 +26,31 @@ const testText = (
   </>
 )
 
-export const Success = (): React.ReactElement => (
+export const Success = (): JSX.Element => (
   <Alert type="success" heading="Success status" headingLevel="h4">
     {testText}
   </Alert>
 )
 
-export const Warning = (): React.ReactElement => (
+export const Warning = (): JSX.Element => (
   <Alert type="warning" heading="Warning status" headingLevel="h4">
     {testText}
   </Alert>
 )
 
-export const Error = (): React.ReactElement => (
+export const Error = (): JSX.Element => (
   <Alert type="error" heading="Error status" headingLevel="h4">
     {testText}
   </Alert>
 )
 
-export const Info = (): React.ReactElement => (
+export const Info = (): JSX.Element => (
   <Alert type="info" heading="Informative status" headingLevel="h4">
     {testText}
   </Alert>
 )
 
-export const Slim = (): React.ReactElement => (
+export const Slim = (): JSX.Element => (
   <>
     <Alert type="success" headingLevel="h4" slim>
       {testText}
@@ -67,7 +67,7 @@ export const Slim = (): React.ReactElement => (
   </>
 )
 
-export const NoIcon = (): React.ReactElement => (
+export const NoIcon = (): JSX.Element => (
   <>
     <Alert type="success" headingLevel="h4" noIcon>
       {testText}
@@ -84,7 +84,7 @@ export const NoIcon = (): React.ReactElement => (
   </>
 )
 
-export const SlimNoIcon = (): React.ReactElement => (
+export const SlimNoIcon = (): JSX.Element => (
   <>
     <Alert type="success" headingLevel="h4" slim noIcon>
       {testText}
@@ -101,15 +101,16 @@ export const SlimNoIcon = (): React.ReactElement => (
   </>
 )
 
-export const HeadingLevels = (): React.ReactElement => (
+export const HeadingLevels = (): JSX.Element => (
   <>
     <h1>Heading Level 1</h1>
     <Alert type="info" heading="Heading level 2" headingLevel="h2">
       {testText}
     </Alert>
   </>
 )
-export const WithCTA = (): React.ReactElement => (
+
+export const WithCTA = (): JSX.Element => (
   <Alert
     type="warning"
     heading="Warning status"
@@ -123,7 +124,7 @@ export const WithCTA = (): React.ReactElement => (
   </Alert>
 )
 
-export const WithValidation = (): React.ReactElement => (
+export const WithValidation = (): JSX.Element => (
   <Alert type="info" heading="Code requirements" headingLevel="h4" validation>
     <ul>
       <li>Use at least one uppercase character</li>

src/components/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import classnames from 'classnames'
 
 import { HeadingLevel } from '../../types/headingLevel'
@@ -27,7 +27,7 @@ export const Alert = ({
   className,
   validation,
   ...props
-}: AlertProps & React.HTMLAttributes<HTMLDivElement>): React.ReactElement => {
+}: AlertProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
   const classes = classnames(
     'usa-alert',
     {

src/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { Button } from './Button'
 
 export default {
@@ -17,65 +17,65 @@ Source: https://designsystem.digital.gov/components/button/
   },
 }
 
-export const DefaultButton = (): React.ReactElement => (
+export const DefaultButton = (): JSX.Element => (
   <Button type="button">Click Me</Button>
 )
 
-export const Secondary = (): React.ReactElement => (
+export const Secondary = (): JSX.Element => (
   <Button type="button" secondary>
     Click Me
   </Button>
 )
 
-export const AccentCool = (): React.ReactElement => (
+export const AccentCool = (): JSX.Element => (
   <Button type="button" accentStyle="cool">
     Click Me
   </Button>
 )
 
-export const AccentWarm = (): React.ReactElement => (
+export const AccentWarm = (): JSX.Element => (
   <Button type="button" accentStyle="warm">
     Click Me
   </Button>
 )
 
-export const Base = (): React.ReactElement => (
+export const Base = (): JSX.Element => (
   <Button type="button" base>
     Click Me
   </Button>
 )
 
-export const Outline = (): React.ReactElement => (
+export const Outline = (): JSX.Element => (
   <Button type="button" outline>
     Click Me
   </Button>
 )
 
-export const Inverse = (): React.ReactElement => (
+export const Inverse = (): JSX.Element => (
   <Button type="button" inverse>
     Click Me
   </Button>
 )
 
-export const Big = (): React.ReactElement => (
+export const Big = (): JSX.Element => (
   <Button type="button" size="big">
     Click Me
   </Button>
 )
 
-export const Unstyled = (): React.ReactElement => (
+export const Unstyled = (): JSX.Element => (
   <Button type="button" unstyled>
     Click Me
   </Button>
 )
 
-export const CustomClass = (): React.ReactElement => (
+export const CustomClass = (): JSX.Element => (
   <Button type="button" className="custom-class">
     Click Me
   </Button>
 )
 
-export const Disabled = (): React.ReactElement => (
+export const Disabled = (): JSX.Element => (
   <Button type="button" disabled>
     Click Me
   </Button>

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import classnames from 'classnames'
 
 export type ButtonProps = {
@@ -26,7 +26,7 @@ export const Button = ({
   onClick,
   className,
   ...defaultProps
-}: ButtonProps & JSX.IntrinsicElements['button']): React.ReactElement => {
+}: ButtonProps & JSX.IntrinsicElements['button']): JSX.Element => {
   const classes = classnames(
     'usa-button',
     {

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { ButtonGroup } from './ButtonGroup'
 import { Button } from '../Button/Button'
 import { Link } from '../Link/Link'
@@ -19,7 +19,7 @@ Source: https://designsystem.digital.gov/components/button-groups/
   },
 }
 
-export const Default = (): React.ReactElement => (
+export const Default = (): JSX.Element => (
   <ButtonGroup type="default">
     <Link href="#" className="usa-button usa-button--outline">
       Back
@@ -28,7 +28,7 @@ export const Default = (): React.ReactElement => (
   </ButtonGroup>
 )
 
-export const Segmented = (): React.ReactElement => (
+export const Segmented = (): JSX.Element => (
   <ButtonGroup type="segmented">
     <Button type="button">Map</Button>
     <Button type="button" outline>