@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.11

package/src/components/Card/Card.tsx

@@ -1,200 +0,0 @@
-import React, { type ReactNode } from 'react';
-import { Box, Card as MuiCard, Typography, useTheme } from '@mui/material';
-import type { SxProps, Theme } from '@mui/material/styles';
-
-import { resolvePreset } from '../_shared/resolvePreset';
-import {
-  buildCardSx,
-  buildCardHeaderSx,
-  buildCardBodySx,
-  buildCardFooterSx,
-  type CardVariant,
-  type CardPadding,
-} from './Card.sx';
-
-export interface CardProps {
-  /** Contenido principal. */
-  children?: ReactNode;
-  /**
-   * Título del Card. Si se provee, renderiza un header con separador. Puede
-   * ser string o cualquier ReactNode para permitir iconos / chips.
-   */
-  title?: ReactNode;
-  /** Texto secundario debajo del título. */
-  subtitle?: ReactNode;
-  /**
-   * Acciones del header (botones, ActionMenu, etc). Se renderizan alineadas
-   * a la derecha.
-   */
-  actions?: ReactNode;
-  /**
-   * Header totalmente custom. Si se provee, ignora `title`/`subtitle`/`actions`
-   * y toma control del slot entero.
-   */
-  header?: ReactNode;
-  /** Footer custom (botones, mensajes, etc). */
-  footer?: ReactNode;
-  /**
-   * Variante visual.
-   * - `elevated` (default): sombra sutil.
-   * - `outlined`: borde sin sombra.
-   * - `plain`: sin borde ni sombra, útil para layouts con nesting.
-   */
-  variant?: CardVariant;
-  /**
-   * Densidad del padding interno. Solo aplica al body cuando hay header/footer;
-   * cuando no hay slots, aplica al root.
-   */
-  padding?: CardPadding;
-  /** Si `true`, muestra feedback de hover/active (cursor, sombra). */
-  clickable?: boolean;
-  /**
-   * Preset registrado en `theme.styles.Card`. `"default"` usa el estilo
-   * built-in sin preset extra.
-   */
-  preset?: string;
-  /**
-   * MUI `raised` legacy — mantenido por backward-compat. Equivale a
-   * `variant="elevated"` con sombra mayor. Ignora `variant` si se usa.
-   */
-  raised?: boolean;
-  /** sx del root. Se compone sobre el base + preset. */
-  sx?: SxProps<Theme>;
-  /** sx custom del slot body. */
-  bodySx?: SxProps<Theme>;
-  /** sx custom del slot header. */
-  headerSx?: SxProps<Theme>;
-  /** sx custom del slot footer. */
-  footerSx?: SxProps<Theme>;
-  onClick?: () => void;
-  onBlur?: () => void;
-  className?: string;
-  'data-testid'?: string;
-}
-
-/**
- * Card semántico con slots `title` / `subtitle` / `actions` / `footer`.
- * Reemplaza el patrón `<div class="card"><div class="card-header">...</div>...`
- * de Metronic/Bootstrap con composición declarativa.
- *
- * Backward-compat: si solo se pasa `children`, se comporta como el Card
- * original (MUI Card + body padding).
- *
- * ```tsx
- * <Card
- *   title="Datos del cliente"
- *   subtitle="Última actualización: hace 2h"
- *   actions={<ActionMenu items={menuItems} />}
- *   footer={<Button>Guardar</Button>}
- * >
- *   <CustomerForm />
- * </Card>
- * ```
- */
-export function Card({
-  children,
-  title,
-  subtitle,
-  actions,
-  header,
-  footer,
-  variant,
-  padding = 'normal',
-  clickable = false,
-  preset,
-  raised,
-  sx,
-  bodySx,
-  headerSx,
-  footerSx,
-  onClick,
-  onBlur,
-  className,
-  'data-testid': dataTestId,
-}: CardProps) {
-  const theme = useTheme();
-
-  // Back-compat: `raised` legacy => elevated. Si no vienen ni `raised` ni
-  // `variant`, default a 'elevated'.
-  const resolvedVariant: CardVariant = raised
-    ? 'elevated'
-    : (variant ?? 'elevated');
-
-  const hasHeader = Boolean(header || title || subtitle || actions);
-  const hasFooter = Boolean(footer);
-  const isCompound = hasHeader || hasFooter;
-
-  // Cuando hay slots, el root no lleva padding (lo llevan los slots).
-  const rootPadding: CardPadding = isCompound ? 'none' : padding;
-
-  const presetSx = resolvePreset('Card', preset, theme);
-
-  const rootSx: SxProps<Theme> = [
-    buildCardSx({
-      variant: resolvedVariant,
-      padding: rootPadding,
-      clickable: clickable || Boolean(onClick),
-    }),
-    ...(presetSx ? [presetSx] : []),
-    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-  ];
-
-  const renderHeader = () => {
-    if (header) return <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>{header}</Box>;
-    if (!title && !subtitle && !actions) return null;
-    return (
-      <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>
-        <Box className="card-header-text">
-          {title && (
-            <Typography
-              variant="subtitle1"
-              component="div"
-              sx={{ fontWeight: 600, lineHeight: 1.3 }}
-              noWrap
-            >
-              {title}
-            </Typography>
-          )}
-          {subtitle && (
-            <Typography
-              variant="caption"
-              color="text.secondary"
-              component="div"
-              noWrap
-            >
-              {subtitle}
-            </Typography>
-          )}
-        </Box>
-        {actions && <Box className="card-header-actions">{actions}</Box>}
-      </Box>
-    );
-  };
-
-  return (
-    <MuiCard
-      sx={rootSx}
-      className={className}
-      data-testid={dataTestId}
-      onClick={onClick}
-      onBlur={onBlur}
-      elevation={0} // sombra la maneja buildCardSx
-    >
-      {renderHeader()}
-      {isCompound ? (
-        <Box sx={[buildCardBodySx(padding), ...(Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : [])]}>
-          {children}
-        </Box>
-      ) : (
-        children
-      )}
-      {hasFooter && (
-        <Box sx={[buildCardFooterSx(), ...(Array.isArray(footerSx) ? footerSx : footerSx ? [footerSx] : [])]}>
-          {footer}
-        </Box>
-      )}
-    </MuiCard>
-  );
-}
-
-export default Card;

