Add support for React 19.x

.changeset/small-lions-fold.md

@@ -0,0 +1,7 @@
+---
+'braid-design-system': patch
+'@braid-design-system/codemod': patch
+'@braid-design-system/docs-ui': patch
+---
+
+Expand the peer dependency range to support React 19.

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';
 

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.5",
     "@vanilla-extract/vite-plugin": "^5.0.7",

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';

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"
@@ -216,10 +215,8 @@
     "@types/babel__core": "^7.20.1",
     "@types/lodash.curry": "^4.1.9",
     "@types/node": "^22.16.0",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^18.3.0",
-    "@types/react-is": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
     "@types/sanitize-html": "^2.13.0",
     "@types/testing-library__jest-dom": "^5.9.1",
     "@types/throttle-debounce": "^5.0.2",
@@ -233,17 +230,17 @@
     "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",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   }
 }

packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx

@@ -62,7 +62,7 @@ const docs: ComponentDocs = {
         </Fragment>
       ),
       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';
 

packages/braid-design-system/src/lib/components/Drawer/Drawer.docs.tsx

@@ -193,9 +193,11 @@ const docs: ComponentDocs = {
       description: (
         <Text>There are a variety of standard widths to choose from.</Text>
       ),
-      Example: ({ setState, getState, toggleState }) =>
+      Example: ({ setDefaultState, setState, getState, toggleState }) =>
         source(
           <>
+            {setDefaultState('width', 'small')}
+
             <Inline space="small">
               <Button
                 onClick={() => {

packages/braid-design-system/src/lib/utils/flattenChildren.ts

@@ -6,7 +6,8 @@ import {
   isValidElement,
   cloneElement,
 } from 'react';
-import { isFragment } from 'react-is';
+
+import { isFragment } from './isFragment';
 
 type ReactChild = ReactElement | string | number;
 

packages/braid-design-system/src/lib/utils/isFragment.ts

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react';
+
+const REACT_ELEMENT_TYPE = Symbol.for('react.transitional.element');
+const LEGACY_REACT_ELEMENT_TYPE = Symbol.for('react.element');
+const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+
+/**
+ * A subset of the logic from `react-is` that supports both React 18 and 19.
+ * We only use this to check for React fragments so only that code has been used.
+ * @see https://github.com/facebook/react/blob/main/packages/react-is/src/ReactIs.js#L40
+ *
+ * _Note: once we drop support for React 18 we should move back to using `react-is`_
+ */
+
+const isReactElementType = (value: any) => {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+  const $$typeof = value.$$typeof;
+  return (
+    $$typeof === REACT_ELEMENT_TYPE || $$typeof === LEGACY_REACT_ELEMENT_TYPE
+  );
+};
+
+export const isFragment = (value: any): value is ReactElement =>
+  isReactElementType(value) && value.type === REACT_FRAGMENT_TYPE;

packages/codemod/package.json

@@ -26,7 +26,7 @@
     "@types/babel__core": "^7.20.1",
     "@types/babel__traverse": "^7.20.1",
     "@types/cli-progress": "^3.11.0",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.1.8",
     "@types/workerpool": "^6.1.0",
     "babel-plugin-tester": "^11.0.4",
     "chalk": "^5.0.1",
@@ -35,9 +35,9 @@
     "dedent": "^1.5.3",
     "esbuild": "^0.21.5",
     "fast-glob": "^3.3.2",
-    "ink": "^5.2.0",
+    "ink": "^6.0.1",
     "prettier": "^3.4.1",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "recast": "^0.21.1",
     "workerpool": "^6.2.1"
   }

packages/docs-ui/package.json

@@ -36,12 +36,12 @@
     "@vanilla-extract/css": "^1.9.2"
   },
   "devDependencies": {
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.1.8",
     "braid-design-system": "workspace:*",
-    "react": "^18.3.1"
+    "react": "^19.1.0"
   },
   "peerDependencies": {
     "braid-design-system": "^33.0.0",
-    "react": "^18.2.0"
+    "react": "^19.1.0"
   }
 }