@imj_media/ui 1.2.18 → 1.2.20

package/CHANGELOG.md

@@ -5,6 +5,109 @@ 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.20] - 2026-01-XX
+
+### Added
+- **Title - Prop `center` para Alineación Centrada**: Nueva prop `center` que permite centrar horizontalmente el contenido del título
+  - Nueva prop `center?: boolean` en `TitleProps` para controlar la alineación del contenido
+  - Cuando `center` es `true`, se aplica `ui-justify-center` al contenedor flex
+  - Útil para secciones destacadas, páginas de bienvenida o títulos que requieren alineación centrada
+  - Nueva story `Centered` en Storybook que demuestra diferentes variantes de títulos centrados (con y sin icono, con iconos duotone)
+  - Actualización de `argTypes` en Storybook para incluir control de la prop `center`
+- **Title - Historias Completas de Storybook**: Sistema completo de historias para el componente Title
+  - Nueva historia `Default` que muestra el título básico sin icono
+  - Nueva historia `WithIcon` que demuestra títulos con diferentes iconos Font Awesome Duotone
+  - Nueva historia `WithDuotoneSemanticColors` que muestra iconos duotone con colores semánticos (success, warning, danger, info, brand)
+  - Nueva historia `WithDuotoneColorCombinations` que demuestra combinaciones creativas de colores del sistema de diseño
+  - Nueva historia `WithDifferentOpacities` que muestra variaciones de opacidad para efectos visuales
+  - Nueva historia `WithCustomClassName` que ejemplifica el uso de clases CSS personalizadas
+  - Nueva historia `RealWorldExamples` que muestra casos de uso prácticos (Dashboard, Gestión de Archivos, Calendario, etc.)
+  - Todas las historias incluyen descripciones, ejemplos visuales y código de ejemplo usando `StoryBox`
+  - Documentación completa con `tags: ['autodocs']` para generación automática de documentación
+
+### Fixed
+- **Title - Corrección de Clases de Tipografía**: Corrección del uso de clases de tipografía para headings
+  - Reemplazada la clase compuesta `ui-leading-tracking-h3` (que no funcionaba correctamente) por clases individuales de Tailwind
+  - Ahora usa `ui-leading-heading-h3` y `ui-tracking-heading-h3` que están correctamente definidas en la configuración de Tailwind
+  - Las clases individuales se generan desde las configuraciones de `lineHeight` y `letterSpacing` en `tailwind.config.js`
+  - Mejora la consistencia y funcionalidad de los estilos tipográficos del componente
+
+## [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