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/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>
 	);
 };