feat!: upgrade to react 19 (#672)

package.json

@@ -94,9 +94,9 @@
     "@testing-library/jest-dom": "5.17.0",
     "@types/chroma-js": "2.4.3",
     "@types/lodash-es": "4.17.12",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "@types/react-transition-group": "4.4.10",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
+    "@types/react-transition-group": "4.4.12",
     "@typescript-eslint/eslint-plugin": "6.14.0",
     "@typescript-eslint/parser": "6.14.0",
     "@vitejs/plugin-react": "4.3.2",
@@ -125,8 +125,8 @@
     "lint-staged": "15.2.0",
     "npm-run-all": "4.1.5",
     "prettier": "3.0.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-transition-group": "4.4.5",
     "rimraf": "5.0.5",
     "storybook": "8.3.5",
@@ -141,8 +141,8 @@
     "@emotion/styled": ">=11.11.0",
     "honorable": ">=1.0.0-beta.17",
     "honorable-theme-default": ">=1.0.0-beta.5",
-    "react": ">=18.3.1",
-    "react-dom": ">=18.3.1",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
     "react-transition-group": ">=4.4.5",
     "styled-components": ">=6.1.13"
   },

src/ThemeDecorator.tsx

@@ -1,8 +1,9 @@
-import { type ComponentType, useEffect } from 'react'
+import { type ComponentType, type FC, useEffect } from 'react'
 import {
   CssBaseline,
   Div,
   ThemeProvider as HonorableThemeProvider,
+  type ThemeProviderProps,
 } from 'honorable'
 import { ThemeProvider as StyledThemeProvider } from 'styled-components'
 
@@ -16,6 +17,11 @@ import {
 } from './theme'
 import StyledCss from './GlobalStyle'
 
