@etus/bhono-app 0.1.1

package/templates/base/scripts/capture-prod-session.ts

@@ -0,0 +1,250 @@
+#!/usr/bin/env npx tsx
+
+/**
+ * Authentication Setup Script for OAuth
+ *
+ * This script helps set up authentication state for Playwright tests
+ * when using OAuth providers (Google, GitHub, etc.).
+ *
+ * It opens a browser, you complete the OAuth flow manually,
+ * and the script saves the authentication state to a file.
+ *
+ * Usage:
+ *   pnpm tsx scripts/capture-prod-session.ts
+ *   pnpm tsx scripts/capture-prod-session.ts --base-url https://staging.example.com
+ *   pnpm tsx scripts/capture-prod-session.ts --output custom-auth.json
+ *
+ * Environment Variables:
+ *   BASE_URL    Base URL of the application (default: production URL)
+ *   CI          If set, runs in headless mode (not recommended for OAuth)
+ */
+
+import { chromium, devices } from '@playwright/test'
+import * as fs from 'fs'
+import * as path from 'path'
+
+// Use same device as playwright setup to match user-agent fingerprint
+const deviceConfig = devices['Desktop Chrome']
+
+// Default configuration
+const DEFAULT_CONFIG = {
+  baseURL: process.env.BASE_URL || 'https://{{projectName}}.a3s.workers.dev',
+  loginPath: '/login',
+  successURLPattern: '**/dashboard',
+  outputPath: 'tests/e2e/.auth/user.json',
+  accountOutputPath: 'tests/e2e/.auth/account.json',
+  headless: false, // OAuth requires headed mode
+  timeout: 120_000, // 2 minutes for OAuth flow
+  slowMo: 100
+}
+
+interface Config {
+  baseURL: string
+  loginPath: string
+  successURLPattern: string
+  outputPath: string
+  accountOutputPath: string
+  headless: boolean
+  timeout: number
+  slowMo: number
+}
+
+// Parse command line arguments
+function parseArgs(): Config {
+  const args = process.argv.slice(2)
+  const config: Config = { ...DEFAULT_CONFIG }
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]
+
+    if (arg === '--base-url' && i + 1 < args.length) {
+      config.baseURL = args[++i]
+    } else if (arg === '--output' && i + 1 < args.length) {
+      config.outputPath = args[++i]
+    } else if (arg === '--timeout' && i + 1 < args.length) {
+      config.timeout = parseInt(args[++i], 10)
+    } else if (arg === '--headless') {
+      config.headless = true
+    } else if (arg === '--help' || arg === '-h') {
+      printHelp()
+      process.exit(0)
+    }
+  }
+
+  return config
+}
+
+function printHelp(): void {
+  console.log(`
+OAuth Authentication Setup Script
+
+Usage:
+  pnpm tsx scripts/capture-prod-session.ts [options]
+
+Options:
+  --base-url <url>    Base URL of the application
+  --output <path>     Output path for auth state (default: tests/e2e/.auth/user.json)
+  --timeout <ms>      Timeout for OAuth flow in ms (default: 120000)
+  --headless          Run in headless mode (not recommended for OAuth)
+  --help, -h          Show this help message
+
+Environment Variables:
+  BASE_URL            Base URL (default: https://{{projectName}}.a3s.workers.dev)
+
+Examples:
+  # Capture session from production
+  pnpm tsx scripts/capture-prod-session.ts
+
+  # Capture session from staging
+  pnpm tsx scripts/capture-prod-session.ts --base-url https://staging.example.com
+
+  # Custom output path
+  pnpm tsx scripts/capture-prod-session.ts --output ./my-auth.json
+`)
+}
+
+async function captureSession(config: Config): Promise<void> {
+  console.log('\n🔐 OAuth Authentication Setup\n')
+  console.log('━'.repeat(50))
+  console.log(`📍 Base URL:  ${config.baseURL}`)
+  console.log(`💾 Output:    ${config.outputPath}`)
+  console.log(`⏱️  Timeout:   ${config.timeout / 1000}s`)
+  console.log('━'.repeat(50))
+
+  // Ensure output directory exists
+  const outputDir = path.dirname(config.outputPath)
+  fs.mkdirSync(outputDir, { recursive: true })
+
+  const browser = await chromium.launch({
+    headless: config.headless,
+    slowMo: config.slowMo
+  })
+
+  try {
+    // Use same device settings as playwright setup for user-agent consistency
+    const context = await browser.newContext({
+      ...deviceConfig,
+    })
+    const page = await context.newPage()
+
+    // Navigate to login page
+    console.log(`\n🌐 Navigating to ${config.baseURL}${config.loginPath}...`)
+    await page.goto(`${config.baseURL}${config.loginPath}`)
+    await page.waitForLoadState('domcontentloaded')
+
+    console.log('\n' + '═'.repeat(50))
+    console.log('👆 Please complete the OAuth login in the browser')
+    console.log('   (Sign in with Google, GitHub, etc.)')
+    console.log('═'.repeat(50) + '\n')
+
+    console.log('⏳ Waiting for successful authentication...')
+
+    // Wait for navigation to success URL (dashboard)
+    try {
+      await page.waitForURL(config.successURLPattern, {
+        timeout: config.timeout
+      })
+      console.log('\n✅ Authentication successful!')
+    } catch (error) {
+      const currentUrl = page.url()
+      console.log(`\n⚠️  Timeout waiting for ${config.successURLPattern}`)
+      console.log(`   Current URL: ${currentUrl}`)
+
+      // Check if we're on an authenticated page anyway
+      if (
+        currentUrl.includes('/dashboard') ||
+        currentUrl.includes('/team') ||
+        currentUrl.includes('/settings') ||
+        currentUrl.includes('/account')
+      ) {
+        console.log('   → Detected authenticated page, continuing...')
+      } else {
+        throw new Error(
+          `Authentication flow not completed. Current URL: ${currentUrl}`
+        )
+      }
+    }
+
+    // Verify authentication via API
+    console.log('\n🔍 Verifying authentication...')
+    const meResponse = await page.request.get(`${config.baseURL}/auth/me`)
+
+    if (!meResponse.ok()) {
+      throw new Error(
+        `Auth verification failed. /auth/me returned ${meResponse.status()}`
+      )
+    }
+
+    const userData = await meResponse.json()
+    console.log(`   👤 Logged in as: ${userData.email}`)
+    console.log(`   📛 Name: ${userData.name || 'N/A'}`)
+
+    // Save account ID if available
+    if (userData.accounts?.[0]?.id) {
+      const accountData = { accountId: userData.accounts[0].id }
+      fs.writeFileSync(
+        config.accountOutputPath,
+        JSON.stringify(accountData, null, 2)
+      )
+      console.log(`   🏢 Account ID saved to: ${config.accountOutputPath}`)
+    }
+
+    // Save authentication state
+    console.log('\n💾 Saving authentication state...')
+    await context.storageState({ path: config.outputPath })
+
+    // Verify saved state
+    const savedState = JSON.parse(fs.readFileSync(config.outputPath, 'utf-8'))
+    console.log('\n📊 State summary:')
+    console.log(`   - Cookies: ${savedState.cookies.length}`)
+    console.log(`   - Origins: ${savedState.origins.length}`)
+
+    const fullPath = path.resolve(config.outputPath)
+    console.log(`\n✅ Authentication state saved to:\n   ${fullPath}`)
+
+    console.log('\n' + '═'.repeat(50))
+    console.log('📝 Usage in tests:')
+    console.log('═'.repeat(50))
+    console.log(`
+  // In playwright.config.ts
+  use: {
+    storageState: '${config.outputPath}',
+  }
+
+  // Or run tests against production:
+  BASE_URL=${config.baseURL} pnpm test:e2e
+`)
+  } catch (error) {
+    console.error('\n❌ Authentication setup failed:')
+    console.error(`   ${(error as Error).message}`)
+
+    // Take screenshot for debugging
+    try {
+      const pages = browser.contexts()[0]?.pages()
+      if (pages?.[0]) {
+        const screenshotPath = 'auth-setup-error.png'
+        await pages[0].screenshot({ path: screenshotPath, fullPage: true })
+        console.error(`\n📸 Screenshot saved to: ${screenshotPath}`)
+      }
+    } catch {
+      // Ignore screenshot errors
+    }
+
+    process.exit(1)
+  } finally {
+    await browser.close()
+  }
+}
+
+// Main execution
+async function main(): Promise<void> {
+  try {
+    const config = parseArgs()
+    await captureSession(config)
+  } catch (error) {
+    console.error('Error:', (error as Error).message)
+    process.exit(1)
+  }
+}
+
+main()

