chore(react): migrate to react 19 rc

examples/next-advanced/package.json

@@ -19,8 +19,8 @@
     "@emotion/styled": "11.11.5",
     "@ultraviolet/ui": "workspace:*",
     "next": "14.2.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515",
     "react-schemaorg": "2.0.0",
     "react-syntax-highlighter": "15.5.0",
     "react-use-clipboard": "1.0.9",

examples/next-login/package.json

@@ -21,8 +21,8 @@
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
     "next": "14.2.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515",
     "react-schemaorg": "2.0.0",
     "react-syntax-highlighter": "15.5.0",
     "react-use-clipboard": "1.0.9",

examples/next-simple/package.json

@@ -19,8 +19,8 @@
     "@emotion/styled": "11.11.5",
     "@ultraviolet/ui": "workspace:*",
     "next": "14.2.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515",
     "react-schemaorg": "2.0.0",
     "react-syntax-highlighter": "15.5.0",
     "react-use-clipboard": "1.0.9",

package.json

@@ -158,8 +158,8 @@
     "jest-axe": "8.0.0",
     "lint-staged": "15.2.5",
     "postcss": "8.4.38",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515",
     "read-pkg": "9.0.1",
     "regenerator-runtime": "0.14.1",
     "require-from-string": "2.0.2",

packages/form/package.json

@@ -75,8 +75,8 @@
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
     "@utils/test": "workspace:*",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515"
   },
   "dependencies": {
     "@babel/runtime": "7.24.7",

packages/icons/package.json

@@ -63,8 +63,8 @@
   "peerDependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515"
   },
   "devDependencies": {
     "@babel/core": "7.24.7",

packages/icons/src/components/Icon/index.tsx

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { consoleLightTheme as theme } from '@ultraviolet/themes'
-import type { FunctionComponent, SVGProps } from 'react'
-import { forwardRef, useMemo } from 'react'
+import type { FunctionComponent, Ref, SVGProps } from 'react'
+import { useMemo } from 'react'
 import capitalize from '../../utils/capitalize'
 import { ICONS } from './Icons'
 import { SMALL_ICONS } from './SmallIcons'
@@ -23,7 +23,7 @@
 const sizeStyles = ({
   size,
 }: {
   size: number | string | 'small' | 'large'
 }) => {
   if (size === 'small' || size === 16) {
     return css`
@@ -67,7 +67,7 @@
   shouldForwardProp: prop =>
     !['size', 'sentiment', 'prominence', 'disabled'].includes(prop),
 })<{
   sentiment: Color | string
   size: number | string
   prominence: ProminenceProps
   disabled?: boolean
@@ -114,17 +114,18 @@
   /**
    * ⚠️`string` and `number` are deprecated. Use `small` and `large` only.
    */
   size?: number | string | 'small' | 'large'
   name?: IconName
   prominence?: ProminenceProps
   /**
    * @deprecated use `sentiment` property instead
    */
-  color?: Color
+  color?: Color | string
   sentiment?: Color
   variant?: 'outlined' | 'filled'
   'data-testid'?: string
   disabled?: boolean
+  ref?: Ref<SVGSVGElement>
 } & Pick<
   SVGProps<SVGSVGElement>,
   'className' | 'stroke' | 'cursor' | 'strokeWidth'
@@ -133,70 +134,64 @@
 /**
  * Icon component is our set of system icons in the design system. All of them are SVGs.
  */
-export const Icon = forwardRef<SVGSVGElement, IconProps>(
-  (
-    {
-      name = 'alert',
-      color = 'currentColor',
-      sentiment,
-      size = '1em',
-      prominence = 'default',
-      className,
-      'data-testid': dataTestId,
-      stroke,
-      variant = 'filled',
-      cursor,
-      strokeWidth,
-      disabled,
-    },
-    ref,
-  ) => {
-    const computedSentiment = sentiment ?? color
-    const SystemIcon = useMemo(() => {
-      if (size === 'small' || size === 16) {
-        return StyledIcon(
-          SMALL_ICONS[variant][name] || SMALL_ICONS.filled.alert,
-        )
-      }
-
-      return StyledIcon(ICONS[variant][name] || ICONS.filled.alert)
-    }, [name, size, variant])
-
-    /**
-     * @deprecated to be removed in next major
-     */
-    const defaultViewBox = useMemo(() => {
-      if (
-        [
-          'asterisk',
-          'close-circle-outline',
-          'drag-variant',
-          'expand-more',
-          'send',
-          'switch_orga',
-        ].includes(name)
-      ) {
-        return '0 0 24 24'
-      }
-      if (size === 'small' || size === 16) return '0 0 16 16'
-
-      return '0 0 20 20'
-    }, [name, size])
-
-    return (
-      <SystemIcon
-        ref={ref}
-        sentiment={computedSentiment}
-        prominence={prominence}
-        size={size}
-        viewBox={defaultViewBox}
-        className={className}
-        data-testid={dataTestId}
-        stroke={stroke}
-        cursor={cursor}
-        strokeWidth={strokeWidth}
-        disabled={disabled}
-      />
-    )
-  },
-)
+export const Icon = ({
+  name = 'alert',
+  color = 'currentColor',
+  sentiment,
+  size = '1em',
+  prominence = 'default',
+  className,
+  'data-testid': dataTestId,
+  stroke,
+  variant = 'filled',
+  cursor,
+  strokeWidth,
+  disabled,
+  ref,
+}: IconProps) => {
+  const computedSentiment = sentiment ?? color
+  const SystemIcon = useMemo(() => {
+    if (size === 'small' || size === 16) {
+      return StyledIcon(SMALL_ICONS[variant][name] || SMALL_ICONS.filled.alert)
+    }
+
+    return StyledIcon(ICONS[variant][name] || ICONS.filled.alert)
+  }, [name, size, variant])
+
+  /**
+   * @deprecated to be removed in next major
+   */
+  const defaultViewBox = useMemo(() => {
+    if (
+      [
+        'asterisk',
+        'close-circle-outline',
+        'drag-variant',
+        'expand-more',
+        'send',
+        'switch_orga',
+      ].includes(name)
+    ) {
+      return '0 0 24 24'
+    }
+    if (size === 'small' || size === 16) return '0 0 16 16'
+
+    return '0 0 20 20'
+  }, [name, size])
+
+  return (
+    <SystemIcon
+      ref={ref}
+      sentiment={computedSentiment}
+      prominence={prominence}
+      size={size}
+      viewBox={defaultViewBox}
+      className={className}
+      data-testid={dataTestId}
+      stroke={stroke}
+      cursor={cursor}
+      strokeWidth={strokeWidth}
+      disabled={disabled}
+    />
+  )
+}

packages/illustrations/package.json

@@ -97,8 +97,8 @@
   "peerDependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515"
   },
   "dependencies": {
     "@ultraviolet/themes": "workspace:*"

packages/plus/package.json

@@ -65,8 +65,8 @@
   "peerDependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515"
   },
   "devDependencies": {
     "@babel/core": "7.24.7",
@@ -77,8 +77,8 @@
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/illustrations": "workspace:*",
     "@utils/test": "workspace:*",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515"
   },
   "dependencies": {
     "@uiw/codemirror-extensions-langs": "4.22.2",