WHAT IS STORYBOOK ?

Storybook is a development environment and playground for UI components. It allows you to create components in isolation, mock hard-to-reach use cases, and document components for your team.

NEED OF STORYBOOK AND DOCS :

Suppose you are given a task to add a feature (Component) :

These are the steps you need to go through :

Creating component from both ends(Front & back) → running app → authentication → finally reviewing that new feature

What you actually needed : reviewing that new feature

Consequences of it :

• Complex setup required to run the app.
• Took time to compile a big project.
• Feature was hard to reach.
• Possible flasky data or incomplete APIs.

PROS

Providing Tool to create and focus explicitly on the feature you wanted to build at the first place and also extract individual features of it.

• Build components in isolation.
• Lives outside of your application.
• Mock all use cases you want.
• Provides living documentation.
• Provides addons for extra functionality.
• Basically, Develop first ,integrate later.

CONS

• Storybook doesn't automatically create stories for each component—you need to manually write stories for the components you want to document.

  However, once you've written these stories, Storybook generates the visual interface, showing all the components and their various states. It becomes a living documentation because as you update or add components, the stories and corresponding UI examples reflect those changes, making it easier to maintain consistent and up-to-date documentation.

• It will be very less useful in case we have very specific components that is when components do not have much variations ,in that case only it’s documentation will be useful.

SETTING UP STORYBOOK

To set up Storybook in your React project:

• Create a new React project.

• Install Storybook using npx : npx storybook init

  Once you have written this command in terminal two new folders will be added in your project directory :

  .stories (in your project folder) & stories (inside projectFolder/src)

  

Storybookdemo/src/Stories folder(containing some demo stories)

You can delete these demo stories and create you own inside your components folder.

• Run Storybook: npm run storybook

(If not getting steps ,please have a look at official docs : https://storybook.js.org/docs)

Storybook Interface (For demo stories)

Once you execute this command npm run storybook in terminal, you will be redirected to a interface where you can view the stories of your component and play with it’s configurations.