package/templates/base/scripts/generate-openapi.ts

@@ -0,0 +1,23 @@
+// scripts/generate-openapi.ts
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { api } from '../src/server/routes/index.ts'
+import { openApiConfig } from '../src/server/routes/openapi.ts'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+const outputPath = path.join(rootDir, 'docs', 'openapi.json')
+
+async function main() {
+  const document = api.getOpenAPIDocument(openApiConfig)
+  await fs.mkdir(path.dirname(outputPath), { recursive: true })
+  await fs.writeFile(outputPath, JSON.stringify(document, null, 2), 'utf-8')
+  console.log(`OpenAPI spec written to ${outputPath}`)
+}
+
+main().catch((error) => {
+  console.error('Failed to generate OpenAPI spec')
+  console.error(error)
+  process.exit(1)
+})

package/templates/base/scripts/init.sh

@@ -0,0 +1,121 @@
+#!/bin/bash
+
+# Hono Multi-Tenant SaaS Boilerplate - Development Environment Setup
+# This script initializes the development environment for future coding agents
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}========================================${NC}"
+echo -e "${BLUE}  Hono Boilerplate - Dev Environment   ${NC}"
+echo -e "${BLUE}========================================${NC}"
+echo ""
+
+# Check for required tools
+echo -e "${YELLOW}Checking required tools...${NC}"
+
+if ! command -v node &> /dev/null; then
+    echo -e "${RED}Error: Node.js is not installed${NC}"
+    echo "Please install Node.js 18+ from https://nodejs.org/"
+    exit 1
+fi
+
+if ! command -v pnpm &> /dev/null; then
+    echo -e "${YELLOW}pnpm not found. Installing...${NC}"
+    npm install -g pnpm
+fi
+
+NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
+if [ "$NODE_VERSION" -lt 18 ]; then
+    echo -e "${RED}Error: Node.js 18+ is required (found v${NODE_VERSION})${NC}"
+    exit 1
+fi
+
+echo -e "${GREEN}Node.js $(node -v) detected${NC}"
+echo -e "${GREEN}pnpm $(pnpm -v) detected${NC}"
+
+# Install dependencies
+echo ""
+echo -e "${YELLOW}Installing dependencies...${NC}"
+pnpm install
+
+# Check for .env file
+if [ ! -f .env ]; then
+    if [ -f .env.example ]; then
+        echo ""
+        echo -e "${YELLOW}Creating .env from .env.example...${NC}"
+        cp .env.example .env
+        echo -e "${YELLOW}Please update .env with your actual values:${NC}"
+        echo "  - GOOGLE_CLIENT_ID"
+        echo "  - GOOGLE_CLIENT_SECRET"
+        echo "  - JWT_SECRET (min 32 chars)"
+        echo "  - SENDGRID_API_KEY"
+    else
+        echo -e "${YELLOW}Warning: No .env file found. Create one based on required environment variables.${NC}"
+    fi
+fi
+
+# Generate Cloudflare types
+echo ""
+echo -e "${YELLOW}Generating Cloudflare types...${NC}"
+pnpm cf-typegen 2>/dev/null || echo -e "${YELLOW}Skipping cf-typegen (wrangler not configured)${NC}"
+
+# Run database migrations (local)
+echo ""
+echo -e "${YELLOW}Running database migrations...${NC}"
+pnpm db:migrate:local 2>/dev/null || echo -e "${YELLOW}Skipping migrations (D1 not available locally)${NC}"
+
+# Seed database (optional)
+echo ""
+echo -e "${YELLOW}Do you want to seed the database with test data? (y/n)${NC}"
+read -r -t 10 SEED_RESPONSE || SEED_RESPONSE="n"
+if [[ "$SEED_RESPONSE" =~ ^[Yy]$ ]]; then
+    pnpm db:seed 2>/dev/null || echo -e "${YELLOW}Skipping seed (D1 not available locally)${NC}"
+fi
+
+# Run tests to verify setup
+echo ""
+echo -e "${YELLOW}Running tests to verify setup...${NC}"
+pnpm test:run --reporter=dot 2>/dev/null || echo -e "${YELLOW}Tests skipped (run 'pnpm test' manually)${NC}"
+
+# Print summary
+echo ""
+echo -e "${GREEN}========================================${NC}"
+echo -e "${GREEN}  Environment Setup Complete!          ${NC}"
+echo -e "${GREEN}========================================${NC}"
+echo ""
+echo -e "${BLUE}Available commands:${NC}"
+echo ""
+echo -e "  ${GREEN}pnpm dev${NC}               Start development server (Vite + Wrangler)"
+echo -e "  ${GREEN}pnpm build${NC}             Build for production"
+echo -e "  ${GREEN}pnpm deploy${NC}            Deploy to Cloudflare Workers"
+echo ""
+echo -e "  ${GREEN}pnpm db:migrate:local${NC}  Apply migrations locally"
+echo -e "  ${GREEN}pnpm db:migrate:remote${NC} Apply migrations to production"
+echo -e "  ${GREEN}pnpm db:seed${NC}           Seed test data"
+echo ""
+echo -e "  ${GREEN}pnpm test${NC}              Run unit tests (watch mode)"
+echo -e "  ${GREEN}pnpm test:run${NC}          Run unit tests (single run)"
+echo -e "  ${GREEN}pnpm test:e2e${NC}          Run Playwright E2E tests"
+echo -e "  ${GREEN}pnpm test:e2e:ui${NC}       Run E2E tests with interactive UI"
+echo -e "  ${GREEN}pnpm test:coverage${NC}     Generate coverage report"
+echo ""
+echo -e "  ${GREEN}pnpm lint${NC}              Run ESLint"
+echo -e "  ${GREEN}pnpm cf-typegen${NC}        Generate Cloudflare types"
+echo ""
+echo -e "${BLUE}Access the application:${NC}"
+echo ""
+echo -e "  Local dev server:     ${GREEN}http://localhost:5173${NC}"
+echo -e "  API documentation:    ${GREEN}http://localhost:5173/api/swagger${NC}"
+echo -e "  OpenAPI JSON:         ${GREEN}http://localhost:5173/api/doc${NC}"
+echo -e "  Health check:         ${GREEN}http://localhost:5173/health${NC}"
+echo ""
+echo -e "${YELLOW}To start development, run:${NC}"
+echo -e "  ${GREEN}pnpm dev${NC}"
+echo ""

package/templates/base/src/client/__tests__/button.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen } from "./test-utils"
+import userEvent from "@testing-library/user-event"
+import { Button } from "@/components/ui/button"
+
+describe("Button", () => {
+  it("renders with default props", () => {
+    render(<Button>Click me</Button>)
+
+    expect(screen.getByRole("button")).toBeInTheDocument()
+    expect(screen.getByRole("button")).toHaveTextContent("Click me")
+  })
+
+  it("handles click events", async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+
+    render(<Button onClick={handleClick}>Click me</Button>)
+
+    await user.click(screen.getByRole("button"))
+
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it("can be disabled", () => {
+    render(<Button disabled>Disabled</Button>)
+
+    expect(screen.getByRole("button")).toBeDisabled()
+  })
+})