A quick tutorial on how to set up storybook in a new stencil project. Configuring the JSX support and showing the events in the action tab
Setup Storybook in a Stencil project was not as easy as I expected. So I documented here the main steps I took to setup my project. Hope this can be useful to others in need.
Beginning with a Stencil application created, run the init script for the Storybook:
This asks to set up using Webpack 5 or Vite. Both seem to work fine.
Now we need to allow Storybook to run my web components created with Stencil, So inside the
.storybook/preview.js add the following code:
This will allow us to use the tag created for our components inside the Storybook.
Also in this file, you can import the Stencil's
Now the basis of the setup is almost done. but there is one small problem. This loader folder that we imported does not exist yet. This folder is created at the build time of our application
so to create this folder we can run the build on watch mode:
this way every change that we in our components will reflect on the Storybook file (keep in mind that sometimes you need to refresh the Storybook page, especially with CSS).
Now with the Stencil build running, we can start the Storybook in a new terminal tab with the command:
Great. now we can write our first story. Like with every other Storybook setup, we can place our
.stories file into any folder that we want. I like to keep my stories in the same folder as my component, but you are free to follow other structures.
The story should be written using pure HTML into a string (for now at least). So my first story looked like this:
This works fine, but we can set up the JSX syntax pretty easily. So all we need to do is to set up Babel to handle this for us. So first we need to install some libs:
Now add the plugins we just installed to the
.babelrc file on the root of our project:
now at our story, we can use the JSX syntax just by importing the
h from the
much better. The last thing that I struggle with was setting up the events to show up in the actions tab on the Storybook page. The way I did this was to set up the
withActions decorator from the
@storybook/addon-actions package. So first, to install run this command:
and then we can use it like this:
Now the events
mouseout is logged into the Storybook. Exactly as expected.
Now we have a basic setup of Storybook in a Stencil build. Now you can keep enhancing this setup by adding more plugins to fit your need.