@soyfri/shared-library 2.0.0-beta.3 → 2.0.0-beta.4

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

@@ -0,0 +1,721 @@
+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'),
+            },
+        },
+    },
+};