@soyfri/shared-library 2.0.0-beta.3 → 2.0.0-beta.4

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

@@ -0,0 +1,230 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import {
+  Box,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
+  Chip,
+} 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 MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
+import { ActionMenu } from './ActionMenu';
+
+const meta: Meta<typeof ActionMenu> = {
+  title: 'Components/ActionMenu',
+  component: ActionMenu,
+  tags: ['autodocs'],
+  parameters: {
+    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. Reemplaza los patrones `<Dropdown>` de react-bootstrap.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionMenu>;
+
+// ── Stories ──────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
+      { label: 'Duplicar', icon: <ContentCopyIcon fontSize="small" />, onClick: fn() },
+      { label: 'Ver detalle', icon: <VisibilityIcon fontSize="small" />, onClick: fn() },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Menú básico con trigger de 3 puntos (icono por defecto). Cada item tiene label + icono + onClick.',
+      },
+    },
+  },
+};
+
+export const WithDangerItem: Story = {
+  args: {
+    items: [
+      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
+      { label: 'Duplicar', icon: <ContentCopyIcon fontSize="small" />, onClick: fn() },
+      {
+        label: 'Eliminar',
+        icon: <DeleteIcon fontSize="small" />,
+        onClick: fn(),
+        danger: true,
+        dividerBefore: true,
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Item final marcado como `danger` (pintado en rojo) con `dividerBefore: true` para separarlo visualmente del resto. Patrón típico para acciones destructivas.',
+      },
+    },
+  },
+};
+
+export const WithDisabledItems: Story = {
+  args: {
+    items: [
+      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
+      {
+        label: 'Exportar',
+        icon: <DownloadIcon fontSize="small" />,
+        onClick: fn(),
+        disabled: true,
+      },
+      {
+        label: 'Compartir',
+        icon: <ShareIcon fontSize="small" />,
+        onClick: fn(),
+        disabled: true,
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Items deshabilitados condicionalmente — útil cuando una acción no aplica al estado actual del row (ej. exportar un recurso que aún no se procesó).',
+      },
+    },
+  },
+};
+
+export const CustomTrigger: Story = {
+  args: {
+    items: [
+      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
+      { label: 'Duplicar', icon: <ContentCopyIcon fontSize="small" />, onClick: fn() },
+      { label: 'Eliminar', icon: <DeleteIcon fontSize="small" />, onClick: fn(), danger: true },
+    ],
+    trigger: (
+      <Button variant="outlined" startIcon={<MoreHorizIcon />}>
+        Más
+      </Button>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'El trigger por defecto es un IconButton de 3 puntos, pero podés pasar cualquier nodo (botón, chip, icono custom). El `onClick` del menú se inyecta automáticamente al trigger clonado.',
+      },
+    },
+  },
+};
+
+export const InsideTableCell: Story = {
+  render: () => {
+    const rows = [
+      { id: 1, name: 'Comercio A', status: 'Activo' },
+      { id: 2, name: 'Comercio B', status: 'Pendiente' },
+      { id: 3, name: 'Comercio C', status: 'Suspendido' },
+    ];
+
+    return (
+      <Paper sx={{ maxWidth: 720 }}>
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>ID</TableCell>
+              <TableCell>Comercio</TableCell>
+              <TableCell>Estado</TableCell>
+              <TableCell align="right">Acciones</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow key={row.id} hover>
+                <TableCell>{row.id}</TableCell>
+                <TableCell>{row.name}</TableCell>
+                <TableCell>
+                  <Chip
+                    label={row.status}
+                    size="small"
+                    color={
+                      row.status === 'Activo'
+                        ? 'success'
+                        : row.status === 'Pendiente'
+                          ? 'warning'
+                          : 'error'
+                    }
+                  />
+                </TableCell>
+                <TableCell align="right">
+                  <ActionMenu
+                    items={[
+                      {
+                        label: 'Ver detalle',
+                        icon: <VisibilityIcon fontSize="small" />,
+                        onClick: fn(() => console.log('Ver', row.id)),
+                      },
+                      {
+                        label: 'Editar',
+                        icon: <EditIcon fontSize="small" />,
+                        onClick: fn(() => console.log('Editar', row.id)),
+                      },
+                      {
+                        label: 'Eliminar',
+                        icon: <DeleteIcon fontSize="small" />,
+                        onClick: fn(() => console.log('Eliminar', row.id)),
+                        danger: true,
+                        dividerBefore: true,
+                      },
+                    ]}
+                  />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Paper>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Caso de uso principal: un `ActionMenu` por cada fila de una tabla. Reemplaza exactamente el patrón `DropDownActions` + `react-bootstrap Dropdown` usado hoy en Afiliaciones.',
+      },
+    },
+  },
+};
+
+export const DisabledTrigger: Story = {
+  args: {
+    disabled: true,
+    items: [
+      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
+      { label: 'Eliminar', icon: <DeleteIcon fontSize="small" />, onClick: fn(), danger: true },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Cuando el row o la acción no tiene permisos, se puede deshabilitar el trigger entero pasando `disabled`.',
+      },
+    },
+  },
+};

