@soyfri/shared-library 1.5.0-beta.3 → 1.5.0

package/src/components/InputGroup/InputGroup.tsx

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

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