Storybook en Nx Angular monorepo: Documentos MDX

storybook documentos sueltos
Foto de Annie Spratt en Unsplash

Habitualmente no basta con crear las stories para que el usuario vea cómo funciona un determinado componente. Se necesita también explicar cómo se instala y se configura, sus características, casos de uso, y un largo etcétera.

En este artículo vamos a ver cómo crear esas páginas de Storybook en Nx Angular monorepo con documentación extra para dar más información al usuario, són, los documentos Leer más »

Storybook en Nx Angular monorepo: Stories

Libro en blanco
Foto de Markus Spiske en Unsplash

Llegado el momento hay que crear las stories necesarias para las diferentes funcionalidades. Pero, ¿Qué es una stories? ¿Cómo se escriben?

Bien, según la web de Storybook, una story  captura el estado representado de un componente de la interfaz de usuario. Es una función que devuelve el estado de un componente dado un conjunto de argumentos.

Como siempre mejor explicarlo mediante la … Leer más »

Storybook en Nx Angular monorepo: Estilos

Libro de dibujo para pintar
Foto de Nico Smit en Unsplash

Storybook viene por defecto con un diseño propio. No obstante, mostraremos cómo cambiar esos estilos propios mediante lo que Storybook llama «Theming«, es decir, crearemos un tema que incorpore las características de una guía de estilos: marca, tipografías, colores, etc.

Instalación

Comprueba que tienes instalada la librería @storybook/theming en tu carpeta de node_modules, si no existe, puedes instalarla (con la misma versión … Leer más »

Storybook en Nx Angular monorepo: Linting

mosaico de libros
Foto de Robert Anasch en Unsplash

Para llevar a cabo la escritura de stories y la documentación vamos a seguir algunas recomendaciones. Mediante el proceso de linting nos comprometemos a seguir correctamente unas buenas prácticas a la hora de escribir.

Para ello, nos apoyaremos en el eslint y unos packages para poner a punto una configuración de reglas que deberemos cumplir. Este cumplimiento lo podremos ver tanto en el proceso … Leer más »

Storybook en Nx Angular monorepo: Configuración

cuatro libros apilados
Foto de Hope House Press – Leather Diary Studio en Unsplash

En el artículo anterior vimos la instalación de Storybook en Nx Angular monorepo. Esa instalación venía con una configuración mínima por defecto que ahora vamos a ampliar un poco más para conocer un poco más su estructura y de paso tener alguna característica más.

Antes que nada vamos a ver un poco la estructura que nos ha dejado … Leer más »

Storybook en Nx Angular monorepo: Instalación

Libros apilados
Foto de Kimberly Farmer en Unsplash

Cuando vas a desarrollar, se necesita tener a mano buena documentación para tirar de ella en algún momento cuando desconoces sobre el tema o tienes dudas. Esa documentación suele estar redactada formalmente con ejemplos de código en algunos casos para basarse o clarificar el concepto que se explica. Son básicamente los llamados manuales, tutoriales, guías, …

Pero también hay otra manera de explicar el … Leer más »

Actualización del monorepo Nx

Actualización monorepo Nx
Foto de Edge2Edge Media en Unsplash

En un artículo anterior, os mostramos la creación de un monorepo Nx para reunir todos los proyectos de los artículos publicados en este blog en un solo repositorio de github.

Obviamente ofrece muchas ventajas al respecto y una de ellas es la que vamos a aprovechar. Se trata de actualizar nuestro código a la última versión de angular a día de creación de este … Leer más »

Monorepo

monorepo
Foto de Sigmund en Unsplash

En este artículo utilizaremos la estrategia de desarrollo del monorepo para mantener en un único repositorio todo el software (proyectos) de manera que se pueda realizar un mejor mantenimiento del código. AngularFrontenders tiene en la actualidad varios repositorios ubicados en GitHub que corresponde a cada ejemplo usado en cad artículo. Trataríamos de llevar todos esos ejemplos a un único repositorio llamado «monorepo».

La gestión de … Leer más »

Como asegurar que se ejecuta un expect de jasmine en un test

Tests en verde
Foto de Yassine Khalfalli en Unsplash

Cuando ejecutamos los tests, siempre queremos que todos pasen en “verde”. Ese verde no siempre asegura que todo funcione a la perfección… siempre sale algún bug 🙁 . El motivo más común, es no hacer los suficientes o mejores tests como para cubrir todos los casos posibles. No obstante, en el artículo de hoy, la causa que pretendemos solucionar es que no se ejecute … Leer más »

Acelerar la ejecución de los tests con Karma-parallel en Angular

Karma parallel
Photo by Kolleen Gladden on Unsplash

En el ciclo de vida del software hay un apartado dedicado al testeo, es decir, a crear esa «red de seguridad» que nos ayuda a chequear que todo funciona como es debido.

Conforme el software va creciendo se crearán más pruebas para cubrir esas nuevas piezas de código y existirá un proceso ó “test runner” que será el encargado de hacer pasar todas esas … Leer más »