@soyfri/shared-library 2.0.0-beta.2 → 2.0.0-beta.4

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,355 @@
+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 type { 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;
+}
+
+export type ModalMode = 'default' | 'confirm';
+export type ModalSeverity = 'info' | 'warning' | 'error' | 'success';
+
+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'];
+  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 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; 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,
+    },
+    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();
+      }
+    };
+
+    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 (
+      <MuiModal
+        open={isOpen}
+        onClose={handleCloseInternal}
+        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,71 @@
+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'];
+  /**
+   * 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
+  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) => {
+          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>
+  );
+};
+
+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,6 @@
+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';

package/src/components/PageLoader/PageLoader.stories.tsx

@@ -0,0 +1,217 @@
+import React, { useState, useEffect } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box, Button, Paper, Typography } from '@mui/material';
+
+import { PageLoader } from './PageLoader';
+
+const meta: Meta<typeof PageLoader> = {
+  title: 'Components/PageLoader',
+  component: PageLoader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Loader visual para estados de carga, tanto a nivel de página completa (splash screen) como inline dentro de un contenedor. Reemplaza el `LayoutSplashScreen` de Metronic.',
+      },
+    },
+  },
+  argTypes: {
+    fullscreen: {
+      control: 'boolean',
+      description: 'Ocupa toda la ventana con backdrop. Default: true.',
+    },
+    size: {
+      control: { type: 'number', min: 16, max: 120, step: 4 },
+      description: 'Tamaño del spinner en px.',
+    },
+    open: {
+      control: 'boolean',
+      description: 'Si es false, el loader se desmonta (con fade en fullscreen).',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageLoader>;
+
+// ── Stories ──────────────────────────────────────────────────────────────
+
+export const FullscreenDefault: Story = {
+  args: {
+    fullscreen: true,
+    open: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loader full-page sin texto ni logo. Caso más minimal.',
+      },
+    },
+  },
+};
+
+export const FullscreenWithMessage: Story = {
+  args: {
+    fullscreen: true,
+    open: true,
+    message: 'Cargando aplicación...',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Splash screen típico con mensaje bajo el spinner.',
+      },
+    },
+  },
+};
+
+export const FullscreenWithLogo: Story = {
+  args: {
+    fullscreen: true,
+    open: true,
+    message: 'Inicializando...',
+    logo: (
+      <Box
+        sx={{
+          width: 120,
+          height: 120,
+          borderRadius: '50%',
+          bgcolor: 'primary.main',
+          color: '#fff',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 36,
+          fontWeight: 700,
+        }}
+      >
+        fri
+      </Box>
+    ),
+    size: 40,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Splash de arranque de app con logo/branding arriba del spinner. Equivalente visual al `LayoutSplashScreen` de Metronic.',
+      },
+    },
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    fullscreen: false,
+    open: true,
+    message: 'Cargando datos',
+    size: 32,
+  },
+  render: (args) => (
+    <Paper sx={{ maxWidth: 480, mx: 'auto', mt: 4 }}>
+      <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
+        <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+          Panel de resumen
+        </Typography>
+      </Box>
+      <PageLoader {...args} />
+    </Paper>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Loader inline (no fullscreen). Ocupa el ancho del contenedor padre y tiene una altura mínima. Útil dentro de cards mientras se cargan datos.',
+      },
+    },
+  },
+};
+
+export const ToggledFullscreen: Story = {
+  render: () => {
+    const [loading, setLoading] = useState(false);
+
+    const simulate = () => {
+      setLoading(true);
+      setTimeout(() => setLoading(false), 1800);
+    };
+
+    return (
+      <Box sx={{ p: 4, height: '100vh' }}>
+        <Typography variant="h5" gutterBottom>
+          Simulación de carga
+        </Typography>
+        <Typography color="text.secondary" sx={{ mb: 2 }}>
+          Al hacer click, el loader aparece por 1.8s y luego desaparece con fade.
+        </Typography>
+        <Button variant="contained" onClick={simulate}>
+          Simular carga
+        </Button>
+
+        <PageLoader
+          fullscreen
+          open={loading}
+          message="Procesando..."
+          logo={
+            <Box
+              sx={{
+                width: 72,
+                height: 72,
+                borderRadius: 2,
+                bgcolor: 'primary.main',
+                color: '#fff',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 24,
+                fontWeight: 700,
+              }}
+            >
+              fri
+            </Box>
+          }
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Ejemplo controlado: el loader se monta/desmonta según un estado externo, con fade de salida. Patrón típico para bloquear la app durante una operación crítica (auth, inicialización, navegación global).',
+      },
+    },
+  },
+};
+
+export const AutoDismiss: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+
+    useEffect(() => {
+      const t = setTimeout(() => setOpen(false), 2000);
+      return () => clearTimeout(t);
+    }, []);
+
+    return (
+      <Box sx={{ p: 4, height: '100vh' }}>
+        {!open && (
+          <Typography variant="h5">
+            App lista. (El loader se cerró tras 2s.)
+          </Typography>
+        )}
+        <PageLoader open={open} message="Cargando..." />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Arranque típico: el loader aparece al montar, y el consumer lo cierra cuando termina la inicialización. Aquí simulamos 2 segundos fijos.',
+      },
+    },
+  },
+};