Skip to content

Conversation

ryanrozich
Copy link
Owner

Summary

This PR fixes the StackBlitz integration issues identified in #83:

  • Dynamic branch links that adjust based on deployment context
  • Working StackBlitz examples that show actual components
  • Removed styling conflicts from duplicate Tailwind imports

Changes

1. Dynamic Branch Detection

  • Created a deployment detection utility (src/utils/deployment.ts) that:
    • Detects if running on main branch, PR preview, or local development
    • Generates appropriate GitHub and StackBlitz URLs based on context
    • Handles edge cases with fallback to main branch
    • Includes comprehensive unit tests

2. Fixed StackBlitz Components

  • Updated StackBlitzExample.tsx to use dynamic URLs instead of hardcoded branch
  • Updated SimpleStackBlitzExample.tsx to use dynamic GitHub links
  • Removed unused methods and imports

3. Enhanced Example Generation

  • Updated create-stackblitz-examples.js with better templates:
    • Each example now properly imports and uses components
    • Added component-specific configurations
    • Includes proper grid setup with refs for component interaction
    • Added more sample data

4. StackBlitz Configuration

  • Added stackblitz.json files for proper StackBlitz integration
  • Added npm scripts to each example package.json
  • Configured proper startup commands and environment

5. Fixed Styling Issues

6. Additional Improvements

  • Added script for injecting branch info into built HTML
  • Added npm scripts for example generation
  • Fixed logger duplicate key issue
  • Removed problematic GitHub workflow

Testing

  1. Dynamic Links: The deployment utility includes comprehensive tests
  2. StackBlitz Examples: Each example has been regenerated with working components
  3. Styling: Removed duplicate imports that were causing conflicts

Test Plan

  • Verify StackBlitz links work on main branch deployment
  • Verify StackBlitz links work on PR preview deployments
  • Verify StackBlitz examples show working components
  • Confirm styling issues are resolved
  • Test with free StackBlitz account

Fixes #83

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

- Add deployment detection utility for dynamic URL generation
- Fix hardcoded branch references in StackBlitz components
- Update example generation with improved templates and configs
- Add stackblitz.json for proper StackBlitz integration
- Remove duplicate Tailwind imports causing styling conflicts
- Add scripts for example generation and branch info injection
- Add comprehensive tests for deployment detection
- Fix linting errors and remove duplicate logger method
- Remove problematic GitHub workflow

This ensures StackBlitz links work correctly across all deployment contexts
(main branch, PR previews, local development) and examples actually show
working components instead of just basic apps.
@github-actions github-actions bot added status: in-code-review PR ready, awaiting code review bug Something isn't working area: docs Documentation (README, API docs, guides) priority: high Important, should be fixed soon and removed status: in-code-review PR ready, awaiting code review labels Jul 10, 2025
Copy link

github-actions bot commented Jul 10, 2025

🚀 Demo Preview Ready!

Preview URL: https://demo.rozich.net/ag-grid-react-components-pr-90/
API URL: https://demo.rozich.net/ag-grid-react-components-pr-90/api/

⚠️ Deployment tests failed - please check the workflow logs

This preview will be available for testing until the PR is merged or closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: docs Documentation (README, API docs, guides) bug Something isn't working has-preview priority: high Important, should be fixed soon

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

1 participant