webui/src/web-components/demo/demo.html - sketch - Gitiles

 <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sketch Web Components Demo Runner</title>
     <link rel="stylesheet" href="/dist/tailwind.css" />
     <style>
       :root {
         --demo-primary: #0969da;
         --demo-secondary: #656d76;
         --demo-background: #f6f8fa;
         --demo-border: #d1d9e0;
         --demo-text-primary: #24292f;
         --demo-hover-bg: #ffffff;
         --demo-container-bg: #ffffff;
         --demo-error-bg: #ffeaea;
         --demo-error-border: #ffcccc;
         --demo-error-text: #d73a49;
       }

       .dark {
         --demo-primary: #4493f8;
         --demo-secondary: #8b949e;
         --demo-background: #21262d;
         --demo-border: #30363d;
         --demo-text-primary: #e6edf3;
         --demo-hover-bg: #30363d;
         --demo-container-bg: #0d1117;
         --demo-error-bg: #3c1e1e;
         --demo-error-border: #6a2c2c;
         --demo-error-text: #f85149;
       }

       body {
         background: var(--demo-container-bg);
         color: var(--demo-text-primary);
         transition:
           background-color 0.2s,
           color 0.2s;
         margin: 0;
       }

       .demo-runner {
         width: 100%;
         display: flex;
         height: 100vh;
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       }

       .demo-sidebar {
         width: 280px;
         background: var(--demo-background);
         border-right: 1px solid var(--demo-border);
         padding: 20px;
         overflow-y: auto;
         transition:
           background-color 0.2s,
           border-color 0.2s;
       }

       .demo-content {
         flex: 1;
         padding: 20px;
         overflow-y: auto;
         background: var(--demo-container-bg);
         transition: background-color 0.2s;
       }

       .demo-nav {
         list-style: none;
         padding: 0;
         margin: 0;
       }

       .demo-nav li {
         margin-bottom: 4px;
       }

       .demo-nav button {
         width: 100%;
         text-align: left;
         padding: 8px 12px;
         background: transparent;
         border: 1px solid transparent;
         border-radius: 6px;
         cursor: pointer;
         font-size: 14px;
         color: var(--demo-secondary);
         transition: all 0.2s;
       }

       .demo-nav button:hover {
         background: var(--demo-hover-bg);
         border-color: var(--demo-border);
         color: var(--demo-primary);
       }

       .demo-nav button.active {
         background: var(--demo-primary);
         color: white;
       }

       .demo-header {
         margin-bottom: 20px;
         padding-bottom: 15px;
         border-bottom: 1px solid var(--demo-border);
       }

       .demo-title {
         font-size: 24px;
         font-weight: 600;
         margin: 0 0 8px 0;
         color: var(--demo-text-primary);
       }

       .demo-description {
         color: var(--demo-secondary);
         margin: 0;
         font-size: 14px;
       }

       .demo-container {
         background: var(--demo-container-bg);
         border: 1px solid var(--demo-border);
         border-radius: 8px;
         min-height: 400px;
         padding: 20px;
       }

       .demo-loading {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 200px;
         color: var(--demo-secondary);
       }

       .demo-welcome {
         text-align: center;
         padding: 60px 20px;
         color: var(--demo-secondary);
       }

       .demo-welcome h2 {
         margin-bottom: 10px;
         color: var(--demo-text-primary);
       }

       .search-box {
         width: 100%;
         padding: 8px 12px;
         margin-bottom: 16px;
         border: 1px solid var(--demo-border);
         border-radius: 6px;
         font-size: 14px;
         background: var(--demo-container-bg);
         color: var(--demo-text-primary);
         transition:
           background-color 0.2s,
           border-color 0.2s,
           color 0.2s;
       }

       .search-box::placeholder {
         color: var(--demo-secondary);
       }

       .search-box:focus {
         outline: none;
         border-color: var(--demo-primary);
       }

       .demo-error {
         padding: 20px;
         background: var(--demo-error-bg);
         border: 1px solid var(--demo-error-border);
         border-radius: 6px;
         color: var(--demo-error-text);
       }
     </style>
   </head>
   <body>
     <div class="demo-runner">
       <nav class="demo-sidebar">
         <h1
           style="
             font-size: 18px;
             margin: 0 0 20px 0;
             color: var(--demo-text-primary);
           "
         >
           Component Demos
         </h1>

         <div
           style="
             margin-bottom: 16px;
             display: flex;
             align-items: center;
             justify-content: space-between;
           "
         >
           <span style="font-size: 12px; color: var(--demo-secondary)"
             >Theme:</span
           >
           <sketch-theme-toggle></sketch-theme-toggle>
         </div>

         <input
           type="text"
           class="search-box"
           placeholder="Search components..."
           id="demo-search"
         />

         <ul class="demo-nav" id="demo-nav">
           <!-- Component list will be populated dynamically -->
         </ul>
       </nav>

       <main class="demo-content">
         <div class="demo-header" id="demo-header" style="display: none">
           <h1 class="demo-title" id="demo-title"></h1>
           <p class="demo-description" id="demo-description"></p>
         </div>

         <div class="demo-container" id="demo-container">
           <div class="demo-welcome">
             <h2>Welcome to Sketch Component Demos</h2>
             <p>Select a component from the sidebar to view its demo.</p>
           </div>
         </div>
       </main>
     </div>

     <script type="module">
       import { DemoRunner } from "./demo-framework/demo-runner.ts";
       import "../sketch-theme-toggle.ts";
       import "../theme-service.ts";

       class DemoRunnerApp {
         constructor() {
           this.demoRunner = new DemoRunner({
             container: document.getElementById("demo-container"),
             onDemoChange: this.onDemoChange.bind(this),
           });

           this.searchBox = document.getElementById("demo-search");
           this.navList = document.getElementById("demo-nav");
           this.demoHeader = document.getElementById("demo-header");
           this.demoTitle = document.getElementById("demo-title");
           this.demoDescription = document.getElementById("demo-description");

           this.currentComponent = null;
           this.availableComponents = [];

           // Initialize theme service
           this.initTheme();

           this.init();
         }

         initTheme() {
           // Import and initialize the theme service
           import("../theme-service.ts").then(({ ThemeService }) => {
             const themeService = ThemeService.getInstance();
             themeService.initializeTheme();
           });
         }

         async init() {
           try {
             // Load available components
             this.availableComponents =
               await this.demoRunner.getAvailableComponents();
             this.renderNavigation();

             // Set up search
             this.searchBox.addEventListener(
               "input",
               this.handleSearch.bind(this),
             );

             // Handle URL hash for direct linking
             this.handleHashChange();
             window.addEventListener(
               "hashchange",
               this.handleHashChange.bind(this),
             );
           } catch (error) {
             console.error("Failed to initialize demo runner:", error);
             this.showError("Failed to load demo components");
           }
         }

         renderNavigation(filter = "") {
           const filteredComponents = this.availableComponents.filter(
             (component) =>
               component.toLowerCase().includes(filter.toLowerCase()),
           );

           this.navList.innerHTML = "";

           filteredComponents.forEach((component) => {
             const li = document.createElement("li");
             const button = document.createElement("button");
             button.textContent = this.formatComponentName(component);
             button.addEventListener("click", () =>
               this.loadComponent(component),
             );

             if (component === this.currentComponent) {
               button.classList.add("active");
             }

             li.appendChild(button);
             this.navList.appendChild(li);
           });
         }

         formatComponentName(component) {
           return component
             .replace(/^sketch-/, "")
             .replace(/-/g, " ")
             .replace(/\b\w/g, (l) => l.toUpperCase());
         }

         async loadComponent(componentName) {
           if (this.currentComponent === componentName) {
             return;
           }

           try {
             this.showLoading();
             await this.demoRunner.loadDemo(componentName);
             this.currentComponent = componentName;

             // Update URL hash
             window.location.hash = componentName;

             // Update navigation
             this.renderNavigation(this.searchBox.value);
           } catch (error) {
             console.error(`Failed to load demo for ${componentName}:`, error);
             this.showError(`Failed to load demo for ${componentName}`);
           }
         }

         onDemoChange(componentName, demo) {
           // Update header
           this.demoTitle.textContent = demo.title;
           this.demoDescription.textContent = demo.description || "";

           if (demo.description) {
             this.demoDescription.style.display = "block";
           } else {
             this.demoDescription.style.display = "none";
           }

           this.demoHeader.style.display = "block";
         }

         handleSearch(event) {
           this.renderNavigation(event.target.value);
         }

         handleHashChange() {
           const hash = window.location.hash.slice(1);
           if (hash && this.availableComponents.includes(hash)) {
             this.loadComponent(hash);
           }
         }

         showLoading() {
           document.getElementById("demo-container").innerHTML = `
             <div class="demo-loading">
               Loading demo...
             </div>
           `;
         }

         showError(message) {
           document.getElementById("demo-container").innerHTML = `
             <div class="demo-error">
               <strong>Error:</strong> ${message}
             </div>
           `;
         }
       }

       // Initialize the demo runner when DOM is ready
       if (document.readyState === "loading") {
         document.addEventListener(
           "DOMContentLoaded",
           () => new DemoRunnerApp(),
         );
       } else {
         new DemoRunnerApp();
       }
     </script>
   </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Sketch Web Components Demo Runner</title>
	<link rel="stylesheet" href="/dist/tailwind.css" />
	<style>
	:root {
	--demo-primary: #0969da;
	--demo-secondary: #656d76;
	--demo-background: #f6f8fa;
	--demo-border: #d1d9e0;
	--demo-text-primary: #24292f;
	--demo-hover-bg: #ffffff;
	--demo-container-bg: #ffffff;
	--demo-error-bg: #ffeaea;
	--demo-error-border: #ffcccc;
	--demo-error-text: #d73a49;
	}

	.dark {
	--demo-primary: #4493f8;
	--demo-secondary: #8b949e;
	--demo-background: #21262d;
	--demo-border: #30363d;
	--demo-text-primary: #e6edf3;
	--demo-hover-bg: #30363d;
	--demo-container-bg: #0d1117;
	--demo-error-bg: #3c1e1e;
	--demo-error-border: #6a2c2c;
	--demo-error-text: #f85149;
	}

	body {
	background: var(--demo-container-bg);
	color: var(--demo-text-primary);
	transition:
	background-color 0.2s,
	color 0.2s;
	margin: 0;
	}

	.demo-runner {
	width: 100%;
	display: flex;
	height: 100vh;
	font-family:
	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	}

	.demo-sidebar {
	width: 280px;
	background: var(--demo-background);
	border-right: 1px solid var(--demo-border);
	padding: 20px;
	overflow-y: auto;
	transition:
	background-color 0.2s,
	border-color 0.2s;
	}

	.demo-content {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
	background: var(--demo-container-bg);
	transition: background-color 0.2s;
	}

	.demo-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	}

	.demo-nav li {
	margin-bottom: 4px;
	}

	.demo-nav button {
	width: 100%;
	text-align: left;
	padding: 8px 12px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	color: var(--demo-secondary);
	transition: all 0.2s;
	}

	.demo-nav button:hover {
	background: var(--demo-hover-bg);
	border-color: var(--demo-border);
	color: var(--demo-primary);
	}

	.demo-nav button.active {
	background: var(--demo-primary);
	color: white;
	}

	.demo-header {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--demo-border);
	}

	.demo-title {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--demo-text-primary);
	}

	.demo-description {
	color: var(--demo-secondary);
	margin: 0;
	font-size: 14px;
	}

	.demo-container {
	background: var(--demo-container-bg);
	border: 1px solid var(--demo-border);
	border-radius: 8px;
	min-height: 400px;
	padding: 20px;
	}

	.demo-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	color: var(--demo-secondary);
	}

	.demo-welcome {
	text-align: center;
	padding: 60px 20px;
	color: var(--demo-secondary);
	}

	.demo-welcome h2 {
	margin-bottom: 10px;
	color: var(--demo-text-primary);
	}

	.search-box {
	width: 100%;
	padding: 8px 12px;
	margin-bottom: 16px;
	border: 1px solid var(--demo-border);
	border-radius: 6px;
	font-size: 14px;
	background: var(--demo-container-bg);
	color: var(--demo-text-primary);
	transition:
	background-color 0.2s,
	border-color 0.2s,
	color 0.2s;
	}

	.search-box::placeholder {
	color: var(--demo-secondary);
	}

	.search-box:focus {
	outline: none;
	border-color: var(--demo-primary);
	}

	.demo-error {
	padding: 20px;
	background: var(--demo-error-bg);
	border: 1px solid var(--demo-error-border);
	border-radius: 6px;
	color: var(--demo-error-text);
	}
	</style>
	</head>
	<body>
	<div class="demo-runner">
	<nav class="demo-sidebar">
	<h1
	style="
	font-size: 18px;
	margin: 0 0 20px 0;
	color: var(--demo-text-primary);
	"
	>
	Component Demos
	</h1>

	<div
	style="
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	"
	>
	<span style="font-size: 12px; color: var(--demo-secondary)"
	>Theme:</span
	>
	<sketch-theme-toggle></sketch-theme-toggle>
	</div>

	<input
	type="text"
	class="search-box"
	placeholder="Search components..."
	id="demo-search"
	/>

	<ul class="demo-nav" id="demo-nav">
	<!-- Component list will be populated dynamically -->
	</ul>
	</nav>

	<main class="demo-content">
	<div class="demo-header" id="demo-header" style="display: none">
	<h1 class="demo-title" id="demo-title"></h1>
	<p class="demo-description" id="demo-description"></p>
	</div>

	<div class="demo-container" id="demo-container">
	<div class="demo-welcome">
	<h2>Welcome to Sketch Component Demos</h2>
	<p>Select a component from the sidebar to view its demo.</p>
	</div>
	</div>
	</main>
	</div>

	<script type="module">
	import { DemoRunner } from "./demo-framework/demo-runner.ts";
	import "../sketch-theme-toggle.ts";
	import "../theme-service.ts";

	class DemoRunnerApp {
	constructor() {
	this.demoRunner = new DemoRunner({
	container: document.getElementById("demo-container"),
	onDemoChange: this.onDemoChange.bind(this),
	});

	this.searchBox = document.getElementById("demo-search");
	this.navList = document.getElementById("demo-nav");
	this.demoHeader = document.getElementById("demo-header");
	this.demoTitle = document.getElementById("demo-title");
	this.demoDescription = document.getElementById("demo-description");

	this.currentComponent = null;
	this.availableComponents = [];

	// Initialize theme service
	this.initTheme();

	this.init();
	}

	initTheme() {
	// Import and initialize the theme service
	import("../theme-service.ts").then(({ ThemeService }) => {
	const themeService = ThemeService.getInstance();
	themeService.initializeTheme();
	});
	}

	async init() {
	try {
	// Load available components
	this.availableComponents =
	await this.demoRunner.getAvailableComponents();
	this.renderNavigation();

	// Set up search
	this.searchBox.addEventListener(
	"input",
	this.handleSearch.bind(this),
	);

	// Handle URL hash for direct linking
	this.handleHashChange();
	window.addEventListener(
	"hashchange",
	this.handleHashChange.bind(this),
	);
	} catch (error) {
	console.error("Failed to initialize demo runner:", error);
	this.showError("Failed to load demo components");
	}
	}

	renderNavigation(filter = "") {
	const filteredComponents = this.availableComponents.filter(
	(component) =>
	component.toLowerCase().includes(filter.toLowerCase()),
	);

	this.navList.innerHTML = "";

	filteredComponents.forEach((component) => {
	const li = document.createElement("li");
	const button = document.createElement("button");
	button.textContent = this.formatComponentName(component);
	button.addEventListener("click", () =>
	this.loadComponent(component),
	);

	if (component === this.currentComponent) {
	button.classList.add("active");
	}

	li.appendChild(button);
	this.navList.appendChild(li);
	});
	}

	formatComponentName(component) {
	return component
	.replace(/^sketch-/, "")
	.replace(/-/g, " ")
	.replace(/\b\w/g, (l) => l.toUpperCase());
	}

	async loadComponent(componentName) {
	if (this.currentComponent === componentName) {
	return;
	}

	try {
	this.showLoading();
	await this.demoRunner.loadDemo(componentName);
	this.currentComponent = componentName;

	// Update URL hash
	window.location.hash = componentName;

	// Update navigation
	this.renderNavigation(this.searchBox.value);
	} catch (error) {
	console.error(`Failed to load demo for ${componentName}:`, error);
	this.showError(`Failed to load demo for ${componentName}`);
	}
	}

	onDemoChange(componentName, demo) {
	// Update header
	this.demoTitle.textContent = demo.title;
	this.demoDescription.textContent = demo.description \|\| "";

	if (demo.description) {
	this.demoDescription.style.display = "block";
	} else {
	this.demoDescription.style.display = "none";
	}

	this.demoHeader.style.display = "block";
	}

	handleSearch(event) {
	this.renderNavigation(event.target.value);
	}

	handleHashChange() {
	const hash = window.location.hash.slice(1);
	if (hash && this.availableComponents.includes(hash)) {
	this.loadComponent(hash);
	}
	}

	showLoading() {
	document.getElementById("demo-container").innerHTML = `
	<div class="demo-loading">
	Loading demo...
	</div>
	`;
	}

	showError(message) {
	document.getElementById("demo-container").innerHTML = `
	<div class="demo-error">
	<strong>Error:</strong> ${message}
	</div>
	`;
	}
	}

	// Initialize the demo runner when DOM is ready
	if (document.readyState === "loading") {
	document.addEventListener(
	"DOMContentLoaded",
	() => new DemoRunnerApp(),
	);
	} else {
	new DemoRunnerApp();
	}
	</script>
	</body>
	</html>