feat: unify upcoming event cards across pages
This commit is contained in:
@@ -1,42 +0,0 @@
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: var(--mantine-spacing-sm);
|
||||
align-items: center;
|
||||
padding: var(--mantine-spacing-md);
|
||||
border-color: var(--mantine-color-gray-3);
|
||||
background: var(--mantine-color-gray-0);
|
||||
}
|
||||
|
||||
.identity,
|
||||
.amount {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.amount {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: var(--mantine-color-green-6);
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: var(--mantine-color-red-6);
|
||||
}
|
||||
|
||||
.neutral {
|
||||
color: var(--mantine-color-dimmed);
|
||||
}
|
||||
|
||||
@media (max-width: 36em) {
|
||||
.row {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.amount {
|
||||
grid-column: 2;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,9 @@
|
||||
import { Avatar, Paper, Stack, Text } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { formatSnapshotTime, instrumentLogoUrl } from "@/shared/lib";
|
||||
import { EntryCard } from "@/shared/ui";
|
||||
import type { BrokerageOperation } from "../api/useBrokerageOperations";
|
||||
import { paymentPresentation } from "../model/display";
|
||||
import classes from "./LedgerEntryRow.module.css";
|
||||
|
||||
type LedgerEntryRowProps = {
|
||||
operation: BrokerageOperation;
|
||||
@@ -14,44 +12,23 @@ type LedgerEntryRowProps = {
|
||||
const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
|
||||
const { operation } = props;
|
||||
const { t } = useTranslation();
|
||||
const [imageFailed, setImageFailed] = useState(false);
|
||||
const instrument =
|
||||
operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");
|
||||
const logoSrc = imageFailed ? null : instrumentLogoUrl(operation.logoName);
|
||||
const payment = paymentPresentation(operation);
|
||||
const metadata = [formatSnapshotTime(operation.occurredAt), instrument].join(
|
||||
" · ",
|
||||
);
|
||||
|
||||
return (
|
||||
<Paper className={classes.row} withBorder>
|
||||
<Avatar
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
radius="md"
|
||||
size={40}
|
||||
src={logoSrc}
|
||||
onError={() => setImageFailed(true)}
|
||||
>
|
||||
{(instrument.trim()[0] ?? "?").toUpperCase()}
|
||||
</Avatar>
|
||||
<Stack className={classes.identity} gap={2}>
|
||||
<Text fw={700} lineClamp={1}>
|
||||
{operation.description || operation.type}
|
||||
</Text>
|
||||
<Text c="dimmed" size="sm">
|
||||
{metadata}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack className={classes.amount} gap={2}>
|
||||
<Text className={classes[payment.tone]} fw={700}>
|
||||
{payment.amount}
|
||||
</Text>
|
||||
<Text className={classes[payment.tone]} size="sm">
|
||||
{t(payment.label)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<EntryCard
|
||||
title={operation.description || operation.type}
|
||||
metadata={metadata}
|
||||
initial={(instrument.trim()[0] ?? "?").toUpperCase()}
|
||||
imageSrc={instrumentLogoUrl(operation.logoName)}
|
||||
value={payment.amount}
|
||||
valueLabel={t(payment.label)}
|
||||
tone={payment.tone}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -43,6 +43,7 @@ describe("useBrokerageEvents", () => {
|
||||
instrumentUid: null,
|
||||
ticker: "SBER",
|
||||
displayName: "Сбер",
|
||||
logoName: "sber3.png",
|
||||
projectedAmount: { currency: "RUB", value: "12.34" },
|
||||
},
|
||||
],
|
||||
@@ -64,6 +65,7 @@ describe("useBrokerageEvents", () => {
|
||||
instrumentUid: null,
|
||||
ticker: "SBER",
|
||||
displayName: "Сбер",
|
||||
logoName: "sber3.png",
|
||||
projectedAmount: { currency: "RUB", value: "12.34" },
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -2,3 +2,8 @@ export {
|
||||
type BrokerageEvent,
|
||||
useBrokerageEvents,
|
||||
} from "./api/useBrokerageEvents";
|
||||
export { BrokerageEventCard } from "./ui/BrokerageEventCard";
|
||||
export {
|
||||
BrokerageEventsPreview,
|
||||
type BrokerageEventsPreviewState,
|
||||
} from "./ui/BrokerageEventsPreview";
|
||||
|
||||
@@ -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