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/features/instrument-details/ui/InstrumentChart.view.tsx

@@ -1,3 +1,5 @@
+import type { FC } from "react";
+
 import { AreaChart } from "@mantine/charts";
 import {
 	Accordion,
@@ -7,185 +9,187 @@ import {
 	Table,
 	Text,
 } from "@mantine/core";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
+
 import { formatDecimal, formatMoney } from "@/shared/lib";
+
 import type { InstrumentChartVm } from "../model/types";
+
 import classes from "./InstrumentDetails.module.css";
 import { InstrumentSection } from "./InstrumentSection.view";
 
-type InstrumentChartProps = { vm: InstrumentChartVm; priceUnit?: "percent" };
+type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
 const InstrumentChart: FC<InstrumentChartProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
+	const priceLabel = (value: string) => {
+		if (props.priceUnit === "percent") return `${formatDecimal(value)} %`;
+		const currency = vm.candles?.currency;
+		return formatMoney(currency ? { currency, value } : undefined);
+	};
+
 	return (
 		<InstrumentSection
-			title={t("stock.chart")}
-			state={vm.candlesState}
-			large
-			controls={
+			controls={(
 				<div className={classes.controls}>
 					<SegmentedControl
 						aria-label={t("stock.period")}
-						value={vm.period}
-						onChange={vm.setPeriod}
-						data={["month", "halfYear", "year", "all"].map((value) => ({
-							value,
+						data={["month", "halfYear", "year", "all"].map(value => ({
 							label: t(`stock.periods.${value}`),
+							value,
 						}))}
+						onChange={vm.setPeriod}
+						value={vm.period}
 					/>
 				</div>
-			}
+			)}
+			large
+			state={vm.candlesState}
+			title={t("stock.chart")}
 		>
-			{vm.candles ? (
-				vm.chartData.length ? (
-					<>
-						<AreaChart
-							h={310}
-							data={vm.chartData}
-							dataKey="date"
-							series={[
-								{ name: "price", color: "blue.6", label: t("stock.price") },
-							]}
-							curveType="linear"
-							withDots={vm.chartData.length === 1}
-							withGradient
-							gridAxis="y"
-							tickLine="none"
-							tooltipAnimationDuration={0}
-							areaProps={{ isAnimationActive: false }}
-							yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
-							referenceLines={
-								vm.averageLine === null
-									? []
-									: [
-											{
-												y: vm.averageLine,
-												ifOverflow: "extendDomain",
-												color: "orange.7",
-												label: t("stock.averageLine"),
-											},
-										]
-							}
-							valueFormatter={(value) =>
-								new Intl.NumberFormat("ru-RU", {
-									maximumFractionDigits: 4,
-								}).format(value)
-							}
-							aria-label={t(
-								props.priceUnit === "percent"
-									? "bond.chartLabel"
-									: "stock.chartLabel",
-								{
-									currency:
+			{!!(vm.candles) && ((
+				vm.chartData.length > 0
+					? (
+							<>
+								<AreaChart
+									areaProps={{ isAnimationActive: false }}
+									aria-label={t(
+										props.priceUnit === "percent"
+											? "bond.chartLabel"
+											: "stock.chartLabel",
+										{
+											currency:
 										props.priceUnit === "percent"
 											? t("bond.percentOfNominal")
 											: (vm.candles.currency ?? ""),
-								},
-							)}
-						/>
-						<Text size="xs" c="dimmed" mt="sm">
-							{t(
-								props.priceUnit === "percent"
-									? "bond.chartNote"
-									: "stock.chartNote",
-							)}
-						</Text>
-						{vm.hasIncompleteCandle ? (
-							<Text size="xs" c="dimmed">
-								{t("stock.incomplete")}
-							</Text>
-						) : null}
-						{vm.averageLine !== null ? (
-							<Text size="sm" mt="xs">
-								{t("stock.averageLine")}:{" "}
-								{formatMoney(vm.position?.averagePurchasePrice ?? null)}
-							</Text>
-						) : null}
-						<Accordion
-							className={classes.priceTable}
-							variant="contained"
-							radius="md"
-						>
-							<Accordion.Item value="prices">
-								<Accordion.Control>
-									<Text fw={600}>{t("stock.priceTable")}</Text>
-									<Text size="xs" c="dimmed">
-										{t("stock.priceTableHint", { count: vm.chartData.length })}
+										},
+									)}
+									curveType="linear"
+									data={vm.chartData}
+									dataKey="date"
+									gridAxis="y"
+									h={310}
+									referenceLines={
+										vm.averageLine === null
+											? []
+											: [
+													{
+														color: "orange.7",
+														ifOverflow: "extendDomain",
+														label: t("stock.averageLine"),
+														y: vm.averageLine,
+													},
+												]
+									}
+									series={[
+										{ color: "blue.6", label: t("stock.price"), name: "price" },
+									]}
+									tickLine="none"
+									tooltipAnimationDuration={0}
+									valueFormatter={value =>
+										new Intl.NumberFormat("ru-RU", {
+											maximumFractionDigits: 4,
+										}).format(value)}
+									withDots={vm.chartData.length === 1}
+									withGradient
+									yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
+								/>
+								<Text c="dimmed" mt="sm" size="xs">
+									{t(
+										props.priceUnit === "percent"
+											? "bond.chartNote"
+											: "stock.chartNote",
+									)}
+								</Text>
+								{!!(vm.hasIncompleteCandle) && ((
+									<Text c="dimmed" size="xs">
+										{t("stock.incomplete")}
 									</Text>
-								</Accordion.Control>
-								<Accordion.Panel>
-									<ScrollArea.Autosize
-										mah={360}
-										type="auto"
-										viewportProps={{
-											tabIndex: 0,
-											role: "region",
-											"aria-label": t("stock.priceTable"),
-										}}
-									>
-										<Table
-											striped
-											highlightOnHover
-											stickyHeader
-											verticalSpacing="sm"
-											horizontalSpacing="md"
-										>
-											<Table.Thead>
-												<Table.Tr>
-													<Table.Th>{t("stock.date")}</Table.Th>
-													<Table.Th>{t("stock.price")}</Table.Th>
-													<Table.Th>{t("stock.candle")}</Table.Th>
-												</Table.Tr>
-											</Table.Thead>
-											<Table.Tbody>
-												{vm.priceRows.map((candle) => (
-													<Table.Tr key={candle.time}>
-														<Table.Td>{candle.date}</Table.Td>
-														<Table.Td>
-															{props.priceUnit === "percent"
-																? `${formatDecimal(candle.close)} %`
-																: formatMoney(
-																		vm.candles?.currency
-																			? {
-																					value: candle.close,
-																					currency: vm.candles.currency,
-																				}
-																			: null,
-																	)}
-														</Table.Td>
-														<Table.Td>
-															<Badge
-																variant="light"
-																color={candle.isComplete ? "gray" : "blue"}
-																size="sm"
-															>
-																{t(
-																	candle.isComplete
-																		? "stock.complete"
-																		: "stock.forming",
-																)}
-															</Badge>
-														</Table.Td>
-													</Table.Tr>
-												))}
-											</Table.Tbody>
-										</Table>
-									</ScrollArea.Autosize>
-								</Accordion.Panel>
-							</Accordion.Item>
-						</Accordion>
-					</>
-				) : (
-					<Text c="dimmed">
-						{t(
-							vm.candlesState.partial
-								? "investment.partial"
-								: "stock.noCandles",
-						)}
-					</Text>
-				)
-			) : null}
+								))}
+								{vm.averageLine !== null && ((
+									<Text mt="xs" size="sm">
+										{t("stock.averageLine")}
+										:
+										{" "}
+										{formatMoney(vm.position?.averagePurchasePrice)}
+									</Text>
+								))}
+								<Accordion
+									className={classes.priceTable}
+									radius="md"
+									variant="contained"
+								>
+									<Accordion.Item value="prices">
+										<Accordion.Control>
+											<Text fw={600}>{t("stock.priceTable")}</Text>
+											<Text c="dimmed" size="xs">
+												{t("stock.priceTableHint", { count: vm.chartData.length })}
+											</Text>
+										</Accordion.Control>
+										<Accordion.Panel>
+											<ScrollArea.Autosize
+												mah={360}
+												type="auto"
+												viewportProps={{
+													"aria-label": t("stock.priceTable"),
+													"role": "region",
+													"tabIndex": 0,
+												}}
+											>
+												<Table
+													highlightOnHover
+													horizontalSpacing="md"
+													stickyHeader
+													striped
+													verticalSpacing="sm"
+												>
+													<Table.Thead>
+														<Table.Tr>
+															<Table.Th>{t("stock.date")}</Table.Th>
+															<Table.Th>{t("stock.price")}</Table.Th>
+															<Table.Th>{t("stock.candle")}</Table.Th>
+														</Table.Tr>
+													</Table.Thead>
+													<Table.Tbody>
+														{vm.priceRows.map(candle => (
+															<Table.Tr key={candle.time}>
+																<Table.Td>{candle.date}</Table.Td>
+																<Table.Td>
+																	{priceLabel(candle.close)}
+																</Table.Td>
+																<Table.Td>
+																	<Badge
+																		color={candle.isComplete ? "gray" : "blue"}
+																		size="sm"
+																		variant="light"
+																	>
+																		{t(
+																			candle.isComplete
+																				? "stock.complete"
+																				: "stock.forming",
+																		)}
+																	</Badge>
+																</Table.Td>
+															</Table.Tr>
+														))}
+													</Table.Tbody>
+												</Table>
+											</ScrollArea.Autosize>
+										</Accordion.Panel>
+									</Accordion.Item>
+								</Accordion>
+							</>
+						)
+					: (
+							<Text c="dimmed">
+								{t(
+									vm.candlesState.partial
+										? "investment.partial"
+										: "stock.noCandles",
+								)}
+							</Text>
+						)
+			))}
 		</InstrumentSection>
 	);
 };

src/features/instrument-details/ui/InstrumentEvents.view.tsx

@@ -1,16 +1,20 @@
-import { Button, Group, SegmentedControl, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
+
+import { Button, Group, SegmentedControl, Stack, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+
 import { LedgerEntryRow } from "@/entities/broker-operation";
+
 import type { InstrumentEventsVm } from "../model/types";
+
 import classes from "./InstrumentDetails.module.css";
 import { InstrumentSection } from "./InstrumentSection.view";
 
 type InstrumentEventsProps = {
-	vm: InstrumentEventsVm;
-	incomeLabel?: string;
-	incomeFilter?: string;
 	historyNote?: string;
+	incomeFilter?: string;
+	incomeLabel?: string;
+	vm: InstrumentEventsVm;
 };
 
 const InstrumentEvents: FC<InstrumentEventsProps> = (props) => {
@@ -18,73 +22,75 @@ const InstrumentEvents: FC<InstrumentEventsProps> = (props) => {
 	const { t } = useTranslation();
 	return (
 		<InstrumentSection
-			title={t("stock.history")}
-			state={vm.operationsState}
-			controls={
+			controls={(
 				<div className={classes.controls}>
 					<SegmentedControl
 						aria-label={t("stock.eventFilter")}
-						value={vm.filter}
-						onChange={vm.setFilter}
 						data={[
 							"all",
 							"trades",
 							props.incomeFilter ?? "dividends",
 							"other",
-						].map((value) => ({
-							value,
+						].map(value => ({
 							label:
-								value === (props.incomeFilter ?? "dividends") &&
-								props.incomeLabel
+								value === (props.incomeFilter ?? "dividends")
+								&& props.incomeLabel
 									? props.incomeLabel
 									: t(`stock.filters.${value}`),
+							value,
 						}))}
+						onChange={vm.setFilter}
+						value={vm.filter}
 					/>
 				</div>
-			}
+			)}
+			state={vm.operationsState}
+			title={t("stock.history")}
 		>
-			{vm.operations ? (
+			{!!(vm.operations) && ((
 				<>
-					<Text size="xs" c="dimmed">
+					<Text c="dimmed" size="xs">
 						{props.historyNote ?? t("stock.historyNote")}
 					</Text>
-					{vm.eventRows.length ? (
-						<Stack gap="sm" mt="md">
-							{vm.eventRows.map((event) => (
-								<LedgerEntryRow
-									key={`${event.account?.id}:${event.id}`}
-									operation={event}
-									withDetails
-								/>
-							))}
-						</Stack>
-					) : (
-						<Text c="dimmed" py="lg">
-							{t(
-								vm.operationsState.partial
-									? "investment.partial"
-									: "stock.noOperations",
+					{vm.eventRows.length > 0
+						? (
+								<Stack gap="sm" mt="md">
+									{vm.eventRows.map(event => (
+										<LedgerEntryRow
+											key={`${event.account?.id}:${event.id}`}
+											operation={event}
+											withDetails
+										/>
+									))}
+								</Stack>
+							)
+						: (
+								<Text c="dimmed" py="lg">
+									{t(
+										vm.operationsState.partial
+											? "investment.partial"
+											: "stock.noOperations",
+									)}
+								</Text>
 							)}
-						</Text>
-					)}
 					<Group justify="space-between" mt="md">
 						<Button
-							variant="default"
 							disabled={!vm.hasPrevious || vm.operationsState.refreshing}
 							onClick={vm.onPrevious}
+							variant="default"
 						>
 							{t("stock.previous")}
 						</Button>
 						<Button
-							variant="default"
 							disabled={!vm.operations.hasNext || vm.operationsState.refreshing}
 							onClick={vm.onNext}
+							variant="default"
 						>
 							{t("stock.next")}
 						</Button>
 					</Group>
 				</>
-			) : null}
+			))}
 		</InstrumentSection>
 	);
 };

src/features/instrument-details/ui/InstrumentPosition.view.tsx

@@ -1,31 +1,35 @@
-import { Alert, Anchor, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
+
+import { Alert, Anchor, Stack, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+
 import { formatDecimal, formatMoney, formatSnapshotTime } from "@/shared/lib";
+
 import type { InstrumentPositionVm } from "../model/types";
+
 import classes from "./InstrumentDetails.module.css";
 import { InstrumentSection } from "./InstrumentSection.view";
 
 type InstrumentPositionProps = {
-	vm: InstrumentPositionVm;
-	returnNote?: string;
 	quantityLabel?: string;
+	returnNote?: string;
+	vm: InstrumentPositionVm;
 };
 const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
-	if (vm.position && !vm.position.accounts.length) return null;
+	if (vm.position && vm.position.accounts.length === 0) return;
 	return (
-		<InstrumentSection title={t("stock.position")} state={vm.positionState}>
-			{vm.position ? (
+		<InstrumentSection state={vm.positionState} title={t("stock.position")}>
+			{!!(vm.position) && ((
 				<Stack gap="md">
-					{vm.position.isStale ? (
+					{!!(vm.position.isStale) && ((
 						<Alert color="orange">{t("portfolio.staleWarning")}</Alert>
-					) : null}
+					))}
 					<div className={`${classes.metrics} ${classes.holding}`}>
 						<div>
-							<Text size="sm" c="dimmed">
+							<Text c="dimmed" size="sm">
 								{props.quantityLabel ?? t("stock.quantity")}
 							</Text>
 							<Text className={classes.metricValue}>
@@ -33,7 +37,7 @@ const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
 							</Text>
 						</div>
 						<div>
-							<Text size="sm" c="dimmed">
+							<Text c="dimmed" size="sm">
 								{t("stock.value")}
 							</Text>
 							<Text className={classes.metricValue}>
@@ -41,7 +45,7 @@ const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
 							</Text>
 						</div>
 						<div>
-							<Text size="sm" c="dimmed">
+							<Text c="dimmed" size="sm">
 								{t("stock.average")}
 							</Text>
 							<Text className={classes.metricValue}>
@@ -49,89 +53,93 @@ const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
 							</Text>
 						</div>
 						<div>
-							<Text size="sm" c="dimmed">
+							<Text c="dimmed" size="sm">
 								{t("stock.openReturn")}
 							</Text>
 							<Text
-								className={classes.metricValue}
 								c={
 									vm.position.absoluteReturn?.value.startsWith("-")
 										? "red.8"
 										: "green.8"
 								}
+								className={classes.metricValue}
 							>
 								{formatMoney(vm.position.absoluteReturn)}
 							</Text>
-							{vm.position.returnPercent !== null ? (
+							{vm.position.returnPercent !== null && ((
 								<Text size="sm">
-									{formatDecimal(vm.position.returnPercent)} %
+									{formatDecimal(vm.position.returnPercent)}
+									{" "}
+									%
 								</Text>
-							) : null}
+							))}
 						</div>
 					</div>
-					<Text size="xs" c="dimmed">
+					<Text c="dimmed" size="xs">
 						{props.returnNote ?? t("stock.openReturnNote")}
 					</Text>
 					<div>
-						{vm.position.accounts.map((account) => (
+						{vm.position.accounts.map(account => (
 							<div className={classes.accountRow} key={account.account?.id}>
-								{account.account ? (
-									<Anchor
-										component={Link}
-										to={`/accounts/${encodeURIComponent(account.account.id)}`}
-									>
-										{account.account.name}
-									</Anchor>
-								) : (
-									<Text>{t("stock.portfolio")}</Text>
-								)}
+								{account.account
+									? (
+											<Anchor
+												component={Link}
+												to={`/accounts/${encodeURIComponent(account.account.id)}`}
+											>
+												{account.account.name}
+											</Anchor>
+										)
+									: (
+											<Text>{t("stock.portfolio")}</Text>
+										)}
 								<div>
-									<Text size="xs" c="dimmed">
+									<Text c="dimmed" size="xs">
 										{props.quantityLabel ?? t("stock.quantity")}
 									</Text>
 									<Text>{formatDecimal(account.quantity)}</Text>
 								</div>
 								<div>
-									<Text size="xs" c="dimmed">
+									<Text c="dimmed" size="xs">
 										{t("stock.average")}
 									</Text>
 									<Text>{formatMoney(account.averagePurchasePrice)}</Text>
 								</div>
 								<div>
-									<Text size="xs" c="dimmed">
+									<Text c="dimmed" size="xs">
 										{t("stock.value")}
 									</Text>
 									<Text>{formatMoney(account.currentValue)}</Text>
 								</div>
 								<div>
-									<Text size="xs" c="dimmed">
+									<Text c="dimmed" size="xs">
 										{t("stock.openReturn")}
 									</Text>
 									<Text
 										c={
-											account.absoluteReturn?.value.startsWith("-")
-												? "red.8"
-												: undefined
+											(account.absoluteReturn?.value.startsWith("-")) ? ("red.8") : undefined
 										}
 									>
 										{formatMoney(account.absoluteReturn)}
 									</Text>
-									{account.returnPercent !== null ? (
+									{account.returnPercent !== null && ((
 										<Text size="xs">
-											{formatDecimal(account.returnPercent)} %
+											{formatDecimal(account.returnPercent)}
+											{" "}
+											%
 										</Text>
-									) : null}
+									))}
 								</div>
 							</div>
 						))}
 					</div>
-					<Text size="xs" c="dimmed">
+					<Text c="dimmed" size="xs">
 						{t("stock.snapshotAt", {
 							date: formatSnapshotTime(vm.position.observedAt),
 						})}
 					</Text>
 				</Stack>
-			) : null}
+			))}
 		</InstrumentSection>
 	);
 };

src/features/instrument-details/ui/InstrumentSection.view.tsx

@@ -1,3 +1,5 @@
+import type { FC, PropsWithChildren, ReactNode } from "react";
+
 import {
 	Alert,
 	Button,
@@ -9,28 +11,31 @@ import {
 	Title,
 } from "@mantine/core";
 import { LoadingSkeleton } from "@wealthledger/ui";
-import type { FC, PropsWithChildren, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
+
 import { formatSnapshotTime } from "@/shared/lib";
+
 import type { SectionState } from "../model/section";
+
 import classes from "./InstrumentDetails.module.css";
 
 const CHART_SKELETON_HEIGHT_PX = 280;
 const SECTION_SKELETON_HEIGHT_PX = 65;
 
 type InstrumentSectionProps = PropsWithChildren<{
-	title: string;
-	state: SectionState;
 	controls?: ReactNode;
-	large?: boolean;
 	embedded?: boolean;
+	large?: boolean;
+	state: SectionState;
+	title: string;
 }>;
 const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
 	const { t } = useTranslation();
+	const readError = t(props.state.hasData ? "accounts.refreshError" : "stock.sectionError");
 	return (
 		<Paper
-			component="section"
 			className={props.embedded ? classes.embeddedSection : classes.section}
+			component="section"
 			withBorder={!props.embedded}
 		>
 			<Group justify="space-between" mb="md">
@@ -39,63 +44,63 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
 				</Title>
 				{props.controls}
 			</Group>
-			{props.state.stale ? (
+			{!!(props.state.stale) && ((
 				<Text size="xs">{t("investment.stale")}</Text>
-			) : null}
-			{props.state.partial ? (
+			))}
+			{!!(props.state.partial) && ((
 				<Text role="status">{t("investment.partial")}</Text>
-			) : null}
-			{props.state.lastSuccessfulAt ? (
-				<Text size="xs" c="dimmed">
+			))}
+			{!!(props.state.lastSuccessfulAt) && ((
+				<Text c="dimmed" size="xs">
 					{t("investment.sourceTime", {
 						date: formatSnapshotTime(props.state.lastSuccessfulAt),
 					})}
 				</Text>
-			) : null}
-			{props.state.refreshing ? (
-				<Text role="status" size="xs" c="dimmed">
+			))}
+			{!!(props.state.refreshing) && ((
+				<Text c="dimmed" role="status" size="xs">
 					{t("accounts.refreshing")}
 				</Text>
-			) : null}
-			{props.state.error ? (
-				<Alert color="orange" mb="sm" role="status" aria-live="polite">
+			))}
+			{!!(props.state.error) && ((
+				<Alert aria-live="polite" color="orange" mb="sm" role="status">
 					<Group justify="space-between">
 						<Text size="sm">
 							{props.state.sourceError
 								? t("investment.syncFailed")
-								: props.state.hasData
-									? t("accounts.refreshError")
-									: t("stock.sectionError")}
+								: readError}
 						</Text>
 						<Button
+							disabled={props.state.refreshing}
+							onClick={props.state.retry}
 							size="xs"
 							variant="default"
-							onClick={props.state.retry}
-							disabled={props.state.refreshing}
 						>
 							{t("accounts.retry")}
 						</Button>
 					</Group>
 				</Alert>
-			) : null}
-			{props.state.loading ? (
-				<LoadingSkeleton
-					label={t("stock.loadingSection", { section: props.title })}
-				>
-					<Stack>
-						<Skeleton
-							h={
-								props.large
-									? CHART_SKELETON_HEIGHT_PX
-									: SECTION_SKELETON_HEIGHT_PX
-							}
-						/>
-						<Skeleton h={14} w="60%" />
-					</Stack>
-				</LoadingSkeleton>
-			) : (
-				props.children
-			)}
+			))}
+			{props.state.loading
+				? (
+						<LoadingSkeleton
+							label={t("stock.loadingSection", { section: props.title })}
+						>
+							<Stack>
+								<Skeleton
+									h={
+										props.large
+											? CHART_SKELETON_HEIGHT_PX
+											: SECTION_SKELETON_HEIGHT_PX
+									}
+								/>
+								<Skeleton h={14} w="60%" />
+							</Stack>
+						</LoadingSkeleton>
+					)
+				: (
+						props.children
+					)}
 		</Paper>
 	);
 };