@soyfri/shared-library 1.5.0 → 1.6.0-beta.0

package/src/components/Modal/Modal.stories.tsx

@@ -1,293 +0,0 @@
-import React, { useState, useRef } from 'react'; // 👈 Importa useRef
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button, Typography, Box } from '@mui/material';
-import { fn } from '@storybook/test';
-import Modal, { ModalRef } from './Modal';
-import { useClipboard } from '../../hooks/ClipBoard';
-
-const meta: Meta<typeof Modal> = {
-    title: 'Components/Modal',
-    component: Modal,
-    tags: ['autodocs'],
-    argTypes: {
-        open: {
-            control: 'boolean',
-            description: 'Controla si el modal está abierto o cerrado (uso controlado). Opcional si se usa el control imperativo con `ref`.',
-        },
-        onClose: {
-            action: 'onClose clickeado',
-            description: 'Función a ejecutar cuando el modal solicita cerrarse (ej. clic fuera o botón de cerrar). Opcional si se usa el control imperativo con `ref`.',
-        },
-        title: {
-            control: 'text',
-            description: 'Título opcional para el encabezado del modal. Se usará si no se proporciona `Modal.Header` explícitamente.',
-        },
-        children: {
-            control: 'object',
-            description: 'Contenido del modal, típicamente `Modal.Header`, `Modal.Body` y `Modal.Footer`.',
-        },
-        showCloseButton: {
-            control: 'boolean',
-            description: 'Controla la visibilidad del botón "Cerrar" por defecto en el `Modal.Footer`.',
-        },
-        closeButtonText: {
-            control: 'text',
-            description: 'Texto personalizado para el botón "Cerrar".',
-        },
-        closeButtonDisabled: {
-            control: 'boolean',
-            description: 'Deshabilita el botón "Cerrar".',
-        },
-        actions: {
-            control: 'object',
-            description: 'Un arreglo de objetos `ModalAction` para botones de acción personalizados en el `Modal.Footer`.',
-        },
-        maxWidth: {
-            control: 'select',
-            options: ['xs', 'sm', 'md', 'lg', 'xl', false],
-            description: 'Tamaño máximo del modal (propiedad de Material-UI `Dialog`).',
-        },
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: 'Un componente de modal reutilizable de Material-UI con una estructura de componente compuesto (`Modal.Header`, `Modal.Body`, `Modal.Footer`). Puede ser controlado por una prop `open` o de forma imperativa a través de `ref` (`open()` y `close()` métodos). Permite definir acciones personalizadas y controlar la visibilidad y el estado de los botones por defecto.',
-            },
-        },
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof Modal>;
-
-// --- Historias ---
-
-// Historia base: Modal simple con título y contenido básico (uso controlado por estado)
-export const Default: Story = {
-    args: {
-        open: true,
-        onClose: fn(),
-        title: 'Modal de Ejemplo (Controlado por Estado)',
-        children: (
-            <Modal.Body>
-                <Typography>Este es el contenido principal del modal.</Typography>
-                <Typography sx={{ mt: 2 }}>Puedes colocar cualquier elemento React aquí.</Typography>
-            </Modal.Body>
-        ),
-        showCloseButton: true,
-        closeButtonText: 'Cerrar',
-        actions: [
-            { text: 'Guardar', onClick: fn(() => console.log("some some")), variant: 'contained' },
-            { text: 'Aceptar', onClick: fn(), color: 'success' },
-        ],
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Muestra un modal básico con un título y botones de acción, controlado por una prop `open` en el componente padre.',
-            },
-        },
-    },
-};
-
-// Nueva Historia: Modal controlado de forma Imperativa (sin estado `open` en el padre)
-export const ImperativeControl: Story = {
-    render: (args) => {
-        const modalRef = useRef<ModalRef>(null);
-
-        const handleOpen = () => {
-            modalRef.current?.open();
-        };
-
-        const handleConfirm = () => {
-            alert('Acción confirmada desde el modal imperativo!');
-            modalRef.current?.close();
-        };
-
-        return (
-            <Box>
-                <Button onClick={handleOpen} variant="contained">
-                    Abrir Modal Imperativo
-                </Button>
-
-                <Modal
-                    ref={modalRef} // Asigna la ref al modal
-                    // No se pasa la prop `open` aquí, el modal gestiona su estado interno
-                    onClose={fn(() => console.log('Modal cerrado imperativamente'))} // El padre aún puede escuchar el cierre
-                    title="Modal Controlado Imperativamente"
-                    showCloseButton={true}
-                    closeButtonText="Cerrar"
-                    actions={[{ text: 'Aceptar', onClick: handleConfirm, variant: 'contained' }]}
-                    maxWidth="sm"
-                    {...args} // Pasa otras props del story
-                >
-                    <Modal.Body>
-                        <Typography>Este modal se abre y cierra llamando a métodos de la `ref`.</Typography>
-                        <Typography sx={{ mt: 2 }}>No hay un `useState` para `open` en este componente padre.</Typography>
-                    </Modal.Body>
-                </Modal>
-            </Box>
-        );
-    },
-    args: {
-        // Las props 'open' y 'onClose' se omiten o se gestionan internamente en el render
-        open: undefined, // Asegúrate de que `open` no se pase para activar el control interno
-        onClose: undefined, // `onClose` se gestiona en el render
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demuestra cómo controlar el modal de forma imperativa usando `useRef` y los métodos `open()` y `close()` expuestos por el modal, sin necesidad de gestionar un estado `open` en el componente padre.',
-            },
-        },
-    },
-};
-
-
-// Historia: Modal con estructura de componente compuesto completa
-export const CompleteStructure: Story = {
-    args: {
-        open: true,
-        onClose: fn(),
-        maxWidth: 'md',
-        children: (
-            <>
-                <Modal.Header>
-                    <Typography variant="h6">Detalles del Artículo</Typography>
-                </Modal.Header>
-                <Modal.Body>
-                    <Box sx={{ p: 2, border: '1px dashed grey', borderRadius: 1 }}>
-                        <Typography>Aquí va un formulario complejo o información detallada.</Typography>
-                        <Typography sx={{ mt: 1 }}>El cuerpo puede crecer y tener scroll si es necesario.</Typography>
-                        <Button onClick={fn()} sx={{ mt: 2 }}>Acción en el cuerpo</Button>
-                    </Box>
-                </Modal.Body>
-                <Modal.Footer
-                    showCloseButton={false}
-                    onClose={fn()} // Added onClose property
-                    actions={[
-                        { text: 'Cancelar', onClick: fn(), variant: 'outlined', color: 'error' },
-                        { text: 'Confirmar Envío', onClick: fn(), variant: 'contained', color: 'primary' },
-                    ]}
-                >
-                    <Typography variant="caption" sx={{ mr: 2 }}>
-                        Requiere confirmación.
-                    </Typography>
-                </Modal.Footer>
-            </>
-        ),
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demuestra el uso completo de la estructura de componente compuesto (`Modal.Header`, `Modal.Body`, `Modal.Footer`) con contenido variado y control de botones.',
-            },
-        },
-    },
-};
-
-// Historia: Modal sin botón de cerrar por defecto
-export const NoDefaultCloseButton: Story = {
-    args: {
-        ...Default.args,
-        title: 'Modal sin botón de cerrar',
-        showCloseButton: false,
-        actions: [
-            { text: 'Entendido', onClick: fn(), variant: 'contained' },
-        ],
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Un modal que no muestra el botón "Cerrar" por defecto, forzando al usuario a usar las acciones personalizadas.',
-            },
-        },
-    },
-};
-
-// Historia: Modal con botón de cerrar deshabilitado
-export const DisabledCloseButton: Story = {
-    args: {
-        ...Default.args,
-        title: 'Modal con botón de cerrar deshabilitado',
-        closeButtonDisabled: true,
-        actions: [
-            { text: 'Habilitar', onClick: fn(), variant: 'contained' },
-        ],
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Muestra un modal donde el botón "Cerrar" por defecto está deshabilitado.',
-            },
-        },
-    },
-};
-
-// Historia: Modal con diferentes tamaños (maxWidth)
-export const Sizing: Story = {
-    render: (args: any) => {
-        const [openXs, setOpenXs] = useState(false);
-        const [openLg, setOpenLg] = useState(false);
-        const { ref, SnackbarComponent } = useClipboard();
-
-
-
-        return (
-            <Box sx={{ display: 'flex', gap: 2 }}>
-                <Button onClick={() => setOpenXs(true)} variant="outlined">Abrir XS</Button>
-                <Button onClick={() => setOpenLg(true)} variant="outlined">Abrir LG</Button>
-
-                <Modal {...args} open={openXs} onClose={() => setOpenXs(false)} title="Modal XS" maxWidth="xs">
-                    <Modal.Body><Typography>Este es un modal de tamaño extra pequeño.</Typography></Modal.Body>
-                </Modal>
-
-                <Modal {...args} open={openLg} onClose={() => setOpenLg(false)} title="Modal LG" maxWidth="lg">
-                    <Modal.Body>
-                        <Typography ref={ref}>Este es un modal de tamaño grande.</Typography>
-                        <SnackbarComponent />
-                    </Modal.Body>
-                </Modal>
-            </Box>
-        );
-    },
-    args: {
-        open: false,
-        onClose: fn(),
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demuestra cómo el modal se ajusta a diferentes tamaños (`maxWidth`) definidos por las propiedades de Material-UI.',
-            },
-        },
-    },
-};
-
-// Historia: Modal con texto largo en el cuerpo (para probar el scroll)
-export const LongContent: Story = {
-    args: {
-        open: true,
-        onClose: fn(),
-        title: 'Modal con Contenido Largo',
-        maxWidth: 'sm',
-        children: (
-            <Modal.Body>
-                {Array.from({ length: 30 }, (_, i) => (
-                    <Typography key={i} sx={{ mb: 1 }}>
-                        Este es un párrafo de contenido largo para probar el scroll del modal. Línea {i + 1}.
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Typography>
-                ))}
-            </Modal.Body>
-        ),
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Muestra un modal con un cuerpo que contiene mucho texto, demostrando la funcionalidad de scroll automático.',
-            },
-        },
-    },
-};

