@imj_media/ui 1.2.17 → 1.2.19

package/CHANGELOG.md

@@ -5,6 +5,158 @@ Todos los cambios notables de este proyecto serán documentados en este archivo.
 El formato está basado en [Keep a Changelog](https://keepachangelog.com/es-ES/1.0.0/),
 y este proyecto adhiere a [Semantic Versioning](https://semver.org/lang/es/).
 
+## [1.2.19] - 2026-01-XX
+
+### Added
+- **Text - Sistema de Tipografía Completo**: Nuevo sistema de componentes de tipografía para estilos consistentes
+  - Nuevo componente `Text` principal que actúa como wrapper para diferentes tipos de texto
+  - Nuevos componentes individuales: `Title`, `Body`, `Caption`, `Code`, y `CustomText`
+  - Soporte para tipos: `'title'`, `'body'`, `'caption'`, `'code'`
+  - Soporte para tamaños específicos por tipo (h1, h2, h3 para Title; xs, sm, md, lg para Body, etc.)
+  - Soporte para tamaños base: `'2xs'`, `'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'`, `'5xl'`
+  - Soporte para pesos de fuente: `'regular'`, `'medium'`, `'semibold'`, `'bold'`
+  - Nueva prop `textColor` para colores del sistema de diseño: `'primary'`, `'secondary'`, `'tertiary'`
+  - Prop `color` para colores CSS personalizados
+  - Prop `as` para especificar el elemento HTML a renderizar
+  - Clases de Tailwind configuradas para todos los tamaños y variantes
+  - Stories completas que demuestran todos los componentes y variantes
+  - Exportación de tipos: `TextProps`, `TextType`, `TextSize`, `TextWeight`, `TitleSize`, `BodySize`, etc.
+- **Tailwind - Clases de Tamaño Base para Tipografía**: Agregadas nuevas clases de tamaño base en la configuración de Tailwind
+  - Nuevas clases de tamaño: `ui-text-2xs`, `ui-text-xs`, `ui-text-sm`, `ui-text-md`, `ui-text-lg`, `ui-text-xl`, `ui-text-2xl`, `ui-text-3xl`, `ui-text-4xl`, `ui-text-5xl`
+  - Patrón regex para coincidencia de clases de tamaño base
+  - Integración con el sistema de tipografía para mayor flexibilidad
+- **Modal.Image - Soporte para Aspect Ratio**: Nueva prop `aspect` para controlar la proporción del contenedor de la imagen
+  - Nueva prop `aspect` con valores: `'square'` (1:1), `'video'` (16:9), `'portrait'` (3:4), `'landscape'` (4:3), `'none'` (sin aspect ratio)
+  - El aspect ratio solo se aplica cuando `thumbnailSize="auto"` y `aspect !== 'none'`
+  - Mapeo automático de valores a clases de Tailwind CSS (`ui-aspect-square`, `ui-aspect-video`, etc.)
+  - Nueva story `DifferentAspectRatios` que demuestra todos los valores disponibles
+- **Modal.Image - Animaciones Suaves**: Agregadas animaciones de entrada y salida para la imagen expandida
+  - Animación `fadeInScale` para la apertura (fade-in con ligero scale)
+  - Animación `fadeOutScale` para el cierre (fade-out con ligero scale)
+  - Animación `fadeIn` para el overlay de blur
+  - Animación `fadeOut` para el overlay de blur al cerrar
+  - Duración de animaciones: 300ms con easing `ease-in-out`
+  - El botón de cerrar aparece con un delay de 0.1s para mejor UX
+- **Modal.Image - Blur Overlay con Delay**: Agregado overlay con efecto blur que aparece después de abrir la imagen
+  - Overlay con `backdrop-blur-md` y `bg-black/20` que cubre solo el ModalBody
+  - El blur aparece 200ms después de que se abre la imagen (configurable)
+  - El blur desaparece suavemente cuando se cierra la imagen
+- **Modal.Image - Soporte para Tabs**: La imagen expandida se cierra automáticamente al cambiar de tab
+  - Integración con el sistema de tabs del Modal
+  - Detección automática de cambios de tab mediante el contexto del Modal
+  - Cierre suave con animación cuando se detecta un cambio de tab
+- **Modal - Rastreo de Tab Actual**: Agregado soporte para rastrear el tab actual en el contexto
+  - Nueva propiedad `currentTab` en `ModalContextType` que expone el tab activo actual
+  - El `ModalProvider` mantiene el estado del tab actual y lo actualiza automáticamente
+  - Wrapper `handleChangeTab` que actualiza el estado interno y llama al `onChangeTab` original
+- **Icon - Nuevos Iconos de Font Awesome**: Agregados iconos de expandir/contraer de Font Awesome
+  - Agregado `faUpRightAndDownLeftFromCenter` (expandir) y `faDownLeftAndUpRightToCenter` (contraer) a la configuración
+  - Mapeo agregado: `OutlineUpRightAndDownLeftFromCenterIcon` y `OutlineDownLeftAndUpRightToCenterIcon`
+  - Mapeo agregado: `FillUpRightAndDownLeftFromCenterIcon` y `FillDownLeftAndUpRightToCenterIcon`
+  - `Modal.Image` ahora usa estos iconos directamente desde Font Awesome
+- **Stories - Nuevas Historias para Modal.Image**: Agregadas nuevas historias de Storybook
+  - `DifferentAspectRatios`: Demuestra todos los valores de aspect ratio disponibles
+  - `ModalWithTabs`: Ejemplo de modal con tabs que muestra cómo la imagen se cierra al cambiar de tab
+  - Actualización de `DifferentModalSizes` para incluir ejemplo con aspect ratio
+
+### Changed
+- **Modal.Image - Mejoras en Posicionamiento**: Mejoras en el posicionamiento de la imagen expandida
+  - La imagen expandida ahora se posiciona correctamente relativo al ModalBody usando `position: relative`
+  - El botón de cerrar está posicionado en la misma posición relativa que el botón de abrir (esquina superior derecha)
+  - Mejoras en el centrado de la imagen dentro del contenedor expandido
+- **Modal.Image - Comportamiento del Thumbnail**: Cambios en el comportamiento del thumbnail según el tamaño
+  - Para `thumbnailSize="auto"`: Sin efecto de scale en hover, botón en esquina superior derecha
+  - Para otros tamaños (sm, md, lg, xl): Mantiene efecto de scale en hover, botón centrado con overlay
+  - Mejoras en la visibilidad del botón de expansión
+- **Switch - Soporte para Valores Controlados**: Mejoras en el componente Switch para responder a cambios externos
+  - Agregado `useEffect` para actualizar el valor seleccionado cuando cambia `defaultValue`
+  - El Switch ahora se actualiza correctamente cuando el valor cambia desde fuera del componente
+  - Mejora la integración con el sistema de tabs del Modal
+
+### Fixed
+- **Title - Elemento HTML por Defecto**: Corrección del elemento HTML por defecto para tamaños base
+  - El componente `Title` ahora usa `h3` como elemento por defecto en lugar de `h1` para tamaños base
+  - Mejora la semántica HTML y la jerarquía de títulos
+- **Modal.Image - Corrección de Tipos TypeScript**: Corrección en validación de tipos para `Math.abs()`
+  - Agregada validación explícita de tipos antes de usar `Math.abs()` para evitar errores de TypeScript
+  - Verificación de que los valores no sean `null` antes de realizar cálculos matemáticos
+
+## [1.2.18] - 2026-01-13
+
+### Added
+- **Avatar - Componente AvatarStatus**: Nuevo componente para indicadores de estado en avatares
+  - Nuevo componente `AvatarStatus` con soporte para indicadores de color e iconos personalizados
+  - Tipos de status: `'color'` (punto de color) y `'icon'` (icono personalizado)
+  - Colores disponibles: `brand`, `success`, `warning`, `danger`, `disabled`
+  - Tamaños disponibles: `sm`, `md`, `lg` con mapeo automático según el tamaño del avatar
+  - Integración de status en todos los tipos de avatar: `IconAvatar`, `LetterAvatar`, y `PeopleAvatar`
+  - Nueva prop `status` en `BaseAvatarProps` que acepta `AvatarStatusProps`
+  - Mapeo automático de tamaño de avatar a tamaño de status (xxs/xs/sm → sm, md/lg → md, xl → lg)
+  - Nueva story `AvatarConStatus` que demuestra el uso del status con diferentes configuraciones
+  - Exportación de tipos: `AvatarStatusProps`, `AvatarStatusType`, `AvatarStatusColor`, `AvatarStatusSize`
+- **Alert - Soporte para Avatar**: Nueva funcionalidad para mostrar avatar en lugar del icono por defecto
+  - Nueva prop `avatar` en `IAlert` que acepta una URL de imagen para mostrar como avatar
+  - `AlertHeader` ahora muestra un `Avatar` con `type="people"` cuando se proporciona la prop `avatar`
+  - El avatar se muestra con tamaño `xs` y se posiciona correctamente en el layout del header
+  - Si no se proporciona `avatar`, se muestra el icono por defecto según el color del alert
+  - Actualización de tipos `AlertHeaderProps` para incluir la prop `avatar`
+  - Mejora en el layout del header para acomodar tanto avatar como icono de manera consistente
+- **Message - Sistema de Notificaciones con Agrupación**: Nuevo sistema completo de notificaciones agrupadas
+  - Nuevo servicio `NotificationService` que agrupa notificaciones por color (`brand` | `neutral`)
+  - Solo se muestra una notificación por grupo con un contador que indica cuántas hay acumuladas
+  - Timer compartido que se reinicia automáticamente con cada nueva notificación del mismo tipo
+  - Nuevo componente `NotificationItem` para renderizar notificaciones agrupadas
+  - Nuevo componente `NotificationPositions` para posicionamiento de notificaciones
+  - Hook `useNotification` para suscribirse a cambios de notificaciones y obtener grupos activos
+  - API unificada `notify` que combina funcionalidad de toast y notification
+  - Componentes `Notifier` (solo notificaciones) y `Messaging` (toasts + notificaciones) para renderizado
+  - Contador de mensajes que solo aparece cuando hay más de 1 notificación acumulada
+  - Soporte completo para avatar en notificaciones (igual que en Alert)
+  - Soporte para botones de acción (primario y secundario) en notificaciones
+  - Stories completas que demuestran el comportamiento de agrupación, contador, timer, y comparación con toasts
+  - Actualización de tipos para `NotificationGroup`, `NotificationConfig`, `NotificationColor`, etc.
+  - Métodos `notify.brand()` y `notify.neutral()` para mostrar notificaciones
+  - Método `notification.dismissGroup(color)` para cerrar todas las notificaciones de un tipo
+  - Configuración global con `notify.configure()` para duración, posición, tamaño, etc.
+
+### Changed
+- **IconFont - Ajuste menor**: Corrección menor en el componente IconFont
+- **Button - Nuevos colores ghost y soft**: Agregados dos nuevos colores de botón con estilos completos
+  - Color `ghost`: Botón sin fondo, solo cambios de color de texto en estados hover y active
+  - Color `soft`: Botón con fondo blanco (`ui-bg-fill`), texto secondary, con estados hover y active completos
+  - Soporte completo para ambos colores en todas las variantes (solid, icon, emoji)
+  - Colores de iconos ajustados: `brand` para ghost, `default` para soft, `current` para link
+  - Nueva story `Colors` que demuestra todos los colores disponibles
+  - Actualización de tipos `ButtonColors` para incluir `'ghost'` y `'soft'`
+  - Agregados colores de borde tertiary en tailwind.config.js para soportar estados pressed
+- **Button - Mejoras en estilos**: Ajustes en estilos de botones existentes
+  - Botón `tertiary`: Ahora incluye hover con borde (`hover:ui-border-default`)
+  - Botón `primary`: Corrección en borde para forzar estilo con `!ui-border-brand`
+  - Estilos de botón `soft` ahora funcionan correctamente incluso cuando `clickable=false`
+- **Switch - Refactorización y mejoras visuales**: Mejoras en el componente Switch
+  - Cambio de `InnerButton` a `Button` para mejor consistencia con el resto de componentes
+  - Uso de color `soft` cuando la opción está seleccionada (fondo blanco visible)
+  - Uso de color `tertiary` cuando la opción no está seleccionada (fondo transparente)
+  - Agregada prop `active` para indicar visualmente el estado seleccionado
+  - Simplificación del código eliminando props innecesarias (theme, borderable, showShadow)
+
+### Fixed
+- **Alert - Soporte completo para color 'brand'**: Agregado soporte completo para el color `brand` en `useAlertStyles`
+  - Agregado `brand` a `typeClasses` con estilos para todas las variantes (contained, outlined, accent, minimal)
+  - Agregado `brand` a `colorMap` en `getProgressBarColor` con color `ui-bg-brand`
+  - Agregado `brand` a `iconMap` en `getIconForType` usando `faCircleInfo` como icono por defecto
+- **Types - Corrección de nombre de tipo**: Corregido nombre de tipo `AlertAnimation` a `AnimationAlert` en imports y referencias
+  - Actualizado import en `message.ts` para usar el nombre correcto `AnimationAlert`
+  - Actualizadas todas las referencias de `AlertAnimation` a `AnimationAlert` en `BaseMessageProps` y `BaseMessageOptions`
+- **Toast - Corrección de nombre de propiedad**: Corregido nombre de propiedad `maxToasts` a `maxMessages` para consistencia con tipos
+  - Actualizado `toast.config.ts` para usar `maxMessages` en lugar de `maxToasts`
+  - Actualizado `useToast.ts` para usar `toastConfig.maxMessages`
+  - Actualizado `toast.stories.tsx` para usar `maxMessages` en ejemplos
+- **Notification - Corrección de compatibilidad de tipos**: Corregida incompatibilidad entre `NotificationSize` y `SizeAlert`
+  - Agregado mapeo de `'lg'` a `'md'` cuando `NotificationSize` es `'lg'` para compatibilidad con `SizeAlert`
+  - Agregado import de `SizeAlert` en `NotificationService.ts`
+  - Aplicado cast de tipo para asegurar compatibilidad con `NotificationProps.size`
+
 ## [1.2.17] - 2026-01-08
 
 ### Added