@soyfri/shared-library 2.0.0-beta.20 → 2.0.0-beta.22

package/src/components/Modal/Modal.stories.tsx

@@ -1,721 +0,0 @@
-import React, { useState, useRef } from 'react'; // 👈 Importa useRef
-import type { Meta, StoryObj } from '@storybook/react';
-import { useForm } from 'react-hook-form';
-
-import { Button, Typography, Box, Stack } from '@mui/material';
-import { fn } from '@storybook/test';
-import Modal, { ModalRef } from './Modal';
-import { Input } from '../Input/Input';
-import { useClipboard } from '../../hooks/ClipBoard';
-
-const meta: Meta<typeof Modal> = {
-    title: 'Components/Modal',
-    component: Modal,
-    tags: ['autodocs'],
-    argTypes: {
-        open: {
-            control: 'boolean',
-            description: 'Controla si el modal está abierto o cerrado (uso controlado). Opcional si se usa el control imperativo con `ref`.',
-        },
-        onClose: {
-            action: 'onClose clickeado',
-            description: 'Función a ejecutar cuando el modal solicita cerrarse (ej. clic fuera o botón de cerrar). Opcional si se usa el control imperativo con `ref`.',
-        },
-        title: {
-            control: 'text',
-            description: 'Título opcional para el encabezado del modal. Se usará si no se proporciona `Modal.Header` explícitamente.',
-        },
-        children: {
-            control: 'object',
-            description: 'Contenido del modal, típicamente `Modal.Header`, `Modal.Body` y `Modal.Footer`.',
-        },
-        showCloseButton: {
-            control: 'boolean',
-            description: 'Controla la visibilidad del botón "Cerrar" por defecto en el `Modal.Footer`.',
-        },
-        closeButtonText: {
-            control: 'text',
-            description: 'Texto personalizado para el botón "Cerrar".',
-        },
-        closeButtonDisabled: {
-            control: 'boolean',
-            description: 'Deshabilita el botón "Cerrar".',
-        },
-        actions: {
-            control: 'object',
-            description: 'Un arreglo de objetos `ModalAction` para botones de acción personalizados en el `Modal.Footer`.',
-        },
-        maxWidth: {
-            control: 'select',
-            options: ['xs', 'sm', 'md', 'lg', 'xl', false],
-            description: 'Tamaño máximo del modal (propiedad de Material-UI `Dialog`).',
-        },
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: 'Un componente de modal reutilizable de Material-UI con una estructura de componente compuesto (`Modal.Header`, `Modal.Body`, `Modal.Footer`). Puede ser controlado por una prop `open` o de forma imperativa a través de `ref` (`open()` y `close()` métodos). Permite definir acciones personalizadas y controlar la visibilidad y el estado de los botones por defecto.',
-            },
-        },
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof Modal>;
-
-// --- Historias ---
-
-// Historia base: Modal simple con título y contenido básico (uso controlado por estado)
-export const Default: Story = {
-    args: {
-        open: true,
-        onClose: fn(),
-        title: 'Modal de Ejemplo (Controlado por Estado)',
-        children: (
-            <Modal.Body>
-                <Typography>Este es el contenido principal del modal.</Typography>
-                <Typography sx={{ mt: 2 }}>Puedes colocar cualquier elemento React aquí.</Typography>
-            </Modal.Body>
-        ),
-        showCloseButton: true,
-        closeButtonText: 'Cerrar',
-        actions: [
-            { text: 'Guardar', onClick: fn(() => console.log("some some")), variant: 'contained' },
-            { text: 'Aceptar', onClick: fn(), color: 'success' },
-        ],
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Muestra un modal básico con un título y botones de acción, controlado por una prop `open` en el componente padre.',
-            },
-        },
-    },
-};
-
-// Nueva Historia: Modal controlado de forma Imperativa (sin estado `open` en el padre)
-export const ImperativeControl: Story = {
-    render: (args) => {
-        const modalRef = useRef<ModalRef>(null);
-
-        const handleOpen = () => {
-            modalRef.current?.open();
-        };
-
-        const handleConfirm = () => {
-            alert('Acción confirmada desde el modal imperativo!');
-            modalRef.current?.close();
-        };
-
-        return (
-            <Box>
-                <Button onClick={handleOpen} variant="contained">
-                    Abrir Modal Imperativo
-                </Button>
-
-                <Modal
-                    ref={modalRef} // Asigna la ref al modal
-                    // No se pasa la prop `open` aquí, el modal gestiona su estado interno
-                    onClose={fn(() => console.log('Modal cerrado imperativamente'))} // El padre aún puede escuchar el cierre
-                    title="Modal Controlado Imperativamente"
-                    showCloseButton={true}
-                    closeButtonText="Cerrar"
-                    actions={[{ text: 'Aceptar', onClick: handleConfirm, variant: 'contained' }]}
-                    maxWidth="sm"
-                    {...args} // Pasa otras props del story
-                >
-                    <Modal.Body>
-                        <Typography>Este modal se abre y cierra llamando a métodos de la `ref`.</Typography>
-                        <Typography sx={{ mt: 2 }}>No hay un `useState` para `open` en este componente padre.</Typography>
-                    </Modal.Body>
-                </Modal>
-            </Box>
-        );
-    },
-    args: {
-        // Las props 'open' y 'onClose' se omiten o se gestionan internamente en el render
-        open: undefined, // Asegúrate de que `open` no se pase para activar el control interno
-        onClose: undefined, // `onClose` se gestiona en el render
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demuestra cómo controlar el modal de forma imperativa usando `useRef` y los métodos `open()` y `close()` expuestos por el modal, sin necesidad de gestionar un estado `open` en el componente padre.',
-            },
-        },
-    },
-};
-
-
-// Historia: Modal con estructura de componente compuesto completa
-export const CompleteStructure: Story = {
-    args: {
-        open: true,
-        onClose: fn(),
-        maxWidth: 'md',
-        children: (
-            <>
-                <Modal.Header>
-                    <Typography variant="h6">Detalles del Artículo</Typography>
-                </Modal.Header>
-                <Modal.Body>
-                    <Box sx={{ p: 2, border: '1px dashed grey', borderRadius: 1 }}>
-                        <Typography>Aquí va un formulario complejo o información detallada.</Typography>
-                        <Typography sx={{ mt: 1 }}>El cuerpo puede crecer y tener scroll si es necesario.</Typography>
-                        <Button onClick={fn()} sx={{ mt: 2 }}>Acción en el cuerpo</Button>
-                    </Box>
-                </Modal.Body>
-                <Modal.Footer
-                    showCloseButton={false}
-                    onClose={fn()} // Added onClose property
-                    actions={[
-                        { text: 'Cancelar', onClick: fn(), variant: 'outlined', color: 'error' },
-                        { text: 'Confirmar Envío', onClick: fn(), variant: 'contained', color: 'primary' },
-                    ]}
-                >
-                    <Typography variant="caption" sx={{ mr: 2 }}>
-                        Requiere confirmación.
-                    </Typography>
-                </Modal.Footer>
-            </>
-        ),
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demuestra el uso completo de la estructura de componente compuesto (`Modal.Header`, `Modal.Body`, `Modal.Footer`) con contenido variado y control de botones.',
-            },
-        },
-    },
-};
-
-// Historia: Modal sin botón de cerrar por defecto
-export const NoDefaultCloseButton: Story = {
-    args: {
-        ...Default.args,
-        title: 'Modal sin botón de cerrar',
-        showCloseButton: false,
-        actions: [
-            { text: 'Entendido', onClick: fn(), variant: 'contained' },
-        ],
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Un modal que no muestra el botón "Cerrar" por defecto, forzando al usuario a usar las acciones personalizadas.',
-            },
-        },
-    },
-};
-
-// Historia: Modal con botón de cerrar deshabilitado
-export const DisabledCloseButton: Story = {
-    args: {
-        ...Default.args,
-        title: 'Modal con botón de cerrar deshabilitado',
-        closeButtonDisabled: true,
-        actions: [
-            { text: 'Habilitar', onClick: fn(), variant: 'contained' },
-        ],
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Muestra un modal donde el botón "Cerrar" por defecto está deshabilitado.',
-            },
-        },
-    },
-};
-
-// Historia: Modal con diferentes tamaños (maxWidth)
-export const Sizing: Story = {
-    render: (args: any) => {
-        const [openXs, setOpenXs] = useState(false);
-        const [openLg, setOpenLg] = useState(false);
-        const { ref, CopyMessage } = useClipboard();
-
-        return (
-            <Box sx={{ display: 'flex', gap: 2 }}>
-                <Button onClick={() => setOpenXs(true)} variant="outlined">Abrir XS</Button>
-                <Button onClick={() => setOpenLg(true)} variant="outlined">Abrir LG</Button>
-
-                <Modal {...args} open={openXs} onClose={() => setOpenXs(false)} title="Modal XS" maxWidth="xs">
-                    <Modal.Body><Typography>Este es un modal de tamaño extra pequeño.</Typography></Modal.Body>
-                </Modal>
-
-                <Modal {...args} open={openLg} onClose={() => setOpenLg(false)} title="Modal LG" maxWidth="lg">
-                    <Modal.Body>
-                        <Typography ref={ref}>Este es un modal de tamaño grande.</Typography>
-                        <CopyMessage />
-                    </Modal.Body>
-                </Modal>
-            </Box>
-        );
-    },
-    args: {
-        open: false,
-        onClose: fn(),
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demuestra cómo el modal se ajusta a diferentes tamaños (`maxWidth`) definidos por las propiedades de Material-UI.',
-            },
-        },
-    },
-};
-
-// Historia: Modal con texto largo en el cuerpo (para probar el scroll)
-export const LongContent: Story = {
-    args: {
-        open: true,
-        onClose: fn(),
-        title: 'Modal con Contenido Largo',
-        maxWidth: 'sm',
-        children: (
-            <Modal.Body>
-                {Array.from({ length: 30 }, (_, i) => (
-                    <Typography key={i} sx={{ mb: 1 }}>
-                        Este es un párrafo de contenido largo para probar el scroll del modal. Línea {i + 1}.
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Typography>
-                ))}
-            </Modal.Body>
-        ),
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Muestra un modal con un cuerpo que contiene mucho texto, demostrando la funcionalidad de scroll automático.',
-            },
-        },
-    },
-};
-// =============================================================================
-// RHF DENTRO DEL MODAL — Botones a nivel de BODY (forma recomendada)
-// =============================================================================
-// PROBLEMA: Si los botones viven en `Modal.Footer` (hermano de `Modal.Body`),
-// el `<form>` no puede envolver a ambos porque son hermanos en el árbol.
-// Entonces "Guardar" NO dispara submit ni validaciones.
-//
-// SOLUCIÓN: Meter el `<form>` + inputs + botones dentro del mismo `Modal.Body`.
-// Usar `hiddenFooter` para ocultar el footer por defecto.
-// =============================================================================
-
-type UserFormValues = {
-    name: string;
-    email: string;
-};
-
-export const RHFInsideBody: Story = {
-    render: () => {
-        const [open, setOpen] = useState(false);
-        const [submitted, setSubmitted] = useState<UserFormValues | null>(null);
-
-        const {
-            control,
-            handleSubmit,
-            reset,
-            formState: { isSubmitting },
-        } = useForm<UserFormValues>({
-            defaultValues: { name: '', email: '' },
-        });
-
-        const onSubmit = async (data: UserFormValues) => {
-            await new Promise((r) => setTimeout(r, 500));
-            setSubmitted(data);
-            setOpen(false);
-            reset();
-        };
-
-        const handleClose = () => {
-            setOpen(false);
-            reset();
-        };
-
-        return (
-            <Box>
-                <Button variant="contained" onClick={() => setOpen(true)}>
-                    Abrir form en Modal
-                </Button>
-                {submitted && (
-                    <Typography sx={{ mt: 2 }} color="success.main">
-                        Enviado: {JSON.stringify(submitted)}
-                    </Typography>
-                )}
-
-                <Modal
-                    open={open}
-                    onClose={handleClose}
-                    title="Crear usuario"
-                    maxWidth="sm"
-                    hiddenFooter // 👈 ocultamos el footer por defecto
-                >
-                    <Modal.Body>
-                        {/* El form envuelve TODO: inputs + botones.
-                            Los botones están dentro del body, NO en un footer. */}
-                        <Box
-                            component="form"
-                            onSubmit={handleSubmit(onSubmit)}
-                            noValidate
-                            paddingTop={2}
-                        >
-                            <Stack spacing={3}>
-                                <Input
-                                    name="name"
-                                    control={control}
-                                    label="Nombre"
-                                    validation={{
-                                        required: 'El nombre es requerido',
-                                        minLength: { value: 2, message: 'Mínimo 2 caracteres' },
-                                    }}
-                                />
-                                <Input
-                                    name="email"
-                                    control={control}
-                                    label="Email"
-                                    type="email"
-                                    validation={{
-                                        required: 'El email es requerido',
-                                        pattern: {
-                                            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-                                            message: 'Email inválido',
-                                        },
-                                    }}
-                                />
-
-                                {/* Botones DENTRO del form, a nivel del body. */}
-                                <Stack
-                                    direction="row"
-                                    spacing={1}
-                                    justifyContent="flex-end"
-                                    sx={{ pt: 1 }}
-                                >
-                                    <Button
-                                        type="button"
-                                        variant="text"
-                                        onClick={handleClose}
-                                        disabled={isSubmitting}
-                                    >
-                                        Cancelar
-                                    </Button>
-                                    <Button
-                                        type="submit"
-                                        variant="contained"
-                                        disabled={isSubmitting}
-                                    >
-                                        {isSubmitting ? 'Guardando...' : 'Guardar'}
-                                    </Button>
-                                </Stack>
-                            </Stack>
-                        </Box>
-                    </Modal.Body>
-                </Modal>
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: [
-                    '**Modal + React Hook Form con botones a nivel del Body (recomendado).**',
-                    '',
-                    'Cuando usás RHF dentro de un modal, los botones de submit/cancel deben',
-                    'vivir dentro del mismo `<form>` que los inputs. Si ponés los botones',
-                    'en `Modal.Footer`, quedan en un subárbol hermano al Body y el submit',
-                    'no dispara porque el `<form>` no los envuelve.',
-                    '',
-                    'La solución es:',
-                    '1. Usar `hiddenFooter` en el Modal para ocultar el footer por defecto.',
-                    '2. Meter el `<form>`, los inputs y los botones todos dentro de `Modal.Body`.',
-                    '3. El botón de submit usa `type="submit"`, que dispara el `onSubmit` del form.',
-                ].join('\n'),
-            },
-        },
-    },
-};
-
-// =============================================================================
-// RHF con botones en FOOTER usando formId (alternativa avanzada)
-// =============================================================================
-// Si querés mantener el layout clásico (botones en footer, form en body), la
-// forma correcta es conectar el botón al form por su atributo `form=""`.
-// Esto sí funciona con HTML5 nativo: un `<button form="myFormId">` fuera del
-// `<form>` sigue disparando el submit.
-// =============================================================================
-
-// =============================================================================
-// MODO CONFIRM — reemplazo del ConfirmModal legacy
-// =============================================================================
-
-export const ConfirmInfo: Story = {
-    render: () => {
-        const [open, setOpen] = useState(false);
-        return (
-            <Box>
-                <Button variant="contained" onClick={() => setOpen(true)}>
-                    Abrir confirm (info)
-                </Button>
-                <Modal
-                    mode="confirm"
-                    open={open}
-                    onClose={() => setOpen(false)}
-                    title="¿Deseas continuar?"
-                    confirmMessage="Esta acción guardará los cambios realizados en el formulario."
-                    confirmText="Sí, continuar"
-                    closeButtonText="Cancelar"
-                    onConfirm={() => console.log('confirmed')}
-                />
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Confirm de severidad `info` (default). Layout centrado con icono circular, título, mensaje y botones Cancelar / Confirmar.',
-            },
-        },
-    },
-};
-
-export const ConfirmDelete: Story = {
-    render: () => {
-        const [open, setOpen] = useState(false);
-        return (
-            <Box>
-                <Button variant="outlined" color="error" onClick={() => setOpen(true)}>
-                    Eliminar afiliación
-                </Button>
-                <Modal
-                    mode="confirm"
-                    severity="error"
-                    open={open}
-                    onClose={() => setOpen(false)}
-                    title="Eliminar afiliación"
-                    confirmMessage="Esta acción no se puede deshacer. ¿Confirmas que deseas eliminar la afiliación #12458?"
-                    confirmText="Sí, eliminar"
-                    closeButtonText="Cancelar"
-                    onConfirm={() => console.log('deleted')}
-                />
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Confirm de severidad `error` — icono rojo y botón primario rojo. Patrón típico para operaciones destructivas.',
-            },
-        },
-    },
-};
-
-export const ConfirmWarning: Story = {
-    render: () => {
-        const [open, setOpen] = useState(false);
-        return (
-            <Box>
-                <Button variant="contained" color="warning" onClick={() => setOpen(true)}>
-                    Salir sin guardar
-                </Button>
-                <Modal
-                    mode="confirm"
-                    severity="warning"
-                    open={open}
-                    onClose={() => setOpen(false)}
-                    title="Tienes cambios sin guardar"
-                    confirmMessage="Si sales ahora perderás los cambios realizados. ¿Deseas salir igualmente?"
-                    confirmText="Salir sin guardar"
-                    closeButtonText="Seguir editando"
-                    onConfirm={() => console.log('discarded')}
-                />
-            </Box>
-        );
-    },
-};
-
-export const ConfirmSuccess: Story = {
-    render: () => {
-        const [open, setOpen] = useState(false);
-        return (
-            <Box>
-                <Button variant="contained" color="success" onClick={() => setOpen(true)}>
-                    Aprobar solicitud
-                </Button>
-                <Modal
-                    mode="confirm"
-                    severity="success"
-                    open={open}
-                    onClose={() => setOpen(false)}
-                    title="Aprobar solicitud"
-                    confirmMessage="Al aprobar, el cliente recibirá una notificación y se activará su afiliación."
-                    confirmText="Aprobar"
-                    closeButtonText="Cancelar"
-                    onConfirm={() => console.log('approved')}
-                />
-            </Box>
-        );
-    },
-};
-
-export const ConfirmAsync: Story = {
-    render: () => {
-        const [open, setOpen] = useState(false);
-        const [result, setResult] = useState<string | null>(null);
-
-        const simulateRequest = () =>
-            new Promise<void>((resolve) => {
-                setTimeout(() => {
-                    setResult('Ejecutado después de 1.5s');
-                    resolve();
-                }, 1500);
-            });
-
-        return (
-            <Box>
-                <Button variant="contained" onClick={() => setOpen(true)}>
-                    Confirmar con request async
-                </Button>
-                {result && (
-                    <Typography sx={{ mt: 2 }} color="success.main">
-                        {result}
-                    </Typography>
-                )}
-                <Modal
-                    mode="confirm"
-                    open={open}
-                    onClose={() => setOpen(false)}
-                    title="Procesar afiliación"
-                    confirmMessage="Esto enviará la solicitud al backend y puede tardar unos segundos."
-                    confirmText="Procesar"
-                    onConfirm={simulateRequest}
-                />
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'El `onConfirm` puede devolver una `Promise`. Mientras resuelve, los botones quedan deshabilitados para evitar clicks dobles. Al resolver, el modal cierra automáticamente.',
-            },
-        },
-    },
-};
-
-export const RHFWithFooterFormId: Story = {
-    render: () => {
-        const [open, setOpen] = useState(false);
-        const [submitted, setSubmitted] = useState<UserFormValues | null>(null);
-
-        const {
-            control,
-            handleSubmit,
-            reset,
-            formState: { isSubmitting },
-        } = useForm<UserFormValues>({
-            defaultValues: { name: '', email: '' },
-        });
-
-        const FORM_ID = 'user-form-footer';
-
-        const onSubmit = async (data: UserFormValues) => {
-            await new Promise((r) => setTimeout(r, 500));
-            setSubmitted(data);
-            setOpen(false);
-            reset();
-        };
-
-        const handleClose = () => {
-            setOpen(false);
-            reset();
-        };
-
-        return (
-            <Box>
-                <Button variant="contained" onClick={() => setOpen(true)}>
-                    Abrir form (footer con formId)
-                </Button>
-                {submitted && (
-                    <Typography sx={{ mt: 2 }} color="success.main">
-                        Enviado: {JSON.stringify(submitted)}
-                    </Typography>
-                )}
-
-                <Modal
-                    open={open}
-                    onClose={handleClose}
-                    title="Crear usuario (footer)"
-                    maxWidth="sm"
-                    actions={[
-                        {
-                            text: isSubmitting ? 'Guardando...' : 'Guardar',
-                            // 👇 clave: el botón referencia al form por id.
-                            buttonProps: {
-                                type: 'submit',
-                                form: FORM_ID,
-                                variant: 'contained',
-                                disabled: isSubmitting,
-                            },
-                        },
-                    ]}
-                    closeButtonText="Cancelar"
-                >
-                    <Modal.Body>
-                        <Box
-                            component="form"
-                            id={FORM_ID}
-                            onSubmit={handleSubmit(onSubmit)}
-                            noValidate
-                            paddingTop={2}
-                        >
-                            <Stack spacing={3}>
-                                <Input
-                                    name="name"
-                                    control={control}
-                                    label="Nombre"
-                                    validation={{
-                                        required: 'El nombre es requerido',
-                                    }}
-                                />
-                                <Input
-                                    name="email"
-                                    control={control}
-                                    label="Email"
-                                    type="email"
-                                    validation={{
-                                        required: 'El email es requerido',
-                                        pattern: {
-                                            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-                                            message: 'Email inválido',
-                                        },
-                                    }}
-                                />
-                            </Stack>
-                        </Box>
-                    </Modal.Body>
-                </Modal>
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: [
-                    '**Alternativa avanzada: botones en el footer usando `form="formId"`.**',
-                    '',
-                    'Si necesitás mantener el layout clásico (Header / Body / Footer) con los',
-                    'botones en el footer, la forma correcta es asignarle un `id` al `<form>`',
-                    'y al botón de submit le pasás `form="mismoId"`. HTML5 nativo conecta',
-                    'el botón con el form aunque no sean hermanos en el DOM.',
-                    '',
-                    '```tsx',
-                    '<form id="user-form" onSubmit={handleSubmit(onSubmit)}>...</form>',
-                    '<button type="submit" form="user-form">Guardar</button>',
-                    '```',
-                    '',
-                    'Es la alternativa cuando querés reutilizar `Modal.Footer` con sus `actions`',
-                    'en lugar de construir los botones a mano dentro del body.',
-                ].join('\n'),
-            },
-        },
-    },
-};