@soyfri/shared-library 1.5.0-beta.3 → 1.5.0

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

@@ -0,0 +1,293 @@
+import React, { useState, useRef } from 'react'; // 👈 Importa useRef
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button, Typography, Box } from '@mui/material';
+import { fn } from '@storybook/test';
+import Modal, { ModalRef } from './Modal';
+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, SnackbarComponent } = 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>
+                        <SnackbarComponent />
+                    </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.',
+            },
+        },
+    },
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useImperativeHandle, forwardRef } from 'react'; // 👈 Importa useImperativeHandle y forwardRef
+import { Modal as MuiModal, Box, Paper, useTheme, useMediaQuery } from '@mui/material';
+
+import { DialogProps } from '@mui/material/Dialog';
+import { ModalAction, ModalFooter, ModalFooterProps } from './ModalFooter';
+import { ModalHeader } from './ModalHeader';
+import { ModalBody } from './ModalBody';
+
+// Define la interfaz para los métodos que el padre puede llamar a través de la ref
+export interface ModalRef {
+  open: () => void;
+  close: () => void;
+}
+
+interface ModalProps {
+  // La prop 'open' ahora es opcional si se usa con ref, pero aún puede ser controlada externamente
+  open?: boolean;
+  onClose?: () => void; // 'onClose' ahora es opcional ya que el modal puede cerrarse internamente
+  title?: string;
+  children: React.ReactNode;
+  showCloseButton?: boolean;
+  closeButtonText?: string;
+  closeButtonDisabled?: boolean;
+  actions?: ModalAction[];
+  maxWidth?: DialogProps['maxWidth'];
+  hiddenFooter?: boolean
+}
+
+const modalStyle = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '90%',
+  maxHeight: '90vh',
+  display: 'flex',
+  flexDirection: 'column',
+  outline: 'none',
+};
+
+// Envuelve el componente en forwardRef
+export const Modal = forwardRef<ModalRef, ModalProps>(({
+  open: controlledOpen, // Renombra la prop 'open' si se pasa externamente
+  onClose: controlledOnClose, // Renombra la prop 'onClose' si se pasa externamente
+  title,
+  children,
+  showCloseButton = true,
+  closeButtonText = "Cerrar",
+  closeButtonDisabled = false,
+  actions = [],
+  maxWidth = 'sm',
+  hiddenFooter = false,
+}, ref) => { // Recibe la ref
+  // Estado interno para gestionar la visibilidad si no es controlado externamente
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  // Determina si el modal está abierto, priorizando la prop externa
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  // Expone métodos 'open' y 'close' a través de la ref
+  useImperativeHandle(ref, () => ({
+    open: () => setInternalOpen(true),
+    close: () => {
+      setInternalOpen(false);
+      controlledOnClose?.(); // Llama al onClose externo si existe
+    },
+  }));
+
+  const handleCloseInternal = () => {
+    setInternalOpen(false);
+    controlledOnClose?.(); // Llama al onClose externo si existe
+  };
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const getWidth = () => {
+    if (isMobile) return '95%';
+    switch (maxWidth) {
+      case 'xs': return 300;
+      case 'sm': return 500;
+      case 'md': return 700;
+      case 'lg': return 900;
+      case 'xl': return 1100;
+      case false: return 'auto';
+      default: return 500;
+    }
+  };
+
+  const renderChildren = () => {
+    let header: React.ReactNode | null = null;
+    let body: React.ReactNode | null = null;
+    let footer: React.ReactNode | null = null;
+
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        if (child.type === ModalHeader) {
+          header = child;
+        } else if (child.type === ModalBody) {
+          body = child;
+        } else if (child.type === ModalFooter) {
+          const footerChild = child as React.ReactElement<ModalFooterProps>;
+          const {
+            showCloseButton: childShowCloseButton,
+            closeButtonText: childCloseButtonText,
+            closeButtonDisabled: childCloseButtonDisabled,
+            onClose: childOnClose,
+            actions: childActions,
+            ...restOfFooterProps
+          } = footerChild.props;
+
+          footer = React.cloneElement(footerChild, {
+            showCloseButton,
+            closeButtonText,
+            closeButtonDisabled,
+            onClose: handleCloseInternal, // Usa la función de cierre interna
+            actions,
+            ...restOfFooterProps,
+          });
+        }
+      }
+    });
+
+    if (!footer && !hiddenFooter) {
+      footer = (
+        <ModalFooter
+          showCloseButton={showCloseButton}
+          closeButtonText={closeButtonText}
+          closeButtonDisabled={closeButtonDisabled}
+          onClose={handleCloseInternal} // Usa la función de cierre interna
+          actions={actions}
+        />
+      );
+    }
+
+    return (
+      <>
+        {header || (title && <ModalHeader>{title}</ModalHeader>)}
+        {body}
+        {footer}
+      </>
+    );
+  };
+
+  return (
+    <MuiModal
+      open={isOpen} // Usa el estado de visibilidad determinado
+      onClose={handleCloseInternal} // Usa la función de cierre interna
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+      closeAfterTransition
+    >
+      <Paper sx={{ ...modalStyle, width: getWidth() }}>
+        {renderChildren()}
+      </Paper>
+    </MuiModal>
+  );
+});
+
+// Define los sub-componentes como propiedades estáticas con tipos explícitos
+type ModalComponent = React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>> & {
+  Header: typeof ModalHeader;
+  Body: typeof ModalBody;
+  Footer: typeof ModalFooter;
+};
+
+const ModalWithStatics = Modal as ModalComponent;
+
+ModalWithStatics.Header = ModalHeader;
+ModalWithStatics.Body = ModalBody;
+ModalWithStatics.Footer = ModalFooter;
+
+export default ModalWithStatics;

