### Storybook Configuration: Static Directory Setup (JavaScript)

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/vanilla-ts/src/stories/Configure.mdx

This JavaScript code snippet within a Storybook configuration context explains how to use the `staticDirs` option. This option is crucial for loading static files like fonts and images when Storybook starts, ensuring they are accessible within your stories.

```javascript
// To link static files (like fonts) to your projects and stories, use the
// `staticDirs` configuration option to specify folders to load when
// starting Storybook.
```

--------------------------------

### Install Rsbuild Dependencies for Rspack

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/integrations/rspack.mdx

Installs the necessary Rsbuild packages, including `@rsbuild/core` and `@rsbuild/plugin-react`, which are required for Rspack support within Storybook. This command is executed via a package manager.

```bash
npm install @rsbuild/core @rsbuild/plugin-react -D
yarn add @rsbuild/core @rsbuild/plugin-plugin-react -D
pnpm add @rsbuild/core @rsbuild/plugin-react -D
```

--------------------------------

### Install Storybook HTML RSBuild

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/framework/vanilla.mdx

Installs the necessary Storybook HTML framework package for Rsbuild. This enables the rendering of vanilla stories within your Rsbuild project.

```bash
npm install storybook-html-rsbuild -D
# or
yarn add storybook-html-rsbuild -D
# or
pnpm add storybook-html-rsbuild -D
```

--------------------------------

### Install Storybook Web Components (Lit) with Rsbuild

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Installs the packages needed to configure Storybook for Web Components (specifically Lit) using Rsbuild. This includes the Rsbuild plugin for Web Components, Storybook, and the Lit library.

```bash
# Install core dependencies
npm install --save-dev storybook-web-components-rsbuild @rsbuild/core

# Install Storybook
npm install --save-dev storybook

# Install Lit (if not already installed)
npm install lit
```

--------------------------------

### Install Rslib Addon

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/integrations/rslib.mdx

Installs the 'storybook-addon-rslib' package as a development dependency using a package manager.

```bash
npm install storybook-addon-rslib -D
yarn add storybook-addon-rslib -D
```

--------------------------------

### Install Storybook React with Rsbuild

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Installs the necessary dependencies to set up Storybook for a React project using Rsbuild as the builder. This includes core Storybook packages, the Rsbuild plugin for React, and React peer dependencies.

```bash
# Install core dependencies
npm install --save-dev storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react

# Install Storybook
npm install --save-dev storybook

# Install React peer dependencies (if not already installed)
npm install react react-dom

# Initialize Storybook (if starting fresh)
npx storybook@latest init --builder storybook-builder-rsbuild
```

--------------------------------

### Install Storybook Vue 3 with Rsbuild

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Installs the dependencies required for a Vue 3 project to use Storybook with Rsbuild. This involves installing the Rsbuild plugin for Vue 3, Storybook, and Vue itself.

```bash
# Install core dependencies
npm install --save-dev storybook-vue3-rsbuild @rsbuild/core @rsbuild/plugin-vue

# Install Storybook
npm install --save-dev storybook

# Install Vue peer dependencies (if not already installed)
npm install vue

# Initialize Storybook
npx storybook@latest init --builder storybook-builder-rsbuild
```

--------------------------------

### Basic Rsbuild Configuration for Rspack

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/integrations/rspack.mdx

Sets up a basic Rsbuild configuration file (`rsbuild.config.ts`) that includes the React plugin. This configuration is essential for Rsbuild to function with Rspack projects.

```typescript
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'

export default defineConfig({
  plugins: [pluginReact()],
})
```

--------------------------------

### Setup Storybook with Modern.js Rsbuild

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/integrations/modernjs.mdx

Configure your `.storybook/main.ts` file to use the `storybook-addon-modernjs` and `storybook-react-rsbuild` framework. This setup ensures Storybook loads your Rsbuild configurations from your Modern.js project.

```typescript
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
```

--------------------------------

### React Component Story with TypeScript

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Provides an example of creating a fully-typed story for a React component using TypeScript. This includes defining component props, meta information, and different story variations.

