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.
2026-09-28 16:36:40 +03:00
parent 57630102e4
commit 72d7835227
253 changed files with 10059 additions and 8864 deletions
@@ -1,7 +1,9 @@
+import type { FC } from "react";
+
 import { Button } from "@mantine/core";
 import { StateView } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
+
 import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";

 type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;
@@ -10,10 +12,10 @@ const AccountIncomePageError: FC<ErrorProps> = (props) => {
 	const { t } = useTranslation();
 	return (
 		<StateView
-			error
-			title={t("income.errorTitle")}
-			text={t("income.errorText")}
 			action={<Button onClick={props.retry}>{t("income.retry")}</Button>}
+			error
+			text={t("income.errorText")}
+			title={t("income.errorTitle")}
 		/>
 	);
 };
@@ -1,3 +1,5 @@
+import type { FC } from "react";
+
 import {
 	Alert,
 	Button,
@@ -8,12 +10,14 @@ import {
 	Title,
 } from "@mantine/core";
 import { StateView } from "@wealthledger/ui";
-import type { FC } from "react";
 import { FormProvider } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { formatSnapshotTime } from "@/shared/lib";
-import classes from "../AccountIncomePage.module.css";
+
 import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
+
+import classes from "../AccountIncomePage.module.css";
 import { IncomeComparisons } from "./IncomeComparisons.view";
 import { IncomePayments } from "./IncomePayments.view";
 import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
@@ -26,41 +30,55 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 		analytics,
 		display,
 		form,
-		refreshing,
-		refreshError,
-		retry,
-		onSubmit,
 		onReset,
+		onSubmit,
+		refreshError,
+		refreshing,
+		retry,
 	} = props;
 	const { t } = useTranslation();
