From 4d33ea553fa3be236742259f02bd8e9552fe43aa Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Tue, 10 Dec 2024 09:01:59 -0500 Subject: [PATCH 1/6] Upgrade all react packages to 19. --- package-lock.json | 102 ++++++++++++++++----------- package.json | 6 +- packages/comet-data-viz/package.json | 6 +- packages/comet-extras/package.json | 6 +- packages/comet-uswds/package.json | 6 +- 5 files changed, 74 insertions(+), 52 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3bac51f..a6d6c11b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "@testing-library/user-event": "14.5.2", "@types/jest-axe": "^3.5.9", "@types/node": "18.19.50", - "@types/react": "18.3.12", + "@types/react": "19.0.1", "@vitejs/plugin-react": "^4.3.4", "@vitest/coverage-v8": "^2.1.8", "eslint": "^9.16.0", @@ -42,8 +42,8 @@ "jest-axe": "^9.0.0", "postcss": "^8.4.49", "prettier": "3.4.2", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "rollup": "^4.28.1", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-peer-deps-external": "^2.2.4", @@ -1499,6 +1499,40 @@ "storybook": "^8.4.7" } }, + "node_modules/@storybook/addon-docs/node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@storybook/addon-docs/node_modules/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/@storybook/addon-docs/node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/@storybook/addon-essentials": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.4.7.tgz", @@ -2448,12 +2482,6 @@ "undici-types": "~5.26.4" } }, - "node_modules/@types/prop-types": { - "version": "15.7.14", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", - "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "dev": true - }, "node_modules/@types/qs": { "version": "6.9.17", "dev": true, @@ -2465,12 +2493,11 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "18.3.12", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz", - "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", + "version": "19.0.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.1.tgz", + "integrity": "sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ==", "dev": true, "dependencies": { - "@types/prop-types": "*", "csstype": "^3.0.2" } }, @@ -6061,6 +6088,7 @@ }, "node_modules/js-tokens": { "version": "4.0.0", + "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -6290,6 +6318,7 @@ }, "node_modules/loose-envify": { "version": "1.4.0", + "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -7647,12 +7676,9 @@ } }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dependencies": { - "loose-envify": "^1.1.0" - }, + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz", + "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==", "engines": { "node": ">=0.10.0" } @@ -7697,15 +7723,14 @@ } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", + "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.25.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.0.0" } }, "node_modules/react-fast-compare": { @@ -8106,12 +8131,9 @@ } }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz", + "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==" }, "node_modules/semver": { "version": "6.3.1", @@ -10163,12 +10185,12 @@ "version": "1.1.7", "license": "Apache-2.0", "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", "victory": "^37.3.4" }, "peerDependencies": { - "react": "^18.2.0" + "react": "^19.0.0" } }, "packages/comet-extras": { @@ -10177,12 +10199,12 @@ "license": "Apache-2.0", "dependencies": { "@tanstack/react-table": "8.20.5", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "peerDependencies": { "@tanstack/react-table": "8.20.5", - "react": "^18.2.0" + "react": "^19.0.0" } }, "packages/comet-uswds": { @@ -10192,12 +10214,12 @@ "dependencies": { "@uswds/uswds": "3.10.0", "classnames": "^2.5.1", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "peerDependencies": { "@uswds/uswds": "3.10.0", - "react": "^18.2.0" + "react": "^19.0.0" } } } diff --git a/package.json b/package.json index 3f314249..687a2cf9 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "@testing-library/user-event": "14.5.2", "@types/jest-axe": "^3.5.9", "@types/node": "18.19.50", - "@types/react": "18.3.12", + "@types/react": "19.0.1", "@vitejs/plugin-react": "^4.3.4", "@vitest/coverage-v8": "^2.1.8", "eslint": "^9.16.0", @@ -57,8 +57,8 @@ "jest-axe": "^9.0.0", "postcss": "^8.4.49", "prettier": "3.4.2", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "rollup": "^4.28.1", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-peer-deps-external": "^2.2.4", diff --git a/packages/comet-data-viz/package.json b/packages/comet-data-viz/package.json index 8ab47128..6b42604d 100644 --- a/packages/comet-data-viz/package.json +++ b/packages/comet-data-viz/package.json @@ -21,12 +21,12 @@ ], "types": "./dist/index.d.ts", "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", "victory": "^37.3.4" }, "peerDependencies": { - "react": "^18.2.0" + "react": "^19.0.0" }, "repository": { "type": "git", diff --git a/packages/comet-extras/package.json b/packages/comet-extras/package.json index 4d3554ba..4b3620da 100644 --- a/packages/comet-extras/package.json +++ b/packages/comet-extras/package.json @@ -18,12 +18,12 @@ "types": "./dist/index.d.ts", "dependencies": { "@tanstack/react-table": "8.20.5", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "peerDependencies": { "@tanstack/react-table": "8.20.5", - "react": "^18.2.0" + "react": "^19.0.0" }, "repository": { "type": "git", diff --git a/packages/comet-uswds/package.json b/packages/comet-uswds/package.json index cba5ef45..79698ec4 100644 --- a/packages/comet-uswds/package.json +++ b/packages/comet-uswds/package.json @@ -20,12 +20,12 @@ "dependencies": { "@uswds/uswds": "3.10.0", "classnames": "^2.5.1", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "peerDependencies": { "@uswds/uswds": "3.10.0", - "react": "^18.2.0" + "react": "^19.0.0" }, "repository": { "type": "git", From 334b6f983aedee3707472dd7c7297c80507348d5 Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Tue, 10 Dec 2024 09:17:57 -0500 Subject: [PATCH 2/6] Update react imports for react jsx. --- .../src/components/spinner/spinner.figma.tsx | 4 +++- packages/comet-extras/src/components/spinner/spinner.tsx | 2 +- packages/comet-uswds/src/components/button/button.tsx | 2 +- .../src/components/character-count/character-count.tsx | 2 +- .../comet-uswds/src/components/checkbox/checkbox.tsx | 2 +- .../comet-uswds/src/components/combo-box/combo-box.tsx | 9 ++++++++- .../src/components/date-picker/date-picker.tsx | 2 +- .../src/components/file-input/file-input.test.tsx | 2 +- .../comet-uswds/src/components/file-input/file-input.tsx | 2 +- packages/comet-uswds/src/components/form/form.tsx | 1 + packages/comet-uswds/src/components/label/label.tsx | 2 +- packages/comet-uswds/src/components/modal/modal.test.tsx | 2 +- .../comet-uswds/src/components/pagination/pagination.tsx | 2 +- packages/comet-uswds/src/components/prose/prose.tsx | 2 +- .../src/components/radio-button/radio-button.tsx | 2 +- .../src/components/range-slider/range-slider.tsx | 1 + packages/comet-uswds/src/components/search/search.tsx | 2 +- packages/comet-uswds/src/components/select/select.tsx | 2 +- .../side-navigation/side-navigation.stories.tsx | 2 +- .../components/side-navigation/side-navigation.test.tsx | 1 + .../src/components/side-navigation/side-navigation.tsx | 2 +- .../comet-uswds/src/components/text-area/text-area.tsx | 2 +- .../comet-uswds/src/components/text-input/text-input.tsx | 2 +- .../src/components/time-picker/time-picker.tsx | 2 +- 24 files changed, 33 insertions(+), 21 deletions(-) diff --git a/packages/comet-extras/src/components/spinner/spinner.figma.tsx b/packages/comet-extras/src/components/spinner/spinner.figma.tsx index 8a483c6b..71e6b9b1 100644 --- a/packages/comet-extras/src/components/spinner/spinner.figma.tsx +++ b/packages/comet-extras/src/components/spinner/spinner.figma.tsx @@ -11,6 +11,8 @@ figma.connect( Large: 'large', }), }, - example: ({ type }) => , + example: ({ type }) => ( + + ), }, ); diff --git a/packages/comet-extras/src/components/spinner/spinner.tsx b/packages/comet-extras/src/components/spinner/spinner.tsx index 22f1449c..b3370276 100644 --- a/packages/comet-extras/src/components/spinner/spinner.tsx +++ b/packages/comet-extras/src/components/spinner/spinner.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { JSX } from 'react'; import classnames from 'classnames'; import './spinner.style.css'; diff --git a/packages/comet-uswds/src/components/button/button.tsx b/packages/comet-uswds/src/components/button/button.tsx index 1756ee90..2ee6ed5d 100644 --- a/packages/comet-uswds/src/components/button/button.tsx +++ b/packages/comet-uswds/src/components/button/button.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, SyntheticEvent } from 'react'; +import React, { JSX, ReactNode, SyntheticEvent } from 'react'; import classnames from 'classnames'; export interface ButtonProps { diff --git a/packages/comet-uswds/src/components/character-count/character-count.tsx b/packages/comet-uswds/src/components/character-count/character-count.tsx index bf14a980..4de9c0d9 100644 --- a/packages/comet-uswds/src/components/character-count/character-count.tsx +++ b/packages/comet-uswds/src/components/character-count/character-count.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from 'react'; +import React, { JSX, useEffect, useRef } from 'react'; import classNames from 'classnames'; import characterCount from '@uswds/uswds/js/usa-character-count'; diff --git a/packages/comet-uswds/src/components/checkbox/checkbox.tsx b/packages/comet-uswds/src/components/checkbox/checkbox.tsx index 99c1d5a1..080010c7 100644 --- a/packages/comet-uswds/src/components/checkbox/checkbox.tsx +++ b/packages/comet-uswds/src/components/checkbox/checkbox.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEventHandler, MouseEventHandler } from 'react'; +import React, { ChangeEventHandler, JSX, MouseEventHandler } from 'react'; import classnames from 'classnames'; import FormGroup from '../form-group'; diff --git a/packages/comet-uswds/src/components/combo-box/combo-box.tsx b/packages/comet-uswds/src/components/combo-box/combo-box.tsx index 9f78fc3c..e624a72b 100644 --- a/packages/comet-uswds/src/components/combo-box/combo-box.tsx +++ b/packages/comet-uswds/src/components/combo-box/combo-box.tsx @@ -1,6 +1,13 @@ import { createOption, SelectOptionProps, SelectProps } from '../select/select'; import comboBox from '@uswds/uswds/js/usa-combo-box'; -import React, { ChangeEventHandler, ReactElement, RefObject, useLayoutEffect, useRef } from 'react'; +import React, { + ChangeEventHandler, + JSX, + ReactElement, + RefObject, + useLayoutEffect, + useRef, +} from 'react'; import FormGroup from '../form-group'; import classNames from 'classnames'; diff --git a/packages/comet-uswds/src/components/date-picker/date-picker.tsx b/packages/comet-uswds/src/components/date-picker/date-picker.tsx index 99d4b541..904edccf 100644 --- a/packages/comet-uswds/src/components/date-picker/date-picker.tsx +++ b/packages/comet-uswds/src/components/date-picker/date-picker.tsx @@ -1,5 +1,5 @@ import datePicker from '@uswds/uswds/js/usa-date-picker'; -import React, { useLayoutEffect, useRef } from 'react'; +import React, { JSX, useLayoutEffect, useRef } from 'react'; import FormGroup from '../form-group'; import { ValidationStatus } from '../utils/types'; import classNames from 'classnames'; diff --git a/packages/comet-uswds/src/components/file-input/file-input.test.tsx b/packages/comet-uswds/src/components/file-input/file-input.test.tsx index df6f3b84..f36f2409 100644 --- a/packages/comet-uswds/src/components/file-input/file-input.test.tsx +++ b/packages/comet-uswds/src/components/file-input/file-input.test.tsx @@ -1,7 +1,7 @@ import { render, RenderOptions, RenderResult } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { axe } from 'jest-axe'; -import React, { ReactNode } from 'react'; +import React, { JSX, ReactNode } from 'react'; import FileInput from './file-input'; const customRender = (ui: React.ReactElement, options?: RenderOptions): RenderResult => render(ui, { wrapper: Wrapper, ...options }); diff --git a/packages/comet-uswds/src/components/file-input/file-input.tsx b/packages/comet-uswds/src/components/file-input/file-input.tsx index d2122fec..014ea1aa 100644 --- a/packages/comet-uswds/src/components/file-input/file-input.tsx +++ b/packages/comet-uswds/src/components/file-input/file-input.tsx @@ -1,5 +1,5 @@ import fileInput from '@uswds/uswds/js/usa-file-input'; -import React, { useLayoutEffect, useRef } from 'react'; +import React, { JSX, useLayoutEffect, useRef } from 'react'; import FormGroup from '../form-group'; export interface FileInputProps { diff --git a/packages/comet-uswds/src/components/form/form.tsx b/packages/comet-uswds/src/components/form/form.tsx index 174291e4..de1147d3 100644 --- a/packages/comet-uswds/src/components/form/form.tsx +++ b/packages/comet-uswds/src/components/form/form.tsx @@ -1,4 +1,5 @@ import classNames from 'classnames'; +import { JSX } from 'react'; export interface FormProps { /** diff --git a/packages/comet-uswds/src/components/label/label.tsx b/packages/comet-uswds/src/components/label/label.tsx index 56a17ce9..75c920a3 100644 --- a/packages/comet-uswds/src/components/label/label.tsx +++ b/packages/comet-uswds/src/components/label/label.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import React, { JSX, ReactNode } from 'react'; export interface LabelProps { /** diff --git a/packages/comet-uswds/src/components/modal/modal.test.tsx b/packages/comet-uswds/src/components/modal/modal.test.tsx index 23d6c294..4f7d1df7 100644 --- a/packages/comet-uswds/src/components/modal/modal.test.tsx +++ b/packages/comet-uswds/src/components/modal/modal.test.tsx @@ -1,6 +1,6 @@ import { render, RenderOptions, RenderResult } from '@testing-library/react'; import { axe } from 'jest-axe'; -import React, { ReactNode } from 'react'; +import React, { JSX, ReactNode } from 'react'; import Modal from './modal'; const customRender = (ui: React.ReactElement, options?: RenderOptions): RenderResult => diff --git a/packages/comet-uswds/src/components/pagination/pagination.tsx b/packages/comet-uswds/src/components/pagination/pagination.tsx index 0d96f0cc..158a4342 100644 --- a/packages/comet-uswds/src/components/pagination/pagination.tsx +++ b/packages/comet-uswds/src/components/pagination/pagination.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, SyntheticEvent } from 'react'; +import React, { JSX, ReactNode, SyntheticEvent } from 'react'; import classNames from 'classnames'; import sprite from '@uswds/uswds/img/sprite.svg'; diff --git a/packages/comet-uswds/src/components/prose/prose.tsx b/packages/comet-uswds/src/components/prose/prose.tsx index 239e3dde..03d358db 100644 --- a/packages/comet-uswds/src/components/prose/prose.tsx +++ b/packages/comet-uswds/src/components/prose/prose.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import React, { JSX, ReactNode } from 'react'; import classnames from 'classnames'; export interface ProseProps { diff --git a/packages/comet-uswds/src/components/radio-button/radio-button.tsx b/packages/comet-uswds/src/components/radio-button/radio-button.tsx index f888c621..e61d9879 100644 --- a/packages/comet-uswds/src/components/radio-button/radio-button.tsx +++ b/packages/comet-uswds/src/components/radio-button/radio-button.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEventHandler, MouseEventHandler } from 'react'; +import React, { ChangeEventHandler, JSX, MouseEventHandler } from 'react'; import classnames from 'classnames'; import FormGroup from '../form-group'; diff --git a/packages/comet-uswds/src/components/range-slider/range-slider.tsx b/packages/comet-uswds/src/components/range-slider/range-slider.tsx index cf3b7dcd..ef050153 100644 --- a/packages/comet-uswds/src/components/range-slider/range-slider.tsx +++ b/packages/comet-uswds/src/components/range-slider/range-slider.tsx @@ -1,3 +1,4 @@ +import { JSX } from 'react'; import FormGroup from '../form-group'; export interface RangeSliderProps { diff --git a/packages/comet-uswds/src/components/search/search.tsx b/packages/comet-uswds/src/components/search/search.tsx index 93700a5c..c131582c 100644 --- a/packages/comet-uswds/src/components/search/search.tsx +++ b/packages/comet-uswds/src/components/search/search.tsx @@ -1,4 +1,4 @@ -import React, { FormEvent } from 'react'; +import React, { FormEvent, JSX } from 'react'; import classnames from 'classnames'; import searchIcon from '@uswds/uswds/img/usa-icons-bg/search--white.svg'; diff --git a/packages/comet-uswds/src/components/select/select.tsx b/packages/comet-uswds/src/components/select/select.tsx index d26d90f4..405afd80 100644 --- a/packages/comet-uswds/src/components/select/select.tsx +++ b/packages/comet-uswds/src/components/select/select.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { ChangeEventHandler, ReactElement } from 'react'; +import React, { ChangeEventHandler, JSX, ReactElement } from 'react'; import FormGroup from '../form-group'; export interface SelectOptionProps { diff --git a/packages/comet-uswds/src/components/side-navigation/side-navigation.stories.tsx b/packages/comet-uswds/src/components/side-navigation/side-navigation.stories.tsx index 4b07db99..377db5a2 100644 --- a/packages/comet-uswds/src/components/side-navigation/side-navigation.stories.tsx +++ b/packages/comet-uswds/src/components/side-navigation/side-navigation.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { JSX } from 'react'; import { Meta, StoryFn } from '@storybook/react'; import SideNavigation, { SideNavigationItem, diff --git a/packages/comet-uswds/src/components/side-navigation/side-navigation.test.tsx b/packages/comet-uswds/src/components/side-navigation/side-navigation.test.tsx index d5d8b407..3369fc6f 100644 --- a/packages/comet-uswds/src/components/side-navigation/side-navigation.test.tsx +++ b/packages/comet-uswds/src/components/side-navigation/side-navigation.test.tsx @@ -1,6 +1,7 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; import SideNavigation, { SideNavigationItemProps } from './side-navigation'; +import { JSX } from 'react'; describe('SideNavigation', () => { const defaultId = 'side-navigation1'; diff --git a/packages/comet-uswds/src/components/side-navigation/side-navigation.tsx b/packages/comet-uswds/src/components/side-navigation/side-navigation.tsx index d982dc39..5e9b6d21 100644 --- a/packages/comet-uswds/src/components/side-navigation/side-navigation.tsx +++ b/packages/comet-uswds/src/components/side-navigation/side-navigation.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, ReactNode } from 'react'; +import React, { JSX, ReactElement, ReactNode } from 'react'; export interface SideNavigationItemProps { /** diff --git a/packages/comet-uswds/src/components/text-area/text-area.tsx b/packages/comet-uswds/src/components/text-area/text-area.tsx index 52d86330..ad6aca9a 100644 --- a/packages/comet-uswds/src/components/text-area/text-area.tsx +++ b/packages/comet-uswds/src/components/text-area/text-area.tsx @@ -1,5 +1,5 @@ import classnames from 'classnames'; -import React, { ChangeEventHandler } from 'react'; +import React, { ChangeEventHandler, JSX } from 'react'; import { ValidationStatus } from '../utils/types'; import FormGroup from '../form-group'; diff --git a/packages/comet-uswds/src/components/text-input/text-input.tsx b/packages/comet-uswds/src/components/text-input/text-input.tsx index f155974a..e1c72b7e 100644 --- a/packages/comet-uswds/src/components/text-input/text-input.tsx +++ b/packages/comet-uswds/src/components/text-input/text-input.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEventHandler, ReactNode, useEffect, useRef } from 'react'; +import React, { ChangeEventHandler, JSX, ReactNode, useEffect, useRef } from 'react'; import classnames from 'classnames'; import { getInputMode, getPattern, getPlaceholder, getType } from './input-utils'; import FormGroup from '../form-group'; diff --git a/packages/comet-uswds/src/components/time-picker/time-picker.tsx b/packages/comet-uswds/src/components/time-picker/time-picker.tsx index b6540af5..e8e6eb31 100644 --- a/packages/comet-uswds/src/components/time-picker/time-picker.tsx +++ b/packages/comet-uswds/src/components/time-picker/time-picker.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { useLayoutEffect, useRef } from 'react'; +import React, { JSX, useLayoutEffect, useRef } from 'react'; import comboBox from '@uswds/uswds/js/usa-combo-box'; import timePicker from '@uswds/uswds/js/usa-time-picker'; import FormGroup from '../form-group'; From 5452644fc9d089bb7c7793fe2ff2234cbd4e7f32 Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Tue, 10 Dec 2024 13:29:58 -0500 Subject: [PATCH 3/6] Fix issues. --- .../src/components/combo-box/combo-box.tsx | 2 +- .../src/components/form-group/form-group.tsx | 14 +++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/comet-uswds/src/components/combo-box/combo-box.tsx b/packages/comet-uswds/src/components/combo-box/combo-box.tsx index e624a72b..45206b32 100644 --- a/packages/comet-uswds/src/components/combo-box/combo-box.tsx +++ b/packages/comet-uswds/src/components/combo-box/combo-box.tsx @@ -91,7 +91,7 @@ export const ComboBox = ({ const comboBoxAttributes: { className: string; - ref: RefObject; + ref: RefObject; 'data-placeholder'?: string; 'data-default-value'?: unknown; } = { diff --git a/packages/comet-uswds/src/components/form-group/form-group.tsx b/packages/comet-uswds/src/components/form-group/form-group.tsx index c449c14d..cd6891ad 100644 --- a/packages/comet-uswds/src/components/form-group/form-group.tsx +++ b/packages/comet-uswds/src/components/form-group/form-group.tsx @@ -81,10 +81,14 @@ export const FormGroup = ({ } // Get the id of the fieldControl element associated with the label - let fieldControlId = isValidElement(fieldControl) ? fieldControl.props.id : undefined; const fieldControlElement = isValidElement(fieldControl) - ? (fieldControl as React.ReactElement) + ? (fieldControl as React.ReactElement<{ + id?: string; + className?: string; + children?: ReactNode; + }>) : undefined; + let fieldControlId = fieldControlElement?.props?.id; let fieldControlWithProps = fieldControlElement; const fieldControlClass = fieldControlWithProps?.props.className; @@ -95,7 +99,11 @@ export const FormGroup = ({ fieldControlClass === 'usa-date-picker' ) { const children = fieldControlElement?.props.children; - fieldControlId = children?.props.id; + if ( + isValidElement(children) ? (children as React.ReactElement<{ id?: string }>).props.id : false + ) { + fieldControlId = (children as React.ReactElement<{ id?: string }>).props.id; + } } else { // Otherwise, we need to add aria-describedby to the fieldControl if (fieldControlElement) { From 1c61ddb5be72f1da9a495f5b71cd704d4daa35f2 Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Tue, 17 Dec 2024 21:58:46 -0500 Subject: [PATCH 4/6] Update peer deps to support react 18 and 19. --- package-lock.json | 9 ++++++--- packages/comet-data-viz/package.json | 3 ++- packages/comet-extras/package.json | 3 ++- packages/comet-uswds/package.json | 3 ++- 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index a6d6c11b..eb75090e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10190,7 +10190,8 @@ "victory": "^37.3.4" }, "peerDependencies": { - "react": "^19.0.0" + "react": "^18.x || ^19.x", + "react-dom": "^18.x || ^19.x" } }, "packages/comet-extras": { @@ -10204,7 +10205,8 @@ }, "peerDependencies": { "@tanstack/react-table": "8.20.5", - "react": "^19.0.0" + "react": "^18.x || ^19.x", + "react-dom": "^18.x || ^19.x" } }, "packages/comet-uswds": { @@ -10219,7 +10221,8 @@ }, "peerDependencies": { "@uswds/uswds": "3.10.0", - "react": "^19.0.0" + "react": "^18.x || ^19.x", + "react-dom": "^18.x || ^19.x" } } } diff --git a/packages/comet-data-viz/package.json b/packages/comet-data-viz/package.json index 6b42604d..af896d5b 100644 --- a/packages/comet-data-viz/package.json +++ b/packages/comet-data-viz/package.json @@ -26,7 +26,8 @@ "victory": "^37.3.4" }, "peerDependencies": { - "react": "^19.0.0" + "react": "^18.x || ^19.x", + "react-dom": "^18.x || ^19.x" }, "repository": { "type": "git", diff --git a/packages/comet-extras/package.json b/packages/comet-extras/package.json index 4b3620da..413ad827 100644 --- a/packages/comet-extras/package.json +++ b/packages/comet-extras/package.json @@ -23,7 +23,8 @@ }, "peerDependencies": { "@tanstack/react-table": "8.20.5", - "react": "^19.0.0" + "react": "^18.x || ^19.x", + "react-dom": "^18.x || ^19.x" }, "repository": { "type": "git", diff --git a/packages/comet-uswds/package.json b/packages/comet-uswds/package.json index 79698ec4..bb632917 100644 --- a/packages/comet-uswds/package.json +++ b/packages/comet-uswds/package.json @@ -25,7 +25,8 @@ }, "peerDependencies": { "@uswds/uswds": "3.10.0", - "react": "^19.0.0" + "react": "^18.x || ^19.x", + "react-dom": "^18.x || ^19.x" }, "repository": { "type": "git", From 47413555e6322899e5803bc703f926a675df0c1f Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Tue, 17 Dec 2024 22:01:29 -0500 Subject: [PATCH 5/6] Update dependabot ignores. --- .github/dependabot.yml | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 139dafe7..9f21571b 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -22,19 +22,16 @@ updates: ignore: - dependency-name: react versions: - - '>=18.2.0' + - '>=19.0.0' - dependency-name: react-dom versions: - - '>=18.2.0' + - '>=19.0.0' - dependency-name: '@types/node' versions: - '>=18.19.50' - dependency-name: '@types/react' versions: - - '>=18.2.0' - - dependency-name: '@types/react-dom' - versions: - - '>=18.2.0' + - '>=19.0.1' - dependency-name: '@rollup/plugin-typescript' versions: - '>=12.0.0' @@ -67,10 +64,10 @@ updates: ignore: - dependency-name: react versions: - - '>=18.2.0' + - '>=19.0.0' - dependency-name: react-dom versions: - - '>=18.2.0' + - '>=19.0.0' - dependency-name: 'victory' - package-ecosystem: 'npm' directory: '/packages/comet-extras' @@ -82,10 +79,10 @@ updates: ignore: - dependency-name: react versions: - - '>=18.2.0' + - '>=19.0.0' - dependency-name: react-dom versions: - - '>=18.2.0' + - '>=19.0.0' - dependency-name: '@tanstack/react-table' - package-ecosystem: 'npm' directory: '/packages/comet-uswds' @@ -97,8 +94,8 @@ updates: ignore: - dependency-name: react versions: - - '>=18.2.0' + - '>=19.0.0' - dependency-name: react-dom versions: - - '>=18.2.0' + - '>=19.0.0' - dependency-name: '@uswds/uswds' From f6227cbe1a8ad1634ae991767550dfcf62601caa Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Wed, 18 Dec 2024 12:13:29 -0500 Subject: [PATCH 6/6] Skip lib check due to mono-repo and multiple node_modules --- packages/comet-cli/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/comet-cli/tsconfig.json b/packages/comet-cli/tsconfig.json index 8adc7f50..3fe64e11 100644 --- a/packages/comet-cli/tsconfig.json +++ b/packages/comet-cli/tsconfig.json @@ -3,6 +3,7 @@ "rootDir": "src", "outDir": "dist", "strict": true, + "skipLibCheck": true, "target": "es6", "module": "commonjs", "sourceMap": true,