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

package/src/components/Modal/Modal.tsx

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

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

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

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

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

@@ -1,217 +0,0 @@
-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.',
-      },
-    },
-  },
-};