```typescript
// Button.tsx
import React from 'react'

interface ButtonProps {
  primary?: boolean
  backgroundColor?: string
  size?: 'small' | 'medium' | 'large'
  label: string
  onClick?: () => void
}

export const Button = ({
  primary = false,
  size = 'medium',
  backgroundColor,
  label,
  ...props
}: ButtonProps) => {
  const mode = primary ? 'primary' : 'secondary'
  return (
    <button
      type="button"
      className={`button button--${size} button--${mode}`}
      style={{ backgroundColor }}
      {...props}
    >
      {label}
    </button>
  )
}
```

```typescript
// Button.stories.ts
import type { Meta, StoryObj } from '@storybook/react'
import { fn } from 'storybook/test'
import { Button } from './Button'

const meta = {
  title: 'Example/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  args: { onClick: fn() },
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof meta>

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
}

export const Secondary: Story = {
  args: {
    label: 'Button',
  },
}

export const Large: Story = {
  args: {
    size: 'large',
    label: 'Button',
  },
}

export const Small: Story = {
  args: {
    size: 'small',
    label: 'Button',
  },
}
```

--------------------------------

### Configure Storybook to Use Rsbuild Builder

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/integrations/rspack.mdx

Configures Storybook's `main.ts` file to specify `storybook-react-rsbuild` as the framework. This ensures that Storybook utilizes the Rsbuild builder for Rspack projects.

```typescript
import { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
}

export default config
```

--------------------------------

### Custom Rsbuild Configuration for Storybook via rsbuildFinal Hook

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Example of customizing Rsbuild configuration within Storybook using the `rsbuildFinal` hook. This allows for modifications to aliases, plugins, and Rspack rules. It uses `@rsbuild/core` for merging configurations.

```typescript
// .storybook/main.ts
import type { StorybookConfig } from 'storybook-react-rsbuild'
import { mergeRsbuildConfig } from '@rsbuild/core'

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  framework: {
    name: 'storybook-react-rsbuild',
    options: {},
  },
  rsbuildFinal: async (config, options) => {
    // Merge custom Rsbuild config
    return mergeRsbuildConfig(config, {
      source: {
        alias: {
          '@components': './src/components',
        },
      },
      plugins: [
        // Add custom Rsbuild plugins
      ],
      tools: {
        rspack: (config, { addRules, appendPlugins }) => {
          // Add custom Rspack rules
          addRules({
            test: /\.svg$/,
            type: 'asset/resource',
          })
          return config
        },
      },
    })
  },
}

export default config

```

--------------------------------

### Setup Storybook with Modern.js Module Federation

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/integrations/modernjs.mdx

When using Module Federation with Modern.js, configure your `.storybook/main.ts` to include the `@module-federation/storybook-addon` and manually pass the `remotes` option. Storybook cannot infer this automatically.

```typescript
import type { StorybookConfig } from 'storybook-react-rsbuild'
import moduleFederationConfig from '../module-federation.config'

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    'storybook-addon-modernjs',
    {
      name: '@module-federation/storybook-addon',
      options: {
        remotes: moduleFederationConfig.remotes,
      },
    },
  ],
  framework: ['storybook-react-rsbuild'],
}
```

--------------------------------

### Integrate Modern.js Addon for Application Configuration in Storybook

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Details the integration of the `storybook-addon-modernjs` to load Modern.js application configuration within Storybook. It includes the `modern.config.ts` setup and the corresponding Storybook main configuration.

```typescript
// modern.config.ts
import { appTools, defineConfig } from '@modern-js/app-tools'

export default defineConfig({
  plugins: [
    appTools({
      bundler: 'rspack',
    }),
  ],
  source: {
    alias: {
      '@': './src',
    },
  },
})
```

```typescript
// .storybook/main.ts
import type { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['storybook-addon-modernjs'],
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      modernjs: {
        configPath: './modern.config.ts',
      },
    },
  },
}
```

--------------------------------

### Reuse Custom Rspack Options in Rsbuild Config

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/integrations/rspack.mdx

Demonstrates how to import and merge a custom Rspack configuration (`rspack.config.cjs`) into the Rsbuild configuration (`rsbuild.config.ts`). This allows for reusing application-specific Rspack rules and plugins within Storybook's build process via `tools.rspack`.

```typescript
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import rspackConfig from './rspack.config.cjs'

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: (config) => {
      const lessLoader = rspackConfig.module.rules[2]
      config.module!.rules!.push(lessLoader)
      return config
    },
  },
})
```

--------------------------------

### Customize Merged Rsbuild Config in Storybook

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/options/builder-options.mdx

