Set up Storybook in a Stencil project
Tags: tutorial, frontend, webcomponents, designsystem
Published: 2023-07-02 18:37:11

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:

```bash
npx -p @storybook/cli sb init --type=html
```

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:

```js
import { defineCustomElements } from '../loader';

defineCustomElements();
```

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 `global.css` file:

```js
import '../src/global/global.css';
```

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:

```bash
npx stencil build --watch
```
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:

```bash
npm run storybook
```

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:

```js
export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'radio' },
    },
    
  },
};

const Template = args => `<my-button label="${args.label}" variant="${args.variant}" size="${args.size}"></my-button>`;

export const primary = Template.bind({});
primary.args = {
  label: 'Click me',
  variant: 'primaryFilled',
  size: 'medium',
};
```

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:

```bash
npm i --save-dev @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx jsx-dom
```

Now add the plugins we just installed to the `.babelrc` file on the root of our project:

```json
  "plugins": [
    "@babel/plugin-syntax-jsx",
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "h"
      }
    ]
  ]
```

now at our story, we can use the JSX syntax just by importing the `h` from the `jsx-dom` library.

```jsx
import { h } from 'jsx-dom';

export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'radio' },
    },
  },
};

const Template = args => <plx-button label={args.label} variant={args.variant} size={args.size}></plx-button>;

export const primary = Template.bind({});
primary.args = {
  label: 'Click me',
  variant: 'primaryFilled',
  size: 'medium',
};
```

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:

```bash
npm i -D @storybook/addon-actions
```

and then we can use it like this:

```js
export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  argTypes: {
	// ...
  },
  decorators: [withActions],

  parameters: {
    actions: {
      handles: ['click', 'mouseover', 'mouseout'],
    },
  },
};
```

Now the events `click`, `mouseover`, and `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.