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

package/src/components/Modal/Modal.tsx

@@ -1,7 +1,24 @@
-import React, { useState, useImperativeHandle, forwardRef } from 'react'; // 👈 Importa useImperativeHandle y forwardRef
-import { Modal as MuiModal, Box, Paper, useTheme, useMediaQuery } from '@mui/material';
+import React, {
+  useState,
+  useImperativeHandle,
+  forwardRef,
+  type ReactNode,
+} from 'react';
+import {
+  Modal as MuiModal,
+  Paper,
+  useTheme,
+  useMediaQuery,
+  Box,
+  Stack,
+  Typography,
+} from '@mui/material';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 
-import { DialogProps } from '@mui/material/Dialog';
+import type { DialogProps } from '@mui/material/Dialog';
 import { ModalAction, ModalFooter, ModalFooterProps } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
@@ -12,153 +29,318 @@ export interface ModalRef {
   close: () => void;
 }
 
+export type ModalMode = 'default' | 'confirm';
+export type ModalSeverity = 'info' | 'warning' | 'error' | 'success';
+
 interface ModalProps {
-  // La prop 'open' ahora es opcional si se usa con ref, pero aún puede ser controlada externamente
+  /**
+   * Modo del modal.
+   * - `default` (default): modal genérico con slots `Header`/`Body`/`Footer` y
+   *   `actions` custom.
+   * - `confirm`: reemplaza al `ConfirmModal` legacy. Renderiza un layout
+   *   focalizado con icono por severidad, mensaje y botones "Cancelar" /
+   *   "Confirmar".
+   */
+  mode?: ModalMode;
+
+  // ── Props comunes ────────────────────────────────────────────────────
+  /** Controlado externamente. Omitir si se usa vía ref. */
   open?: boolean;
-  onClose?: () => void; // 'onClose' ahora es opcional ya que el modal puede cerrarse internamente
+  /** Callback al cerrar. También se dispara al confirmar/cancelar. */
+  onClose?: () => void;
   title?: string;
-  children: React.ReactNode;
+  children?: ReactNode;
   showCloseButton?: boolean;
   closeButtonText?: string;
   closeButtonDisabled?: boolean;
   actions?: ModalAction[];
   maxWidth?: DialogProps['maxWidth'];
-  hiddenFooter?: boolean
+  hiddenFooter?: boolean;
+
+  // ── Props del modo confirm ───────────────────────────────────────────
+  /**
+   * Callback de confirmación. Soporta promesa — si devuelve `Promise`, el
+   * botón muestra estado `disabled` mientras resuelve.
+   */
+  onConfirm?: () => void | Promise<void>;
+  /** Texto del botón primario en modo `confirm`. Default: "Confirmar". */
+  confirmText?: string;
+  /** Deshabilita el botón de confirmar. */
+  confirmDisabled?: boolean;
+  /**
+   * Severidad visual en modo `confirm`. Controla el icono y el color del
+   * botón de confirmación.
+   * - `info` (default): primary
+   * - `warning`: warning (amarillo)
+   * - `error`: error (rojo) — típico para "Eliminar"
+   * - `success`: success (verde) — típico para "Aprobar"
+   */
+  severity?: ModalSeverity;
+  /**
+   * Mensaje del confirm. Puede ser string o cualquier ReactNode. Si se omite,
+   * se usa `children`.
+   */
+  confirmMessage?: ReactNode;
 }
 
 const modalStyle = {
-  position: 'absolute' as 'absolute',
+  position: 'absolute' as const,
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: '90%',
   maxHeight: '90vh',
   display: 'flex',
-  flexDirection: 'column',
+  flexDirection: 'column' as const,
   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 severityConfig: Record<
+  ModalSeverity,
+  { color: ModalAction['color']; icon: ReactNode; bg: string }
+> = {
+  info: {
+    color: 'primary',
+    icon: <InfoOutlinedIcon sx={{ fontSize: 48 }} />,
+    bg: 'primary.light',
+  },
+  warning: {
+    color: 'warning',
+    icon: <WarningAmberIcon sx={{ fontSize: 48 }} />,
+    bg: 'warning.light',
+  },
+  error: {
+    color: 'error',
+    icon: <ErrorOutlineIcon sx={{ fontSize: 48 }} />,
+    bg: 'error.light',
+  },
+  success: {
+    color: 'success',
+    icon: <CheckCircleOutlineIcon sx={{ fontSize: 48 }} />,
+    bg: 'success.light',
+  },
+};
+
+export const Modal = forwardRef<ModalRef, ModalProps>(
+  (
+    {
+      mode = 'default',
+      open: controlledOpen,
+      onClose: controlledOnClose,
+      title,
+      children,
+      showCloseButton = true,
+      closeButtonText = 'Cerrar',
+      closeButtonDisabled = false,
+      actions = [],
+      maxWidth = 'sm',
+      hiddenFooter = false,
+
+      // Props del modo confirm
+      onConfirm,
+      confirmText = 'Confirmar',
+      confirmDisabled = false,
+      severity = 'info',
+      confirmMessage,
     },
-  }));
-
-  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,
-          });
+    ref,
+  ) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+    useImperativeHandle(ref, () => ({
+      open: () => setInternalOpen(true),
+      close: () => {
+        setInternalOpen(false);
+        controlledOnClose?.();
+      },
+    }));
+
+    const handleCloseInternal = () => {
+      setInternalOpen(false);
+      controlledOnClose?.();
+    };
+
+    const handleConfirm = async () => {
+      if (!onConfirm) {
+        handleCloseInternal();
+        return;
+      }
+      try {
+        const result = onConfirm();
+        if (result instanceof Promise) {
+          setConfirmLoading(true);
+          await result;
         }
+      } finally {
+        setConfirmLoading(false);
+        handleCloseInternal();
       }
-    });
-
-    if (!footer && !hiddenFooter) {
-      footer = (
-        <ModalFooter
-          showCloseButton={showCloseButton}
-          closeButtonText={closeButtonText}
-          closeButtonDisabled={closeButtonDisabled}
-          onClose={handleCloseInternal} // Usa la función de cierre interna
-          actions={actions}
-        />
+    };
+
+    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;
+      }
+    };
+
+    // ── Render modo CONFIRM ─────────────────────────────────────────────
+    if (mode === 'confirm') {
+      const config = severityConfig[severity];
+      const message = confirmMessage ?? children;
+
+      return (
+        <MuiModal
+          open={isOpen}
+          onClose={handleCloseInternal}
+          aria-labelledby="modal-title"
+          closeAfterTransition
+        >
+          <Paper sx={{ ...modalStyle, width: getWidth() }}>
+            <Stack spacing={2.5} sx={{ p: 3, alignItems: 'center', textAlign: 'center' }}>
+              <Box
+                sx={{
+                  width: 72,
+                  height: 72,
+                  borderRadius: '50%',
+                  backgroundColor: (t) =>
+                    t.palette[severity === 'info' ? 'primary' : severity].light,
+                  color: (t) =>
+                    t.palette[severity === 'info' ? 'primary' : severity].dark,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  opacity: 0.9,
+                }}
+              >
+                {config.icon}
+              </Box>
+              {title && (
+                <Typography variant="h6" component="h2" sx={{ fontWeight: 700 }}>
+                  {title}
+                </Typography>
+              )}
+              {message && (
+                <Typography variant="body2" color="text.secondary">
+                  {message}
+                </Typography>
+              )}
+            </Stack>
+            <ModalFooter
+              showCloseButton={showCloseButton}
+              closeButtonText={closeButtonText}
+              closeButtonDisabled={closeButtonDisabled || confirmLoading}
+              onClose={handleCloseInternal}
+              actions={[
+                {
+                  text: confirmText,
+                  onClick: handleConfirm,
+                  disabled: confirmDisabled || confirmLoading,
+                  variant: 'contained',
+                  color: config.color,
+                },
+              ]}
+            />
+          </Paper>
+        </MuiModal>
       );
     }
 
