@screenbook/ui 0.1.0 → 1.1.0

package/src/pages/api/save-mock.ts

@@ -0,0 +1,182 @@
+import { existsSync, readFileSync } from "node:fs"
+import { join } from "node:path"
+import type { APIRoute } from "astro"
+import { Project, SyntaxKind } from "ts-morph"
+
+interface ScreenWithFilePath {
+	id: string
+	filePath: string
+	[key: string]: unknown
+}
+
+interface SaveMockRequest {
+	screenId: string
+	mock: {
+		sections: Array<{
+			title?: string
+			layout?: string
+			elements: Array<Record<string, unknown>>
+		}>
+	}
+}
+
+export const POST: APIRoute = async ({ request }) => {
+	try {
+		const body = (await request.json()) as SaveMockRequest
+		const { screenId, mock } = body
+
+		if (!screenId || !mock) {
+			return new Response(
+				JSON.stringify({ error: "screenId and mock are required" }),
+				{ status: 400, headers: { "Content-Type": "application/json" } },
+			)
+		}
+
+		// Load screens.json to get filePath
+		const screensPath = join(process.cwd(), ".screenbook", "screens.json")
+		if (!existsSync(screensPath)) {
+			return new Response(
+				JSON.stringify({
+					error: "screens.json not found. Run screenbook build first.",
+				}),
+				{ status: 404, headers: { "Content-Type": "application/json" } },
+			)
+		}
+
+		const screens = JSON.parse(
+			readFileSync(screensPath, "utf-8"),
+		) as ScreenWithFilePath[]
+		const screen = screens.find((s) => s.id === screenId)
+
+		if (!screen) {
+			return new Response(
+				JSON.stringify({ error: `Screen '${screenId}' not found` }),
+				{ status: 404, headers: { "Content-Type": "application/json" } },
+			)
+		}
+
+		if (!screen.filePath) {
+			return new Response(
+				JSON.stringify({
+					error: `Screen '${screenId}' does not have filePath. Rebuild with latest CLI.`,
+				}),
+				{ status: 400, headers: { "Content-Type": "application/json" } },
+			)
+		}
+
+		// Use ts-morph to update the file
+		const result = await updateMockInFile(screen.filePath, mock)
+
+		if (!result.success) {
+			return new Response(JSON.stringify({ error: result.error }), {
+				status: 500,
+				headers: { "Content-Type": "application/json" },
+			})
+		}
+
+		return new Response(
+			JSON.stringify({ success: true, filePath: screen.filePath }),
+			{ status: 200, headers: { "Content-Type": "application/json" } },
+		)
+	} catch (error) {
+		const message = error instanceof Error ? error.message : "Unknown error"
+		return new Response(JSON.stringify({ error: message }), {
+			status: 500,
+			headers: { "Content-Type": "application/json" },
+		})
+	}
+}
+
+async function updateMockInFile(
+	filePath: string,
+	mock: SaveMockRequest["mock"],
+): Promise<{ success: boolean; error?: string }> {
+	try {
+		const project = new Project()
+		const sourceFile = project.addSourceFileAtPath(filePath)
+
+		// Find the defineScreen call
+		const callExpressions = sourceFile.getDescendantsOfKind(
+			SyntaxKind.CallExpression,
+		)
+		const defineScreenCall = callExpressions.find((call) => {
+			const expression = call.getExpression()
+			return expression.getText() === "defineScreen"
+		})
+
+		if (!defineScreenCall) {
+			return { success: false, error: "defineScreen() call not found in file" }
+		}
+
+		// Get the object literal argument
+		const args = defineScreenCall.getArguments()
+		const firstArg = args[0]
+		if (!firstArg) {
+			return { success: false, error: "defineScreen() has no arguments" }
+		}
+
+		if (firstArg.getKind() !== SyntaxKind.ObjectLiteralExpression) {
+			return {
+				success: false,
+				error: "defineScreen() argument is not an object literal",
+			}
+		}
+
+		const obj = firstArg.asKind(SyntaxKind.ObjectLiteralExpression)
+		if (!obj) {
+			return { success: false, error: "Failed to parse object literal" }
+		}
+
+		// Find existing mock property
+		const mockProperty = obj.getProperty("mock")
+
+		// Generate mock code string
+		const mockCode = generateMockCode(mock)
+
+		if (mockProperty) {
+			// Update existing mock property
+			mockProperty.replaceWithText(`mock: ${mockCode}`)
+		} else {
+			// Add new mock property at the end
+			obj.addPropertyAssignment({
+				name: "mock",
+				initializer: mockCode,
+			})
+		}
+
+		// Save the file
+		await sourceFile.save()
+
+		return { success: true }
+	} catch (error) {
+		const message = error instanceof Error ? error.message : "Unknown error"
+		return { success: false, error: message }
+	}
+}
+
+function generateMockCode(mock: SaveMockRequest["mock"]): string {
+	const sections = mock.sections.map((section) => {
+		const props: string[] = []
+
+		if (section.title) {
+			props.push(`title: ${JSON.stringify(section.title)}`)
+		}
+		if (section.layout && section.layout !== "vertical") {
+			props.push(`layout: ${JSON.stringify(section.layout)}`)
+		}
+
+		const elements = section.elements.map((element) => {
+			const elementProps = Object.entries(element)
+				.filter(([_, value]) => value !== undefined && value !== "")
+				.map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
+				.join(", ")
+			return `{ ${elementProps} }`
+		})
+
+		props.push(`elements: [\n\t\t\t${elements.join(",\n\t\t\t")},\n\t\t]`)
+
+		return `{\n\t\t${props.join(",\n\t\t")},\n\t}`
+	})
+
+	return `{\n\tsections: [\n\t${sections.join(",\n\t")},\n\t],\n}`
+}