package/src/components/Card/index.ts

@@ -1,9 +0,0 @@
-export { Card, default } from './Card';
-export type { CardProps } from './Card';
-export type { CardVariant, CardPadding } from './Card.sx';
-export {
-  buildCardSx,
-  buildCardHeaderSx,
-  buildCardBodySx,
-  buildCardFooterSx,
-} from './Card.sx';

package/src/components/Chip/Chip.definitions.ts

@@ -1,167 +0,0 @@
-// Chip.definitions.ts
-
-export const BasicChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const BasicChipExample = () => {
-  return (
-    <Chip label="Etiqueta Básica" />
-  );
-};
-`;
-
-export const ClickableChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ClickableChipExample = () => {
-  const handleClick = () => {
-    alert('Chip clickeado!');
-  };
-  return (
-    <Chip label="Clickeable" onClick={handleClick} />
-  );
-};
-`;
-
-export const DeletableChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-
-export const DeletableChipExample = () => {
-  const handleDelete = () => {
-    alert('Chip borrado!');
-  };
-  return (
-    <Chip label="Borrable" onDelete={handleDelete} deleteIcon={<DeleteIcon />} />
-  );
-};
-`;
-
-export const ChipWithAvatarDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Avatar, Box, Typography } from '@mui/material';
-
-export const ChipWithAvatarExample = () => {
-  return (
-    <Chip
-      label="Con Avatar"
-      avatar={<Avatar alt="Avatar" src="https://placehold.co/40x40/FF7F50/FFFFFF?text=A" />}
-    />
-  );
-};
-`;
-
-export const ChipWithIconDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-import FaceIcon from '@mui/icons-material/Face';
-
-export const ChipWithIconExample = () => {
-  return (
-    <Chip label="Con Icono" icon={<FaceIcon />} />
-  );
-};
-`;
-
-export const DisabledChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const DisabledChipExample = () => {
-  return (
-    <Box sx={{ display: 'flex', gap: 2 }}>
-      <Chip label="Deshabilitado" disabled />
-      <Chip label="Deshabilitado Borrable" onDelete={() => {}} disabled />
-    </Box>
-  );
-};
-`;
-
-export const ChipVariantsDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ChipVariantsExample = () => {
-  return (
-    <Box sx={{ display: 'flex', gap: 2 }}>
-      <Chip label="Filled (Default)" />
-      <Chip label="Outlined" variant="outlined" />
-    </Box>
-  );
-};
-`;
-
-export const ChipColorsDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ChipColorsExample = () => {
-  return (
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
-      <Chip label="Default" />
-      <Chip label="Primary" color="primary" />
-      <Chip label="Secondary" color="secondary" />
-      <Chip label="Error" color="error" />
-      <Chip label="Info" color="info" />
-      <Chip label="Success" color="success" />
-      <Chip label="Warning" color="warning" />
-      <Chip label="Primary Outlined" color="primary" variant="outlined" />
-      <Chip label="Success Outlined" color="success" variant="outlined" />
-    </Box>
-  );
-};
-`;
-
-export const ChipSizesDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ChipSizesExample = () => {
-  return (
-    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-      <Chip label="Pequeño" size="small" />
-      <Chip label="Mediano (Default)" size="medium" />
-    </Box>
-  );
-};
-`;
-
-export const CustomContentChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography, Avatar } from '@mui/material';
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
-
-export const CustomContentChipExample = () => {
-  const handleClick = () => alert('Perfil visto!');
-  const handleDelete = () => alert('Perfil eliminado!');
-
-  return (
-    <Chip
-      avatar={<Avatar src="https://placehold.co/40x40/87CEEB/FFFFFF?text=PR" />}
-      label={
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          <CheckCircleOutlineIcon sx={{ fontSize: 16 }} />
-          <Typography variant="body2" sx={{ fontWeight: 'bold' }}>Perfil Completo</Typography>
-        </Box>
-      }
-      onDelete={handleDelete}
-      onClick={handleClick}
-      color="info"
-      variant="outlined"
-    />
-  );
-};
-`;

