Open6

storybook のストーリーの命名のベストプラクティスを考えたい

クロパンダクロパンダ

Capture UI variations as “stories”

引用

だから、「特定の UI があって、そのバリエーションを表す名前をつける」というのが基本方針になりそう

クロパンダクロパンダ

Default と名づけるの、公式もやってはいるけど「何をデフォルトとするか」があやふやだから避けたい気持ちがある

というのも、以下の2パターンが考えられるから

  • 実際のアプリのデータを入れる
  • 完全なモックデータを入れる

前者は Actual、後者は Plain とか…?(Plain はだいぶ微妙かも)

クロパンダクロパンダ

デザインシステムが storybook を使う場合と、アプリが storybook を使う場合だとまた変わってきそう。
前者は結構小さいコンポーネント単位になるから単純に命名できる。
後者はデザインシステムのコンポーネントを組み合わせた状態が1単位になるから、「UI のバリエーション」というのがかなり複雑になる(ボタン1つの色、サイズみたいな単純な prop が定義できることは稀)

クロパンダクロパンダ

例えば zenn のこの UI への storybook を書くとしたらどうなる?

  • ArticleCard.stories.tsx
    • 左のは Visited、右のは何…?
    • 左は Liked、右は WithNoLike?
    • あと、日付ごとに1日前、1ヶ月前の story が書きたかったらなんて名付ける?
    • "Default" を作る場合は左と右のどちらを選ぶ?(あるいは sample title みたいな架空のカードを作る?)