Skip to content

chore(Badge): migrate to CSS Modules with visual regression baseline #1157

chore(Badge): migrate to CSS Modules with visual regression baseline

chore(Badge): migrate to CSS Modules with visual regression baseline #1157

name: Publish storybook to vercel
on:
push:
branches:
- main
pull_request:
workflow_dispatch:
permissions:
contents: read
pull-requests: write
env:
HUSKY: 0
STORYBOOK_BUILD_DIR: .storybook/out
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Generate GitHub workflow token
id: gh-workflow-token
# NOTE: Upgrade v3 due to gh node20 deprecation
# at time of writing there's only "v3.0.0-beta.2"
# see https://github.com/actions/create-github-app-token/releases
uses: actions/create-github-app-token@v2
with:
app-id: ${{ secrets.WORKFLOW_AUTH_PUBLIC_APP_ID }}
private-key: ${{ secrets.WORKFLOW_AUTH_PUBLIC_PRIVATE_KEY }}
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version: '23.x'
- name: Enable Corepack
run: corepack enable
- name: Install dependencies
run: yarn install --immutable
- name: Install Vercel CLI
# NOTE: Pinned to avoid broken @vercel/hono@0.2.67 dep in newer versions can revisit when Vercel publishes a fix
run: npm install --global vercel@41.7.3
- name: Build Storybook
run: yarn storybook:build
- name: Pull Vercel Environment Information
run: |
vercel pull \
--yes \
--environment=preview \
--token=${{ secrets.VERCEL_TOKEN }}
- name: Create Vercel Build Output
run: |
mkdir -p .vercel/output/static
cp -r ${{ env.STORYBOOK_BUILD_DIR }}/* .vercel/output/static/
cat > .vercel/output/config.json << EOF
{
"version": 3
}
EOF
- name: Deploy to Vercel (Preview)
if: github.event_name == 'pull_request'
id: deploy
run: |
DEPLOYMENT_URL=$(vercel deploy \
--prebuilt \
--yes \
--token=${{ secrets.VERCEL_TOKEN }})
echo "url=$DEPLOYMENT_URL" >> $GITHUB_OUTPUT
echo "Preview deployed to: $DEPLOYMENT_URL"
- name: Comment PR with Preview URL
if: github.event_name == 'pull_request'
uses: mshick/add-pr-comment@v2
with:
message: |
## Storybook Preview Deployed
✅ Preview URL: ${{ steps.deploy.outputs.url }}
Built from commit: `${{ github.sha }}`
message-id: storybook-preview
repo-token: ${{ steps.gh-workflow-token.outputs.token }}
refresh-message-position: true
- name: Deploy to Vercel (Production)
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
run: |
COMMIT_MSG=$(git log -1 --format=%s)
if OUTPUT=$(.scripts/bash/verify-release-commit "$COMMIT_MSG"); then
VERSION=$(echo "$OUTPUT" | awk '{print $1}')
RELEASE_TYPE=$(echo "$OUTPUT" | awk '{print $2}')
echo "Detected release commit for version $VERSION ($RELEASE_TYPE) will deploy..."
else
echo "Skip! Commit message does not match release format"
exit 0
fi
DEPLOYMENT_URL=$(vercel deploy \
--prebuilt \
--yes \
--prod \
--token=${{ secrets.VERCEL_TOKEN }})
echo "Deployed v$VERSION ($RELEASE_TYPE) to $DEPLOYMENT_URL"