@screenbook/ui 1.1.0 → 1.1.2

package/src/components/MockPreview.astro

@@ -1,811 +0,0 @@
----
-import type { ScreenMock, MockElement, MockSection } from "@screenbook/core"
-
-interface Props {
-	mock: ScreenMock
-	screenId: string
-}
-
-const { mock, screenId } = Astro.props
-
-// Helper to get element variant color for buttons
-function getButtonStyle(variant?: string): string {
-	switch (variant) {
-		case "primary":
-			return "background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); color: white;"
-		case "danger":
-			return "background: #ef4444; color: white;"
-		default:
-			return "background: #3d4660; color: #94a3b8;"
-	}
-}
-
-// Helper to get text variant styles
-function getTextStyle(variant?: string): string {
-	switch (variant) {
-		case "heading":
-			return "font-size: 16px; font-weight: 700; color: #e2e8f0;"
-		case "subheading":
-			return "font-size: 14px; font-weight: 600; color: #cbd5e1;"
-		case "caption":
-			return "font-size: 11px; color: #64748b;"
-		default:
-			return "font-size: 13px; color: #94a3b8;"
-	}
-}
-
-// Calculate aspect ratio padding for image placeholders
-function getAspectRatioPadding(ratio?: string): string {
-	if (!ratio) return "56.25%" // 16:9 default
-	const [w, h] = ratio.split(":").map(Number)
-	if (!w || !h) return "56.25%"
-	return `${(h / w) * 100}%`
-}
----
-
-<div class="mock-preview">
-	<div class="mock-header">
-		<div class="mock-header-left">
-			<svg
-				class="mock-icon"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				stroke-width="2"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
-				></path>
-			</svg>
-			<span>Wireframe Mock</span>
-		</div>
-		<a href={`/editor?screen=${screenId}`} class="edit-mock-link">
-			<svg
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				stroke-width="2"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-				></path>
-			</svg>
-			Edit Mock
-		</a>
-	</div>
-
-	<div class="mock-frame">
-		{
-			mock.sections.map((section) => (
-				<div class="mock-section">
-					{section.title && <div class="section-title">{section.title}</div>}
-					<div
-						class={`section-elements ${section.layout === "horizontal" ? "horizontal" : "vertical"}`}
-					>
-						{section.elements.map((element) => {
-							if (element.type === "button") {
-								const buttonContent = (
-									<div
-										class={`mock-button ${element.navigateTo ? "has-navigation" : ""}`}
-										style={getButtonStyle(element.variant)}
-									>
-										<span class="button-label">{element.label}</span>
-										{element.navigateTo && (
-											<span class="button-navigate">
-												→ {element.navigateTo}
-											</span>
-										)}
-									</div>
-								)
-								return element.navigateTo ? (
-									<a
-										href={`/screen/${element.navigateTo}`}
-										class="element-link"
-									>
-										{buttonContent}
-									</a>
-								) : (
-									buttonContent
-								)
-							}
-
-							if (element.type === "input") {
-								return (
-									<div class="mock-input">
-										<span class="input-label">{element.label}</span>
-										<span class="input-placeholder">
-											{element.placeholder || "Enter value..."}
-										</span>
-									</div>
-								)
-							}
-
-							if (element.type === "link") {
-								const linkContent = (
-									<div
-										class={`mock-link-card ${element.navigateTo ? "has-navigation" : ""}`}
-									>
-										<span class="link-label">{element.label}</span>
-										{element.navigateTo && (
-											<span class="link-navigate">→ {element.navigateTo}</span>
-										)}
-									</div>
-								)
-								return element.navigateTo ? (
-									<a
-										href={`/screen/${element.navigateTo}`}
-										class="element-link"
-									>
-										{linkContent}
-									</a>
-								) : (
-									<div class="mock-link">{element.label}</div>
-								)
-							}
-
-							if (element.type === "text") {
-								return (
-									<div class="mock-text" style={getTextStyle(element.variant)}>
-										{element.label}
-									</div>
-								)
-							}
-
-							if (element.type === "image") {
-								return (
-									<div
-										class="mock-image"
-										style={`padding-bottom: ${getAspectRatioPadding(element.aspectRatio)}`}
-									>
-										<div class="image-placeholder">
-											<svg
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke="currentColor"
-												stroke-width="1.5"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-												/>
-											</svg>
-											<span>{element.label}</span>
-										</div>
-									</div>
-								)
-							}
-
-							if (element.type === "list") {
-								const itemCount = element.itemCount || 3
-								const listContent = (
-									<div
-										class={`mock-list ${element.itemNavigateTo ? "has-navigation" : ""}`}
-									>
-										<div class="list-header">{element.label}</div>
-										{Array.from({ length: itemCount }).map((_, i) => (
-											<div
-												class="list-item"
-												style={
-													i < itemCount - 1
-														? "border-bottom: 1px solid #1e2433;"
-														: ""
-												}
-											>
-												Item {i + 1}
-											</div>
-										))}
-										{element.itemNavigateTo && (
-											<div class="list-footer">→ {element.itemNavigateTo}</div>
-										)}
-									</div>
-								)
-								return element.itemNavigateTo ? (
-									<a
-										href={`/screen/${element.itemNavigateTo}`}
-										class="element-link"
-									>
-										{listContent}
-									</a>
-								) : (
-									listContent
-								)
-							}
-
-							if (element.type === "table") {
-								const columns = element.columns || [
-									"Column 1",
-									"Column 2",
-									"Column 3",
-								]
-								const rowCount = element.rowCount || 3
-								const tableContent = (
-									<div
-										class={`mock-table ${element.rowNavigateTo ? "has-navigation" : ""}`}
-									>
-										<div class="table-header">{element.label}</div>
-										<div class="table-content">
-											<div class="table-row table-header-row">
-												{columns.map((col) => (
-													<div class="table-cell">{col}</div>
-												))}
-											</div>
-											{Array.from({ length: rowCount }).map((_, i) => (
-												<div class="table-row">
-													{columns.map((_, j) => (
-														<div class="table-cell">
-															Data {i + 1}-{j + 1}
-														</div>
-													))}
-												</div>
-											))}
-										</div>
-										{element.rowNavigateTo && (
-											<div class="table-footer">→ {element.rowNavigateTo}</div>
-										)}
-									</div>
-								)
-								return element.rowNavigateTo ? (
-									<a
-										href={`/screen/${element.rowNavigateTo}`}
-										class="element-link"
-									>
-										{tableContent}
-									</a>
-								) : (
-									tableContent
-								)
-							}
-
-							return null
-						})}
-					</div>
-					{/* Child sections */}
-					{section.children && section.children.length > 0 && (
-						<div class="child-sections">
-							{section.children.map((childSection) => (
-								<div class="mock-section child-section">
-									{childSection.title && (
-										<div class="section-title child-section-title">
-											{childSection.title}
-										</div>
-									)}
-									<div
-										class={`section-elements ${childSection.layout === "horizontal" ? "horizontal" : "vertical"}`}
-									>
-										{childSection.elements.map((element) => {
-											if (element.type === "button") {
-												const buttonContent = (
-													<div
-														class={`mock-button ${element.navigateTo ? "has-navigation" : ""}`}
-														style={getButtonStyle(element.variant)}
-													>
-														<span class="button-label">{element.label}</span>
-														{element.navigateTo && (
-															<span class="button-navigate">
-																→ {element.navigateTo}
-															</span>
-														)}
-													</div>
-												)
-												return element.navigateTo ? (
-													<a
-														href={`/screen/${element.navigateTo}`}
-														class="element-link"
-													>
-														{buttonContent}
-													</a>
-												) : (
-													buttonContent
-												)
-											}
-											if (element.type === "input") {
-												return (
-													<div class="mock-input">
-														<span class="input-label">{element.label}</span>
-														<span class="input-placeholder">
-															{element.placeholder || "Enter value..."}
-														</span>
-													</div>
-												)
-											}
-											if (element.type === "link") {
-												const linkContent = (
-													<div
-														class={`mock-link-card ${element.navigateTo ? "has-navigation" : ""}`}
-													>
-														<span class="link-label">{element.label}</span>
-														{element.navigateTo && (
-															<span class="link-navigate">
-																→ {element.navigateTo}
-															</span>
-														)}
-													</div>
-												)
-												return element.navigateTo ? (
-													<a
-														href={`/screen/${element.navigateTo}`}
-														class="element-link"
-													>
-														{linkContent}
-													</a>
-												) : (
-													<div class="mock-link">{element.label}</div>
-												)
-											}
-											if (element.type === "text") {
-												return (
-													<div
-														class="mock-text"
-														style={getTextStyle(element.variant)}
-													>
-														{element.label}
-													</div>
-												)
-											}
-											if (element.type === "image") {
-												return (
-													<div
-														class="mock-image"
-														style={`padding-bottom: ${getAspectRatioPadding(element.aspectRatio)}`}
-													>
-														<div class="image-placeholder">
-															<svg
-																fill="none"
-																viewBox="0 0 24 24"
-																stroke="currentColor"
-																stroke-width="1.5"
-															>
-																<path
-																	stroke-linecap="round"
-																	stroke-linejoin="round"
-																	d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-																/>
-															</svg>
-															<span>{element.label}</span>
-														</div>
-													</div>
-												)
-											}
-											if (element.type === "list") {
-												const itemCount = element.itemCount || 3
-												const listContent = (
-													<div
-														class={`mock-list ${element.itemNavigateTo ? "has-navigation" : ""}`}
-													>
-														<div class="list-header">{element.label}</div>
-														{Array.from({ length: itemCount }).map((_, i) => (
-															<div
-																class="list-item"
-																style={
-																	i < itemCount - 1
-																		? "border-bottom: 1px solid #1e2433;"
-																		: ""
-																}
-															>
-																Item {i + 1}
-															</div>
-														))}
-														{element.itemNavigateTo && (
-															<div class="list-footer">
-																→ {element.itemNavigateTo}
-															</div>
-														)}
-													</div>
-												)
-												return element.itemNavigateTo ? (
-													<a
-														href={`/screen/${element.itemNavigateTo}`}
-														class="element-link"
-													>
-														{listContent}
-													</a>
-												) : (
-													listContent
-												)
-											}
-											if (element.type === "table") {
-												const columns = element.columns || [
-													"Column 1",
-													"Column 2",
-													"Column 3",
-												]
-												const rowCount = element.rowCount || 3
-												const tableContent = (
-													<div
-														class={`mock-table ${element.rowNavigateTo ? "has-navigation" : ""}`}
-													>
-														<div class="table-header">{element.label}</div>
-														<div class="table-content">
-															<div class="table-row table-header-row">
-																{columns.map((col) => (
-																	<div class="table-cell">{col}</div>
-																))}
-															</div>
-															{Array.from({ length: rowCount }).map((_, i) => (
-																<div class="table-row">
-																	{columns.map((_, j) => (
-																		<div class="table-cell">
-																			Data {i + 1}-{j + 1}
-																		</div>
-																	))}
-																</div>
-															))}
-														</div>
-														{element.rowNavigateTo && (
-															<div class="table-footer">
-																→ {element.rowNavigateTo}
-															</div>
-														)}
-													</div>
-												)
-												return element.rowNavigateTo ? (
-													<a
-														href={`/screen/${element.rowNavigateTo}`}
-														class="element-link"
-													>
-														{tableContent}
-													</a>
-												) : (
-													tableContent
-												)
-											}
-											return null
-										})}
-									</div>
-								</div>
-							))}
-						</div>
-					)}
-				</div>
-			))
-		}
-	</div>
-</div>
-
-<style>
-	.mock-preview {
-		background: #1e2433;
-		border-radius: 12px;
-		overflow: hidden;
-		border: 1px solid #2d3548;
-	}
-
-	.mock-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 12px 16px;
-		background: #1a1f2e;
-		border-bottom: 1px solid #2d3548;
-	}
-
-	.mock-header-left {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		color: #94a3b8;
-		font-size: 14px;
-	}
-
-	.mock-icon {
-		width: 18px;
-		height: 18px;
-	}
-
-	.edit-mock-link {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		padding: 6px 12px;
-		background: #2d3548;
-		color: #94a3b8;
-		border-radius: 6px;
-		font-size: 12px;
-		text-decoration: none;
-		transition: all 0.2s;
-	}
-
-	.edit-mock-link:hover {
-		background: #3d4660;
-		color: #14b8a6;
-	}
-
-	.edit-mock-link svg {
-		width: 14px;
-		height: 14px;
-	}
-
-	.mock-frame {
-		padding: 20px;
-		background: #0f1219;
-		max-width: 400px;
-		margin: 20px auto;
-		border-radius: 8px;
-		border: 1px solid #2d3548;
-	}
-
-	.mock-section {
-		margin-bottom: 16px;
-	}
-
-	.mock-section:last-child {
-		margin-bottom: 0;
-	}
-
-	.section-title {
-		font-size: 11px;
-		font-weight: 600;
-		color: #64748b;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		margin-bottom: 8px;
-	}
-
-	.child-sections {
-		margin-top: 12px;
-		padding-left: 16px;
-		border-left: 2px solid #2d3548;
-	}
-
-	.child-section {
-		background: rgba(20, 184, 166, 0.03);
-		padding: 12px;
-		border-radius: 6px;
-		margin-bottom: 12px;
-	}
-
-	.child-section:last-child {
-		margin-bottom: 0;
-	}
-
-	.child-section-title {
-		color: #5eead4;
-	}
-
-	.section-elements {
-		display: flex;
-		gap: 8px;
-	}
-
-	.section-elements.vertical {
-		flex-direction: column;
-	}
-
-	.section-elements.horizontal {
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
-
-	.section-elements.horizontal > * {
-		flex: 1;
-		min-width: 80px;
-	}
-
-	.element-link {
-		text-decoration: none;
-		display: block;
-		border-radius: 6px;
-		transition: all 0.2s;
-	}
-
-	.element-link:hover .mock-button,
-	.element-link:hover .mock-link-card,
-	.element-link:hover .mock-list,
-	.element-link:hover .mock-table {
-		transform: translateY(-2px);
-		box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
-	}
-
-	.mock-button {
-		padding: 10px 16px;
-		border-radius: 6px;
-		font-size: 13px;
-		font-weight: 500;
-		text-align: center;
-		cursor: default;
-		transition: all 0.2s;
-	}
-
-	.mock-button.has-navigation {
-		cursor: pointer;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		align-items: center;
-	}
-
-	.button-label {
-		display: block;
-	}
-
-	.button-navigate {
-		font-size: 10px;
-		opacity: 0.8;
-	}
-
-	.mock-input {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		padding: 10px 12px;
-		background: #1e2433;
-		border: 1px solid #3d4660;
-		border-radius: 6px;
-	}
-
-	.input-label {
-		font-size: 11px;
-		color: #64748b;
-		font-weight: 500;
-	}
-
-	.input-placeholder {
-		font-size: 13px;
-		color: #475569;
-	}
-
-	.mock-link {
-		color: #14b8a6;
-		font-size: 13px;
-		text-decoration: underline;
-		cursor: default;
-	}
-
-	.mock-link-card {
-		padding: 10px 12px;
-		background: rgba(20, 184, 166, 0.1);
-		border: 1px solid rgba(20, 184, 166, 0.3);
-		border-radius: 6px;
-		transition: all 0.2s;
-	}
-
-	.mock-link-card.has-navigation {
-		cursor: pointer;
-	}
-
-	.link-label {
-		color: #14b8a6;
-		font-size: 13px;
-		text-decoration: underline;
-		display: block;
-	}
-
-	.link-navigate {
-		font-size: 10px;
-		color: #5eead4;
-		opacity: 0.8;
-		display: block;
-		margin-top: 4px;
-	}
-
-	.mock-text {
-		padding: 4px 0;
-	}
-
-	.mock-image {
-		position: relative;
-		background: #1e2433;
-		border: 2px dashed #3d4660;
-		border-radius: 6px;
-		overflow: hidden;
-	}
-
-	.image-placeholder {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 8px;
-		color: #475569;
-	}
-
-	.image-placeholder svg {
-		width: 32px;
-		height: 32px;
-	}
-
-	.image-placeholder span {
-		font-size: 12px;
-	}
-
-	.mock-list {
-		background: #1e2433;
-		border: 1px solid #3d4660;
-		border-radius: 6px;
-		overflow: hidden;
-	}
-
-	.list-header {
-		padding: 10px 12px;
-		background: #2d3548;
-		font-size: 12px;
-		font-weight: 600;
-		color: #94a3b8;
-	}
-
-	.list-item {
-		padding: 10px 12px;
-		font-size: 13px;
-		color: #94a3b8;
-	}
-
-	.list-footer {
-		padding: 8px 12px;
-		background: rgba(20, 184, 166, 0.1);
-		font-size: 10px;
-		color: #14b8a6;
-		border-top: 1px solid #3d4660;
-	}
-
-	.mock-list.has-navigation {
-		cursor: pointer;
-	}
-
-	.mock-table {
-		background: #1e2433;
-		border: 1px solid #3d4660;
-		border-radius: 6px;
-		overflow: hidden;
-	}
-
-	.table-header {
-		padding: 10px 12px;
-		background: #2d3548;
-		font-size: 12px;
-		font-weight: 600;
-		color: #94a3b8;
-	}
-
-	.table-content {
-		overflow-x: auto;
-	}
-
-	.table-row {
-		display: flex;
-		border-bottom: 1px solid #2d3548;
-	}
-
-	.table-row:last-child {
-		border-bottom: none;
-	}
-
-	.table-header-row {
-		background: #252d3d;
-	}
-
-	.table-header-row .table-cell {
-		font-weight: 600;
-		font-size: 11px;
-		color: #64748b;
-	}
-
-	.table-cell {
-		flex: 1;
-		padding: 8px 12px;
-		font-size: 12px;
-		color: #94a3b8;
-		min-width: 80px;
-	}
-
-	.table-footer {
-		padding: 8px 12px;
-		background: rgba(20, 184, 166, 0.1);
-		font-size: 10px;
-		color: #14b8a6;
-		border-top: 1px solid #3d4660;
-	}
-
-	.mock-table.has-navigation {
-		cursor: pointer;
-	}
-</style>