Provides a hook (`rsbuildFinal`) to modify the Rsbuild configuration after it has been merged from both your project's setup and the Storybook builder. You can use `mergeRsbuildConfig` for deep merging. The `configType` ('DEVELOPMENT' or 'PRODUCTION') allows conditional modifications.

```javascript
// use `mergeRsbuildConfig` to recursively merge Rsbuild options
import { mergeRsbuildConfig } from '@rsbuild/core'

const config = {
  async rsbuildFinal(config, { configType }) {
    return mergeRsbuildConfig(config, {
      resolve: {
        alias: { foo: 'bar' },
      },
    })
  },
}

export default config
```

--------------------------------

### Storybook Configuration: Static Directories

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/react-testing/src/stories/Configure.mdx

Illustrates how to configure Storybook to load static files like fonts and images. It uses the `staticDirs` option in the Storybook configuration to specify directories that Storybook should serve.

```javascript
// In your main.js or similar config file:
module.exports = {
  // ... other config options
  staticDirs: ['../public'], // Example: serves files from the public folder
};

```

--------------------------------

### Storybook Web Components (Lit) Configuration with Rsbuild

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Basic Storybook configuration for a Web Components project using Lit and the Rsbuild builder. It sets up stories, addons, and framework details. Dependencies include 'storybook-web-components-rsbuild'.

```typescript
// .storybook/main.ts
import { dirname, join } from 'node:path'
import type { StorybookConfig } from 'storybook-web-components-rsbuild'

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
}

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-docs',
    '@chromatic-com/storybook',
  ],
  framework: {
    name: getAbsolutePath('storybook-web-components-rsbuild'),
    options: {},
  },
}

export default config

```

--------------------------------

### Storybook Addon and Layout Styles

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/vanilla-ts/src/stories/Configure.mdx

These CSS rules define the appearance and layout of Storybook addons, text elements, and images. They include specific styling for borders, backgrounds, margins, and positioning, as well as responsive adjustments for different screen widths to ensure optimal display on various devices.

```css
  .sb-addon-text {
    padding-left: 48px;
    max-width: 240px;
  }

  .sb-addon-text h4 {
    padding-top: 0px;
  }

  .sb-addon-img {
    position: absolute;
    left: 345px;
    top: 0;
    height: 100%;
    width: 200%;
    overflow: hidden;
  }

  .sb-addon-img img {
    width: 650px;
    transform: rotate(-15deg);
    margin-left: 40px;
    margin-top: -72px;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
    backface-visibility: hidden;
  }

  @media screen and (max-width: 800px) {
    .sb-addon-img {
      left: 300px;
    }
  }

  @media screen and (max-width: 600px) {
    .sb-section {
      flex-direction: column;
    }

    .sb-features-grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .sb-socials {
      grid-template-columns: repeat(2, 1fr);
    }

    .sb-addon {
      height: 280px;
      align-items: flex-start;
      padding-top: 32px;
      overflow: hidden;
    }

    .sb-addon-text {
      padding-left: 24px;
    }

    .sb-addon-img {
      right: 0;
      left: 0;
      top: 130px;
      bottom: 0;
      overflow: hidden;
      height: auto;
      width: 124%;
    }

    .sb-addon-img img {
      width: 1200px;
      transform: rotate(-12deg);
      margin-left: 0;
      margin-top: 48px;
      margin-bottom: -40px;
      margin-left: -24px;
    }
  }
```

--------------------------------

### Configure Storybook with Static Asset Loading

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/rspack-react-18/src/stories/Configure.mdx

This configuration snippet demonstrates how to load static files like fonts and images into Storybook. It utilizes the `staticDirs` option to specify directories that Storybook should serve. This is crucial for ensuring your project's assets are accessible within your stories.

```javascript
// In your main.js or main.ts file

module.exports = {
  // ... other configurations
  staticDirs: [
    '../public', // Example: serves files from the 'public' directory
    './assets', // Example: serves files from an 'assets' directory
  ],
  // ... other configurations
};

```

--------------------------------

### Storybook Configuration: Loading Assets

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/react-16/src/stories/Configure.mdx

This snippet illustrates how to configure Storybook to load static assets like fonts and images. It highlights the use of the `staticDirs` configuration option to specify directories that Storybook should serve. This is crucial for projects that rely on external files for their components.

