refactor: clarify frontend module ownership

2026-09-29 07:07:36 +03:00
parent 7c28a423dd
commit f9f0f6921e
91 changed files with 1292 additions and 1050 deletions
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Stack, Text } from "@mantine/core";
+import { fn } from "storybook/test";
+
+import { InvestmentRefreshState } from "./InvestmentRefreshState.view";
+
+const meta = {
+	args: { labelScope: "portfolio", refreshError: false, refreshing: false, retry: fn() },
+	argTypes: {
+		refreshError: { control: "boolean" },
+		refreshing: { control: "boolean" },
+		retry: { control: false },
+	},
+	component: InvestmentRefreshState,
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Обновление уже показанных данных портфеля. Синтетические суммы остаются видимыми вместе с InvestmentRefreshState при refetch и его ошибке. Суммы синтетические; это presentation Client Cached Snapshot, без QueryClient и запроса API. Retry регистрирует локальное действие в Actions и не доказывает восстановление API.",
+			},
+		},
+	},
+	render: arguments_ => (
+		<Stack>
+			<Text>125 000,50 ₽ · 320 USD</Text>
+
+			<InvestmentRefreshState {...arguments_} />
+		</Stack>
+	),
+	tags: ["autodocs"],
+	title: "Product/InvestmentRefreshState",
+} satisfies Meta<typeof InvestmentRefreshState>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Idle: Story = { name: "Сохранённые данные" };
+export const Refreshing: Story = {
+	args: { refreshing: true },
+	name: "Фоновое обновление",
+};
+export const RefreshError: Story = {
+	args: { labelScope: "portfolio", refreshError: true },
+	name: "Ошибка обновления с retry",
+};
+
+export const SourceFailure: Story = {
+	args: { labelScope: "portfolio", refreshError: true, sourceError: true },
+	name: "Ошибка синхронизации сохраняет суммы",
+};
@@ -0,0 +1,67 @@
+import type { FC } from "react";
+
+import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import { formatSnapshotTime } from "@/shared/lib";
+
+type InvestmentRefreshStateProps = {
+	labelScope?: "accounts" | "portfolio";
+	lastSuccessfulAt?: null | string;
+	refreshError?: boolean;
+	refreshing?: boolean;
+	retry?: () => void;
+	sourceError?: boolean;
+};
+
+const InvestmentRefreshState: FC<InvestmentRefreshStateProps> = (props) => {
+	const { labelScope = "accounts", refreshError = false, refreshing = false, retry } = props;
+	const { t } = useTranslation();
+
+	return (
+		<>
+			{!!props.lastSuccessfulAt && (
+				<Text c="dimmed" size="xs">
+					{t("investment.sourceTime", {
+						date: formatSnapshotTime(props.lastSuccessfulAt),
+					})}
+				</Text>
+			)}
+
+			<Button
+				disabled={refreshing}
+				onClick={retry}
+				variant="light"
+				w="fit-content"
+			>
+				{t(refreshError ? "accounts.retry" : "investment.refresh")}
+			</Button>
+
+			{!!refreshing && (
+				<Group aria-label={t(`${labelScope}.refreshing`)} gap="xs" role="status">
+					<Loader size="sm" />
+
+					<Text c="dimmed" size="sm">
+						{t(`${labelScope}.refreshing`)}
+					</Text>
+				</Group>
+			)}
+
+			{!!refreshError && (
+				<Alert aria-live="polite" color="orange" role="status">
+					<Stack gap="sm">
+						<Text>
+							{t(
+								props.sourceError
+									? "investment.syncFailed"
+									: `${labelScope}.refreshError`,
+							)}
+						</Text>
+					</Stack>
+				</Alert>
+			)}
+		</>
+	);
+};
+
+export { InvestmentRefreshState, type InvestmentRefreshStateProps };