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

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

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

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

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