Génération de fichiers Storybook rapid Hygen React

Lorsque vous utilisez Storybook dans des applications React pour présenter et documenter les composants, la création du fichier Storybook est souvent une tâche répétitive. Par conséquent, je veux montrer une alternative rapide en utilisant le populaire générateur de code Hygen.

Hygen

Hygen est un générateur de code open source écrit en JavaScript qui génère du code à partir d'un modèle. C'est un projet populaire hébergé sur GitHub avec 4,6k étoiles (juin 2022). Hygen a été fondé par Dotan Nahum avec des premiers commits en 2017.

Storybook

Storybook est un outil open source permettant de construire des composants et des pages React de manière isolée. Il est idéal pour documenter et tester les composants React. Ainsi, pour la construction d'applications frontales React, c'est actuellement l'outil le plus populaire du secteur. Les fichiers qui contiennent la documentation du Storybook sont appelés stories (par exemple Button.stories.jsx). Mais créer pour chaque composant React son fichier story analogue est souvent une tâche répétitive. Ainsi, nous allons utiliser Hygen pour automatiser cette tâche autant que possible.

Générer des histoires avec Hygen

Les modèles de Hygen se trouvent dans le dossier répertoire. Pour notre objectif, nous allons créer le modèle dans un dossier appelé de manière appropriée. Notre générateur de code Hygen se compose de deux fichiers. Le premier contient la définition de l'invite interactive qui s'affiche à l'utilisateur lors de l'exécution de l'application Hygen. L'utilisateur peut saisir le nom du composant.

_templates/story/prompt.js

module.exports = {
  prompt: ({ prompter }) => new Promise((resolve) => {
    prompter
      .prompt([
        {
          type: 'input',
          name: 'name',
          message: 'Component Name?',
        },
      ])
      .then(({ name }) => {
        resolve({
          name,
        });
      });
  }),
};

Le nom du composant est enregistré dans la variable name et est ensuite disponible dans le fichier de modèle. Hygen utilise le langage de templating EJS. Ainsi, le deuxième fichier contient le modèle du fichier Storybook. Le modèle est utilisé pour générer le fichier Storybook rempli avec le nom du composant que l'utilisateur a entré. Le nom du composant est disponible dans le modèle EJS.

La première section du modèle a la structure d'un fichier Markdown avec les éléments suivants qui spécifient le chemin du fichier de destination. Dans ce cas, j'utilise le chemin par défaut mais cela peut être adapté à la structure des dossiers de votre projet. Tout ce qui se trouve sous est le contenu du modèle JavaScript Storybook.

_templates/story/new-story.ejs.t

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

import <%= name %> from './<%= name %>';

export default {
  title: '<%= name %>',
  component: <%= name %>,
};

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

export const Primary<%= name %> = Template.bind({});
Primary<%= name %>.args = {
};

Notre générateur de code Hygen peut être invoqué avec la commande suivante:

npx hygen story new

Cette commande peut également être ajoutée à la section des scripts de votre projet. Une fois exécuté, le développeur est alors invité à saisir le nom du composant. Ensuite, le développeur peut encore adapter le fichier source de l'histoire générée, par exemple pour ajouter des propriétés du composant. En exécutant Storybook, le composant apparaîtra et pourra être testé. Le code template de Hygen dans le dossier _templates doit bien sûr être enregistré dans votre dépôt git afin que vos codéveloppeurs puissent aussi l'utiliser et peut-être même l'améliorer.

Conclusion

Dans ce billet de blog, j'espérais vous montrer comment utiliser le générateur de code Hygen pour créer des starters rapides pour les histoires Storybook dans les applications React. De même, Hygen peut s'adapter à un grand nombre d'autres cas d'utilisation. Une fois que vous avez commencé, Hygen peut vous aider à devenir plus efficace dans votre travail quotidien.

Références

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

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

• EJS: https://ejs.co/