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

package/src/components/InputGroup/InputGroup.tsx

@@ -0,0 +1,180 @@
+import React, { Children, isValidElement } from 'react';
+import { Box, type SxProps, type Theme } from '@mui/material';
+
+import { mergeSx } from '../_shared/mergeSx';
+import { LABEL_MARGIN_TOP } from '../../theme/tokens';
+
+export interface InputGroupProps {
+  children: React.ReactNode;
+  /**
+   * sx aplicado al contenedor raíz del grupo. Se mergea sobre los defaults.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * sx aplicado a cada slot individual. Útil para controlar flex/gap entre
+   * los hijos del grupo.
+   */
+  slotSx?: SxProps<Theme>;
+  /**
+   * Radio del borde del grupo. Default: 10.
+   */
+  borderRadius?: number | string;
+  /**
+   * Desactiva visualmente el grupo (no cascada lógica — los hijos deben
+   * manejar su propio `disabled`).
+   */
+  disabled?: boolean;
+  /**
+   * Orientación del grupo. Default: 'horizontal'.
+   */
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+}
+
+/**
+ * Agrupa visualmente varios componentes de entrada (Input / Select / DatePicker /
+ * Button, etc.) compartiendo un solo borde y con separadores internos.
+ *
+ * El grupo respeta el espacio que Input/Select reservan para su label `outside`
+ * (`LABEL_MARGIN_TOP`) moviendo ese reservado al contenedor externo y
+ * cancelándolo en los hijos. Los labels siguen flotando por encima del borde
+ * del grupo con la misma animación que fuera del grupo.
+ *
+ * No inspecciona el tipo de cada hijo; aplica los overrides a través de
+ * descendant selectors por CSS para funcionar con cualquier wrapper / memoizado.
+ */
+export const InputGroup: React.FC<InputGroupProps> = ({
+  children,
+  sx,
+  slotSx,
+  borderRadius = 10,
+  disabled,
+  orientation = 'horizontal',
+  className,
+}) => {
+  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
+  const slots = Children.toArray(children).filter(isValidElement);
+  const isHorizontal = orientation === 'horizontal';
+
+  const baseSx: SxProps<Theme> = {
+    // Respeta el label "outside" de Input/Select: los hijos pierden su marginTop
+    // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los
+    // labels floten por encima del borde del grupo.
+    marginTop: LABEL_MARGIN_TOP,
+
+    display: 'flex',
+    flexDirection: isHorizontal ? 'row' : 'column',
+    alignItems: 'stretch',
+    width: '100%',
+    border: (theme) => `1px solid ${theme.palette.divider}`,
+    borderRadius: radius,
+    backgroundColor: 'background.paper',
+    transition:
+      'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
+    '&:focus-within': {
+      borderColor: 'primary.main',
+      boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`,
+    },
+    opacity: disabled ? 0.6 : 1,
+    pointerEvents: disabled ? 'none' : 'auto',
+
+    // Cancelar el marginTop que Input/Select reservan en labelPosition="outside".
+    // El grupo ya lo reservó en su nivel externo.
+    '& .MuiFormControl-root, & > [data-input-group-slot] > .MuiTextField-root, & > [data-input-group-slot] > .MuiFormControl-root':
+      {
+        marginTop: 0,
+      },
+
+    // Quitar el borde del notched outline interno: el borde visible es el del
+    // grupo, los separadores son los borderRight/borderBottom de cada slot.
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: 'none',
+    },
+
+    // Forzar que todos los campos pinten sus esquinas cuadradas (las esquinas
+    // redondeadas se aplican solo al primer/último slot más abajo).
+    '& .MuiInputBase-root, & .MuiChip-root': {
+      borderRadius: 0,
+    },
+
+    // Botones integrados: sin radius propio, altura completa, sin sombra.
+    '& .MuiButton-root': {
+      borderRadius: 0,
+      height: '100%',
+      boxShadow: 'none',
+      border: 'none',
+    },
+
+    // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.
+    '& > [data-input-group-slot]': {
+      flex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      // Separador entre slots (horizontal: borderRight / vertical: borderBottom),
+      // usando el color de divider del theme.
+      ...(isHorizontal
+        ? { borderRight: (theme: Theme) => `1px solid ${theme.palette.divider}` }
+        : { borderBottom: (theme: Theme) => `1px solid ${theme.palette.divider}` }),
+      '&:last-of-type': {
+        borderRight: 'none',
+        borderBottom: 'none',
+      },
+    },
+
+    // Esquinas redondeadas: primer slot (izquierda o arriba).
+    '& > [data-input-group-slot]:first-of-type .MuiInputBase-root, & > [data-input-group-slot]:first-of-type .MuiButton-root, & > [data-input-group-slot]:first-of-type .MuiChip-root':
+      isHorizontal
+        ? {
+            borderTopLeftRadius: radius,
+            borderBottomLeftRadius: radius,
+          }
+        : {
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+          },
+
+    // Esquinas redondeadas: último slot (derecha o abajo).
+    '& > [data-input-group-slot]:last-of-type .MuiInputBase-root, & > [data-input-group-slot]:last-of-type .MuiButton-root, & > [data-input-group-slot]:last-of-type .MuiChip-root':
+      isHorizontal
+        ? {
+            borderTopRightRadius: radius,
+            borderBottomRightRadius: radius,
+          }
+        : {
+            borderBottomLeftRadius: radius,
+            borderBottomRightRadius: radius,
+          },
+  };
+
+  const baseSlotSx: SxProps<Theme> = {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+  };
+
+  return (
+    <Box
+      data-testid="input-group"
+      className={className}
+      aria-disabled={disabled ? 'true' : undefined}
+      sx={mergeSx(baseSx, sx)}
+    >
+      {slots.map((child, i) => {
+        const slotKey = (child as React.ReactElement).key ?? i;
+        return (
+          <Box
+            key={slotKey}
+            data-input-group-slot
+            sx={mergeSx(baseSlotSx, slotSx)}
+          >
+            {child}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default InputGroup;

package/src/components/InputGroup/index.ts

@@ -0,0 +1,2 @@
+export { InputGroup, default } from './InputGroup';
+export type { InputGroupProps } from './InputGroup';

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'