```javascript
// In your Storybook configuration file (e.g., .storybook/main.js)
module.exports = {
  // ... other configurations
  staticDirs: ['../public/static'], // Example: specifies a 'static' folder in 'public'
};

```

--------------------------------

### Configure addonDocs Presets in Storybook Rsbuild

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/options/builder-options.mdx

Allows forwarding preset options to the bundled `@storybook/addon-docs`. This enables customization of the documentation generation process, such as including remark plugins for Markdown processing. It takes an object for configuration.

```javascript
// .storybook/main.mjs
import remarkGfm from 'remark-gfm'

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        addonDocs: {
          mdxPluginOptions: {
            mdxCompileOptions: {
              remarkPlugins: [remarkGfm],
            },
          },
        },
      },
    },
  },
}

export default config
```

--------------------------------

### Storybook Rsbuild CSS Styles

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/rspack-react-18/src/stories/Configure.mdx

This snippet contains various CSS rules for styling elements within the Storybook Rsbuild project. It includes styles for general layout, specific components like 'sb-addon-text' and 'sb-addon-img', and media queries for responsive design adjustments.

```css
  border: 1px solid rgba(0, 0, 0, 0.05);
    background: #EEF3F8;
    height: 180px;
    margin-bottom: 48px;
    overflow: hidden;
  }

  .sb-addon-text {
    padding-left: 48px;
    max-width: 240px;
  }

  .sb-addon-text h4 {
    padding-top: 0px;
  }

  .sb-addon-img {
    position: absolute;
    left: 345px;
    top: 0;
    height: 100%;
    width: 200%;
    overflow: hidden;
  }

  .sb-addon-img img {
    width: 650px;
    transform: rotate(-15deg);
    margin-left: 40px;
    margin-top: -72px;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
    backface-visibility: hidden;
  }

  @media screen and (max-width: 800px) {
    .sb-addon-img {
      left: 300px;
    }
  }

  @media screen and (max-width: 600px) {
    .sb-section {
      flex-direction: column;
    }

    .sb-features-grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .sb-socials {
      grid-template-columns: repeat(2, 1fr);
    }

    .sb-addon {
      height: 280px;
      align-items: flex-start;
      padding-top: 32px;
      overflow: hidden;
    }

    .sb-addon-text {
      padding-left: 24px;
    }

    .sb-addon-img {
      right: 0;
      left: 0;
      top: 130px;
      bottom: 0;
      overflow: hidden;
      height: auto;
      width: 124%;
    }

    .sb-addon-img img {
      width: 1200px;
      transform: rotate(-12deg);
      margin-left: 0;
      margin-top: 48px;
      margin-bottom: -40px;
      margin-left: -24px;
    }
  }

```

--------------------------------

### Storybook React Configuration with Rsbuild

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Basic Storybook configuration for a React project using the Rsbuild builder. It specifies stories, addons, framework details, and TypeScript options for React docgen. Dependencies include 'storybook-react-rsbuild'.

```typescript
// .storybook/main.ts
import { dirname, join } from 'node:path'
import type { StorybookConfig } from 'storybook-react-rsbuild'

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
}

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-docs',
    '@chromatic-com/storybook',
  ],
  framework: {
    name: getAbsolutePath('storybook-react-rsbuild'),
    options: {
      builder: {
        lazyCompilation: true,
        fsCache: true,
      },
      strictMode: true,
      legacyRootApi: false,
    },
  },
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      shouldRemoveUndefinedFromOptional: true,
      propFilter: () => true,
    },
    check: true,
  },
}

export default config

```

--------------------------------

### Integrate Rslib Addon for Component Libraries in Storybook

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Explains how to use the `storybook-addon-rslib` to load Rslib configuration for component library development. It shows the necessary configuration in `rslib.config.ts` and how to reference it in `.storybook/main.ts`.

```typescript
// rslib.config.ts
import { defineConfig } from '@rslib/core'

export default defineConfig({
  lib: [
    {
      format: 'esm',
      output: {
        distPath: {
          root: './dist/esm',
        },
      },
      source: {
        entry: {
          index: './src/index.ts',
        },
      },
    },
  ],
  source: {
    alias: {
      '@': './src',
    },
  },
})
```

```typescript
// .storybook/main.ts
import type { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['storybook-addon-rslib'],
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      rslib: {
        configPath: './rslib.config.ts',
        libIndex: 0,
        modifyLibConfig: (config) => {
          // Modify lib config if needed
        },
        modifyLibRsbuildConfig: (config) => {
          // Modify the merged Rsbuild config if needed
          delete config.output?.externals
        },
      },
    },
  },
}
```

