Add vercel preview deployments for storybook

.github/pull_request_template.md

@@ -0,0 +1,53 @@
+## Description
+
+<!-- Provide a brief description of the changes in this PR -->
+
+## Type of Change
+
+<!-- Mark the relevant option with an "x" -->
+
+- [ ] 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
+
+<!-- List the specific changes made in this PR -->
+
+- 
+- 
+- 
+
+## Testing
+
+<!-- Describe the testing that has been done -->
+
+- [ ] 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
+
+<!-- If applicable, add screenshots or demo links to help explain your changes -->
+
+## 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
+
+<!-- Add any additional notes, concerns, or context about this PR -->

.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
+              });
+            }

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.

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

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"
+    }
+  }
+}