Support of react 19 + add a CI for it

.changeset/ten-geckos-promise.md

@@ -0,0 +1,7 @@
+---
+"@hopper-ui/styled-system": minor
+"@hopper-ui/components": minor
+"@hopper-ui/icons": minor
+---
+
+Added support to React 19

.github/composite-actions/setup/action.yml

@@ -0,0 +1,31 @@
+name: Setup Node and PNPM
+
+runs:
+    using: composite
+    steps:
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        id: pnpm-install
+        with:
+          version: 9
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+

.github/workflows/changeset.yml

@@ -15,36 +15,13 @@ jobs:
             pull-requests: write
 
         steps:
-            -   name: Checkout
+            -   name: Checkout code
                 uses: actions/checkout@v4
 
-            -   name: Install Node.js
-                uses: actions/setup-node@v4
-                with:
-                    node-version-file: ".nvmrc"
-
-            -   name: Install pnpm
-                uses: pnpm/action-setup@v4
-                id: pnpm-install
-                with:
-                    version: 9
-                    run_install: false
-
-            -   name: Get pnpm store directory
-                id: pnpm-cache
-                shell: bash
-                run: |
-                    echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-            -   name: Setup pnpm cache
-                uses: actions/cache@v4
-                with:
-                    path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-                    key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-                    restore-keys: |
-                        ${{ runner.os }}-pnpm-store-
+            -   name: Setup Node and PNPM
+                uses: ./.github/composite-actions/setup
 
-            -   name: Install Dependencies
+            -   name: Install dependencies
                 run: pnpm i --frozen-lockfile
 
             -   name: Create release Pull Request or publish to NPM

.github/workflows/chromatic.yml

@@ -33,31 +33,8 @@ jobs:
                 with:
                     fetch-depth: 0
 
-            -   name: Install Node.js
-                uses: actions/setup-node@v4
-                with:
-                    node-version-file: ".nvmrc"
-
-            -   uses: pnpm/action-setup@v4
-                name: Install pnpm
-                id: pnpm-install
-                with:
-                    version: 9
-                    run_install: false
-
-            -   name: Get pnpm store directory
-                id: pnpm-cache
-                shell: bash
-                run: |
-                    echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-            -   name: Setup pnpm cache
-                uses: actions/cache@v4
-                with:
-                    path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-                    key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-                    restore-keys: |
-                        ${{ runner.os }}-pnpm-store-
+            -   name: Setup Node and PNPM
+                uses: ./.github/composite-actions/setup
 
             -   name: Install dependencies
                 run: pnpm i --frozen-lockfile

.github/workflows/ci-react19.yml

@@ -0,0 +1,41 @@
+name: CI React 19
+
+# Pnpm setup based on https://github.com/pnpm/action-setup#use-cache-to-reduce-installation-time
+
+on:
+    push:
+        branches: [ "main" ]
+    pull_request:
+        branches: [ "main" ]
+
+env:
+    CI: true
+
+concurrency:
+    group: ci-react19-${{ github.ref }}
+    cancel-in-progress: true
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        steps:
+            -   name: Checkout code
+                uses: actions/checkout@v4
+
+            -   name: Setup Node and PNPM
+                uses: ./.github/composite-actions/setup
+                with:
+                  install_dependencies: false
+
+            -   name: Install React 19
+                run: pnpm install-react19
+
+            -   name: Install dependencies
+                run: pnpm i
+
+            -   name: Build packages
+                run: pnpm build:pkg
+
+            -   name: Test packages
+                run: pnpm test

.github/workflows/ci.yml

@@ -20,34 +20,11 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            -   name: Checkout
+            -   name: Checkout code
                 uses: actions/checkout@v4
 