--------------------------------

### Configure Storybook Main File (main.ts)

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/framework/vanilla.mdx

Configures the Storybook main file (`.storybook/main.ts`) to use the `storybook-html-rsbuild` framework. It allows for customization of the final Rsbuild configuration through the `rsbuildFinal` option.

```typescript
import { StorybookConfig } from 'storybook-html-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-html-rsbuild',
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return config
  },
}

export default config
```

--------------------------------

### Configure Storybook for Web Components with Rsbuild

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/framework/web-components.mdx

This JavaScript code snippet shows how to configure your Storybook's main.ts file for Web Components and Rsbuild. It specifies the framework and allows for customization of the final Rsbuild configuration.

```javascript
import { StorybookConfig } from 'storybook-web-components-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-web-components-rsbuild',
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return config
  },
}

export default config
```

--------------------------------

### CSS Styling for Storybook RSBuild Components

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/lit/src/stories/Configure.mdx

This CSS code defines the visual presentation of various components, such as add-ons, text elements, and images. It also includes media queries to ensure responsive design across different devices and screen sizes.

```css
  .sb-addon-text {
    padding-left: 48px;
    max-width: 240px;
  }

  .sb-addon-text h4 {
    padding-top: 0px;
  }

  .sb-addon-img {
    position: absolute;
    left: 345px;
    top: 0;
    height: 100%;
    width: 200%;
    overflow: hidden;
  }

  .sb-addon-img img {
    width: 650px;
    transform: rotate(-15deg);
    margin-left: 40px;
    margin-top: -72px;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
    backface-visibility: hidden;
  }

  @media screen and (max-width: 800px) {
    .sb-addon-img {
      left: 300px;
    }
  }

  @media screen and (max-width: 600px) {
    .sb-section {
      flex-direction: column;
    }

    .sb-features-grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .sb-socials {
      grid-template-columns: repeat(2, 1fr);
    }

    .sb-addon {
      height: 280px;
      align-items: flex-start;
      padding-top: 32px;
      overflow: hidden;
    }

    .sb-addon-text {
      padding-left: 24px;
    }

    .sb-addon-img {
      right: 0;
      left: 0;
      top: 130px;
      bottom: 0;
      overflow: hidden;
      height: auto;
      width: 124%;
    }

    .sb-addon-img img {
      width: 1200px;
      transform: rotate(-12deg);
      margin-left: 0;
      margin-top: 48px;
      margin-bottom: -40px;
      margin-left: -24px;
    }
  }

```

--------------------------------

### Storybook Addon CSS Styling

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/vue3/src/stories/Configure.mdx

This CSS snippet defines styles for various elements within a Storybook addon, including text containers, images, and layout grids. It also includes media queries for responsive adjustments on smaller screens.

```css
.sb-addon-text {
    padding-left: 48px;
    max-width: 240px;
  }

  .sb-addon-text h4 {
    padding-top: 0px;
  }

  .sb-addon-img {
    position: absolute;
    left: 345px;
    top: 0;
    height: 100%;
    width: 200%;
    overflow: hidden;
  }

  .sb-addon-img img {
    width: 650px;
    transform: rotate(-15deg);
    margin-left: 40px;
    margin-top: -72px;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
    backface-visibility: hidden;
  }

  @media screen and (max-width: 800px) {
    .sb-addon-img {
      left: 300px;
    }
  }

  @media screen and (max-width: 600px) {
    .sb-section {
      flex-direction: column;
    }

    .sb-features-grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .sb-socials {
      grid-template-columns: repeat(2, 1fr);
    }

    .sb-addon {
      height: 280px;
      align-items: flex-start;
      padding-top: 32px;
      overflow: hidden;
    }

    .sb-addon-text {
      padding-left: 24px;
    }

    .sb-addon-img {
      right: 0;
      left: 0;
      top: 130px;
      bottom: 0;
      overflow: hidden;
      height: auto;
      width: 124%;
    }

    .sb-addon-img img {
      width: 1200px;
      transform: rotate(-12deg);
      margin-left: 0;
      margin-top: 48px;
      margin-bottom: -40px;
      margin-left: -24px;
    }
  }
```

--------------------------------

