83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||
|
||
import { Stack } from "@mantine/core";
|
||
import { OperationIcon } from "@wealthledger/icons";
|
||
import { EntryCard } from "@wealthledger/ui";
|
||
|
||
import { bankOperationAppearance } from "../../model/operation-appearance";
|
||
|
||
const BankOperationIcon = (props: {
|
||
categoryName?: null | string;
|
||
kind: "expense" | "refund" | "topup" | "transfer";
|
||
}) => (
|
||
<OperationIcon {...bankOperationAppearance(props.kind, props.categoryName)} />
|
||
);
|
||
|
||
const meta = {
|
||
args: { categoryName: "Продукты", kind: "expense" },
|
||
component: BankOperationIcon,
|
||
tags: ["autodocs"],
|
||
title: "Product/BankCards/OperationIcons",
|
||
} satisfies Meta<typeof BankOperationIcon>;
|
||
|
||
export default meta;
|
||
|
||
type Story = StoryObj<typeof meta>;
|
||
|
||
export const Categories: Story = {
|
||
render: () => (
|
||
<Stack maw={640}>
|
||
{[
|
||
"Алкоголь",
|
||
"Вклады",
|
||
"Другое",
|
||
"Жильё",
|
||
"Здоровье",
|
||
"Инвестиции и накопления",
|
||
"Кафе",
|
||
"Образование",
|
||
"Переводы",
|
||
"Погашение кредита",
|
||
"Подписки",
|
||
"Покупки",
|
||
"Продукты",
|
||
"Путешествия",
|
||
"Развлечения",
|
||
"Связь и интернет",
|
||
"Снятие наличных",
|
||
"Ставки",
|
||
"Страхование",
|
||
"Табак",
|
||
"Такси",
|
||
"Транспорт",
|
||
"Хостинг и ИИ-сервисы",
|
||
"Цифровые покупки",
|
||
"Моя категория",
|
||
].map(name => (
|
||
<EntryCard
|
||
color="red"
|
||
icon={<BankOperationIcon categoryName={name} kind="expense" />}
|
||
initial="Р"
|
||
key={name}
|
||
metadata={`12.09.2026 · ${name}`}
|
||
title="Расход"
|
||
tone="negative"
|
||
value="−1 250,00 ₽"
|
||
valueLabel="Расход"
|
||
/>
|
||
))}
|
||
|
||
<EntryCard
|
||
color="green"
|
||
icon={<BankOperationIcon kind="topup" />}
|
||
initial="П"
|
||
metadata="12.09.2026"
|
||
title="Пополнение"
|
||
tone="positive"
|
||
value="+15 000,00 ₽"
|
||
valueLabel="Пополнение"
|
||
/>
|
||
</Stack>
|
||
),
|
||
};
|