refactor: enforce frontend view model boundaries

src/pages/account/ui/AccountPage/components/PositionCard/PositionCard.stories.tsx

@@ -4,24 +4,25 @@ import type { AccountPagePosition } from "../../AccountPage.vm";
 
 import { PositionCard } from "./PositionCard.view";
 
-const syntheticPosition = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-{
-	absoluteReturn: { currency: "RUB", value: "5000" },
-	averagePurchasePrice: { currency: "RUB", value: "200" },
-	currentValue: { currency: "RUB", value: "25000" },
-	displayName: "Учебные технологии",
-	figi: null,
-	isin: null,
-	logoName: null,
-	logoSrc: null,
-	quantity: "100",
-	returnText: "+5 000 ₽",
-	returnTone: "positive",
-	shareText: "20%",
-	ticker: "DEMO",
-	type: "STOCK",
-}
-/* eslint-enable unicorn/no-null */) satisfies AccountPagePosition;
+/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+const syntheticPosition
+	= {
+		absoluteReturn: { currency: "RUB", value: "5000" },
+		averagePurchasePrice: { currency: "RUB", value: "200" },
+		currentValue: { currency: "RUB", value: "25000" },
+		displayName: "Учебные технологии",
+		figi: null,
+		isin: null,
+		logoName: null,
+		logoSrc: null,
+		quantity: "100",
+		returnText: "+5 000 ₽",
+		returnTone: "positive",
+		shareText: "20%",
+		ticker: "DEMO",
+		type: "STOCK",
+	} satisfies /* eslint-enable unicorn/no-null */ AccountPagePosition;
 
 const meta = {
 	args: { kind: "stocks", position: syntheticPosition },
@@ -61,8 +62,10 @@ export const StockGain: Story = {
 	},
 };
 
