Windmar UI
Una libreria de componentes construida desde cero para unificar la identidad visual de WindMar Home en todos sus productos digitales. Compatible con React y Astro de forma nativa, publicada como paquete privado en npm.
Equipo
Mi rol: Desarrollador principal — responsable de la arquitectura, desarrollo e implementacion de la libreria, priorizando rendimiento, versatilidad y accesibilidad. Tambien aporté en decisiones de UX/UI.
Juan David Herrera — Diseñador UX/UI
Contexto y problema
Al incorporarme a WindMar, identifiqué que no existia un sistema de diseño definido. Las paginas no mantenian coherencia visual entre si: los inputs variaban de estilo incluso dentro de una misma landing page, los botones cambiaban de forma y color sin criterio claro, y cada proyecto nuevo partia desde cero en cuanto a estilos.
Al principio esto no parecia un problema critico, pero a medida que los proyectos crecieron se hizo evidente la necesidad de una identidad visual consistente que generara confianza y comodidad en el usuario final.
La solucion: propuse desarrollar una libreria de componentes UI que fuera 100% compatible con los proyectos existentes y los futuros. Tras evaluar el stack tecnologico de la empresa, definimos React y Astro como las dos tecnologias principales sobre las que se construiria.
Desafios tecnicos
Publicacion como paquete npm privado
Nunca habia creado una libreria de componentes ni publicado un paquete en npm. Sin embargo, publicarla como paquete privado era un requisito indispensable: la cantidad y escala de proyectos que manejabamos hacia inviable copiar y pegar componentes entre repositorios.
Compatibilidad dual: React y Astro
La libreria debia funcionar de forma nativa en ambos entornos. Si un proyecto estaba construido en Astro, los componentes debian funcionar sin necesidad de instalar la integracion de React para Astro. Ademas, todo debia ser compatible con Tailwind CSS 4 y TypeScript.
Documentacion centralizada
Necesitabamos un sitio unico para documentar todos los componentes, sus variantes y su uso. La opcion mas popular era Storybook, pero al momento del desarrollo no contaba con soporte nativo para Astro. Por esta razon, optamos por Astro Starlight junto con su integracion de React, lo que nos permitio documentar ambas versiones de los componentes en un solo lugar.
Proceso de desarrollo
Investigacion y referentes
Antes de escribir codigo, estudié la arquitectura de varias librerias open source de React. La que mas influyo en el proyecto fue Hero UI (Next UI). Al analizar su repositorio descubri patrones y comportamientos que de otro modo habria tardado mucho mas en identificar como necesarios.
Un ejemplo clave fue el polimorfismo de componentes: un boton visualmente es reconocible como tal, pero no siempre debe renderizarse con la etiqueta <button>. Podria ser un <a> que actua como enlace, o incluso un elemento completamente personalizado donde el desarrollador solo quiere reutilizar el estilo. Cada componente de la libreria debia soportar esta flexibilidad para adaptarse a cualquier caso de uso.
Metodologia y planificacion
Adoptamos Atomic Design como metodologia de diseño, lo que permitio construir la libreria de forma modular y escalable. Juan David se encargo de definir la identidad visual y diseñar cada componente.
Para el desarrollo, conte con un plazo aproximado de dos meses. Organicé el trabajo en un tablero de tareas donde cada componente tenia su propia tarjeta con los siguientes criterios:
- Variantes visuales (tamaños, colores, estados)
- Interacciones (hover, focus, disabled)
- Compatibilidad con React Hook Form
- Testing
- Arquitectura extensible (que fuera facil agregar nuevos componentes)
- Changelog por version
- Documentacion clara y detallada
Desarrollo en React
Aunque inicialmente consideramos usar una libreria open source como base, decidimos construir todo desde cero para tener control total y adaptarla exactamente a nuestras necesidades.
Para manejar las variantes de estilo de cada componente, utilizamos Tailwind Variants, creada por el mismo equipo de Hero UI. Esta herramienta facilito enormemente la creacion y manipulacion de variantes, manteniendo el codigo limpio y predecible.
Desarrollo en Astro
El ecosistema de librerias de componentes para Astro es considerablemente mas reducido que el de React, lo que hizo esta parte del desarrollo mas desafiante. El objetivo era lograr paridad funcional con la version de React.
Por ejemplo, en React el componente Accordion es controlado por un AccordionGroup que gestiona cual elemento esta abierto y cual cerrado, con animaciones manejadas por GSAP. Para replicar este mismo comportamiento en Astro sin depender de React, se escribieron scripts en JavaScript puro que gestionaban el estado y las animaciones de forma nativa.
Resultado
Tras varias semanas de desarrollo y pruebas en entornos controlados, la libreria se completo y fue implementada en el rediseño de la pagina web principal de WindMar Home.
Impacto concreto:
- Consistencia visual en todos los productos digitales de la empresa
- Reduccion en tiempos de diseño, ya que los diseñadores ahora trabajan directamente sobre los componentes de la libreria
- Reduccion en tiempos de desarrollo, al eliminar la necesidad de crear estilos desde cero en cada proyecto
- Escalabilidad, con una arquitectura que permite agregar nuevos componentes de forma sencilla
Conclusión
Este proyecto fue una de las experiencias mas significativas de mi carrera. Enfrentarme a un desafio que nunca habia abordado — desde diseñar la arquitectura de una libreria hasta publicarla como paquete npm — me dio la confianza para asumir retos tecnicos cada vez mas complejos.