refactor: colocate frontend component files

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

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { AccountPagePosition } from "../../AccountPage.vm";
+import { PositionCard } from "./PositionCard.view";
+
+const syntheticPosition = {
+	figi: null,
+	displayName: "Учебные технологии",
+	type: "STOCK",
+	quantity: "100",
+	currentValue: { currency: "RUB", value: "25000" },
+	averagePurchasePrice: { currency: "RUB", value: "200" },
+	absoluteReturn: { currency: "RUB", value: "5000" },
+	isin: null,
+	ticker: "DEMO",
+	logoName: null,
+	shareText: "20%",
+	returnText: "+5 000 ₽",
+	returnTone: "positive",
+	logoSrc: null,
+} satisfies AccountPagePosition;
+
+const meta = {
+	title: "Product/PositionCard",
+	component: PositionCard,
+	tags: ["autodocs"],
+	argTypes: {
+		kind: {
+			control: "inline-radio",
+			options: ["stocks", "bonds", "other"],
+		},
+		position: { control: false },
+	},
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Позиция портфеля WealthLedger: количество, стоимость, результат и доля. Доля и текст результата поступают готовыми из модели представления. Карточка не рассчитывает доходность. Все данные вымышлены; логотип заменён буквенным обозначением.",
+			},
+		},
+	},
+	args: { kind: "stocks", position: syntheticPosition },
+} satisfies Meta<typeof PositionCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const StockGain: Story = {
+	name: "Акция с положительным результатом",
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Развёрнутая карточка акции показывает тикер, оценку позиции и положительный результат. Цвет дополняет знак суммы.",
+			},
+		},
+	},
+};
+
+export const BondLoss: Story = {
+	name: "Облигация с отрицательным результатом",
+	args: {
+		kind: "bonds",
+		position: {
+			...syntheticPosition,
+			displayName: "Учебные облигации для долгосрочных накоплений, выпуск 2030",
+			type: "BOND",
+			quantity: "10",
+			currentValue: { currency: "RUB", value: "9500" },
+			averagePurchasePrice: { currency: "RUB", value: "1000" },
+			absoluteReturn: { currency: "RUB", value: "-500" },
+			isin: "DEMO-BOND-2030",
+			ticker: null,
+			shareText: "7,6%",
+			returnText: "−500 ₽",
+			returnTone: "negative",
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Для облигации используется идентификатор выпуска. Длинное имя и отрицательная сумма позволяют проверить компактное представление на узком экране.",
+			},
+		},
+	},
+};
+
+export const Other: Story = {
+	name: "Прочий инструмент",
+	args: {
+		kind: "other",
+		position: {
+			...syntheticPosition,
+			displayName: "Учебный фонд",
+			type: "FUND",
+			isin: "DEMO-FUND",
+			ticker: null,
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Компактный вариант для остальных инструментов сохраняет количество, стоимость и пояснение результата без оформления акции или облигации.",
+			},
+		},
+	},
+};
+
+export const MissingValuation: Story = {
+	name: "Оценка и идентификаторы отсутствуют",
+	args: {
+		position: {
+			...syntheticPosition,
+			displayName: "Учебная позиция без текущей оценки",
+			currentValue: null,
+			averagePurchasePrice: null,
+			absoluteReturn: null,
+			ticker: null,
+			shareText: null,
+			returnText: null,
+			returnTone: undefined,
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"При отсутствии оценки остаются название и количество. Неизвестная стоимость, доля и результат не изображаются нулевыми значениями.",
+			},
+		},
+	},
+};

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

