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.

packages/icons/src/Icons.stories.tsx

@@ -1,10 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+
 import { AddIcon, DeleteIcon, EditIcon } from "./index";
 
 const meta = {
-	title: "Design System/Icons",
 	component: AddIcon,
-	tags: ["autodocs"],
 	parameters: {
 		docs: {
 			description: {
@@ -13,6 +12,8 @@ const meta = {
 			},
 		},
 	},
+	tags: ["autodocs"],
+	title: "Design System/Icons",
 } satisfies Meta<typeof AddIcon>;
 
 export default meta;
@@ -20,14 +21,14 @@ type Story = StoryObj<typeof meta>;
 
 export const Decorative: Story = {
 	render: () => (
-		<div style={{ display: "flex", gap: 16, color: "#2563eb" }}>
-			<button type="button" aria-label="Добавить пример">
+		<div style={{ color: "#2563eb", display: "flex", gap: 16 }}>
+			<button aria-label="Добавить пример" type="button">
 				<AddIcon size={20} strokeWidth={2} />
 			</button>
-			<button type="button" aria-label="Изменить пример">
+			<button aria-label="Изменить пример" type="button">
 				<EditIcon size={18} />
 			</button>
-			<button type="button" aria-label="Удалить пример">
+			<button aria-label="Удалить пример" type="button">
 				<DeleteIcon size={18} />
 			</button>
 		</div>
@@ -36,10 +37,10 @@ export const Decorative: Story = {
 
 export const Meaningful: Story = {
 	render: () => (
-		<div style={{ display: "flex", gap: 16, color: "#2563eb" }}>
-			<AddIcon aria-hidden={false} role="img" aria-label="Добавление" />
-			<EditIcon aria-hidden={false} role="img" aria-label="Редактирование" />
-			<DeleteIcon aria-hidden={false} role="img" aria-label="Удаление" />
+		<div style={{ color: "#2563eb", display: "flex", gap: 16 }}>
+			<AddIcon aria-hidden={false} aria-label="Добавление" role="img" />
+			<EditIcon aria-hidden={false} aria-label="Редактирование" role="img" />
+			<DeleteIcon aria-hidden={false} aria-label="Удаление" role="img" />
 		</div>
 	),
 };

packages/icons/src/Icons.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { AddIcon, DeleteIcon, EditIcon } from "./index";
 
 describe("icon accessibility", () => {
@@ -7,19 +8,20 @@ describe("icon accessibility", () => {
 		"keeps decoration hidden and exposes explicitly named images: %s",
 		(Icon) => {
 			const { rerender } = render(
-				<button type="button" aria-label="Действие">
+				<button aria-label="Действие" type="button">
 					<Icon />
 				</button>,
 			);
 			expect(screen.queryByRole("img")).not.toBeInTheDocument();
 			expect(
+				// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
 				screen.getByRole("button", { name: "Действие" }).querySelector("svg"),
 			).toHaveAttribute("focusable", "false");
 			rerender(
 				<Icon
 					aria-hidden={false}
-					role="img"
 					aria-label="Пример"
+					role="img"
 					size={18}
 					strokeWidth={2}
 				/>,

packages/icons/src/svg/AddIcon.tsx

@@ -1,19 +1,20 @@
 import type { FC } from "react";
+
 import type { IconProps } from "../types";
 
 const AddIcon: FC<IconProps> = (props) => {
 	const { size = "24", ...svgProps } = props;
 	return (
 		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
 			aria-hidden="true"
+			fill="none"
 			focusable="false"
+			height={size}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
 			{...svgProps}
 		>
 			<path d="M12 5v14 M5 12h14" />

packages/icons/src/svg/DeleteIcon.tsx

@@ -1,20 +1,21 @@
 import type { FC } from "react";
+
 import type { IconProps } from "../types";
 
 const DeleteIcon: FC<IconProps> = (props) => {
 	const { size = "24", ...svgProps } = props;
 	return (
 		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 24 24"
+			aria-hidden="true"
 			fill="none"
+			focusable="false"
+			height={size}
 			stroke="currentColor"
-			strokeWidth="1.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"
-			aria-hidden="true"
-			focusable="false"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
 			{...svgProps}
 		>
 			<path d="M3 6h18 M9 6V3h6v3 M5 6l1 15h12l1-15 M10 10v7 M14 10v7" />

packages/icons/src/svg/EditIcon.tsx

@@ -1,20 +1,21 @@
 import type { FC } from "react";
+
 import type { IconProps } from "../types";
 
 const EditIcon: FC<IconProps> = (props) => {
 	const { size = "24", ...svgProps } = props;
 	return (
 		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 24 24"
+			aria-hidden="true"
 			fill="none"
+			focusable="false"
+			height={size}
 			stroke="currentColor"
-			strokeWidth="1.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"
-			aria-hidden="true"
-			focusable="false"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
 			{...svgProps}
 		>
 			<path d="m16 3 5 5-12 12-6 1 1-6L16 3Z M13 6l5 5" />