nucleus-core-ts 0.8.0

package/public/components/docs/DocsContent.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useMemo } from "react";
+import { docsData } from "./docsData";
+
+declare global {
+	interface Window {
+		mermaid?: {
+			initialize: (config: Record<string, unknown>) => void;
+			run: (config?: { nodes?: NodeListOf<Element> }) => Promise<void>;
+		};
+	}
+}
+
+interface DocsContentProps {
+	activeSection: string;
+	activeItem: string;
+	activeSubItem: string;
+	onSubItemClick: (subItemId: string) => void;
+}
+
+function parseMarkdown(content: string): string {
+	const codeBlocks: string[] = [];
+	const mermaidBlocks: string[] = [];
+	const tables: string[] = [];
+
+	let result = content
+		.replace(/```mermaid\n([\s\S]*?)```/g, (_m, code) => {
+			const idx = mermaidBlocks.length;
+			mermaidBlocks.push(
+				`<div class="mermaid-wrapper"><pre class="mermaid">${code.trim()}</pre></div>`,
+			);
+			return `__MERMAID_${idx}__`;
+		})
+		.replace(/```(\w*)\n([\s\S]*?)```/g, (_m, lang, code) => {
+			const idx = codeBlocks.length;
+			const escaped = code
+				.replace(/&/g, "&amp;")
+				.replace(/</g, "&lt;")
+				.replace(/>/g, "&gt;");
+			codeBlocks.push(
+				`<pre class="code-block"><code class="language-${lang || "text"}">${escaped}</code></pre>`,
+			);
+			return `__CODE_${idx}__`;
+		});
+
+	const tableRegex = /(\|.+\|[\r\n]+\|[-| :]+\|[\r\n]+(?:\|.+\|[\r\n]*)+)/g;
+	result = result.replace(tableRegex, (match) => {
+		const lines = match
+			.trim()
+			.split("\n")
+			.filter((l) => l.trim());
+		const headerLine = lines[0];
+		if (lines.length < 2 || !headerLine) return match;
+
+		const headerCells = headerLine
+			.split("|")
+			.filter((c) => c.trim())
+			.map((c) => c.trim());
+		const rows = lines.slice(2).map((line) =>
+			line
+				.split("|")
+				.filter((c) => c.trim())
+				.map((c) => c.trim()),
+		);
+
+		const tableHtml = `<table>
+      <thead><tr>${headerCells.map((c) => `<th>${c}</th>`).join("")}</tr></thead>
+      <tbody>${rows.map((r) => `<tr>${r.map((c) => `<td>${c}</td>`).join("")}</tr>`).join("")}</tbody>
+    </table>`;
+
+		const idx = tables.length;
+		tables.push(tableHtml);
+		return `__TABLE_${idx}__`;
+	});
+
+	result = result
+		.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
+		.replace(/^### (.+)$/gm, "<h3>$1</h3>")
+		.replace(/^## (.+)$/gm, "<h2>$1</h2>")
+		.replace(/^# (.+)$/gm, "<h1>$1</h1>")
+		.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+		.replace(/\*([^*]+)\*/g, "<em>$1</em>")
+		.replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>");
+
+	result = result.replace(
+		/^(\d+)\. (.+)$/gm,
+		'<li class="ol-item" data-num="$1">$2</li>',
+	);
+	result = result.replace(/^- (.+)$/gm, '<li class="ul-item">$1</li>');
+
+	result = result.replace(
+		/(<li class="ol-item"[^>]*>[\s\S]*?<\/li>\n?)+/g,
+		(m) => `<ol>${m}</ol>`,
+	);
+	result = result.replace(
+		/(<li class="ul-item">[\s\S]*?<\/li>\n?)+/g,
+		(m) => `<ul>${m}</ul>`,
+	);
+
+	result = result.replace(/\n\n+/g, "</p><p>");
+
+	for (let i = 0; i < codeBlocks.length; i++) {
+		result = result.replace(`__CODE_${i}__`, codeBlocks[i] || "");
+	}
+	for (let i = 0; i < mermaidBlocks.length; i++) {
+		result = result.replace(`__MERMAID_${i}__`, mermaidBlocks[i] || "");
+	}
+	for (let i = 0; i < tables.length; i++) {
+		result = result.replace(`__TABLE_${i}__`, tables[i] || "");
+	}
+
+	return `<p>${result}</p>`
+		.replace(/<p>\s*<\/p>/g, "")
+		.replace(/<p>(\s*<[houltbd])/gi, "$1")
+		.replace(/<\/[houltbd][^>]*>(\s*)<\/p>/gi, (m, _space) =>
+			m.replace("</p>", ""),
+		);
+}
+
+export function DocsContent({
+	activeSection,
+	activeItem,
+	activeSubItem,
+	onSubItemClick,
+}: DocsContentProps) {
+	const currentSection = useMemo(
+		() => docsData.find((s) => s.id === activeSection),
+		[activeSection],
+	);
+
+	const currentItem = useMemo(
+		() => currentSection?.items.find((i) => i.id === activeItem),
+		[currentSection, activeItem],
+	);
+
+	const currentSubItem = useMemo(
+		() => currentItem?.subItems.find((s) => s.id === activeSubItem),
+		[currentItem, activeSubItem],
+	);
+
+	useEffect(() => {
+		if (window.mermaid) {
+			window.mermaid.run();
+		}
+	}, [activeSubItem, currentSubItem]);
+
+	if (!currentSection || !currentItem) {
+		return (
+			<div className="docs-content">
+				<div className="docs-content-empty">
+					<span className="docs-content-empty-icon">📚</span>
+					<p>Select a topic from the sidebar to get started.</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="docs-content">
+			<div className="docs-content-header">
+				<div className="docs-breadcrumb">
+					<span className="docs-breadcrumb-section">
+						{currentSection.title}
+					</span>
+					<span className="docs-breadcrumb-sep">/</span>
+					<span className="docs-breadcrumb-item">{currentItem.title}</span>
+				</div>
+				<h1 className="docs-content-title">{currentItem.title}</h1>
+			</div>
+
+			<div className="docs-content-body">
+				{currentSubItem ? (
+					<article
+						className="docs-article"
+						dangerouslySetInnerHTML={{
+							__html: parseMarkdown(currentSubItem.content),
+						}}
+					/>
+				) : (
+					<div className="docs-cards-grid">
+						{currentItem.subItems.map((subItem) => (
+							<button
+								key={subItem.id}
+								type="button"
+								className="docs-card"
+								onClick={() => onSubItemClick(subItem.id)}
+							>
+								<h3 className="docs-card-title">{subItem.title}</h3>
+								<p className="docs-card-desc">
+									{subItem.content
+										.slice(0, 120)
+										.replace(/[#*`\n]/g, " ")
+										.trim()}
+									...
+								</p>
+								<span className="docs-card-arrow">→</span>
+							</button>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

package/public/components/docs/DocsRightSidebar.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import { docsData } from "./docsData";
+
+interface DocsRightSidebarProps {
+	activeSection: string;
+	activeItem: string;
+	activeSubItem: string;
+	onSubItemClick: (subItemId: string) => void;
+}
+
+export function DocsRightSidebar({
+	activeSection,
+	activeItem,
+	activeSubItem,
+	onSubItemClick,
+}: DocsRightSidebarProps) {
+	const currentSection = useMemo(
+		() => docsData.find((s) => s.id === activeSection),
+		[activeSection],
+	);
+
+	const currentItem = useMemo(
+		() => currentSection?.items.find((i) => i.id === activeItem),
+		[currentSection, activeItem],
+	);
+
+	if (!currentItem || currentItem.subItems.length === 0) {
+		return null;
+	}
+
+	return (
+		<aside className="docs-right-sidebar">
+			<div className="docs-right-sidebar-header">
+				<span className="docs-right-sidebar-title">On this page</span>
+			</div>
+			<nav className="docs-right-nav">
+				<ul className="docs-right-items">
+					{currentItem.subItems.map((subItem) => (
+						<li key={subItem.id}>
+							<button
+								type="button"
+								className={`docs-right-item ${activeSubItem === subItem.id ? "active" : ""}`}
+								onClick={() => onSubItemClick(subItem.id)}
+							>
+								{subItem.title}
+							</button>
+						</li>
+					))}
+				</ul>
+			</nav>
+		</aside>
+	);
+}

package/public/components/docs/DocsSidebar.tsx

@@ -0,0 +1,62 @@
+import { useStore } from "../../store";
+import { type DocSection, docsData } from "./docsData";
+
+interface DocsSidebarProps {
+	activeSection: string;
+	activeItem: string;
+	onItemClick: (sectionId: string, itemId: string) => void;
+}
+
+export function DocsSidebar({
+	activeSection,
+	activeItem,
+	onItemClick,
+}: DocsSidebarProps) {
+	const store = useStore();
+
+	return (
+		<>
+			<button
+				type="button"
+				className={`docs-sidebar-overlay ${store.docsSidebarOpen ? "open" : ""}`}
+				onClick={store.toggleDocsSidebar}
+				aria-label="Close sidebar"
+			/>
+			<aside className={`docs-sidebar ${store.docsSidebarOpen ? "open" : ""}`}>
+				<div className="docs-sidebar-header">
+					<span className="docs-sidebar-title">Documentation</span>
+					<button
+						className="docs-sidebar-close"
+						onClick={store.toggleDocsSidebar}
+						type="button"
+					>
+						✕
+					</button>
+				</div>
+				<nav className="docs-nav">
+					{docsData.map((section: DocSection) => (
+						<div key={section.id} className="docs-section">
+							<div className="docs-section-header">
+								<span className="docs-section-icon">{section.icon}</span>
+								<span className="docs-section-title">{section.title}</span>
+							</div>
+							<ul className="docs-section-items">
+								{section.items.map((item) => (
+									<li key={item.id}>
+										<button
+											type="button"
+											className={`docs-item-btn ${activeSection === section.id && activeItem === item.id ? "active" : ""}`}
+											onClick={() => onItemClick(section.id, item.id)}
+										>
+											{item.title}
+										</button>
+									</li>
+								))}
+							</ul>
+						</div>
+					))}
+				</nav>
+			</aside>
+		</>
+	);
+}