### Configure Static Asset Loading in Storybook

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/react-18/src/stories/Configure.mdx

This section explains how to load static files like fonts and images into your Storybook project. It highlights the use of the `staticDirs` configuration option to specify directories that Storybook should serve.

```javascript
// In your main.js or similar Storybook config file
module.exports = {
  // ... other configurations
  staticDirs: ['../public'], // Example: serve files from the 'public' directory
};

```

--------------------------------

### Configure Storybook for React Rsbuild

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/framework/react.mdx

This code snippet demonstrates the configuration for integrating Storybook with React and Rsbuild. It specifies the framework to be used and allows for customization of the final Rsbuild configuration.

```javascript
import { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return config
  },
}

export default config
```

--------------------------------

### Import Assets and Components in Storybook (JSX)

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/vanilla-ts/src/stories/Configure.mdx

This snippet demonstrates how to import various assets (SVG, PNG) and a React component (`Meta`) commonly used in Storybook configuration files. It also defines a simple SVG component for a right arrow.

```jsx
import { Meta } from '@storybook/addon-docs/blocks'

import Github from './assets/github.svg'
import Discord from './assets/discord.svg'
import Youtube from './assets/youtube.svg'
import Tutorials from './assets/tutorials.svg'
import Styling from './assets/styling.png'
import Context from './assets/context.png'
import Assets from './assets/assets.png'
import Docs from './assets/docs.png'
import Share from './assets/share.png'
import FigmaPlugin from './assets/figma-plugin.png'
import Testing from './assets/testing.png'
import Accessibility from './assets/accessibility.png'
import Theming from './assets/theming.png'
import AddonLibrary from './assets/addon-library.png'

export const RightArrow = () => (
  <svg
    viewBox="0 0 14 14"
    width="8px"
    height="14px"
    style={{
      marginLeft: '4px',
      display: 'inline-block',
      shapeRendering: 'inherit',
      verticalAlign: 'middle',
      fill: 'currentColor',
      'path fill': 'currentColor',
    }}>
    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
  </svg>
)

<Meta title="Configure your project" />
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/react-testing/src/stories/Configure.mdx

A basic Storybook Meta configuration object used to define metadata for Storybook stories. It specifies the title under which the stories will be organized in the Storybook UI.

```javascript
import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Configure your project" />;

```

--------------------------------

### Storybook Vue 3 Configuration with Rsbuild

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Basic Storybook configuration for a Vue 3 project using the Rsbuild builder. It defines stories, addons, and framework details. Dependencies include 'storybook-vue3-rsbuild'.

```typescript
// .storybook/main.ts
import { dirname, join } from 'node:path'
import type { StorybookConfig } from 'storybook-vue3-rsbuild'

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
}

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-docs',
    '@chromatic-com/storybook',
  ],
  framework: {
    name: getAbsolutePath('storybook-vue3-rsbuild'),
    options: {
      builder: {
        fsCache: true,
      },
    },
  },
}

export default config