package/src/components/Modal/Modal.tsx

@@ -1,173 +0,0 @@
-import React, { useState, useImperativeHandle, forwardRef } from 'react'; // 👈 Importa useImperativeHandle y forwardRef
-import { Modal as MuiModal, Box, Paper, useTheme, useMediaQuery } from '@mui/material';
-
-import { 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;
-}
-
-interface ModalProps {
-  // La prop 'open' ahora es opcional si se usa con ref, pero aún puede ser controlada externamente
-  open?: boolean;
-  onClose?: () => void; // 'onClose' ahora es opcional ya que el modal puede cerrarse internamente
-  title?: string;
-  children: React.ReactNode;
-  showCloseButton?: boolean;
-  closeButtonText?: string;
-  closeButtonDisabled?: boolean;
-  actions?: ModalAction[];
-  maxWidth?: DialogProps['maxWidth'];
-  hiddenFooter?: boolean
-}
-
-const modalStyle = {
-  position: 'absolute' as 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '90%',
-  maxHeight: '90vh',
-  display: 'flex',
-  flexDirection: 'column',
-  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 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,
-          });
-        }
-      }
-    });
-
-    if (!footer && !hiddenFooter) {
-      footer = (
-        <ModalFooter
-          showCloseButton={showCloseButton}
-          closeButtonText={closeButtonText}
-          closeButtonDisabled={closeButtonDisabled}
-          onClose={handleCloseInternal} // Usa la función de cierre interna
-          actions={actions}
-        />
-      );
-    }
-
-    return (
-      <>
-        {header || (title && <ModalHeader>{title}</ModalHeader>)}
-        {body}
-        {footer}
-      </>
-    );
-  };
-
-  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>> & {
-  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,61 +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'];
-}
-
-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) => (
-          <Button
-            key={index}
-            onClick={action.onClick}
-            disabled={action.disabled}
-            variant={action.variant || 'contained'}
-            color={action.color || 'primary'}
-          >
-            {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 +0,0 @@
-export {default as Modal } from './Modal';