diff --git a/.changeset/small-lions-fold.md b/.changeset/small-lions-fold.md new file mode 100644 index 000000000000..e0458623d16e --- /dev/null +++ b/.changeset/small-lions-fold.md @@ -0,0 +1,6 @@ +--- +'braid-design-system': patch +'@braid-design-system/docs-ui': patch +--- + +Expand the peer dependency range to support React 19. diff --git a/.changeset/swift-planets-dream.md b/.changeset/swift-planets-dream.md new file mode 100644 index 000000000000..229a1fb95506 --- /dev/null +++ b/.changeset/swift-planets-dream.md @@ -0,0 +1,5 @@ +--- +'@braid-design-system/codemod': patch +--- + +Updating React dependencies to v19 diff --git a/README.md b/README.md index 5166360adef0..781b0834339f 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ If you're rendering within the context of another application, you may want to o If you'd like to customise the technical implementation of all `Link` and `TextLink` components from Braid, you can pass a custom component to the `linkComponent` prop on `BraidProvider`. For example, if you wanted to ensure that all relative links are [React Router](https://reacttraining.com/react-router/) links: ```tsx -import { Link as ReactRouterLink } from 'react-router-dom'; +import { Link as ReactRouterLink } from 'react-router'; import { BraidProvider, makeLinkComponent } from 'braid-design-system'; import wireframe from 'braid-design-system/themes/wireframe'; diff --git a/package.json b/package.json index b083845763ae..dd8551db6423 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "@octokit/rest": "^18.12.0", "@types/fs-extra": "^9.0.13", "@types/node": "^22.16.0", - "@types/react": "^18.3.18", + "@types/react": "^19.1.8", "@types/sanitize-html": "^2.13.0", "@types/webpack-env": "^1.18.8", "@vanilla-extract/vite-plugin": "^5.0.7", diff --git a/packages/braid-design-system/.storybook/decorators.tsx b/packages/braid-design-system/.storybook/decorators.tsx index 1e28a01d6d21..d890113be0b3 100644 --- a/packages/braid-design-system/.storybook/decorators.tsx +++ b/packages/braid-design-system/.storybook/decorators.tsx @@ -1,5 +1,5 @@ import type { Decorator } from '@storybook/react-webpack5'; -import { BrowserRouter } from 'react-router-dom'; +import { BrowserRouter } from 'react-router'; import { BraidProvider, ToastProvider } from '../src/lib/components'; import { PlayroomStateProvider } from '../src/lib/playroom/playroomState'; diff --git a/packages/braid-design-system/package.json b/packages/braid-design-system/package.json index 97b2ced80182..01ce96d97188 100644 --- a/packages/braid-design-system/package.json +++ b/packages/braid-design-system/package.json @@ -195,7 +195,6 @@ "lodash.curry": "^4.1.1", "polished": "^4.1.0", "react-focus-lock": "^2.9.7", - "react-is": "^18.2.0", "react-remove-scroll": "^2.7.0", "throttle-debounce": "^5.0.2", "utility-types": "^3.10.0" @@ -217,10 +216,8 @@ "@types/gradient-parser": "^0.1.5", "@types/lodash.curry": "^4.1.9", "@types/node": "^22.16.0", - "@types/react": "^18.3.18", - "@types/react-dom": "^18.3.0", - "@types/react-is": "^18.3.0", - "@types/react-router-dom": "^5.3.3", + "@types/react": "^19.1.8", + "@types/react-dom": "^19.1.6", "@types/sanitize-html": "^2.13.0", "@types/testing-library__jest-dom": "^5.9.1", "@types/throttle-debounce": "^5.0.2", @@ -234,9 +231,9 @@ "html-validate": "^9.7.1", "playroom": "0.44.0", "prettier": "^3.4.1", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-router-dom": "^6.3.0", + "react": "^19.1.0", + "react-dom": "^19.1.0", + "react-router": "^7.6.3", "sanitize-html": "^2.12.1", "sku": "14.8.0", "storybook": "9.0.15", @@ -244,7 +241,7 @@ "title-case": "^3.0.3" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "^18 || ^19", + "react-dom": "^18 || ^19" } } diff --git a/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx b/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx index 500389e00ff2..a210e4139252 100644 --- a/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx +++ b/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx @@ -62,7 +62,7 @@ const docs: ComponentDocs = { ), code: ` - import { Link as ReactRouterLink } from 'react-router-dom'; + import { Link as ReactRouterLink } from 'react-router'; import { BraidProvider, makeLinkComponent } from 'braid-design-system'; import wireframe from 'braid-design-system/themes/wireframe'; diff --git a/packages/braid-design-system/src/lib/components/Drawer/Drawer.docs.tsx b/packages/braid-design-system/src/lib/components/Drawer/Drawer.docs.tsx index 3123bfe51a09..087059def46c 100644 --- a/packages/braid-design-system/src/lib/components/Drawer/Drawer.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Drawer/Drawer.docs.tsx @@ -193,9 +193,11 @@ const docs: ComponentDocs = { description: ( There are a variety of standard widths to choose from. ), - Example: ({ setState, getState, toggleState }) => + Example: ({ setDefaultState, setState, getState, toggleState }) => source( <> + {setDefaultState('width', 'small')} +