package/src/components/Chip/Chip.stories.tsx

@@ -1,265 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import {
-  Box,
-  Typography,
-  Avatar, // Necesario para la historia con avatar
-  Chip as MuiChip, // Renombrado para evitar conflicto con nuestro componente Chip
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete'; // Icono para deletable chip
-import FaceIcon from '@mui/icons-material/Face'; // Icono para chip con icono
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; // Icono para custom content
-
-// Importa el componente Chip
-import { Chip } from './Chip';
-
-// Importa las definiciones de las historias
-import {
-  BasicChipDefinition,
-  ClickableChipDefinition,
-  DeletableChipDefinition,
-  ChipWithAvatarDefinition,
-  ChipWithIconDefinition,
-  DisabledChipDefinition,
-  ChipVariantsDefinition,
-  ChipColorsDefinition,
-  ChipSizesDefinition,
-  CustomContentChipDefinition,
-} from './Chip.definitions';
-
-// =============================================================================
-// Definición de las meta-propiedades para Storybook
-// =============================================================================
-const meta: Meta<typeof Chip> = {
-  title: 'Components/Chip',
-  component: Chip,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Un componente `Chip` reutilizable de Material UI que muestra una pequeña pieza de información. Soporta varias variantes visuales, avatares, iconos y acciones.',
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'El contenido principal del chip. Puede ser un string o JSX.' },
-    onClick: { action: 'clicked', description: 'Función de callback que se dispara al hacer click en el chip.' },
-    onDelete: { action: 'deleted', description: 'Función de callback que se dispara al hacer click en el botón de borrar del chip. Si se provee, muestra un botón de borrar.' },
-    avatar: { control: false, description: 'Un componente `Avatar` a mostrar al inicio del chip.' },
-    icon: { control: false, description: 'Un componente `Icon` a mostrar al inicio del chip (alternativa al avatar).' },
-    disabled: { control: 'boolean', description: 'Si es verdadero, el chip estará deshabilitado y no interactuable.' },
-    variant: {
-      control: 'radio',
-      options: ['filled', 'outlined'],
-      description: 'La variante visual del chip.',
-      defaultValue: 'filled',
-    },
-    color: {
-      control: 'select',
-      options: ['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning'],
-      description: 'El color predefinido del chip.',
-      defaultValue: 'default',
-    },
-    size: {
-      control: 'radio',
-      options: ['small', 'medium'],
-      description: 'El tamaño del chip.',
-      defaultValue: 'medium',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Chip>;
-
-// =============================================================================
-// Historias
-// =============================================================================
-
-export const BasicChip: Story = {
-  render: () => {
-    return <Chip label="Etiqueta Básica" />;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip simple con solo una etiqueta de texto."
-      },
-      source: { code: BasicChipDefinition.trim() }
-    }
-  }
-};
-
-export const ClickableChip: Story = {
-  render: () => {
-    const handleClick = () => {
-      alert('Chip clickeado!');
-    };
-    return <Chip label="Clickeable" onClick={handleClick} />;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip que puede ser clickeado y dispara un evento `onClick`."
-      },
-      source: { code: ClickableChipDefinition.trim() }
-    }
-  }
-};
-
-export const DeletableChip: Story = {
-  render: () => {
-    const handleDelete = () => {
-      alert('Chip borrado!');
-    };
-    return <Chip label="Borrable" onDelete={handleDelete} deleteIcon={<DeleteIcon />} />;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip que incluye un botón de borrar (`DeleteIcon` por defecto o personalizado) y dispara un evento `onDelete`."
-      },
-      source: { code: DeletableChipDefinition.trim() }
-    }
-  }
-};
-
-export const ChipWithAvatar: Story = {
-  render: () => {
-    return (
-      <Chip
-        label="Con Avatar"
-        avatar={<Avatar alt="Avatar" src="https://placehold.co/40x40/FF7F50/FFFFFF?text=A" />}
-      />
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip que muestra un `Avatar` al inicio, útil para representar usuarios o entidades."
-      },
-      source: { code: ChipWithAvatarDefinition.trim() }
-    }
-  }
-};
-
-export const ChipWithIcon: Story = {
-  render: () => {
-    return <Chip label="Con Icono" icon={<FaceIcon />} />;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip que muestra un `Icon` de Material UI al inicio, como alternativa a un avatar."
-      },
-      source: { code: ChipWithIconDefinition.trim() }
-    }
-  }
-};
-
-export const DisabledChip: Story = {
-  render: () => {
-    return (
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <Chip label="Deshabilitado" disabled />
-        <Chip label="Deshabilitado Borrable" onDelete={() => alert('No se puede borrar!')} disabled />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Chips que están deshabilitados, impidiendo cualquier interacción o acción."
-      },
-      source: { code: DisabledChipDefinition.trim() }
-    }
-  }
-};
-
-export const ChipVariants: Story = {
-  render: () => {
-    return (
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <Chip label="Filled (Default)" />
-        <Chip label="Outlined" variant="outlined" />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Demuestra las variantes `filled` (por defecto) y `outlined` del chip."
-      },
-    source: { code: ChipVariantsDefinition.trim() }
-  }
-};
-
-export const ChipColors: Story = {
-  render: () => {
-    return (
-      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
-        <Chip label="Default" />
-        <Chip label="Primary" color="primary" />
-        <Chip label="Secondary" color="secondary" />
-        <Chip label="Error" color="error" />
-        <Chip label="Info" color="info" />
-        <Chip label="Success" color="success" />
-        <Chip label="Warning" color="warning" />
-        <MuiChip label="Primary Outlined" color="primary" variant="outlined" /> {/* Usando MuiChip para demostrar combinado */}
-        <MuiChip label="Success Outlined" color="success" variant="outlined" /> {/* Usando MuiChip para demostrar combinado */}
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Ejemplos de chips con diferentes colores predefinidos de Material UI, tanto en variante `filled` como `outlined`."
-      },
-    source: { code: ChipColorsDefinition.trim() }
-  }
-};
-
-export const ChipSizes: Story = {
-  render: () => {
-    return (
-      <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-        <Chip label="Pequeño" size="small" />
-        <Chip label="Mediano (Default)" size="medium" />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Demuestra los diferentes tamaños disponibles para el chip: `small` y `medium`."
-      },
-    source: { code: ChipSizesDefinition.trim() }
-  }
-};
-
-export const CustomContentChip: Story = {
-  render: () => {
-    const handleClick = () => alert('Perfil visto!');
-    const handleDelete = () => alert('Perfil eliminado!');
-
-    return (
-      <Chip
-        avatar={<Avatar src="https://placehold.co/40x40/87CEEB/FFFFFF?text=PR" />}
-        label={
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-            <CheckCircleOutlineIcon sx={{ fontSize: 16 }} />
-            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>Perfil Completo</Typography>
-          </Box>
-        }
-        onDelete={handleDelete}
-        onClick={handleClick}
-        color="info"
-        variant="outlined"
-      />
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Un chip con contenido personalizado en su etiqueta, combinando iconos y tipografía avanzada."
-      },
-    source: { code: CustomContentChipDefinition.trim() }
-  }
-};

