QA InfoTech » DevLabs Expert Group » Build bulletproof UI components with Storybook JS
Build bulletproof UI components with Storybook JS

Build bulletproof UI components with Storybook JS

Build bulletproof UI components with Storybook JS

Storybook is a user interface development environment and play area for UI parts that is used in React Native development. The instrument empowers designers to make segments autonomously and feature parts intelligently in a separated improvement condition.

A Storybook is an assortment of stories. Every story speaks to a solitary visual condition of a part. “Technically, a story is a method that provides something that can be rendered to screen.

Storybook underpins a wide range of frontend view layers with all the more coming! React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, Ember, Riot and Preact are at present supported.

Exporting Storybook

Storybook gives an incredible designer involvement in its dev time highlights, like instant change updates via Webpack’s HMR.

Storybook is likewise a tool you can use to showcase your components to others. Demos of React Native Web and React Dates are a great example for that.

For that, Storybook accompanies a tool to export your storybook into a static web app. 

At that point, you can deploy it to GitHub pages or any static hosting service.

Add the following NPM script:

{
"scripts": {
  "build-storybook": "build-storybook -c .storybook -o .out"
 }
}

Then run yarn build-storybook.

This will assemble the storybook arranged in the Storybook directory into a static web application and spot it inside the .out directory. Now, you can deploy this directory content wherever you want.

To test it locally:

npx http-server .out

Additionally, you can deploy Storybook directly into GitHub pages and ZEIT NOW  with Storybook tools.

Storybook Start Guide

Get started using the automated command line tool. Use the below mentioned commands to get boilerplate files for Storybook in your project:

cd your-project-directory
npx -p @storybook/cli sb init

The tools check your package.json to figure out which view layer you’re utilizing.
If you want to create HTML snippets in storybook, storybook can’t determine that automatically. So to install storybook for HTML, use the --type flag to force that the HTML project type:

npx -p @storybook/cli sb init --type html

By default npx will use the latest storybook version, if you want to try out the specific version, Try the following command:

npx -p @storybook/cli@5.0.0-rc.6 sb init

In order to setup the project manually in React Native development, there is separate way to do that you can check that on storybook official website here: – https://storybook.js.org/

To Start Storybook App use:

npm run storybook 

It will start up storybook project and we can thereafter navigate to http://localhost:9000 to see stories. It will look something like this:

Storybook JS

Also, Storybook is now available in the browser with a link provided in the console. So you can check that out too.

Conclusion

There are many benefits of using Storybook. It will make your component design and creation process more well organized, it will help as well a defined documentation for onboarding new developers in your project and also help you with applying/updating component design. The added benefit is that: – you can perform testing of your components  with ease and there are many community add-ons that will make your storybook experience more productive. It can also be useful with other frontend framework and libraries.

For Further reading

Here is the link to the Official docs on StoryBook

Thank you for reading!

About the Author