SisteBase es un proyecto que unifica diferentes herramientas para crear un sistema de diseño basado en componentes. Está basado en el trabajo que hacemos en Obelisco y lo usé como ejemplo en la charla que di sobre sistemas de diseño en la meetup de React en Buenos Aires y en Nerdear.la 2021.
Mirá la documentación de componentes.
SisteBase está publicado en npm, por lo que se puede instalar de la siguiente forma:
npm install --save sistebase
Podés usar este proyecto como un template con el botón verde que aparece arriba. Una vez que tengas el proyecto clonado, tenés que:
- Crear tu cuenta en chromatic y crear el proyecto basado en ese repositorio.
- Chromatic genera un token para ese proyecto que permite subir los cambios. En la sección
secretsde la configuración de github del repo, agregá uno con el nombreCHROMATIC_PROJECT_TOKENy el token que te dio Chromatic. - Para que los cambios se publiquen en NPM, tenés que crearte una cuenta y generar un token con permisos de lectura y escritura. En los secrets del repositorio, agregá otro con el nombre
NPM_TOKENy el token que generaste. - Habilitá la Github page dentro de las opciones del proyecto, ahí se va a publicar la documentación. Para que esto funcione el proyecto tiene que se público.
- Manos a la obra, ya podés empezar a definir tus estilos y componentes.
SisteBase está desarrollado principalmente en Sass y TypeScript, utilizando las siguientes herramientas:
- Bootstrap 4 como base de diseño. Algunos componentes se toma de esta librería modificando los estilos.
- Storybook como base para definir y documentar cada componente.
- React para generar los componentes de la documentación.
- Chromatic para gestionar los cambios visuales en los componentes.
- ESLint, Stylelint y Prettier para estandarizar los estilos del código.
Para desarrollar en SisteBase hay que clonar el proyecto e instalar dependencias.
npm install
Una vez instalado, se puede correr con el siguiente comando.
npm start
Es recomandable utilizar VScode como editor de código con las extensiones de ESLint, Stylelint y Prettier para asegurarse que los estilos del código sigan las convenciones.
SisteBase tiene tests automáticos e integración continua. Cada vez que se genera un nuevo PR, se corren los siguientes procesos:
- linter para corroborar que los cambios sigan los lineamientos de estilos de código.
- Tests de chromatic para verificar si hay cambios visuales.
Al hacer el merge en la branch master se corre el siguiente proceso:
- Corrobora el formato del código.
- Corre las pruebas automáticas para chequear que pasen.
- Genera el build de la nueva versión.
- Publica los cambios en github pages.
- Sube la nueva versión a npm.
Para el manejo de versiones usamos semantic release. Esto nos permite olvidarnos de definir las versiones y remueve la discreción de las emociones humanas, siguiendo estrictamente la especificación del versionado semántico.
Cada vez que se agregan commits, se ejecuta como parte de la integración contínua y lee los mensajes para definir el nuevo número de versión. Todos los commits deben tener alguno de estos prefijos que ayudan a identificar qué tipo de cambios hacen.
- feat: Una nueva funcionalidad
- fix: Arregla un error
- docs: Cambios únicamente en la documentación
- style: Cambios que no afectan la funcionalidad del código (espacios, formato, agrega puntos y coma, etc). No confundir con cambios en el css.
- refactor: Un cambio de código que no agrega funcionalidades ni arregla errores
- perf: Cambios que mejoran la performance
- test: Cambios únicamente en los tests
- chore: Cambios en el proceso de build o herramientas auxiliares que no hacen a las funcionalidades del sistema
A los sistemas los suele mantener un equipo de específico, pero son utilizados por otros equipos que no participan en el desarrollo de las definiciones.
Para agilizar y hacer más transparente el proceso, es recomendable utilizar las herramientas que proporciona github para recibir feedback y colaboraciones.