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,47 +61,37 @@ 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:
-    runs-on: ubuntu-latest
-    outputs:
-      storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - uses: ./.github/actions/provision
-
-      - name: Deploy to Chromatic
-        id: chromatic
-        uses: chromaui/action@latest
-        with:
-          autoAcceptChanges: 'main'
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-
   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
 
+      - name: Storybook parsed branch name
+        id: storybook_branch
+        run: echo "STORYBOOK_BRANCH=`echo ${{ steps.extract_branch.outputs.branch }} | sed 's/\//\-/g'`" >> $GITHUB_OUTPUT
+
       - uses: kyranjamie/[email protected]
+        env:
+          EXTENSION_BUILD_LINK: '[Extension build](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'
+          TEST_REPORT_LINK: '[Test report](https://leather-wallet.github.io/playwright-reports/${{ steps.extract_branch.outputs.branch }})'
+          STORYBOOK_LINK: '[Storybook](https://${{ steps.storybook_branch.outputs.STORYBOOK_BRANCH }}--65982789c7e2278518f189e7.chromatic.com)'
+          CHROMATIC_LINK: '[Chromatic](https://www.chromatic.com/library?appId=65982789c7e2278518f189e7&branch=${{ steps.extract_branch.outputs.branch }})'
         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 Leather build ${{ needs.sha-hash.outputs.SHORT_SHA }} — ${{ env.EXTENSION_BUILD_LINK }}, ${{ env.TEST_REPORT_LINK }}, ${{ env.STORYBOOK_LINK }}, ${{ env.CHROMATIC_LINK }}

.github/workflows/chromatic.yml

@@ -0,0 +1,24 @@
+name: Chromatic
+
+on: [pull_request]
+
+jobs:
+  chromatic:
+    if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: ./.github/actions/provision
+
+      - name: Deploy to Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          autoAcceptChanges: '{main,dev}'
+          onlyChanged: true
+          exitZeroOnChanges: true
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.LEATHER_BOT }}

.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',