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/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.stories.tsx

@@ -1,13 +1,15 @@
-import { Stack } from "@mantine/core";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Stack } from "@mantine/core";
 import { EntryCard } from "@wealthledger/ui";
+
 import { BankOperationIcon } from "./BankOperationIcon";
 
 const meta = {
-	title: "Product/BankCards/OperationIcons",
+	args: { categoryName: "Продукты", kind: "expense" },
 	component: BankOperationIcon,
 	tags: ["autodocs"],
-	args: { kind: "expense", categoryName: "Продукты" },
+	title: "Product/BankCards/OperationIcons",
 } satisfies Meta<typeof BankOperationIcon>;
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -40,28 +42,28 @@ export const Categories: Story = {
 				"Хостинг и ИИ-сервисы",
 				"Цифровые покупки",
 				"Моя категория",
-			].map((name) => (
+			].map(name => (
 				<EntryCard
-					key={name}
-					title="Расход"
-					metadata={`12.09.2026 · ${name}`}
-					initial="Р"
 					color="red"
-					icon={<BankOperationIcon kind="expense" categoryName={name} />}
+					icon={<BankOperationIcon categoryName={name} kind="expense" />}
+					initial="Р"
+					key={name}
+					metadata={`12.09.2026 · ${name}`}
+					title="Расход"
+					tone="negative"
 					value="−1 250,00 ₽"
 					valueLabel="Расход"
-					tone="negative"
 				/>
 			))}
 			<EntryCard
-				title="Пополнение"
-				metadata="12.09.2026"
-				initial="П"
 				color="green"
 				icon={<BankOperationIcon kind="topup" />}
+				initial="П"
+				metadata="12.09.2026"
+				title="Пополнение"
+				tone="positive"
 				value="+15 000,00 ₽"
 				valueLabel="Пополнение"
-				tone="positive"
 			/>
 		</Stack>
 	),

src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.test.tsx

@@ -1,36 +1,40 @@
 import { render } from "@testing-library/react";
 import { expect, it } from "vitest";
+
 import { BankOperationIcon } from "./BankOperationIcon";
 
 it("matches normalized category names, falls back after renaming and distinguishes operation kinds", () => {
 	const { container, rerender } = render(
-		<BankOperationIcon kind="expense" categoryName="Жильё" />,
+		<BankOperationIcon categoryName="Жильё" kind="expense" />,
 	);
+	// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
 	const path = () => container.querySelector("path")?.getAttribute("d");
 	const housing = path();
-	rerender(<BankOperationIcon kind="expense" categoryName="  ЖИЛЬЕ  " />);
+	rerender(<BankOperationIcon categoryName="  ЖИЛЬЕ  " kind="expense" />);
 	expect(path()).toBe(housing);
-	rerender(<BankOperationIcon kind="expense" categoryName="Другое" />);
+	rerender(<BankOperationIcon categoryName="Другое" kind="expense" />);
 	const fallback = path();
 	expect(fallback).not.toBe(housing);
-	for (const categoryName of ["Моя категория", "constructor", null]) {
-		rerender(<BankOperationIcon kind="expense" categoryName={categoryName} />);
+	for (const categoryName of ["Моя категория", "constructor", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null]) {
+		rerender(<BankOperationIcon categoryName={categoryName} kind="expense" />);
 		expect(path()).toBe(fallback);
 	}
 	const paths = [fallback, housing];
 	for (const kind of ["topup", "transfer", "refund"] as const) {
-		rerender(<BankOperationIcon kind={kind} categoryName="Жильё" />);
+		rerender(<BankOperationIcon categoryName="Жильё" kind={kind} />);
 		expect(path()).toBeTruthy();
 		paths.push(path());
 	}
 	expect(new Set(paths).size).toBe(5);
+	// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
 	expect(container.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
 });
 
 it("provides a distinct icon for every existing named category", () => {
 	const { container, rerender } = render(
-		<BankOperationIcon kind="expense" categoryName="Другое" />,
+		<BankOperationIcon categoryName="Другое" kind="expense" />,
 	);
+	// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
 	const paths = new Set([container.querySelector("path")?.getAttribute("d")]);
 	for (const categoryName of [
 		"Алкоголь",
@@ -57,7 +61,8 @@ it("provides a distinct icon for every existing named category", () => {
 		"Хостинг и ИИ-сервисы",
 		"Цифровые покупки",
 	]) {
-		rerender(<BankOperationIcon kind="expense" categoryName={categoryName} />);
+		rerender(<BankOperationIcon categoryName={categoryName} kind="expense" />);
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
 		const path = container.querySelector("path")?.getAttribute("d");
 		expect(path).toBeTruthy();
 		expect(paths.has(path), categoryName).toBe(false);

src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx

@@ -1,34 +1,36 @@
 import type { FC } from "react";
+
 import { bindIconAnimation } from "@/shared/lib";
+
 import type { BankOperation } from "../../api/queries";
 
 import { bankOperationAppearance } from "../../model/operation-appearance";
 import classes from "./BankOperationIcon.module.css";
 
 type BankOperationIconProps = {
+	categoryName?: null | string;
 	kind: BankOperation["kind"];
-	categoryName?: string | null;
 };
 const BankOperationIcon: FC<BankOperationIconProps> = (props) => {
 	const icon = bankOperationAppearance(props.kind, props.categoryName);
 	return (
 		<svg
-			ref={bindIconAnimation}
+			aria-hidden="true"
 			className={`${classes.icon} ${icon.animation ? classes[icon.animation] : ""}`}
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
 			fill="none"
+			focusable="false"
+			height="24"
+			ref={bindIconAnimation}
 			stroke="currentColor"
-			strokeWidth="1.6"
 			strokeLinecap="round"
 			strokeLinejoin="round"
-			aria-hidden="true"
-			focusable="false"
-			style={{ flexShrink: 0, color: `var(--mantine-color-${icon.color}-7)` }}
+			strokeWidth="1.6"
+			style={{ color: `var(--mantine-color-${icon.color}-7)`, flexShrink: 0 }}
+			viewBox="0 0 24 24"
+			width="24"
 		>
 			{icon.path.split(" M").map((part, index) => (
-				<path key={part} d={index ? `M${part}` : part} pathLength={1} />
+				<path d={index ? `M${part}` : part} key={part} pathLength={1} />
 			))}
 		</svg>
 	);