@@ -0,0 +1,159 @@
+import { Anchor, Card, Group, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { formatMoney } from "@/shared/lib";
+import classes from "../../AccountPage.module.css";
+import type {
+	AccountPagePosition,
+	AccountPagePositionSection,
+} from "../../AccountPage.vm";
+import { PositionLogo } from "../PositionLogo.view";
+
+type PositionCardProps = {
+	kind: AccountPagePositionSection["kind"];
+	position: AccountPagePosition;
+};
+
+const PositionCard: FC<PositionCardProps> = (props) => {
+	const { kind, position } = props;
+	const { t } = useTranslation();
+	const isExpanded = kind !== "other";
+	const returnClass = position.returnTone
+		? classes[position.returnTone]
+		: undefined;
+	const returnText =
+		position.returnText && isExpanded
+			? position.returnText
+			: position.returnText
+				? t("portfolio.return", {
+						value: position.returnText,
+					})
+				: null;
+	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
+			component={Link}
+			to={`/accounts/${encodeURIComponent(position.account.id)}`}
+			size="xs"
+		>
+			{position.account.name}
+		</Anchor>
+	) : null;
+	const secondaryText = [
+		position.averagePurchasePrice
+			? t("portfolio.avgPrice", {
+					value: formatMoney(position.averagePurchasePrice),
+				})
+			: null,
+		position.shareText
+			? t("portfolio.share", { value: position.shareText })
+			: null,
+	]
+		.filter(Boolean)
+		.join(" · ");
+
+	if (isExpanded)
+		return (
+			<Card className={`${classes.tile} ${classes.expandedCard}`} withBorder>
+				<div className={classes.expandedMain}>
+					<PositionLogo
+						key={position.logoSrc ?? "no-logo"}
+						src={position.logoSrc}
+						label={position.displayName}
+						to={instrumentTo}
+					/>
+					<Stack gap={2} miw={0} className={classes.expandedIdentity}>
+						{instrumentTo ? (
+							<Anchor component={Link} to={instrumentTo} c="inherit" fw={600}>
+								{position.displayName}
+							</Anchor>
+						) : (
+							<Text fw={600} lineClamp={1}>
+								{position.displayName}
+							</Text>
+						)}
+						{accountLink}
+						<Text c="dimmed" size="xs" className={classes.expandedIdentifiers}>
+							{identifierText}
+						</Text>
+					</Stack>
+					<Stack gap={2} align="flex-end" className={classes.expandedValue}>
+						{position.currentValue ? (
+							<Text fw={700} size="lg">
+								{formatMoney(position.currentValue)}
+							</Text>
+						) : null}
+						{returnText ? (
+							<Text size="sm" fw={600} className={returnClass}>
+								{returnText}
+							</Text>
+						) : null}
+					</Stack>
+				</div>
+				{secondaryText ? (
+					<Text c="dimmed" size="xs" className={classes.expandedMeta}>
+						{secondaryText}
+					</Text>
+				) : null}
+			</Card>
+		);
+	return (
+		<Card className={classes.tile} withBorder>
+			<Group justify="space-between" align="flex-start" wrap="nowrap">
+				<Stack gap={2} miw={0}>
+					<Text fw={700} lineClamp={1}>
+						{position.displayName}
+					</Text>
+					{accountLink}
+					{position.isin ? (
+						<Text c="dimmed" size="xs" className={classes.mono}>
+							{position.isin}
+						</Text>
+					) : null}
+					<Text c="dimmed" size="xs">
+						{t("portfolio.quantity", { value: position.quantity })}
+					</Text>
+				</Stack>
+				<Stack gap={2} align="flex-end">
+					{position.currentValue ? (
+						<Text fw={800} size="lg">
+							{formatMoney(position.currentValue)}
+						</Text>
+					) : null}
+					{returnText ? (
+						<Text size="sm" fw={600} className={returnClass}>
+							{returnText}
+						</Text>
+					) : null}
+				</Stack>
+			</Group>
+			{position.averagePurchasePrice || position.shareText ? (
+				<Group justify="space-between" mt="xs">
+					{position.averagePurchasePrice ? (
+						<Text c="dimmed" size="xs">
+							{t("portfolio.avgPrice", {
+								value: formatMoney(position.averagePurchasePrice),
+							})}
+						</Text>
+					) : null}
+					{position.shareText ? (
+						<Text c="dimmed" size="xs">
+							{t("portfolio.share", { value: position.shareText })}
+						</Text>
+					) : null}
+				</Group>
+			) : null}
+		</Card>
+	);
+};
+
+export { PositionCard };