Skip to content

Commit 2ad0462

Browse files
aliggjpandersen87
aligg
and
jpandersen87
authored
feat: Upgrade to React 19 (#3088)
Co-authored-by: Joseph Andersen <[email protected]>
1 parent fe76973 commit 2ad0462

File tree

223 files changed

+1776
-5064
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

223 files changed

+1776
-5064
lines changed

‎.happo.cjs

-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
const { RemoteBrowserTarget } = require('happo.io')
22
const happoPluginStorybook = require('happo-plugin-storybook')
33

4-
require('dotenv').config()
5-
64
module.exports = {
75
apiKey: process.env.HAPPO_API_KEY,
86
apiSecret: process.env.HAPPO_API_SECRET,

‎.stylelintrc

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
{
2-
"plugins": ["stylelint-prettier"],
2+
"plugins": [],
33
"rules": {
44
"at-rule-no-unknown": null,
55
"scss/at-rule-no-unknown": true,
6-
"prettier/prettier": true,
76
"selector-class-pattern": "",
87
"scss/function-no-unknown": null,
98
"at-rule-empty-line-before": null
109
},
11-
"extends": ["stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-sass-guidelines", "stylelint-config-css-modules", "stylelint-config-standard-scss"]
10+
"extends": [
11+
"stylelint-config-recommended",
12+
"stylelint-config-sass-guidelines",
13+
"stylelint-config-css-modules",
14+
"stylelint-config-standard-scss"
15+
]
1216
}

‎package.json

+22-27
Original file line numberDiff line numberDiff line change
@@ -69,36 +69,36 @@
6969
},
7070
"homepage": "https://github.com/trussworks/react-uswds#readme",
7171
"peerDependencies": {
72+
"@types/react": "^16.x || ^17.x || ^18.x || ^19.x",
73+
"@types/react-dom": "^16.x || ^17.x || ^18.x || ^19.x",
7274
"@uswds/uswds": "^3.7.1",
7375
"focus-trap-react": "^10.2.3",
74-
"react": "^16.x || ^17.x || ^18.x",
75-
"react-dom": "^16.x || ^17.x || ^18.x"
76+
"react": "^16.x || ^17.x || ^18.x || ^19.x",
77+
"react-dom": "^16.x || ^17.x || ^18.x || ^19.x"
7678
},
7779
"devDependencies": {
7880
"@babel/core": "^7.23.9",
7981
"@eslint/compat": "^1.2.7",
8082
"@eslint/eslintrc": "^3.3.0",
8183
"@eslint/js": "^9.22.0",
8284
"@laynezh/vite-plugin-lib-assets": "^0.5.14",
83-
"@storybook/addon-a11y": "^8.0.4",
84-
"@storybook/addon-essentials": "^8.0.4",
85-
"@storybook/addon-interactions": "^8.0.4",
86-
"@storybook/addon-links": "^8.0.4",
87-
"@storybook/addon-mdx-gfm": "^8.0.4",
88-
"@storybook/addons": "^7.6.10",
89-
"@storybook/blocks": "^8.0.0",
90-
"@storybook/manager-api": "^8.0.4",
91-
"@storybook/react": "^8.0.4",
92-
"@storybook/react-vite": "^8.0.4",
93-
"@storybook/test": "^8.0.4",
94-
"@storybook/theming": "^8.0.4",
85+
"@storybook/addon-a11y": "^8.6.4",
86+
"@storybook/addon-essentials": "^8.6.4",
87+
"@storybook/addon-interactions": "^8.6.4",
88+
"@storybook/addon-links": "^8.6.4",
89+
"@storybook/addon-mdx-gfm": "^8.6.4",
90+
"@storybook/blocks": "^8.6.4",
91+
"@storybook/manager-api": "^8.6.4",
92+
"@storybook/react": "^8.6.4",
93+
"@storybook/react-vite": "^8.6.4",
94+
"@storybook/test": "^8.6.4",
95+
"@storybook/theming": "^8.6.4",
9596
"@testing-library/dom": "^9.0.0",
9697
"@testing-library/jest-dom": "^6.4.2",
97-
"@testing-library/react": "^14.1.2",
98+
"@testing-library/react": "^16.2.0",
9899
"@testing-library/user-event": "^14.0.4",
99-
"@types/react": "^18.2.48",
100-
"@types/react-dom": "^18.2.18",
101-
"@types/react-test-renderer": "^18.0.7",
100+
"@types/react": "^19.0.10",
101+
"@types/react-dom": "^19.0.4",
102102
"@typescript-eslint/eslint-plugin": "^8.26.1",
103103
"@typescript-eslint/parser": "^8.26.1",
104104
"@uswds/uswds": "3.7.1",
@@ -125,18 +125,15 @@
125125
"husky": "^9.0.10",
126126
"jsdom": "^24.0.0",
127127
"prettier": "^3.2.5",
128-
"react": "^18.2.0",
129-
"react-dom": "^18.2.0",
130-
"react-test-renderer": "^18.2.0",
128+
"react": "^19.0.0",
129+
"react-dom": "^19.0.0",
131130
"sass": "^1.26.0",
132-
"storybook": "^8.0.4",
133-
"stylelint": "^16.2.1",
131+
"storybook": "^8.6.4",
132+
"stylelint": "^16.12.0",
134133
"stylelint-config-css-modules": "^4.4.0",
135-
"stylelint-config-prettier": "^9.0.5",
136134
"stylelint-config-recommended": "^14.0.0",
137135
"stylelint-config-sass-guidelines": "^12.1.0",
138136
"stylelint-config-standard-scss": "^13.0.0",
139-
"stylelint-prettier": "^5.0.0",
140137
"typescript": "^5.1.6",
141138
"vite": "^5.0.12",
142139
"vite-plugin-checker": "^0.7.0",
@@ -151,8 +148,6 @@
151148
"json-schema": "0.4.0",
152149
"trim": "0.0.3",
153150
"trim-newlines": "3.0.1",
154-
"@types/react": "18.2.48",
155-
"@types/react-dom": "18.2.18",
156151
"@typescript-eslint/utils": "8.26.1"
157152
},
158153
"packageManager": "[email protected]"

‎src/components/Accordion/Accordion.stories.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { type JSX } from 'react'
22
import { Accordion, AccordionItemProps } from './Accordion'
33

44
export default {
@@ -100,15 +100,15 @@ const testItems: AccordionItemProps[] = [
100100
},
101101
]
102102

103-
export const Borderless = (): React.ReactElement => (
103+
export const Borderless = (): JSX.Element => (
104104
<Accordion bordered={false} items={testItems} />
105105
)
106106

107-
export const Bordered = (): React.ReactElement => (
107+
export const Bordered = (): JSX.Element => (
108108
<Accordion bordered={true} items={testItems} />
109109
)
110110

111-
export const Multiselectable = (): React.ReactElement => (
111+
export const Multiselectable = (): JSX.Element => (
112112
<Accordion items={testItems} multiselectable={true} />
113113
)
114114

@@ -166,6 +166,6 @@ const customTestItems: AccordionItemProps[] = [
166166
},
167167
]
168168

169-
export const CustomTitles = (): React.ReactElement => (
169+
export const CustomTitles = (): JSX.Element => (
170170
<Accordion bordered={true} items={customTestItems} />
171171
)

‎src/components/Accordion/Accordion.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react'
1+
import React, { useState, type JSX } from 'react'
22
import classnames from 'classnames'
33

44
import { HeadingLevel } from '../../types/headingLevel'
@@ -28,7 +28,7 @@ export const AccordionItem = ({
2828
className,
2929
headingLevel,
3030
handleToggle,
31-
}: AccordionItemProps): React.ReactElement => {
31+
}: AccordionItemProps): JSX.Element => {
3232
const headingClasses = classnames('usa-accordion__heading', className)
3333
const contentClasses = classnames(
3434
'usa-accordion__content',
@@ -67,7 +67,7 @@ export const Accordion = ({
6767
items,
6868
className,
6969
multiselectable = false,
70-
}: AccordionProps & JSX.IntrinsicElements['div']): React.ReactElement => {
70+
}: AccordionProps & JSX.IntrinsicElements['div']): JSX.Element => {
7171
const [openItems, setOpenState] = useState(
7272
items.filter((i) => !!i.expanded).map((i) => i.id)
7373
)

‎src/components/Alert/Alert.stories.tsx

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { type JSX } from 'react'
22
import { Alert } from './Alert'
33

44
import { Button } from '../Button/Button'
@@ -26,31 +26,31 @@ const testText = (
2626
</>
2727
)
2828

29-
export const Success = (): React.ReactElement => (
29+
export const Success = (): JSX.Element => (
3030
<Alert type="success" heading="Success status" headingLevel="h4">
3131
{testText}
3232
</Alert>
3333
)
3434

35-
export const Warning = (): React.ReactElement => (
35+
export const Warning = (): JSX.Element => (
3636
<Alert type="warning" heading="Warning status" headingLevel="h4">
3737
{testText}
3838
</Alert>
3939
)
4040

41-
export const Error = (): React.ReactElement => (
41+
export const Error = (): JSX.Element => (
4242
<Alert type="error" heading="Error status" headingLevel="h4">
4343
{testText}
4444
</Alert>
4545
)
4646

47-
export const Info = (): React.ReactElement => (
47+
export const Info = (): JSX.Element => (
4848
<Alert type="info" heading="Informative status" headingLevel="h4">
4949
{testText}
5050
</Alert>
5151
)
5252

53-
export const Slim = (): React.ReactElement => (
53+
export const Slim = (): JSX.Element => (
5454
<>
5555
<Alert type="success" headingLevel="h4" slim>
5656
{testText}
@@ -67,7 +67,7 @@ export const Slim = (): React.ReactElement => (
6767
</>
6868
)
6969

70-
export const NoIcon = (): React.ReactElement => (
70+
export const NoIcon = (): JSX.Element => (
7171
<>
7272
<Alert type="success" headingLevel="h4" noIcon>
7373
{testText}
@@ -84,7 +84,7 @@ export const NoIcon = (): React.ReactElement => (
8484
</>
8585
)
8686

87-
export const SlimNoIcon = (): React.ReactElement => (
87+
export const SlimNoIcon = (): JSX.Element => (
8888
<>
8989
<Alert type="success" headingLevel="h4" slim noIcon>
9090
{testText}
@@ -101,15 +101,16 @@ export const SlimNoIcon = (): React.ReactElement => (
101101
</>
102102
)
103103

104-
export const HeadingLevels = (): React.ReactElement => (
104+
export const HeadingLevels = (): JSX.Element => (
105105
<>
106106
<h1>Heading Level 1</h1>
107107
<Alert type="info" heading="Heading level 2" headingLevel="h2">
108108
{testText}
109109
</Alert>
110110
</>
111111
)
112-
export const WithCTA = (): React.ReactElement => (
112+
113+
export const WithCTA = (): JSX.Element => (
113114
<Alert
114115
type="warning"
115116
heading="Warning status"
@@ -123,7 +124,7 @@ export const WithCTA = (): React.ReactElement => (
123124
</Alert>
124125
)
125126

126-
export const WithValidation = (): React.ReactElement => (
127+
export const WithValidation = (): JSX.Element => (
127128
<Alert type="info" heading="Code requirements" headingLevel="h4" validation>
128129
<ul>
129130
<li>Use at least one uppercase character</li>

‎src/components/Alert/Alert.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { type JSX } from 'react'
22
import classnames from 'classnames'
33

44
import { HeadingLevel } from '../../types/headingLevel'
@@ -27,7 +27,7 @@ export const Alert = ({
2727
className,
2828
validation,
2929
...props
30-
}: AlertProps & React.HTMLAttributes<HTMLDivElement>): React.ReactElement => {
30+
}: AlertProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
3131
const classes = classnames(
3232
'usa-alert',
3333
{

‎src/components/Button/Button.stories.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { type JSX } from 'react'
22
import { Button } from './Button'
33

44
export default {
@@ -17,65 +17,65 @@ Source: https://designsystem.digital.gov/components/button/
1717
},
1818
}
1919

20-
export const DefaultButton = (): React.ReactElement => (
20+
export const DefaultButton = (): JSX.Element => (
2121
<Button type="button">Click Me</Button>
2222
)
2323

24-
export const Secondary = (): React.ReactElement => (
24+
export const Secondary = (): JSX.Element => (
2525
<Button type="button" secondary>
2626
Click Me
2727
</Button>
2828
)
2929

30-
export const AccentCool = (): React.ReactElement => (
30+
export const AccentCool = (): JSX.Element => (
3131
<Button type="button" accentStyle="cool">
3232
Click Me
3333
</Button>
3434
)
3535

36-
export const AccentWarm = (): React.ReactElement => (
36+
export const AccentWarm = (): JSX.Element => (
3737
<Button type="button" accentStyle="warm">
3838
Click Me
3939
</Button>
4040
)
4141

42-
export const Base = (): React.ReactElement => (
42+
export const Base = (): JSX.Element => (
4343
<Button type="button" base>
4444
Click Me
4545
</Button>
4646
)
4747

48-
export const Outline = (): React.ReactElement => (
48+
export const Outline = (): JSX.Element => (
4949
<Button type="button" outline>
5050
Click Me
5151
</Button>
5252
)
5353

54-
export const Inverse = (): React.ReactElement => (
54+
export const Inverse = (): JSX.Element => (
5555
<Button type="button" inverse>
5656
Click Me
5757
</Button>
5858
)
5959

60-
export const Big = (): React.ReactElement => (
60+
export const Big = (): JSX.Element => (
6161
<Button type="button" size="big">
6262
Click Me
6363
</Button>
6464
)
6565

66-
export const Unstyled = (): React.ReactElement => (
66+
export const Unstyled = (): JSX.Element => (
6767
<Button type="button" unstyled>
6868
Click Me
6969
</Button>
7070
)
7171

72-
export const CustomClass = (): React.ReactElement => (
72+
export const CustomClass = (): JSX.Element => (
7373
<Button type="button" className="custom-class">
7474
Click Me
7575
</Button>
7676
)
7777

78-
export const Disabled = (): React.ReactElement => (
78+
export const Disabled = (): JSX.Element => (
7979
<Button type="button" disabled>
8080
Click Me
8181
</Button>

‎src/components/Button/Button.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { type JSX } from 'react'
22
import classnames from 'classnames'
33

44
export type ButtonProps = {
@@ -26,7 +26,7 @@ export const Button = ({
2626
onClick,
2727
className,
2828
...defaultProps
29-
}: ButtonProps & JSX.IntrinsicElements['button']): React.ReactElement => {
29+
}: ButtonProps & JSX.IntrinsicElements['button']): JSX.Element => {
3030
const classes = classnames(
3131
'usa-button',
3232
{

‎src/components/ButtonGroup/ButtonGroup.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { type JSX } from 'react'
22
import { ButtonGroup } from './ButtonGroup'
33
import { Button } from '../Button/Button'
44
import { Link } from '../Link/Link'
@@ -19,7 +19,7 @@ Source: https://designsystem.digital.gov/components/button-groups/
1919
},
2020
}
2121

22-
export const Default = (): React.ReactElement => (
22+
export const Default = (): JSX.Element => (
2323
<ButtonGroup type="default">
2424
<Link href="#" className="usa-button usa-button--outline">
2525
Back
@@ -28,7 +28,7 @@ export const Default = (): React.ReactElement => (
2828
</ButtonGroup>
2929
)
3030

31-
export const Segmented = (): React.ReactElement => (
31+
export const Segmented = (): JSX.Element => (
3232
<ButtonGroup type="segmented">
3333
<Button type="button">Map</Button>
3434
<Button type="button" outline>

0 commit comments

Comments
 (0)