Chromaticのtokenをenv経由で使用する。

事前

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ファイルを作成。

.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