Posted at

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

More than 1 year has passed since last update.

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/