refactor: colocate frontend component files

src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.stories.tsx

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MemoryRouter } from "react-router";
+import type { BrokerageEvent } from "../../api/useBrokerageEvents";
+import { BrokerageEventsPreview } from "./BrokerageEventsPreview";
+
+const syntheticEvent = {
+	type: "coupon",
+	date: "2026-10-15",
+	dateKind: "event",
+	figi: null,
+	instrumentUid: null,
+	ticker: "DEMO",
+	displayName: "Учебные облигации",
+	logoName: null,
+	isin: "RU000A0JX0J2",
+	projectedAmount: { currency: "RUB", value: "850.50" },
+} satisfies BrokerageEvent;
+
+const eventsPath = "/accounts/storybook-account/events";
+
+const meta = {
+	title: "Product/RecentEvents",
+	component: BrokerageEventsPreview,
+	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 BrokerageEventsPreview>;
+
+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:
+					"Событие остаётся видимым при неизвестной ожидаемой сумме. Отсутствие оценки не подменяется нулевой выплатой.",
+			},
+		},
+	},
+};
+
+export const LongEvent: Story = {
+	name: "Длинное название на узком экране",
+	args: {
+		events: {
+			state: "loaded",
+			to: eventsPath,
+			items: [
+				{
+					...syntheticEvent,
+					type: "offer",
+					displayName:
+						"Учебные облигации компании с очень длинным названием инструмента",
+					projectedAmount: null,
+				},
+			],
+		},
+	},
+};

src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx

@@ -0,0 +1,59 @@
+import { Alert, Button, Skeleton, Stack, Text } from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import type { BrokerageEvent } from "../../api/useBrokerageEvents";
+import { BrokerageEventCard } from "../BrokerageEventCard";
+
+type BrokerageEventsPreviewProps = {
+	events: BrokerageEventsPreviewState;
+};
+
+type BrokerageEventsPreviewState =
+	| { state: "loading" | "error" | "empty"; to: string }
+	| { state: "loaded"; to: string; items: BrokerageEvent[] };
+
+const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
+	const { events } = props;
+	const { t } = useTranslation();
+
+	return (
+		<Stack gap="sm">
+			{events.state === "loading" ? (
+				<LoadingSkeleton label={t("events.recentLoading")}>
+					{[0, 1, 2].map((index) => (
+						<Skeleton key={index} height={48} radius="sm" />
+					))}
+				</LoadingSkeleton>
+			) : null}
+			{events.state === "error" ? (
+				<Alert color="red">{t("events.recentError")}</Alert>
+			) : null}
+			{events.state === "empty" ? (
+				<Text c="dimmed">{t("events.recentEmpty")}</Text>
+			) : null}
+			{events.state === "loaded"
+				? events.items.map((event) => (
+						<BrokerageEventCard
+							key={JSON.stringify([
+								event.account?.id,
+								event.type,
+								event.date,
+								event.instrumentUid,
+								event.figi,
+								event.ticker,
+								event.logoName,
+							])}
+							event={event}
+						/>
+					))
+				: null}
+			<Button component={Link} to={events.to} variant="subtle">
+				{t("events.open")}
+			</Button>
+		</Stack>
+	);
+};
+
+export { BrokerageEventsPreview, type BrokerageEventsPreviewState };