{"library":"storybook-react-rsbuild","title":"Storybook React Rsbuild Framework","type":"library","description":"storybook-react-rsbuild is a Storybook framework integration designed for React projects that leverage Rsbuild as their underlying build tool. It provides a fast and efficient development experience for React components in isolation, utilizing Rsbuild and Rspack for superior build performance and Hot Module Replacement (HMR) compared to traditional Webpack-based Storybook setups. The current stable version is `3.3.3`, with active development indicated by frequent patch and minor releases addressing bugs and introducing new features. This package acts as the bridge, allowing Storybook to seamlessly integrate with your existing Rsbuild configuration. It is crucial for projects aiming for optimized build times within the Storybook environment while working with React.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install storybook-react-rsbuild"],"cli":null},"imports":["import type { StorybookConfig } from 'storybook-react-rsbuild';","framework: { name: '@storybook/react-rsbuild', options: {} }","import { mergeRsbuildConfig } from '@rsbuild/core';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":"https://storybook.js.org","github":"https://github.com/rstackjs/storybook-rsbuild","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-react-rsbuild","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import type { StorybookConfig } from 'storybook-react-rsbuild';\nimport { mergeRsbuildConfig } from '@rsbuild/core';\n\n// .storybook/main.ts\nconst config: StorybookConfig = {\n  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],\n  addons: [\n    '@storybook/addon-links',\n    '@storybook/addon-essentials',\n    '@storybook/addon-onboarding',\n    '@storybook/addon-interactions',\n  ],\n  framework: {\n    name: '@storybook/react-rsbuild',\n    options: {},\n  },\n  docs: {\n    autodocs: 'tag',\n  },\n  // Example of customizing Rsbuild config\n  rsbuildFinal: async (currentConfig, { configType }) => {\n    if (configType === 'PRODUCTION') {\n      return mergeRsbuildConfig(currentConfig, {\n        performance: { removeConsole: true },\n      });\n    }\n    return currentConfig;\n  },\n};\nexport default config;\n\n// src/components/Button.tsx\nimport React from 'react';\n\ninterface ButtonProps {\n  label: string;\n  primary?: boolean;\n  onClick?: () => void;\n}\n\nexport const Button: React.FC<ButtonProps> = ({ label, primary = false, onClick }) => {\n  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n  return (\n    <button type=\"button\" className={['storybook-button', mode].join(' ')} onClick={onClick}>\n      {label}\n    </button>\n  );\n};\n\n// src/components/Button.stories.tsx\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { Button } from './Button';\n\nconst meta: Meta<typeof Button> = {\n  component: Button,\n  title: 'Example/Button',\n  tags: ['autodocs'],\n  argTypes: {\n    backgroundColor: { control: 'color' },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n  args: {\n    primary: true,\n    label: 'Button',\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    label: 'Button',\n  },\n};\n","lang":"typescript","description":"This quickstart demonstrates how to configure Storybook to use `storybook-react-rsbuild` as its framework, define a simple React component, and create its corresponding Storybook stories in TypeScript. It also includes an example of customizing the underlying Rsbuild configuration.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}