@screenbook/ui 1.0.0 → 1.1.1

package/src/pages/coverage.astro

@@ -1,399 +0,0 @@
----
-import Layout from "@/layouts/Layout.astro"
-import { loadCoverage } from "@/utils/loadCoverage"
-import { loadScreens } from "@/utils/loadScreens"
-
-const coverage = loadCoverage()
-const screens = loadScreens()
-
-// Calculate color based on percentage
-function getPercentageColor(percentage: number): string {
-	if (percentage >= 80) return "text-green-400"
-	if (percentage >= 50) return "text-yellow-400"
-	return "text-red-400"
-}
-
-function getPercentageBg(percentage: number): string {
-	if (percentage >= 80) return "bg-green-500/20 border-green-500/30"
-	if (percentage >= 50) return "bg-yellow-500/20 border-yellow-500/30"
-	return "bg-red-500/20 border-red-500/30"
-}
----
-
-<Layout title="Coverage" currentPage="coverage">
-	<div class="container">
-		<div class="page-header">
-			<h1 class="page-title">Coverage Dashboard</h1>
-			<p class="page-description">
-				Track documentation coverage across your screens.
-			</p>
-		</div>
-
-		{!coverage ? (
-			<div class="empty-state">
-				<svg class="empty-state-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
-				</svg>
-				<h2 class="empty-state-title">No coverage data</h2>
-				<p class="empty-state-description">
-					Run the build command to generate coverage data.
-				</p>
-				<code class="empty-state-code">
-					<span class="prompt">$</span> screenbook build
-				</code>
-			</div>
-		) : (
-			<>
-				{/* Main Stats */}
-				<div class="coverage-hero">
-					<div class={`coverage-percentage ${getPercentageBg(coverage.percentage)}`}>
-						<span class={`percentage-value ${getPercentageColor(coverage.percentage)}`}>
-							{coverage.percentage}%
-						</span>
-						<span class="percentage-label">Coverage</span>
-					</div>
-					<div class="coverage-stats">
-						<div class="stat-card">
-							<div class="stat-value">{coverage.covered}</div>
-							<div class="stat-label">Documented</div>
-						</div>
-						<div class="stat-card">
-							<div class="stat-value">{coverage.total}</div>
-							<div class="stat-label">Total Routes</div>
-						</div>
-						<div class="stat-card">
-							<div class="stat-value">{coverage.missing.length}</div>
-							<div class="stat-label">Missing</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="coverage-grid">
-					{/* By Owner */}
-					<div class="coverage-section">
-						<h2 class="section-title">
-							<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
-							</svg>
-							By Owner
-						</h2>
-						<div class="owner-list">
-							{Object.entries(coverage.byOwner).map(([owner, data]) => (
-								<div class="owner-item">
-									<div class="owner-info">
-										<span class="owner-name">{owner}</span>
-										<span class="owner-count">{data.count} screen{data.count > 1 ? "s" : ""}</span>
-									</div>
-									<div class="owner-bar">
-										<div
-											class="owner-bar-fill"
-											style={`width: ${Math.round((data.count / coverage.covered) * 100)}%`}
-										></div>
-									</div>
-								</div>
-							))}
-						</div>
-					</div>
-
-					{/* By Tag */}
-					<div class="coverage-section">
-						<h2 class="section-title">
-							<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
-								<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
-							</svg>
-							By Tag
-						</h2>
-						<div class="tags-grid">
-							{Object.entries(coverage.byTag)
-								.sort(([, a], [, b]) => b - a)
-								.map(([tag, count]) => (
-									<a href={`/?tag=${encodeURIComponent(tag)}`} class="tag-card">
-										<span class="tag-name">{tag}</span>
-										<span class="tag-count">{count}</span>
-									</a>
-								))}
-						</div>
-					</div>
-				</div>
-
-				{/* Missing Routes */}
-				{coverage.missing.length > 0 && (
-					<div class="coverage-section missing-section">
-						<h2 class="section-title">
-							<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-							</svg>
-							Missing Documentation ({coverage.missing.length})
-						</h2>
-						<p class="section-description">
-							These routes don't have a <code>screen.meta.ts</code> file yet.
-						</p>
-						<div class="missing-list">
-							{coverage.missing.map((item) => (
-								<div class="missing-item">
-									<div class="missing-route">
-										<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
-										</svg>
-										<span>{item.route}</span>
-									</div>
-									<div class="missing-action">
-										<code class="suggested-path">{item.suggestedPath}</code>
-									</div>
-								</div>
-							))}
-						</div>
-					</div>
-				)}
-
-				<div class="coverage-footer">
-					<p class="timestamp">
-						Last updated: {new Date(coverage.timestamp).toLocaleString()}
-					</p>
-				</div>
-			</>
-		)}
-	</div>
-</Layout>
-
-<style>
-	.coverage-hero {
-		display: flex;
-		gap: 32px;
-		align-items: center;
-		margin-bottom: 48px;
-	}
-
-	.coverage-percentage {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 180px;
-		height: 180px;
-		border-radius: 50%;
-		border: 3px solid;
-		flex-shrink: 0;
-	}
-
-	.percentage-value {
-		font-size: 3.5rem;
-		font-weight: 700;
-		line-height: 1;
-	}
-
-	.percentage-label {
-		font-size: var(--text-sm);
-		color: var(--color-text-secondary);
-		margin-top: 4px;
-	}
-
-	.coverage-stats {
-		display: flex;
-		gap: 24px;
-		flex-wrap: wrap;
-	}
-
-	.stat-card {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-lg);
-		padding: 24px 32px;
-		text-align: center;
-		min-width: 120px;
-	}
-
-	.stat-value {
-		font-size: var(--text-3xl);
-		font-weight: 700;
-		color: var(--color-text);
-	}
-
-	.stat-label {
-		font-size: var(--text-sm);
-		color: var(--color-text-muted);
-		margin-top: 4px;
-	}
-
-	.coverage-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-		gap: 32px;
-		margin-bottom: 48px;
-	}
-
-	.coverage-section {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-lg);
-		padding: 24px;
-	}
-
-	.section-title {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		font-size: var(--text-lg);
-		font-weight: 600;
-		margin-bottom: 20px;
-		color: var(--color-text);
-	}
-
-	.section-title svg {
-		width: 20px;
-		height: 20px;
-		color: var(--color-accent);
-	}
-
-	.section-description {
-		font-size: var(--text-sm);
-		color: var(--color-text-muted);
-		margin-bottom: 16px;
-	}
-
-	.owner-list {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	.owner-item {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	.owner-info {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.owner-name {
-		font-size: var(--text-sm);
-		font-weight: 500;
-		color: var(--color-text);
-	}
-
-	.owner-count {
-		font-size: var(--text-xs);
-		color: var(--color-text-muted);
-	}
-
-	.owner-bar {
-		height: 8px;
-		background: var(--color-bg-muted);
-		border-radius: 4px;
-		overflow: hidden;
-	}
-
-	.owner-bar-fill {
-		height: 100%;
-		background: var(--color-accent);
-		border-radius: 4px;
-		transition: width 0.3s ease;
-	}
-
-	.tags-grid {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-	}
-
-	.tag-card {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 8px 12px;
-		background: var(--color-bg-muted);
-		border-radius: var(--radius-md);
-		text-decoration: none;
-		transition: background 0.15s ease;
-	}
-
-	.tag-card:hover {
-		background: var(--color-surface-hover);
-	}
-
-	.tag-name {
-		font-size: var(--text-sm);
-		color: var(--color-text);
-	}
-
-	.tag-count {
-		font-size: var(--text-xs);
-		color: var(--color-accent);
-		font-weight: 600;
-		background: var(--color-accent-bg);
-		padding: 2px 6px;
-		border-radius: 4px;
-	}
-
-	.missing-section {
-		grid-column: 1 / -1;
-	}
-
-	.missing-list {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
-
-	.missing-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 12px 16px;
-		background: var(--color-bg-muted);
-		border-radius: var(--radius-md);
-		border-left: 3px solid var(--color-warning);
-	}
-
-	.missing-route {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		font-size: var(--text-sm);
-		color: var(--color-text);
-	}
-
-	.missing-route svg {
-		width: 16px;
-		height: 16px;
-		color: var(--color-text-muted);
-	}
-
-	.suggested-path {
-		font-size: var(--text-xs);
-		color: var(--color-text-muted);
-	}
-
-	.coverage-footer {
-		text-align: center;
-		padding-top: 24px;
-		border-top: 1px solid var(--color-border);
-	}
-
-	.timestamp {
-		font-size: var(--text-xs);
-		color: var(--color-text-muted);
-	}
-
-	@media (max-width: 768px) {
-		.coverage-hero {
-			flex-direction: column;
-			text-align: center;
-		}
-
-		.coverage-stats {
-			justify-content: center;
-		}
-
-		.missing-item {
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 8px;
-		}
-	}
-</style>