package/src/components/Chip/Chip.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Chip as MuiChip, ChipProps as MuiChipProps, Avatar } from '@mui/material';
-
-// Define las props para el componente Chip personalizado
-// Omitimos algunas props de MuiChipProps que redefiniremos para mayor claridad
-export interface ChipProps extends Omit<MuiChipProps, 'onClick' | 'onDelete' | 'avatar' | 'icon' | 'label' | 'variant' | 'color' | 'size'> {
-  // Contenido principal del chip
-  label: React.ReactNode;
-  // Handler para el evento click del chip
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  // Handler para el evento delete del chip (muestra un botón de borrar)
-  onDelete?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  // Elemento Avatar a mostrar al inicio del chip
-  avatar?: React.ReactElement;
-  // Icono a mostrar al inicio del chip (alternativa a avatar)
-  icon?: React.ReactElement;
-  // Si el chip está deshabilitado
-  disabled?: boolean;
-  // Variante visual del chip
-  variant?: 'filled' | 'outlined';
-  // Color del chip
-  color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-  // Tamaño del chip
-  size?: 'small' | 'medium';
-}
-
-/**
- * Componente Chip personalizado de Material UI.
- * Proporciona una interfaz simplificada para el componente Chip de Material UI,
- * permitiendo una fácil personalización de etiquetas, avatares, iconos y acciones.
- */
-export const Chip: React.FC<ChipProps> = ({
-  label,
-  onClick,
-  onDelete,
-  avatar,
-  icon,
-  disabled = false,
-  variant = 'filled', // Default variant
-  color = 'default',  // Default color
-  size = 'medium',    // Default size
-  ...rest // Permite pasar otras props de MuiChipProps (ej. sx, className)
-}) => {
-  return (
-    <MuiChip
-      label={label}
-      onClick={onClick}
-      onDelete={onDelete}
-      avatar={avatar}
-      icon={icon}
-      disabled={disabled}
-      variant={variant}
-      color={color}
-      size={size}
-      clickable={!!onClick} // Habilita el estilo clickable si se proporciona onClick
-      {...rest}
-    />
-  );
-};
-
-export default Chip;