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
|
import type { Meta, StoryObj } from '@storybook/react';
import { useCallback, useState } from 'react';
import { Button } from '../buttons';
import { Overlay, type OverlayProps } from './overlay';
type OverlayTemplateProps = OverlayProps & {
isActive?: boolean;
};
const OverlayTemplate = ({
isActive: active = false,
...props
}: OverlayTemplateProps) => {
const [isActive, setIsActive] = useState(active);
const handleClick = useCallback(() => {
setIsActive((prev) => !prev);
}, []);
return (
<div>
<p>
Ad eos id. In nihil fugit nisi dolorem numquam fuga aut quod voluptatem.
Dicta id nisi quia laboriosam sit ipsam deserunt ex. Omnis quia error
ipsum ea numquam quia veniam omnis voluptatem. Dolor corrupti mollitia
quod fugit est animi totam sed.
</p>
<p>
Eum et laudantium eaque cumque. Voluptatem voluptas fugit incidunt quos
voluptatibus velit et voluptatem laboriosam. Et voluptas ut quia
mollitia eum voluptatem. Similique cum ratione ea illo autem facilis
laudantium.
</p>
<Button onClick={handleClick}>Open overlay</Button>
{isActive ? <Overlay {...props} onClick={handleClick} /> : null}
</div>
);
};
const meta = {
title: 'Atoms/Overlay',
component: Overlay,
render: OverlayTemplate,
} satisfies Meta<typeof Overlay>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: (
<div
style={{
background: '#FFF',
padding: '1rem',
margin: '1rem',
}}
>
The modal contents.
</div>
),
isActive: true,
},
};
|
