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

package/src/components/InputGroup/InputGroup.tsx

@@ -1,136 +0,0 @@
-import React, { Children, cloneElement, isValidElement } from 'react';
-import { Box } from '@mui/material';
-import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
-import { Select as MuiSelect } from '@mui/material';
-import { TextField as MuiTextField } from '@mui/material';
-import { Input } from '../Input';
-import { Select } from '../Select';
-import { DatePicker } from '../DatePicker';
-
-interface CommonProps {
-  sx?: object;
-  [key: string]: any;
-}
-
-interface InputGroupProps {
-  children: React.ReactNode;
-}
-
-const InputGroup: React.FC<InputGroupProps> = ({ children }) => {
-  const childrenArray = Children.toArray(children);
-
-  const childrenWithDividers = childrenArray.map((child, index) => {
-    if (isValidElement(child)) {
-      const childProps = child.props as CommonProps;
-      const childType = child.type as any;
-
-      const isInputComponent = (
-        childType === MuiTextField || 
-        childType === Input || 
-        childType === MuiSelect || 
-        childType === Select ||
-        childType === MuiDatePicker || 
-        childType === DatePicker
-      );
-
-      const clonedChild = isInputComponent ? (
-        cloneElement(child, {
-          ...childProps,
-          // Añade la clase directamente al componente clonado
-          className: 'InputGroupChild',
-          sx: {
-            ...childProps.sx,
-            // Usa el selector correcto para anular el borde del NotchedOutline
-            '& .MuiOutlinedInput-notchedOutline': {
-              border: 'none !important',
-            },
-            // Asegura que el botón del DatePicker no tenga borde divisor
-            '& .MuiInputBase-root .MuiButtonBase-root': {
-              borderRight: 'none',
-            },
-            // Oculta el legend de MuiOutlinedInput para que el borde no tenga "muescas"
-            '& .MuiOutlinedInput-notchedOutline > legend': {
-              display: 'none',
-            },
-
-            ' .InputGroupChild > MuiOutlinedInput-notchedOutline': {
-              border: 'none !important',
-
-            }, 
-            '.MuiOutlinedInput-notchedOutline, > .MuiOutlinedInput-notchedOutline': {
-              border: 'none !important',
-            }
-
-          },
-        } as CommonProps)
-      ) : (
-        child
-      );
-
-      return (
-        <Box
-          key={index}
-          sx={{
-            flexGrow: 1,
-            display: 'flex',
-            alignItems: 'center',
-            minWidth: 0,
-            borderRight: index < childrenArray.length - 1 ? '1px solid #ccc' : 'none',
-          }}
-        >
-          {clonedChild}
-        </Box>
-      );
-    }
-    return child;
-  });
-
-  return (
-    <Box
-      sx={{
-          width: '100%',
-          display: 'grid',
-          marginBottom: '10px',
-          marginTop: '10px'
-      }}
-
-  >
-    <Box
-      className='InputGroupChild'
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        height: '32px',
-        border: '1px solid #ccc',
-        borderRadius: '10px',
-        padding: '8px 0px',
-        marginTop: '-5px',
-        marginBottom: '20px',
-        '& .MuiInputBase-root, & .MuiButtonBase-root, & .MuiChip-root': {
-          borderRadius: 0,
-        },
-        '& > div:first-of-type .MuiInputBase-root, & > div:first-of-type .MuiButtonBase-root, & > div:first-of-type .MuiChip-root': {
-          borderTopLeftRadius: '10px',
-          borderBottomLeftRadius: '10px',
-        },
-        '& > div:last-of-type .MuiInputBase-root, & > div:last-of-type .MuiButtonBase-root, & > div:last-of-type .MuiChip-root': {
-          borderTopRightRadius: '10px',
-          borderBottomRightRadius: '10px',
-          border: 'none !important'
-        },
-        // Estilo para los componentes que tienen `InputGroupChild` en la clase
-        '& .InputGroupChild': {
-          width: '100%',
-        },
-        '&  > div:first-of-type .MuiInputBase-root > .MuiOutlinedInput-notchedOutline': {
-          border: 'none !important',
-        },
-      }}
-    >
-      {childrenWithDividers}
-    </Box>
-  </Box>
-  );
-};
-
-export default InputGroup;

package/src/components/InputGroup/index.ts

@@ -1 +0,0 @@
-export { default as InputGroup } 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'