85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||
import type { ComponentProps } from "react";
|
||
|
||
import { Button } from "@mantine/core";
|
||
import { fn } from "storybook/test";
|
||
|
||
import { StateView } from "./StateView";
|
||
|
||
type StateStoryArguments = ComponentProps<typeof StateView> & {
|
||
onAction: () => void;
|
||
withAction: boolean;
|
||
};
|
||
|
||
const meta = {
|
||
args: {
|
||
error: false,
|
||
onAction: fn(),
|
||
text: "Синтетическое пустое состояние. Пользовательские данные не загружаются.",
|
||
title: "Нет учебных данных",
|
||
withAction: false,
|
||
},
|
||
argTypes: {
|
||
action: { table: { disable: true } },
|
||
error: { control: "boolean" },
|
||
onAction: { control: false },
|
||
text: { control: "text" },
|
||
title: { control: "text" },
|
||
withAction: {
|
||
control: "boolean",
|
||
description: "Показать необязательное действие StateView",
|
||
},
|
||
},
|
||
component: StateView,
|
||
parameters: {
|
||
docs: {
|
||
description: {
|
||
component:
|
||
"Общее empty/error состояние WealthLedger с необязательным действием. Error сохраняет alert semantics. Для initial loading используйте skeleton страницы, для refetch — локальное предупреждение рядом с сохранёнными данными. Кнопка вызывает только Actions; API recovery и полный пользовательский сценарий здесь не проверяются.",
|
||
},
|
||
},
|
||
},
|
||
render: (arguments_) => {
|
||
const { onAction, withAction, ...stateProps } = arguments_;
|
||
|
||
return (
|
||
<StateView
|
||
{...stateProps}
|
||
action={
|
||
withAction
|
||
? (
|
||
<Button onClick={onAction} variant="default">
|
||
{arguments_.error ? "Повторить локально" : "Выполнить пример"}
|
||
</Button>
|
||
)
|
||
: undefined
|
||
}
|
||
/>
|
||
);
|
||
},
|
||
tags: ["autodocs"],
|
||
title: "Design System/Components/StateView",
|
||
} satisfies Meta<StateStoryArguments>;
|
||
|
||
export default meta;
|
||
|
||
type Story = StoryObj<typeof meta>;
|
||
|
||
export const Empty: Story = { name: "Пустое состояние" };
|
||
export const EmptyWithAction: Story = {
|
||
args: { withAction: true },
|
||
name: "Пустое состояние с действием",
|
||
};
|
||
export const Failed: Story = {
|
||
args: {
|
||
error: true,
|
||
text: "Демонстрация недоступных данных без вызова API.",
|
||
title: "Учебная ошибка",
|
||
},
|
||
name: "Ошибка",
|
||
};
|
||
export const ErrorWithAction: Story = {
|
||
args: { ...Failed.args, withAction: true },
|
||
name: "Ошибка с retry",
|
||
};
|