@soyfri/shared-library 2.0.0-beta.21 → 2.0.0-beta.23

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 } 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

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

package/src/components/Column/Column.tsx

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

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

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

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

@@ -1,24 +0,0 @@
-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 '';
-  }
-};