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/accounts/ui/AccountsPage/AccountsPage.test.tsx

@@ -1,14 +1,16 @@
 import { MantineProvider } from "@mantine/core";
 import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { HttpResponse, http } from "msw";
+import { http, HttpResponse } from "msw";
 import { MemoryRouter } from "react-router";
 import { describe, expect, it, vi } from "vitest";
+
 import { brokerageAccountsQueryKey } from "@/entities/brokerage-account";
 import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
 import { resource } from "@/test/resource";
 import { server } from "@/test/server";
+
 import { AccountsPage } from "./AccountsPage";
 import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
 import { AccountsPageError } from "./components/AccountsPageError.view";
@@ -17,15 +19,15 @@ import { AccountsPageLoading } from "./components/AccountsPageLoading.view";
 const account = {
 	id: "account-1",
 	name: "Основной",
-	type: "BROKERAGE",
 	openedOn: "2026-01-01",
+	type: "BROKERAGE",
 } as const;
 
 function configureTestAuth() {
 	configureAuthClient({
 		accessToken: () => "test-token",
-		refresh: async () => true,
 		clear: vi.fn(),
+		refresh: () => Promise.resolve(true),
 	});
 }
 
@@ -44,7 +46,7 @@ function renderPage(queryClient: QueryClient) {
 
 describe("AccountsPage", () => {
 	it("loads accounts after retrying an initial HTTP failure", async () => {
-		const modes: (string | null)[] = [];
+		const modes: (null | string)[] = [];
 		server.use(
 			http.get("*/api/v1/brokerage-accounts", ({ request }) => {
 				modes.push(new URL(request.url).searchParams.get("sync"));
@@ -56,6 +58,7 @@ describe("AccountsPage", () => {
 		renderPage(createTestQueryClient());
 		fireEvent.click(await screen.findByRole("button", { name: "Повторить" }));
 		expect(await screen.findByText(account.name)).toBeVisible();
+		// eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response.
 		expect(modes).toEqual([null, "observe"]);
 	});
 	it.each([
@@ -67,8 +70,10 @@ describe("AccountsPage", () => {
 				<State />
 			</MantineProvider>,
 		);
+		// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
 		if (role) expect(screen.getByRole(role)).toBeInTheDocument();
 		else
+			// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
 			expect(
 				screen.getByRole("heading", { name: "Нет инвестиционных счетов" }),
 			).toBeInTheDocument();
@@ -83,7 +88,7 @@ describe("AccountsPage", () => {
 				</MemoryRouter>
 			</MantineProvider>,
 		);
-		screen.getByRole("button", { name: "Повторить" }).click();
+		fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
 		expect(retry).toHaveBeenCalledOnce();
 		expect(
 			screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
@@ -97,9 +102,11 @@ describe("AccountsPage", () => {
 			http.get("*/api/v1/brokerage-accounts", () => {
 				requestCount += 1;
 				if (requestCount === 1) return HttpResponse.json(resource([account]));
-				return new Promise<Response>((resolve) => {
-					resolveRefresh = resolve;
-				});
+				{
+					const deferred = Promise.withResolvers<Response>();
+					resolveRefresh = deferred.resolve;
+					return deferred.promise;
+				}
 			}),
 		);
 		const queryClient = createTestQueryClient();
@@ -135,12 +142,12 @@ describe("AccountsPage", () => {
 			http.get("*/api/v1/brokerage-accounts", () => {
 				requestCount += 1;
 				if (requestCount === 1) return HttpResponse.json(resource([account]));
-				if (requestCount === 2)
-					return HttpResponse.json(
-						{ code: "TBANK_UNAVAILABLE" },
-						{ status: 503 },
-					);
-				return HttpResponse.json(resource([account]));
+				return requestCount === 2
+					? HttpResponse.json(
+							{ code: "TBANK_UNAVAILABLE" },
+							{ status: 503 },
+						)
+					: HttpResponse.json(resource([account]));
 			}),
 		);
 		const queryClient = createTestQueryClient();
@@ -157,7 +164,7 @@ describe("AccountsPage", () => {
 		expect(warning).toBeInTheDocument();
 		expect(screen.getByText(account.name)).toBeInTheDocument();
 
-		screen.getByRole("button", { name: "Повторить" }).click();
+		fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
 		await waitFor(() => expect(requestCount).toBe(3));
 		await waitFor(() => expect(warning).not.toBeInTheDocument());
 		expect(screen.getByText(account.name)).toBeVisible();
@@ -169,11 +176,12 @@ describe("AccountsPage", () => {
 		server.use(
 			http.get("*/api/v1/brokerage-accounts", () => {
 				requestCount += 1;
-				if (requestCount === 1) return HttpResponse.json(resource([]));
-				return HttpResponse.json(
-					{ code: "TBANK_UNAVAILABLE" },
-					{ status: 503 },
-				);
+				return requestCount === 1
+					? HttpResponse.json(resource([]))
+					: HttpResponse.json(
+							{ code: "TBANK_UNAVAILABLE" },
+							{ status: 503 },
+						);
 			}),
 		);
 		const queryClient = createTestQueryClient();
@@ -202,9 +210,11 @@ it("keeps unknown membership loading instead of declaring no accounts", async ()
 	const client = createTestQueryClient();
 	renderPage(client);
 	await waitFor(() =>
-		expect(client.getQueryData(brokerageAccountsQueryKey)).toMatchObject({
-			data: null,
-		}),
+		expect(client.getQueryData(brokerageAccountsQueryKey)).toMatchObject((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+			{
+				data: null,
+			}
+			/* eslint-enable unicorn/no-null */)),
 	);
 	expect(
 		screen.queryByText("Нет инвестиционных счетов"),

src/pages/accounts/ui/AccountsPage/AccountsPage.tsx

@@ -1,4 +1,5 @@
 import type { FC } from "react";
+
 import { useAccountsPageViewModel } from "./AccountsPage.vm";
 import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
 import { AccountsPageError } from "./components/AccountsPageError.view";
@@ -13,20 +14,20 @@ const AccountsPage: FC = () => {
 		return (
 			<AccountsPageEmpty
 				lastSuccessfulAt={viewModel.lastSuccessfulAt}
-				refreshing={viewModel.refreshing}
-				sourceError={viewModel.sourceError}
 				refreshError={viewModel.refreshError}
+				refreshing={viewModel.refreshing}
 				retry={viewModel.retry}
+				sourceError={viewModel.sourceError}
 			/>
 		);
 	return (
 		<AccountsPageLoaded
 			accounts={viewModel.accounts}
 			lastSuccessfulAt={viewModel.lastSuccessfulAt}
-			refreshing={viewModel.refreshing}
-			sourceError={viewModel.sourceError}
 			refreshError={viewModel.refreshError}
+			refreshing={viewModel.refreshing}
 			retry={viewModel.retry}
+			sourceError={viewModel.sourceError}
 		/>
 	);
 };

src/pages/accounts/ui/AccountsPage/AccountsPage.vm.ts

@@ -9,35 +9,35 @@ function useAccountsPageViewModel() {
 	const accounts = useBrokerageAccounts();
 	const sync = useScreenSync({ screen: "accounts" }, [accounts]);
 	if (
-		!accounts.data ||
-		(accounts.meta?.availability === "partial" && !accounts.data.length)
+		!accounts.data
+		|| (accounts.meta?.availability === "partial" && accounts.data.length === 0)
 	) {
 		if (!accounts.isError && accounts.meta?.sync.state !== "failed")
 			return { state: "loading" as const };
 		if (accounts.isError || accounts.meta?.sync.state === "failed")
 			return {
-				state: "error" as const,
 				code: apiErrorCode(accounts.error),
 				retry: sync.retry,
+				state: "error" as const,
 			};
 	}
 	if (!accounts.data?.length)
 		return {
-			state: "empty" as const,
 			lastSuccessfulAt: accounts.meta?.lastSuccessfulAt,
-			refreshing: accounts.isFetching || sync.refreshing,
-			sourceError: sync.sourceError,
 			refreshError: accounts.isError || sync.transportError || sync.sourceError,
+			refreshing: accounts.isFetching || sync.refreshing,
 			retry: sync.retry,
+			sourceError: sync.sourceError,
+			state: "empty" as const,
 		};
 	return {
-		state: "loaded" as const,
 		accounts: brokerageAccountCards(accounts.data, accounts.meta?.dependencies),
 		lastSuccessfulAt: accounts.meta?.lastSuccessfulAt,
-		refreshing: accounts.isFetching || sync.refreshing,
-		sourceError: sync.sourceError,
 		refreshError: accounts.isError || sync.transportError || sync.sourceError,
+		refreshing: accounts.isFetching || sync.refreshing,
 		retry: sync.retry,
+		sourceError: sync.sourceError,
+		state: "loaded" as const,
 	};
 }
 

src/pages/accounts/ui/AccountsPage/components/AccountsPageEmpty.view.tsx

@@ -1,7 +1,9 @@
+import type { FC } from "react";
+
 import { Stack } from "@mantine/core";
 import { StateView } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
+
 import {
 	AccountsRefreshState,
 	type AccountsRefreshStateProps,
@@ -13,8 +15,8 @@ const AccountsPageEmpty: FC<AccountsRefreshStateProps> = (props) => {
 		<Stack>
 			<AccountsRefreshState {...props} />
 			<StateView
-				title={t("accounts.emptyTitle")}
 				text={t("accounts.emptyText")}
+				title={t("accounts.emptyTitle")}
 			/>
 		</Stack>
 	);

src/pages/accounts/ui/AccountsPage/components/AccountsPageError.view.tsx

@@ -1,6 +1,7 @@
+import type { FC } from "react";
+
 import { Button, Stack } from "@mantine/core";
 import { StateView } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
@@ -17,41 +18,41 @@ const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
 	if (code === "TBANK_NOT_CONNECTED")
 		return (
 			<StateView
-				error
-				title={t("accounts.notConnectedTitle")}
-				text={t("accounts.notConnectedText")}
 				action={settingsAction}
+				error
+				text={t("accounts.notConnectedText")}
+				title={t("accounts.notConnectedTitle")}
 			/>
 		);
 	if (code === "INVALID_TBANK_TOKEN")
 		return (
 			<StateView
-				error
-				title={t("accounts.invalidTokenTitle")}
-				text={t("accounts.invalidTokenText")}
 				action={settingsAction}
+				error
+				text={t("accounts.invalidTokenText")}
+				title={t("accounts.invalidTokenTitle")}
 			/>
 		);
 	if (code === "TBANK_UNAVAILABLE")
 		return (
 			<StateView
-				error
-				title={t("accounts.unavailableTitle")}
-				text={t("accounts.unavailableText")}
-				action={
+				action={(
 					<Stack align="flex-start">
 						<Button onClick={retry}>{t("accounts.retry")}</Button>
 						{settingsAction}
 					</Stack>
-				}
+				)}
+				error
+				text={t("accounts.unavailableText")}
+				title={t("accounts.unavailableTitle")}
 			/>
 		);
 	return (
 		<StateView
-			error
-			title={t("states.errorTitle")}
-			text={t("states.errorText")}
 			action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
+			error
+			text={t("states.errorText")}
+			title={t("states.errorTitle")}
 		/>
 	);
 };

src/pages/accounts/ui/AccountsPage/components/AccountsPageLoaded.view.tsx

@@ -1,11 +1,14 @@
-import { Button, Stack, Text, Title } from "@mantine/core";
 import type { FC } from "react";
+
+import { Button, Stack, Text, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+
 import {
 	type BrokerageAccountCard,
 	BrokerageAccountList,
 } from "@/entities/brokerage-account";
+
 import {
 	AccountsRefreshState,
 	type AccountsRefreshStateProps,

src/pages/accounts/ui/AccountsPage/components/AccountsPageLoading.view.tsx

@@ -1,6 +1,7 @@
+import type { FC } from "react";
+
 import { Card, Group, SimpleGrid, Skeleton, Stack } from "@mantine/core";
 import { LoadingSkeleton } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 const AccountsPageLoading: FC = () => {
@@ -9,8 +10,8 @@ const AccountsPageLoading: FC = () => {
 		<LoadingSkeleton label={t("states.loadingTitle")}>
 			<Skeleton height={32} width="30%" />
 			<Skeleton height={20} width="45%" />
-			<SimpleGrid cols={1} spacing="lg" aria-hidden="true">
-				{[0, 1].map((index) => (
+			<SimpleGrid aria-hidden="true" cols={1} spacing="lg">
+				{[0, 1].map(index => (
 					<Card key={index} padding="xl" radius="lg" withBorder>
 						<Stack gap="xl">
 							<Stack gap="sm">

src/pages/accounts/ui/AccountsPage/components/AccountsRefreshState.view.tsx

@@ -1,47 +1,49 @@
-import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
+
+import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+
 import { formatSnapshotTime } from "@/shared/lib";
 
 type AccountsRefreshStateProps = {
-	lastSuccessfulAt?: string | null;
-	sourceError?: boolean;
-	refreshing?: boolean;
+	lastSuccessfulAt?: null | string;
 	refreshError?: boolean;
+	refreshing?: boolean;
 	retry?: () => void;
+	sourceError?: boolean;
 };
 
 const AccountsRefreshState: FC<AccountsRefreshStateProps> = (props) => {
-	const { refreshing = false, refreshError = false, retry } = props;
+	const { refreshError = false, refreshing = false, retry } = props;
 	const { t } = useTranslation();
 
 	return (
 		<>
-			{props.lastSuccessfulAt ? (
-				<Text size="xs" c="dimmed">
+			{!!(props.lastSuccessfulAt) && ((
+				<Text c="dimmed" size="xs">
 					{t("investment.sourceTime", {
 						date: formatSnapshotTime(props.lastSuccessfulAt),
 					})}
 				</Text>
-			) : null}
+			))}
 			<Button
-				onClick={retry}
 				disabled={refreshing}
+				onClick={retry}
 				variant="light"
 				w="fit-content"
 			>
 				{t(refreshError ? "accounts.retry" : "investment.refresh")}
 			</Button>
-			{refreshing ? (
-				<Group gap="xs" role="status" aria-label={t("accounts.refreshing")}>
+			{!!(refreshing) && ((
+				<Group aria-label={t("accounts.refreshing")} gap="xs" role="status">
 					<Loader size="sm" />
 					<Text c="dimmed" size="sm">
 						{t("accounts.refreshing")}
 					</Text>
 				</Group>
-			) : null}
-			{refreshError ? (
-				<Alert color="orange" role="status" aria-live="polite">
+			))}
+			{!!(refreshError) && ((
+				<Alert aria-live="polite" color="orange" role="status">
 					<Stack gap="sm">
 						<Text>
 							{t(
@@ -52,7 +54,7 @@ const AccountsRefreshState: FC<AccountsRefreshStateProps> = (props) => {
 						</Text>
 					</Stack>
 				</Alert>
-			) : null}
+			))}
 		</>
 	);
 };