chore: finish frontend ESLint migration #18

Enable every plugin recommended preset and replace Biome with ESLint formatting.

Preserve API contracts and JSX whitespace; verify source, tests, builds and tooling.

src/pages/cards/ui/CardsPage/CardsPage.test.tsx

@@ -7,37 +7,41 @@ import {
 	waitFor,
 	within,
 } from "@testing-library/react";
-import { HttpResponse, http } from "msw";
+import { http, HttpResponse } from "msw";
 import { MemoryRouter } from "react-router";
 import { describe, expect, it } from "vitest";
+
 import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
+
 import { CardsPage } from "./CardsPage";
 
 const money = (value: string) => ({ currency: "RUB", value });
-function renderCards(fail = false, categoryFail = false) {
+function renderCards(isFail = false, hasCategoryFailure = false) {
 	configureAuthClient({
 		accessToken: () => "test",
-		refresh: async () => false,
 		clear: () => {},
+		refresh: () => Promise.resolve(false),
 	});
 	server.use(
 		http.get("*/api/v1/bank-cards/categories", () =>
-			categoryFail ? HttpResponse.error() : HttpResponse.json([]),
+			hasCategoryFailure ? HttpResponse.error() : HttpResponse.json([]),
 		),
 		http.get("*/api/v1/bank-cards", () =>
-			fail ? HttpResponse.error() : HttpResponse.json([]),
+			isFail ? HttpResponse.error() : HttpResponse.json([]),
 		),
 		http.get("*/api/v1/bank-cards/summary", () =>
-			HttpResponse.json({
-				month: "2026-09",
-				cardId: null,
-				expenses: money("0"),
-				refunds: money("0"),
-				net: money("0"),
-				categories: [],
-			}),
+			HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+				{
+					cardId: null,
+					categories: [],
+					expenses: money("0"),
+					month: "2026-09",
+					net: money("0"),
+					refunds: money("0"),
+				}
+				/* eslint-enable unicorn/no-null */)),
 		),
 	);
 	return render(
@@ -64,9 +68,9 @@ describe("CardsPage", () => {
 			http.post("*/api/v1/bank-cards", async ({ request }) => {
 				submitted.push((await request.json()) as Record<string, unknown>);
 				if (submitted.length === 1) {
-					await new Promise<void>((r) => {
-						resolve = r;
-					});
+					const deferred = Promise.withResolvers<void>();
+					resolve = deferred.resolve;
+					await deferred.promise;
 					return HttpResponse.error();
 				}
 				return HttpResponse.json({ id: submitted[0].id }, { status: 201 });
@@ -107,12 +111,14 @@ describe("CardsPage", () => {
 			expect(screen.queryByRole("dialog")).not.toBeInTheDocument(),
 		);
 		expect(submitted[0]).toEqual(submitted[1]);
-		expect(submitted[0]).toMatchObject({
-			name: "Повседневная",
-			bankName: null,
-			lastFour: null,
-			openingBalance: money("-92233720368547758.08"),
-		});
+		expect(submitted[0]).toMatchObject((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+			{
+				bankName: null,
+				lastFour: null,
+				name: "Повседневная",
+				openingBalance: money("-92233720368547758.08"),
+			}
+			/* eslint-enable unicorn/no-null */));
 	});
 	it("uses archive only for card list and keeps all-card summary including negative net", async () => {
 		renderCards();
@@ -121,17 +127,19 @@ describe("CardsPage", () => {
 			http.get("*/api/v1/bank-cards", ({ request }) => {
 				requests.push(new URL(request.url).search);
 				return HttpResponse.json([
-					{
-						id: "demo",
-						name: "Запасная",
-						bankName: null,
-						lastFour: null,
-						balance: money("0"),
-						archivedAt: "2026-09-01",
-						version: 1,
-						openingBalance: money("0"),
-						openingDate: "2026-01-01",
-					},
+					(/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+						{
+							archivedAt: "2026-09-01",
+							balance: money("0"),
+							bankName: null,
+							id: "demo",
+							lastFour: null,
+							name: "Запасная",
+							openingBalance: money("0"),
+							openingDate: "2026-01-01",
+							version: 1,
+						}
+					/* eslint-enable unicorn/no-null */),
 				]);
 			}),
 		);
@@ -154,13 +162,15 @@ describe("CardsPage", () => {
 		server.use(
 			http.get("*/api/v1/bank-cards/summary", ({ request }) => {
 				requests.push(new URL(request.url).search);
-				return HttpResponse.json({
-					cardId: null,
-					expenses: money("0"),
-					refunds: money("0"),
-					net: money("0"),
-					categories: [],
-				});
+				return HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+					{
+						cardId: null,
+						categories: [],
+						expenses: money("0"),
+						net: money("0"),
+						refunds: money("0"),
+					}
+					/* eslint-enable unicorn/no-null */));
 			}),
 		);
 		fireEvent.click(screen.getByLabelText("Период"));
@@ -202,7 +212,7 @@ describe("CardsPage", () => {
 		server.use(
 			http.get("*/api/v1/bank-cards/categories", () =>
 				HttpResponse.json([
-					{ id: "default", name: "Другое", version: 1, isDefault: true },
+					{ id: "default", isDefault: true, name: "Другое", version: 1 },
 				]),
 			),
 		);

src/pages/cards/ui/CardsPage/CardsPage.tsx

@@ -1,5 +1,7 @@
 import type { FC } from "react";
+
 import { BankCardForm, CategoryManager } from "@/entities/bank-card";
+
 import { CardsPageView } from "./CardsPage.view";
 import { useCardsPageVm } from "./CardsPage.vm";
 

src/pages/cards/ui/CardsPage/CardsPage.view.tsx

@@ -1,3 +1,5 @@
+import type { FC } from "react";
+
 import {
 	ActionIcon,
 	Button,
@@ -12,79 +14,91 @@ import {
 } from "@mantine/core";
 import { AddIcon } from "@wealthledger/icons";
 import { LoadingSkeleton, StateView } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+
 import {
 	BankCardFace,
 	BankFeedback,
 	BankPeriodPicker,
 	BankSummaryView,
 } from "@/entities/bank-card";
-import classes from "./CardsPage.module.css";
+
 import type { CardsPageVm } from "./CardsPage.vm";
 
+import classes from "./CardsPage.module.css";
+
 type CardsPageViewProps = { vm: CardsPageVm };
 const CardsPageView: FC<CardsPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
-	return (
-		<Stack gap="lg">
-			<Group gap="sm">
-				<Title order={1}>{t("bank.title")}</Title>
-				<ActionIcon
-					size="lg"
-					variant="light"
-					aria-label={t("bank.addCard")}
-					title={t("bank.addCard")}
-					onClick={() => vm.setAdding(true)}
-				>
-					<AddIcon size={20} strokeWidth={2} />
-				</ActionIcon>
-			</Group>
-			<Switch
-				label={t("bank.showArchive")}
-				checked={vm.archive}
-				onChange={(event) => vm.setArchive(event.currentTarget.checked)}
-			/>
-			{vm.items ? (
-				vm.items.length ? (
+
+	function renderCards() {
+		if (vm.items) {
+			if (vm.items.length > 0) {
+				return (
 					<SimpleGrid cols={{ base: 1, sm: 2 }}>
-						{vm.items.map((card) => (
+						{vm.items.map(card => (
 							<Paper
-								key={card.id}
-								component={Link}
-								to={card.to}
-								p={0}
 								className={classes.card}
+								component={Link}
+								key={card.id}
+								p={0}
+								to={card.to}
 							>
 								<BankCardFace card={card} />
 							</Paper>
 						))}
 					</SimpleGrid>
-				) : (
-					<StateView
-						title={t("bank.empty")}
-						text={t(vm.archive ? "bank.emptyHint" : "bank.noActive")}
-						action={
-							<Button onClick={() => vm.setAdding(true)}>
-								{t("bank.addCard")}
-							</Button>
-						}
-					/>
-				)
-			) : vm.cards.isLoading ? (
+				);
+			}
+			return (
+				<StateView
+					action={(
+						<Button onClick={() => vm.setAdding(true)}>
+							{t("bank.addCard")}
+						</Button>
+					)}
+					text={t(vm.archive ? "bank.emptyHint" : "bank.noActive")}
+					title={t("bank.empty")}
+				/>
+			);
+		}
+		if (vm.cards.isLoading) {
+			return (
 				<LoadingSkeleton label={t("bank.loading")}>
 					<SimpleGrid cols={{ base: 1, sm: 2 }}>
 						<Skeleton h={250} />
 						<Skeleton h={250} />
 					</SimpleGrid>
 				</LoadingSkeleton>
-			) : null}
+			);
+		}
+	}
+	return (
+		<Stack gap="lg">
+			<Group gap="sm">
+				<Title order={1}>{t("bank.title")}</Title>
+				<ActionIcon
+					aria-label={t("bank.addCard")}
+					onClick={() => vm.setAdding(true)}
+					size="lg"
+					title={t("bank.addCard")}
+					variant="light"
+				>
+					<AddIcon size={20} strokeWidth={2} />
+				</ActionIcon>
+			</Group>
+			<Switch
+				checked={vm.archive}
+				label={t("bank.showArchive")}
+				onChange={event => vm.setArchive(event.currentTarget.checked)}
+			/>
+			{renderCards()}
 			{vm.cards.isError && (
 				<Group role="alert">
 					<Text>{t(vm.items ? "bank.refreshError" : "bank.error")}</Text>
-					<Button variant="default" onClick={() => void vm.cards.refetch()}>
+					<Button onClick={() => void vm.cards.refetch()} variant="default">
 						{t("bank.retry")}
 					</Button>
 				</Group>
@@ -93,26 +107,26 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 				<Text role="status">{t("bank.refreshing")}</Text>
 			)}
 			<Group align="flex-end" justify="space-between">
-				<BankPeriodPicker period={vm.period} onChange={vm.setPeriod} />
+				<BankPeriodPicker onChange={vm.setPeriod} period={vm.period} />
 				{Boolean(vm.categories.data?.length || vm.cards.data?.length) && (
 					<Button
-						variant="subtle"
 						color="gray"
-						onClick={() => vm.setManagingCategories(true)}
-						leftSection={
+						leftSection={(
 							<svg
-								width="18"
-								height="18"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								strokeWidth="1.7"
-								strokeLinejoin="round"
 								aria-hidden="true"
+								fill="none"
+								height="18"
+								stroke="currentColor"
+								strokeLinejoin="round"
+								strokeWidth="1.7"
+								viewBox="0 0 24 24"
+								width="18"
 							>
 								<path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" />
 							</svg>
-						}
+						)}
+						onClick={() => vm.setManagingCategories(true)}
+						variant="subtle"
 					>
 						{t("bank.categories")}
 					</Button>
@@ -121,16 +135,16 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 			<BankSummaryView
 				all
 				data={vm.summary.data}
-				loading={vm.summary.isLoading}
 				error={vm.summary.isError}
 				fetching={vm.summary.isFetching}
+				loading={vm.summary.isLoading}
 				retry={() => void vm.summary.refetch()}
 			/>
 			{vm.categories.isError && (
 				<BankFeedback
-					loadingError
-					error={vm.categories.error}
 					cached={Boolean(vm.categories.data)}
+					error={vm.categories.error}
+					loadingError
 					retry={() => void vm.categories.refetch()}
 				/>
 			)}

src/pages/cards/ui/CardsPage/CardsPage.vm.ts

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useSearchParams } from "react-router";
+
 import {
 	bankPeriod,
 	useBankCards,
@@ -7,9 +8,10 @@ import {
 	useBankSummary,
 } from "@/entities/bank-card";
 
+type CardsPageVm = ReturnType<typeof useCardsPageVm>;
 function useCardsPageVm() {
-	const [params, setParams] = useSearchParams();
-	const period = bankPeriod(params);
+	const [parameters, setParameters] = useSearchParams();
+	const period = bankPeriod(parameters);
 	const [archive, setArchive] = useState(false);
 	const categories = useBankCategories();
 	const [managingCategories, setManagingCategories] = useState(false);
@@ -17,25 +19,24 @@ function useCardsPageVm() {
 	const cards = useBankCards(archive);
 	const summary = useBankSummary(period);
 	return {
-		categories,
-		managingCategories,
-		setManagingCategories,
-		period,
-		archive,
-		setArchive,
 		adding,
-		setAdding,
+		archive,
 		cards,
-		summary,
-		setPeriod: (value: [string | null, string | null]) => {
-			if (value[0] && value[1]) setParams({ from: value[0], to: value[1] });
-		},
-		items: cards.data?.map((card) => ({
+		categories,
+		items: cards.data?.map(card => ({
 			...card,
 			to: `/cards/${card.id}?${new URLSearchParams(period)}`,
 		})),
+		managingCategories,
+		period,
+		setAdding,
+		setArchive,
+		setManagingCategories,
+		setPeriod: (value: [null | string, null | string]) => {
+			if (value[0] && value[1]) setParameters({ from: value[0], to: value[1] });
+		},
+		summary,
 	};
 }
-type CardsPageVm = ReturnType<typeof useCardsPageVm>;
 
 export { type CardsPageVm, useCardsPageVm };