@soyfri/shared-library 2.0.0-beta.17 → 2.0.0-beta.18

package/src/components/ActionMenu/ActionMenu.stories.tsx

@@ -0,0 +1,427 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import {
+  Box,
+  Button,
+  Chip,
+  Divider,
+  IconButton,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
+  Typography,
+} from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteIcon from '@mui/icons-material/Delete';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import DownloadIcon from '@mui/icons-material/Download';
+import ShareIcon from '@mui/icons-material/Share';
+import SettingsIcon from '@mui/icons-material/Settings';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import type { SxProps, Theme } from '@mui/material/styles';
+
+import { ActionMenu, ActionMenuItem } from './ActionMenu';
+
+const meta: Meta<typeof ActionMenu> = {
+  title: 'Components/ActionMenu',
+  component: ActionMenu,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Menú de acciones compacto pensado para celdas de tabla, cabeceras y cualquier lugar donde hagan falta acciones secundarias detrás de un trigger. Usa una API de compound components: `<ActionMenu>` + `<ActionMenuItem>` + `<Divider />`.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionMenu>;
+
+// ── Default ─────────────────────────────────────────────────────────────
+
+type DefaultArgs = {
+  anchorVertical: 'top' | 'center' | 'bottom';
+  anchorHorizontal: 'left' | 'center' | 'right';
+  transformVertical: 'top' | 'center' | 'bottom';
+  transformHorizontal: 'left' | 'center' | 'right';
+  menuSx: SxProps<Theme>;
+};
+
+export const Default: StoryObj<DefaultArgs> = {
+  args: {
+    anchorVertical: 'bottom',
+    anchorHorizontal: 'right',
+    transformVertical: 'top',
+    transformHorizontal: 'right',
+    menuSx: { minWidth: 180 },
+  },
+  argTypes: {
+    anchorVertical: {
+      control: 'select',
+      options: ['top', 'center', 'bottom'],
+      description: 'anchorOrigin.vertical — punto vertical del trigger.',
+      table: { category: 'anchorOrigin' },
+    },
+    anchorHorizontal: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+      description: 'anchorOrigin.horizontal — punto horizontal del trigger.',
+      table: { category: 'anchorOrigin' },
+    },
+    transformVertical: {
+      control: 'select',
+      options: ['top', 'center', 'bottom'],
+      description: 'transformOrigin.vertical — punto vertical del menú.',
+      table: { category: 'transformOrigin' },
+    },
+    transformHorizontal: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+      description: 'transformOrigin.horizontal — punto horizontal del menú.',
+      table: { category: 'transformOrigin' },
+    },
+    menuSx: {
+      control: 'object',
+      description: 'Estilos `sx` aplicados al Paper interno del Menu.',
+    },
+  },
+  render: ({
+    anchorVertical,
+    anchorHorizontal,
+    transformVertical,
+    transformHorizontal,
+    menuSx,
+  }) => (
+    <ActionMenu
+      anchorOrigin={{ vertical: anchorVertical, horizontal: anchorHorizontal }}
+      transformOrigin={{ vertical: transformVertical, horizontal: transformHorizontal }}
+      menuSx={menuSx}
+    >
+      <ActionMenuItem onClick={fn()}>Editar</ActionMenuItem>
+      <ActionMenuItem onClick={fn()}>Duplicar</ActionMenuItem>
+      <ActionMenuItem onClick={fn()}>Eliminar</ActionMenuItem>
+    </ActionMenu>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Caso base: sin `trigger` se usa el IconButton de tres puntos (⋮) — el patrón típico para celdas de tabla. Usa los selects para experimentar con `anchorOrigin` y `transformOrigin`, y el control de objeto para `menuSx`.',
+      },
+      source: {
+        code: `
+        <ActionMenu
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+          menuSx={{ minWidth: 180 }}
+        >
+          <ActionMenuItem onClick={fn()}>Editar</ActionMenuItem>
+          <ActionMenuItem onClick={fn()}>Duplicar</ActionMenuItem>
+          <ActionMenuItem onClick={fn()}>Eliminar</ActionMenuItem>
+        </ActionMenu>
+        `,
+      }
+    },
+  },
+};
+
+// ── Con iconos ──────────────────────────────────────────────────────────
+
+export const WithIcons: Story = {
+  render: () => (
+    <ActionMenu>
+      <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+        Editar
+      </ActionMenuItem>
+      <ActionMenuItem icon={<ContentCopyIcon fontSize="small" />} onClick={fn()}>
+        Duplicar
+      </ActionMenuItem>
+      <ActionMenuItem icon={<ShareIcon fontSize="small" />} onClick={fn()}>
+        Compartir
+      </ActionMenuItem>
+      <ActionMenuItem icon={<DeleteIcon fontSize="small" />} onClick={fn()}>
+        Eliminar
+      </ActionMenuItem>
+    </ActionMenu>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cada item acepta una prop `icon` opcional que se renderiza a la izquierda.',
+      },
+      source: {
+        code: `
+        <ActionMenu>
+          <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+            Editar
+          </ActionMenuItem>
+          <ActionMenuItem icon={<ContentCopyIcon fontSize="small" />} onClick={fn()}>
+            Duplicar
+          </ActionMenuItem>
+          <ActionMenuItem icon={<ShareIcon fontSize="small" />} onClick={fn()}>
+            Compartir
+          </ActionMenuItem>
+          <ActionMenuItem icon={<DeleteIcon fontSize="small" />} onClick={fn()}>
+            Eliminar
+          </ActionMenuItem>
+        </ActionMenu>
+        `
+      }
+    },
+  },
+};
+
+// ── Con Divider ─────────────────────────────────────────────────────────
+
+export const WithDivider: Story = {
+  render: () => (
+    <ActionMenu>
+      <ActionMenuItem icon={<VisibilityIcon fontSize="small" />} onClick={fn()}>
+        Ver detalle
+      </ActionMenuItem>
+      <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+        Editar
+      </ActionMenuItem>
+      <ActionMenuItem icon={<DownloadIcon fontSize="small" />} onClick={fn()}>
+        Descargar
+      </ActionMenuItem>
+      <Divider />
+      <ActionMenuItem icon={<DeleteIcon fontSize="small" />} onClick={fn()}>
+        Eliminar
+      </ActionMenuItem>
+    </ActionMenu>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Para agrupar acciones, usa un `<Divider />` de MUI como hijo directo — se coloca exactamente donde lo pongas en el JSX.',
+      },
+      source: {
+        code: `
+        <ActionMenu>
+          <ActionMenuItem icon={<VisibilityIcon fontSize="small" />} onClick={fn()}>
+            Ver detalle
+          </ActionMenuItem>
+          <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+            Editar
+          </ActionMenuItem>
+          <ActionMenuItem icon={<DownloadIcon fontSize="small" />} onClick={fn()}>
+            Descargar
+          </ActionMenuItem>
+          <Divider />
+          <ActionMenuItem icon={<DeleteIcon fontSize="small" />} onClick={fn()}>
+            Eliminar
+          </ActionMenuItem>
+        </ActionMenu>
+        `
+      }
+    },
+  },
+};
+
+// ── Trigger custom: Button ──────────────────────────────────────────────
+
+export const WithButtonTrigger: Story = {
+  render: () => (
+    <ActionMenu
+      trigger={
+        <Button variant="contained" endIcon={<KeyboardArrowDownIcon />}>
+          Opciones
+        </Button>
+      }
+    >
+      <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+        Editar
+      </ActionMenuItem>
+      <ActionMenuItem icon={<DeleteIcon fontSize="small" />} onClick={fn()}>
+        Eliminar
+      </ActionMenuItem>
+    </ActionMenu>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Puedes pasar cualquier componente clickeable como `trigger`. ActionMenu le inyecta el `onClick` automáticamente vía `cloneElement`.',
+      },
+      source: {
+        code: `
+        <ActionMenu
+          trigger={
+            <Button variant="contained" endIcon={<KeyboardArrowDownIcon />}>
+              Opciones
+            </Button>
+          }
+        >
+          <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+            Editar
+          </ActionMenuItem>
+          <ActionMenuItem icon={<DeleteIcon fontSize="small" />} onClick={fn()}>
+            Eliminar
+          </ActionMenuItem>
+        </ActionMenu>
+        `
+      }
+    },
+  },
+};
+
+// ── Trigger custom: Chip ────────────────────────────────────────────────
+
+export const WithChipTrigger: Story = {
+  render: () => (
+    <ActionMenu trigger={<Chip label="Acciones" clickable color="primary" />}>
+      <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+        Editar
+      </ActionMenuItem>
+      <ActionMenuItem icon={<ShareIcon fontSize="small" />} onClick={fn()}>
+        Compartir
+      </ActionMenuItem>
+    </ActionMenu>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Un Chip también sirve como disparador — útil en dashboards densos.',
+      },
+      source: {
+        code: `
+        <ActionMenu trigger={<Chip label="Acciones" clickable color="primary" />}>
+          <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+            Editar
+          </ActionMenuItem>
+          <ActionMenuItem icon={<ShareIcon fontSize="small" />} onClick={fn()}>
+            Compartir
+          </ActionMenuItem>
+        </ActionMenu>
+        `
+      }
+    },
+  },
+};
+
+// ── Trigger custom: IconButton con otro icono ───────────────────────────
+
+export const WithCustomIconTrigger: Story = {
+  render: () => (
+    <ActionMenu
+      trigger={
+        <IconButton color="primary">
+          <SettingsIcon />
+        </IconButton>
+      }
+    >
+      <ActionMenuItem onClick={fn()}>Preferencias</ActionMenuItem>
+      <ActionMenuItem onClick={fn()}>Notificaciones</ActionMenuItem>
+      <Divider />
+      <ActionMenuItem onClick={fn()}>Cerrar sesión</ActionMenuItem>
+    </ActionMenu>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Si necesitas otro icono distinto al ⋮ default, pásalo como trigger.',
+      },
+      source: {
+        code: `
+        <ActionMenu
+          trigger={
+            <IconButton color="primary">
+              <SettingsIcon />
+            </IconButton>
+          }
+        >
+          <ActionMenuItem onClick={fn()}>Preferencias</ActionMenuItem>
+          <ActionMenuItem onClick={fn()}>Notificaciones</ActionMenuItem>
+          <Divider />
+          <ActionMenuItem onClick={fn()}>Cerrar sesión</ActionMenuItem>
+        </ActionMenu>
+        `
+      }
+    },
+  },
+};
+
+// ── Item deshabilitado ──────────────────────────────────────────────────
+
+export const WithDisabledItem: Story = {
+  render: () => (
+    <ActionMenu>
+      <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+        Editar
+      </ActionMenuItem>
+      <ActionMenuItem
+        icon={<DownloadIcon fontSize="small" />}
+        onClick={fn()}
+        disabled
+      >
+        Descargar (no disponible)
+      </ActionMenuItem>
+      <ActionMenuItem icon={<DeleteIcon fontSize="small" />} onClick={fn()}>
+        Eliminar
+      </ActionMenuItem>
+    </ActionMenu>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cada `ActionMenuItem` acepta `disabled` — hereda todos los props de `MenuItem` de MUI.',
+      },
+      source: {
+        code: `
+        <ActionMenu>
+          <ActionMenuItem icon={<EditIcon fontSize="small" />} onClick={fn()}>
+            Editar
+          </ActionMenuItem>
+          <ActionMenuItem
+            icon={<DownloadIcon fontSize="small" />}
+            onClick={fn()}
+            disabled
+          >
+            Descargar (no disponible)
+          </ActionMenuItem>
+          <ActionMenuItem icon={<DeleteIcon fontSize="small" />} onClick={fn()}>
+            Eliminar
+          </ActionMenuItem>
+        </ActionMenu>
+        `
+      }
+    },
+  },
+};
+
+// ── Menú entero deshabilitado ───────────────────────────────────────────
+
+export const DisabledMenu: Story = {
+  render: () => (
+    <ActionMenu disabled>
+      <ActionMenuItem onClick={fn()}>Editar</ActionMenuItem>
+      <ActionMenuItem onClick={fn()}>Eliminar</ActionMenuItem>
+    </ActionMenu>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pasando `disabled` al `ActionMenu` se deshabilita el trigger completo.',
+      },
+      source: {
+        code: `
+        <ActionMenu disabled>
+          <ActionMenuItem onClick={fn()}>Editar</ActionMenuItem>
+          <ActionMenuItem onClick={fn()}>Eliminar</ActionMenuItem>
+        </ActionMenu>
+        `
+      }
+    },
+  },
+};

