import { useState } from 'react'; import { Button, Stack } from '@mui/material'; import { type Meta, type StoryObj } from '@storybook/react-vite'; import { useModal } from '../../../hooks/useModal'; import Dialog from '.'; const meta: Meta = { component: Dialog, title: 'Design System/Dialog', tags: ['autodocs'], argTypes: {}, parameters: { docs: { source: { type: 'dynamic', }, }, }, }; export default meta; type Story = StoryObj; const renderStory = (customProps: any = {}, dialogProps: any = {}) => function Component() { const { modal, showModal, closeModal } = useModal( Dialog, { maxWidth: 'sm', ...dialogProps, }, { title: 'Soy un título del Dialog', textBody: 'Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.', actionInfo: 'Soy un texto de información', ...customProps, primaryButtonProps: { children: 'Confirm', onClick: () => closeModal(), ...customProps.primaryButtonProps, }, secondaryButtonProps: { children: 'Cancel', onClick: () => closeModal(), ...customProps.secondaryButtonProps, }, }, ); return ( {modal} ); }; const Body = () => ( ); export const Default: Story = { render: renderStory(), }; export const WithBody: Story = { render: renderStory({ body: , textBody: undefined }), }; export const ScrollTextBody: Story = { render: renderStory({ textBody: 'Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora, se perderán los datos que ingresaste y deberás completarlos nuevamente.Si sales del formulario ahora. ahora, se perderán los datos que ingresaste y deberás compl ahora, se perderán los datos que ingresaste y deberás compl', }), }; export const ControllingWidth: Story = { render: renderStory(undefined, { fullWidth: true, maxWidth: 'lg', }), }; export const LoadingButton: Story = { render: renderStory({ primaryButtonProps: { loading: true, }, }), }; export const NonClosableOnBackdropClick: Story = { render: () => { const [isClickedOutside, setIsClickedOutside] = useState(false); const secondaryButtonProps = isClickedOutside ? { children: 'Confirmar', onClick: () => { closeModal(); setIsClickedOutside(false); }, } : undefined; const textBody = isClickedOutside ? 'Confirme para cerrar el modal' : 'Haga clic fuera del modal para cerrarlo'; const { modal, showModal, closeModal } = useModal( Dialog, { maxWidth: 'sm', onClose: (_event, reason) => { if (reason === 'backdropClick') { setIsClickedOutside(true); return; } closeModal(); }, }, { title: 'Dialog bloquea cierre con click afuera', textBody, secondaryButtonProps, primaryButtonProps: { children: isClickedOutside ? 'Volver' : 'Cerrar', onClick: () => isClickedOutside ? setIsClickedOutside(false) : closeModal(), }, }, ); return ( {modal} ); }, }; export const WithoutTextBody: Story = { render: renderStory({ title: 'Dialog sin Body', body: undefined, textBody: undefined, actionInfo: undefined, footerProps: { hideBorder: true, }, primaryButtonProps: { children: 'Aceptar', }, secondaryButtonProps: { children: 'Cancelar', }, }), };