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

package/src/components/Avatar/Avatar.tsx

@@ -1,6 +1,13 @@
-import { Avatar as MuiAvatar, Tooltip } from '@mui/material';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import React, { useState } from 'react';
+import {
+  Avatar as MuiAvatar,
+  Box,
+  Tooltip,
+  Typography,
+  type SxProps,
+  type Theme,
+} from '@mui/material';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
 export interface AvatarItem {
   text?: string;
@@ -10,27 +17,59 @@ export interface AvatarItem {
   backgroundColor?: string;
 }
 
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | number;
+
 export interface AvatarProps {
   type?: string;
   items: AvatarItem[];
   displayedAvatars?: number;
-  size?: 'sm' | 'xl';
-  trustUrls?: boolean;
+  size?: AvatarSize;
   showText?: boolean;
   showTooltip?: boolean;
+  /**
+   * sx aplicado al contenedor raíz.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * sx aplicado a cada MuiAvatar individual (se mergea sobre los defaults).
+   */
+  avatarSx?: SxProps<Theme>;
+  className?: string;
+  /**
+   * Overlap (px) entre avatares cuando hay varios. Default depende del tamaño.
+   */
+  overlap?: number;
 }
 
-const sizes = {
-  sm: {
-    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem' },
-    icon: { width: 42, height: 42, marginTop: '.5rem', fontSize: 42 },
-    badge: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem', fontSize: 16 },
-  },
-  xl: {
-    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: '0' },
-    icon: { width: 126, height: 126, marginTop: '0', fontSize: 126 },
-    badge: { width: 105, height: 105, borderWidth: 10, marginTop: '0', fontSize: 64 },
-  },
+// Escala alineada con la escala de MUI (sm=32, md=40, lg=56, xl=96) con borde
+// proporcional para el efecto stacked.
+const sizeMap: Record<
+  Exclude<AvatarSize, number>,
+  { px: number; border: number; font: number; overlap: number }
+> = {
+  sm: { px: 32, border: 2, font: 14, overlap: 8 },
+  md: { px: 40, border: 2, font: 16, overlap: 10 },
+  lg: { px: 56, border: 3, font: 22, overlap: 14 },
+  xl: { px: 96, border: 4, font: 36, overlap: 20 },
+};
+
+const resolveSize = (size: AvatarSize) => {
+  if (typeof size === 'number') {
+    return {
+      px: size,
+      border: Math.max(2, Math.round(size * 0.05)),
+      font: Math.round(size * 0.4),
+      overlap: Math.round(size * 0.25),
+    };
+  }
+  return sizeMap[size];
+};
+
+const mergeSx = (base: SxProps<Theme>, extra?: SxProps<Theme>): SxProps<Theme> => {
+  if (!extra) return base;
+  const baseArr = Array.isArray(base) ? base : [base];
+  const extraArr = Array.isArray(extra) ? extra : [extra];
+  return [...baseArr, ...extraArr] as SxProps<Theme>;
 };
 
 export const Avatar: React.FC<AvatarProps> = ({
@@ -38,106 +77,130 @@ export const Avatar: React.FC<AvatarProps> = ({
   type,
   displayedAvatars = 4,
   size = 'sm',
-  trustUrls = false,
   showText = true,
   showTooltip = false,
+  sx,
+  avatarSx,
+  className,
+  overlap,
 }) => {
   const [errorIndex, setErrorIndex] = useState<Set<number>>(new Set());
 
   const handleImageError = (index: number) => {
-    setErrorIndex((prev) => new Set(prev).add(index));
+    setErrorIndex((prev) => {
+      const next = new Set(prev);
+      next.add(index);
+      return next;
+    });
   };
 
-  return (
-    <div data-testid="avatar-container" className="flex items-center leading-2 h-full w-full">
-      {items.slice(0, displayedAvatars).map((item, i) => {
-        const commonStyle = {
-          zIndex: displayedAvatars - i,
-          marginLeft: i > 0 ? -22 : 0,
-        };
-
-        const style = sizes[size];
-
-        const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;
-
-        const showFallbackIcon = (!item.imageUrl && !item.badge) || (errorIndex.has(i) && !item.badge);
-        const showBadge = (item.badge && !item.imageUrl) || (item.badge && errorIndex.has(i));
-
-        const content = (
-          <span key={i} data-testid="avatar" style={commonStyle}>
-            {item.imageUrl && !errorIndex.has(i) ? (
-              <img
-                data-testid="image"
-                alt={item.text || 'User avatar'}
-                src={imgSrc}
-                onError={() => handleImageError(i)}
-                style={{
-                  ...style.avatar,
-                  color: item.color || '#667688',
-                  border: `${style.avatar.borderWidth}px solid white`,
-                  borderRadius: '9999px',
-                  marginTop: style.avatar.marginTop,
-                }}
-              />
-            ) : showFallbackIcon ? (
-              <AccountCircleIcon
-                data-testid="icon"
-                aria-label={item.text}
-                sx={{
-                  ...style.icon,
-                  fontSize: style.icon.fontSize,
-                  marginTop: style.icon.marginTop,
-                  borderRadius: '9999px',
-                  backgroundColor: '#fff',
-                  color: item.color || '#667688',
-                }}
-              />
-            ) : null}
-
-            {showBadge && (
-              <span
-                data-testid="badge"
-                aria-label={item.text}
-                style={{
-                  ...style.badge,
-                  display: 'inline-block',
-                  backgroundColor: item.backgroundColor || '#c8d5e9',
-                  color: item.color || '#667688',
-                  fontWeight: 700,
-                  textAlign: 'center',
-                  borderRadius: '9999px',
-                  border: `${style.badge.borderWidth}px solid white`,
-                  lineHeight: style.badge.height,
-                  fontSize: style.badge.fontSize,
-                  marginTop: style.badge.marginTop,
-                  marginBottom: style.badge.marginTop,
-                }}
-              >
-                {item.badge}
-              </span>
-            )}
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  const s = resolveSize(size);
+  const effectiveOverlap = overlap ?? s.overlap;
+  const visibleItems = items.slice(0, displayedAvatars);
+
+  const baseAvatarSx: SxProps<Theme> = {
+    width: s.px,
+    height: s.px,
+    fontSize: s.font,
+    fontWeight: 700,
+    border: (theme) => `${s.border}px solid ${theme.palette.background.paper}`,
+    boxSizing: 'content-box',
+  };
+
+  const renderSingleAvatar = (item: AvatarItem, i: number) => {
+    const hasImage = !!item.imageUrl && !errorIndex.has(i);
+    const showBadgeFallback = !!item.badge;
+
+    // Defaults tirando al theme; item.color / item.backgroundColor tienen prioridad.
+    const itemSx: SxProps<Theme> = {
+      bgcolor: item.backgroundColor ?? 'action.selected',
+      color: item.color ?? 'text.secondary',
+      // Stacking manual: margen negativo al segundo avatar en adelante.
+      ...(i > 0 && { marginLeft: `-${effectiveOverlap}px` }),
+      zIndex: visibleItems.length - i,
+    };
+
+    const finalSx = mergeSx(mergeSx(baseAvatarSx, itemSx), avatarSx);
+
+    const avatarEl = (
+      <MuiAvatar
+        data-testid="avatar"
+        alt={item.text || 'User avatar'}
+        src={hasImage ? item.imageUrl : undefined}
+        imgProps={{
+          'data-testid': 'image',
+          onError: () => handleImageError(i),
+        } as React.ImgHTMLAttributes<HTMLImageElement>}
+        sx={finalSx}
+      >
+        {!hasImage && showBadgeFallback ? (
+          <span data-testid="badge" aria-label={item.text}>
+            {item.badge}
           </span>
-        );
-
-        return showTooltip && item.text ? (
-          <Tooltip key={i} title={item.text}>
-            {content}
-          </Tooltip>
-        ) : (
-          content
-        );
-      })}
-
-      {showText && (
-        <span data-testid="text" className="ml-2 text-xs font-normal">
+        ) : !hasImage ? (
+          <AccountCircleIcon
+            data-testid="icon"
+            aria-label={item.text}
+            sx={{ width: '100%', height: '100%' }}
+          />
+        ) : null}
+      </MuiAvatar>
+    );
+
+    if (showTooltip && item.text) {
+      return (
+        <Tooltip key={i} title={item.text}>
+          {avatarEl}
+        </Tooltip>
+      );
+    }
+    return <React.Fragment key={i}>{avatarEl}</React.Fragment>;
+  };
+
+  return (
+    <Box
+      data-testid="avatar-container"
+      className={className}
+      sx={mergeSx(
+        {
+          display: 'flex',
+          alignItems: 'center',
+          lineHeight: 1,
+          width: 'fit-content',
+        },
+        sx,
+      )}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        {visibleItems.map((item, i) => renderSingleAvatar(item, i))}
+      </Box>
+
+      {showText && items[0]?.text && (
+        <Typography
+          data-testid="text"
+          variant="caption"
+          sx={{
+            ml: 1,
+            fontSize: '0.75rem',
+            fontWeight: 400,
+            color: 'text.primary',
+          }}
+        >
           {type && items.length === 1 && (
-            <span data-testid="type">{type}: </span>
+            <Box component="span" data-testid="type" sx={{ mr: 0.5 }}>
+              {type}:
+            </Box>
           )}
-          {items[0].text} {items.length > 2 && `+${items.length - 1}`}
-        </span>
+          {items[0].text}
+          {items.length > 1 && ` +${items.length - 1}`}
+        </Typography>
       )}
-    </div>
+    </Box>
   );
 };
 
-export default Avatar;
+export default Avatar;

package/src/components/Card/Card.stories.tsx

@@ -1,32 +1,221 @@
-import { DefaultCardDefinition } from "./Card.definition";
-import Card from "./Card";
-import type { Meta, StoryObj } from "@storybook/react";
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box, Button, Chip, Stack, Typography } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import PersonIcon from '@mui/icons-material/Person';
+
+import { Card } from './Card';
+import { ActionMenu } from '../ActionMenu';
 
 const meta: Meta<typeof Card> = {
-  title: "Components/Card",
+  title: 'Components/Card',
   component: Card,
+  tags: ['autodocs'],
   parameters: {
-    layout: "centered"
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Contenedor semántico con slots `title` / `subtitle` / `actions` / `footer`. Reemplaza el patrón `.card` + `.card-header` + `.card-body` de Metronic con composición declarativa. Backward-compat: si solo se pasa `children`, se comporta como el Card original.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['elevated', 'outlined', 'plain'],
+    },
+    padding: {
+      control: 'select',
+      options: ['none', 'dense', 'normal', 'loose'],
+    },
+    clickable: { control: 'boolean' },
   },
-  tags: ["autodocs"]
 };
 
 export default meta;
-
 type Story = StoryObj<typeof Card>;
 
-export const Default: Story = {
+// ── Stories ──────────────────────────────────────────────────────────────
+
+export const LegacyBodyOnly: Story = {
   args: {
-    children: "Card",
+    children: 'Contenido simple del card — sin header ni footer.',
   },
   parameters: {
     docs: {
       description: {
-        story: "Tarjeta con el texto \"Card\" y el estilo \"default\"."
+        story:
+          'Modo backward-compat: pasando solo `children` el Card se comporta como el original (body con padding, sombra sutil).',
       },
-      source: {
-        code: DefaultCardDefinition.trim()
-      }
-    }
-  }
-};
+    },
+  },
+};
+
+export const WithTitleAndSubtitle: Story = {
+  args: {
+    title: 'Datos del cliente',
+    subtitle: 'Última actualización: hace 2 horas',
+    children: (
+      <Typography variant="body2" color="text.secondary">
+        Aquí va el contenido del card, por ejemplo un formulario o una tabla.
+      </Typography>
+    ),
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    title: 'Afiliación #12458',
+    subtitle: 'Aprobada el 10 abril 2026',
+    actions: (
+      <ActionMenu
+        items={[
+          { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: () => {} },
+          {
+            label: 'Eliminar',
+            icon: <DeleteIcon fontSize="small" />,
+            onClick: () => {},
+            danger: true,
+            dividerBefore: true,
+          },
+        ]}
+      />
+    ),
+    children: (
+      <Stack direction="row" spacing={2} alignItems="center">
+        <PersonIcon color="action" />
+        <Box>
+          <Typography variant="body2" sx={{ fontWeight: 600 }}>
+            Andrea Pineda
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            andrea@soyfri.com
+          </Typography>
+        </Box>
+        <Chip label="Activo" color="success" size="small" sx={{ ml: 'auto' }} />
+      </Stack>
+    ),
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    title: 'Nueva afiliación',
+    children: (
+      <Stack spacing={1}>
+        <Typography variant="body2">
+          Confirma los datos antes de enviar la solicitud.
+        </Typography>
+        <Typography variant="caption" color="text.secondary">
+          Campos marcados con * son obligatorios.
+        </Typography>
+      </Stack>
+    ),
+    footer: (
+      <>
+        <Button variant="outlined" color="secondary">
+          Cancelar
+        </Button>
+        <Button variant="contained">Enviar</Button>
+      </>
+    ),
+  },
+};
+
+export const OutlinedVariant: Story = {
+  args: {
+    variant: 'outlined',
+    title: 'Card outlined',
+    subtitle: 'Sin sombra, solo borde',
+    children: (
+      <Typography variant="body2">
+        Útil cuando el card vive sobre un fondo con elevation mayor, o para
+        evitar stacked shadows en listas densas.
+      </Typography>
+    ),
+  },
+};
+
+export const PlainVariant: Story = {
+  args: {
+    variant: 'plain',
+    title: 'Card plain',
+    subtitle: 'Sin borde ni sombra',
+    children: (
+      <Typography variant="body2">
+        Perfecto para composición interna — por ejemplo, cuando un card va
+        dentro de otro y quieres evitar doble sombra.
+      </Typography>
+    ),
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    clickable: true,
+    title: 'Haz click en este card',
+    subtitle: 'Fíjate en el hover',
+    children: (
+      <Typography variant="body2" color="text.secondary">
+        El cursor cambia y aparece un lift sutil en hover. Se dispara `onClick`.
+      </Typography>
+    ),
+    onClick: () => console.log('card clicked'),
+  },
+};
+
+export const DensePadding: Story = {
+  args: {
+    padding: 'dense',
+    title: 'Card denso',
+    subtitle: 'Padding reducido',
+    children: (
+      <Stack spacing={0.5}>
+        <Typography variant="body2">Línea 1</Typography>
+        <Typography variant="body2">Línea 2</Typography>
+        <Typography variant="body2">Línea 3</Typography>
+      </Stack>
+    ),
+  },
+};
+
+export const CustomHeader: Story = {
+  args: {
+    header: (
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, width: '100%' }}>
+        <Box
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: 2,
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontWeight: 700,
+          }}
+        >
+          42
+        </Box>
+        <Box sx={{ flex: 1 }}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+            Header totalmente custom
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            Tomas control del slot entero
+          </Typography>
+        </Box>
+        <Chip label="v2" size="small" variant="outlined" />
+      </Box>
+    ),
+    children: (
+      <Typography variant="body2">
+        Cuando `header` se usa, los props `title`/`subtitle`/`actions` son
+        ignorados.
+      </Typography>
+    ),
+  },
+};

