@imj_media/ui 1.2.13 → 1.2.15

package/CHANGELOG.md

@@ -5,6 +5,113 @@ 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.15] - 2026-01-07
+
+### Added
+- **Table - Control Externo de Edición**: Nueva prop para controlar el modo edición desde fuera del componente
+  - Nueva prop `editingRowIds` en `TableProps` que acepta un array de IDs de filas para activar modo edición
+  - Permite controlar múltiples filas en modo edición simultáneamente desde fuera del componente
+  - Útil para acciones en lote o control centralizado del estado de edición
+  - Cuando se proporciona `editingRowIds`, el estado interno de edición se sincroniza con los IDs externos
+  - Los botones de edición/guardar en la columna de acciones reflejan correctamente el estado controlado externamente
+  - Modificado el hook `useTableEdit` para aceptar IDs externos y sincronizar el estado interno
+  - Nueva story `ControlExternoEdicion` que demuestra cómo usar esta funcionalidad con botones externos de UI
+- **ProgressBar - Prop `countdown` para Cuenta Regresiva**: Nueva funcionalidad integrada en el componente
+  - Nueva prop `countdown` que acepta un número en segundos para activar la animación de cuenta regresiva
+  - La barra anima automáticamente desde el valor de `progress` hasta 0% en el tiempo especificado
+  - Nueva prop `onCountdownComplete` callback que se ejecuta cuando la cuenta regresiva llega a 0
+  - Hook interno `useCountdown` que usa `setInterval` con `performance.now()` para timing preciso (~60fps)
+  - La transición CSS se desactiva automáticamente cuando `countdown` está activo para animación suave
+  - Story "Cuenta Regresiva" actualizada para demostrar el uso de las nuevas props
+  - Ejemplo de uso: `<ProgressBar progress={75} countdown={5} onCountdownComplete={() => alert('¡Listo!')} />`
+- **Alert/Toast - Mejora en Barra de Progreso con Cuenta Regresiva**: Integración con la nueva prop `countdown` del ProgressBar
+  - El componente `Alert` ahora usa la prop `countdown` del ProgressBar para animación suave
+  - Conversión automática de `duration` (ms) a `countdown` (segundos): `countdown={duration / 1000}`
+  - La barra solo se muestra cuando `duration > 0`
+  - El color de la barra coincide automáticamente con el color del alert
+  - `ToastItem` ahora pasa correctamente la prop `duration` al `Alert`
+  - Story "Duración Personalizada" actualizada con duraciones explícitas (2s, 5s, 10s, permanente)
+
+### Changed
+- **Table - Reorganización y Mejora de Stories**: Mejoras significativas en la organización y documentación de las historias de Storybook
+  - Reorganización completa de todas las 29 historias en orden alfabético para facilitar la navegación
+  - Traducción de todos los nombres de historias al español para consistencia con el proyecto
+  - Conversión de todas las historias para usar el componente `StoryBox` con estructura consistente
+  - Adición de ejemplos de código (`StoryBox.Code`) en todas las historias para mejor documentación
+  - Eliminación de propiedades `name` redundantes en favor de `StoryBox.Title`
+  - Corrección de errores de sintaxis JSX en historias que no cerraban correctamente los componentes
+  - Mejora en la consistencia del diseño y distribución de todas las historias
+  - Todas las historias ahora siguen el mismo patrón: `StoryBox.Title`, `StoryBox.Description`, `StoryBox.Content`, y `StoryBox.Code`
+  - Historia ahora sigue el mismo patrón que las demás historias
+
+### Fixed
+- **ProgressBar - Transiciones CSS Controladas**: Corrección del comportamiento de transiciones en `BarProgress`
+  - La clase `ui-transition-all` ahora solo se aplica cuando `duration > 0`
+  - Se añade `transition: 'none'` explícitamente cuando `duration === 0` para desactivar transiciones CSS
+  - Esto permite animaciones controladas por JavaScript sin interferencia de transiciones CSS
+  - Mejora significativa en la precisión de animaciones de cuenta regresiva y actualizaciones en tiempo real
+
+## [1.2.14] - 2026-01-06
+
+### Added
+- **PickerColor Component**: Nuevo componente completo para selección de colores
+  - Componente `PickerColor` para seleccionar colores en formato hexadecimal
+  - Componentes `ColorInput`, `ColorPalette`, y `ColorSwatch` para selección visual de colores
+  - Integración con almacenamiento de colores recientes usando localStorage para comodidad del usuario
+  - Soporte para EyeDropper API para seleccionar colores desde la pantalla
+  - Funciones utilitarias para validación y conversión de colores (hex, RGB, HSL)
+  - Stories completas para el componente PickerColor que demuestran varios casos de uso y configuraciones
+- **Toast/Alert - Barra de Progreso con Duración**: Nueva funcionalidad para mostrar barra de progreso en toasts y alerts
+  - Nueva prop `duration` en `IAlert` y `ToastProps` para definir la duración del toast/alert
+  - Barra de progreso que se muestra en la parte inferior del alert cuando hay duración definida
+  - El progreso retrocede de 100% a 0% mientras pasa el tiempo, mostrando el tiempo restante
+  - El toast/alert se cierra automáticamente cuando el progreso llega a 0%
+  - La barra de progreso solo se muestra si `duration` está definida y es mayor a 0
+  - Hook `useProgressBar` que maneja el cálculo del progreso usando `requestAnimationFrame` para animación suave
+  - Sincronización entre el cierre automático del toast y la barra de progreso
+  - Actualizada la historia "DuraciónPersonalizada" para demostrar la funcionalidad de la barra de progreso
+  - Agregados ejemplos con diferentes duraciones (2s, 5s, 10s) en la historia "Colores"
+- **Table - Validación de Celdas Editables**: Sistema de validación para celdas editables en tablas
+  - Nueva prop `errorCursor` en componente Input para indicar visualmente errores con cursor rojo y borde
+  - Validación automática basada en el tipo de columna (`number`, `numeric`, `text`)
+  - Prevención de entrada de caracteres inválidos en columnas numéricas
+  - Cursor parpadeante en color danger cuando hay error de validación
+  - Borde y fondo en color danger cuando hay error de validación
+  - Nueva story `ValidationTable` que demuestra la funcionalidad de validación en celdas editables
+- **Table - Búsqueda Interna Configurable**: Mejora en el manejo de búsqueda interna vs externa
+  - Nueva prop `internalSearch` en `TableToolbarConfig` para controlar si se aplica búsqueda interna (por defecto: `false`)
+  - Cuando `internalSearch` es `false` y hay `onSearch` definido, solo se emite el evento sin aplicar búsqueda interna
+  - Evita mostrar resultados intermedios de búsqueda interna cuando hay búsqueda externa asíncrona
+  - Mejora en la experiencia de usuario al evitar parpadeos de resultados durante búsquedas externas
+- **Table - Actualización Batch de Visibilidad de Columnas**: Mejora en el guardado de configuración en localStorage
+  - Nuevo método `updateMultipleColumnVisibility` en `useTableConfig` para actualizar múltiples columnas de una vez
+  - Prevención de sobreescrituras en localStorage cuando se cambian múltiples columnas simultáneamente
+  - Modificación en `TableToolbar` para usar actualización batch cuando hay múltiples cambios de visibilidad
+  - Nueva prop `onMultipleColumnVisibilityChange` en `TableToolbar` para manejar cambios batch
+  - Corrección del problema donde solo se guardaba el último checkbox marcado en localStorage
+- **TableSelectionBar - Iconos Mejorados**: Mejora en el renderizado de iconos en acciones de selección
+  - Los iconos ahora se muestran correctamente cuando hay `label` e `icon` en las acciones
+  - Uso de `slotLeft` para iconos cuando hay label, permitiendo mostrar icono y texto juntos
+  - Soporte mejorado para iconos de tipo string (`'EditOutlined'`) y Font Awesome (`faCopy`)
+
+### Changed
+- **Toast - Message Opcional**: La prop `message` ahora es opcional en `ToastInput`
+  - Cambiado el tipo `ToastInput` de `string | (ToastOptions & { message: string })` a `string | (ToastOptions & { message?: string })`
+  - Permite crear toasts solo con `title` sin necesidad de incluir `message`
+  - Si no se proporciona `message`, se usa una cadena vacía por defecto
+
+### Fixed
+- **Table - Guardado en localStorage**: Corrección de sobreescrituras en localStorage
+  - Solucionado el problema donde múltiples cambios de visibilidad de columnas causaban sobreescrituras
+  - Ahora todos los cambios de visibilidad se guardan correctamente en una sola operación batch
+  - Mejora en la persistencia de configuración de columnas
+- **Icon - Comparación con 'xl' en LegacyIcon**: Corrección de error de TypeScript
+  - Eliminada la comparación innecesaria con `'xl'` en `getPaddingClass` ya que `VisualSize` no incluye `'xl'`
+  - Simplificada la lógica para solo convertir `'xxs'` a `'xs'` cuando es necesario
+- **PickerColor - Importación de InputRef**: Corrección de importación incorrecta
+  - Cambiada la importación de `InputRef` de `@/modules/Input` a `@/shared/types/input`
+  - Agregadas las propiedades faltantes `clear` y `getInputElement` al objeto retornado por `useImperativeHandle` en `ColorInput`
+
 ## [1.2.13] - 2025-01-22
 
 ### Added