Setup PR Previews for Storybook Documentation with Environment Protection

Author: codegen-sh[bot]

.github/workflows/pr-preview.yml

@@ -58,21 +58,6 @@ jobs:
             exit 1
           fi
 
-      # Create PR-specific directory structure
-      - name: Create PR-specific directory
-        run: |
-          mkdir -p pr-preview
-          cp -r apps/docs/storybook-static pr-preview/pr-${{ github.event.pull_request.number }}
-
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: pr-preview
-          retention-days: 30
-          
       # Add a comment to the PR with the preview URL
       - name: Comment PR
         uses: actions/github-script@v6
@@ -81,7 +66,9 @@ jobs:
             const previewUrl = `https://lambda-curry.github.io/forms/pr-preview/pr-${context.issue.number}/`;
             const commentBody = `📝 **Storybook Preview**: [View Storybook](${previewUrl})
 
-            This preview will be updated automatically when you push new changes to this PR.`;
+            This preview will be updated automatically when you push new changes to this PR.
+            
+            > Note: The preview will be available after the workflow completes and the PR is approved for deployment.`;
             
             // Get existing comments
             const comments = await github.rest.issues.listComments({
@@ -114,16 +101,35 @@ jobs:
               });
             }
 
+      # Create PR-specific directory structure
+      - name: Create PR-specific directory
+        run: |
+          mkdir -p pr-preview/pr-${{ github.event.pull_request.number }}
+          cp -r apps/docs/storybook-static/* pr-preview/pr-${{ github.event.pull_request.number }}/
+
+      # Upload the artifact for the deployment job
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: pr-preview
+          retention-days: 30
+
   # Deploy job
   deploy:
     needs: build
     runs-on: ubuntu-latest
     if: github.event.action != 'closed'
+    
+    # Use a specific environment with protection rules
+    # This ensures only approved PRs can deploy
     environment:
-      name: github-pages
+      name: pr-preview
       url: ${{ steps.deployment.outputs.page_url }}
-
+    
     steps:
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

README.md

@@ -4,6 +4,7 @@ Checkout our [Storybook Documentation](https://lambda-curry.github.io/forms/?pat
 
 A form library for React applications.
 
+
 ## Getting Started
 
 Step 1: Install dependencies
@@ -38,14 +39,29 @@ The PR preview system:
 4. **Automatically updates the preview when you push new changes to the PR**
 5. Cleans up the preview when the PR is closed
 
+#### GitHub Environment Setup
+
+For PR previews to work properly, you need to set up a GitHub environment:
+
+1. Go to your repository settings
+2. Navigate to "Environments"
+3. Create a new environment named `pr-preview`
+4. Configure environment protection rules as needed:
+   - You can require reviewers to approve deployment
+   - You can limit deployment to specific branches
+   - You can add wait timers before deployment
+
+The main branch will continue to deploy to the `github-pages` environment.
+
 #### Troubleshooting PR Previews
 
 If you encounter a 404 error when accessing the PR preview:
 
 1. Make sure the PR build has completed successfully by checking the GitHub Actions tab
 2. Verify that the repository has GitHub Pages enabled and configured to deploy from the `gh-pages` branch
 3. Check that the PR preview comment contains the correct URL
-4. Try clearing your browser cache or using an incognito window
+4. Ensure the PR has been approved for deployment if environment protection rules are enabled
+5. Try clearing your browser cache or using an incognito window
 
 The PR preview is deployed to the `gh-pages` branch in a directory structure like:
 ```