package/src/pages/editor.astro

@@ -0,0 +1,33 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import { MockFormEditor } from "@/components/MockFormEditor"
+import { loadScreens } from "@/utils/loadScreens"
+
+const screens = loadScreens()
+const url = Astro.url
+const screenId = url.searchParams.get("screen")
+
+const screen = screenId ? screens.find((s) => s.id === screenId) : null
+---
+
+<Layout title="Mock Editor">
+	<div class="editor-container">
+		<MockFormEditor
+			client:only="react"
+			screenId={screen?.id}
+			screenTitle={screen?.title || "New Screen"}
+			initialMock={screen?.mock}
+		/>
+	</div>
+</Layout>
+
+<style>
+	.editor-container {
+		position: fixed;
+		top: 60px;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: #141822;
+	}
+</style>

package/src/pages/graph.astro

@@ -6,13 +6,19 @@ const screens = loadScreens()
 
 // Generate Navigation Mermaid graph
 let navigationGraph = ""
+const screensWithMock: string[] = []
 if (screens.length > 0) {
 	const lines: string[] = ["flowchart TD"]
 
 	for (const screen of screens) {
 		const label = screen.title.replace(/"/g, "'")
 		const id = screen.id.replace(/\./g, "_")
-		lines.push(`    ${id}["${label}"]`)
+		const mockIndicator = screen.mock ? " 📱" : ""
+		lines.push(`    ${id}["${label}${mockIndicator}"]`)
+		lines.push(`    click ${id} "/screen/${screen.id}"`)
+		if (screen.mock) {
+			screensWithMock.push(id)
+		}
 	}
 
 	lines.push("")
@@ -27,9 +33,22 @@ if (screens.length > 0) {
 		}
 	}
 
+	// Add styling for screens with mock
+	if (screensWithMock.length > 0) {
+		lines.push("")
+		lines.push("    %% Mock styling")
+		lines.push("    classDef hasMock stroke:#14b8a6,stroke-width:2px")
+		for (const id of screensWithMock) {
+			lines.push(`    class ${id} hasMock`)
+		}
+	}
+
 	navigationGraph = lines.join("\n")
 }
 
+// Count screens with mock
+const mockCount = screens.filter(s => s.mock).length
+
 // Generate API Dependency Mermaid graph
 let apiGraph = ""
 if (screens.length > 0) {
@@ -145,6 +164,7 @@ const apiCount = new Set(
 					<div class="graph-stats">
 						<span class="stat">{screens.length} screens</span>
 						<span class="stat">{apiCount} APIs</span>
+						{mockCount > 0 && <span class="stat stat-mock">📱 {mockCount} with mock</span>}
 					</div>
 				</div>
 
@@ -161,6 +181,10 @@ const apiCount = new Set(
 						<div class="legend-node"></div>
 						<span>Screen</span>
 					</div>
+					<div class="graph-legend-item">
+						<div class="legend-node legend-mock"></div>
+						<span>Screen with mock 📱</span>
+					</div>
 					<div class="graph-legend-item">
 						<div class="legend-edge"></div>
 						<span>Navigation flow</span>
@@ -191,6 +215,7 @@ const apiCount = new Set(
 		const mermaidConfig = {
 			startOnLoad: false,
 			theme: "dark",
+			securityLevel: "loose", // Enable click handlers
 			themeVariables: {
 				darkMode: true,
 				background: "transparent",
@@ -331,4 +356,13 @@ const apiCount = new Set(
 		background: #14b8a6 !important;
 		border-color: #5eead4 !important;
 	}
+
+	.legend-mock {
+		border-color: #14b8a6 !important;
+		border-width: 2px !important;
+	}
+
+	.stat-mock {
+		color: #14b8a6;
+	}
 </style>

package/src/pages/screen/[id].astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "@/layouts/Layout.astro"
+import MockPreview from "@/components/MockPreview.astro"
 import { loadScreens } from "@/utils/loadScreens"
 import { getApiDependencyCount } from "@/utils/impactAnalysis"
 
@@ -128,6 +129,14 @@ const nextScreens = screens.filter((s) => screen.next?.includes(s.id))
 						</div>
 					</div>
 				)}
+
+				<!-- Mock Preview -->
+				{screen.mock && (
+					<div class="section">
+						<h2 class="section-title">UI Wireframe</h2>
+						<MockPreview mock={screen.mock} screenId={screen.id} />
+					</div>
+				)}
 			</div>
 
 			<div>