package/src/components/Card/Card.sx.ts

@@ -0,0 +1,104 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+
+export type CardVariant = 'elevated' | 'outlined' | 'plain';
+export type CardPadding = 'none' | 'dense' | 'normal' | 'loose';
+
+export interface BuildCardSxArgs {
+  variant: CardVariant;
+  padding: CardPadding;
+  clickable: boolean;
+}
+
+const paddingMap: Record<CardPadding, number> = {
+  none: 0,
+  dense: 1.5,
+  normal: 2.5,
+  loose: 4,
+};
+
+/**
+ * Estilo base del Card (root). La props `sx` del consumer se compone encima
+ * junto al preset resuelto (en Card.tsx). Este builder solo se ocupa del
+ * variant + padding, para que siga siendo predecible.
+ */
+export function buildCardSx({
+  variant,
+  padding,
+  clickable,
+}: BuildCardSxArgs): SxProps<Theme> {
+  return (theme) => ({
+    borderRadius: 2,
+    backgroundColor: 'background.paper',
+    boxShadow:
+      variant === 'elevated'
+        ? theme.shadows[1]
+        : 'none',
+    border:
+      variant === 'outlined'
+        ? `1px solid ${theme.palette.divider}`
+        : 'none',
+    transition: theme.transitions.create(
+      ['box-shadow', 'transform', 'border-color'],
+      { duration: theme.transitions.duration.shorter },
+    ),
+    cursor: clickable ? 'pointer' : 'default',
+    ...(clickable && {
+      '&:hover': {
+        boxShadow:
+          variant === 'elevated'
+            ? theme.shadows[3]
+            : variant === 'outlined'
+              ? theme.shadows[1]
+              : 'none',
+        transform: variant !== 'plain' ? 'translateY(-1px)' : 'none',
+      },
+      '&:active': {
+        transform: 'translateY(0)',
+      },
+    }),
+    // Body padding (cuando no hay header/footer envolventes). Para el caso
+    // compuesto los slots manejan su propio padding, dejamos el root en 0.
+    p: paddingMap[padding],
+  });
+}
+
+export function buildCardHeaderSx(): SxProps<Theme> {
+  return (theme) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 1.5,
+    px: 2.5,
+    py: 1.75,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    '& .card-header-text': {
+      flex: 1,
+      minWidth: 0,
+    },
+    '& .card-header-actions': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 0.5,
+      flexShrink: 0,
+    },
+  });
+}
+
+export function buildCardBodySx(padding: CardPadding): SxProps<Theme> {
+  return {
+    px: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,
+    py: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,
+  };
+}
+
+export function buildCardFooterSx(): SxProps<Theme> {
+  return (theme) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 1,
+    px: 2.5,
+    py: 1.5,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.action.hover,
+  });
+}