-            -   name: Install Node.js
-                uses: actions/setup-node@v4
-                with:
-                    node-version-file: ".nvmrc"
-
-            -   uses: pnpm/action-setup@v4
-                name: Install pnpm
-                id: pnpm-install
-                with:
-                    version: 9
-                    run_install: false
-
-            -   name: Get pnpm store directory
-                id: pnpm-cache
-                shell: bash
-                run: |
-                    echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-            -   name: Setup pnpm cache
-                uses: actions/cache@v4
-                with:
-                    path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-                    key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-                    restore-keys: |
-                        ${{ runner.os }}-pnpm-store-
+            -   name: Setup Node and PNPM
+                uses: ./.github/composite-actions/setup
 
             -   name: Install dependencies
                 run: pnpm i --frozen-lockfile

apps/docs/next.config.js

@@ -3,7 +3,7 @@ import { withContentlayer } from "next-contentlayer";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
-    swcMinify: true,
+    swcMinify: true, // This will be enabled by default and removed in Next.js 15
     productionBrowserSourceMaps: true,
     // Eslint only lint pages/, app/, components/, lib/, and src/ directories by default. So we need to add other directories to the eslint config.
     // https://nextjs.org/docs/app/building-your-application/configuring/eslint#linting-custom-directories-and-files

package.json

@@ -27,7 +27,7 @@
         "build:apps": "pnpm -r --filter \"{apps/**}\" build ",
         "changeset": "changeset",
         "ci-release": "pnpm build:pkg && changeset publish",
-        "aa": "cd ./apps/docs && pnpm generate:previewRef",
+        "install-react19": "pnpm -r --filter \"{packages/**}\" add -D react@19 react-dom@19 @types/react@19 @types/react-dom@19 && pnpm add -D -w react@19 react-dom@19 @types/react@19 @types/react-dom@19",
         "generate-icons": "pnpm --filter=\"svg-icons\" generate-icons && pnpm --filter=\"@hopper-ui/icons*\" generate-icons",
         "lint": "pnpm run \"/^lint:.*/\"",
         "lint:eslint": "eslint . --max-warnings=0 --cache --cache-location node_modules/.cache/eslint",

packages/components/package.json

@@ -41,7 +41,7 @@
     },
     "peerDependencies": {
         "@hopper-ui/styled-system": "^2.4",
-        "react": "^18",
+        "react": "^18 || ^19",
         "react-aria": "^3.36",
         "react-aria-components": "^1.5",
         "react-dom": "^18"

packages/components/src/Avatar/src/useImageFallback.ts

@@ -31,7 +31,7 @@ export interface ImageFallbackReturnProps {
     status: Status;
 }
 
-type Status = 
+type Status =
 "loading" /* When the image is loading. */
 | "failed" /*  The image has failed to load. */
 | "pending" /* There is no src, but it's in a pending state since it could be updated in the future. */
@@ -47,11 +47,11 @@ export function useImageFallback(props: ImageFallbackProps): ImageFallbackReturn
         setStatus(src ? "loading" : "pending");
     }, [src]);
 
-    const imageRef = useRef<HTMLImageElement | null>();
+    const imageRef = useRef<HTMLImageElement | null>(null);
 
     const load = useCallback(() => {
         if (!src) {return;}
-    
+
         flush();
 
         const image = new Image();
@@ -76,7 +76,7 @@ export function useImageFallback(props: ImageFallbackProps): ImageFallbackReturn
             }
             onError?.(event as unknown as ImageEvent);
         };
-        
+
         imageRef.current = image;
     }, [src, onLoad, fallbackSrc, onError]);
 
@@ -92,11 +92,11 @@ export function useImageFallback(props: ImageFallbackProps): ImageFallbackReturn
         if (status === "loading") {
             load();
         }
-    
+
         return () => {
             flush();
         };
     }, [status, load]);
 
     return { imageUrl, status };
-}
+}

packages/components/src/utils/src/isTextOnlyChildren.ts

