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

package/rollup.config.cjs

@@ -1,87 +0,0 @@
-const resolve = require('@rollup/plugin-node-resolve');
-const commonjs = require('@rollup/plugin-commonjs');
-const typescript = require('rollup-plugin-typescript2');
-const peerDepsExternal = require('rollup-plugin-peer-deps-external');
-const postcss = require('rollup-plugin-postcss');
-const terser = require('@rollup/plugin-terser');
-// const alias = require('@rollup/plugin-alias'); // 👈 Ya no necesitamos este plugin
-const { globSync } = require('glob');
-const path = require('path');
-const pkg = require('./package.json');
-const projectRootDir = path.resolve(__dirname);
-
-const componentEntryPoints = globSync('src/components/*/index.ts').reduce((acc, file) => {
-  const componentName = path.basename(path.dirname(file));
-  acc[`components/${componentName}`] = file;
-  return acc;
-}, {});
-
-const mainEntry = {
-  index: 'src/index.ts',
-};
-
-module.exports = {
-  input: {
-    ...mainEntry,
-    ...componentEntryPoints,
-  },
-  output: [
-    {
-      dir: 'dist/esm',
-      format: 'esm',
-      sourcemap: true,
-      preserveModules: true,
-      preserveModulesRoot: 'src',
-      entryFileNames: '[name].js',
-      chunkFileNames: '_chunks/chunk-[hash].js',
-      exports: 'named',
-    },
-    {
-      dir: 'dist/cjs',
-      format: 'cjs',
-      sourcemap: true,
-      preserveModules: true,
-      preserveModulesRoot: 'src',
-      entryFileNames: '[name].cjs',
-      chunkFileNames: '_chunks/chunk-[hash].cjs',
-      exports: 'named',
-    },
-  ],
-  plugins: [
-    peerDepsExternal(),
-    // 👈 Configura el alias dentro del plugin 'resolve'
-    resolve({
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      alias: {
-        entries: [
-          { find: '@soyfri/shared-library', replacement: path.resolve(projectRootDir, 'src') }
-        ]
-      }
-    }),
-    commonjs(),
-    typescript({
-      tsconfig: './tsconfig.json',
-      useTsconfigDeclarationDir: true,
-    }),
-    postcss({
-      config: {
-        path: './postcss.config.js',
-      },
-      extensions: ['.css'],
-      minimize: true,
-      extract: true,
-    }),
-    terser(),
-  ],
-  external: [
-    'react',
-    'react-dom',
-    /@mui\/.*/,
-    /@emotion\/.*/,
-    'dayjs',
-    'react-hook-form',
-    'tailwindcss',
-    'autoprefixer',
-    'postcss',
-  ],
-};

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

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

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

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