Using Storybook

Compile Bamboo styles with Storybook's Vite builder.

Storybook is supported when it uses the Vite builder. A webpack-based Storybook cannot run Bamboo's compiler.

Install Bamboo

In the application that owns Storybook:

pnpm install -D @bamboocss/dev @bamboocss/vite
pnpm bamboo init

Include story files in bamboo.config.ts, for example include: ['./src/**/*.{js,jsx,ts,tsx}', './stories/**/*.{js,jsx,ts,tsx}'].

Add Bamboo to Storybook's Vite build

.storybook/main.ts

import bamboocss from '@bamboocss/vite'
import { mergeConfig } from 'vite'
import type { StorybookConfig } from '@storybook/react-vite'
 
const config: StorybookConfig = {
  framework: '@storybook/react-vite',
  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  async viteFinal(config) {
    return mergeConfig(config, {
      plugins: [bamboocss()],
    })
  },
}
 
export default config

Use the matching @storybook/*-vite framework package for Vue, Svelte, or another supported framework.

Import the stylesheet

.storybook/preview.ts

import 'virtual:bamboo.css'

Add /// <reference types="@bamboocss/vite/client" /> to the application's Vite environment declaration file so TypeScript accepts the virtual import.

Do not add Bamboo to Storybook's PostCSS configuration. Generated style APIs require the Vite compiler.