+    // ── Render modo DEFAULT (legacy) ────────────────────────────────────
+    const renderChildren = () => {
+      let header: ReactNode | null = null;
+      let body: ReactNode | null = null;
+      let footer: 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,
+              actions,
+              ...restOfFooterProps,
+            });
+          }
+        }
+      });
+
+      if (!footer && !hiddenFooter) {
+        footer = (
+          <ModalFooter
+            showCloseButton={showCloseButton}
+            closeButtonText={closeButtonText}
+            closeButtonDisabled={closeButtonDisabled}
+            onClose={handleCloseInternal}
+            actions={actions}
+          />
+        );
+      }
+
+      return (
+        <>
+          {header || (title && <ModalHeader>{title}</ModalHeader>)}
+          {body}
+          {footer}
+        </>
+      );
+    };
+
     return (
-      <>
-        {header || (title && <ModalHeader>{title}</ModalHeader>)}
-        {body}
-        {footer}
-      </>
+      <MuiModal
+        open={isOpen}
+        onClose={handleCloseInternal}
+        aria-labelledby="modal-title"
+        aria-describedby="modal-description"
+        closeAfterTransition
+      >
+        <Paper sx={{ ...modalStyle, width: getWidth() }}>
+          {renderChildren()}
+        </Paper>
+      </MuiModal>
     );
