#Using Storybook

Storybook is a tool specifically designed for component debugging. It provides:

• A rich variety of debugging capabilities
• Integration with some testing tools
• Reusable documentation content
• Sharing capabilities
• Workflow automation

#Principle

Rsbuild provides Storybook Rsbuild, which allows any Rsbuild project to use this tool for building Storybook.

Modern.js implements storybook-addon-modernjs based on this tool. This plugin loads the Modern.js configuration file and converts it into a configuration usable by Storybook Rsbuild.

#Installation

npm install @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

yarn add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

pnpm add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

bun add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

deno add npm:@rsbuild/core npm:storybook-builder-rsbuild npm:storybook-addon-modernjs -D

You need to install @rsbuild/core in your project, otherwise the plugin may not work properly.

#Configure .storybook/main.ts

import type { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['storybook-addon-modernjs'],
  framework: ['storybook-react-rsbuild'],
}
export default config

#Example

You can check out the example to learn how to use Storybook in Modern.js.