@soyfri/shared-library 2.0.0-beta.16 → 2.0.0-beta.18

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

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Chip as MuiChip, ChipProps as MuiChipProps } 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;

package/src/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip, default } from './Chip';
+export type { ChipProps } from './Chip';

package/src/components/Column/Column.tsx

@@ -0,0 +1,29 @@
+// -----------------------------------------------------------------------------
+// Componente Column: Define la estructura de una columna en la tabla.
+// Este componente NO renderiza nada directamente, solo pasa sus props al componente Table.
+// -----------------------------------------------------------------------------
+// Tipo auxiliar para 'field'.
+// Define si 'field' es una sola clave (keyof T) o un array de claves (Array<keyof T>).
+type FieldName<T> = keyof T | Array<keyof T>;
+
+export interface ColumnProps<T> {
+  name: string; // Nombre a mostrar en el encabezado de la columna
+  field: FieldName<T>; // Define el campo o campos a usar de los datos
+  // La prop 'children' ahora recibe 'Partial<T>'.
+  // Esto permite a TypeScript inferir los tipos de las propiedades desestructuradas
+  // como 'avatar', 'nombre', etc., basándose en la interfaz genérica 'T' de tu data.
+  width?: string; 
+  children: (fieldData: Partial<T>) => React.ReactNode;
+}
+
+// El componente Column no renderiza nada directamente en el DOM.
+// Su propósito es actuar como un contenedor de configuración para el componente Table.
+export function Column<T>(_props: ColumnProps<T>): React.ReactNode {
+  return null;
+}
+
+// Esto es crucial para que el componente Table pueda identificar a nuestros componentes Column
+// entre sus hijos, utilizando (child.type as any).displayName === 'Column'.
+Column.displayName = 'Column';
+
+export default Column;

package/src/components/Column/index.ts

@@ -0,0 +1,2 @@
+export { default as Column } from './Column'
+export type { ColumnProps } from './Column'

package/src/components/DatePicker/DatePicker.definitions.ts

@@ -0,0 +1,228 @@
+// DatePicker.definitions.ts
+
+export const BasicDatePickerDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const BasicDatePickerExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Seleccionar Fecha"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DatePickerWithMinMaxDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerWithMinMaxExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs('2023-06-15'));
+  const minDate = dayjs('2023-06-01');
+  const maxDate = dayjs('2023-06-30');
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha en Junio"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+      <Typography variant="caption" color="text.secondary">
+        (Rango: \${minDate.format('YYYY-MM-DD')} a \${maxDate.format('YYYY-MM-DD')})
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
+  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
+
+  const handleStartDateChange = (date) => {
+    setStartDate(date);
+    if (date && endDate && date.isAfter(endDate)) {
+      setEndDate(date);
+    }
+  };
+
+  const handleEndDateChange = (date) => {
+    setEndDate(date);
+    if (date && startDate && date.isBefore(startDate)) {
+      setStartDate(date);
+    }
+  };
+
+  return (
+    <Box sx={{ display: 'flex', gap: 3, flexDirection: 'column' }}>
+      <DatePicker
+        label="Fecha de Inicio"
+        selectedDate={startDate}
+        onDateChange={handleStartDateChange}
+        maxDate={endDate || undefined}
+      />
+      <DatePicker
+        label="Fecha de Fin"
+        selectedDate={endDate}
+        onDateChange={handleEndDateChange}
+        minDate={startDate || undefined}
+      />
+      <Typography>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DatePickerWithErrorDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerWithErrorExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs('2023-01-01'));
+  // Intentamos establecer una fecha fuera de un rango muy restringido para forzar un error
+  const minDate = dayjs('2023-01-05');
+  const maxDate = dayjs('2023-01-10');
+
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha (con error de rango)"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+      <Typography variant="caption" color="error">
+        (Intenta seleccionar una fecha fuera de \${minDate.format('YYYY-MM-DD')} - \${maxDate.format('YYYY-MM-DD')})
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DatePickerSmallSizeDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerSmallSizeExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs());
+  return (
+    <Box sx={{ width: 250 }}>
+      <DatePicker
+        label="Fecha (Pequeño)"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        slotProps={{ textField: { size: 'small' } }} // Prop para hacer el TextField pequeño
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DatePickerDisabledDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerDisabledExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha (Deshabilitado)"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        disabled
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DatePickerReadOnlyDefinition = `
+    import React, { useState } from 'react';
+    import { DatePicker } from '@soyfri/shared-library/DatePicker';
+    import dayjs from 'dayjs';
+    import { Box, Typography } from '@mui/material';
+
+    export const DatePickerReadOnlyDefinition = () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2024-07-24'));
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker
+            label="Fecha (Solo Lectura)"
+            selectedDate={selectedDate}
+            onDateChange={() => {}} // No permite cambios
+            readOnly
+          />
+          <Typography sx={{ mt: 2 }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </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 '';
+  }
+};