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/stock/ui/StockPage/StockPage.view.tsx

@@ -1,3 +1,5 @@
+import type { FC } from "react";
+
 import {
 	Alert,
 	Avatar,
@@ -11,8 +13,8 @@ import {
 	Title,
 } from "@mantine/core";
 import { LoadingSkeleton } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
+
 import {
 	InstrumentChart as StockChart,
 	InstrumentEvents as StockEvents,
@@ -25,27 +27,29 @@ import {
 	formatMoney,
 	formatSnapshotTime,
 } from "@/shared/lib";
+
+import type { StockPageVm } from "./StockPage.vm";
+
 import { StockDividends } from "./components/StockEvents.view";
 import classes from "./StockPage.module.css";
-import type { StockPageVm } from "./StockPage.vm";
 
 type StockPageViewProps = { vm: StockPageVm };
 const StockPageView: FC<StockPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
 	const stock = vm.stock;
-	if (!stock) return null;
+	if (!stock) return;
 	return (
 		<Stack className={classes.page} gap="lg">
-			<Paper component="header" className={classes.section} withBorder>
-				<Group justify="space-between" align="start">
+			<Paper className={classes.section} component="header" withBorder>
+				<Group align="start" justify="space-between">
 					<div className={classes.identity}>
 						<Avatar
-							key={vm.logoSrc}
-							src={vm.logoSrc}
 							alt=""
-							size={56}
+							key={vm.logoSrc}
 							radius="md"
+							size={56}
+							src={vm.logoSrc}
 						>
 							{stock.name[0]}
 						</Avatar>
@@ -53,8 +57,11 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 							<Title order={1} size="h2">
 								{stock.name}
 							</Title>
-							<Text size="sm" c="dimmed">
-								{stock.ticker} ·{" "}
+							<Text c="dimmed" size="sm">
+								{stock.ticker}
+								{" "}
+								·
+								{" "}
 								{t(`stock.shareTypes.${stock.shareType}`, {
 									defaultValue: t("stock.share"),
 								})}
@@ -62,152 +69,155 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 						</div>
 					</div>
 					<Button
-						variant="subtle"
-						onClick={vm.refresh}
 						disabled={vm.refreshing}
+						onClick={vm.refresh}
+						variant="subtle"
 					>
 						{t("investment.refresh")}
 					</Button>
 				</Group>
-				{vm.company?.description ? (
-					<Text size="sm" mt="md" style={{ whiteSpace: "pre-line" }}>
+				{!!(vm.company?.description) && ((
+					<Text mt="md" size="sm" style={{ whiteSpace: "pre-line" }}>
 						{vm.company.description}
 					</Text>
-				) : null}
-				{vm.refreshError || vm.stockState.error || vm.quoteState.error ? (
-					<Alert role="status" aria-live="polite" color="orange" mt="md">
+				))}
+				{!!(vm.refreshError || vm.stockState.error || vm.quoteState.error) && ((
+					<Alert aria-live="polite" color="orange" mt="md" role="status">
 						{t(vm.quote ? "accounts.refreshError" : "stock.sectionError")}
 					</Alert>
-				) : null}
-				{vm.quoteState.loading ? (
-					<LoadingSkeleton label={t("stock.loadingPrice")}>
-						<Skeleton mt="lg" h={55} w="50%" />
-					</LoadingSkeleton>
-				) : (
-					<div aria-live="polite">
-						<Text className={classes.price} mt="lg">
-							{formatMoney(vm.quote?.price ?? null)}
-						</Text>
-						{vm.quote?.change ? (
-							<Text
-								fw={600}
-								className={
-									vm.quote.change.value.startsWith("-")
-										? classes.negative
-										: classes.positive
-								}
-							>
-								{vm.quote.change.value.startsWith("-") ? "" : "+"}
-								{formatMoney(vm.quote.change)}
-								{vm.quote.changePercent !== null
-									? ` (${formatDecimal(vm.quote.changePercent)} %)`
-									: ""}
-							</Text>
-						) : null}
-						{vm.quote?.previousCloseDate ? (
-							<Text size="xs" c="dimmed">
-								{t("stock.changeBase", {
-									date: formatDate(vm.quote.previousCloseDate),
-								})}
-							</Text>
-						) : (
-							<Text size="xs" c="dimmed">
-								{t("stock.noComparison")}
-							</Text>
-						)}
-						<Group gap="sm" mt="sm">
-							<Badge variant="light" color="gray">
-								{t(`stock.trading.${vm.quote?.tradingStatus}`, {
-									defaultValue: t("stock.trading.unknown"),
-								})}
-							</Badge>
-							{vm.quote?.priceAt ? (
-								<Text size="xs" c="dimmed">
-									{t("stock.priceAt", {
-										date: formatSnapshotTime(vm.quote.priceAt),
-									})}
+				))}
+				{vm.quoteState.loading
+					? (
+							<LoadingSkeleton label={t("stock.loadingPrice")}>
+								<Skeleton h={55} mt="lg" w="50%" />
+							</LoadingSkeleton>
+						)
+					: (
+							<div aria-live="polite">
+								<Text className={classes.price} mt="lg">
+									{formatMoney(vm.quote?.price)}
 								</Text>
-							) : null}
-						</Group>
-						{vm.quote?.unavailable.length ? (
-							<Text c="dimmed" size="xs" mt="xs">
-								{t("stock.partialQuote")}
-							</Text>
-						) : null}
-						{vm.quoteState.refreshing ? (
-							<Text role="status" size="xs" c="dimmed">
-								{t("accounts.refreshing")}
-							</Text>
-						) : null}
-					</div>
-				)}
+								{!!(vm.quote?.change) && ((
+									<Text
+										className={
+											vm.quote.change.value.startsWith("-")
+												? classes.negative
+												: classes.positive
+										}
+										fw={600}
+									>
+										{vm.quote.change.value.startsWith("-") ? "" : "+"}
+										{formatMoney(vm.quote.change)}
+										{vm.quote.changePercent === null
+											? ""
+											: ` (${formatDecimal(vm.quote.changePercent)} %)`}
+									</Text>
+								))}
+								{vm.quote?.previousCloseDate
+									? (
+											<Text c="dimmed" size="xs">
+												{t("stock.changeBase", {
+													date: formatDate(vm.quote.previousCloseDate),
+												})}
+											</Text>
+										)
+									: (
+											<Text c="dimmed" size="xs">
+												{t("stock.noComparison")}
+											</Text>
+										)}
+								<Group gap="sm" mt="sm">
+									<Badge color="gray" variant="light">
+										{t(`stock.trading.${vm.quote?.tradingStatus}`, {
+											defaultValue: t("stock.trading.unknown"),
+										})}
+									</Badge>
+									{!!(vm.quote?.priceAt) && ((
+										<Text c="dimmed" size="xs">
+											{t("stock.priceAt", {
+												date: formatSnapshotTime(vm.quote.priceAt),
+											})}
+										</Text>
+									))}
+								</Group>
+								{!!(vm.quote?.unavailable.length) && ((
+									<Text c="dimmed" mt="xs" size="xs">
+										{t("stock.partialQuote")}
+									</Text>
+								))}
+								{!!(vm.quoteState.refreshing) && ((
+									<Text c="dimmed" role="status" size="xs">
+										{t("accounts.refreshing")}
+									</Text>
+								))}
+							</div>
+						)}
 				<StockSection
-					title={t("stock.company")}
-					state={vm.companyState}
 					embedded
+					state={vm.companyState}
+					title={t("stock.company")}
 				>
 					<Group gap="xl" mb="md">
-						{stock.sector ? (
+						{!!(stock.sector) && ((
 							<Text size="sm">
-								{t("stock.sector")}:{" "}
+								{t("stock.sector")}
+								:
+								{" "}
 								{t(`stock.sectors.${stock.sector}`, {
 									defaultValue: stock.sector,
 								})}
 							</Text>
-						) : null}
-						{stock.lot !== null ? (
+						))}
+						{stock.lot !== null && ((
 							<Text size="sm">{t("stock.lot", { value: stock.lot })}</Text>
-						) : null}
+						))}
 					</Group>
-					{vm.company ? (
+					{!!(vm.company) && ((
 						<Stack gap="lg">
-							{vm.company.unavailable.length ? (
-								<Alert color="orange" role="status" aria-live="polite">
+							{vm.company.unavailable.length > 0 && ((
+								<Alert aria-live="polite" color="orange" role="status">
 									<Group justify="space-between">
 										<Text size="sm">{t("stock.partialCompany")}</Text>
 										<Button
+											onClick={vm.companyState.retry}
 											size="xs"
 											variant="default"
-											onClick={vm.companyState.retry}
 										>
 											{t("accounts.retry")}
 										</Button>
 									</Group>
 								</Alert>
-							) : null}
-							{vm.company.metrics.length ? (
-								<div className={classes.companyMetrics}>
-									{vm.company.metrics.map((metric) => (
-										<div key={metric.key}>
-											<Text size="xs" c="dimmed">
-												{t(`stock.metrics.${metric.key}`)}
-												{metric.period ? ` · ${metric.period}` : ""}
-											</Text>
-											<Text fw={600} size="lg">
-												{new Intl.NumberFormat("ru-RU", {
-													maximumFractionDigits: 2,
-													notation:
+							))}
+							{vm.company.metrics.length > 0
+								? (
+										<div className={classes.companyMetrics}>
+											{vm.company.metrics.map(metric => (
+												<div key={metric.key}>
+													<Text c="dimmed" size="xs">
+														{t(`stock.metrics.${metric.key}`)}
+														{metric.period ? ` · ${metric.period}` : ""}
+													</Text>
+													<Text fw={600} size="lg">
+														{new Intl.NumberFormat("ru-RU", {
+															maximumFractionDigits: 2,
+															notation:
 														metric.unit === "money" ? "compact" : "standard",
-												}).format(metric.value)}{" "}
-												{metric.unit === "money"
-													? metric.currency === "RUB"
-														? "₽"
-														: (metric.currency ?? t("stock.currencyUnknown"))
-													: metric.unit === "percent"
-														? "%"
-														: "×"}
-											</Text>
+														}).format(metric.value)}
+														{" "}
+														{metricUnit(metric, t("stock.currencyUnknown"))}
+													</Text>
+												</div>
+											))}
 										</div>
-									))}
-								</div>
-							) : (
-								<Text c="dimmed">{t("stock.noFundamentals")}</Text>
-							)}
-							<Text size="xs" c="dimmed">
+									)
+								: (
+										<Text c="dimmed">{t("stock.noFundamentals")}</Text>
+									)}
+							<Text c="dimmed" size="xs">
 								{t("stock.periodNote")}
 							</Text>
 						</Stack>
-					) : null}
+					))}
 				</StockSection>
 			</Paper>
 			<StockChart vm={vm} />
@@ -218,4 +228,9 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 	);
 };
 
+function metricUnit(metric: NonNullable<StockPageVm["company"]>["metrics"][number], unknownCurrency: string) {
+	if (metric.unit === "money") return metric.currency === "RUB" ? "₽" : (metric.currency ?? unknownCurrency);
+	return metric.unit === "percent" ? "%" : "×";
+}
+
 export { StockPageView };