Update to React 19 (sipb#115)

Bump dependencies to React 19 (and vite 6). Fixes build issues, resolves sipb#99, resolves sipb#103
dtemkin1 · Jan 19, 2025 · 1bd32e8 · 1bd32e8
1 parent a250ac1
commit 1bd32e8
Show file tree

Hide file tree

Showing 15 changed files with 3,355 additions and 8,319 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,25 +5,25 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@chakra-ui/react": "^3.2.3",
-    "@emotion/react": "^11.13.5",
-    "@fontsource-variable/inter": "^5.1.0",
+    "@chakra-ui/react": "^3.4.0",
+    "@emotion/react": "^11.14.0",
+    "@fontsource-variable/inter": "^5.1.1",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
-    "@react-oauth/google": "^0.2.6",
-    "ag-grid-react": "^33.0.2",
-    "html-entities": "^2.3.3",
-    "ical-generator": "^6.0.0",
+    "@react-oauth/google": "^0.2.8",
+    "ag-grid-react": "^33.0.4",
+    "html-entities": "^2.5.2",
+    "ical-generator": "^6.0.1",
     "msgpack-lite": "^0.1.26",
-    "nanoid": "^3.3.4",
-    "next-themes": "^0.4.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "nanoid": "^3.3.8",
+    "next-themes": "^0.4.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-icons": "^5.4.0",
-    "react-use": "^17.5.1",
-    "timezones-ical-library": "^1.8.3"
+    "react-use": "^17.6.0",
+    "timezones-ical-library": "^1.9.1"
   },
   "scripts": {
     "dev": "vite",
@@ -38,25 +38,26 @@
     "node": ">=18.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "^3.2.3",
+    "@chakra-ui/cli": "^3.4.0",
     "@eslint/js": "^9.16.0",
-    "@types/gapi.client.calendar": "^3.0.10",
+    "@types/gapi.client.calendar-v3": "^0.0.4",
     "@types/msgpack-lite": "^0.1.11",
-    "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/node": "^22.10.7",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.16.0",
+    "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.13.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
     "prettier": "3.4.1",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.0",
-    "vite": "^5.4.11",
+    "sass-embedded": "^1.83.4",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7",
     "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -48,15 +48,15 @@ function useHydrant(): {
   state: HydrantState;
 } {
   const [loading, setLoading] = useState(true);
-  const hydrantRef = useRef<State>();
+  const hydrantRef = useRef<State>(undefined);
   const hydrant = hydrantRef.current;
 
   const [state, setState] = useState<HydrantState>(DEFAULT_STATE);
 
   /** Fetch from the url, which is JSON of type T. */
   const fetchNoCache = async <T,>(url: string): Promise<T> => {
     const res = await fetch(url, { cache: "no-cache" });
-    return res.json() as Promise<T>;
+    return (await res.json()) as T;
   };
 
   useEffect(() => {

diff --git a/src/components/ClassTable.tsx b/src/components/ClassTable.tsx
@@ -125,7 +125,7 @@ function ClassInput(props: {
       name: string;
       class: Class;
     }>
-  >();
+  >(undefined);
 
   const processedRows = useMemo(
     () =>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -62,8 +62,6 @@ function PreferencesDialog(props: { state: State; preferences: Preferences }) {
     setVisible(false);
   };
 
-  const contentRef = useRef<HTMLDivElement>(null);
-
   return (
     <>
       <DialogRoot
@@ -76,7 +74,7 @@ function PreferencesDialog(props: { state: State; preferences: Preferences }) {
             Change theme <ColorModeIcon />
           </Button>
         </DialogTrigger>
-        <DialogContent ref={contentRef}>
+        <DialogContent>
           <DialogHeader>
             <DialogTitle>Preferences</DialogTitle>
           </DialogHeader>
@@ -102,7 +100,7 @@ function PreferencesDialog(props: { state: State; preferences: Preferences }) {
                 <SelectTrigger>
                   <SelectValueText />
                 </SelectTrigger>
-                <SelectContent portalRef={contentRef}>
+                <SelectContent portalled={false}>
                   {COLOR_SCHEME_PRESETS.map(({ name }) => (
                     <SelectItem item={name} key={name}>
                       {name}

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -18,14 +18,21 @@ export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, ref) {
-    const { loading, disabled, loadingText, children, variant, ...rest } =
-      props;
+    const {
+      loading,
+      disabled,
+      loadingText,
+      children,
+      variant = "subtle",
+      fontWeight = "semibold",
+      ...rest
+    } = props;
     return (
       <ChakraButton
         disabled={loading || disabled}
         ref={ref}
-        variant={variant ?? "subtle"}
-        fontWeight={"semibold"}
+        variant={variant}
+        fontWeight={fontWeight}
         {...rest}
       >
         {loading && !loadingText ? (

diff --git a/src/components/ui/close-button.tsx b/src/components/ui/close-button.tsx
@@ -1,9 +1,9 @@
-import type { ButtonProps as ChakraCloseButtonProps } from "@chakra-ui/react";
+import type { ButtonProps } from "@chakra-ui/react";
 import { IconButton as ChakraIconButton } from "@chakra-ui/react";
 import * as React from "react";
 import { LuX } from "react-icons/lu";
 
-export type CloseButtonProps = ChakraCloseButtonProps;
+export type CloseButtonProps = ButtonProps;
 
 export const CloseButton = React.forwardRef<
   HTMLButtonElement,

diff --git a/src/components/ui/color-mode.tsx b/src/components/ui/color-mode.tsx
@@ -15,14 +15,22 @@ export function ColorModeProvider(props: ColorModeProviderProps) {
   );
 }
 
+export type ColorMode = "light" | "dark";
+
+export interface UseColorModeReturn {
+  colorMode: ColorMode;
+  setColorMode: (colorMode: ColorMode) => void;
+  toggleColorMode: () => void;
+}
+
 // eslint-disable-next-line react-refresh/only-export-components
-export function useColorMode() {
+export function useColorMode(): UseColorModeReturn {
   const { resolvedTheme, setTheme } = useTheme();
   const toggleColorMode = () => {
     setTheme(resolvedTheme === "light" ? "dark" : "light");
   };
   return {
-    colorMode: resolvedTheme,
+    colorMode: resolvedTheme as ColorMode,
     setColorMode: setTheme,
     toggleColorMode,
   };
@@ -31,12 +39,12 @@ export function useColorMode() {
 // eslint-disable-next-line react-refresh/only-export-components
 export function useColorModeValue<T>(light: T, dark: T) {
   const { colorMode } = useColorMode();
-  return colorMode === "light" ? light : dark;
+  return colorMode === "dark" ? dark : light;
 }
 
 export function ColorModeIcon() {
   const { colorMode } = useColorMode();
-  return colorMode === "light" ? <LuSun /> : <LuMoon />;
+  return colorMode === "dark" ? <LuMoon /> : <LuSun />;
 }
 
 type ColorModeButtonProps = Omit<IconButtonProps, "aria-label">;

diff --git a/src/components/ui/color-picker.tsx b/src/components/ui/color-picker.tsx
@@ -9,10 +9,10 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-import { forwardRef } from "react";
+import * as React from "react";
 import { LuCheck, LuPipette } from "react-icons/lu";
 
-export const ColorPickerTrigger = forwardRef<
+export const ColorPickerTrigger = React.forwardRef<
   HTMLButtonElement,
   ChakraColorPicker.TriggerProps & { fitContent?: boolean }
 >(function ColorPickerTrigger(props, ref) {
@@ -28,7 +28,7 @@ export const ColorPickerTrigger = forwardRef<
   );
 });
 
-export const ColorPickerInput = forwardRef<
+export const ColorPickerInput = React.forwardRef<
   HTMLInputElement,
   Omit<ChakraColorPicker.ChannelInputProps, "channel">
 >(function ColorHexInput(props, ref) {
@@ -40,7 +40,7 @@ interface ColorPickerContentProps extends ChakraColorPicker.ContentProps {
   portalRef?: React.RefObject<HTMLElement>;
 }
 
-export const ColorPickerContent = forwardRef<
+export const ColorPickerContent = React.forwardRef<
   HTMLDivElement,
   ColorPickerContentProps
 >(function ColorPickerContent(props, ref) {
@@ -54,7 +54,7 @@ export const ColorPickerContent = forwardRef<
   );
 });
 
-export const ColorPickerInlineContent = forwardRef<
+export const ColorPickerInlineContent = React.forwardRef<
   HTMLDivElement,
   ChakraColorPicker.ContentProps
 >(function ColorPickerInlineContent(props, ref) {
@@ -69,7 +69,7 @@ export const ColorPickerInlineContent = forwardRef<
   );
 });
 
-export const ColorPickerSliders = forwardRef<HTMLDivElement, StackProps>(
+export const ColorPickerSliders = React.forwardRef<HTMLDivElement, StackProps>(
   function ColorPickerSliders(props, ref) {
     return (
       <Stack gap="1" flex="1" px="1" ref={ref} {...props}>
@@ -80,7 +80,7 @@ export const ColorPickerSliders = forwardRef<HTMLDivElement, StackProps>(
   },
 );
 
-export const ColorPickerArea = forwardRef<
+export const ColorPickerArea = React.forwardRef<
   HTMLDivElement,
   ChakraColorPicker.AreaProps
 >(function ColorPickerArea(props, ref) {
@@ -92,7 +92,7 @@ export const ColorPickerArea = forwardRef<
   );
 });
 
-export const ColorPickerEyeDropper = forwardRef<
+export const ColorPickerEyeDropper = React.forwardRef<
   HTMLButtonElement,
   IconButtonProps
 >(function ColorPickerEyeDropper(props, ref) {
@@ -105,7 +105,7 @@ export const ColorPickerEyeDropper = forwardRef<
   );
 });
 
-export const ColorPickerChannelSlider = forwardRef<
+export const ColorPickerChannelSlider = React.forwardRef<
   HTMLDivElement,
   ChakraColorPicker.ChannelSliderProps
 >(function ColorPickerSlider(props, ref) {
@@ -118,7 +118,7 @@ export const ColorPickerChannelSlider = forwardRef<
   );
 });
 
-export const ColorPickerSwatchTrigger = forwardRef<
+export const ColorPickerSwatchTrigger = React.forwardRef<
   HTMLButtonElement,
   ChakraColorPicker.SwatchTriggerProps & {
     swatchSize?: ChakraColorPicker.SwatchTriggerProps["boxSize"];
@@ -142,7 +142,7 @@ export const ColorPickerSwatchTrigger = forwardRef<
   );
 });
 
-export const ColorPickerRoot = forwardRef<
+export const ColorPickerRoot = React.forwardRef<
   HTMLDivElement,
   ChakraColorPicker.RootProps
 >(function ColorPickerRoot(props, ref) {
@@ -161,7 +161,7 @@ const formatMap = {
   hexa: ["hex", "alpha"],
 } as const;
 
-export const ColorPickerChannelInputs = forwardRef<
+export const ColorPickerChannelInputs = React.forwardRef<
   HTMLDivElement,
   ChakraColorPicker.ViewProps
 >(function ColorPickerChannelInputs(props, ref) {
@@ -186,7 +186,7 @@ export const ColorPickerChannelInputs = forwardRef<
   );
 });
 
-export const ColorPickerChannelSliders = forwardRef<
+export const ColorPickerChannelSliders = React.forwardRef<
   HTMLDivElement,
   ChakraColorPicker.ViewProps
 >(function ColorPickerChannelSliders(props, ref) {

diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
@@ -7,7 +7,7 @@ export interface InputGroupProps extends BoxProps {
   endElementProps?: InputElementProps;
   startElement?: React.ReactNode;
   endElement?: React.ReactNode;
-  children: React.ReactElement;
+  children: React.ReactElement<InputElementProps>;
   startOffset?: InputElementProps["paddingStart"];
   endOffset?: InputElementProps["paddingEnd"];
 }
@@ -25,14 +25,17 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       ...rest
     } = props;
 
+    const child =
+      React.Children.only<React.ReactElement<InputElementProps>>(children);
+
     return (
       <Group ref={ref} {...rest}>
         {startElement && (
           <InputElement pointerEvents="none" {...startElementProps}>
             {startElement}
           </InputElement>
         )}
-        {React.cloneElement(children, {
+        {React.cloneElement(child, {
           ...(startElement && {
             ps: `calc(var(--input-height) - ${startOffset})`,
           }),

diff --git a/src/components/ui/radio.tsx b/src/components/ui/radio.tsx
@@ -4,12 +4,11 @@ import * as React from "react";
 export interface RadioProps extends ChakraRadioGroup.ItemProps {
   rootRef?: React.Ref<HTMLDivElement>;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  checked?: boolean;
 }
 
 export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
   function Radio(props, ref) {
-    const { children, inputProps, rootRef, checked, ...rest } = props;
+    const { children, inputProps, rootRef, ...rest } = props;
     return (
       <ChakraRadioGroup.Item ref={rootRef} {...rest}>
         <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />

diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
@@ -16,18 +16,18 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       showArrow,
       children,
       disabled,
-      portalled,
+      portalled = true,
       content,
       contentProps,
       portalRef,
-      openDelay,
+      openDelay = 0,
       ...rest
     } = props;
 
     if (disabled) return children;
 
     return (
-      <ChakraTooltip.Root openDelay={openDelay ?? 0} {...rest}>
+      <ChakraTooltip.Root openDelay={openDelay} {...rest}>
         <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
         <Portal disabled={!portalled} container={portalRef}>
           <ChakraTooltip.Positioner>

diff --git a/src/lib/colors.ts b/src/lib/colors.ts
@@ -1,9 +1,10 @@
+import { ColorMode } from "../components/ui/color-mode";
 import { Activity } from "./activity";
 
 /** The type of color schemes. */
 export type ColorScheme = {
   name: string;
-  colorMode: "light" | "dark";
+  colorMode: ColorMode;
   backgroundColors: Array<string>;
 };