package/src/components/Modal/ModalBody.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '@mui/material';
+
+interface ModalBodyProps { // Renombrado
+  children: React.ReactNode;
+}
+
+export const ModalBody: React.FC<ModalBodyProps> = ({ children }) => { // Renombrado
+  return (
+    <Box sx={{ padding: 2, overflowY: 'auto', flexGrow: 1 }}>
+      {children}
+    </Box>
+  );
+};
+
+export default ModalBody;

package/src/components/Modal/ModalFooter.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Box, Button, Stack } from '@mui/material';
+import { ButtonProps } from '@mui/material/Button';
+
+// Interfaz para acciones personalizadas (se mantiene aquí)
+export interface ModalAction {
+  text: string;
+  onClick: () => void;
+  disabled?: boolean;
+  variant?: ButtonProps['variant'];
+  color?: ButtonProps['color'];
+}
+
+export interface ModalFooterProps { // Renombrado
+  children?: React.ReactNode;
+  showCloseButton?: boolean;
+  closeButtonText?: string;
+  closeButtonDisabled?: boolean;
+  onClose: () => void;
+  actions?: ModalAction[];
+}
+
+export const ModalFooter: React.FC<ModalFooterProps> = ({ // Renombrado
+  children,
+  showCloseButton = true,
+  closeButtonText = "Cerrar",
+  closeButtonDisabled = false,
+  onClose,
+  actions = [],
+}) => {
+  return (
+    <Box sx={{ padding: 2, borderTop: '1px solid #e0e0e0', display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+      {children}
+      <Stack direction="row" spacing={1}>
+        {showCloseButton && (
+          <Button
+            onClick={onClose}
+            disabled={closeButtonDisabled}
+            variant="outlined"
+            color="secondary"
+          >
+            {closeButtonText}
+          </Button>
+        )}
+        {actions.map((action, index) => (
+          <Button
+            key={index}
+            onClick={action.onClick}
+            disabled={action.disabled}
+            variant={action.variant || 'contained'}
+            color={action.color || 'primary'}
+          >
+            {action.text}
+          </Button>
+        ))}
+      </Stack>
+    </Box>
+  );
+};
+
+export default ModalFooter;

package/src/components/Modal/ModalHeader.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+interface ModalHeaderProps { // Renombrado
+  children: React.ReactNode;
+}
+
+export const ModalHeader: React.FC<ModalHeaderProps> = ({ children }) => { // Renombrado
+  return (
+    <Box sx={{ padding: 2, borderBottom: '1px solid #e0e0e0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      <Typography variant="h6" component="h2">
+        {children}
+      </Typography>
+    </Box>
+  );
+};
+
+export default ModalHeader;

package/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export {default as Modal } from './Modal';