feat: Add Vercel Workflow integration #784
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Chromatic Visual Testing | |
| on: | |
| push: | |
| branches: [main, dev] | |
| pull_request: | |
| branches: [main, dev] | |
| permissions: | |
| issues: write # Required for Chromatic to comment on PRs | |
| pull-requests: write # Required for Chromatic to comment on PRs | |
| jobs: | |
| chromatic-deployment: | |
| name: Deploy Storybook to Chromatic | |
| runs-on: ubuntu-latest | |
| steps: | |
| # Checkout the repository | |
| - name: Checkout repository | |
| uses: actions/checkout@v3 | |
| with: | |
| fetch-depth: 0 # Required for Chromatic to retrieve git history | |
| # Setup Node.js | |
| - name: Setup Node.js | |
| uses: actions/setup-node@v3 | |
| with: | |
| node-version: "22" | |
| # Install Bun | |
| - name: Install Bun | |
| run: npm install -g bun | |
| # Install dependencies | |
| - name: Install dependencies | |
| run: bun install | |
| # Build Storybook | |
| - name: Build Storybook | |
| run: bun run build-storybook | |
| env: | |
| CHROMATIC: true | |
| # Publish to Chromatic (on push to main or PRs from *storybook* branches) | |
| - name: Publish to Chromatic | |
| id: chromatic | |
| if: | | |
| (github.event_name == 'push' && github.ref == 'refs/heads/main') || | |
| (github.event_name == 'pull_request' && contains(github.head_ref, 'storybook')) | |
| uses: chromaui/action@v1 | |
| with: | |
| projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} | |
| storybookBuildDir: public/_storybook | |
| exitZeroOnChanges: true # Optional: Exit with success status even if there are UI changes | |
| autoAcceptChanges: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }} # Only auto-accept on main branch | |
| # Comment on PR with Chromatic results (for storybook branches) | |
| - name: Comment on PR | |
| if: github.event_name == 'pull_request' && contains(github.head_ref, 'storybook') && steps.chromatic.outputs.buildUrl | |
| uses: actions/github-script@v6 | |
| with: | |
| github-token: ${{ secrets.GITHUB_TOKEN }} | |
| script: | | |
| const { issue: { number: issue_number }, repo: { owner, repo } } = context; | |
| const buildUrl = '${{ steps.chromatic.outputs.buildUrl }}'; | |
| const storybookUrl = '${{ steps.chromatic.outputs.storybookUrl }}'; | |
| const message = `## 🎨 Chromatic Visual Testing Results | |
| | Resource | URL | | |
| | --- | --- | | |
| | 🔍 Build Results | [Chromatic Build](${buildUrl}) | | |
| | 📚 Storybook | [View Storybook](${storybookUrl}) | | |
| Check the visual changes and approve or request changes as needed.`; | |
| github.rest.issues.createComment({ | |
| issue_number, | |
| owner, | |
| repo, | |
| body: message | |
| }); |