style: apply biome suggestions

Signed-off-by: rare-magma <[email protected]>

src/App.test.tsx

@@ -1,5 +1,6 @@
 import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
 import App from "./App";
 import { budgetsDB, calcHistDB, optionsDB } from "./db";
 import {

src/components/Budget/Budget.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import { itemForm1, itemForm2 } from "../../setupTests";
 import { Budget } from "./Budget";
 

src/components/Budget/BudgetPage.test.tsx

@@ -1,5 +1,6 @@
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
 import { budgetsDB } from "../../db";
 import {
   budgetContextSpy,

src/components/Budget/BudgetPage.tsx

@@ -76,6 +76,7 @@ export function BudgetPage() {
 
   // useWhatChanged([budget, name]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     try {
       const shouldLoadBudgetsFromList =
@@ -98,7 +99,6 @@ export function BudgetPage() {
       handleError(e);
       setLoadingFromDB(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [name, loadingFromDB]);
 
   return (

src/components/Budget/CsvItem.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import { CsvItem } from "./CsvItem";
 
 describe("CsvItem", () => {

src/components/CalculateButton/CalculateButton.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { itemForm1 } from "../../setupTests";
 import { CalculateButton } from "./CalculateButton";
 

src/components/CalculateButton/CalculateButton.tsx

@@ -89,9 +89,9 @@ export function CalculateButton({
       });
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     getHistory();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showHistory]);
 
   return (

src/components/Chart/Chart.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { testBudgetList } from "../../setupTests";
 import { Budget } from "../Budget/Budget";
 import { Chart } from "./Chart";
@@ -20,7 +21,6 @@ describe("Chart", () => {
   );
 
   beforeEach(() => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
     delete window.ResizeObserver;
     window.ResizeObserver = vi.fn().mockImplementation(() => ({

src/components/Chart/ChartTooltip.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import { ChartTooltip } from "./ChartTooltip";
 
 describe("ChartTooltip", () => {

src/components/Chart/DynamicYAxis.ts

@@ -1,13 +1,6 @@
-/* eslint-disable eqeqeq */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useCallback, useMemo, useState } from "react";
 
-const RECHART_CERTESIAN_AXIS_TICK_VALUE_SELECTOR = `.recharts-cartesian-axis-tick-value[orientation="left"],
+const RECHART_CARTESIAN_AXIS_TICK_VALUE_SELECTOR = `.recharts-cartesian-axis-tick-value[orientation="left"],
 .recharts-cartesian-axis-tick-value[orientation="right"]`;
 
 interface Props {
@@ -23,31 +16,28 @@ export function useDynamicYAxisWidth(props: void | Props): ReturnValues {
   const { yAxisWidthModifier } = props || {};
   const [yAxisWidthState, setYAxisWidthState] = useState(undefined);
 
-  const setChartRef = useCallback(
-    (chartRef: any) => {
-      if (chartRef?.container != null) {
-        const tickValueElements = chartRef.container.querySelectorAll(
-          RECHART_CERTESIAN_AXIS_TICK_VALUE_SELECTOR,
-        );
-        const highestWidth = [...tickValueElements]
-          .map((el) => {
-            const boundingRect = el.getBoundingClientRect();
-            if (boundingRect?.width != null) {
-              return boundingRect.width;
-            }
-            return 0;
-          })
-          .reduce((accumulator, value) => {
-            if (accumulator < value) {
-              return value;
-            }
-            return accumulator;
-          }, 0);
-        setYAxisWidthState(highestWidth);
-      }
-    },
-    [setYAxisWidthState],
-  );
+  const setChartRef = useCallback((chartRef: any) => {
+    if (chartRef?.container != null) {
+      const tickValueElements = chartRef.container.querySelectorAll(
+        RECHART_CARTESIAN_AXIS_TICK_VALUE_SELECTOR,
+      );
+      const highestWidth = [...tickValueElements]
+        .map((el) => {
+          const boundingRect = el.getBoundingClientRect();
+          if (boundingRect?.width != null) {
+            return boundingRect.width;
+          }
+          return 0;
+        })
+        .reduce((accumulator, value) => {
+          if (accumulator < value) {
+            return value;
+          }
+          return accumulator;
+        }, 0);
+      setYAxisWidthState(highestWidth);
+    }
+  }, []);
 
   const yAxisWidth = useMemo(() => {
     if (yAxisWidthModifier != null && yAxisWidthState != null) {

src/components/ChartsPage/ChartsPage.test.tsx

@@ -1,14 +1,14 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import ChartsPage from "./ChartsPage";
 
 describe("ChartsPage", () => {
   const onShowGraphs = vi.fn();
   const comp = <ChartsPage onShowGraphs={onShowGraphs} />;
 
   beforeEach(() => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
     delete window.ResizeObserver;
     window.ResizeObserver = vi.fn().mockImplementation(() => ({

src/components/ChartsPage/ChartsPage.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { MutableRefObject, useRef, useState } from "react";
 import {
   Button,
   Col,
@@ -75,9 +75,7 @@ function ChartsPage({ onShowGraphs }: GraphProps) {
     ["/", "f"],
     (e) =>
       !e.repeat &&
-      focusRef(
-        filterRef as unknown as React.MutableRefObject<HTMLInputElement>,
-      ),
+      focusRef(filterRef as unknown as MutableRefObject<HTMLInputElement>),
     { preventDefault: true },
   );
 

src/components/ErrorModal/ErrorModal.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it } from "vitest";
 import {
   generalContextSpy,
   testCsvErrorGeneralContext,

src/components/ItemForm/ItemForm.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import { ItemForm } from "./ItemForm";
 
 describe("ItemForm", () => {

src/components/ItemForm/ItemFormGroup.test.tsx

@@ -1,6 +1,7 @@
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
 import {
   configContextSpy,
   itemForm1,
@@ -11,7 +12,7 @@ import {
 import { ItemFormGroup } from "./ItemFormGroup";
 
 describe("ItemFormGroup", () => {
-  const ref = React.createRef<HTMLInputElement>();
+  const ref = createRef<HTMLInputElement>();
   const comp = (
     <ItemFormGroup
       itemForm={itemForm1}

src/components/ItemForm/ItemFormGroup.tsx

@@ -1,4 +1,5 @@
 import { produce } from "immer";
+import React from "react";
 import { RefObject, useRef, useState } from "react";
 import {
   Button,
@@ -108,9 +109,11 @@ export function ItemFormGroup({
           break;
       }
 
-      isExpense
-        ? (draft.expenses.total = roundBig(calcTotal(draft.expenses.items), 2))
-        : (draft.incomes.total = roundBig(calcTotal(draft.incomes.items), 2));
+      if (isExpense) {
+        draft.expenses.total = roundBig(calcTotal(draft.expenses.items), 2);
+      } else {
+        draft.incomes.total = roundBig(calcTotal(draft.incomes.items), 2);
+      }
       draft.stats.available = roundBig(calcAvailable(draft), 2);
       draft.stats.withGoal = calcWithGoal(draft);
       draft.stats.saved = calcSaved(draft);
@@ -125,7 +128,11 @@ export function ItemFormGroup({
 
     const newTable = isExpense ? ({} as Expense) : ({} as Income);
     const newState = produce((draft) => {
-      isExpense ? (draft.expenses = newTable) : (draft.incomes = newTable);
+      if (isExpense) {
+        draft.expenses = newTable;
+      } else {
+        draft.incomes = newTable;
+      }
       newTable.items = table.items.filter((item) => item.id !== toBeDeleted.id);
       newTable.total = roundBig(calcTotal(newTable.items), 2);
       draft.stats.available = roundBig(calcAvailable(draft), 2);

src/components/LandingPage/LandingPage.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it } from "vitest";
 import {
   budgetContextSpy,
   generalContextSpy,

src/components/LandingPage/LandingPage.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useRef } from "react";
 import { Button, Container, Form, Row, Stack } from "react-bootstrap";
 import { useWindowSize } from "usehooks-ts";

src/components/Loading/Loading.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import { Loading } from "./Loading";
 
 describe("Loading", () => {

src/components/NavBar/NavBar.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
 import {
   budgetContextSpy,
   setBudgetMock,

src/components/NavBar/NavBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Offcanvas, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { AsyncTypeahead } from "react-bootstrap-typeahead";
 import "react-bootstrap-typeahead/css/Typeahead.bs5.css";

src/components/NavBar/NavBarDelete.tsx

@@ -1,9 +1,10 @@
+import { RefObject } from "react";
 import { Button, Nav, OverlayTrigger, Popover, Tooltip } from "react-bootstrap";
 import { BsXLg } from "react-icons/bs";
 import { useBudget } from "../../context/BudgetContext";
 
 interface NavBarDeleteProps {
-  deleteButtonRef: React.RefObject<HTMLButtonElement>;
+  deleteButtonRef: RefObject<HTMLButtonElement>;
   handleRemove: (i: string) => void;
   expanded: boolean;
 }

src/components/NavBar/NavBarImpExp.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useRef } from "react";
+import React, { Dispatch, SetStateAction, useRef } from "react";
 import {
   Button,
   Form,

src/components/NavBar/NavBarSettings.tsx

@@ -97,6 +97,7 @@ export function NavBarSettings({ expanded }: NavBarSettingsProps) {
                     ref={versionRef}
                     rel="noreferrer"
                   >
+                    {/* biome-ignore lint/correctness/noUndeclaredVariables: <explanation> */}
                     v{APP_VERSION}
                   </a>
                 </OverlayTrigger>

src/components/Notification/Notification.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
 import { BudgetNotification } from "../../context/GeneralContext";
 import { setNotificationsMock, undoMock } from "../../setupTests";
 import { Notification } from "./Notification";

src/components/StatCard/Stat.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import { Stat } from "./Stat";
 
 describe("Stat", () => {

src/components/StatCard/StatCard.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { setBudgetMock, testBudget } from "../../setupTests";
 import { StatCard } from "./StatCard";
 

src/components/StatCard/StatCard.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import {
   Button,
   Card,

src/components/TableCard/Expense.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import { itemForm1, itemForm2 } from "../../setupTests";
 import { Expense } from "./Expense";
 

src/components/TableCard/Income.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import { itemForm1, itemForm2 } from "../../setupTests";
 import { Income } from "./Income";
 

src/components/TableCard/TableCard.test.tsx

@@ -1,5 +1,6 @@
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
 import { setBudgetMock, testBudget } from "../../setupTests";
 import { TableCard } from "./TableCard";
 

src/components/TableCard/TableCard.tsx

@@ -47,17 +47,23 @@ export function TableCard({ header: label }: TableCardProps) {
   function reorderTable(newOrder: ItemForm[]) {
     if (!budget) return;
     const newState = produce((draft) => {
-      isExpense
-        ? (draft.expenses.items = newOrder)
-        : (draft.incomes.items = newOrder);
+      if (isExpense) {
+        draft.expenses.items = newOrder;
+      } else {
+        draft.incomes.items = newOrder;
+      }
     }, budget);
     setBudget(newState(), true);
   }
 
   function handleTableChange(item: Income | Expense) {
     if (!budget) return;
     const newState = produce((draft) => {
-      isExpense ? (draft.expenses = item) : (draft.incomes = item);
+      if (isExpense) {
+        draft.expenses = item;
+      } else {
+        draft.incomes = item;
+      }
       draft.stats.available = roundBig(calcAvailable(draft), 2);
       draft.stats.withGoal = calcWithGoal(draft);
       draft.stats.saved = calcSaved(draft);

src/context/BudgetContext.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import { testBudget, testBudgetList } from "../setupTests";
 import { BudgetProvider, useBudget } from "./BudgetContext";