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

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

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

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

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