事前
ChromaticはStorybookを共有するツール。
共有するツールというのは語弊がありそうな気がするが、共有もできるツール、というイメージ。
共有するので、プロジェクトを共有している相手と一緒に更新ができるように
tokenを直接package.jsonに登録するか聞かれる。
⚠ No 'chromatic' script found in your package.json
Would you like me to add it for you? [y/N] y
✔ Added script 'chromatic' to package.json
登録すると、下記のように追記される。
"scripts": {
"chromatic": "npx chromatic --project-token 3u91u401"
}
3u91u401はサンプル。
ℹ No problem. You can add it to your package.json yourself like so:
"scripts": {
"chromatic": "npx chromatic --project-token 3u91u401"
}
本題
①tokenをpackage.jsonに記述したくない場合には、下記のように記載する。
"scripts": {
"chromatic": "chromatic"
},
②.envファイルを作成。
CHROMATIC_PROJECT_TOKEN=3u91u401
③実行
yarn chromatic
④実行結果サンプル
❯ yarn chromatic
yarn run v1.22.10
warning ../package.json: No license field
$ chromatic
Chromatic CLI v5.6.2
https://www.chromatic.com/docs/cli
✔ Authenticated with Chromatic
→ Using project token '********u401'
✔ Retrieved git information
→ Commit 'bd10a94' on branch 'main'; found 1 baseline commit
✔ Collected Storybook metadata
→ Storybook v6.2.8 for React; supported addons found: Actions, Backgrounds, Docs, Links, Viewp
ort
✔ Storybook built in 1 minute 25 seconds
→ View build log at /Users/xxxxx/Desktop/git/xxxxxxxxx/build-storybook.log
✔ Publish complete in 14 seconds
→ View your Storybook at https://xxxxxxxxxxxx.chromatic.com
✔ Started build 4
→ View build details at https://www.chromatic.com/build?appId=xxxxxxxxxx&number=
4
✔ Build 4 passed!
→ Took 30 snapshots (12 components, 30 stories) in 12 seconds; no changes found
ℹ Speed up Continuous Integration
Your project is linked to GitHub so Chromatic will report results there.
This means you can pass the --exit-once-uploaded flag to skip waiting for build results.
Read more here: https://www.chromatic.com/docs/cli#chromatic-options
✔ Build 4 passed!
No visual changes were found in this build.
ℹ View build details at https://www.chromatic.com/build?appId=xxxxxxxxxxxxxxxxxx&number=4
✨ Done in 119.44s.
バージョン情報
"@storybook/addon-actions": "^6.2.8",
"@storybook/addon-essentials": "^6.2.8",
"@storybook/addon-links": "^6.2.8",
"@storybook/react": "^6.2.8",
"chromatic": "^5.6.2",
参考
chromatic config
↧