@soyfri/shared-library 2.0.0-beta.17 → 2.0.0-beta.18

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,407 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useId,
+  useImperativeHandle,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import {
+  Modal as MuiModal,
+  Paper,
+  useMediaQuery,
+  useTheme,
+  Box,
+  Stack,
+  Typography,
+} from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';
+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 type { DialogProps } from '@mui/material/Dialog';
+import { ModalFooter, type ModalAction, type ModalFooterProps } from './ModalFooter';
+import { ModalHeader } from './ModalHeader';
+import { ModalBody } from './ModalBody';
+import { mergeSx } from '../_shared/mergeSx';
+
+// Detección robusta de sub-componentes — funciona con wrappers / HMR que
+// rompen la igualdad de referencia (`child.type === ModalHeader`).
+const isModalSlot = (
+  child: ReactElement,
+  Component: unknown,
+  displayName: string,
+): boolean => {
+  if (child.type === Component) return true;
+  const type = child.type as { displayName?: string };
+  return type?.displayName === displayName;
+};
+
+// 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;
+}
+
+export type ModalMode = 'default' | 'confirm';
+export type ModalSeverity = 'info' | 'warning' | 'error' | 'success';
+
+export interface ModalProps {
+  /**
+   * 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;
+  /** Callback al cerrar. También se dispara al confirmar/cancelar. */
+  onClose?: () => void;
+  title?: string;
+  children?: ReactNode;
+  showCloseButton?: boolean;
+  closeButtonText?: string;
+  closeButtonDisabled?: boolean;
+  actions?: ModalAction[];
+  maxWidth?: DialogProps['maxWidth'];
+  /** Oculta el header (incluso si hay `title` o se pasa un `<Modal.Header>`). */
+  hiddenHeader?: boolean;
+  /** Oculta el body (incluso si se pasa un `<Modal.Body>`). */
+  hiddenBody?: boolean;
+  /** Oculta el footer (incluso si se pasa un `<Modal.Footer>` o `actions`). */
+  hiddenFooter?: boolean;
+  /** sx del Modal root (MuiModal). */
+  sx?: SxProps<Theme>;
+  /** sx del Paper interno (contenedor visual). Se mergea sobre el default. */
+  paperSx?: SxProps<Theme>;
+  /** className del Paper interno. */
+  className?: string;
+
+  // ── Props del modo confirm ───────────────────────────────────────────
+  /**
+   * Callback de confirmación. Soporta promesa — si devuelve `Promise`, el
+   * botón muestra estado `disabled` mientras resuelve.
+   *
+   * Si la promesa **rechaza**, el modal queda abierto para que el consumer
+   * pueda mostrar el error en su UI. El modal se cierra solo en éxito.
+   */
+  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 const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '90%',
+  maxHeight: '90vh',
+  display: 'flex',
+  flexDirection: 'column' as const,
+  outline: 'none',
+};
+
+const severityConfig: Record<
+  ModalSeverity,
+  { color: ModalAction['color']; icon: ReactNode; paletteKey: 'primary' | 'warning' | 'error' | 'success' }
+> = {
+  info: {
+    color: 'primary',
+    icon: <InfoOutlinedIcon sx={{ fontSize: 48 }} />,
+    paletteKey: 'primary',
+  },
+  warning: {
+    color: 'warning',
+    icon: <WarningAmberIcon sx={{ fontSize: 48 }} />,
+    paletteKey: 'warning',
+  },
+  error: {
+    color: 'error',
+    icon: <ErrorOutlineIcon sx={{ fontSize: 48 }} />,
+    paletteKey: 'error',
+  },
+  success: {
+    color: 'success',
+    icon: <CheckCircleOutlineIcon sx={{ fontSize: 48 }} />,
+    paletteKey: 'success',
+  },
+};
+
+export const Modal = forwardRef<ModalRef, ModalProps>(
+  (
+    {
+      mode = 'default',
+      open: controlledOpen,
+      onClose: controlledOnClose,
+      title,
+      children,
+      showCloseButton = true,
+      closeButtonText = 'Cerrar',
+      closeButtonDisabled = false,
+      actions = [],
+      maxWidth = 'sm',
+      hiddenHeader = false,
+      hiddenBody = false,
+      hiddenFooter = false,
+      sx,
+      paperSx,
+      className,
+
+      // Props del modo confirm
+      onConfirm,
+      confirmText = 'Confirmar',
+      confirmDisabled = false,
+      severity = 'info',
+      confirmMessage,
+    },
+    ref,
+  ) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    // IDs estables para a11y: `aria-labelledby` y `aria-describedby`.
+    const titleId = useId();
+    const descId = useId();
+
+    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;
+      }
+      const result = onConfirm();
+      if (!(result instanceof Promise)) {
+        handleCloseInternal();
+        return;
+      }
+      setConfirmLoading(true);
+      try {
+        await result;
+        handleCloseInternal();
+      } catch (err) {
+        // No cerrar el modal en caso de error — el consumer es responsable
+        // de mostrar un estado de error en su UI. Logueamos para trazabilidad
+        // en dev.
+        // eslint-disable-next-line no-console
+        console.error('Modal onConfirm failed:', err);
+      } finally {
+        setConfirmLoading(false);
+      }
+    };
+
+    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:
+          // Soporta string custom: `maxWidth="600px"` se pasa tal cual.
+          return typeof maxWidth === 'string' ? maxWidth : 500;
+      }
+    };
+
+    // Base sx del Paper + width responsive; el consumer puede pisarlos via `paperSx`.
+    const paperBaseSx: SxProps<Theme> = { ...modalStyle, width: getWidth() };
+    const mergedPaperSx = mergeSx(paperBaseSx, paperSx);
+
+    // ── Render modo CONFIRM ─────────────────────────────────────────────
+    if (mode === 'confirm') {
+      const config = severityConfig[severity];
+      const message = confirmMessage ?? children;
+
+      return (
+        <MuiModal
+          open={isOpen}
+          onClose={handleCloseInternal}
+          aria-labelledby={title ? titleId : undefined}
+          aria-describedby={message ? descId : undefined}
+          closeAfterTransition
+          sx={sx}
+        >
+          <Paper className={className} sx={mergedPaperSx}>
+            <Stack spacing={2.5} sx={{ p: 3, alignItems: 'center', textAlign: 'center' }}>
+              <Box
+                sx={{
+                  width: 72,
+                  height: 72,
+                  borderRadius: '50%',
+                  backgroundColor: (t) => t.palette[config.paletteKey].light,
+                  color: (t) => t.palette[config.paletteKey].dark,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  opacity: 0.9,
+                }}
+              >
+                {config.icon}
+              </Box>
+              {title && (
+                <Typography id={titleId} variant="h6" component="h2" sx={{ fontWeight: 700 }}>
+                  {title}
+                </Typography>
+              )}
+              {message && (
+                <Typography id={descId} 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 (compuesto) ─────────────────────────────────
+    const renderChildren = () => {
+      let header: ReactNode | null = null;
+      let body: ReactNode | null = null;
+      let footer: ReactNode | null = null;
+
+      Children.forEach(children, (child) => {
+        if (!isValidElement(child)) return;
+
+        if (isModalSlot(child, ModalHeader, 'ModalHeader')) {
+          const headerChild = child as ReactElement<{ id?: string }>;
+          header = cloneElement(headerChild, { id: titleId, ...headerChild.props });
+        } else if (isModalSlot(child, ModalBody, 'ModalBody')) {
+          const bodyChild = child as ReactElement<{ id?: string }>;
+          body = cloneElement(bodyChild, { id: descId, ...bodyChild.props });
+        } else if (isModalSlot(child, ModalFooter, 'ModalFooter')) {
+          const footerChild = child as ReactElement<ModalFooterProps>;
+          // Props del child ganan sobre los del Modal padre: si el consumer
+          // declara `<Modal.Footer showCloseButton={false}>`, ese valor se
+          // respeta. Solo los que vengan `undefined` caen al default del padre.
+          const childProps = footerChild.props;
+          footer = cloneElement(footerChild, {
+            showCloseButton: childProps.showCloseButton ?? showCloseButton,
+            closeButtonText: childProps.closeButtonText ?? closeButtonText,
+            closeButtonDisabled: childProps.closeButtonDisabled ?? closeButtonDisabled,
+            onClose: childProps.onClose ?? handleCloseInternal,
+            actions: childProps.actions ?? actions,
+          });
+        }
+      });
+
+      if (!footer && !hiddenFooter) {
+        footer = (
+          <ModalFooter
+            showCloseButton={showCloseButton}
+            closeButtonText={closeButtonText}
+            closeButtonDisabled={closeButtonDisabled}
+            onClose={handleCloseInternal}
+            actions={actions}
+          />
+        );
+      }
+
+      return (
+        <>
+          {!hiddenHeader && (header || (title && <ModalHeader id={titleId}>{title}</ModalHeader>))}
+          {!hiddenBody && body}
+          {footer}
+        </>
+      );
+    };
+
+    return (
+      <MuiModal
+        open={isOpen}
+        onClose={handleCloseInternal}
+        aria-labelledby={titleId}
+        aria-describedby={descId}
+        closeAfterTransition
+        sx={sx}
+      >
+        <Paper className={className} sx={mergedPaperSx}>
+          {renderChildren()}
+        </Paper>
+      </MuiModal>
+    );
+  },
+);
+
+Modal.displayName = 'Modal';
+
+// Define los sub-componentes como propiedades estáticas con tipos explícitos
+type ModalComponent = ReturnType<typeof forwardRef<ModalRef, ModalProps>> & {
+  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,23 @@
+import React from 'react';
+import { Box } from '@mui/material';
+
+export interface ModalBodyProps {
+  children: React.ReactNode;
+  /**
+   * ID del elemento — usado para `aria-describedby` del Modal. Se setea
+   * automáticamente cuando el body se renderiza dentro de `<Modal>`.
+   */
+  id?: string;
+}
+
+export const ModalBody: React.FC<ModalBodyProps> = ({ children, id }) => {
+  return (
+    <Box id={id} sx={{ padding: 2, overflowY: 'auto', flexGrow: 1 }}>
+      {children}
+    </Box>
+  );
+};
+
+ModalBody.displayName = 'ModalBody';
+
+export default ModalBody;

package/src/components/Modal/ModalFooter.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Box, Stack } from '@mui/material';
+import type { ButtonProps as MuiButtonProps } from '@mui/material/Button';
+
+import { Button } from '../Button';
+
+// Interfaz para acciones personalizadas (se mantiene aquí)
+export interface ModalAction {
+  text: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: MuiButtonProps['variant'];
+  color?: MuiButtonProps['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<MuiButtonProps> & { form?: string };
+}
+
+export interface ModalFooterProps {
+  children?: React.ReactNode;
+  showCloseButton?: boolean;
+  closeButtonText?: string;
+  closeButtonDisabled?: boolean;
+  onClose: () => void;
+  actions?: ModalAction[];
+}
+
+export const ModalFooter: React.FC<ModalFooterProps> = ({
+  children,
+  showCloseButton = true,
+  closeButtonText = 'Cerrar',
+  closeButtonDisabled = false,
+  onClose,
+  actions = [],
+}) => {
+  return (
+    <Box
+      sx={{
+        padding: 2,
+        borderTop: (theme) => `1px solid ${theme.palette.divider}`,
+        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) => {
+          const { buttonProps, text, onClick, disabled, variant, color } = action;
+          return (
+            <Button
+              key={text}
+              onClick={onClick}
+              disabled={disabled}
+              variant={variant || 'contained'}
+              color={color || 'primary'}
+              {...(buttonProps as any)}
+            >
+              {text}
+            </Button>
+          );
+        })}
+      </Stack>
+    </Box>
+  );
+};
+
+ModalFooter.displayName = 'ModalFooter';
+
+export default ModalFooter;

package/src/components/Modal/ModalHeader.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+export interface ModalHeaderProps {
+  children: React.ReactNode;
+  /**
+   * ID del elemento — usado para `aria-labelledby` del Modal. Se setea
+   * automáticamente cuando el header se renderiza dentro de `<Modal>`.
+   */
+  id?: string;
+}
+
+export const ModalHeader: React.FC<ModalHeaderProps> = ({ children, id }) => {
+  return (
+    <Box
+      sx={{
+        padding: 2,
+        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Typography id={id} variant="h6" component="h2">
+        {children}
+      </Typography>
+    </Box>
+  );
+};
+
+ModalHeader.displayName = 'ModalHeader';
+
+export default ModalHeader;

package/src/components/Modal/index.ts

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