nandi.uk
This repository has no description
chore: report card modal stories
author
pdelfan
date
(May 11, 2026, 4:05 PM -0700)
commit
ebc34d9c
ebc34d9cc7f06341f9213608e6a577f1c13cda1a
parent
34afadd6
34afadd6a25f564dac8176092866a405fda346ad
+118
+118
src/webapp/features/cards/components/reportCardModal/ReportCardModal.stories.tsx
+118
src/webapp/features/cards/components/reportCardModal/ReportCardModal.stories.tsx
···
1
+
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
2
+
import { useState } from 'react';
3
+
import { Box, Button } from '@mantine/core';
4
+
import ReportCardModal, { ReportSubmission } from './ReportCardModal';
5
+
6
+
const mockResolve = async (input: ReportSubmission) => {
7
+
// eslint-disable-next-line no-console
8
+
console.log('[mock] report submitted', input);
9
+
await new Promise((r) => setTimeout(r, 800));
10
+
};
11
+
12
+
const mockReject = async () => {
13
+
await new Promise((r) => setTimeout(r, 600));
14
+
throw new Error('Network error — please try again.');
15
+
};
16
+
17
+
const mockNeverResolve = (): Promise<void> => new Promise(() => {});
18
+
19
+
const meta: Meta<typeof ReportCardModal> = {
20
+
title: 'Features/Cards/ReportCardModal',
21
+
component: ReportCardModal,
22
+
parameters: {
23
+
layout: 'fullscreen',
24
+
},
25
+
args: {
26
+
isOpen: true,
27
+
cardId: 'card-mock-001',
28
+
onClose: () => {
29
+
// eslint-disable-next-line no-console
30
+
console.log('[mock] modal closed');
31
+
},
32
+
onSubmit: mockResolve,
33
+
},
34
+
decorators: [
35
+
(Story) => (
36
+
<Box mih="100vh" p="md">
37
+
<Story />
38
+
</Box>
39
+
),
40
+
],
41
+
};
42
+
43
+
export default meta;
44
+
45
+
type Story = StoryObj<typeof ReportCardModal>;
46
+
47
+
export const Default: Story = {
48
+
name: 'Form (default)',
49
+
};
50
+
51
+
export const Submitting: Story = {
52
+
name: 'Submitting',
53
+
args: {
54
+
onSubmit: mockNeverResolve,
55
+
initialState: { kind: 'submitting' },
56
+
},
57
+
};
58
+
59
+
export const Success: Story = {
60
+
name: 'Success',
61
+
args: {
62
+
initialState: { kind: 'success' },
63
+
},
64
+
};
65
+
66
+
export const ErrorState: Story = {
67
+
name: 'Error',
68
+
args: {
69
+
initialState: {
70
+
kind: 'error',
71
+
message: 'Network error — please try again.',
72
+
},
73
+
},
74
+
};
75
+
76
+
export const AlreadyReported: Story = {
77
+
name: 'Already reported',
78
+
args: {
79
+
initialState: { kind: 'already-reported' },
80
+
},
81
+
};
82
+
83
+
export const SubmitFails: Story = {
84
+
name: 'Interactive: submission fails',
85
+
args: {
86
+
onSubmit: mockReject,
87
+
},
88
+
parameters: {
89
+
docs: {
90
+
description: {
91
+
story:
92
+
'Pick a reason and click Submit — the mock rejects so you can see the error state transition.',
93
+
},
94
+
},
95
+
},
96
+
};
97
+
98
+
const TriggerExample = () => {
99
+
const [open, setOpen] = useState(false);
100
+
return (
101
+
<>
102
+
<Button color="red" variant="light" onClick={() => setOpen(true)}>
103
+
Report card
104
+
</Button>
105
+
<ReportCardModal
106
+
isOpen={open}
107
+
onClose={() => setOpen(false)}
108
+
cardId="card-mock-001"
109
+
onSubmit={mockResolve}
110
+
/>
111
+
</>
112
+
);
113
+
};
114
+
115
+
export const FromTrigger: Story = {
116
+
name: 'Opened from a trigger button',
117
+
render: () => <TriggerExample />,
118
+
};