Storybook is a powerful tool for developing UI components in isolation for React, Vue, and other frameworks. It enables you to build and test components independently, which can accelerate both development and testing.
storybook-rsbuild is the Rsbuild powered Storybook builder, and provided the framework integration for React, Vue3 and vanilla JavaScript. The coherent Rsbuild system could make Storybook use an unified configuration with Rslib.
You can create a new project with Storybook by using create-rslib.
This is the prerequisite for setting up Storybook. You need to have a Rslib project with components that you want to showcase in Storybook, check out Solution to setup a Rslib project.
Set up a Storybook project with an existing Rslib project. To use React, Vue 3, vanilla JavaScript, or other frameworks, you must first install the appropriate Storybook framework package. For installation instructions, refer to the Storybook Rsbuild documentation.
Using React as an example, at this step you need to:
Install the dependencies for Storybook Rsbuild React framework. The essential ones include
The dependencies varies for each framework, please refer to the Storybook Rsbuild documentation for details. In this React example, we will install storybook-react-rsbuild as the framework integration.
Configure the Storybook configuration file .storybook/main.js
, specify the stories and addons, and set the framework with corresponding framework integration.
stories
directory. For example, create a Button.stories.js
file with the following content:In case you are using Yarn Plug-n-Play or your project is set up within a mono repository environment, you might run into issues with module resolution. In such cases, you can add an getAbsolutePath('storybook-addon-rslib')
function to resolve the addon. Check the Storybook's FAQ for more information.
There you go, you could start and build the Storybook server with the following command:
Check out more details in the Storybook Rsbuild documentation and the Storybook documentation.