feat: add Storybook for WealthLedger components

2026-09-07 22:22:37 +03:00
parent 9e42148f6a
commit e63fd89a39
18 changed files with 2889 additions and 22 deletions
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AccountPageLoading } from "./AccountPageLoading.view";
+
+const meta = {
+	title: "WealthLedger/AccountPageLoading",
+	component: AccountPageLoading,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Начальная загрузка страницы счёта без доступных данных: настоящий page-owned skeleton заголовка, сводки и строк. Shared LoadingSkeleton предоставляет busy-region, фигуры декоративны и не получают фокус. Не используйте вместо сохранённых данных при refetch; запросы в витрине не выполняются.",
+			},
+		},
+	},
+} satisfies Meta<typeof AccountPageLoading>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const InitialLoading: Story = { name: "Начальная загрузка счёта" };
@@ -0,0 +1,49 @@
+import { Stack } from "@mantine/core";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { PortfolioRefreshState } from "./PortfolioRefreshState.view";
+import { PortfolioTotals } from "./PortfolioTotals.view";
+
+const meta = {
+	title: "WealthLedger/PortfolioRefreshState",
+	component: PortfolioRefreshState,
+	tags: ["autodocs"],
+	args: { refreshing: false, refreshError: false, retry: fn() },
+	argTypes: {
+		refreshing: { control: "boolean" },
+		refreshError: { control: "boolean" },
+		retry: { control: false },
+	},
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Обновление уже показанных данных портфеля. Реальные PortfolioTotals остаются видимыми вместе с PortfolioRefreshState при refetch и его ошибке. Суммы синтетические; это presentation Client Cached Snapshot, без QueryClient и запроса API. Retry регистрирует локальное действие в Actions и не доказывает восстановление API.",
+			},
+		},
+	},
+	render: (args) => (
+		<Stack>
+			<PortfolioTotals
+				totals={[
+					{ currency: "RUB", value: "125000.50" },
+					{ currency: "USD", value: "320" },
+				]}
+			/>
+			<PortfolioRefreshState {...args} />
+		</Stack>
+	),
+} satisfies Meta<typeof PortfolioRefreshState>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Idle: Story = { name: "Сохранённые данные" };
+export const Refreshing: Story = {
+	name: "Фоновое обновление",
+	args: { refreshing: true },
+};
+export const RefreshError: Story = {
+	name: "Ошибка обновления с retry",
+	args: { refreshError: true },
+};
@@ -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: "WealthLedger/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:
+					"При отсутствии оценки остаются название и количество. Неизвестная стоимость, доля и результат не изображаются нулевыми значениями.",
+			},
+		},
+	},
+};
@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MemoryRouter } from "react-router";
+import type { BrokerageEvent } from "@/entities/brokerage-event";
+import { RecentEvents } from "./RecentEvents.view";
+
+const syntheticEvent = {
+	type: "coupon",
+	date: "2026-10-15",
+	dateKind: "event",
+	figi: null,
+	instrumentUid: null,
+	ticker: "DEMO",
+	displayName: "Учебные облигации",
+	projectedAmount: { currency: "RUB", value: "850.50" },
+} satisfies BrokerageEvent;
+
+const eventsPath = "/accounts/storybook-account/events";
+
+const meta = {
+	title: "WealthLedger/RecentEvents",
+	component: RecentEvents,
+	tags: ["autodocs"],
+	argTypes: {
+		events: { control: false },
+	},
+	decorators: [
+		(Story) => (
+			<MemoryRouter initialEntries={["/accounts/storybook-account"]}>
+				<Story />
+			</MemoryRouter>
+		),
+	],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Раздел ближайших событий на странице счёта WealthLedger. Раздел самостоятельно отображает загрузку, ошибку, отсутствие событий и полученные данные. Все события и суммы вымышлены. Ссылка на календарь меняет только локальный маршрут MemoryRouter; сам календарь в этой истории не отображается.",
+			},
+		},
+	},
+	args: {
+		events: {
+			state: "loaded",
+			to: eventsPath,
+			items: [
+				syntheticEvent,
+				{
+					...syntheticEvent,
+					type: "dividend",
+					date: "2026-11-01",
+					dateKind: "registry",
+					ticker: "EXAMPLE",
+					displayName: "Учебные технологии",
+					projectedAmount: { currency: "RUB", value: "1200" },
+				},
+			],
+		},
+	},
+} satisfies Meta<typeof RecentEvents>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Loaded: Story = {
+	name: "События получены",
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Предстоящие купоны и дивиденды показываются с ожидаемой суммой. Это прогноз событий, а не подтверждение получения дохода.",
+			},
+		},
+	},
+};
+
+export const Loading: Story = {
+	name: "Загрузка раздела",
+	args: { events: { state: "loading", to: eventsPath } },
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Локальный skeleton занимает место строк событий и имеет доступное обозначение загрузки. Остальные разделы страницы могут оставаться доступными.",
+			},
+		},
+	},
+};
+
+export const Failed: Story = {
+	name: "Ошибка получения событий",
+	args: { events: { state: "error", to: eventsPath } },
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Ошибка ограничена разделом событий. Сохраняется переход к полному календарю; недоступные события не выдаются за пустой список.",
+			},
+		},
+	},
+};
+
+export const Empty: Story = {
+	name: "Нет ближайших событий",
+	args: { events: { state: "empty", to: eventsPath } },
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Успешно полученный пустой результат объясняется отдельным сообщением и сохраняет переход к календарю.",
+			},
+		},
+	},
+};
+
+export const MissingAmount: Story = {
+	name: "Событие без ожидаемой суммы",
+	args: {
+		events: {
+			state: "loaded",
+			to: eventsPath,
+			items: [{ ...syntheticEvent, projectedAmount: null }],
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Событие остаётся видимым при неизвестной ожидаемой сумме. Отсутствие оценки не подменяется нулевой выплатой.",
+			},
+		},
+	},
+};