chore: add chromatic visual tests

.github/workflows/build-extension.yml

@@ -11,23 +11,33 @@ jobs:
         with:
           access_token: ${{ github.token }}
 
-  set-in-progress-message:
-    if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
+  sha-hash:
     runs-on: ubuntu-latest
+    outputs:
+      SHORT_SHA: ${{ steps.short-sha.outputs.SHORT_SHA }}
     steps:
       - name: Make short commit SHA
-        run: echo "SHORT_SHA=`echo ${{ github.event.pull_request.head.sha }} | cut -c1-7`" >> $GITHUB_ENV
+        id: short-sha
+        run: echo "SHORT_SHA=`echo ${{ github.event.pull_request.head.sha }} | cut -c1-7`" >> $GITHUB_OUTPUT
 
+  set-in-progress-message:
+    if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
+    runs-on: ubuntu-latest
+    needs:
+      - pre-run
+      - sha-hash
+    steps:
       - uses: kyranjamie/[email protected]
         with:
-          header: '> _Building Leather at commit ${{ env.SHORT_SHA }}_'
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          header: '> _Building Leather at commit ${{ needs.sha-hash.outputs.SHORT_SHA }}_'
+          GITHUB_TOKEN: ${{ secrets.LEATHER_BOT }}
 
   build:
     name: build-${{ matrix.target }}-extension
     runs-on: ubuntu-latest
     needs:
       - pre-run
+      - sha-hash
     strategy:
       matrix:
         # Firefox removed while off store
@@ -39,8 +49,6 @@ jobs:
 
       - uses: ./.github/actions/provision
 
-      - run: echo "SHORT_SHA=`echo ${{ github.event.pull_request.head.sha }} | cut -c1-7`" >> $GITHUB_ENV
-
       - name: Build project
         run: pnpm build
         env:
@@ -53,15 +61,16 @@ jobs:
           TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
           BESTINSLOT_API_KEY: ${{ secrets.BESTINSLOT_API_KEY }}
           PR_NUMBER: ${{ github.event.number }}
-          COMMIT_SHA: ${{ env.SHORT_SHA }}
+          COMMIT_SHA: ${{ needs.sha-hash.outputs.SHORT_SHA }}
 
       - uses: actions/upload-artifact@v3
         name: Upload ${{ matrix.target }} extension zip
         with:
-          name: leather-${{ matrix.target }}-${{ env.SHORT_SHA }}
+          name: leather-${{ matrix.target }}-${{ needs.sha-hash.outputs.SHORT_SHA }}
           path: dist
 
   chromatic:
+    if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
     runs-on: ubuntu-latest
     outputs:
       storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
@@ -76,24 +85,29 @@ jobs:
         id: chromatic
         uses: chromaui/action@latest
         with:
-          autoAcceptChanges: 'main'
+          autoAcceptChanges: '{main,dev}'
+          onlyChanged: true
+          exitZeroOnChanges: true
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          token: ${{ secrets.GITHUB_TOKEN }}
+          token: ${{ secrets.LEATHER_BOT }}
 
   set-download-link:
     if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
     runs-on: ubuntu-latest
     needs:
       - pre-run
+      - sha-hash
       - build
-      - chromatic
     steps:
       - name: Extract branch name
         shell: bash
         run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
         id: extract_branch
 
       - uses: kyranjamie/[email protected]
+        env:
+          EXTENSION_BUILD: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
         with:
-          header: '> Try out this version of Leather — [Extension build](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}), [Test report](https://leather-wallet.github.io/playwright-reports/${{ steps.extract_branch.outputs.branch }}), [Storybook preview](${{ needs.chromatic.outputs.storybook_url }})'
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.LEATHER_BOT }}
+          header: |
+            > Try out build ${{ needs.sha-hash.outputs.SHORT_SHA }} of Leather — [Extension build](${{ env.EXTENSION_BUILD }}), [Test report](https://leather-wallet.github.io/playwright-reports/${{ steps.extract_branch.outputs.branch }}), [Storybook](https://${{ steps.extract_branch.outputs.branch }}--65982789c7e2278518f189e7.chromatic.com), [Chromatic](https://www.chromatic.com/library?appId=65982789c7e2278518f189e7&branch=${{ steps.extract_branch.outputs.branch}})'

.storybook/main.ts

@@ -38,7 +38,8 @@ const config: StorybookConfig = {
       },
     },
     '@storybook/addon-mdx-gfm',
-    '@storybook/addon-webpack5-compiler-swc'
+    '@storybook/addon-webpack5-compiler-swc',
+    '@chromatic-com/storybook'
   ],
   docs: {
     autodocs: 'tag',