En esta guía crearemos una librería de componentes UI desde cero, utilizando una arquitectura monorepo. El código lo puedes encontrar en el repositorio demo de la guía, se abrirá en una nueva pestaña. Cada commit está etiquetado con el número del capítulo correspondiente.
Capítulo 1: Introducción y estructura del monorepo
- Qué es un monorepo y por qué usarlo para una UI library
- Tecnologías elegidas y justificación
- Estructura de carpetas: packages/, docs/, .github/, turbo.json, etc.
- Configuración inicial de pnpm, turbo, syncpack, changeset
Capítulo 2: Configuración base del proyecto
- package.json raíz y scripts globales (lint, build, format, etc.)
- Configuración de pnpm-workspace.yaml
- Configuración de turbo.json
- Setup de syncpack para gestión de versiones
Capítulo 3: Testing accesible con Jest, Testing Library y Vitest (opcional)
- Añadiremos
jestovitestpara pruebas unitarias. - Configuraremos
@testing-library/react,jest-axeyjsdom. - Integraremos testing accesible desde el primer componente.
Capítulo 4: Documentación interactiva con Storybook
- Visualizar tus componentes de forma aislada,
- Documentar variantes y props,
- Y eventualmente convertir docs/ en un sitio navegable.
Capítulo 5: Versionado semántico y publicación con Changesets
- Instalación y configuración de @changesets/cli
- Flujo de trabajo con changeset, version, publish
- Cómo versionar múltiples paquetes y publicar con pnpm
- Tagging y manejo de versiones internas vs públicas
Capítulo 6: Automatización con GitHub Actions, CI/CD para tu librería UI
- Validaciones en pull requests
- Build + tests en cada push
- Publicación automática cuando se mergea a main
Capítulo 7: Mantenimiento del monorepo con Syncpack y buenas prácticas
- Sincronización de dependencias con syncpack
- Limpieza de paquetes
- Organización visual y semántica del sistema de componentes