@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.12

package/src/components/MenuButton/MenuButton.stories.tsx

@@ -1,197 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MenuButton, MenuOption } from './MenuButton';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import SettingsIcon from '@mui/icons-material/Settings';
-import LogoutIcon from '@mui/icons-material/Logout';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import PersonIcon from '@mui/icons-material/Person';
-import VpnKeyIcon from '@mui/icons-material/VpnKey';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import WarningIcon from '@mui/icons-material/Warning'; // Asegúrate de importar este ícono si lo usas
-import { fn } from '@storybook/test';
-
-const meta: Meta<typeof MenuButton> = {
-  title: 'Components/MenuButton',
-  component: MenuButton,
-  tags: ['autodocs'],
-  argTypes: {
-    buttonText: {
-      control: 'text',
-      description: 'Texto a mostrar en el botón.',
-    },
-    buttonIcon: {
-      control: false,
-      description: 'Ícono a mostrar en el botón.',
-    },
-    options: {
-      control: 'object',
-      description: 'Arreglo de opciones del menú, cada una con `label`, `action` y opcionalmente `icon`.',
-    },
-    variant: {
-      control: 'select',
-      options: ['text', 'outlined', 'contained'],
-      description: 'Variante de estilo del botón de Material-UI.',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'Un botón que despliega un menú de opciones. El ancho del menú se ajusta automáticamente al ancho del botón. Cada ítem del menú puede incluir un ícono.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof MenuButton>;
-
-// --- Historias ---
-
-// Historia por defecto: Botón con texto y menú básico con íconos en los ítems
-export const Default: Story = {
-  args: {
-    buttonText: 'Opciones de Usuario',
-    options: [
-      { label: 'Ver Perfil', action: fn(), icon: <PersonIcon /> },
-      { label: 'Cambiar Contraseña', action: fn()},
-      { label: 'Cerrar Sesión', action: fn(), icon: <LogoutIcon /> },
-    ],
-    variant: 'contained',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra un botón con texto y un menú con ítems que incluyen íconos.',
-      },
-    },
-  },
-};
-
-// Historia: Botón con solo un ícono, menú con íconos
-export const IconButton: Story = {
-  args: {
-    buttonIcon: <AccountCircleIcon />,
-    options: [
-      { label: 'Mi Perfil', action: fn(), icon: <PersonIcon /> },
-      { label: 'Ajustes de Cuenta', action: fn(), icon: <SettingsIcon /> },
-    ],
-    variant: 'text',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra un botón que solo contiene un ícono, con un menú de opciones también con íconos.',
-      },
-    },
-  },
-};
-
-// Historia: Botón con texto e ícono, menú con íconos
-export const TextAndIconButton: Story = {
-  args: {
-    buttonText: 'Configuración',
-    buttonIcon: <SettingsIcon />,
-    options: [
-      { label: 'General', action: fn(), icon: <SettingsIcon /> },
-      { label: 'Privacidad', action: fn(), icon: <VpnKeyIcon /> },
-      { label: 'Notificaciones', action: fn(), icon: <NotificationsIcon /> },
-    ],
-    variant: 'outlined',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra un botón con texto e ícono, y un menú con ítems que también tienen íconos.',
-      },
-    },
-  },
-};
-
-// Historia: Botón con un menú largo (para probar el scroll y el ancho dinámico)
-export const LongMenu: Story = {
-  args: {
-    buttonText: 'Más Opciones de Gestión de Datos',
-    buttonIcon: <MoreVertIcon />,
-    options: Array.from({ length: 15 }, (_, i) => ({
-      label: `Opción de Datos ${i + 1}`,
-      action: fn(),
-      icon: i % 3 === 0 ? <PersonIcon /> : i % 3 === 1 ? <SettingsIcon /> : <LogoutIcon />,
-    })),
-    variant: 'contained',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Demuestra un menú con muchas opciones para probar el scroll y cómo el ancho del menú se ajusta al botón, incluso si el texto del ítem es más corto.',
-      },
-    },
-  },
-};
-
-// Historia: Botón con acciones de ejemplo (usando alert para demostrar)
-export const WithAlertActions: Story = {
-  args: {
-    buttonText: 'Acciones con Alerta',
-    options: [
-      { label: 'Mostrar Alerta Crítica', action: () => alert('¡Alerta Crítica!'), icon: <WarningIcon /> },
-      { label: 'Mostrar Alerta Informativa', action: () => alert('¡Alerta Informativa!'), icon: <NotificationsIcon /> },
-    ],
-    variant: 'contained',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra un botón con ítems de menú que ejecutan funciones de alerta al ser clickeados.',
-      },
-    },
-  },
-};
-
-// Historia: Diferentes variantes de botón (con íconos en el menú)
-export const Variants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '20px' }}>
-      <MenuButton
-        buttonText="Contained"
-        options={[{ label: 'Item Contenido', action: fn(), icon: <PersonIcon /> }]}
-        variant="contained"
-      />
-      <MenuButton
-        buttonText="Outlined"
-        options={[{ label: 'Item Delineado', action: fn(), icon: <SettingsIcon /> }]}
-        variant="outlined"
-      />
-      <MenuButton
-        buttonText="Text"
-        options={[{ label: 'Item de Texto', action: fn(), icon: <LogoutIcon /> }]}
-        variant="text"
-      />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra el componente con diferentes variantes de botón de Material-UI.',
-      },
-    },
-  },
-};
-
-// Historia: Botón con texto largo para probar el ajuste de ancho
-export const WideButton: Story = {
-  args: {
-    buttonText: 'Este es un botón con un texto muy largo para probar el ancho del menú',
-    options: [
-      { label: 'Opción corta', action: fn(), icon: <PersonIcon /> },
-      { label: 'Opción con texto más largo para el ítem', action: fn(), icon: <SettingsIcon /> },
-    ],
-    variant: 'contained',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Demuestra cómo el menú ajusta su ancho para coincidir con un botón que tiene un texto considerablemente largo.',
-      },
-    },
-  },
-};

