mirror of https://github.com/cloud-shuttle/leptos-shadcn-ui.git synced 2025-12-22 22:00:00 +00:00

Files

Peter Hanssens 7f4486b6f0 Add comprehensive demo with CI/CD pipeline

- Complete GitHub Actions workflow for demo deployment
- Playwright test suite with 50+ tests
- Performance monitoring and accessibility testing
- Cross-browser compatibility testing
- Local deployment scripts and documentation

2025-09-23 19:12:15 +10:00

3.7 KiB

Raw Blame History

Leptos ShadCN UI Comprehensive Demo v0.9.1

A comprehensive demo showcasing all refactored Leptos ShadCN UI components with automated testing and port conflict resolution.

🚀 Quick Start

Option 1: All-in-One Build & Test

cd examples/comprehensive-demo
./scripts/build-and-test.sh

Option 2: Step-by-Step

# Install dependencies
npm install

# Build WASM components
npm run build

# Start server (handles port conflicts automatically)
npm run serve

# Run tests in another terminal
npm run test

🎯 What's Showcased

✅ Refactored Components (v0.9.1)

Drawer Component - Refactored from 15k to 12k bytes with 9 focused modules
Context Menu Component - Refactored from 13k to 14.8k bytes with 8 focused modules
Alert Dialog Component - Refactored from 12k to 9.5k bytes with 7 focused modules
Select Component - Refactored and modularized with improved structure
Command Component - Fixed compilation errors and improved structure

🧪 Comprehensive Testing

Playwright Integration - Automated testing across multiple browsers
Component Integration Tests - Tests all refactored components
Responsive Testing - Mobile and desktop compatibility
Accessibility Testing - Keyboard navigation and ARIA attributes
Performance Testing - Load times and component responsiveness

🛠️ Port Conflict Resolution

The demo includes intelligent port management:

Automatic Port Detection

Port Range: 3000-3100 (configurable)
Conflict Resolution: Automatically finds available ports
Health Checks: Built-in health monitoring
API Endpoints: Demo information and status

🎭 Playwright Testing

Test Commands

# Run all tests
npm run test

# Run tests with UI
npm run test:ui

# Run tests in headed mode
npm run test:headed

# Debug tests
npm run test:debug

🏗️ Architecture

Server Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   WASM Build    │───▶│  Express Server │───▶│  Playwright     │
│   (Rust)        │    │  (Node.js)      │    │  Tests          │
└─────────────────┘    └─────────────────┘    └─────────────────┘

📊 Features

Interactive Components

Real-time Counter - Demonstrates reactive state management
Drawer Component - Shows refactored drawer with improved organization
Context Menu - Right-click functionality with refactored context menu
Alert Dialog - Modal dialogs with refactored alert dialog component
Theme Switching - Dark/light mode toggle
Form Input - Live input with reactive state

Technical Features

WASM Components - All components compiled to WebAssembly
Port Conflict Resolution - Automatic port detection and management
Health Monitoring - Built-in health checks and status endpoints
API Integration - Demo information and component status APIs
Responsive Design - Mobile and desktop compatibility
Accessibility - Keyboard navigation and ARIA compliance

🚀 Production Ready

This demo is production-ready with:

✅ Zero Regressions - All components work perfectly
✅ Comprehensive Testing - Automated test coverage
✅ Port Management - Conflict resolution
✅ Performance Optimized - Fast loading and rendering
✅ Accessibility Compliant - WCAG guidelines
✅ Mobile Responsive - Works on all devices

3.7 KiB Raw Blame History