Generación rápida de archivos Hygen React Storybook

Cuando se utiliza Storybook en aplicaciones React para mostrar y documentar los componentes, la creación del archivo Storybook suele ser una tarea repetitiva. Por ello, quiero mostrar una alternativa rápida utilizando el popular generador de código Hygen.

Hygen

Hygen es un generador de código abierto escrito en JavaScript que genera código a partir de una plantilla. Es un proyecto popular alojado en GitHub con 4,6k estrellas (junio 2022). Hygen fue fundado por Dotan Nahum con primeros commits en 2017.

Storybook

Storybook es una herramienta de código abierto para construir componentes y páginas de React de forma aislada. Es genial para documentar y probar los componentes de React. Por lo tanto, para la construcción de aplicaciones frontales React, es actualmente la herramienta más popular en la industria.

Los archivos que contienen la documentación de Storybook se llaman historias (por ejemplo, Button.stories.jsx).

Pero crear para cada componente de React su archivo análogo de historias suele ser una tarea repetitiva. Por ello, aprovecharemos Hygen para automatizar esta tarea tanto como sea posible.

Generación de historias con Hygen

Las plantillas de Hygen se encuentran en el directorio _templates. Para nuestro propósito, crearemos la plantilla en una carpeta llamada apropiadamente story.

Nuestro generador de código Hygen consiste en dos archivos. El primero es _templates/story/prompt.js y contiene la definición del prompt interactivo que se muestra al usuario cuando ejecuta la aplicación Hygen. El usuario puede introducir el nombre del componente.

_templates/story/prompt.js

module.exports = {
  prompt: ({ prompter }) => new Promise((resolve) => {
    prompter
      .prompt([
        {
          tipo: 'input',
          nombre: 'nombre',
          mensaje: '¿Nombre del componente?'
        },
      ])
      .then(({ nombre }) => {
        resolve({
          nombre
        });
      });
  }),
};

El nombre del componente se guarda en la variable nombre y está disponible posteriormente en el archivo de plantilla. Hygen utiliza el lenguaje de plantillas EJS. Así, el segundo archivo es _templates/story/new-story.ejs.t y contiene la plantilla del archivo Storybook. La plantilla se utiliza para generar el archivo Storybook con el nombre del componente que el usuario ha introducido. El nombre del componente está disponible en la plantilla EJS como <%= nombre %>.

La primera sección de la plantilla tiene la estructura de un archivo Markdown con la propiedad to que especifica la ruta del archivo de destino. En este caso, utilizo la ruta por defecto src/components pero puede adaptarse a la estructura de carpetas de tu proyecto. estructura de carpetas del proyecto. Todo lo que está debajo de la línea --- es el contenido de la plantilla JavaScript Storybook.

_templates/story/new-story.ejs.t

---
to: src/componentes/<%= nombre %>/<%= nombre %>.stories.jsx
---
import React from 'react';

import <%= nombre %> de './<%= nombre %>';

exportar por defecto {
  title: '<%= nombre %>',
  component: <%= nombre %>,
};

const Template = (args) => <<%= nombre %> {...args} />;

export const Primaria<%= nombre %> = Template.bind({});
Primaria<%= nombre %>.args = {
};

Nuestro generador de código Hygen puede ser invocado con el siguiente comando:

npx hygen story new

Este comando también puede añadirse a la sección de scripts del archivo package.json de su proyecto.

Una vez ejecutado, se pide al desarrollador que introduzca el nombre del componente. A continuación, se crea un nuevo archivo en ./src/components/ComponentName/ComponentName.stories.jsx.

A continuación, el desarrollador puede seguir adaptando el archivo fuente de historias generado, por ejemplo, para añadir propiedades del componente. Al ejecutar Storybook, el componente aparecerá y podrá ser probado.

El código Hygen en la carpeta _templates debe, por supuesto, ser registrado en su repositorio Git para que sus co-desarrolladores también puedan utilizarlo y tal vez incluso mejorarlo.

Conclusión

En esta entrada del blog he querido mostrarte cómo utilizar el generador de código Hygen para crear inicios rápidos de historias Storybook en aplicaciones React. Del mismo modo, Hygen puede adaptarse a un gran número de otros casos de uso. Una vez que empieces, Hygen puede ayudarte a a ser más eficiente en su trabajo diario.

Referencias

• Storybook: https://storybook.js.org

• Hygen: https://www.hygen.io

• EJS: https://ejs.co