Storybook（v7, vite build）をReact/tailwind/MUIに入れる

bisquit_dev 2023/05/11

Storybookのinit

npx storybook@latest init --builder=vite

※ storybook v7からはstorybook monorepoにvite builderが入ったので、--builder=@storybook/builder-viteじゃなくて良い

bisquit_dev 2023/05/11に更新

vite用の設定

init --builder-viteのコマンドで設定されるので基本はない。

ただし、tsのpathsを使っている場合はエイリアスを設定したいのでvite-tsconfig-pathsを使う

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

const config: StorybookConfig = {
  ...
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  // 追加
  async viteFinal(config) {
    return mergeConfig(config, {
      plugins: [tsconfigPaths()],
    });
  },
};

bisquit_dev 2023/05/11に更新

tailwind用の設定

.storybook/preview.tsx

import type { Preview } from '@storybook/react';

// ビルドされたtailwindのcssをimportする
import 'path/to/tailwind.generated.css';

const preview: Preview = {
  ...
  // tailwindで[important selector](https://tailwindcss.com/docs/configuration#selector-strategy)を使っている場合はデコレータで調整する
  decorators: [
    (Story) => (
      <div id="app">
        <Story />
      </div>
    ),
  ],
};

なお、必要に応じて.storybook/preview.tsxにjsxのシンタックスを通すためtsconfigを調整する

tsconfig.json

{
  // .storybook配下のjsxも含める
  "include": ["**/*.ts", "**/*.tsx", ".storybook/**/*.tsx"],
  // import reactせずにjsxを通す
  "jsx": "react-jsx",
  ...
}

bisquit_dev 2023/05/11

MUI用の設定

npm i -D @storybook/addon-styling

.storybook/main.ts

const config: StorybookConfig = {
  ...
  addons: [
    ...
    '@storybook/addon-styling',
  ],
};

.storybook/preview.tsx

import type { Preview } from '@storybook/react';

import 'path/to/tailwind.generated.css';

// 追加
import { CssBaseline, ThemeProvider } from '@mui/material';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import theme from 'path/to/mui/theme';

const preview: Preview = {
  ...
  decorators: [
    (Story) => (
      <div id="app">
        <Story />
      </div>
    ),
    // 追加
    withThemeFromJSXProvider({
      Provider: ThemeProvider,
      GlobalStyles: CssBaseline,
      themes: { light: theme },
    }),
  ],
};

bisquit_dev 2023/05/11

(appendix) ファビコンの設定

.storybook/main.ts

const config: StorybookConfig = {
  ...
  // v7からのstatic assetsの指定方法
  staticDirs: ['../public'],
};

.storybook/manager-head.html

// publicの配置した任意のアイコンパスを指定
<link rel="icon" href="/favicon.ico" />
<!-- pngならこっち -->
<link rel="icon" type="image/png" href="/favicon.png">