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

package/src/components/Card/Card.tsx

@@ -1,44 +1,200 @@
-import { CardActions, Card as MuiCard } from "@mui/material";
-import type { CardProps } from "@mui/material/Card";
-import { CardContent as MuiCardContent } from "@mui/material";
+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';
 
-type PickCardProps = Pick<CardProps, 'children' | 'raised' | 'sx' | 'className' | 'sx'>;
-
-export interface MyCardProps extends PickCardProps {
-    children?: React.ReactNode;
-    raised?: boolean;
-    className?: string
-    onClick?: () => void;
-    onBlur?: () => void;
-    "data-testid"?: string;
-    sx?: object;
+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;
 }
 
-export const Card: React.FC<MyCardProps> = ({
-    children,
-    raised,
-    sx,
-    className,
-    onClick,
-    onBlur,
-    "data-testid": dataTestId
-}) => {
-    return (
-        <MuiCard
-            raised={raised}
-            sx={sx}
-            className={className}
-            data-testid={dataTestId}
-            onClick={onClick}
-            onBlur={onBlur}
+/**
+ * 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;
 
-            {children}
+  const presetSx = resolvePreset('Card', preset, theme);
 
-        </MuiCard>
+  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;
+export default Card;

package/src/components/Card/index.ts

@@ -1 +1,9 @@
-export { default as Card } from './Card';
+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/DatePicker/DatePicker.definitions.ts

@@ -202,4 +202,27 @@ export const DatePickerReadOnlyDefinition = `
         </Box>
       );
 };
-`;
+`;
+export const DatePickerEmptyWithMaskDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import { Dayjs } from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerEmptyWithMaskExample = () => {
+  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        format="DD/MM/YY"
+      />
+      <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
+        Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA).
+      </Typography>
+    </Box>
+  );
+};
+`;

package/src/components/DatePicker/DatePicker.helpers.ts

@@ -0,0 +1,24 @@
+import type { DateValidationError } from '@mui/x-date-pickers/models';
+
+/**
+ * Traduce el código de error del DatePicker de MUI X a un mensaje en español.
+ * Se usa internamente para poblar `helperText` cuando hay error de validación
+ * y el consumer no pasó un mensaje propio.
+ */
+export const getDateValidationMessage = (
+  error: DateValidationError | null,
+): string => {
+  switch (error) {
+    case 'minDate':
+    case 'maxDate':
+      return 'Fecha fuera del rango permitido';
+    case 'invalidDate':
+      return 'Formato de fecha inválido';
+    case 'disableFuture':
+      return 'No se permiten fechas futuras';
+    case 'disablePast':
+      return 'No se permiten fechas pasadas';
+    default:
+      return '';
+  }
+};

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -4,7 +4,6 @@ import React, { useState, useMemo } from 'react';
 import {
   Box,
   Typography,
-  TextField,
 } from '@mui/material';
 
 // Importar las definiciones de las historias
@@ -16,7 +15,7 @@ import {
     DatePickerSmallSizeDefinition,
     DatePickerDisabledDefinition,
     DatePickerReadOnlyDefinition,
-    
+    DatePickerEmptyWithMaskDefinition,
   } from './DatePicker.definitions'; // Mantener el nombre del archivo de definiciones como está
 import DatePicker from './DatePicker';
 import dayjs, { Dayjs } from 'dayjs';
@@ -81,6 +80,34 @@ const meta: Meta<typeof DatePicker> = { // Renombrado a DatePicker
     }
   };
   
+  export const DatePickerEmptyWithMask: Story = {
+    render: () => {
+      const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker
+            label="Fecha"
+            selectedDate={selectedDate}
+            onDateChange={setSelectedDate}
+            format="DD/MM/YY"
+          />
+          <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
+            Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA).
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story:
+            "DatePicker vacío. Al no haber valor seleccionado, cada sección del campo muestra su placeholder según el `format` (por ejemplo `DD/MM/AA`), funcionando como máscara visual."
+        },
+        source: { code: DatePickerEmptyWithMaskDefinition.trim() }
+      }
+    }
+  };
+
   export const DatePickerWithMinMax: Story = {
     render: () => {
       const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2023-06-15'));

package/src/components/DatePicker/DatePicker.sx.ts

@@ -0,0 +1,33 @@
+import type { SxProps, Theme } from '@mui/material';
+
+import { buildFormFieldSx } from '../_shared/formField.sx';
+import { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';
+import type { LabelPosition } from './DatePicker';
+
+/**
+ * Builder de sx para el DatePicker. Reutiliza `buildFormFieldSx` con
+ * `includePickersApi: true` para cubrir tanto la API clásica (MuiInputBase /
+ * MuiOutlinedInput) como la nueva (MuiPickersInputBase / MuiPickersOutlinedInput)
+ * del DatePicker de MUI X v8.
+ */
+export const buildDatePickerSx = (
+  borderRadius: number | string,
+  labelPosition: LabelPosition,
+): SxProps<Theme> =>
+  buildFormFieldSx({
+    borderRadius,
+    labelPosition,
+    includePickersApi: true,
+    extraOutsideSx: {
+      '& .MuiInputBase-input': {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+        paddingBottom: FIELD_INPUT_PADDING_Y,
+      },
+
+      // Secciones editables del PickersTextField (DD/MM/YYYY en API nueva).
+      '& .MuiPickersInputBase-sectionsContainer': {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+        paddingBottom: FIELD_INPUT_PADDING_Y,
+      },
+    },
+  });