package/src/components/ActionMenu/ActionMenu.tsx

@@ -0,0 +1,153 @@
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useState,
+  type ReactElement,
+  type ReactNode,
+  type MouseEvent,
+} from 'react';
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  Tooltip,
+  type MenuItemProps as MuiMenuItemProps,
+} from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import type { SxProps, Theme } from '@mui/material/styles';
+
+export interface ActionMenuProps {
+  /** Items del menú. Normalmente `<ActionMenuItem>` o `<Divider />`. */
+  children: ReactNode;
+  /**
+   * Elemento disparador — cualquier componente clickeable (Button, Chip, IconButton…).
+   * El ActionMenu le inyecta `onClick` automáticamente. Si se omite, se usa un
+   * IconButton de tres puntos por defecto.
+   */
+  trigger?: ReactElement;
+  /** Texto de tooltip sobre el trigger default. Default: "Acciones". */
+  triggerTooltip?: string;
+  /** Anchor origin del menu. Default: { vertical: 'bottom', horizontal: 'right' }. */
+  anchorOrigin?: {
+    vertical: 'top' | 'center' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+  };
+  /** Transform origin del menu. Default: { vertical: 'top', horizontal: 'right' }. */
+  transformOrigin?: {
+    vertical: 'top' | 'center' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+  };
+  /** sx del Menu (Paper interno). */
+  menuSx?: SxProps<Theme>;
+  /** Deshabilita el trigger entero. */
+  disabled?: boolean;
+}
+
+interface ActionMenuContextValue {
+  close: () => void;
+}
+
+const ActionMenuContext = createContext<ActionMenuContextValue | null>(null);
+
+export const ActionMenu: React.FC<ActionMenuProps> = ({
+  children,
+  trigger,
+  triggerTooltip,
+  anchorOrigin = { vertical: 'bottom', horizontal: 'right' },
+  transformOrigin = { vertical: 'top', horizontal: 'right' },
+  menuSx,
+  disabled = false,
+}) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClose = () => setAnchorEl(null);
+
+  // Abre el menú anclándolo al elemento que recibió el click.
+  const openMenu = (event: MouseEvent<HTMLElement>) => {
+    if (disabled) return;
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+
+  // Si el consumer pasó un trigger (ej. <Button>), le inyectamos onClick.
+  // Si no, usamos el IconButton de tres puntos por defecto.
+  const triggerElement = trigger ? (
+    React.cloneElement(trigger as ReactElement<any>, {
+      onClick: openMenu,
+      disabled,
+    })
+  ) : (
+    <Tooltip title={triggerTooltip} arrow>
+      <IconButton
+        size="small"
+        onClick={openMenu}
+        disabled={disabled}
+        aria-label={triggerTooltip}
+      >
+        <MoreVertIcon fontSize="small" />
+      </IconButton>
+    </Tooltip>
+  );
+
+  const paperSx = [
+    { minWidth: 180 },
+    ...(Array.isArray(menuSx) ? menuSx : menuSx ? [menuSx] : []),
+  ] as SxProps<Theme>;
+
+  return (
+    <>
+      {triggerElement}
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={anchorOrigin}
+        transformOrigin={transformOrigin}
+        slotProps={{ paper: { sx: paperSx } }}
+      >
+        <ActionMenuContext.Provider value={{ close: handleClose }}>
+          {children}
+        </ActionMenuContext.Provider>
+      </Menu>
+    </>
+  );
+};
+
+export interface ActionMenuItemProps
+  extends Omit<MuiMenuItemProps, 'children' | 'onClick'> {
+  /** Icono opcional a la izquierda. */
+  icon?: ReactNode;
+  /** Texto (o nodo) del item. */
+  children: ReactNode;
+  /** Handler de click. El menú se cierra automáticamente después. */
+  onClick?: (event: MouseEvent<HTMLLIElement>) => void;
+}
+
+/**
+ * Item del `ActionMenu`. Se cierra automáticamente al hacer click.
+ * Acepta todos los props de `MenuItem` de MUI (disabled, selected, sx, …).
+ */
+export const ActionMenuItem = forwardRef<HTMLLIElement, ActionMenuItemProps>(
+  function ActionMenuItem({ icon, children, onClick, ...rest }, ref) {
+    const ctx = useContext(ActionMenuContext);
+
+    const handleClick = (event: MouseEvent<HTMLLIElement>) => {
+      event.stopPropagation();
+      onClick?.(event);
+      ctx?.close();
+    };
+
+    return (
+      <MenuItem ref={ref} onClick={handleClick} {...rest}>
+        {icon && <ListItemIcon sx={{ minWidth: 32 }}>{icon}</ListItemIcon>}
+        <ListItemText primary={children} />
+      </MenuItem>
+    );
+  },
+);
+
+export default ActionMenu;

package/src/components/ActionMenu/index.ts

@@ -0,0 +1,2 @@
+export { ActionMenu, ActionMenuItem, default } from './ActionMenu';
+export type { ActionMenuProps, ActionMenuItemProps } from './ActionMenu';