rebassのComponentをStorybookのStoryに追加する際のひと手間

rebassを使ったreactプロジェクトにstorybookをセットアップした際に行ったことをメモ

rebassのドキュメント Getting Startedを見ると、rebassが提供するComponentを利用する場合、ルートのComponentを <Provider /> というコンポーネントでラップする必要があるとの記述があります。
アプリケーション側では、indexやAppといったルートになるComponent内で<Provider />でのラッピングを行えばいいのですが、Storybook側でも同様のことを行う必要があります。

前提

create-react-app で作成したプロジェクトで getstorybook した直後に作成されたconfig.js

config.js

import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

ひと手間

次のように変更します。

config.js

import React from "react";
import { configure, addDecorator } from "@storybook/react";
import { Provider } from "rebass";

const ThemeDecorator = storyFn => <Provider>{storyFn()}</Provider>;
addDecorator(ThemeDecorator);

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

Storybookのドキュメントを見ると分かる通り、まさに今回のケースにピッタリのAPI(addDecorator)が用意されていたという感じです。

参考

https://github.com/jxnblk/rebasse/issues/354
https://storybook.js.org/addons/introduction/