chore(deps): update react monorepo to v19 (major) (#1505)

* chore(deps): update react monorepo to v19 * chore: testing * fix: ts * chore: update peerDependencies * fix: ts * fix: r18 compat --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Robb Niznik <[email protected]>
launchdarkly · Dec 9, 2024 · 9138f02 · 9138f02
1 parent 7cf0a91
commit 9138f02
Show file tree

Hide file tree

Showing 87 changed files with 1,396 additions and 1,333 deletions.
diff --git a/.storybook/utils.tsx b/.storybook/utils.tsx
@@ -1,5 +1,7 @@
 import type { Args, Decorator, ReactRenderer } from '@storybook/react';
 import type { AnnotatedStoryFn, StoryContext } from '@storybook/types';
+import type { JSX } from 'react';
+
 import merge from 'deepmerge';
 import { Fragment } from 'react';
 

diff --git a/package.json b/package.json
@@ -56,15 +56,15 @@
 		"@storybook/types": "^8.4.0",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/jest-dom": "^6.6.2",
-		"@testing-library/react": "^16.0.0",
+		"@testing-library/react": "^16.1.0",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/css-modules": "^1.0.5",
 		"@types/node": "^22.10.1",
-		"@types/react": "^18.3.1",
-		"@types/react-dom": "^18.3.0",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.1",
 		"@vanilla-extract/css": "^1.16.0",
 		"@vanilla-extract/vite-plugin": "^4.0.2",
-		"@vitejs/plugin-react-swc": "^3.7.0",
+		"@vitejs/plugin-react-swc": "^3.7.2",
 		"@vitest/coverage-v8": "^2.1.1",
 		"@vitest/ui": "^2.1.1",
 		"browserslist": "^4.24.0",
@@ -76,8 +76,8 @@
 		"lint-staged": "^15.2.0",
 		"nx": "20.0.7",
 		"plop": "^4.0.0",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"react-router-dom": "6.16.0",
 		"rollup-plugin-pure": "^0.2.1",
 		"storybook": "^8.4.0",
@@ -94,9 +94,9 @@
 		},
 		"peerDependencyRules": {
 			"allowedVersions": {
-				"react": "18",
+				"react": "19",
 				"rollup": "4",
-				"vite": "5"
+				"vite": "6"
 			}
 		}
 	},

diff --git a/packages/alert/package.json b/packages/alert/package.json
@@ -39,11 +39,11 @@
 		"classix": "2.2.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/avatar/package.json b/packages/avatar/package.json
@@ -37,11 +37,11 @@
 		"classix": "2.2.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/banner/package.json b/packages/banner/package.json
@@ -38,11 +38,11 @@
 		"classix": "2.2.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/box/package.json b/packages/box/package.json