+	function renderSummary() {
+		if (props.partial) {
+			return <Alert role="status">{t("investment.partial")}</Alert>;
+		}
+		if (analytics.totalsByCurrency.length > 0) {
+			return <IncomeSummary totals={analytics.totalsByCurrency} />;
+		}
+		return (
+			<StateView
+				text={t("income.emptyText")}
+				title={t("income.emptyTitle")}
+			/>
+		);
+	}
 	return (
-		<Stack gap="lg" className={classes.page}>
-			{props.lastSuccessfulAt ? (
-				<Text size="xs" c="dimmed">
+		<Stack className={classes.page} gap="lg">
+			{!!(props.lastSuccessfulAt) && ((
+				<Text c="dimmed" size="xs">
 					{t("investment.sourceTime", {
 						date: formatSnapshotTime(props.lastSuccessfulAt),
 					})}
 				</Text>
-			) : null}
+			))}
 			<Title order={1}>{t("income.title")}</Title>
-			<Button onClick={retry} disabled={refreshing} w="fit-content">
+			<Button disabled={refreshing} onClick={retry} w="fit-content">
 				{t("investment.refresh")}
 			</Button>
 			<FormProvider {...form}>
 				<IncomePeriodForm
 					key={props.formRevision}
-					onSubmit={form.handleSubmit(onSubmit)}
 					onReset={onReset}
+					onSubmit={form.handleSubmit(onSubmit)}
 				/>
 			</FormProvider>
-			{refreshing ? (
-				<Group gap="xs" role="status" aria-label={t("income.refreshing")}>
+			{!!(refreshing) && ((
+				<Group aria-label={t("income.refreshing")} gap="xs" role="status">
 					<Loader size="sm" />
 					<Text>{t("income.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(
@@ -74,27 +92,18 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 						</Button>
 					</Stack>
 				</Alert>
-			) : null}
-			{props.partial ? (
-				<Alert role="status">{t("investment.partial")}</Alert>
-			) : analytics.totalsByCurrency.length ? (
-				<IncomeSummary totals={analytics.totalsByCurrency} />
-			) : (
-				<StateView
-					title={t("income.emptyTitle")}
-					text={t("income.emptyText")}
-				/>
-			)}
+			))}
+			{renderSummary()}
 			<Alert color="blue">{t("income.taxBoundary")}</Alert>
 			<IncomeComparisons
-				title={t("income.previousPeriod")}
 				comparison={display.previousComparison}
 				notice={t(`income.${display.previousNotice}`)}
+				title={t("income.previousPeriod")}
 			/>
 			<IncomeComparisons
-				title={t("income.yearAgo")}
 				comparison={display.comparison}
 				notice={t(`income.${display.yearNotice}`)}
+				title={t("income.yearAgo")}
 			/>
 			<IncomePayments entries={display.entries} />
 		</Stack>
@@ -1,7 +1,9 @@
+import type { FC } from "react";
+
 import { Paper, Skeleton, Stack } from "@mantine/core";
 import { LoadingSkeleton } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
+
 import classes from "../AccountIncomePage.module.css";

 const AccountIncomePageLoading: FC = () => {
@@ -1,38 +1,44 @@
-import { Paper, Stack, Text, Title } from "@mantine/core";
 import type { FC } from "react";
+
+import { Paper, Stack, Text, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+
 import { formatMoney } from "@/shared/lib";
-import classes from "../AccountIncomePage.module.css";
+
 import type { IncomeDisplayModel } from "../AccountIncomePage.vm";

-type IncomeComparisonsProps = {
-	comparison: IncomeDisplayModel["comparison"];
-	title: string;
-	notice: string;
-};
+import classes from "../AccountIncomePage.module.css";
+
 type ComparisonProps = NonNullable<IncomeDisplayModel["comparison"]> & {
 	title: string;
 };
 type ComparisonValuesProps = {
-	kind: "selected" | "compared" | "difference";
+	kind: "compared" | "difference" | "selected";
 	label: string;
-	values: ComparisonProps["values"][number]["selected"];
 	percentages?: ComparisonProps["values"][number]["percentages"];
+	values: ComparisonProps["values"][number]["selected"];
+};
+type IncomeComparisonsProps = {
+	comparison: IncomeDisplayModel["comparison"];
+	notice: string;
+	title: string;
 };

 const IncomeComparisons: FC<IncomeComparisonsProps> = (props) => {
 	return (
 		<Stack>
 			<Title order={2}>{props.title}</Title>
-			{props.comparison ? (
-				<Comparison {...props.comparison} title={props.title} />
-			) : (
-				<Paper p="sm" radius="md" className={classes.comparisonNotice}>
-					<Text size="sm" c="gray.7" role="status" aria-live="polite">
-						{props.notice}
-					</Text>
-				</Paper>
-			)}
+			{props.comparison
+				? (
+						<Comparison {...props.comparison} title={props.title} />
+					)
+				: (
+						<Paper className={classes.comparisonNotice} p="sm" radius="md">
+							<Text aria-live="polite" c="gray.7" role="status" size="sm">
+								{props.notice}
+							</Text>
+						</Paper>
+					)}
 		</Stack>
 	);
 };
@@ -42,12 +48,12 @@ const Comparison: FC<ComparisonProps> = (props) => {
 	return (
 		<section aria-label={props.title} className={classes.comparison}>
 			<Stack gap="md">
-				{props.values.map((value) => (
+				{props.values.map(value => (
 					<Stack
+						aria-label={value.currency}
 						gap="xs"
 						key={value.currency}
 						role="group"
-						aria-label={value.currency}
 					>
 						<div className={classes.comparisonGrid}>
 							<ComparisonValues
@@ -63,17 +69,17 @@ const Comparison: FC<ComparisonProps> = (props) => {
 							<ComparisonValues
 								kind="difference"
 								label={t("income.difference")}
-								values={value.difference}
 								percentages={value.percentages}
+								values={value.difference}
 							/>
 						</div>
 					</Stack>
 				))}
-				{props.values.length === 0 ? (
-					<Text size="sm" c="gray.7">
+				{props.values.length === 0 && ((
+					<Text c="gray.7" size="sm">
 						{t("income.comparisonEmpty")}
 					</Text>
-				) : null}
+				))}
 			</Stack>
 		</section>
 	);
@@ -87,30 +93,28 @@ const ComparisonValues: FC<ComparisonValuesProps> = (props) => {
 			className={classes.comparisonPanel}
 			data-kind={props.kind}
 			data-tone={
-				props.kind === "difference"
-					? differenceTone(props.values.total.value)
-					: undefined
+				(props.kind === "difference") ? (differenceTone(props.values.total.value)) : undefined
 			}
 		>
-			<Text size="sm" fw={600} className={classes.comparisonLabel}>
+			<Text className={classes.comparisonLabel} fw={600} size="sm">
 				{props.label}
 			</Text>
 			<dl className={classes.comparisonValues}>
 				{(["total", "coupon", "dividend"] as const).map((key) => {
-					const money = props.values[key];
-					const percentage = props.percentages?.[key];
-					const tone =
-						props.kind === "difference"
+					const money = /* eslint-disable-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name. */ props.values[key];
+					const percentage = /* eslint-disable-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name. */ props.percentages?.[key];
+					const tone
+						= props.kind === "difference"
 							? differenceTone(money.value)
 							: undefined;
 					return (
 						<div
-							key={key}
 							className={
 								key === "total"
 									? classes.comparisonTotal
 									: classes.comparisonDetail
 							}
+							key={key}
 						>
 							<dt>{t(`income.${key}`)}</dt>
 							<dd data-tone={tone}>
@@ -118,11 +122,11 @@ const ComparisonValues: FC<ComparisonValuesProps> = (props) => {
 									{tone === "positive" ? "+" : ""}
 									{formatMoney(money)}
 								</span>
-								{percentage ? (
+								{!!(percentage) && ((
 									<span className={classes.comparisonPercent}>
 										{percentage}
 									</span>
-								) : null}
+								))}
 							</dd>
 						</div>
 					);
@@ -132,7 +136,7 @@ const ComparisonValues: FC<ComparisonValuesProps> = (props) => {
 	);
 };

-function differenceTone(value: string): "positive" | "negative" | "neutral" {
+function differenceTone(value: string): "negative" | "neutral" | "positive" {
 	if (!/[1-9]/.test(value)) return "neutral";
 	return value.startsWith("-") ? "negative" : "positive";
 }
@@ -1,19 +1,23 @@
-import { Stack, Title } from "@mantine/core";
 import type { FC } from "react";
+
+import { Stack, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+
 import { LedgerEntryRow } from "@/entities/broker-operation";
-import classes from "../AccountIncomePage.module.css";
+
 import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";

-type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
+import classes from "../AccountIncomePage.module.css";
+
 type IncomePaymentsProps = { entries: LoadedProps["display"]["entries"] };
+type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;

 const IncomePayments: FC<IncomePaymentsProps> = (props) => {
 	const { t } = useTranslation();
 	return (
-		<Stack component="section" aria-label={t("income.payments")}>
+		<Stack aria-label={t("income.payments")} component="section">
 			<Title order={2}>{t("income.payments")}</Title>
-			<Stack component="ul" gap="sm" className={classes.entries}>
+			<Stack className={classes.entries} component="ul" gap="sm">
 				{props.entries.map(({ key, operation }) => (
 					<li key={key}>
 						<LedgerEntryRow operation={operation} />
@@ -1,12 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { FC } from "react";
+
 import { FormProvider, useForm, useFormState } from "react-hook-form";
+
 import type { IncomeForm } from "../../../../model/period";
+
 import { IncomePeriodForm } from "./IncomePeriodForm.view";

 const period = { from: "01.08.2026", to: "27.08.2026" };
 const errors = {
-	to: { type: "manual", message: "Синтетическая ошибка периода" },
+	to: { message: "Синтетическая ошибка периода", type: "manual" },
 };

 type PeriodExampleProps = { invalid?: boolean };
@@ -17,14 +20,14 @@ const PeriodExample: FC<PeriodExampleProps> = (props) => {
 		errors: props.invalid ? errors : undefined,
 	});
 	const { isSubmitSuccessful } = useFormState({ control: methods.control });
-	const submitted = isSubmitSuccessful ? methods.getValues() : null;
+	const submitted = isSubmitSuccessful ? methods.getValues() : /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null;
 	return (
 		<FormProvider {...methods}>
 			<IncomePeriodForm
-				onSubmit={methods.handleSubmit(() => undefined)}
 				onReset={() => {
 					methods.reset(period);
 				}}
+				onSubmit={methods.handleSubmit(() => {})}
 			/>
 			<output aria-live="polite">
 				{submitted
@@ -36,9 +39,7 @@ const PeriodExample: FC<PeriodExampleProps> = (props) => {
 };

 const meta = {
-	title: "Product/IncomePeriodForm",
 	component: PeriodExample,
-	tags: ["autodocs"],
 	parameters: {
 		docs: {
 			description: {
@@ -48,6 +49,8 @@ const meta = {
 		},
 	},
 	render: () => <PeriodExample />,
+	tags: ["autodocs"],
+	title: "Product/IncomePeriodForm",
 } satisfies Meta<typeof PeriodExample>;

 export default meta;
@@ -1,8 +1,11 @@
+import type { FC, SubmitEventHandler } from "react";
+
 import { Button, Paper, Stack, Text } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
-import type { FC, FormEventHandler } from "react";
+import { useState } from "react";
 import { useController, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import {
 	formatDraftDate,
 	type IncomeForm,
@@ -12,8 +15,8 @@ import {
 import classes from "../../AccountIncomePage.module.css";

 type IncomePeriodFormProps = {
-	onSubmit: FormEventHandler<HTMLFormElement>;
 	onReset: () => void;
+	onSubmit: SubmitEventHandler<HTMLFormElement>;
 };

 const IncomePeriodForm: FC<IncomePeriodFormProps> = (props) => {
@@ -23,15 +26,15 @@ const IncomePeriodForm: FC<IncomePeriodFormProps> = (props) => {
 		formState: { isSubmitting },
 	} = useFormContext<IncomeForm>();
 	const {
-		field: { ref: fromRef, onChange: onFromChange, onBlur: onFromBlur },
+		field: { onBlur: onFromBlur, onChange: onFromChange, ref: fromRef },
 		fieldState: { error: fromError },
 	} = useController({ control, name: "from" });
 	const {
-		field: { onChange: onToChange, onBlur: onToBlur },
+		field: { onBlur: onToBlur, onChange: onToChange },
 		fieldState: { error: toError },
 	} = useController({ control, name: "to" });
 	const [from, to] = useWatch({ control, name: ["from", "to"] });
-	const today = moscowDate(new Date());
+	const [today, setToday] = useState(() => moscowDate(new Date()));
 	const start = parseDraftDate(from);
 	const end = parseDraftDate(to);
 	return (
@@ -46,39 +49,40 @@ const IncomePeriodForm: FC<IncomePeriodFormProps> = (props) => {
 				<Text fw={700}>{t("income.period")}</Text>
 				<div className={classes.fields}>
 					<DatePickerInput
-						type="range"
 						allowSingleDateInRange
 						clearable
 						clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
-						ref={fromRef}
+						disabled={isSubmitting}
+						error={fromError?.message ?? toError?.message}
 						label={t("income.period")}
-						valueFormat="DD.MM.YYYY"
-						value={[start, end]}
-						onChange={([from, to]) => {
-							onFromChange(from ? formatDraftDate(from) : "");
-							onToChange(to ? formatDraftDate(to) : "");
-						}}
+						maxDate={today}
 						onBlur={() => {
 							onFromBlur();
 							onToBlur();
 						}}
-						maxDate={today}
-						error={fromError?.message ?? toError?.message}
-						disabled={isSubmitting}
-						popoverProps={{
-							returnFocus: true,
-							middlewares: { shift: { crossAxis: true } },
+						onChange={([from, to]) => {
+							onFromChange(from ? formatDraftDate(from) : "");
+							onToChange(to ? formatDraftDate(to) : "");
 						}}
+						popoverProps={{
+							middlewares: { shift: { crossAxis: true } },
+							onOpen: () => setToday(moscowDate(new Date())),
+							returnFocus: true,
+						}}
+						ref={fromRef}
+						type="range"
+						value={[start, end]}
+						valueFormat="DD.MM.YYYY"
 					/>
 				</div>
 				<div className={classes.actions}>
-					<Button type="submit" loading={isSubmitting}>
+					<Button loading={isSubmitting} type="submit">
 						{t("income.apply")}
 					</Button>
 					<Button
-						type="button"
-						onClick={props.onReset}
 						disabled={isSubmitting}
+						onClick={props.onReset}
+						type="button"
 						variant="default"
 					>
 						{t("income.reset")}
@@ -1,7 +1,10 @@
-import { Paper, Stack, Text, Title } from "@mantine/core";
 import type { FC } from "react";
+
+import { Paper, Stack, Text, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+
 import type { IncomeAnalytics } from "@/entities/income";
+
 import { formatMoney } from "@/shared/lib";

 type IncomeSummaryProps = { totals: IncomeAnalytics["totalsByCurrency"] };
@@ -11,12 +14,21 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 	return (
 		<Stack>
 			<Title order={2}>{t("income.summaryTitle")}</Title>
-			{props.totals.map((total) => (
+			{props.totals.map(total => (
 				<Paper key={total.currency} p="md" radius="md" withBorder>
 					<Text fw={700}>{formatMoney(total.total)}</Text>
 					<Text c="dimmed" size="sm">
-						{t("income.coupon")}: {formatMoney(total.coupon)} ·{" "}
-						{t("income.dividend")}: {formatMoney(total.dividend)}
+						{t("income.coupon")}
+						:
+						{" "}
+						{formatMoney(total.coupon)}
+						{" "}
+						·
+						{" "}
+						{t("income.dividend")}
+						:
+						{" "}
+						{formatMoney(total.dividend)}
 					</Text>
 				</Paper>
 			))}