feat: unify upcoming event cards across pages
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { formatMoney, instrumentLogoUrl } from "@/shared/lib";
|
||||
import { EntryCard } from "@/shared/ui";
|
||||
import type { BrokerageEvent } from "../api/useBrokerageEvents";
|
||||
|
||||
type BrokerageEventCardProps = { event: BrokerageEvent };
|
||||
|
||||
const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
|
||||
const { event } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
const date = new Intl.DateTimeFormat("ru-RU", {
|
||||
dateStyle: "medium",
|
||||
timeZone: "UTC",
|
||||
}).format(new Date(`${event.date}T00:00:00Z`));
|
||||
|
||||
const metadata = [
|
||||
date,
|
||||
event.dateKind === "registry" ? t("events.dateKind.registry") : null,
|
||||
event.isin,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" · ");
|
||||
|
||||
return (
|
||||
<EntryCard
|
||||
title={`${t(`events.type.${event.type}`)} · ${event.displayName}`}
|
||||
metadata={metadata}
|
||||
initial={(
|
||||
(event.ticker ?? event.displayName).trim()[0] ?? "?"
|
||||
).toUpperCase()}
|
||||
imageSrc={instrumentLogoUrl(event.logoName)}
|
||||
value={
|
||||
event.projectedAmount
|
||||
? formatMoney(event.projectedAmount)
|
||||
: t("events.noAmount")
|
||||
}
|
||||
valueLabel={t("events.projectedAmount")}
|
||||
tone="neutral"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { BrokerageEventCard };
|
||||
@@ -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,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
import { Alert, Button, Skeleton, Stack, Text } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
import { LoadingSkeleton } from "@/shared/ui";
|
||||
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={`${event.type}-${event.date}-${event.ticker}`}
|
||||
event={event}
|
||||
/>
|
||||
))
|
||||
: null}
|
||||
<Button component={Link} to={events.to} variant="subtle">
|
||||
{t("events.open")}
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export { BrokerageEventsPreview, type BrokerageEventsPreviewState };
|
||||
Reference in New Issue
Block a user