Weekly Blog Post #8

Published: 07/26/2021

Hey all!

Addition of Storybook

Why do we need Storybook?

Storybook is a really great tool for testing out components visually. It provides a great level of control over the component's prop. This helps us to further test out the Icon Components that we are building out for our npm Package.

Generating stories

Storybook requires components to be turned into stories in order to build them visually. The npm package has over 4,700+ Components which makes it completely impossible as well as not a sustainable solution to write down stories for each of those components manually. In the long run Eos-Icons will have addition of more SVG Icons and hence writing down 4,700+ stories for Storybook will most likely become a really bad implementation. To tackle this problem I wrote down a custom script for scaffolding the various types of Icon components into stories. This made the task a lot more easier as well as more reliable. The Eos-icons React npm package has 4 different types of icon variants. The first being the animated one which was generated completely differently and the remaining variants were related to each other so we decided to club those 3 types of variants under a single icon name in order to reduce the number of stories on Storybook. This made the Storybook a lot more easy to use. View the deployed version of storybook here

storybook image

Testing the Common Component

Previously Eos-Icons React had tests for validating the 3 types of Icon components. With the addition of the 4th type (default - common component) it required addition of some new tests as the 4th type also has new prop named "theme". I added a new test file for the common component. All the tests added are almost similar to the previous tests except for the additional prop.

GitHub Actions Runtime

The Eos-icons React repo has mainly 3 different GitHub actions (tests, release, storybook-build). The GitHub actions were taking a significant amount of time previously but with the addition of node modules caching the time has gone down by almost 1-2 minutes per run.

Eos-Icons Vue

Eos-Icons React has almost reached it's completion, hence from this week onwards I will be shifting my major focus towards Eos-Icons Vue. I am really excited to start working on this part of the project!