@soyfri/shared-library 2.0.0-beta.21 → 2.0.0-beta.23

package/src/components/Modal/Modal.tsx

@@ -1,407 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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';