fix(deps): update dependency recharts to v3

.gitea/workflows/lint.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
 
       - name: Install pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4

package.json

@@ -36,12 +36,11 @@
   "devDependencies": {
     "@tailwindcss/postcss": "4.1.17",
     "@types/node": "24.10.1",
-    "@types/react": "19.2.5",
+    "@types/react": "19.2.6",
     "@types/react-dom": "19.2.3",
     "eslint": "9.39.1",
     "eslint-config-next": "16.0.3",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-react-hooks": "5.2.0",
     "postcss": "8.5.6",
     "prettier": "3.6.2",
     "prettier-plugin-tailwindcss": "0.7.1",
@@ -56,7 +55,7 @@
   "packageManager": "pnpm@10.22.0",
   "pnpm": {
     "overrides": {
-      "@types/react": "19.2.5",
+      "@types/react": "19.2.6",
       "@types/react-dom": "19.2.3"
     }
   }

src/app/components/BackgroundPattern.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useState, useEffect } from "react";
+import type React from "react";
 import {
   type LucideIcon,
   HandCoins,
@@ -112,14 +113,15 @@ export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
     Target,
   ];
 
-  const renderIcons = ({
+  const [icons, setIcons] = useState<React.ReactElement[]>([]);
-    rows,
+
-    columns,
+  useEffect(() => {
-  }: {
+    if (rows === 0 || columns === 0) {
-    rows: number;
+      setIcons([]);
-    columns: number;
+      return;
-  }) => {
+    }
-    const icons = [];
+
+    const iconElements: React.ReactElement[] = [];
     for (let y = 0; y < rows; y++) {
       for (let x = 0; x < columns; x++) {
         // Pick a random icon component from the array
@@ -130,28 +132,30 @@ export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
         const size = 28 + Math.floor(Math.random() * 8);
         const xOffset = Math.floor(Math.random() * (spacing / 1.618));
         const yOffset = Math.floor(Math.random() * (spacing / 1.618));
+        const rotation = Math.round((Math.random() - 0.5) * 30);
 
-        icons.push(
+        iconElements.push(
           <IconComponent
-            key={`icon-${x}-${y}`}
+            key={`icon-${String(x)}-${String(y)}`}
             size={size}
             className="text-primary fixed"
             style={{
-              left: `${x * spacing + xOffset}px`,
+              left: `${String(x * spacing + xOffset)}px`,
-              top: `${y * spacing + yOffset}px`,
+              top: `${String(y * spacing + yOffset)}px`,
               opacity: opacity,
-              transform: `rotate(${Math.round((Math.random() - 0.5) * 30)}deg)`,
+              transform: `rotate(${String(rotation)}deg)`,
             }}
           />,
         );
       }
     }
-    return icons;
+    setIcons(iconElements);
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rows, columns, spacing, opacity]);
 
   return (
     <div className="absolute h-full w-full">
-      {width > 0 && renderIcons({ rows, columns })}
+      {width > 0 && icons}
     </div>
   );
 }

src/app/components/FireCalculatorForm.tsx

@@ -216,7 +216,7 @@ export default function FireCalculatorForm() {
       return [0, 0];
     })();
 
-    if (retirementIndex === -1 || !retirementData) {
+    if (retirementIndex === -1) {
       setResult({
         fireNumber: null,
         fireNumber4percent: null,
@@ -246,7 +246,13 @@ export default function FireCalculatorForm() {
         </CardHeader>
         <CardContent>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                void form.handleSubmit(onSubmit)(e);
+              }}
+              className="space-y-8"
+            >
               <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                 <FormField
                   control={form.control}
@@ -265,7 +271,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -293,7 +300,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -321,7 +329,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -349,7 +358,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -378,7 +388,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -407,7 +418,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -437,7 +449,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -467,7 +480,8 @@ export default function FireCalculatorForm() {
                           step={1}
                           onValueChange={(value: number[]) => {
                             field.onChange(value[0]);
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           className="py-4"
                         />

src/components/ui/chart.tsx

@@ -135,12 +135,12 @@ function ChartTooltipContent({
       return null;
     }
 
-    const [item] = payload;
+    const item = payload[0];
-    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+    const key = labelKey ?? String(item.dataKey ?? item.name ?? "value");
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value =
       !labelKey && typeof label === "string"
-        ? (config[label]?.label ?? label)
+        ? (label in config && config[label].label ? config[label].label : undefined) ?? label
         : itemConfig?.label;
 
     if (labelFormatter) {
@@ -182,7 +182,7 @@ function ChartTooltipContent({
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
         {payload.map((item, index) => {
-          const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+          const key = nameKey ?? String(item.name ?? item.dataKey ?? "value");
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
           const indicatorColor: string | undefined =
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@@ -196,7 +196,7 @@ function ChartTooltipContent({
                 indicator === "dot" && "items-center",
               )}
             >
-              {formatter && item?.value !== undefined && item.name ? (
+              {formatter && item.value !== undefined && item.name ? (
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 formatter(item.value, item.name, item, index, item.payload)
               ) : (

src/components/ui/form.tsx

@@ -134,7 +134,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
 
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
   const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children;
+  const body = error ? (error.message ?? "") : props.children;
 
   if (!body) {
     return null;