-export const BondLoss: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-	{
+/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+export const BondLoss: Story
+	= {
 		args: {
 			kind: "bonds",
 			position: {
@@ -70,7 +73,8 @@ export const BondLoss: Story = (/* eslint-disable unicorn/no-null -- Fixture pre
 				absoluteReturn: { currency: "RUB", value: "-500" },
 				averagePurchasePrice: { currency: "RUB", value: "1000" },
 				currentValue: { currency: "RUB", value: "9500" },
-				displayName: "Учебные облигации для долгосрочных накоплений, выпуск 2030",
+				displayName:
+					"Учебные облигации для долгосрочных накоплений, выпуск 2030",
 				isin: "DEMO-BOND-2030",
 				quantity: "10",
 				returnText: "−500 ₽",
@@ -85,15 +89,17 @@ export const BondLoss: Story = (/* eslint-disable unicorn/no-null -- Fixture pre
 			docs: {
 				description: {
 					story:
-					"Для облигации используется идентификатор выпуска. Длинное имя и отрицательная сумма позволяют проверить компактное представление на узком экране.",
+						"Для облигации используется идентификатор выпуска. Длинное имя и отрицательная сумма позволяют проверить компактное представление на узком экране.",
 				},
 			},
 		},
-	}
-/* eslint-enable unicorn/no-null */);
+	};
+/* eslint-enable unicorn/no-null */
 
-export const Other: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-	{
+/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+export const Other: Story
+	= {
 		args: {
 			kind: "other",
 			position: {
@@ -109,15 +115,17 @@ export const Other: Story = (/* eslint-disable unicorn/no-null -- Fixture preser
 			docs: {
 				description: {
 					story:
-					"Компактный вариант для остальных инструментов сохраняет количество, стоимость и пояснение результата без оформления акции или облигации.",
+						"Компактный вариант для остальных инструментов сохраняет количество, стоимость и пояснение результата без оформления акции или облигации.",
 				},
 			},
 		},
-	}
-/* eslint-enable unicorn/no-null */);
+	};
+/* eslint-enable unicorn/no-null */
 
-export const MissingValuation: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-	{
+/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+export const MissingValuation: Story
+	= {
 		args: {
 			position: {
 				...syntheticPosition,
@@ -136,9 +144,9 @@ export const MissingValuation: Story = (/* eslint-disable unicorn/no-null -- Fix
 			docs: {
 				description: {
 					story:
-					"При отсутствии оценки остаются название и количество. Неизвестная стоимость, доля и результат не изображаются нулевыми значениями.",
+						"При отсутствии оценки остаются название и количество. Неизвестная стоимость, доля и результат не изображаются нулевыми значениями.",
 				},
 			},
 		},
-	}
-/* eslint-enable unicorn/no-null */);
+	};
+/* eslint-enable unicorn/no-null */

src/pages/account/ui/AccountPage/components/PositionCard/PositionCard.view.tsx

@@ -23,20 +23,26 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 	const { kind, position } = props;
 	const { t } = useTranslation();
 	const isExpanded = kind !== "other";
+
 	const returnClass = position.returnTone
 		? classes[position.returnTone]
 		: undefined;
+
 	let returnText = position.returnText;
-	if (returnText && !isExpanded) returnText = t("portfolio.return", { value: returnText });
+	if (returnText && !isExpanded)
+		returnText = t("portfolio.return", { value: returnText });
 	const instrumentTo = position.instrumentTo;
+
 	const identifier
 		= kind === "stocks" ? (position.ticker ?? position.isin) : position.isin;
+
 	const identifierText = [
 		t("portfolio.quantity", { value: position.quantity }),
 		identifier,
 	]
 		.filter(Boolean)
 		.join(" · ");
+
 	const accountLink = position.account
 		? (
 				<Anchor
@@ -48,15 +54,16 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 				</Anchor>
 			)
 		: undefined;
+
 	const secondaryText = [
 		position.averagePurchasePrice
 			? t("portfolio.avgPrice", {
 					value: formatMoney(position.averagePurchasePrice),
 				})
-			: /* eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null. */ null,
+			: null, // eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null.
 		position.shareText
 			? t("portfolio.share", { value: position.shareText })
-			: /* eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null. */ null,
+			: null, // eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null.
 	]
 		.filter(Boolean)
 		.join(" · ");
@@ -71,6 +78,7 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 						src={position.logoSrc}
 						to={instrumentTo}
 					/>
+
 					<Stack className={classes.expandedIdentity} gap={2} miw={0}>
 						{instrumentTo
 							? (
@@ -83,31 +91,37 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 										{position.displayName}
 									</Text>
 								)}
+
 						{accountLink}
+
 						<Text c="dimmed" className={classes.expandedIdentifiers} size="xs">
 							{identifierText}
 						</Text>
 					</Stack>
+
 					<Stack align="flex-end" className={classes.expandedValue} gap={2}>
-						{!!(position.currentValue) && ((
+						{!!position.currentValue && (
 							<Text fw={700} size="lg">
 								{formatMoney(position.currentValue)}
 							</Text>
-						))}
-						{!!(returnText) && ((
+						)}
+
+						{!!returnText && (
 							<Text className={returnClass} fw={600} size="sm">
 								{returnText}
 							</Text>
-						))}
+						)}
 					</Stack>
 				</div>
-				{!!(secondaryText) && ((
+
+				{!!secondaryText && (
 					<Text c="dimmed" className={classes.expandedMeta} size="xs">
 						{secondaryText}
 					</Text>
-				))}
+				)}
 			</Card>
 		);
+
 	return (
 		<Card className={classes.tile} withBorder>
 			<Group align="flex-start" justify="space-between" wrap="nowrap">
@@ -115,45 +129,52 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 					<Text fw={700} lineClamp={1}>
 						{position.displayName}
 					</Text>
+
 					{accountLink}
-					{!!(position.isin) && ((
+
+					{!!position.isin && (
 						<Text c="dimmed" className={classes.mono} size="xs">
 							{position.isin}
 						</Text>
-					))}
+					)}
+
 					<Text c="dimmed" size="xs">
 						{t("portfolio.quantity", { value: position.quantity })}
 					</Text>
 				</Stack>
+
 				<Stack align="flex-end" gap={2}>
-					{!!(position.currentValue) && ((
+					{!!position.currentValue && (
 						<Text fw={800} size="lg">
 							{formatMoney(position.currentValue)}
 						</Text>
-					))}
-					{!!(returnText) && ((
+					)}
+
+					{!!returnText && (
 						<Text className={returnClass} fw={600} size="sm">
 							{returnText}
 						</Text>
-					))}
+					)}
 				</Stack>
 			</Group>
-			{!!(position.averagePurchasePrice || position.shareText) && ((
+
+			{!!(position.averagePurchasePrice || position.shareText) && (
 				<Group justify="space-between" mt="xs">
-					{!!(position.averagePurchasePrice) && ((
+					{!!position.averagePurchasePrice && (
 						<Text c="dimmed" size="xs">
 							{t("portfolio.avgPrice", {
 								value: formatMoney(position.averagePurchasePrice),
 							})}
 						</Text>
-					))}
-					{!!(position.shareText) && ((
+					)}
+
+					{!!position.shareText && (
 						<Text c="dimmed" size="xs">
 							{t("portfolio.share", { value: position.shareText })}
 						</Text>
-					))}
+					)}
 				</Group>
-			))}
+			)}
 		</Card>
 	);
 };