Rapid Hygen React Storybook File Generation

When using Storybook in React applications to showcase and document the components, creating the Storybook file is often a repetitive task. Therefore, I want to show a quick alternative using the popular Hygen code generator.

Hygen

Hygen is an open source code generator written in JavaScript that generates code from a template. It is a popular GitHub-hosted project with 4.6k stars (June 2022). Hygen was founded by Dotan Nahum with first commits in 2017.

Storybook

Storybook is an open source tool for building React components and pages in isolation. It is great for documenting and testing React components. Thus, for building React frontend applications, it is currently the most popular tool in the industry.

The files that contain the Storybook documentation are called stories (e.g. Button.stories.jsx).

But creating for every React component its analogous story file is often a repetitive task. Thus, we will leverage Hygen to automate this task as much as possible.

Generating Stories with Hygen

Hygen's templates are located in the _templates directory. For our purpose, we will create the template in an appropriately called folder story.

Our Hygen code generator consists of two files. The first is _templates/story/prompt.js and contains the interactive prompt definition that is shown to the user when executing the Hygen application. The user can enter the name of the component.

_templates/story/prompt.js

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

The component name is saved in the variable name and is later available in the template file. Hygen uses the templating language EJS. Thus, the second file is _templates/story/new-story.ejs.t and contains the template of the Storybook file. The template is used to generate the Storybook file filled with the component name the user entered. The component name is availabe in the EJS template as <%= name %>.

The first section of the template has the structure of a Markdown file with the to property that specifies the destination file path. In this case, I use the default path src/components but this can be adapted to your project folder structure. Everything below the --- line is the contents of the JavaScript Storybook template.

_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 = {
};

Our Hygen code generator can be invoked with the following command:

npx hygen story new

This command could also be added to the scripts section of your package.json file of your project.

Once executed, the developer is then asked to enter the name of the component. Subsequently, a new file is created in ./src/components/ComponentName/ComponentName.stories.jsx.

Then, the developer can further adapt the generated story source file, for example, to add properties of the component. When running Storybook, the component will appear and can be tested.

The Hygen code in the _templates folder should of course be checked into your Git repository so that your co-developers can also use it and maybe even improve it.

Conclusion

In this blog post, I hoped to show you how to use the Hygen code generator to create rapid starters for Storybook stories in React applications. Similarly, Hygen can adapt to a big number of other use-cases. Once you get started, Hygen can help you become more efficient in your daily work.

References

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

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

• EJS: https://ejs.co/