refactor(react): upgrade components and contexts to React 19

apps/lite/package.json

@@ -13,11 +13,11 @@
         "@josemi-icons/react": "^0.7.0",
         "classnames": "^2.5.1",
         "idb-keyval": "^6.2.2",
-        "lowcss": "^0.33.0",
-        "lowcss-forms": "^0.33.0",
-        "lowcss-helpers": "^0.33.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "lowcss": "^0.34.1",
+        "lowcss-forms": "^0.34.1",
+        "lowcss-helpers": "^0.34.1",
+        "react": "^19.2.7",
+        "react-dom": "^19.2.7"
     },
     "devDependencies": {
         "@babel/core": "^7.25.7",

apps/studio/package.json

@@ -12,11 +12,11 @@
     "dependencies": {
         "@josemi-icons/react": "^0.7.0",
         "classnames": "^2.5.1",
-        "lowcss": "^0.33.0",
-        "lowcss-forms": "^0.33.0",
-        "lowcss-helpers": "^0.33.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "lowcss": "^0.34.1",
+        "lowcss-forms": "^0.34.1",
+        "lowcss-helpers": "^0.34.1",
+        "react": "^19.2.7",
+        "react-dom": "^19.2.7",
         "uid": "^2.0.2"
     },
     "devDependencies": {

folio-react/components/__tests__/minimap.test.tsx

@@ -42,18 +42,18 @@ describe("Minimap", () => {
 
     it("should render without crashing", () => {
         const { getByTestId } = render(
-            <EditorContext.Provider value={[mockEditor, 0]}>
+            <EditorContext value={[mockEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         expect(getByTestId("minimap")).toBeInTheDocument();
     });
 
     it("should render an SVG with the correct number of elements", () => {
         const { container } = render(
-            <EditorContext.Provider value={[mockEditor, 0]}>
+            <EditorContext value={[mockEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
 
         const svg = container.querySelector("svg");
@@ -74,16 +74,16 @@ describe("Minimap", () => {
         };
 
         const { container, rerender } = render(
-            <EditorContext.Provider value={[mockEditor, 0]}>
+            <EditorContext value={[mockEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         const initialWidth = parseFloat(getVisibleRect(container).getAttribute("width") || "0");
 
         rerender(
-            <EditorContext.Provider value={[zoomedEditor, 0]}>
+            <EditorContext value={[zoomedEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         const zoomedWidth = parseFloat(getVisibleRect(container).getAttribute("width") || "0");
 
@@ -98,17 +98,17 @@ describe("Minimap", () => {
         };
 
         const { container, rerender } = render(
-            <EditorContext.Provider value={[mockEditor, 0]}>
+            <EditorContext value={[mockEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         const initialX = parseFloat(getVisibleRect(container).getAttribute("x") || "0");
         const initialY = parseFloat(getVisibleRect(container).getAttribute("y") || "0");
 
         rerender(
-            <EditorContext.Provider value={[translatedEditor, 0]}>
+            <EditorContext value={[translatedEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         const translatedX = parseFloat(getVisibleRect(container).getAttribute("x") || "0");
         const translatedY = parseFloat(getVisibleRect(container).getAttribute("y") || "0");
@@ -123,9 +123,9 @@ describe("Minimap", () => {
             getElements: () => [],
         };
         const { container } = render(
-            <EditorContext.Provider value={[emptyEditor, 0]}>
+            <EditorContext value={[emptyEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
 
         // Only the visible area rect should be rendered

folio-react/components/canvas.tsx

@@ -21,7 +21,7 @@ import { useActions } from "../contexts/actions.tsx";
 import { useCursor } from "../hooks/use-cursor.js";
 import { renderElement } from "./elements/index.jsx";
 import { SvgContainer } from "./svg.tsx";
-import { Grid } from "./grid.jsx";
+import { Grid } from "./grid.tsx";
 import { clearFocus } from "../utils/dom.js";
 import { preventDefault, isTouchOrPenEvent, isInputTarget } from "../utils/events.js";
 import type { EditorPointEvent, EditorKeyboardEvent } from "../lib/events.ts";

folio-react/components/grid.tsx

@@ -0,0 +1,46 @@
+import { GRID_SIZE } from "../constants.js";
+import { SvgContainer } from "./svg.tsx";
+import type { JSX } from "react";
+
+export type GridProps = {
+    width: number;
+    height: number;
+    translateX: number;
+    translateY: number;
+    zoom: number;
+    size?: number;
+    fillColor?: string;
+    fillOpacity?: number;
+};
+
+export const Grid = (props: GridProps): JSX.Element => {
+    const fillColor = props.fillColor ?? "rgb(66,72,82)";
+    const fillOpacity = props.fillOpacity ?? 1;
+    const size = props.size ?? GRID_SIZE;
+    const calculatedTranslateX = props.translateX / props.zoom;
+    const calculatedTranslateY = props.translateY / props.zoom;
+    const x = (calculatedTranslateX % size) - calculatedTranslateX - (size / 2);
+    const y = (calculatedTranslateY % size) - calculatedTranslateY - (size / 2);
+    return (
+        <SvgContainer>
+            <defs>
+                <pattern id="grid" width={size} height={size} patternUnits="userSpaceOnUse">
+                    <circle
+                        cx={size / 2}
+                        cy={size / 2}
+                        r={1 / props.zoom}
+                        fill={fillColor}
+                        fillOpacity={fillOpacity}
+                    />
+                </pattern>
+            </defs>
+            <g transform={`translate(${x},${y})`}>
+                <rect
+                    width={(props.width + size) / props.zoom}
+                    height={(props.height + size) / props.zoom}
+                    fill="url(#grid)"
+                />
+            </g>
+        </SvgContainer>
+    );
+};

folio-react/contexts/actions.tsx

@@ -1014,8 +1014,8 @@ export const ActionsProvider = (props: ActionsProviderProps): React.JSX.Element
 
     // return the actions provider
     return (
-        <ActionsContext.Provider value={actionsManager}>
+        <ActionsContext value={actionsManager}>
             {props.children}
-        </ActionsContext.Provider>
+        </ActionsContext>
     );
 };

folio-react/contexts/ai.tsx

@@ -132,8 +132,8 @@ export const AiProvider = ({ host, children }: AiProviderProps): JSX.Element =>
     }, [host]);
 
     return (
-        <AiContext.Provider value={{ host, quotas, updateQuotas }}>
+        <AiContext value={{ host, quotas, updateQuotas }}>
             {children}
-        </AiContext.Provider>
+        </AiContext>
     );
 };

folio-react/contexts/assets.jsx

@@ -9,7 +9,7 @@ export const useAssets = () => {
 
 // Assets provider component
 export const AssetsProvider = props => (
-    <AssetsContext.Provider value={props.value || {}}>
+    <AssetsContext value={props.value || {}}>
         {props.children}
-    </AssetsContext.Provider>
+    </AssetsContext>
 );

folio-react/contexts/confirm.jsx

@@ -85,7 +85,7 @@ export const ConfirmProvider = props => {
     }, [confirm, hideConfirm]);
 
     return (
-        <ConfirmContext.Provider value={{confirm, showConfirm, hideConfirm}}>
+        <ConfirmContext value={{confirm, showConfirm, hideConfirm}}>
             {props.children}
             {confirm?.visible && createPortal([
                 <React.Fragment key="dialog:confirm">
@@ -113,6 +113,6 @@ export const ConfirmProvider = props => {
                     </Centered>
                 </React.Fragment>
             ], document.body)}
-        </ConfirmContext.Provider>
+        </ConfirmContext>
     );
 };

folio-react/contexts/dialogs.tsx

@@ -77,7 +77,7 @@ export const DialogsProvider = (props: DialogsProviderProps): React.JSX.Element
 
     // Render dialog context provider
     return (
-        <DialogsContext.Provider value={{ showDialog, hideDialog }}>
+        <DialogsContext value={{ showDialog, hideDialog }}>
             {props.children}
             {!!DialogComponent && createPortal([
                 <Overlay key="dialog:overlay" className="z-50" />,
@@ -92,6 +92,6 @@ export const DialogsProvider = (props: DialogsProviderProps): React.JSX.Element
                     </Dialog.Content>
                 </Centered>,
             ], document.body)}
-        </DialogsContext.Provider>
+        </DialogsContext>
     );
 };

folio-react/contexts/editor-components.tsx

@@ -90,8 +90,8 @@ export const EditorComponentsProvider = (props: EditorComponentsProviderProps):
     }, [props.components]);
 
     return (
-        <EditorComponentsContext.Provider value={editorComponents}>
+        <EditorComponentsContext value={editorComponents}>
             {props.children}
-        </EditorComponentsContext.Provider>
+        </EditorComponentsContext>
     );
 };

folio-react/contexts/editor.tsx

@@ -102,10 +102,10 @@ export const EditorProvider = (props: EditorProviderProps): React.JSX.Element =>
 
     // Render editor context provider
     return (
-        <EditorContext.Provider value={[editor, update]}>
+        <EditorContext value={[editor, update]}>
             <div className={"relative overflow-hidden h-full w-full select-none"}>
                 {props.children}
             </div>
-        </EditorContext.Provider>
+        </EditorContext>
     );
 };

folio-react/contexts/library.tsx

@@ -275,8 +275,8 @@ export const LibraryProvider = (props: LibraryProviderProps): React.JSX.Element
 
     // render library context provider
     return (
-        <LibraryContext.Provider value={libraryApi}>
+        <LibraryContext value={libraryApi}>
             {props.children}
-        </LibraryContext.Provider>
+        </LibraryContext>
     );
 };

folio-react/contexts/preferences.tsx

@@ -65,8 +65,8 @@ export const usePreferences = (): Preferences => {
 export const PreferencesProvider = (props: PreferencesProviderProps): JSX.Element => {
     const userPreferences = props.preferences;
     return (
-        <UserPreferencesContext.Provider value={userPreferences}>
+        <UserPreferencesContext value={userPreferences}>
             {props.children}
-        </UserPreferencesContext.Provider>
+        </UserPreferencesContext>
     );
 };

folio-react/contexts/tools.tsx

@@ -348,8 +348,8 @@ export const ToolsProvider = (props: ToolsProviderProps): React.JSX.Element => {
     }), [tools]);
 
     return (
-        <ToolsContext.Provider value={toolsManager}>
+        <ToolsContext value={toolsManager}>
             {props.children}
-        </ToolsContext.Provider>
+        </ToolsContext>
     );
 };

folio-react/contexts/workbench.tsx

@@ -139,9 +139,9 @@ export const WorkbenchProvider = (props: WorkbenchProviderProps): JSX.Element =>
     }, [parts]);
 
     return (
-        <WorkbenchContext.Provider value={{ parts, isViewOpen, openView, closeView, toggleView }}>
+        <WorkbenchContext value={{ parts, isViewOpen, openView, closeView, toggleView }}>
             {props.children}
-        </WorkbenchContext.Provider>
+        </WorkbenchContext>
     );
 };
 
@@ -182,9 +182,9 @@ export const WorkbenchSlot = (props: WorkbenchSlotProps): JSX.Element | null =>
             {parts[props.part].map((view: View, index: number) => {
                 const Component = view.component as ElementType;
                 return (
-                    <WorkbenchViewContext.Provider key={index} value={view}>
+                    <WorkbenchViewContext key={index} value={view}>
                         <Component />
-                    </WorkbenchViewContext.Provider>
+                    </WorkbenchViewContext>
                 );
             })}
         </Fragment>

folio-react/hooks/use-context-menu.tsx

@@ -25,9 +25,9 @@ export const ContextMenuWrapper = (): JSX.Element => {
     const { getContext } = useSurface();
     const { top, left } = getContext();
     return (
-        <ContexMenuPositionContext.Provider value={{ top: top as number, left: left as number }}>
+        <ContexMenuPositionContext value={{ top: top as number, left: left as number }}>
             <ContextMenu />
-        </ContexMenuPositionContext.Provider>
+        </ContexMenuPositionContext>
     );
 };
 

folio-react/package.json

@@ -16,16 +16,16 @@
         "./package.json": "./package.json"
     },
     "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
+        "react": ">=19",
+        "react-dom": ">=19"
     },
     "devDependencies": {
         "@josemi-icons/react": "^0.7.0",
         "alure": "^0.1.0",
         "browser-fs-access": "^0.37.0",
         "classnames": "^2.5.1",
-        "lowcss": "^0.33.0",
-        "lowcss-helpers": "^0.33.0",
+        "lowcss": "^0.34.1",
+        "lowcss-helpers": "^0.34.1",
         "react-use": "^17.5.1",
         "uid": "^2.0.2"
     },