From 5e14475b590bcd2022af6771ff4256870d092e11 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Tue, 3 Dec 2024 16:19:48 -0500 Subject: [PATCH 1/2] chore: update React Router to v7 --- .changeset/great-mugs-invent.md | 6 ++ .changeset/shy-suns-lie.md | 5 ++ .storybook/preview.tsx | 2 +- package.json | 2 +- .../components/__tests__/Breadcrumbs.spec.tsx | 2 +- packages/components/__tests__/Link.spec.tsx | 2 +- .../components/__tests__/LinkButton.spec.tsx | 2 +- .../__tests__/LinkIconButton.spec.tsx | 2 +- packages/components/global.d.ts | 2 +- packages/components/package.json | 2 +- packages/components/src/utils.tsx | 4 +- packages/components/stories/Tabs.stories.tsx | 2 +- .../navigation/__tests__/Navigation.spec.tsx | 2 +- packages/navigation/package.json | 2 +- packages/navigation/src/NavItem.tsx | 2 +- .../navigation/src/NavigationMenuDropdown.tsx | 2 +- pnpm-lock.yaml | 82 +++++++++++-------- renovate.json | 2 +- 18 files changed, 73 insertions(+), 52 deletions(-) create mode 100644 .changeset/great-mugs-invent.md create mode 100644 .changeset/shy-suns-lie.md diff --git a/.changeset/great-mugs-invent.md b/.changeset/great-mugs-invent.md new file mode 100644 index 000000000..90c68e79b --- /dev/null +++ b/.changeset/great-mugs-invent.md @@ -0,0 +1,6 @@ +--- +"@launchpad-ui/navigation": patch +"@launchpad-ui/core": patch +--- + +Update React Router to v7 diff --git a/.changeset/shy-suns-lie.md b/.changeset/shy-suns-lie.md new file mode 100644 index 000000000..6fa7d31ef --- /dev/null +++ b/.changeset/shy-suns-lie.md @@ -0,0 +1,5 @@ +--- +"@launchpad-ui/components": patch +--- + +Update React Router to v7 diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index d957b00ac..1e9926668 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -7,7 +7,7 @@ import { RouterProvider as AriaRouterProvider, useHref } from '@launchpad-ui/com import sprite from '@launchpad-ui/icons/img/sprite.svg'; import { withThemeByDataAttribute } from '@storybook/addon-themes'; import { themes } from '@storybook/theming'; -import { BrowserRouter, useNavigate } from 'react-router-dom'; +import { BrowserRouter, useNavigate } from 'react-router'; import custom from './custom.svg'; import { allModes } from './modes'; diff --git a/package.json b/package.json index 102401e12..2c0aa6caf 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "plop": "^4.0.0", "react": "18.3.1", "react-dom": "18.3.1", - "react-router-dom": "6.16.0", + "react-router": "7.0.1", "rollup-plugin-pure": "^0.2.1", "storybook": "^8.4.0", "storybook-addon-pseudo-states": "^4.0.0", diff --git a/packages/components/__tests__/Breadcrumbs.spec.tsx b/packages/components/__tests__/Breadcrumbs.spec.tsx index 341274182..9814188d5 100644 --- a/packages/components/__tests__/Breadcrumbs.spec.tsx +++ b/packages/components/__tests__/Breadcrumbs.spec.tsx @@ -1,4 +1,4 @@ -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router'; import { describe, expect, it } from 'vitest'; import { render, screen } from '../../../test/utils'; diff --git a/packages/components/__tests__/Link.spec.tsx b/packages/components/__tests__/Link.spec.tsx index 43dbfbcec..a5f47e8ee 100644 --- a/packages/components/__tests__/Link.spec.tsx +++ b/packages/components/__tests__/Link.spec.tsx @@ -1,4 +1,4 @@ -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router'; import { describe, expect, it, vi } from 'vitest'; import { render, screen } from '../../../test/utils'; diff --git a/packages/components/__tests__/LinkButton.spec.tsx b/packages/components/__tests__/LinkButton.spec.tsx index aa137fde1..b3e37b26e 100644 --- a/packages/components/__tests__/LinkButton.spec.tsx +++ b/packages/components/__tests__/LinkButton.spec.tsx @@ -1,5 +1,5 @@ import { RouterProvider } from 'react-aria-components'; -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router'; import { describe, expect, it, vi } from 'vitest'; import { render, screen, userEvent } from '../../../test/utils'; diff --git a/packages/components/__tests__/LinkIconButton.spec.tsx b/packages/components/__tests__/LinkIconButton.spec.tsx index 1a3095718..92edb1871 100644 --- a/packages/components/__tests__/LinkIconButton.spec.tsx +++ b/packages/components/__tests__/LinkIconButton.spec.tsx @@ -1,4 +1,4 @@ -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router'; import { describe, expect, it } from 'vitest'; import { render, screen } from '../../../test/utils'; diff --git a/packages/components/global.d.ts b/packages/components/global.d.ts index 55770d105..1f6cf06f7 100644 --- a/packages/components/global.d.ts +++ b/packages/components/global.d.ts @@ -1,4 +1,4 @@ -import type { NavigateOptions, To } from 'react-router-dom'; +import type { NavigateOptions, To } from 'react-router'; declare module 'react-aria-components' { interface RouterConfig { diff --git a/packages/components/package.json b/packages/components/package.json index 3576edde4..00b28a004 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -45,7 +45,7 @@ "class-variance-authority": "0.7.0", "react-aria": "3.36.0", "react-aria-components": "1.5.0", - "react-router-dom": "6.16.0" + "react-router": "7.0.1" }, "peerDependencies": { "react": "18.3.1", diff --git a/packages/components/src/utils.tsx b/packages/components/src/utils.tsx index d62f80500..deb412655 100644 --- a/packages/components/src/utils.tsx +++ b/packages/components/src/utils.tsx @@ -1,7 +1,7 @@ import type { Href } from '@react-types/shared'; import { useEffect, useState } from 'react'; -import { useHref as useRouterHref } from 'react-router-dom'; +import { useHref as useRouterHref } from 'react-router'; const useMedia = (media: string) => { const [isActive, setIsActive] = useState(false); @@ -30,7 +30,7 @@ const useMedia = (media: string) => { const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i; -// https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/index.tsx#L957-L962 +// https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/dom/lib.tsx#L577-L585 const useHref = (href: Href) => { let absoluteHref: string | undefined; if (typeof href === 'string' && ABSOLUTE_URL_REGEX.test(href)) { diff --git a/packages/components/stories/Tabs.stories.tsx b/packages/components/stories/Tabs.stories.tsx index 358de6234..f8d53b350 100644 --- a/packages/components/stories/Tabs.stories.tsx +++ b/packages/components/stories/Tabs.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Tab, TabList, TabPanel, Tabs } from '../src'; import { userEvent, within } from '@storybook/test'; -import { Route, Routes, useLocation } from 'react-router-dom'; +import { Route, Routes, useLocation } from 'react-router'; const meta: Meta = { component: Tabs, diff --git a/packages/navigation/__tests__/Navigation.spec.tsx b/packages/navigation/__tests__/Navigation.spec.tsx index fe21a3063..93a4aa6a3 100644 --- a/packages/navigation/__tests__/Navigation.spec.tsx +++ b/packages/navigation/__tests__/Navigation.spec.tsx @@ -1,6 +1,6 @@ import type { NavigationItemProps } from '../src'; -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router'; import { describe, expect, it, vi } from 'vitest'; import { render, screen, userEvent, waitFor } from '../../../test/utils'; diff --git a/packages/navigation/package.json b/packages/navigation/package.json index 2847efd76..64fd3ce3d 100644 --- a/packages/navigation/package.json +++ b/packages/navigation/package.json @@ -43,7 +43,7 @@ "@react-stately/list": "3.11.1", "@react-types/shared": "3.26.0", "classix": "2.2.0", - "react-router-dom": "6.16.0" + "react-router": "7.0.1" }, "peerDependencies": { "react": "18.3.1", diff --git a/packages/navigation/src/NavItem.tsx b/packages/navigation/src/NavItem.tsx index b1096da85..ac9bccbb6 100644 --- a/packages/navigation/src/NavItem.tsx +++ b/packages/navigation/src/NavItem.tsx @@ -3,7 +3,7 @@ import type { MouseEvent } from 'react'; import { Chip } from '@launchpad-ui/chip'; import { cx } from 'classix'; -import { NavLink, useLocation } from 'react-router-dom'; +import { NavLink, useLocation } from 'react-router'; import styles from './styles/Navigation.module.css'; import { titlecase } from './utils'; diff --git a/packages/navigation/src/NavigationMenuDropdown.tsx b/packages/navigation/src/NavigationMenuDropdown.tsx index 9db59afc8..5d998f027 100644 --- a/packages/navigation/src/NavigationMenuDropdown.tsx +++ b/packages/navigation/src/NavigationMenuDropdown.tsx @@ -7,7 +7,7 @@ import { Icon } from '@launchpad-ui/icons'; import { Menu, MenuItem } from '@launchpad-ui/menu'; import { useListState } from '@react-stately/list'; import { useEffect, useRef, useState } from 'react'; -import { NavLink, useLocation } from 'react-router-dom'; +import { NavLink, useLocation } from 'react-router'; import styles from './styles/Navigation.module.css'; import { titlecase } from './utils'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f38035460..23cc1d998 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -106,7 +106,7 @@ importers: version: 3.7.1(@swc/helpers@0.5.13)(vite@6.0.2(@types/node@22.10.1)(jiti@1.21.6)(less@4.2.0)(lightningcss@1.28.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.0)) '@vitest/coverage-v8': specifier: ^2.1.1 - version: 2.1.4(vitest@2.1.4) + version: 2.1.4(vitest@2.1.4(@types/node@22.10.1)(@vitest/ui@2.1.4)(jiti@1.21.6)(jsdom@25.0.1)(less@4.2.0)(lightningcss@1.28.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.0)) '@vitest/ui': specifier: ^2.1.1 version: 2.1.4(vitest@2.1.4) @@ -143,9 +143,9 @@ importers: react-dom: specifier: 18.3.1 version: 18.3.1(react@18.3.1) - react-router-dom: - specifier: 6.16.0 - version: 6.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-router: + specifier: 7.0.1 + version: 7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rollup-plugin-pure: specifier: ^0.2.1 version: 0.2.1(rollup@4.24.3) @@ -463,9 +463,9 @@ importers: react-aria-components: specifier: 1.5.0 version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react-router-dom: - specifier: 6.16.0 - version: 6.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-router: + specifier: 7.0.1 + version: 7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: react: specifier: 18.3.1 @@ -981,9 +981,9 @@ importers: classix: specifier: 2.2.0 version: 2.2.0 - react-router-dom: - specifier: 6.16.0 - version: 6.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-router: + specifier: 7.0.1 + version: 7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: react: specifier: 18.3.1 @@ -2709,10 +2709,6 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - '@remix-run/router@1.9.0': - resolution: {integrity: sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==} - engines: {node: '>=14.0.0'} - '@rollup/pluginutils@5.1.3': resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==} engines: {node: '>=14.0.0'} @@ -3142,6 +3138,9 @@ packages: '@types/conventional-commits-parser@5.0.0': resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==} + '@types/cookie@0.6.0': + resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} + '@types/css-modules@1.0.5': resolution: {integrity: sha512-oeKafs/df9lwOvtfiXVliZsocFVOexK9PZtLQWuPeuVCFR7jwiqlg60lu80JTe5NFNtH3tnV6Fs/ySR8BUPHAw==} @@ -3651,6 +3650,10 @@ packages: convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + cookie@1.0.2: + resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==} + engines: {node: '>=18'} + copy-anything@2.0.6: resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==} @@ -5475,18 +5478,15 @@ packages: react-property@2.0.2: resolution: {integrity: sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==} - react-router-dom@6.16.0: - resolution: {integrity: sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==} - engines: {node: '>=14.0.0'} - peerDependencies: - react: '>=16.8' - react-dom: '>=16.8' - - react-router@6.16.0: - resolution: {integrity: sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==} - engines: {node: '>=14.0.0'} + react-router@7.0.1: + resolution: {integrity: sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==} + engines: {node: '>=20.0.0'} peerDependencies: - react: '>=16.8' + react: '>=18' + react-dom: '>=18' + peerDependenciesMeta: + react-dom: + optional: true react-stately@3.34.0: resolution: {integrity: sha512-0N9tZ8qQ/CxpJH7ao0O6gr+8955e7VrOskg9N+TIxkFknPetwOCtgppMYhnTfteBV8WfM/vv4OC1NbkgYTqXJA==} @@ -5662,6 +5662,9 @@ packages: sentence-case@3.0.4: resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==} + set-cookie-parser@2.7.1: + resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==} + set-function-length@1.2.2: resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==} engines: {node: '>= 0.4'} @@ -5986,6 +5989,9 @@ packages: engines: {node: '>=18.0.0'} hasBin: true + turbo-stream@2.4.0: + resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==} + type-fest@0.21.3: resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==} engines: {node: '>=10'} @@ -8214,8 +8220,6 @@ snapshots: '@react-types/shared': 3.26.0(react@18.3.1) react: 18.3.1 - '@remix-run/router@1.9.0': {} - '@rollup/pluginutils@5.1.3(rollup@4.24.3)': dependencies: '@types/estree': 1.0.6 @@ -8662,6 +8666,8 @@ snapshots: dependencies: '@types/node': 22.10.1 + '@types/cookie@0.6.0': {} + '@types/css-modules@1.0.5': {} '@types/doctrine@0.0.9': {} @@ -8814,7 +8820,7 @@ snapshots: transitivePeerDependencies: - '@swc/helpers' - '@vitest/coverage-v8@2.1.4(vitest@2.1.4)': + '@vitest/coverage-v8@2.1.4(vitest@2.1.4(@types/node@22.10.1)(@vitest/ui@2.1.4)(jiti@1.21.6)(jsdom@25.0.1)(less@4.2.0)(lightningcss@1.28.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.0))': dependencies: '@ampproject/remapping': 2.3.0 '@bcoe/v8-coverage': 0.2.3 @@ -9271,6 +9277,8 @@ snapshots: convert-source-map@2.0.0: {} + cookie@1.0.2: {} + copy-anything@2.0.6: dependencies: is-what: 3.14.1 @@ -11290,17 +11298,15 @@ snapshots: react-property@2.0.2: {} - react-router-dom@6.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + react-router@7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@remix-run/router': 1.9.0 + '@types/cookie': 0.6.0 + cookie: 1.0.2 react: 18.3.1 + set-cookie-parser: 2.7.1 + turbo-stream: 2.4.0 + optionalDependencies: react-dom: 18.3.1(react@18.3.1) - react-router: 6.16.0(react@18.3.1) - - react-router@6.16.0(react@18.3.1): - dependencies: - '@remix-run/router': 1.9.0 - react: 18.3.1 react-stately@3.34.0(react@18.3.1): dependencies: @@ -11521,6 +11527,8 @@ snapshots: tslib: 2.8.1 upper-case-first: 2.0.2 + set-cookie-parser@2.7.1: {} + set-function-length@1.2.2: dependencies: define-data-property: 1.1.4 @@ -11862,6 +11870,8 @@ snapshots: optionalDependencies: fsevents: 2.3.3 + turbo-stream@2.4.0: {} + type-fest@0.21.3: {} type-fest@2.19.0: {} diff --git a/renovate.json b/renovate.json index 07ecd7916..39918f139 100644 --- a/renovate.json +++ b/renovate.json @@ -23,5 +23,5 @@ } ], "rangeStrategy": "bump", - "ignoreDeps": ["react-router-dom", "@biomejs/biome", "nx"] + "ignoreDeps": ["react-router", "@biomejs/biome", "nx"] } From dfd238ff4ad66f3ad71b6b44239ad1b2068fb33c Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Tue, 3 Dec 2024 16:25:37 -0500 Subject: [PATCH 2/2] fix: ts --- .storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 10e3b4151..63b94c808 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -45,7 +45,7 @@ const config: StorybookConfig = { shouldRemoveUndefinedFromOptional: true, propFilter: (prop) => prop.parent - ? !/launchpad-ui\/node_modules\/.pnpm\/(?!react-aria-components|react-aria|react-stately|@react-types|@react-aria|@react-stately|react-router-dom|class-variance-authority|@internationalized)/.test( + ? !/launchpad-ui\/node_modules\/.pnpm\/(?!react-aria-components|react-aria|react-stately|@react-types|@react-aria|@react-stately|react-router|class-variance-authority|@internationalized)/.test( prop.parent.fileName, ) : true,