From d098b253d5034ee17716577b9be46caea4b5cce1 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 18 Aug 2025 16:06:50 +0000 Subject: [PATCH] Add Vercel deployment for Storybook PR previews - Add vercel.json configuration for Storybook builds - Create GitHub workflow for automatic PR preview deployments - Add PR template with preview deployment information - Update README with PR preview deployment section - Add comprehensive Vercel setup guide for maintainers This enables automatic Storybook preview deployments for every PR, making it easier to review UI changes and catch visual regressions. --- .github/pull_request_template.md | 53 +++++++++++ .github/workflows/vercel-preview.yml | 79 ++++++++++++++++ README.md | 11 +++ VERCEL_SETUP.md | 136 +++++++++++++++++++++++++++ vercel.json | 18 ++++ 5 files changed, 297 insertions(+) create mode 100644 .github/pull_request_template.md create mode 100644 .github/workflows/vercel-preview.yml create mode 100644 VERCEL_SETUP.md create mode 100644 vercel.json diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 000000000..4ce71ce6b --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,53 @@ +## Description + + + +## Type of Change + + + +- [ ] Bug fix (non-breaking change which fixes an issue) +- [ ] New feature (non-breaking change which adds functionality) +- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) +- [ ] Documentation update +- [ ] Performance improvement +- [ ] Code refactoring +- [ ] Test improvements + +## Changes Made + + + +- +- +- + +## Testing + + + +- [ ] Unit tests pass +- [ ] Manual testing completed +- [ ] Storybook stories updated/added (if applicable) + +## Storybook Preview + +🚀 A Storybook preview will be automatically deployed for this PR. You can view the preview once the deployment is complete by looking for the preview URL in the comments below. + +## Screenshots/Demo + + + +## Checklist + +- [ ] My code follows the project's coding standards +- [ ] I have performed a self-review of my own code +- [ ] I have commented my code, particularly in hard-to-understand areas +- [ ] I have made corresponding changes to the documentation (if applicable) +- [ ] My changes generate no new warnings or errors +- [ ] I have added tests that prove my fix is effective or that my feature works (if applicable) +- [ ] New and existing unit tests pass locally with my changes + +## Additional Notes + + \ No newline at end of file diff --git a/.github/workflows/vercel-preview.yml b/.github/workflows/vercel-preview.yml new file mode 100644 index 000000000..95cd20a42 --- /dev/null +++ b/.github/workflows/vercel-preview.yml @@ -0,0 +1,79 @@ +name: Vercel Preview Deployment +on: + pull_request: + branches: ["main"] + paths: ["packages/core/**", "packages/cells/**", "packages/source/**", ".storybook/**", "vercel.json"] + +jobs: + deploy-preview: + runs-on: ubuntu-latest + permissions: + pull-requests: write + contents: read + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup Node.js 📦 + uses: actions/setup-node@v4 + with: + node-version: 20.10.0 + cache: 'npm' + + - name: Install dependencies 🔧 + run: npm install + + - name: Build Storybook 🏗️ + run: npm run build-storybook + + - name: Deploy to Vercel 🚀 + uses: amondnet/vercel-action@v25 + id: vercel-deploy + with: + vercel-token: ${{ secrets.VERCEL_TOKEN }} + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} + github-token: ${{ secrets.GITHUB_TOKEN }} + working-directory: ./ + + - name: Comment PR with Preview URL 💬 + uses: actions/github-script@v7 + with: + script: | + const { data: comments } = await github.rest.issues.listComments({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + }); + + const botComment = comments.find(comment => + comment.user.type === 'Bot' && comment.body.includes('📖 Storybook Preview') + ); + + const previewUrl = '${{ steps.vercel-deploy.outputs.preview-url }}'; + const commentBody = `## 📖 Storybook Preview + + 🚀 **Preview URL**: ${previewUrl} + + This preview will be updated automatically when you push changes to this PR. + + --- + *Preview powered by [Vercel](https://vercel.com)*`; + + if (botComment) { + await github.rest.issues.updateComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: botComment.id, + body: commentBody + }); + } else { + await github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + body: commentBody + }); + } \ No newline at end of file diff --git a/README.md b/README.md index fd4c1b84b..b1f0a64ea 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,17 @@ Lots of fun examples are in our [Storybook](https://glideapps.github.io/glide-da You can also visit our [main site](https://grid.glideapps.com). +## 🚀 PR Preview Deployments + +Every pull request automatically gets a Storybook preview deployment powered by [Vercel](https://vercel.com). This allows you to: + +- **Preview changes instantly** - See your changes in action before merging +- **Share with reviewers** - Easy access to live demos during code review +- **Test across devices** - Preview URLs work on any device or browser +- **Catch visual regressions** - Spot UI issues early in the development process + +Preview deployments are automatically triggered when you open a PR that affects the component packages or Storybook configuration. Look for the preview URL comment that will be posted on your PR! + ## Features - **It scales to millions of rows**. Cells are rendered lazily on demand for memory efficiency. diff --git a/VERCEL_SETUP.md b/VERCEL_SETUP.md new file mode 100644 index 000000000..d1f6242a2 --- /dev/null +++ b/VERCEL_SETUP.md @@ -0,0 +1,136 @@ +# Vercel Setup Guide + +This guide explains how to set up Vercel deployment for PR previews of the Storybook. + +## Prerequisites + +1. A [Vercel](https://vercel.com) account +2. Admin access to the GitHub repository +3. Access to repository secrets settings + +## Setup Steps + +### 1. Create Vercel Project + +1. Go to [Vercel Dashboard](https://vercel.com/dashboard) +2. Click "Add New Project" +3. Import your GitHub repository +4. Configure the project settings: + - **Framework Preset**: Other + - **Build Command**: `npm run build-storybook` + - **Output Directory**: `storybook-build` + - **Install Command**: `npm install` + +### 2. Get Vercel Tokens and IDs + +After creating the project, you'll need to collect the following information: + +#### Get Vercel Token +1. Go to [Vercel Account Settings](https://vercel.com/account/tokens) +2. Create a new token with a descriptive name (e.g., "GitHub Actions - Storybook Previews") +3. Copy the token value + +#### Get Organization ID +1. Go to [Vercel Team Settings](https://vercel.com/teams) +2. Click on your team/organization +3. Go to "Settings" tab +4. Copy the "Team ID" (this is your Organization ID) + +#### Get Project ID +1. Go to your Vercel project dashboard +2. Click on "Settings" tab +3. Scroll down to "General" section +4. Copy the "Project ID" + +### 3. Configure GitHub Secrets + +Add the following secrets to your GitHub repository: + +1. Go to your GitHub repository +2. Navigate to Settings → Secrets and variables → Actions +3. Add the following repository secrets: + +| Secret Name | Description | Value | +|------------|-------------|--------| +| `VERCEL_TOKEN` | Vercel authentication token | The token from step 2 | +| `VERCEL_ORG_ID` | Vercel organization/team ID | The organization ID from step 2 | +| `VERCEL_PROJECT_ID` | Vercel project ID | The project ID from step 2 | + +### 4. Configure Vercel Project Settings + +1. In your Vercel project dashboard, go to Settings +2. Under "Git", ensure: + - **Production Branch**: `main` + - **Preview Branch**: All branches (or configure as needed) +3. Under "Environment Variables", add: + - `NODE_VERSION`: `20.10.0` + +### 5. Test the Setup + +1. Create a test branch and make a small change to any component +2. Open a pull request +3. The GitHub Action should trigger automatically +4. Check that: + - The workflow runs successfully + - A preview URL is posted as a comment on the PR + - The Storybook preview loads correctly + +## How It Works + +### Automatic Triggers +The Vercel preview deployment is triggered when: +- A pull request is opened targeting the `main` branch +- Changes are made to files in: + - `packages/core/**` + - `packages/cells/**` + - `packages/source/**` + - `.storybook/**` + - `vercel.json` + +### Deployment Process +1. GitHub Actions checks out the code +2. Installs dependencies with `npm install` +3. Builds Storybook with `npm run build-storybook` +4. Deploys to Vercel using the Vercel Action +5. Posts a comment on the PR with the preview URL + +### Preview URLs +- Each PR gets a unique preview URL +- The URL is updated automatically when new commits are pushed +- URLs remain active until the PR is closed + +## Troubleshooting + +### Common Issues + +**Deployment fails with "Project not found"** +- Verify `VERCEL_PROJECT_ID` is correct +- Check that the Vercel token has access to the project + +**Build fails during Storybook compilation** +- Check that all dependencies are properly installed +- Verify the build works locally with `npm run build-storybook` + +**Preview URL not posted to PR** +- Check GitHub Actions logs for errors +- Verify `GITHUB_TOKEN` has proper permissions +- Ensure the workflow has `pull-requests: write` permission + +**Node.js version mismatch** +- Update `NODE_VERSION` in Vercel project settings +- Ensure it matches the version in `.nvmrc` and workflow files + +### Getting Help + +If you encounter issues: +1. Check the GitHub Actions workflow logs +2. Check the Vercel deployment logs in the Vercel dashboard +3. Verify all secrets are correctly set +4. Ensure the Vercel project configuration matches this guide + +## Security Notes + +- Keep your Vercel token secure and rotate it regularly +- Use the principle of least privilege for token permissions +- Monitor Vercel usage to avoid unexpected costs +- Review preview deployments before sharing externally \ No newline at end of file diff --git a/vercel.json b/vercel.json new file mode 100644 index 000000000..3d5cb36c0 --- /dev/null +++ b/vercel.json @@ -0,0 +1,18 @@ +{ + "buildCommand": "npm run build-storybook", + "outputDirectory": "storybook-build", + "installCommand": "npm install", + "framework": null, + "github": { + "enabled": true, + "autoAlias": false + }, + "env": { + "NODE_VERSION": "20.10.0" + }, + "build": { + "env": { + "NODE_VERSION": "20.10.0" + } + } +} \ No newline at end of file