deploy.yml

name: Deploy

on:
  workflow_run:
    workflows: ["Release"]
    types: [completed]
    branches: [main]
  # Also trigger on direct changes to demos or docs
  push:
    branches: [main]
    paths:
      - 'demos/**'
      - 'docs/**'
      - '.github/workflows/deploy.yml'
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: deploy-${{ github.ref }}
  cancel-in-progress: true

jobs:
  deploy:
    name: Deploy to GitHub Pages
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    # Only run if Release workflow succeeded or on direct push to demos/docs
    if: >
      github.event_name == 'workflow_dispatch' ||
      (github.event_name == 'workflow_run' && github.event.workflow_run.conclusion == 'success') ||
      (github.event_name == 'push')
    
    steps:
      - name: Checkout
        uses: actions/checkout@v5

      - name: Setup Node & Install
        uses: ./.github/actions/setup-node
        with:
          node-version: '20.x'

      - name: Try to download cached build artifacts
        id: download-build
        continue-on-error: true
        uses: actions/download-artifact@v5
        with:
          name: build-${{ github.sha }}-20.x
          path: .

      - name: Build main package if no cached artifacts
        if: steps.download-build.outcome == 'failure'
        run: |
          npm run build
          npm run build --workspace=packages/forge-react

      - name: Try to download cached Storybook artifacts
        id: download-storybook
        continue-on-error: true
        uses: actions/download-artifact@v5
        with:
          name: storybook-${{ github.sha }}
          path: storybook-static/

      - name: Build Storybook if no cached artifacts
        if: steps.download-storybook.outcome == 'failure'
        run: npm run build-storybook

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Create docs site structure
        run: |
          mkdir -p _site
          
          # Copy main documentation
          cp -r docs/* _site/
          
          # Copy built Storybook
          cp -r storybook-static _site/storybook
          
          # Create main index.html
          cat > _site/index.html << 'EOF'
          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Forge UI Component Library</title>
            <style>
              body { font-family: system-ui, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
              h1 { color: #3b82f6; }
              .card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; margin: 1rem 0; }
              .button { display: inline-block; padding: 0.5rem 1rem; background: #3b82f6; color: white; text-decoration: none; border-radius: 6px; margin: 0.5rem 0.5rem 0.5rem 0; }
              .button:hover { background: #2563eb; }
            </style>
          </head>
          <body>
            <h1>🔥 Forge UI Component Library</h1>
            <p>The FIRST AI-Native component library built for the age of AI-assisted development.</p>
            
            <div class="card">
              <h2>📚 Documentation</h2>
              <a href="./components/" class="button">Component Docs</a>
              <a href="./guides/" class="button">Guides</a>
              <a href="./patterns/" class="button">Patterns</a>
            </div>
            
            <div class="card">
              <h2>🎨 Interactive Showcase</h2>
              <a href="./storybook/" class="button">Storybook</a>
            </div>
            
            <div class="card">
              <h2>💻 Live Demos</h2>
              <a href="./demos/nextjs/" class="button">Next.js Demo</a>
              <a href="./demos/react/" class="button">React Demo (Coming Soon)</a>
              <a href="./demos/vue/" class="button">Vue Demo (Coming Soon)</a>
              <a href="./demos/vanilla/" class="button">Vanilla JS Demo (Coming Soon)</a>
            </div>
            
            <div class="card">
              <h2>🚀 Quick Start</h2>
              <pre><code>npm install @nexcraft/forge</code></pre>
              <p>Visit our <a href="https://github.com/dev-ignis/forge">GitHub repository</a> for complete documentation.</p>
            </div>
          </body>
          </html>
          EOF

      - name: Install Next.js demo dependencies
        run: |
          cd demos/nextjs-app
          npm ci --legacy-peer-deps

      - name: Build Next.js demo
        run: |
          cd demos/nextjs-app
          npm run build

      - name: Copy Next.js demo to site
        run: |
          mkdir -p _site/demos/nextjs
          cp -r demos/nextjs-app/out/* _site/demos/nextjs/

      - name: Create demos index
        run: |
          mkdir -p _site/demos
          cat > _site/demos/index.html << 'EOF'
          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Forge UI Demos</title>
            <style>
              body { font-family: system-ui, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
              h1 { color: #3b82f6; }
              .demo { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; margin: 1rem 0; }
              .button { display: inline-block; padding: 0.5rem 1rem; background: #3b82f6; color: white; text-decoration: none; border-radius: 6px; margin: 0.5rem 0.5rem 0.5rem 0; }
              .button:hover { background: #2563eb; }
              .status { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; }
              .available { background: #dcfce7; color: #166534; }
              .coming-soon { background: #fef3c7; color: #92400e; }
            </style>
          </head>
          <body>
            <h1>🔥 Forge UI Demos</h1>
            <p>Production-quality applications showcasing Forge components in real-world scenarios.</p>

            <div class="demo">
              <h2>Next.js Demo <span class="status available">✅ Available</span></h2>
              <p>Full-featured Next.js application with SSR, React Hook Form integration, and Tailwind CSS.</p>
              <a href="./nextjs/" class="button">View Live Demo</a>
              <a href="https://github.com/dev-ignis/forge/tree/main/demos/nextjs-app" class="button">View Source</a>
            </div>

            <div class="demo">
              <h2>React Demo <span class="status coming-soon">🚧 Coming Soon</span></h2>
              <p>Pure React application with Vite showcasing component integration patterns.</p>
            </div>

            <div class="demo">
              <h2>Vue Demo <span class="status coming-soon">🚧 Coming Soon</span></h2>
              <p>Vue 3 Composition API application demonstrating web components integration.</p>
            </div>

            <div class="demo">
              <h2>Vanilla JS Demo <span class="status coming-soon">🚧 Coming Soon</span></h2>
              <p>Zero-dependency implementation using native Web Components API.</p>
            </div>
            
            <p><a href="../">← Back to Main Documentation</a></p>
          </body>
          </html>
          EOF

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v4
        with:
          path: ./_site

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4