Feat: React 19 Upgrade

docs/app/components/Header/HeaderSidePanel.tsx

@@ -10,7 +10,6 @@ import { MenuDocs } from '../Menu/MenuDocs'
 
 import { NavigationSchema } from '../../../scripts/docs/navigation'
 import { SiteThemePicker } from '../Site/SiteThemePicker'
-import { forwardRef } from 'react'
 import {
   mainNavigation,
   mobileDialogHeader,
@@ -26,80 +25,82 @@ interface HeaderSidePanelProps {
   isOpen: boolean
   submenu?: NavigationSchema
   onNavigationClick?: () => void
+  ref?: React.RefObject<HTMLDivElement | null>
 }
 
-export const HeaderSidePanel = forwardRef<HTMLDivElement, HeaderSidePanelProps>(
-  ({ isOpen, submenu, onNavigationClick }, ref) => {
-    const location = useLocation()
+export const HeaderSidePanel = ({
+  isOpen,
+  submenu,
+  onNavigationClick,
+  ref,
+}: HeaderSidePanelProps) => {
+  const location = useLocation()
 
-    const isDocs = location.pathname.includes('/docs')
+  const isDocs = location.pathname.includes('/docs')
 
-    const transitions = useTransition(isOpen, {
-      from: {
-        x: '100%',
-        opacity: 0,
-      },
-      enter: {
-        x: '0',
-        opacity: 1,
-      },
-      leave: {
-        x: '100%',
-        opacity: 0,
-      },
-      config: {
-        tension: 210,
-        friction: 30,
-        mass: 1,
-      },
-    })
+  const transitions = useTransition(isOpen, {
+    from: {
+      x: '100%',
+      opacity: 0,
+    },
+    enter: {
+      x: '0',
+      opacity: 1,
+    },
+    leave: {
+      x: '100%',
+      opacity: 0,
+    },
+    config: {
+      tension: 210,
+      friction: 30,
+      mass: 1,
+    },
+  })
 
-    const handleNavClick = () => {
-      if (onNavigationClick) {
-        onNavigationClick()
-      }
+  const handleNavClick = () => {
+    if (onNavigationClick) {
+      onNavigationClick()
     }
-
-    return transitions(({ opacity, x }, item) =>
-      item ? (
-        <>
-          <Dialog.Overlay forceMount asChild>
-            <animated.div className={mobileMenuOverlay} style={{ opacity }} />
-          </Dialog.Overlay>
-          {/* @ts-ignore */}
-          <Dialog.Content trapFocus={false} forceMount asChild>
-            <animated.div className={mobileMenu} ref={ref} style={{ x }}>
-              <div>
-                <header className={mobileDialogHeader}>
-                  <Dialog.Close className={mobileMenuClose}>
-                    <X />
-                  </Dialog.Close>
-                  <Toolbar.Root className={mobileThemePicker}>
-                    <SiteThemePicker />
-                  </Toolbar.Root>
-                </header>
-                <Dialog.Title className={visuallyHidden}>
-                  Main Menu
-                </Dialog.Title>
-                <HeaderNavigation
-                  className={mainNavigation({ isDocsSection: isDocs })}
-                  showSubNav={false}
-                  showThemePicker={false}
-                  showLabels={!isDocs}
-                />
-              </div>
-              <MenuDocs submenu={submenu} onNavClick={handleNavClick} />
-              <Toolbar.Root
-                className={subNavContainer({
-                  isDocsSection: isDocs,
-                })}
-              >
-                <HeaderSubNavigation showLabels={!isDocs} />
-              </Toolbar.Root>
-            </animated.div>
-          </Dialog.Content>
-        </>
-      ) : null
-    )
   }
-)
+
+  return transitions(({ opacity, x }, item) =>
+    item ? (
+      <>
+        <Dialog.Overlay forceMount asChild>
+          <animated.div className={mobileMenuOverlay} style={{ opacity }} />
+        </Dialog.Overlay>
+        {/* @ts-ignore */}
+        <Dialog.Content trapFocus={false} forceMount asChild>
+          <animated.div className={mobileMenu} ref={ref} style={{ x }}>
+            <div>
+              <header className={mobileDialogHeader}>
+                <Dialog.Close className={mobileMenuClose}>
+                  <X />
+                </Dialog.Close>
+                <Toolbar.Root className={mobileThemePicker}>
+                  <SiteThemePicker />
+                </Toolbar.Root>
+              </header>
+              <Dialog.Title className={visuallyHidden}>Main Menu</Dialog.Title>
+              <HeaderNavigation
+                className={mainNavigation({ isDocsSection: isDocs })}
+                showSubNav={false}
+                showThemePicker={false}
+                showLabels={!isDocs}
+              />
+            </div>
+            <MenuDocs submenu={submenu} onNavClick={handleNavClick} />
+            <Toolbar.Root
+              className={subNavContainer({
+                isDocsSection: isDocs,
+              })}
+            >
+              <HeaderSubNavigation showLabels={!isDocs} />
+            </Toolbar.Root>
+          </animated.div>
+        </Dialog.Content>
+      </>
+    ) : null
+  )
+}

docs/app/components/Text/Copy.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { forwardRef, ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 import { copy } from './Copy.css'
 import * as FontSizes from '../../styles/fontStyles.css'
@@ -9,25 +9,21 @@ export interface CopyProps {
   className?: string
   children?: ReactNode
   tag?: keyof Pick<JSX.IntrinsicElements, 'p' | 'blockquote' | 'div' | 'label'>
+  ref?: React.RefObject<any>
 }
 
-export const Copy = forwardRef<
-  | HTMLHeadingElement
-  | HTMLQuoteElement
-  | HTMLDivElement
-  | HTMLLabelElement
-  | HTMLParagraphElement,
-  CopyProps
->(({ fontStyle = 'XS', className, children, tag = 'p' }, ref) => {
+export const Copy = ({
+  fontStyle = 'XS',
+  className,
+  children,
+  tag = 'p',
+  ref,
+}: CopyProps) => {
   const Element = tag
 
   return (
-    <Element
-      className={clsx(FontSizes[fontStyle], copy, className)}
-      // @ts-expect-error – TODO: fix this
-      ref={ref}
-    >
+    <Element className={clsx(FontSizes[fontStyle], copy, className)} ref={ref}>
       {children}
     </Element>
   )
-})
+}

docs/app/components/Text/Heading.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, forwardRef, ReactNode } from 'react'
+import { CSSProperties, ReactNode } from 'react'
 
 import { Link } from 'phosphor-react'
 
@@ -17,37 +17,34 @@ export interface HeadingProps {
   isLink?: boolean
   weight?: keyof FontSizes.FontWeights
   style?: CSSProperties
+  ref?: React.RefObject<any>
 }
 
-export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  (
-    {
-      tag = 'h1',
-      fontStyle = 'S',
-      weight = 'default',
-      className,
-      children,
-      isLink = false,
-      ...restProps
-    },
-    ref
-  ) => {
-    const Element = tag
+export const Heading = ({
+  tag = 'h1',
+  fontStyle = 'S',
+  weight = 'default',
+  className,
+  children,
+  isLink = false,
+  ref,
+  ...restProps
+}: HeadingProps) => {
+  const Element = tag
 
-    return (
-      <Element
-        className={clsx(
-          FontSizes[fontStyle],
-          FontSizes.WEIGHTS[weight],
-          heading,
-          className
-        )}
-        ref={ref}
-        {...restProps}
-      >
-        {children}
-        {isLink ? <Link className={linkIcon} size={16} /> : null}
-      </Element>
-    )
-  }
-)
+  return (
+    <Element
+      className={clsx(
+        FontSizes[fontStyle],
+        FontSizes.WEIGHTS[weight],
+        heading,
+        className
+      )}
+      ref={ref}
+      {...restProps}
+    >
+      {children}
+      {isLink ? <Link className={linkIcon} size={16} /> : null}
+    </Element>
+  )
+}

docs/app/components/Text/List.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { forwardRef, ReactNode } from 'react'
+import { ReactNode } from 'react'
 import * as FontSizes from '../../styles/fontStyles.css'
 import { descriptiveList, list } from './List.css'
 
@@ -8,23 +8,24 @@ export interface ListProps {
   fontStyle?: keyof FontSizes.FontSizes
   className?: string
   children?: ReactNode
+  ref?: React.RefObject<any>
 }
 
-export const List = forwardRef<HTMLUListElement | HTMLOListElement, ListProps>(
-  ({ tag = 'ul', fontStyle = 'XS', className, children }, ref) => {
-    const Element = tag
+export const List = ({
+  tag = 'ul',
+  fontStyle = 'XS',
+  className,
+  children,
+  ref,
+}: ListProps) => {
+  const Element = tag
 
-    return (
-      <Element
-        className={clsx(FontSizes[fontStyle], list, className)}
-        // @ts-expect-error - TODO: polymorphic refs, woo.
-        ref={ref}
-      >
-        {children}
-      </Element>
-    )
-  }
-)
+  return (
+    <Element className={clsx(FontSizes[fontStyle], list, className)} ref={ref}>
+      {children}
+    </Element>
+  )
+}
 
 interface DescriptiveListProps {
   data: [title: string, item: ReactNode][]

docs/package.json

@@ -32,6 +32,7 @@
     "@remix-run/serve": "2.15.2",
     "@remix-run/server-runtime": "2.15.2",
     "@supabase/supabase-js": "2.47.10",
+    "@use-gesture/react": "^10.3.1",
     "@vanilla-extract/css": "1.17.0",
     "@vanilla-extract/dynamic": "2.1.2",
     "@vanilla-extract/recipes": "0.5.5",
@@ -44,6 +45,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-select": "5.9.0",
+    "react-use-measure": "^2.1.1",
     "zod": "3.24.1"
   },
   "devDependencies": {

package.json

@@ -66,7 +66,7 @@
     "@changesets/cli": "2.27.11",
     "@commitlint/cli": "19.6.1",
     "@commitlint/config-conventional": "19.6.0",
-    "@react-three/fiber": "8.17.10",
+    "@react-three/fiber": "^9.1.0",
     "@remix-run/dev": "2.15.2",
     "@simonsmith/cypress-image-snapshot": "9.1.0",
     "@swc/core": "1.10.4",
@@ -79,8 +79,8 @@
     "@types/jest": "29.5.14",
     "@types/lodash.clamp": "4.0.9",
     "@types/lodash.shuffle": "4.2.9",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@types/react-lazyload": "3.2.3",
     "@types/react-native": "0.73.0",
     "@types/styled-components": "5.1.34",
@@ -95,8 +95,8 @@
     "mock-raf": "npm:@react-spring/[email protected]",
     "prettier": "3.4.2",
     "pretty-quick": "4.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-konva": "18.2.10",
     "react-native": "0.76.5",
     "react-zdog": "1.2.2",