package/src/components/MenuButton/MenuButton.tsx

@@ -1,100 +0,0 @@
-import React, { useState, MouseEvent, ReactNode, useId, useRef } from 'react'; // 👈 Importa useRef
-import { Button, Menu, MenuItem, ListItemIcon, Typography } from '@mui/material';
-import { ButtonProps } from '@mui/material/Button';
-
-// Define la interfaz para cada opción del menú
-export interface MenuOption {
-    label: string;
-    action: () => void;
-    icon?: ReactNode;
-}
-
-// Define las props para el componente reutilizable
-interface MenuButtonProps {
-    buttonText?: string;
-    buttonIcon?: ReactNode;
-    options: MenuOption[];
-    variant?: ButtonProps['variant'];
-}
-
-export const MenuButton: React.FC<MenuButtonProps> = ({
-    buttonText,
-    buttonIcon,
-    options,
-    variant = 'contained',
-}) => {
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    const [menuWidth, setMenuWidth] = useState<number>(0);
-    const open = Boolean(anchorEl);
-
-    const buttonRef = useRef<HTMLButtonElement>(null);
-
-    const uniqueId = useId();
-    const buttonId = `menu-button-${uniqueId}`;
-    const menuId = `menu-content-${uniqueId}`;
-
-    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-        setAnchorEl(event.currentTarget);
-        if (buttonRef.current) {
-            setMenuWidth(buttonRef.current.offsetWidth);
-        }
-    };
-
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const handleMenuItemClick = (action: () => void) => {
-        handleClose();
-        action();
-    };
-
-    return (
-        <>
-            <Button
-                ref={buttonRef}
-                variant={variant}
-                id={buttonId}
-                aria-controls={open ? menuId : undefined}
-                aria-haspopup="true"
-                aria-expanded={open ? 'true' : undefined}
-                onClick={handleClick}
-                startIcon={buttonIcon}
-            >
-                {buttonText}
-            </Button>
-            <Menu
-                id={menuId}
-                anchorEl={anchorEl}
-                open={open}
-                onClose={handleClose}
-                MenuListProps={{
-                    'aria-labelledby': buttonId,
-                }}
-                PaperProps={{
-                    style: {
-                        minWidth: menuWidth,
-                    },
-                }}
-            >
-                {options.map((option, index) => (
-                    <MenuItem
-                        key={index}
-                        onClick={() => handleMenuItemClick(option.action)}
-                    >
-                        {option.icon && (
-                            <ListItemIcon>
-                                {option.icon}
-                            </ListItemIcon>
-                        )}
-                        <Typography variant="inherit" noWrap>
-                            {option.label}
-                        </Typography>
-                    </MenuItem>
-                ))}
-            </Menu>
-        </>
-    );
-};
-
-export default MenuButton;

package/src/components/MenuButton/index.ts

@@ -1 +0,0 @@
-export { default as MenuButton } from './MenuButton'