@soyfri/shared-library 1.5.0 → 2.0.0-beta.1

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

@@ -1,9 +1,11 @@
 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 } from '@mui/material';
+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> = {
@@ -230,9 +232,7 @@ export const Sizing: Story = {
     render: (args: any) => {
         const [openXs, setOpenXs] = useState(false);
         const [openLg, setOpenLg] = useState(false);
-        const { ref, SnackbarComponent } = useClipboard();
-
-
+        const { ref, CopyMessage } = useClipboard();
 
         return (
             <Box sx={{ display: 'flex', gap: 2 }}>
@@ -246,7 +246,7 @@ export const Sizing: Story = {
                 <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>
-                        <SnackbarComponent />
+                        <CopyMessage />
                     </Modal.Body>
                 </Modal>
             </Box>
@@ -290,4 +290,432 @@ export const LongContent: Story = {
             },
         },
     },
-};
+};
+// =============================================================================
+// 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'),
+            },
+        },
+    },
+};