@@ -1,4 +1,4 @@
-import { Children, Fragment, isValidElement, type ReactNode } from "react";
+import { Children, Fragment, isValidElement, type PropsWithChildren, type ReactNode } from "react";
 
 /**
  * Determines whether the provided React children consist only of text content.
@@ -11,7 +11,7 @@ export function isTextOnlyChildren(children: ReactNode) {
 }
 
 function resolveChildren(children: ReactNode) {
-    if (isValidElement(children) && children.type === Fragment) {
+    if (isValidElement<PropsWithChildren>(children) && children.type === Fragment) {
         return resolveChildren(children.props.children);
     }
 

packages/components/src/utils/src/useIsOverflow.ts

@@ -1,7 +1,7 @@
 import { useIsomorphicLayoutEffect } from "@hopper-ui/styled-system";
 import { type RefObject, useState } from "react";
 
-export const useIsOverflow = (ref?: RefObject<HTMLElement>, callback?: (isOverflow: boolean) => void) => {
+export const useIsOverflow = (ref: RefObject<HTMLElement | null>, callback?: (isOverflow: boolean) => void) => {
     const [isOverflow, setIsOverflow] = useState(false);
 
     useIsomorphicLayoutEffect(() => {
@@ -27,4 +27,4 @@ export const useIsOverflow = (ref?: RefObject<HTMLElement>, callback?: (isOverfl
     }, [callback, ref, ref?.current]);
 
     return isOverflow;
-};
+};

packages/icons/package.json

@@ -39,7 +39,7 @@
     },
     "peerDependencies": {
         "@hopper-ui/styled-system": "^2.4",
-        "react": "^18",
+        "react": "^18 || ^19",
         "react-aria-components": "^1.5",
         "react-dom": "^18"
     },

packages/styled-system/src/global-styles/BodyStyleProvider.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useRef, useState, type RefObject } from "react";
 
 import { useColorSchemeContext, type ColorScheme } from "../color-scheme/ColorSchemeContext.ts";
 import { StyledSystemRootCssClass } from "../styledSystemRootCssClass.ts";
@@ -36,7 +36,7 @@ export function BodyStyleProvider() {
 
     useIsomorphicLayoutEffect(() => {
         if (ref.current) {
-            const computedStyle = new ThemeComputedStyle(ref, `.${StyledSystemRootCssClass}`);
+            const computedStyle = new ThemeComputedStyle(ref as RefObject<Element>, `.${StyledSystemRootCssClass}`);
 
             const color = computedStyle.getPropertyValue(BodyTokens.color);
             const backgroundColor = computedStyle.getPropertyValue(BodyTokens.backgroundColor);

packages/styled-system/src/html-wrappers/htmlElement.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { forwardRef, type CSSProperties, type ElementRef } from "react";
+import { forwardRef, type CSSProperties, type ComponentRef, type JSX } from "react";
 
 import type { StyledComponentProps } from "../styledSystemProps.ts";
 import { useStyledSystem } from "../useStyledSystem.ts";
@@ -12,7 +12,7 @@ export const GlobalHtmlElementCssSelector = "hop-HtmlElement";
 export const GlobalHtmlElementSpecificCssSelector = (elementType: string) => `${GlobalHtmlElementCssSelector}-${elementType}`;
 
 export function htmlElement<T extends keyof JSX.IntrinsicElements>(elementType: T) {
-    return forwardRef<ElementRef<T>, HtmlElementProps<T>>((props, ref) => {
+    return forwardRef<ComponentRef<T>, HtmlElementProps<T>>((props, ref) => {
         const { stylingProps, ...ownProps } = useStyledSystem(props);
         const { className, style, ...otherProps } = ownProps;
 

packages/styled-system/src/styledSystemProps.ts

@@ -1,6 +1,6 @@
 // this file will contain handlers for all the style props
 import type { Property } from "csstype";
-import type { ComponentProps, JSXElementConstructor } from "react";
+import type { ComponentProps, JSX, JSXElementConstructor } from "react";
 
 import type { ResponsiveProp } from "./responsive/useResponsiveValue.tsx";
 import type {