package/src/components/ActionMenu/ActionMenu.tsx

@@ -0,0 +1,174 @@
+import React, { useState, type ReactNode, type MouseEvent } from 'react';
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  Divider,
+  Tooltip,
+} from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import type { SxProps, Theme } from '@mui/material/styles';
+
+export interface ActionMenuItem {
+  /** Key única para React. Si no se provee, se usa el label. */
+  key?: string;
+  /** Texto del item. */
+  label: ReactNode;
+  /** Icono opcional a la izquierda. */
+  icon?: ReactNode;
+  /** Handler de click. Recibe el evento del MenuItem. */
+  onClick?: (event: MouseEvent<HTMLLIElement>) => void;
+  /** Deshabilita el item. */
+  disabled?: boolean;
+  /** Marca el item como destructivo (pinta color error). */
+  danger?: boolean;
+  /** Inserta un `<Divider />` ANTES de este item. */
+  dividerBefore?: boolean;
+}
+
+export interface ActionMenuProps {
+  /** Lista de items del menú. */
+  items: ActionMenuItem[];
+  /**
+   * Elemento trigger. Si no se provee, se renderiza un IconButton con icono
+   * de tres puntos (MoreVertIcon) — el patrón típico de celda de tabla.
+   */
+  trigger?: ReactNode;
+  /** 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;
+  className?: string;
+}
+
+/**
+ * Menú de acciones compacto, pensado para celdas de tabla y cabeceras.
+ * Reemplaza los patrones `<Dropdown>` de react-bootstrap.
+ *
+ * ```tsx
+ * <ActionMenu
+ *   items={[
+ *     { label: 'Editar', icon: <EditIcon />, onClick: handleEdit },
+ *     { label: 'Duplicar', icon: <CopyIcon />, onClick: handleDup },
+ *     { label: 'Eliminar', icon: <TrashIcon />, onClick: handleDel, danger: true, dividerBefore: true },
+ *   ]}
+ * />
+ * ```
+ */
+export function ActionMenu({
+  items,
+  trigger,
+  triggerTooltip = 'Acciones',
+  anchorOrigin = { vertical: 'bottom', horizontal: 'right' },
+  transformOrigin = { vertical: 'top', horizontal: 'right' },
+  menuSx,
+  disabled = false,
+  className,
+}: ActionMenuProps) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const handleOpen = (event: MouseEvent<HTMLElement>) => {
+    if (disabled) return;
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => setAnchorEl(null);
+
+  const handleItemClick = (
+    event: MouseEvent<HTMLLIElement>,
+    item: ActionMenuItem,
+  ) => {
+    event.stopPropagation();
+    item.onClick?.(event);
+    handleClose();
+  };
+
+  const triggerElement = trigger ? (
+    React.isValidElement(trigger) ? (
+      React.cloneElement(trigger as React.ReactElement<any>, {
+        onClick: handleOpen,
+        disabled,
+      })
+    ) : (
+      <span onClick={handleOpen}>{trigger}</span>
+    )
+  ) : (
+    <Tooltip title={triggerTooltip} arrow>
+      <span>
+        <IconButton
+          size="small"
+          onClick={handleOpen}
+          disabled={disabled}
+          aria-label={triggerTooltip}
+        >
+          <MoreVertIcon fontSize="small" />
+        </IconButton>
+      </span>
+    </Tooltip>
+  );
+
+  return (
+    <span className={className}>
+      {triggerElement}
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={anchorOrigin}
+        transformOrigin={transformOrigin}
+        slotProps={{ paper: { sx: { minWidth: 180, ...(menuSx as any) } } }}
+      >
+        {items.map((item, idx) => {
+          const key = item.key ?? `${String(item.label)}-${idx}`;
+          const node = (
+            <MenuItem
+              key={key}
+              disabled={item.disabled}
+              onClick={(event) => handleItemClick(event, item)}
+              sx={(theme) => ({
+                color: item.danger ? theme.palette.error.main : 'inherit',
+                '& .MuiListItemIcon-root': {
+                  color: item.danger
+                    ? theme.palette.error.main
+                    : 'inherit',
+                  minWidth: 32,
+                },
+              })}
+            >
+              {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
+              <ListItemText primary={item.label} />
+            </MenuItem>
+          );
+
+          if (item.dividerBefore && idx > 0) {
+            return (
+              <React.Fragment key={`${key}-frag`}>
+                <Divider />
+                {node}
+              </React.Fragment>
+            );
+          }
+          return node;
+        })}
+      </Menu>
+    </span>
+  );
+}
+
+export default ActionMenu;

package/src/components/ActionMenu/index.ts

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

package/src/components/AppBar/AppBar.stories.tsx

@@ -0,0 +1,272 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box, Typography, Button, IconButton, Tooltip } from '@mui/material';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import PersonIcon from '@mui/icons-material/Person';
+import SettingsIcon from '@mui/icons-material/Settings';
+import LogoutIcon from '@mui/icons-material/Logout';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+
+import { AppBar } from './AppBar';
+import { AppBarBrand } from './AppBarBrand';
+import { AppBarMenuToggle } from './AppBarMenuToggle';
+import { AppBarUserMenu } from './AppBarUserMenu';
+
+const meta: Meta<typeof AppBar> = {
+  title: 'Components/AppBar',
+  component: AppBar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'AppBar (header superior) pensado como shell compositivo. El consumer arma su contenido con los sub-componentes `AppBarBrand`, `AppBarMenuToggle` y `AppBarUserMenu`, además de cualquier acción custom. Reemplaza el header de Metronic.',
+      },
+    },
+  },
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['fixed', 'sticky', 'static', 'absolute', 'relative'],
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary', 'transparent', 'inherit'],
+    },
+    elevation: { control: { type: 'number', min: 0, max: 24, step: 1 } },
+    height: { control: { type: 'number', min: 48, max: 96, step: 4 } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppBar>;
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+
+const SampleLogo = () => (
+  <Box
+    sx={{
+      width: 32,
+      height: 32,
+      borderRadius: 1,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'primary.main',
+      color: 'primary.contrastText',
+      fontWeight: 700,
+      fontSize: 14,
+    }}
+  >
+    F
+  </Box>
+);
+
+const SampleBody = () => (
+  <Box sx={{ p: 3 }}>
+    <Typography variant="h5" gutterBottom>
+      Contenido de la página
+    </Typography>
+    <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+      Este bloque sólo demuestra el layout bajo el AppBar.
+    </Typography>
+    {Array.from({ length: 20 }).map((_, idx) => (
+      <Typography key={idx} variant="body2" sx={{ mb: 1 }}>
+        Línea {idx + 1} — contenido de ejemplo para scroll sticky.
+      </Typography>
+    ))}
+  </Box>
+);
+
+const userMenuItems = [
+  {
+    label: 'Mi perfil',
+    icon: <PersonIcon fontSize="small" />,
+    onClick: () => console.log('profile'),
+  },
+  {
+    label: 'Configuración',
+    icon: <SettingsIcon fontSize="small" />,
+    onClick: () => console.log('settings'),
+  },
+  {
+    label: 'Cerrar sesión',
+    icon: <LogoutIcon fontSize="small" />,
+    onClick: () => console.log('logout'),
+    danger: true,
+    dividerBefore: true,
+  },
+];
+
+// ── Stories ──────────────────────────────────────────────────────────────
+
+export const BasicHeader: Story = {
+  args: {
+    position: 'sticky',
+    color: 'default',
+    elevation: 1,
+    height: 64,
+  },
+  render: (args) => (
+    <>
+      <AppBar {...args}>
+        <AppBarBrand
+          logo={<SampleLogo />}
+          title="Afiliaciones"
+          subtitle="Panel administrativo"
+        />
+      </AppBar>
+      <SampleBody />
+    </>
+  ),
+};
+
+export const WithMenuToggle: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <AppBar
+          {...args}
+          onMenuToggle={() => setOpen((value) => !value)}
+          menuOpen={open}
+        >
+          <AppBarMenuToggle />
+          <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" />
+        </AppBar>
+        <Box sx={{ p: 3 }}>
+          <Typography variant="body2">
+            Drawer {open ? 'abierto' : 'cerrado'} — el icono cambia según el
+            estado. Click en el botón hamburguesa para alternar.
+          </Typography>
+        </Box>
+      </>
+    );
+  },
+};
+
+export const WithUserMenu: Story = {
+  render: (args) => (
+    <>
+      <AppBar {...args}>
+        <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" />
+        <Box sx={{ flex: 1 }} />
+        <AppBarUserMenu
+          user={{
+            name: 'Andrea Pineda',
+            email: 'andrea@soyfri.com',
+          }}
+          items={userMenuItems}
+        />
+      </AppBar>
+      <SampleBody />
+    </>
+  ),
+};
+
+export const CompleteDashboardHeader: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true);
+    return (
+      <>
+        <AppBar
+          {...args}
+          onMenuToggle={() => setOpen((value) => !value)}
+          menuOpen={open}
+        >
+          <AppBarMenuToggle />
+          <AppBarBrand
+            logo={<SampleLogo />}
+            title="Afiliaciones"
+            subtitle="Panel administrativo"
+            onClick={() => console.log('go home')}
+          />
+          <Box sx={{ flex: 1 }} />
+          <Tooltip title="Notificaciones" arrow>
+            <IconButton color="inherit">
+              <NotificationsIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Ayuda" arrow>
+            <IconButton color="inherit">
+              <HelpOutlineIcon />
+            </IconButton>
+          </Tooltip>
+          <AppBarUserMenu
+            user={{
+              name: 'Andrea Pineda',
+              email: 'andrea@soyfri.com',
+            }}
+            items={userMenuItems}
+          />
+        </AppBar>
+        <SampleBody />
+      </>
+    );
+  },
+};
+
+export const TransparentVariant: Story = {
+  args: {
+    color: 'transparent',
+    elevation: 0,
+  },
+  render: (args) => (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        background:
+          'linear-gradient(135deg, #f0f4ff 0%, #e6f7ff 50%, #fff5f5 100%)',
+      }}
+    >
+      <AppBar {...args}>
+        <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" />
+        <Box sx={{ flex: 1 }} />
+        <Button variant="contained" color="primary" size="small">
+          Iniciar sesión
+        </Button>
+      </AppBar>
+      <Box sx={{ p: 3 }}>
+        <Typography variant="h5">Landing page transparente</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Sin sombra, con borde sutil — útil para headers sobre hero sections.
+        </Typography>
+      </Box>
+    </Box>
+  ),
+};
+
+export const PrimaryColorWithMenu: Story = {
+  args: {
+    color: 'primary',
+  },
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <AppBar
+          {...args}
+          onMenuToggle={() => setOpen((value) => !value)}
+          menuOpen={open}
+        >
+          <AppBarMenuToggle />
+          <DashboardIcon sx={{ mr: 1 }} />
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>
+            Dashboard
+          </Typography>
+          <Box sx={{ flex: 1 }} />
+          <AppBarUserMenu
+            user={{
+              name: 'Andrea Pineda',
+              email: 'andrea@soyfri.com',
+            }}
+            items={userMenuItems}
+          />
+        </AppBar>
+        <SampleBody />
+      </>
+    );
+  },
+};