🍔
storybookのプルリクをchromaticで表示する
前回の続き
chromatic
storybookのプルリクの差分が、画面で確認できる様になる
プルリクされた画面の好きな位置にコメントで指摘することができる
とりあえず無料で使える
事前準備
GitHubかBitbucketかGitLabにソースをアップしておく
chromaticと連携
のGet started nowをクリックして、
GitHubかBitbucketかGitLabを選んでログインする
画面上に表示される下記の２つのコマンドをした後、GitLabなどにpushすれば連携できる様になる
react-component $ npm install --save-dev chromatic
react-component $ npx chromatic --project-token=xxxxxxxxxxxx
⚠ 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
You can now run it here or in CI with 'npm run chromatic' or 'yarn chromatic'.
ℹ Your project token was added to the script via the --project-token flag.
If you're running Chromatic via continuous integration, we recommend setting
the CHROMATIC_PROJECT_TOKEN environment variable in your CI environment.
You can then remove the --project-token from your package.json script.
プルリクの流れ
GitLabなどでプルリク出した後に、
npm run chromatic
を実行するとchromaticでもプルリクが反映されるので、このURLをGitLabのプルリクの概要に貼れば良さそうです
GitLabのプルリクがマージされると、自動的にchromaticのプルリクもclosedに変わりました
Discussion