tailwind.config.js から Storybook を自動生成するやつが欲しいメモ
そんなツールは現状ないっぽいので（もしあったら知りたい）、あったらいいなーと思うライブラリを構想していく。
既存ツールへの不満について
tailwind-config-viewer はデフォルトですごく良いと思うんだけど、カスタム plugin などへの対応がない。
たとえば自分の仕事で tailwind を使っている現場では font-size と line-height がひとかたまりになった .typography-16 みたいなクラスがあって、それはカスタム utility として実装してるんだけど、そういうものをドキュメントに乗せる機能がない（これを使うので corePlugins では lineHeight: false に設定している）。
あとまぁ単純に Storybook のエコシステムに乗れるツールのほうが良いと思ってて、タイトルのようなアプローチを取りたいと思っている。
拡張性とラクさを取りたい
設定ファイル無しで動くツールは魅力的ではあるが、設定が書けないだと経験上つらくなってくるので、デフォルトのコード生成だけを提供してあとは好きに書いてねというアプローチを取りたい。
そして Storybook の場合、CSF（ Component Story Format ）を強制しなくても良い。十分に薄く作っておけば、古いバージョンの storiesOf を使ってるプロジェクトでも問題なく導入できるはず（まぁ storiesOf をサポートするために頑張る必要は一切なくて、あくまで結果的にそうなるぐらいのシンプルさを保ちたいという話）。
イメージとしてはこんな感じが良い（名前は仮）
code:typescript
import { colorStory, spacingStory } from '@tailwind2storybook/react'
import tailwindConfig from '../tailwind.config'
export default {
title: 'tailwind.config.js',
decorators: [],
}
// この辺は自動生成
export const colors = colorStory(tailwindConfig)
export const spacing = spacingStory(tailwindConfig)
// この辺は自分で好きに書く
export const typography: Story = () => {
return (
<div>
{tailwindConfig.plugins.map(...)}
</div>
)
}
これなら storiesOf を使っていても問題なく使えるはず。
code:typescript
storiesOf('tailwind.config.js', module)
.add('colors', colorStory(tailwindConfig))
また MDX に対応するとかなりかっこいい感じに出来そう（ tailwind の場合ほしいのはドキュメントなので欲しい度が高い ）
code:md
# Colors
You can use these classes in tailwind!
<Story name="colors">
<ColorStory config={tailwindConfig} />
</Story>
もし作るとしたら
Tailwind の汎用性を考えると Storybook for HTML を主戦場にすべきなんだろうが、自分の使いたい用途を考えると @storybook/react または @storybook/mdx だけでいい。みんな React でないプロジェクトでも普通に MDX 使ってるんだろうか（もしそうなら後者だけを対象に設計すると良さそう）。