```

--------------------------------

### Configure Asset Prefix for Rsbuild in Storybook

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/faq.mdx

This snippet shows how to set the `assetPrefix` in Rsbuild's configuration to deploy Storybook to a subdirectory or subpath. It ensures that all asset paths are relative to the specified prefix, which is recommended for deployment.

```typescript
const config: StorybookConfig = {
  // --snip--
  rsbuildFinal: (config) => {
    config.output ??= {}
    config.output.assetPrefix = '/sb-path/'
    return config
  },
  // --snip--
}
```

--------------------------------

### Rslib Addon Options Interface

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/integrations/rslib.mdx

Defines the TypeScript interface for configuring the Rslib addon options. These options allow customization of how Rslib configurations are loaded and modified for Rsbuild within Storybook.

```typescript
export interface AddonOptions {
  rslib?: {
    /**
     * `cwd` passed to loadConfig of Rslib
     * @default undefined
     */
    cwd?: string
    /**
     *  `path` passed to loadConfig of Rslib
     * @default undefined
     */
    configPath?: string
    /**
     * The lib config index in `lib` field to use, will be merged with the other fields in the config.
     * Set to a number to use the lib config at that index.
     * Set to `false` to disable using the lib config.
     * @default 0
     */
    libIndex?: number | false
    /**
     * Modify the Rslib lib config before transforming it to Rsbuild config which will be merged
     * with Storybook. You can modify the configuration in the config parameters in place.
     * @experimental subject to change at any time
     * @default undefined
     */
    modifyLibConfig?: (config: LibConfig) => void
    /**
     * Modify the Rsbuild config transformed from lib config before merging with Storybook
     * config. You can modify the configuration in the config parameters in place.
     * @experimental subject to change at any time
     * @default undefined
     */
    modifyLibRsbuildConfig?: (config: RsbuildConfig) => void
  }
}
```

--------------------------------

### Responsive Layout Adjustments for Storybook Add-ons (CSS)

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/react-16/src/stories/Configure.mdx

Responsive CSS rules to adjust the layout of Storybook add-on components for smaller screens. This includes changes to flex direction, grid columns, and element sizing.

```css
@media screen and (max-width: 600px) {
  .sb-section {
    flex-direction: column;
  }

  .sb-features-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .sb-socials {
    grid-template-columns: repeat(2, 1fr);
  }

  .sb-addon {
    height: 280px;
    align-items: flex-start;
    padding-top: 32px;
    overflow: hidden;
  }

  .sb-addon-text {
    padding-left: 24px;
  }
}
```

--------------------------------

### Configure Storybook for Vue with Rsbuild

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/framework/vue.mdx

This snippet shows the configuration for `.storybook/main.ts` to enable Storybook support for Vue components within an Rsbuild project. It specifies the framework and allows customization of the final Rsbuild configuration.

```js
import { StorybookConfig } from 'storybook-vue3-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-vue3-rsbuild',
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return config
  },
}

export default config
```

--------------------------------

### Define Storybook Add-on Image Styles (CSS)

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/react-16/src/stories/Configure.mdx

Styles for images within Storybook add-ons, positioning them absolutely and controlling their size and rotation. Includes adjustments for different screen sizes.

```css
.sb-addon-img {
  position: absolute;
  left: 345px;
  top: 0;
  height: 100%;
  width: 200%;
  overflow: hidden;
}

.sb-addon-img img {
  width: 650px;
  transform: rotate(-15deg);
  margin-left: 40px;
  margin-top: -72px;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0);
  backface-visibility: hidden;
}

@media screen and (max-width: 800px) {
  .sb-addon-img {
    left: 300px;
  }
}

@media screen and (max-width: 600px) {
  .sb-addon-img {
    right: 0;
    left: 0;
    top: 130px;
    bottom: 0;
    overflow: hidden;
    height: auto;
    width: 124%;
  }

  .sb-addon-img img {
    width: 1200px;
    transform: rotate(-12deg);
    margin-left: 0;
    margin-top: 48px;
    margin-bottom: -40px;
    margin-left: -24px;
  }
}
```

--------------------------------

### Configure Rslib Addon in Storybook

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/integrations/rslib.mdx

Configures the Rslib addon in the Storybook main configuration file (`.storybook/main.ts`). This can be done automatically by listing the addon or manually with custom options.

```typescript
export default {
  addons: ['storybook-addon-rslib'],
}
```

```typescript
export default {
  addons: [
    {
      name: 'storybook-addon-rslib',
      options: {
        // Check options section.
      },
    },
  ],
}
```

--------------------------------

### Define Storybook Add-on Text Styles (CSS)

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/sandboxes/react-16/src/stories/Configure.mdx

Styles for the text content within Storybook add-ons, including padding and max-width. These styles control the layout and appearance of text elements like headings.

```css
.sb-addon-text {
  padding-left: 48px;
  max-width: 240px;
}

