refactor: address frontend review feedback

src/entities/bank-card/ui/BankCardFace/BankCardFace.stories.tsx

@@ -2,17 +2,16 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { SimpleGrid } from "@mantine/core";
 
+import { BankName } from "../../model/bank";
 import { BankCardFace } from "./BankCardFace";
 
-/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-
 const meta
 	= {
 		args: {
 			card: {
 				archivedAt: null,
 				balance: { currency: "RUB", value: "128450.75" },
-				bankName: "Сбербанк",
+				bankName: BankName.Sberbank,
 				id: "fictional",
 				lastFour: "4829",
 				name: "Для повседневных покупок",
@@ -25,7 +24,7 @@ const meta
 		component: BankCardFace,
 		tags: ["autodocs"],
 		title: "Product/BankCards/CardAppearance",
-	} satisfies /* eslint-enable unicorn/no-null */ Meta<typeof BankCardFace>;
+	} satisfies Meta<typeof BankCardFace>;
 
 export default meta;
 
@@ -35,33 +34,28 @@ export const Banks: Story = {
 	render: arguments_ => (
 		<SimpleGrid cols={{ base: 1, sm: 2 }} maw={920}>
 			{[
-				"Сбербанк",
-				"Т-Банк",
-				"Альфа-Банк",
-				"ВТБ",
-				// eslint-disable-next-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract.
+				BankName.Sberbank,
+				BankName.TBank,
+				BankName.AlfaBank,
+				BankName.Vtb,
 				null,
 			].map((bankName, index) => (
 				<BankCardFace
-					/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-					card={
-						{
-							...arguments_.card,
-							bankName,
-							paymentSystem:
+					card={{
+						...arguments_.card,
+						bankName,
+						paymentSystem:
 								// eslint-disable-next-line security/detect-object-injection -- This is a positional index into the local array, not a user-supplied object key.
 								(["mir", "mastercard", "visa", "mir", null] as const)[index]
 								?? null,
-						}
-						/* eslint-enable unicorn/no-null */
-					}
+					}}
 					key={bankName ?? "unknown"}
 				/>
 			))}
 		</SimpleGrid>
 	),
 };
-/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
 export const MissingDetails: Story
 	= {
 		args: {
@@ -73,7 +67,7 @@ export const MissingDetails: Story
 			},
 		},
 	};
-/* eslint-enable unicorn/no-null */
+
 export const LongArchived: Story = {
 	args: {
 		card: {

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

@@ -22,9 +22,7 @@ const BankCardFace: FC<BankCardFaceProps> = (props) => {
 			<div className={classes.top}>
 				<span className={classes.bank}>{card.bankName || t("bank.card")}</span>
 
-				{card.archivedAt && (
-					<span className={classes.archive}>{t("bank.archived")}</span>
-				)}
+				{card.archivedAt && <span className={classes.archive}>{t("bank.archived")}</span>}
 			</div>
 
 			<div aria-hidden="true" className={classes.hardware}>
@@ -46,9 +44,7 @@ const BankCardFace: FC<BankCardFaceProps> = (props) => {
 
 				{card.paymentSystem && (
 					<span className={classes.network} data-network={card.paymentSystem}>
-						{card.paymentSystem === "mastercard" && (
-							<span aria-hidden="true" className={classes.circles} />
-						)}
+						{card.paymentSystem === "mastercard" && <span aria-hidden="true" className={classes.circles} />}
 
 						{t(`bank.paymentSystems.${card.paymentSystem}`)}
 					</span>