@@ -42,12 +42,12 @@
 	},
 	"peerDependencies": {
 		"@vanilla-extract/css": "^1.14.0",
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
 		"flat": "^6.0.1",
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/button/package.json b/packages/button/package.json
@@ -38,11 +38,11 @@
 		"classix": "2.2.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx
@@ -2,6 +2,7 @@ import type { IconProps } from '@launchpad-ui/icons';
 import type {
 	ButtonHTMLAttributes,
 	ElementType,
+	JSX,
 	KeyboardEventHandler,
 	MouseEvent,
 	ReactElement,
@@ -95,7 +96,12 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
 
 	const renderChildren = () => {
 		if (asChild && isValidElement(children)) {
-			return cloneElement(children, undefined, getFinalChildren(children.props.children));
+			return cloneElement(
+				children,
+				undefined,
+				// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+				getFinalChildren((children as ReactElement<any>).props.children),
+			);
 		}
 
 		return getFinalChildren(children);

diff --git a/packages/card/package.json b/packages/card/package.json
@@ -37,11 +37,11 @@
 		"classix": "2.2.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/card/src/RadioCard.tsx b/packages/card/src/RadioCard.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { JSX, ReactNode } from 'react';
 
 import { Radio, type RadioProps } from '@launchpad-ui/form';
 import { cx } from 'classix';

diff --git a/packages/card/stories/RadioCard.stories.tsx b/packages/card/stories/RadioCard.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { RadioCard } from '../src/RadioCard';
 
@@ -7,7 +7,7 @@ export default {
 	title: 'Legacy/Deprecated/Card/RadioCard',
 	description: 'A radio button with a label and optional image and subtext.',
 	decorators: [
-		(Story: StoryFn) => (
+		(Story) => (
 			<div style={{ display: 'flex', width: '15rem' }}>
 				<Story />
 			</div>
@@ -19,7 +19,7 @@ export default {
 		},
 		chromatic: { disableSnapshot: true },
 	},
-};
+} as Meta<typeof RadioCard>;
 
 type Story = StoryObj<typeof RadioCard>;
 

diff --git a/packages/chip/package.json b/packages/chip/package.json
@@ -37,11 +37,11 @@
 		"classix": "2.2.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/clipboard/package.json b/packages/clipboard/package.json
@@ -40,11 +40,11 @@
 		"classix": "2.2.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/clipboard/src/CopyToClipboard.tsx b/packages/clipboard/src/CopyToClipboard.tsx
@@ -1,5 +1,5 @@
 import type { TooltipProps } from '@launchpad-ui/tooltip';
-import type { ComponentPropsWithoutRef, KeyboardEventHandler } from 'react';
+import type { ComponentPropsWithoutRef, JSX, KeyboardEventHandler } from 'react';
 
 import { Icon } from '@launchpad-ui/icons';
 import { Tooltip } from '@launchpad-ui/tooltip';

diff --git a/packages/clipboard/stories/CopyToClipboard.stories.tsx b/packages/clipboard/stories/CopyToClipboard.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import type { CopyToClipboardHandleRef } from '../src/CopyToClipboard';
 
 import { userEvent, within } from '@storybook/test';
@@ -29,7 +29,7 @@ export default {
 		},
 	},
 	decorators: [
-		(Story: StoryFn) => (
+		(Story) => (
 			<div
 				style={{
 					height: '100vh',
@@ -42,7 +42,7 @@ export default {
 			</div>
 		),
 	],
-};
+} as Meta<typeof CopyToClipboard>;
 
 type Story = StoryObj<typeof CopyToClipboard>;
 

diff --git a/packages/collapsible/package.json b/packages/collapsible/package.json
@@ -38,11 +38,11 @@
 		"classix": "2.2.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/columns/package.json b/packages/columns/package.json
@@ -37,11 +37,11 @@
 		"classix": "2.2.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	}
 }
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -48,12 +48,12 @@
 		"react-router-dom": "6.16.0"
 	},
 	"peerDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"react-stately": "3.34.0"
 	}
 }
diff --git a/packages/components/src/Toast.tsx b/packages/components/src/Toast.tsx
@@ -66,7 +66,8 @@ interface ToastValue extends IconVariants, ToastContent {}
 interface SnackbarContent {
 	title?: ReactNode;
 	description: ReactNode;
-	action?: ReactElement;
+	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	action?: ReactElement<any>;
 }
 
 interface SnackbarValue extends IconVariants, SnackbarContent {}

diff --git a/packages/components/stories/Button.stories.tsx b/packages/components/stories/Button.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, ReactRenderer, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
 import type { PlayFunction } from '@storybook/types';
 
 import { Icon } from '@launchpad-ui/icons';
@@ -17,7 +17,7 @@ const meta: Meta<typeof Button> = {
 		},
 	},
 	decorators: [
-		(Story: StoryFn) => (
+		(Story) => (
 			<div
 				style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '1rem' }}
 			>

diff --git a/packages/components/stories/Checkbox.stories.tsx b/packages/components/stories/Checkbox.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { vars } from '@launchpad-ui/vars';
 import { userEvent, within } from '@storybook/test';
@@ -15,7 +15,7 @@ const meta: Meta<typeof Checkbox> = {
 		chromatic: { pauseAnimationAtEnd: true },
 	},
 	decorators: [
-		(Story: StoryFn) => (
+		(Story) => (
 			<div style={{ width: vars.size[240] }}>
 				<Story />
 			</div>

diff --git a/packages/components/stories/ComboBox.stories.tsx b/packages/components/stories/ComboBox.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Icon } from '@launchpad-ui/icons';
 import { vars } from '@launchpad-ui/vars';
@@ -28,7 +28,7 @@ const meta: Meta<typeof ComboBox> = {
 		},
 	},
 	decorators: [
-		(Story: StoryFn) => (
+		(Story) => (
 			<div style={{ width: vars.size[240], height: vars.size[240] }}>
 				<Story />
 			</div>

diff --git a/packages/components/stories/DateField.stories.tsx b/packages/components/stories/DateField.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { vars } from '@launchpad-ui/vars';
 import { userEvent } from '@storybook/test';
@@ -16,7 +16,7 @@ const meta: Meta<typeof DateField> = {
 		},
 	},
 	decorators: [
-		(Story: StoryFn) => (
+		(Story) => (
 			<div style={{ width: vars.size[240] }}>
 				<Story />
 			</div>

diff --git a/packages/components/stories/DatePicker.stories.tsx b/packages/components/stories/DatePicker.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { parseDate } from '@internationalized/date';
 import { vars } from '@launchpad-ui/vars';
@@ -32,7 +32,7 @@ const meta: Meta<typeof DatePicker> = {
 		},
 	},
 	decorators: [
-		(Story: StoryFn) => (
+		(Story) => (
 			<div style={{ width: vars.size[320], height: vars.size[480] }}>
 				<div style={{ width: vars.size[240] }}>
 					<Story />