In the past two weeks, I have been working on a new service for the app we're building at work - the launch is scheduled for August and I am excited to be entering a new phase. This piece looks at my most recent discovery and how I wish I knew it earlier.

In one of my previous posts titled Reading your way to programming salvation, I expressed how privileged I regard myself being in a place where I am constantly working, and in turn taken to new grounds that open my eyes to bigger, brighter possibilities in the tech world; I must admit that having more experienced developers around me has been of huge advantage, as they discuss new discoveries, creating a desire within me to level up in experience. It could pass for a case of the new, exciting discovery on the blocks which everyone speaks highly of, yet, you have neither seen nor used it: That in a nutshell was my story with Storybook before the last week.

While having my weekly demo, my boss encouraged me to implement a storybook for my end of the project. I set out to read the storybook documentation and also saw a few videos. Although these helped, this article solidified my understanding and perspective of what it is and does.

Interestingly, I had to build a component right before trying out my hands-on storybook and in the process, I encountered
the challenge of knowing how to show and position it appropriately as we hadn't decided on where it would be rendered. Although I eventually picked a random place to stage it, little did I know that a problem like that already had the perfect provision: Storybook.

What is a storybook and what is it used for?

A storybook is more like a folder that helps to render User Interface(UI) components called "stories"; hence, it is just logical to name where they all lie in a storybook. It is valuable as a playground for displaying components built in isolation before placing them in a position in the project where they belong.

With a storybook, one can comfortably build, pass in dummy data to and style UI components appropriately. In addition to that, they are vital in that they provide a platform for staging components that are being readied for future use.

How is a storybook built?
The steps below can be followed to set up and run a storybook.

Step 1. Create a new file and with the extension ".stories.tsx" (e.g. victor.stories.tsx for typescript-based setup) and write default Imports and Exports

Step 2. Import your UI components(stories) and write new export functions - passing the appropriate props, if any.

Step 3. Check your package.json file for the command to start storybook. Depending on the package manager your project is configured with, start your storybook in your terminal using the command stated from your package manager - I use yarn; I run "yarn start-storybook".

Overly, taking from my experience, a storybook is vital for the following:

1. It gives a platform for staging and testing out both new and existing UI components.
2. UI components can be built in isolation from the main app.
3. By keeping all components(stories) together(storybook), it helps to give awareness to other developers on the team of available stories, which they can also 'play around with'.

I am new to this and although I realise there might be more usages than I know of right now, I am loving the little I have experienced, and can't wait to try my hands in maximising its usage. For another dimension on storybook, do check out this brilliant piece.