refactor: enforce frontend view model boundaries

src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.stories.tsx

@@ -1,9 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Stack } from "@mantine/core";
+import { OperationIcon } from "@wealthledger/icons";
 import { EntryCard } from "@wealthledger/ui";
 
-import { BankOperationIcon } from "./BankOperationIcon";
+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" },
@@ -11,8 +19,11 @@ const meta = {
 	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}>
@@ -55,6 +66,7 @@ export const Categories: Story = {
 					valueLabel="Расход"
 				/>
 			))}
+
 			<EntryCard
 				color="green"
 				icon={<BankOperationIcon kind="topup" />}