Storybook & Chromatic

[acid-chicken]

Summary

Storybook と Chromatic の導入

• コンポーネントのドキュメント整備ができるようになる
  • Storybook におけるドキュメントの主要部分である Story はイメージとしては Python や Rust の doctest に近い
• ビジュアルテストができるようになる
  • 単体テストが担えない部分を無理やり全部 Cypress にやらせなくてよくなる
  • スタイルが意図した通りに当たっているかなどを確認するためにサーバーを立ち上げるのは面倒
  • Cypress のテストケースを書くのはもっと大変
  • Chromatic が実際のスタイルの変化を検知するので Story がそのままスナップショットテストのテストケースになる

Tasks

• [ ] components
  • [ ] form
  • [x] global @ #10365
  • [ ] page
  • [x] Mk[A-B].* (w/o AiScript) @ #10475
  • [x] MkC.* @ #13830
  • [x] Mk[D-E].* @ #14118
  • [ ] Mk[F-H].*
  • [ ] Mk[I-L].*
  • [ ] MkM.*
  • [ ] MkN.*
  • [ ] Mk[O-P].* (w/o page)
  • [ ] MkR.*
  • [ ] MkS.*
  • [ ] MkT.*
  • [ ] MkU.*
  • [ ] Mk[V-Y].*
• [ ] pages (TBD)
• [ ] ui (TBD)
• [ ] widgets (TBD)

For Reviewers

CI で Chromatic に Storybook が投稿されると 3 つの checks が生えますが

checks	対応要否	内容
Storybook Publish	不要	Storybook が Publish されたか
UI Review	要	コンポーネントが期待通りに動作しているか
UI Tests	要	コンポーネントが実装した通り/書いたテスト通りに動作しているか

という違いがあるので

• このデザインはなんか違う気がするみたいなレビューは UI Review に
• スナップショットが上手く撮れていないとかインタラクションで変な動作をしているみたいなレビューは UI Tests に

お願いします

[syuilo]

すごそう

[acid-chicken]

形だけできたけどやらないといけないことが山積み

[acid-chicken]

具体的には Storybook の preview でコンポーネントのレンダリングに必要な部分のブートをやらないといけない（ストア、テーマ、ロケールなど）

[acid-chicken]

ロケール読み込みなどができた

[acid-chicken]

バックエンドのモック（アセットすら後側にあるので）やテーマの選択ができるようになった

https://user-images.githubusercontent.com/20679825/226416679-232f8416-3d82-4ed3-bd32-253d3f2af4b0.mp4

[acid-chicken]

CONTRIBUTING.md にこのリポジトリ独自のドメインについて軽い説明を書いたのでわからないところあれば聞いてほしい cc: @syuilo @tamaina @saschanaz

[acid-chicken]

storybookjs/storybook#17326

[acid-chicken]

ぬぅ……

[acid-chicken]

Interactions (ほぼ Cypress のコンポーネント版だけど)

https://user-images.githubusercontent.com/20679825/227724001-571f669b-bb55-41c2-a740-6071cc6826c8.mp4

[acid-chicken]

これを同時並行でやらんといけない https://github.com/misskey-dev/misskey/issues/7681#issuecomment-1008046150

[acid-chicken]

tasukete

To Do

• [x] stories ファイルの Code Generation
• [x] テーマ選択と読み込み
• [x] ロケール読み込み
• [x] ディレクティブ読み込み
• [x] ウィジェット読み込み
• [x] OS 読み込み
• [x] API モック
• [x] フェイクデータ共通化
• [x] インタラクションテスト環境
• [x] マネージャーへのテーマ適用
• [ ] HMR ができない（というかビルドが終わらないというのが正しい？）問題の解消
  • 現在は chokidar で vite サーバーを毎回再起動するようにして誤魔化している
• [ ] Actions がなぜかハンドルできない問題の解消
• [ ] build-storybook 時に TSSatisfiesExpression をパースできない問題の解消
• [ ] たまに Error: Cannot access '$i' before initialization が出てくる問題の解消
  • 少なくとも initial load が Docs だと回避できる
• [x] https://github.com/misskey-dev/misskey/issues/7681#issuecomment-1008046150 の置換
• [ ] もっとたくさんのコンポーネントに stories を定義

[syuilo]

https://github.com/misskey-dev/misskey/issues/7681#issuecomment-1008046150 の置換

これはやるわ

[acid-chicken]

もっとたくさんのコンポーネントに stories を定義

については #10365 ではひとまず components/global のみだけやって後から足していく感じでもいいかも

[syuilo]

#7681 (comment) の置換

これはやるわ

やった

[syuilo]

あー$store以外もか

[syuilo]

グローバルなプロパティは全部消した

[acid-chicken]

グローバルなプロパティは全部消した

助かります :pray:

[acid-chicken]

@syuilo 時間ある時に misskey-dev における Chromatic OAuth の Access request を Grant しておいてもらえると助かります（多分メールが行ってるはず）。

[acid-chicken]

CI でもビルドするようにしたので

1. アーティファクトをダウンロード
2. 展開したディレクトリで npx http-server
3. ブラウザで開く

してお手軽に手元で Storybook が見られるようになった

[syuilo]

@syuilo 時間ある時に misskey-dev における Chromatic OAuth の Access request を Grant しておいてもらえると助かります（多分メールが行ってるはず）。

done

[acid-chicken]

@syuilo 時間ある時に misskey-dev における Chromatic OAuth の Access request を Grant しておいてもらえると助かります（多分メールが行ってるはず）。

done

🚀 https://develop--6428f7d7b962f0b79f97d6e4.chromatic.com/

[syuilo]

うおーー

[acid-chicken]

タイミング良いか悪いかちょうど RC を抜けたみたい https://github.com/storybookjs/storybook/releases/tag/v7.0.2

[acid-chicken]

• もっとたくさんのコンポーネントに stories を定義

タスク分割するならこんな感じかな

(moved to the top comment)

[acid-chicken]

メンバー向け

(moved to the top comment)

[acid-chicken]

@/instance みたいなモジュールのモックができないので #10660 とかのストーリーがうまく作れない