Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | import React, { useState } from 'react';
import { Story } from '@storybook/react';
import Button from '../components/Button/Button';
import OverlayModal, { Props as OverlayModalProps } from '../components/OverlayModal/OverlayModal';
export default {
title: 'Overlay Modal',
component: OverlayModal,
};
const Template: Story<OverlayModalProps> = (args) => {
return <OverlayModal {...args} open={true} />;
};
const WithButtonTemplate: Story<OverlayModalProps> = (args) => {
const [opened, setOpened] = useState(false);
return (
<main>
<button onClick={() => setOpened(true)}>Open Modal</button>
<OverlayModal {...args} open={opened} onClose={() => setOpened(false)} />
</main>
);
};
export const Basic = Template.bind({});
Basic.args = {
open: true,
children: (
<div>
<h2>Welcome to OverlayModal</h2>
<p>This is a basic overlay modal with simple content.</p>
<p>Click the X button to close, or press Escape, or click outside the modal.</p>
</div>
),
};
export const WithBelowComponent = Template.bind({});
WithBelowComponent.args = {
open: true,
children: (
<div>
<h2>Modal with Below Component</h2>
<p>This modal has content rendered below it.</p>
</div>
),
belowComponent: (
<div style={{ padding: '16px', background: 'white', borderRadius: '8px' }}>
<p>This content appears below the modal</p>
</div>
),
};
export const WithComplexContent = Template.bind({});
WithComplexContent.args = {
open: true,
children: (
<div>
<h2>Complex Content Example</h2>
<form>
<div style={{ marginBottom: '16px' }}>
<label htmlFor='name'>Name:</label>
<input id='name' type='text' style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
</div>
<div style={{ marginBottom: '16px' }}>
<label htmlFor='email'>Email:</label>
<input id='email' type='email' style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
</div>
<div style={{ marginBottom: '16px' }}>
<label htmlFor='message'>Message:</label>
<textarea id='message' rows={5} style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
</div>
</form>
</div>
),
};
export const WithScrollableContent = Template.bind({});
WithScrollableContent.args = {
open: true,
children: (
<div>
<h2>Scrollable Content</h2>
{Array.from({ length: 50 }, (_, i) => (
<p key={i}>This is paragraph {i + 1}. The content is scrollable when it exceeds the modal height.</p>
))}
</div>
),
};
export const InteractiveDemo = WithButtonTemplate.bind({});
InteractiveDemo.args = {
children: (
<div>
<h2>Interactive Modal</h2>
<p>This modal can be opened and closed interactively.</p>
<p>Try:</p>
<ul style={{ textAlign: 'left' }}>
<li>Clicking the X button</li>
<li>Pressing the Escape key</li>
<li>Clicking outside the modal</li>
</ul>
</div>
),
};
export const DisableEscapeClose = WithButtonTemplate.bind({});
DisableEscapeClose.args = {
onEscapeClose: false,
children: (
<div>
<h2>Escape Close Disabled</h2>
<p>This modal will not close when pressing the Escape key.</p>
<p>You can only close it by clicking the X or clicking outside.</p>
</div>
),
};
export const DisableClickOutClose = WithButtonTemplate.bind({});
DisableClickOutClose.args = {
onClickOutClose: false,
children: (
<div>
<h2>Click Outside Close Disabled</h2>
<p>This modal will not close when clicking outside.</p>
<p>You can only close it by clicking the X or pressing Escape.</p>
</div>
),
};
export const WithButtons = WithButtonTemplate.bind({});
WithButtons.args = {
children: (
<div>
<h2>Modal with Action Buttons</h2>
<p>This demonstrates a modal with custom action buttons.</p>
<div style={{ marginTop: '24px', display: 'flex', gap: '8px', justifyContent: 'center' }}>
<Button id='cancel' label='Cancel' onClick={() => alert('Cancel clicked')} size='medium' />
<Button id='submit' label='Submit' onClick={() => alert('Submit clicked')} size='medium' />
</div>
</div>
),
belowComponent: <Button id='help' label='Need Help?' onClick={() => alert('Help clicked')} size='small' />,
};
|