gov-ui-kit/src/modules/components/proposal/proposalActionSimulationStructure/proposalActionSimulationStructure.stories.tsx at 31308a5311e1c4fec9f96696134dc75fa9321405 · aragon/gov-ui-kit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import type { Meta, StoryObj } from '@storybook/react-vite';
import { DateTime } from 'luxon';
import { ProposalActionSimulationStructure } from './proposalActionSimulationStructure';

const meta: Meta<typeof ProposalActionSimulationStructure> = {
    title: 'Modules/Components/Proposal/ProposalActionSimulation/ProposalActionSimulationStructure',
    component: ProposalActionSimulationStructure,
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/design/ISSDryshtEpB7SUSdNqAcw/Governance-UI-Kit?node-id=30069-34747&t=tQiF5klPD9cjUit6-4',
        },
    },
    args: {
        className: 'flex-1',
    },
};

type Story = StoryObj<typeof ProposalActionSimulationStructure>;

/**
 * Completed simulation with positive outcome
 */
export const Success: Story = {
    args: {
        totalActions: 3,
        lastSimulation: DateTime.now().minus({ seconds: 10 }),
        status: 'success',
        tenderlyUrl: 'https://dashboard.tenderly.co/simulation/12345',
    },
};

/**
 * Completed simulation with negative outcome (can't be executed)
 */
export const Failure: Story = {
    args: {
        totalActions: 2,
        lastSimulation: DateTime.now().minus({ seconds: 10 }),
        status: 'failure',
        tenderlyUrl: 'https://dashboard.tenderly.co/simulation/12345',
    },
};

/**
 * Loading state while simulation is running
 */
export const Loading: Story = {
    args: {
        totalActions: 5,
        status: 'unknown',
        isSimulating: true,
    },
};

/**
 * No simulation has been run yet
 */
export const NoPreviousSimulation: Story = {
    args: {
        totalActions: 1,
        status: 'unknown',
    },
};

/**
 * With error message displayed
 */
export const WithErrorMessage: Story = {
    args: {
        totalActions: 2,
        lastSimulation: DateTime.now().minus({ weeks: 2 }),
        status: 'success',
        error: 'Simulation failed to run. Please try again.',
    },
};

/**
 * Recent simulation (shows "Now")
 */
export const RecentSimulation: Story = {
    args: {
        totalActions: 7,
        lastSimulation: DateTime.now().minus({ minutes: 5 }),
        status: 'success',
    },
};

/**
 * Old simulation (shows formatted date)
 */
export const OldSimulation: Story = {
    args: {
        totalActions: 2,
        lastSimulation: DateTime.now().minus({ weeks: 2 }),
        status: 'success',
    },
};

/**
 * Not simulatable - only shows Tenderly link
 */
export const NotSimulatable: Story = {
    args: {
        totalActions: 3,
        lastSimulation: DateTime.now().minus({ hours: 2 }),
        status: 'success',
        isSimulatable: false,
        tenderlyUrl: 'https://dashboard.tenderly.co/simulation/12345',
    },
};

export default meta;