+// workarounds for broken type from honorable
+const TypedHonorableThemeProvider =
+  HonorableThemeProvider as FC<ThemeProviderProps>
+const TypedCssBaseline = CssBaseline as any
+
 function ThemeDecorator(Story: ComponentType, context: any) {
   const colorMode = useThemeColorMode()
 
@@ -28,15 +34,15 @@ function ThemeDecorator(Story: ComponentType, context: any) {
   const styledTheme = colorMode === 'light' ? styledThemeLight : styledThemeDark
 
   return (
-    <HonorableThemeProvider theme={honorableTheme}>
+    <TypedHonorableThemeProvider theme={honorableTheme}>
       <StyledThemeProvider theme={styledTheme}>
-        <CssBaseline />
+        <TypedCssBaseline />
         <StyledCss />
         <Div padding="xlarge">
           <Story />
         </Div>
       </StyledThemeProvider>
-    </HonorableThemeProvider>
+    </TypedHonorableThemeProvider>
   )
 }
 

src/components/Accordion.tsx

@@ -3,8 +3,6 @@ import {
   type ComponentProps,
   type ReactElement,
   type ReactNode,
-  type Ref,
-  forwardRef,
   useId,
 } from 'react'
 
@@ -22,21 +20,17 @@ import Card from './Card'
 export type AccordionProps = ComponentProps<typeof RadixAccordion.Root> &
   ComponentProps<typeof Card>
 
-function AccordionRef(
-  {
-    children,
-    ...props
-  }: {
-    children?:
-      | ReactElement<typeof AccordionItem>
-      | ReactElement<typeof AccordionItem>[]
-    collapsible?: boolean
-  } & AccordionProps,
-  ref: Ref<HTMLDivElement>
-) {
+function Accordion({
+  children,
+  ...props
+}: {
+  children?:
+    | ReactElement<typeof AccordionItem>
+    | ReactElement<typeof AccordionItem>[]
+  collapsible?: boolean
+} & AccordionProps) {
   return (
     <RadixAccordion.Root
-      ref={ref}
       asChild
       collapsible={props.collapsible ?? true}
       {...props}
@@ -46,34 +40,28 @@ function AccordionRef(
   )
 }
 
-function AccordionItemRef(
-  {
-    value,
-    padding = 'relaxed',
-    paddingArea = 'all',
-    caret = 'right',
-    trigger,
-    children,
-    ...props
-  }: {
-    value?: string
-    padding?: 'none' | 'compact' | 'relaxed'
-    paddingArea?: 'trigger-only' | 'all'
-    caret?: 'none' | 'left' | 'right'
-    trigger: ReactNode
-    children: ReactNode
-  } & Omit<ComponentProps<typeof RadixAccordion.Item>, 'value'>,
-  ref: Ref<HTMLDivElement>
-) {
+function AccordionItem({
+  value,
+  padding = 'relaxed',
+  paddingArea = 'all',
+  caret = 'right',
+  trigger,
+  children,
+  ...props
+}: {
+  value?: string
+  padding?: 'none' | 'compact' | 'relaxed'
+  paddingArea?: 'trigger-only' | 'all'
+  caret?: 'none' | 'left' | 'right'
+  trigger: ReactNode
+  children: ReactNode
+} & Omit<ComponentProps<typeof RadixAccordion.Item>, 'value'>) {
   const theme = useTheme()
   const paddingSize = getPaddingSize(theme, padding)
-  // if value is not provided, use a random persisted id
   const defaultValue = useId()
 
   return (
     <ItemSC
-      // @ts-ignore, this is the sorta thing React 19 will be nice for
-      ref={ref}
       value={value ?? defaultValue}
       {...props}
     >
@@ -208,8 +196,5 @@ const ContentSC = styled(RadixAccordion.Content)`
   }
 `
 
-const Accordion = forwardRef(AccordionRef)
-const AccordionItem = forwardRef(AccordionItemRef)
-
 export default Accordion
 export { AccordionItem }

src/components/AppIcon.tsx

@@ -1,10 +1,4 @@
-import {
-  type ComponentProps,
-  type ReactElement,
-  type Ref,
-  cloneElement,
-  forwardRef,
-} from 'react'
+import { type ComponentProps, type ReactElement, cloneElement } from 'react'
 import { last } from 'lodash-es'
 
 import styled, { type DefaultTheme, useTheme } from 'styled-components'
@@ -36,7 +30,7 @@ type AppIconProps = {
   hue?: AppIconHue
   clickable?: boolean
   url?: string
-  icon?: ReactElement
+  icon?: ReactElement<any>
   alt?: string
   name?: string
   initials?: string
@@ -151,22 +145,19 @@ const ImgSC = styled.img<{
   objectFit: 'cover',
 }))
 
-function AppIconRef(
-  {
-    size = 'medium',
-    spacing = 'padding',
-    hue,
-    clickable = false,
-    url,
-    icon = null,
-    alt,
-    name,
-    initials,
-    onClose,
-    ...props
-  }: AppIconProps & ComponentProps<typeof AppIconSC>,
-  ref: Ref<any>
-) {
+function AppIcon({
+  size = 'medium',
+  spacing = 'padding',
+  hue,
+  clickable = false,
+  url,
+  icon = null,
+  alt,
+  name,
+  initials,
+  onClose,
+  ...props
+}: AppIconProps & ComponentProps<typeof AppIconSC>) {
   const theme = useTheme()
   const parentFillLevel = useFillLevel()
 
@@ -198,7 +189,6 @@ function AppIconRef(
     >
       {url ? (
         <ImgSC
-          ref={ref}
           src={url}
           alt={alt}
           $iconWidth={iconWidth}
@@ -214,7 +204,5 @@ function AppIconRef(
   )
 }
 
-const AppIcon = forwardRef(AppIconRef)
-
 export default AppIcon
 export type { AppIconProps }

src/components/AppList.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import {
   type Dispatch,
+  type JSX,
   type ReactNode,
   createRef,
   useCallback,

src/components/Banner.tsx

@@ -1,5 +1,5 @@
 import { Div, Flex, type FlexProps, Span, type SpanProps } from 'honorable'
-import { type ReactNode, type Ref, forwardRef } from 'react'
+import { type ReactNode } from 'react'
 import styled from 'styled-components'
 
 import { type ColorKey, type SeverityExt, sanitizeSeverity } from '../types'
@@ -114,19 +114,16 @@ const CloseButton = styled(IconFrame)(({ theme }) => ({
   marginLeft: theme.spacing.medium,
 }))
 
-function BannerRef(
-  {
-    heading,
-    action,
-    actionProps,
-    children,
-    severity = 'success',
-    fullWidth = false,
-    onClose,
-    ...props
-  }: BannerProps,
-  ref: Ref<any>
-) {
+function Banner({
+  heading,
+  action,
+  actionProps,
+  children,
+  severity = 'success',
+  fullWidth = false,
+  onClose,
+  ...props
+}: BannerProps) {
   const finalSeverity = sanitizeSeverity(severity, {
     allowList: BANNER_SEVERITIES,
     default: DEFAULT_SEVERITY,
@@ -138,7 +135,6 @@ function BannerRef(
 
   const content = (
     <BannerOuter
-      ref={ref}
       $borderColorKey={borderColorKey}
       $fullWidth={fullWidth}
       as={Flex}
@@ -177,6 +173,4 @@ function BannerRef(
   return <FillLevelProvider value={3}>{content}</FillLevelProvider>
 }
 
-const Banner = forwardRef(BannerRef)
-
 export default Banner