-  };
-
-  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>> & {
+type ModalComponent = React.ForwardRefExoticComponent<
+  ModalProps & React.RefAttributes<ModalRef>
+> & {
   Header: typeof ModalHeader;
   Body: typeof ModalBody;
   Footer: typeof ModalFooter;
@@ -170,4 +352,4 @@ ModalWithStatics.Header = ModalHeader;
 ModalWithStatics.Body = ModalBody;
 ModalWithStatics.Footer = ModalFooter;
 
-export default ModalWithStatics;
+export default ModalWithStatics;

package/src/components/Modal/ModalFooter.tsx

@@ -5,10 +5,16 @@ import { ButtonProps } from '@mui/material/Button';
 // Interfaz para acciones personalizadas (se mantiene aquí)
 export interface ModalAction {
   text: string;
-  onClick: () => void;
+  onClick?: () => void;
   disabled?: boolean;
   variant?: ButtonProps['variant'];
   color?: ButtonProps['color'];
+  /**
+   * Props adicionales que se forwardean al `<Button>` interno. Útil para casos
+   * avanzados como conectar el botón con un `<form id="...">` externo usando
+   * `buttonProps={{ type: 'submit', form: 'my-form-id' }}`.
+   */
+  buttonProps?: Partial<ButtonProps> & { form?: string };
 }
 
 export interface ModalFooterProps { // Renombrado
@@ -42,17 +48,21 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({ // Renombrado
             {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>
-        ))}
+        {actions.map((action, index) => {
+          const { buttonProps } = action;
+          return (
+            <Button
+              key={index}
+              onClick={action.onClick}
+              disabled={action.disabled}
+              variant={action.variant || 'contained'}
+              color={action.color || 'primary'}
+              {...(buttonProps as any)}
+            >
+              {action.text}
+            </Button>
+          );
+        })}
       </Stack>
     </Box>
   );

package/src/components/Modal/index.ts

@@ -1 +1,6 @@
-export {default as Modal } from './Modal';
+export { default as Modal } from './Modal';
+export type { ModalRef, ModalMode, ModalSeverity } from './Modal';
+export { ModalHeader } from './ModalHeader';
+export { ModalBody } from './ModalBody';
+export { ModalFooter } from './ModalFooter';
+export type { ModalAction, ModalFooterProps } from './ModalFooter';