chore: upgrade to react 19; remove forwardRef (#189)

nihalgonsalves · Jan 17, 2025 · 14faec9 · 14faec9
1 parent 04f08ae
commit 14faec9
Show file tree

Hide file tree

Showing 32 changed files with 691 additions and 716 deletions.
diff --git a/packages/e2e/tests/transaction.spec.ts b/packages/e2e/tests/transaction.spec.ts
@@ -22,6 +22,7 @@ test(`creates and edits a personal sheet transaction successfully`, async ({
     page.getByRole("heading", { name: "Add Transaction" }),
   ).toBeVisible();
 
+  await expect(page.getByLabel(/amount/i)).toBeFocused();
   await page.getByLabel(/amount/i).pressSequentially("10000");
   await page.getByLabel(/category/i).click();
 
@@ -84,6 +85,7 @@ test(`creates a shared sheet transaction successfully`, async ({
     page.getByRole("heading", { name: "Add Transaction" }),
   ).toBeVisible();
 
+  await expect(page.getByLabel(/how much/i)).toBeFocused();
   await page.getByLabel(/how much/i).pressSequentially("10000");
   await page.getByLabel(/category/i).click();
 

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -64,10 +64,9 @@
     "little-date": "^1.0.0",
     "motion": "^11.18.0",
     "papaparse": "^5.5.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-day-picker": "^8.10.1",
-    "react-dom": "^18.3.1",
-    "react-helmet": "^6.1.0",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-hot-toast": "^2.5.1",
     "react-router": "^7.1.2",
@@ -95,9 +94,8 @@
     "@storybook/test-runner": "^0.21.0",
     "@types/loadable__component": "^5",
     "@types/papaparse": "^5.3.15",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-helmet": "^6",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.0.1",
     "autoprefixer": "^10.4.20",

diff --git a/packages/frontend/src/api/requestExport.tsx b/packages/frontend/src/api/requestExport.tsx
@@ -17,7 +17,7 @@ export const requestExport = async <TData,>(
     fetch(),
     {
       loading: "Preparing download...",
-      success: (data) => {
+      success: (data: TData[]) => {
         const mapped = data.map((item) => mapItem(item));
 
         const blob =

diff --git a/packages/frontend/src/components/FloatingActionButton.tsx b/packages/frontend/src/components/FloatingActionButton.tsx
@@ -1,6 +1,6 @@
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon";
 import { motion } from "motion/react";
-import React from "react";
+import type React from "react";
 import { Link } from "react-router";
 
 import { Button } from "./ui/button";
@@ -14,6 +14,7 @@ import {
 const MotionButton = motion.create(Button);
 
 type FloatingActionButtonProps = {
+  ref?: React.Ref<HTMLDivElement>;
   label: string;
   icon: React.ReactNode;
 } & (
@@ -31,10 +32,13 @@ type FloatingActionButtonProps = {
     }
 );
 
-export const FloatingActionButton = React.forwardRef<
-  HTMLDivElement,
-  FloatingActionButtonProps
->(({ to, onClick, label, icon }, ref) => (
+export const FloatingActionButton = ({
+  ref,
+  to,
+  onClick,
+  label,
+  icon,
+}: FloatingActionButtonProps) => (
   <div ref={ref} className="sticky bottom-0 w-full">
     <TooltipProvider delayDuration={100}>
       <Tooltip>
@@ -71,5 +75,4 @@ export const FloatingActionButton = React.forwardRef<
       </Tooltip>
     </TooltipProvider>
   </div>
-));
-FloatingActionButton.displayName = "FloatingActionButton";
+);
diff --git a/packages/frontend/src/components/form/CategorySelect.tsx b/packages/frontend/src/components/form/CategorySelect.tsx
@@ -1,7 +1,7 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 import { CaretSortIcon } from "@radix-ui/react-icons";
 import { Popover } from "@radix-ui/react-popover";
-import { forwardRef, useState } from "react";
+import { useState } from "react";
 import type { ControllerRenderProps } from "react-hook-form";
 
 import { trpc } from "../../api/trpc";
@@ -28,112 +28,105 @@ type CategorySelectProps = {
   onChange: (newCategory: string | undefined) => void;
   className?: string;
   placeholder?: string;
-} & Omit<ControllerRenderProps, "value" | "onChange" | "ref">;
+} & Pick<React.ComponentProps<typeof Button>, "ref"> &
+  Omit<ControllerRenderProps, "value" | "onChange" | "ref">;
 
-export const CategorySelect = forwardRef<
-  HTMLButtonElement,
-  CategorySelectProps
->(
-  (
-    {
-      id,
-      value,
-      onChange,
-      onBlur,
-      className,
-      placeholder = "Select a category",
-      ...controllerProps
-    },
-    ref,
-  ) => {
-    const [open, setOpen] = useState(false);
-    const [searchValue, setSearchValue] = useState("");
+export const CategorySelect = ({
+  ref,
+  id,
+  value,
+  onChange,
+  onBlur,
+  className,
+  placeholder = "Select a category",
+  ...controllerProps
+}: CategorySelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
 
-    const { data: categories } = trpc.transaction.getCategories.useQuery();
+  const { data: categories } = trpc.transaction.getCategories.useQuery();
 
-    return (
-      <Popover open={open} onOpenChange={setOpen} modal>
-        <PopoverTrigger asChild>
-          <Button
-            {...controllerProps}
-            id={id}
-            ref={ref}
-            $variant="outline"
-            role="combobox"
-            className={cn("min-w-48 justify-between", className)}
-          >
-            {value ?? placeholder}
-            <CaretSortIcon className="ml-2 size-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
-          <Command>
-            <CommandInput
-              inputMode="search"
-              placeholder="Search"
-              value={searchValue}
-              onValueChange={setSearchValue}
-            />
-            <CommandList>
-              {/* Only displayed when allowCreate=false, as otherwise there's always a CommandItem */}
-              <CommandEmpty>No category found</CommandEmpty>
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal>
+      <PopoverTrigger asChild>
+        <Button
+          {...controllerProps}
+          id={id}
+          ref={ref}
+          $variant="outline"
+          role="combobox"
+          className={cn("min-w-48 justify-between", className)}
+        >
+          {value ?? placeholder}
+          <CaretSortIcon className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+        <Command>
+          <CommandInput
+            inputMode="search"
+            placeholder="Search"
+            value={searchValue}
+            onValueChange={setSearchValue}
+          />
+          <CommandList>
+            {/* Only displayed when allowCreate=false, as otherwise there's always a CommandItem */}
+            <CommandEmpty>No category found</CommandEmpty>
 
-              <ScrollArea viewportClassName="max-h-64">
-                <CommandGroup className="h-full overflow-y-auto">
-                  {value ? (
-                    <>
-                      <CommandItem
-                        className="opacity-80"
-                        value="unset"
-                        onSelect={() => {
-                          onChange(undefined);
-                          setOpen(false);
-                          onBlur();
-                        }}
-                      >
-                        Clear Selection
-                      </CommandItem>
-                      <CommandSeparator />
-                    </>
-                  ) : null}
-
-                  {categories?.map((category) => (
+            <ScrollArea viewportClassName="max-h-64">
+              <CommandGroup className="h-full overflow-y-auto">
+                {value ? (
+                  <>
                     <CommandItem
-                      key={category.id}
-                      value={category.id}
+                      className="opacity-80"
+                      value="unset"
                       onSelect={() => {
-                        onChange(category.id);
+                        onChange(undefined);
                         setOpen(false);
+                        onBlur();
                       }}
                     >
-                      <div className="mr-2">
-                        <CategoryIcon category={category.id} />
-                      </div>
-                      {category.id}
+                      Clear Selection
                     </CommandItem>
-                  ))}
+                    <CommandSeparator />
+                  </>
+                ) : null}
+
+                {categories?.map((category) => (
+                  <CommandItem
+                    key={category.id}
+                    value={category.id}
+                    onSelect={() => {
+                      onChange(category.id);
+                      setOpen(false);
+                    }}
+                  >
+                    <div className="mr-2">
+                      <CategoryIcon category={category.id} />
+                    </div>
+                    {category.id}
+                  </CommandItem>
+                ))}
 
-                  {searchValue.length > 0 &&
-                    !categories?.some((c) => c.id === searchValue) && (
-                      <CommandItem
-                        value={searchValue}
-                        onSelect={() => {
-                          onChange(searchValue);
-                          setOpen(false);
-                          onBlur();
-                        }}
-                      >
-                        <PlusIcon className="mr-2 size-4" />
-                        Create {`'${searchValue}'`}
-                      </CommandItem>
-                    )}
-                </CommandGroup>
-              </ScrollArea>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-CategorySelect.displayName = "CategorySelect";
+                {searchValue.length > 0 &&
+                  !categories?.some((c) => c.id === searchValue) && (
+                    <CommandItem
+                      value={searchValue}
+                      onSelect={() => {
+                        onChange(searchValue);
+                        setOpen(false);
+                        onBlur();
+                      }}
+                    >
+                      <PlusIcon className="mr-2 size-4" />
+                      Create {`'${searchValue}'`}
+                    </CommandItem>
+                  )}
+              </CommandGroup>
+            </ScrollArea>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};