.sb-addon-text h4 {
  padding-top: 0px;
}
```

--------------------------------

### Rsbuild BuilderOptions Type Definition

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Defines the available configuration options for the Rsbuild builder in Storybook. These options allow customization of the build process, including configuration file paths, compilation modes, caching, and environment settings.

```typescript
export type BuilderOptions = {
  /**
   * Path to rsbuild.config file, relative to CWD.
   */
  rsbuildConfigPath?: string

  /**
   * Enable Rspack's lazy compilation (experimental).
   */
  lazyCompilation?: boolean

  /**
   * Enable Rspack's persistent cache (experimental).
   * We continue to use the name `fsCache` here to maintain
   * better compatibility with the webpack builder.
   */
  fsCache?: boolean

  /**
   * Which environment to use from the Rsbuild config.
   */
  environment?: string

  /**
   * @storybook/addon-docs options
   */
  addonDocs?: any
}
```

--------------------------------

### Integrate Webpack-Based Addons in Storybook Rsbuild

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/options/builder-options.mdx

Enables the use of webpack-based Storybook addons by configuring them through the `webpackAddons` field. This leverages Rspack's compatibility with webpack 5. The configuration mirrors Storybook's standard `addons` option.

```javascript
const config: StorybookConfig = {
  // --snip--
  webpackAddons: [
    {
      name: '@storybook/addon-coverage',
      options: {
        istanbul: {
          include: ['src/**/*.stories.@(js|jsx|ts|tsx|mdx)']
          exclude: [],
        },
      },
    },
  ],
  // --snip--
}
```

--------------------------------

### Specify Rsbuild Environment in Storybook

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/options/builder-options.mdx

Used to inform Storybook which specific Rsbuild environment configuration to use when multiple named environments are defined in your project. This ensures the correct build settings are applied. It takes a string value representing the environment name.

```javascript
// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        environment: 'web-storybook',
      },
    },
  },
}

export default config
```

--------------------------------

### Load External Rsbuild Configuration for Storybook

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Demonstrates how to specify an external Rsbuild configuration file (rsbuild.config.ts) within Storybook's main configuration to customize the build process for Storybook. This allows for shared configurations between your application and Storybook.

```typescript
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'

export default defineConfig({
  plugins: [pluginReact()],
  source: {
    alias: {
      '@': './src',
    },
  },
  output: {
    sourceMap: {
      js: 'source-map',
    },
  },
})
```

```typescript
// .storybook/main.ts
import type { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.tsx'],
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        rsbuildConfigPath: './rsbuild.config.ts',
      },
    },
  },
}
```

--------------------------------

### Rsbuild TypescriptOptions Type Definition

Source: https://context7.com/rspack-contrib/storybook-rsbuild/llms.txt

Defines TypeScript-specific configuration options for the Rsbuild builder, focusing on documentation generation and type checking. It includes settings for React docgen, type checking behavior, and integration with `fork-ts-checker-webpack-plugin`.

```typescript
export interface TypescriptOptions {
  /**
   * Sets the type of Docgen when working with React and TypeScript
   * @default 'react-docgen'
   */
  reactDocgen?: 'react-docgen-typescript' | 'react-docgen' | false

  /**
   * Configures react-docgen-typescript-plugin
   */
  reactDocgenTypescriptOptions?: {
    shouldExtractLiteralValuesFromEnum?: boolean
    shouldRemoveUndefinedFromOptional?: boolean
    propFilter?: (prop: any) => boolean
  }

  /**
   * Enable type checking
   */
  check?: boolean

  /**
   * Configures @rsbuild/plugin-type-check, using
   * fork-ts-checker-webpack-plugin under the hood.
   */
  checkOptions?: {
    typescript?: {
      configFile?: string
      memoryLimit?: number
    }
    devServer?: boolean
    issue?: {
      exclude?: Array<{ file: string }>
    }
  }
}
```

--------------------------------

### Specify Rsbuild Config Path in Storybook

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/options/builder-options.mdx

Allows explicitly defining the path to your Rsbuild configuration file if it's not in the default location. This ensures Storybook uses the correct project configuration. No external dependencies are required for this basic configuration.

```javascript
// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        rsbuildConfigPath: '.storybook/customRsbuildConfig.js',
      },
    },
  },
}

export default config
```

--------------------------------

### Enable Persistent Cache (fsCache) with Rsbuild

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/website/docs/guide/options/builder-options.mdx

Activates Rspack's experimental persistent cache, allowing Storybook to reuse previous build results. This requires `@rsbuild/core` version 1.2.5 or higher and can significantly speed up subsequent builds. It's a boolean flag.

```javascript
// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        fsCache: true,
      },
    },
  },
}

export default config
```

--------------------------------

### Import and Use React Docgen TypeScript Plugin in Vite

Source: https://github.com/rspack-contrib/storybook-rsbuild/blob/main/packages/framework-react/src/plugins/react-docgen-typescript/README.md

Demonstrates how to import and apply the react-docgen-typescript plugin within a Vite configuration file. This plugin is essential for extracting and displaying component documentation from React TypeScript components.

```typescript
import reactDocgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript'

export default {
  plugins: [reactDocgenTypescript()],
}
```