Empezando

Storybook se ejecuta en conjunto con tu aplicación en modo desarrollo. Te ayuda a crear componentes de interfaz gráfica aislados de la lógica y el contexto de tu aplicación. Esta edición de Aprende Storybook es para Angular.

Storybook and your app

Configurando Angular Storybook

Necesitaremos seguir algunos pasos para configurar el proceso de transformación y agregación de recursos y archivos en nuestro entorno. Para esto, vamos a utilizar @angular/cli. Adicionalmente, añadiremos Storybook y Jest para probar nuestra aplicación. Para hacerlo, vamos a ejecutar los siguientes comandos:

# Crea nuestra aplicación:
npx ng new taskbox --style less
cd taskbox

# Añade Storybook:
npx -p @storybook/cli getstorybook

Podemos comprobar rápidamente que los distintos entornos de nuestra aplicación funcionan correctamente:

# Ejecuta el corredor de pruebas (Karma) en una terminal (añadiremos Jest más adelante):
yarn test

# Inicia el explorador de componentes en el puerto 6006:
yarn run storybook

# Ejecuta la aplicación cliente en el puerto 4200:
yarn start

Las tres modalidades de nuestra aplicación son: test automatizado (Jest), desarrollo de componentes (Storybook) y la propia aplicación.

3 modalidades

Dependiendo de la parte de la aplicación en la que estés trabajando, es posible que quieras ejecutar una o varias de ellas simultáneamente. Dado que nuestro objetivo es crear un componente de interfaz gráfica en completo aislamiento del resto de la aplicación, utilizaremos Storybook.

Reutilizando el CSS

Taskbox reutiliza elementos de diseño de la aplicación de ejemplo de este Tutorial de GraphQL y React, por lo que no necesitaremos escribir CSS en este tutorial. Simplemente incluiremos nuestros archivos LESS y los importaremos dentro de styles.less.

Interfaz gráfica del Buzón de tareas

Si deseas modificar los estilos, los archivos fuente de CSS en formato LESS se encuentran en el mismo repositorio de GitHub.

Añadiendo los recursos

También necesitamos añadir la fuente y el icono de este directorio a la carpeta assets/. Después de añadir los estilos y recursos, nuestra aplicación se verá de forma un poco extraña. Está bien. No estamos trabajando en la aplicación y no la veremos hasta dentro de algunos capítulos. A continuación, ¡comenzamos con la construcción de nuestro primer componente!

Keep your code in sync with this chapter. View 0818d47 on GitHub.
Tweet "I’m learning Storybook! It’s a great dev tool for UI components."
Componente Simple
Construye un componente simple en aislamiento