Storybook on Overwolf: How to abstract your logic for a better UI.

Hi everyone !
This post is dedicated to the #dev-powerups category in Overwolf developers’ discord.
I’ll start with some context into the two or three who are gonna ask, “what is overwolf ?”.

Overwolf Logo

Overwolf is the guild for in-game creators that empowers them to create, grow, and monetize in-game apps and mods. Built for creators by creators, Overwolf is uniting the in-game creator community, giving them everything they need to make a living doing what they love — developing truly awesome gaming creations

While getting the events is pretty useful for testing, it’s not as performant, as you’ll have to play a game to test if everything works. It can be cool if it’s short games, if it’s used as a break, but for longer ones, performance won’t be as great. Also, if you iterate quickly on the design, and want to isolate a single element to see if it looks great, adding a new page, reload it every time can be tiring.

Introducing Storybook, a tool to “Build bulletproof UI components faster” as said on their main page. It works by splitting out every component of your app into it’s own category, and allows for mocking of data given to the component, in addition to unit testing.

To install storybook, it vastly depends on what setup to use. I’ll try to add as many frameworks as I can, but if the framework used is not in this story, you can check the documentation here: https://storybook.js.org/docs/react/get-started/introduction.

For all core supported frameworks (VueJS, React, Angular, WebComponents), you only have to run a single command:

npx sb init

It should normally install the required packages, and create a stories folder in your src directory. It will also create a .storybook folder at the root of the directory, that will be used later for many tweaks of the app. It’s not recommended to add this directory to the .gitignore.

You can then run yarn storybook if you are using yarn or npm run storybook for npm. After some build, you should be greeted by a browser window, with the interface of storybook:

The interface of storybook (I may have a slightly different interface)

Once this has been done, we’ll need to remove the default stories, and add our own! We can do so by creating a file named xxx.stories.js where xxx is the name of your component, and by putting the base stories configuration:

Once that’s done, you may need to edit your storybook configuration to reflect the fact that your stories are not in the stories folder. You can do so by changing the following lines in .storybook/main.js :

module.exports = {
  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
  addons: ['@storybook/addon-essentials']
}

by

module.exports = {
  stories: ['../src/**/*.stories.@(js|mdx)'],
  addons: ['@storybook/addon-essentials']
}

I’ll finish this first tutorial with an example of a somewhat difficult component, and its corresponding view in the app (using NuxtJS)

The result in the storybook interface.

And you are now using Storybook ! In the next tutorials, we’ll be talking about how to do unit testing using storybook and jest.

Until then, you can learn more about storybook in the documentation available here: https://storybook.js.org/docs/