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/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageError.view.tsx

@@ -1,7 +1,9 @@
+import type { FC } from "react";
+
 import { Button, Group } from "@mantine/core";
 import { StateView } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
+
 import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
 
 type AccountOperationsPageErrorProps = Extract<
@@ -17,17 +19,17 @@ const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
 
 	return (
 		<StateView
-			error
-			title={t("ledger.errorTitle")}
-			text={t("ledger.errorText")}
-			action={
+			action={(
 				<Group>
 					<Button onClick={retry}>{t("ledger.retry")}</Button>
-					<Button variant="default" onClick={props.onReset}>
+					<Button onClick={props.onReset} variant="default">
 						{t("ledger.reset")}
 					</Button>
 				</Group>
-			}
+			)}
+			error
+			text={t("ledger.errorText")}
+			title={t("ledger.errorTitle")}
 		/>
 	);
 };

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx

@@ -1,3 +1,5 @@
+import type { FC, ReactNode } from "react";
+
 import {
 	Alert,
 	Button,
@@ -10,14 +12,15 @@ import {
 } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
 import { StateView } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
+
 import {
 	LedgerEntryRow,
-	type OperationCategory,
 	operationCategories,
+	type OperationCategory,
 } from "@/entities/broker-operation";
 import { formatSnapshotTime } from "@/shared/lib";
+
 import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
 
 type AccountOperationsPageLoadedProps = Extract<
@@ -54,99 +57,106 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 	} = props;
 	const { t } = useTranslation();
 
-	const categoryData = operationCategories.map((category) => ({
-		value: category,
+	const categoryData = operationCategories.map(category => ({
 		label: t(`ledger.category.${category}`),
+		value: category,
 	}));
 
+	// eslint-disable-next-line sonarjs/function-return-type -- ReactNode deliberately includes lists, elements and empty output.
+	function renderOperations(): ReactNode {
+		if (items.length > 0) {
+			return items.map(operation => (
+				<LedgerEntryRow
+					key={JSON.stringify([
+						operation.account?.id,
+						operation.id,
+						operation.logoName,
+					])}
+					operation={operation}
+				/>
+			));
+		}
+		if (props.partial) {
+			return;
+		}
+		return (
+			<StateView
+				text={t("ledger.emptyText")}
+				title={t("ledger.emptyTitle")}
+			/>
+		);
+	}
 	return (
 		<Stack gap="lg">
-			{props.lastSuccessfulAt ? (
-				<Text size="xs" c="dimmed">
+			{!!(props.lastSuccessfulAt) && ((
+				<Text c="dimmed" size="xs">
 					{t("investment.sourceTime", {
 						date: formatSnapshotTime(props.lastSuccessfulAt),
 					})}
 				</Text>
-			) : null}
+			))}
 			<Title order={1}>{t("ledger.title")}</Title>
-			<Button onClick={props.retry} disabled={props.refreshing} w="fit-content">
+			<Button disabled={props.refreshing} onClick={props.retry} w="fit-content">
 				{t("investment.refresh")}
 			</Button>
-			{props.partial ? (
+			{!!(props.partial) && ((
 				<Alert role="status">{t("investment.partial")}</Alert>
-			) : null}
-			{props.historyLoading ? <Alert>{t("investment.history")}</Alert> : null}
-			{props.refreshing ? (
-				<Progress value={100} animated aria-label={t("accounts.refreshing")} />
-			) : null}
-			{props.refreshError ? (
-				<Alert color="yellow" role="status" aria-live="polite">
+			))}
+			{!!(props.historyLoading) && (<Alert>{t("investment.history")}</Alert>)}
+			{!!(props.refreshing) && ((
+				<Progress animated aria-label={t("accounts.refreshing")} value={100} />
+			))}
+			{!!(props.refreshError) && ((
+				<Alert aria-live="polite" color="yellow" role="status">
 					{t(
 						props.sourceError
 							? "investment.syncFailed"
 							: "accounts.refreshError",
 					)}
-					<Button variant="subtle" onClick={props.retry}>
+					<Button onClick={props.retry} variant="subtle">
 						{t("accounts.retry")}
 					</Button>
 				</Alert>
-			) : null}
+			))}
 			<Group align="end">
 				<DatePickerInput
-					type="range"
 					allowSingleDateInRange
 					clearable
 					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
 					label={t("ledger.period")}
-					value={[draftFrom, draftTo]}
 					onChange={([from, to]) => {
 						onDraftFromChange(from);
 						onDraftToChange(to);
 					}}
-					valueFormat="DD.MM.YYYY"
 					popoverProps={{
-						returnFocus: true,
 						middlewares: { shift: { crossAxis: true } },
+						returnFocus: true,
 					}}
+					type="range"
+					value={[draftFrom, draftTo]}
+					valueFormat="DD.MM.YYYY"
 				/>
 			</Group>
 			<MultiSelect
-				label={t("ledger.categories")}
-				placeholder={t("ledger.categoriesPlaceholder")}
-				data={categoryData}
-				value={draftCategories}
-				onChange={(value) =>
-					onDraftCategoriesChange(fromMultiSelectValue(value))
-				}
 				clearable
 				clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
+				data={categoryData}
+				label={t("ledger.categories")}
+				onChange={value =>
+					onDraftCategoriesChange(fromMultiSelectValue(value))}
+				placeholder={t("ledger.categoriesPlaceholder")}
+				value={draftCategories}
 			/>
 			<Group>
-				<Button onClick={onApply} disabled={!canApply}>
+				<Button disabled={!canApply} onClick={onApply}>
 					{t("ledger.apply")}
 				</Button>
-				<Button variant="default" onClick={onReset}>
+				<Button onClick={onReset} variant="default">
 					{t("ledger.reset")}
 				</Button>
 			</Group>
-			{items.length ? (
-				items.map((operation) => (
-					<LedgerEntryRow
-						key={JSON.stringify([
-							operation.account?.id,
-							operation.id,
-							operation.logoName,
-						])}
-						operation={operation}
-					/>
-				))
-			) : !props.partial ? (
-				<StateView
-					title={t("ledger.emptyTitle")}
-					text={t("ledger.emptyText")}
-				/>
-			) : null}
-			{hasNext || hasPrevious ? (
+			{renderOperations()}
+			{!!(hasNext || hasPrevious) && ((
 				<Group justify="space-between">
 					<Button disabled={!hasPrevious} onClick={onPrevious}>
 						{t("ledger.previous")}
@@ -155,7 +165,7 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 						{t("ledger.next")}
 					</Button>
 				</Group>
-			) : null}
+			))}
 		</Stack>
 	);
 };

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoading.view.tsx

@@ -1,6 +1,7 @@
+import type { FC } from "react";
+
 import { Group, Skeleton, Stack } from "@mantine/core";
 import { LoadingSkeleton } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 const skeletonRowIds = ["first", "second", "third", "fourth"];
@@ -17,12 +18,12 @@ const AccountOperationsPageLoading: FC = () => {
 			</Group>
 			<Skeleton height={48} radius="sm" />
 			<Group>
-				<Skeleton height={36} width={110} radius="sm" />
-				<Skeleton height={36} width={110} radius="sm" />
+				<Skeleton height={36} radius="sm" width={110} />
+				<Skeleton height={36} radius="sm" width={110} />
 			</Group>
 			<Stack gap="xs">
-				{skeletonRowIds.map((id) => (
-					<Skeleton key={id} height={64} radius="md" />
+				{skeletonRowIds.map(id => (
+					<Skeleton height={64} key={id} radius="md" />
 				))}
 			</Stack>
 		</LoadingSkeleton>