@soyfri/shared-library 2.0.0-beta.21 → 2.0.0-beta.23

package/src/components/InputGroup/InputGroup.tsx

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

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

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'