@geenius/docs 0.1.0

package/packages/react/src/RouterDocsLayout.tsx

@@ -0,0 +1,161 @@
+// src/components/docs/DocsLayout.tsx
+
+import React, { useState } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import { Book, Menu, X, Search, ChevronRight } from 'lucide-react'
+
+export interface DocItem {
+  slug: string
+  title: string
+  description: string
+  category: string
+  order: number
+}
+
+interface DocsLayoutProps {
+  children: React.ReactNode
+  docs: DocItem[]
+  currentSlug?: string
+}
+
+export const DocsLayout: React.FC<DocsLayoutProps> = ({
+  children,
+  docs,
+  currentSlug,
+}) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
+  const location = useLocation()
+
+  // Group docs by category
+  const groupedDocs = docs.reduce(
+    (acc, doc) => {
+      if (!acc[doc.category]) {
+        acc[doc.category] = []
+      }
+      acc[doc.category].push(doc)
+      return acc
+    },
+    {} as Record<string, DocItem[]>,
+  )
+
+  // Sort categories and docs within each category
+  const sortedCategories = Object.entries(groupedDocs).sort(([a], [b]) => {
+    const categoryOrder = [
+      'Introduction',
+      'Getting Started',
+      'Guides',
+      'API',
+      'Advanced',
+    ]
+    return categoryOrder.indexOf(a) - categoryOrder.indexOf(b)
+  })
+
+  return (
+    <div className="min-h-screen bg-bg">
+      {/* Mobile Header */}
+      <div className="lg:hidden sticky top-0 z-40 flex items-center justify-between px-4 py-3 bg-card border-b border-border">
+        <Link to="/" className="flex items-center gap-2 text-primary">
+          <Book className="w-5 h-5" />
+          <span className="font-bold">Documentation</span>
+        </Link>
+        <button
+          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+          className="p-2 rounded-lg hover:bg-bg-muted transition-colors"
+        >
+          {isSidebarOpen ? (
+            <X className="w-5 h-5" />
+          ) : (
+            <Menu className="w-5 h-5" />
+          )}
+        </button>
+      </div>
+
+      <div className="flex">
+        {/* Sidebar */}
+        <aside
+          className={`
+            fixed lg:sticky top-16 left-0 z-30 w-72 h-[calc(100vh-4rem)] overflow-y-auto
+            bg-card border-r border-border transition-transform duration-300
+            lg:translate-x-0
+            ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+          `}
+        >
+          <div className="p-6">
+            {/* Logo */}
+            <Link
+              to="/"
+              className="hidden lg:flex items-center gap-2 text-primary mb-8"
+            >
+              <Book className="w-6 h-6" />
+              <span className="font-bold text-lg">Documentation</span>
+            </Link>
+
+            {/* Search */}
+            <div className="relative mb-6">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
+              <input
+                type="text"
+                placeholder="Search docs..."
+                className="w-full pl-10 pr-4 py-2.5 bg-bg-muted border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
+              />
+            </div>
+
+            {/* Navigation */}
+            <nav className="space-y-6">
+              {sortedCategories.map(([category, categoryDocs]) => (
+                <div key={category}>
+                  <h3 className="text-xs font-bold text-text-muted uppercase tracking-wider mb-3">
+                    {category}
+                  </h3>
+                  <ul className="space-y-1">
+                    {categoryDocs
+                      .sort((a, b) => a.order - b.order)
+                      .map((doc) => {
+                        const isActive = currentSlug === doc.slug
+                        return (
+                          <li key={doc.slug}>
+                            <Link
+                              to="/docs/$slug"
+                              params={{ slug: doc.slug }}
+                              activeOptions={{ exact: true }}
+                              onClick={() => setIsSidebarOpen(false)}
+                              className={`
+                                flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all
+                                ${
+                                  isActive
+                                    ? 'bg-primary/10 text-primary'
+                                    : 'text-text-muted hover:bg-bg-muted hover:text-text-main'
+                                }
+                              `}
+                            >
+                              <ChevronRight
+                                className={`w-4 h-4 transition-transform ${isActive ? 'rotate-90' : ''}`}
+                              />
+                              {doc.title}
+                            </Link>
+                          </li>
+                        )
+                      })}
+                  </ul>
+                </div>
+              ))}
+            </nav>
+          </div>
+        </aside>
+
+        {/* Overlay for mobile */}
+        {isSidebarOpen && (
+          <div
+            className="fixed inset-0 bg-black/50 z-20 lg:hidden"
+            onClick={() => setIsSidebarOpen(false)}
+          />
+        )}
+
+        {/* Main Content */}
+        <main className="flex-1 min-w-0">
+          <div className="max-w-4xl mx-auto px-6 py-12">{children}</div>
+        </main>
+      </div>
+    </div>
+  )
+}

package/packages/react/src/components/Breadcrumbs.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import type { BreadcrumbItem } from '@geenius-docs/shared'
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[]
+}
+
+export function Breadcrumbs({ items }: BreadcrumbsProps) {
+  if (items.length === 0) return null
+
+  return (
+    <nav className="flex items-center gap-1.5 text-sm" aria-label="Breadcrumb">
+      {items.map((item, idx) => (
+        <React.Fragment key={idx}>
+          {idx > 0 && (
+            <svg className="h-3.5 w-3.5 shrink-0 text-white/20" viewBox="0 0 16 16" fill="none">
+              <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" />
+            </svg>
+          )}
+          {idx === items.length - 1 ? (
+            <span className="truncate text-white/60">{item.title}</span>
+          ) : (
+            <a
+              href={item.href}
+              className="truncate text-white/40 transition-colors hover:text-white/70"
+            >
+              {item.title}
+            </a>
+          )}
+        </React.Fragment>
+      ))}
+    </nav>
+  )
+}

package/packages/react/src/components/DocPage.tsx

@@ -0,0 +1,191 @@
+import React from 'react'
+import type { DocPage as DocPageType } from '@geenius-docs/shared'
+import { slugify } from '@geenius-docs/shared'
+
+interface DocPageProps {
+  page: DocPageType
+}
+
+function renderCallout(type: string, content: string) {
+  const styles: Record<string, { bg: string; border: string; icon: string; label: string }> = {
+    NOTE: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', icon: 'ℹ️', label: 'Note' },
+    WARNING: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', icon: '⚠️', label: 'Warning' },
+    TIP: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', icon: '💡', label: 'Tip' },
+    IMPORTANT: { bg: 'bg-purple-500/10', border: 'border-purple-500/30', icon: '❗', label: 'Important' },
+    CAUTION: { bg: 'bg-red-500/10', border: 'border-red-500/30', icon: '🔴', label: 'Caution' },
+  }
+  const s = styles[type] ?? styles.NOTE
+
+  return (
+    <div className={`${s.bg} ${s.border} my-4 rounded-lg border-l-4 p-4`}>
+      <p className="mb-1 text-sm font-semibold">
+        {s.icon} {s.label}
+      </p>
+      <p className="text-sm leading-relaxed text-white/80">{content}</p>
+    </div>
+  )
+}
+
+function renderMdxContent(content: string) {
+  const lines = content.split('\n')
+  const elements: React.ReactNode[] = []
+  let i = 0
+  let codeBlock: string[] | null = null
+  let codeLang = ''
+
+  while (i < lines.length) {
+    const line = lines[i]
+
+    // Fenced code blocks
+    if (line.startsWith('```')) {
+      if (codeBlock === null) {
+        codeBlock = []
+        codeLang = line.slice(3).trim()
+      } else {
+        elements.push(
+          <div key={i} className="group relative my-4">
+            <div className="flex items-center justify-between rounded-t-lg bg-white/5 px-4 py-2 text-xs text-white/50">
+              <span>{codeLang || 'code'}</span>
+            </div>
+            <pre className="overflow-x-auto rounded-b-lg bg-black/30 p-4 text-sm leading-relaxed">
+              <code>{codeBlock.join('\n')}</code>
+            </pre>
+          </div>
+        )
+        codeBlock = null
+        codeLang = ''
+      }
+      i++
+      continue
+    }
+
+    if (codeBlock !== null) {
+      codeBlock.push(line)
+      i++
+      continue
+    }
+
+    // Callouts [!NOTE], [!WARNING], etc.
+    const calloutMatch = line.match(/^>\s*\[!(NOTE|WARNING|TIP|IMPORTANT|CAUTION)\]/)
+    if (calloutMatch) {
+      const type = calloutMatch[1]
+      const contentLines: string[] = []
+      i++
+      while (i < lines.length && lines[i].startsWith('>')) {
+        contentLines.push(lines[i].replace(/^>\s?/, ''))
+        i++
+      }
+      elements.push(
+        <React.Fragment key={i}>{renderCallout(type, contentLines.join(' '))}</React.Fragment>
+      )
+      continue
+    }
+
+    // Headings
+    const headingMatch = line.match(/^(#{1,4})\s+(.+)$/)
+    if (headingMatch) {
+      const level = headingMatch[1].length
+      const text = headingMatch[2]
+      const id = slugify(text)
+      const Tag = `h${level}` as keyof JSX.IntrinsicElements
+
+      const headingClasses: Record<number, string> = {
+        1: 'text-3xl font-bold mt-8 mb-4',
+        2: 'text-2xl font-bold mt-8 mb-3 pb-2 border-b border-white/10',
+        3: 'text-xl font-semibold mt-6 mb-2',
+        4: 'text-lg font-medium mt-4 mb-2',
+      }
+
+      elements.push(
+        <Tag key={i} id={id} className={`${headingClasses[level]} scroll-mt-20 group`}>
+          <a href={`#${id}`} className="hover:text-indigo-400 transition-colors">
+            {text}
+          </a>
+        </Tag>
+      )
+      i++
+      continue
+    }
+
+    // Blockquotes
+    if (line.startsWith('>')) {
+      const quoteLines: string[] = []
+      while (i < lines.length && lines[i].startsWith('>')) {
+        quoteLines.push(lines[i].replace(/^>\s?/, ''))
+        i++
+      }
+      elements.push(
+        <blockquote key={i} className="my-4 border-l-4 border-indigo-500/40 bg-white/5 py-3 pl-4 pr-4 text-white/70 italic rounded-r-lg">
+          {quoteLines.join(' ')}
+        </blockquote>
+      )
+      continue
+    }
+
+    // Tables
+    if (line.includes('|') && i + 1 < lines.length && lines[i + 1]?.match(/^\|[\s-:|]+\|$/)) {
+      const headers = line.split('|').filter(Boolean).map((h) => h.trim())
+      i += 2 // skip header and separator
+      const rows: string[][] = []
+      while (i < lines.length && lines[i].includes('|')) {
+        rows.push(lines[i].split('|').filter(Boolean).map((c) => c.trim()))
+        i++
+      }
+      elements.push(
+        <div key={i} className="my-4 overflow-x-auto rounded-lg border border-white/10">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-white/10 bg-white/5">
+                {headers.map((h, idx) => (
+                  <th key={idx} className="px-4 py-2.5 text-left font-semibold">{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, rIdx) => (
+                <tr key={rIdx} className="border-b border-white/5 last:border-none">
+                  {row.map((c, cIdx) => (
+                    <td key={cIdx} className="px-4 py-2 text-white/70">{c}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )
+      continue
+    }
+
+    // Empty line
+    if (!line.trim()) {
+      i++
+      continue
+    }
+
+    // Paragraph with inline formatting
+    const formatted = line
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.+?)\*/g, '<em>$1</em>')
+      .replace(/`(.+?)`/g, '<code class="rounded bg-white/10 px-1.5 py-0.5 text-sm text-indigo-300">$1</code>')
+      .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2" class="text-indigo-400 hover:text-indigo-300 underline underline-offset-2 transition-colors">$1</a>')
+
+    elements.push(
+      <p
+        key={i}
+        className="my-3 leading-relaxed text-white/80"
+        dangerouslySetInnerHTML={{ __html: formatted }}
+      />
+    )
+    i++
+  }
+
+  return elements
+}
+
+export function DocPage({ page }: DocPageProps) {
+  return (
+    <article className="prose-custom max-w-none">
+      {renderMdxContent(page.content)}
+    </article>
+  )
+}

package/packages/react/src/components/DocSearch.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import type { SearchResult } from '@geenius-docs/shared'
+import { highlightMatch } from '@geenius-docs/shared'
+
+interface DocSearchProps {
+  results: SearchResult[]
+  query: string
+  onQuery: (q: string) => void
+  onSelect: (result: SearchResult) => void
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function DocSearch({ results, query, onQuery, onSelect, isOpen, onClose }: DocSearchProps) {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus()
+      setActiveIndex(0)
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    setActiveIndex(0)
+  }, [results])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setActiveIndex((i) => Math.min(i + 1, results.length - 1))
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setActiveIndex((i) => Math.max(i - 1, 0))
+      } else if (e.key === 'Enter' && results[activeIndex]) {
+        e.preventDefault()
+        onSelect(results[activeIndex])
+      } else if (e.key === 'Escape') {
+        e.preventDefault()
+        onClose()
+      }
+    },
+    [results, activeIndex, onSelect, onClose]
+  )
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]" onClick={onClose}>
+      {/* Backdrop */}
+      <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" />
+
+      {/* Modal */}
+      <div
+        className="relative z-10 w-full max-w-xl overflow-hidden rounded-2xl border border-white/10 bg-[#0d0e14] shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 border-b border-white/10 px-5 py-4">
+          <svg className="h-5 w-5 shrink-0 text-white/30" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clipRule="evenodd" />
+          </svg>
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => onQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search documentation…"
+            className="flex-1 bg-transparent text-sm text-white placeholder-white/30 outline-none"
+          />
+          <kbd className="rounded border border-white/10 bg-white/5 px-1.5 py-0.5 text-[11px] text-white/30">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div className="max-h-80 overflow-y-auto p-2">
+          {results.length === 0 && query.trim() && (
+            <div className="flex flex-col items-center py-10 text-center text-white/30">
+              <svg className="mb-3 h-10 w-10 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <circle cx="11" cy="11" r="8" strokeWidth="1.5" />
+                <path d="M21 21l-4.35-4.35" strokeWidth="1.5" />
+              </svg>
+              <p className="text-sm">No results for &ldquo;{query}&rdquo;</p>
+              <p className="mt-1 text-xs opacity-60">Try different keywords</p>
+            </div>
+          )}
+
+          {results.length === 0 && !query.trim() && (
+            <div className="py-8 text-center text-sm text-white/30">
+              Start typing to search…
+            </div>
+          )}
+
+          {results.map((result, idx) => (
+            <button
+              key={result.pageId}
+              type="button"
+              onClick={() => onSelect(result)}
+              className={`flex w-full flex-col gap-1 rounded-xl px-4 py-3 text-left transition-colors ${
+                idx === activeIndex
+                  ? 'bg-indigo-500/15 text-white'
+                  : 'text-white/70 hover:bg-white/5'
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <span className="rounded bg-indigo-500/20 px-1.5 py-0.5 text-[10px] font-medium text-indigo-300">
+                  {result.sectionTitle}
+                </span>
+                <span className="text-sm font-medium">{result.pageTitle}</span>
+              </div>
+              <p className="truncate text-xs text-white/40">
+                {highlightMatch(result.highlight, query)}
+              </p>
+              {result.tags.length > 0 && (
+                <div className="flex gap-1">
+                  {result.tags.slice(0, 3).map((tag) => (
+                    <span key={tag} className="rounded bg-white/5 px-1.5 py-0.5 text-[10px] text-white/30">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </button>
+          ))}
+        </div>
+
+        {/* Footer hint */}
+        <div className="flex items-center gap-4 border-t border-white/5 px-5 py-2.5 text-[11px] text-white/20">
+          <span>↑↓ navigate</span>
+          <span>↵ select</span>
+          <span>esc close</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/react/src/components/DocSidebar.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useCallback } from 'react'
+import type { DocSection, DocPage } from '@geenius-docs/shared'
+
+interface DocSidebarProps {
+  sections: (DocSection & { pages?: DocPage[]; pageCount?: number })[]
+  currentPageId?: string
+  onNavigate: (page: DocPage, section: DocSection) => void
+}
+
+export function DocSidebar({ sections, currentPageId, onNavigate }: DocSidebarProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+
+  const toggle = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+
+  const topLevel = sections.filter((s) => !s.parentId)
+  const childrenOf = (parentId: string) =>
+    sections.filter((s) => s.parentId === parentId)
+
+  const renderSection = (section: DocSection & { pages?: DocPage[]; pageCount?: number }, depth: number) => {
+    const children = childrenOf(section.id)
+    const isExpanded = expandedIds.has(section.id)
+    const pages = section.pages ?? []
+    const hasContent = children.length > 0 || pages.length > 0
+
+    return (
+      <div key={section.id} className="mb-1" style={{ paddingLeft: depth * 12 }}>
+        <button
+          type="button"
+          onClick={() => toggle(section.id)}
+          className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors hover:bg-white/5"
+        >
+          {section.icon && <span className="text-base">{section.icon}</span>}
+          <span className="flex-1 truncate">{section.title}</span>
+          {section.pageCount != null && (
+            <span className="text-xs tabular-nums opacity-50">{section.pageCount}</span>
+          )}
+          {hasContent && (
+            <svg
+              className={`h-3.5 w-3.5 shrink-0 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+              viewBox="0 0 16 16"
+              fill="currentColor"
+            >
+              <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="2" fill="none" />
+            </svg>
+          )}
+        </button>
+
+        {isExpanded && (
+          <div className="ml-2 border-l border-white/10 pl-2">
+            {pages.map((page) => (
+              <button
+                key={page.id}
+                type="button"
+                onClick={() => onNavigate(page, section)}
+                className={`flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm transition-colors ${
+                  currentPageId === page.id
+                    ? 'bg-indigo-500/20 text-indigo-300 font-medium'
+                    : 'text-white/60 hover:text-white/90 hover:bg-white/5'
+                }`}
+              >
+                <span className="truncate">{page.title}</span>
+              </button>
+            ))}
+            {children.map((child) => renderSection(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <nav className="flex flex-col gap-0.5 py-4">
+      <div className="px-4 pb-3 text-xs font-semibold uppercase tracking-widest text-white/40">
+        Documentation
+      </div>
+      {topLevel.map((s) => renderSection(s, 0))}
+    </nav>
+  )
+}

package/packages/react/src/components/DocsLayout.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import type { DocPage, DocSection, TocItem, BreadcrumbItem } from '@geenius-docs/shared'
+import { DocSidebar } from './DocSidebar'
+import { TableOfContents } from './TableOfContents'
+import { Breadcrumbs } from './Breadcrumbs'
+
+interface DocsLayoutProps {
+  sections: (DocSection & { pages?: DocPage[] })[]
+  currentPage?: DocPage
+  toc?: TocItem[]
+  activeHeadingId?: string
+  breadcrumbs?: BreadcrumbItem[]
+  currentPageId?: string
+  onNavigate: (page: DocPage, section: DocSection) => void
+  children: React.ReactNode
+}
+
+export function DocsLayout({
+  sections,
+  currentPage,
+  toc,
+  activeHeadingId,
+  breadcrumbs,
+  currentPageId,
+  onNavigate,
+  children,
+}: DocsLayoutProps) {
+  return (
+    <div className="flex min-h-screen bg-[#090a0f] text-white">
+      {/* Sidebar */}
+      <aside className="sticky top-0 hidden h-screen w-[260px] shrink-0 overflow-y-auto border-r border-white/5 bg-[#0b0c12] lg:block">
+        <DocSidebar
+          sections={sections}
+          currentPageId={currentPageId}
+          onNavigate={onNavigate}
+        />
+      </aside>
+
+      {/* Main content */}
+      <main className="flex-1 overflow-hidden">
+        <div className="mx-auto flex max-w-6xl gap-8 px-6 py-8 lg:px-10">
+          {/* Content area */}
+          <div className="min-w-0 flex-1">
+            {breadcrumbs && breadcrumbs.length > 0 && (
+              <div className="mb-6">
+                <Breadcrumbs items={breadcrumbs} />
+              </div>
+            )}
+            {children}
+          </div>
+
+          {/* Table of contents */}
+          {toc && toc.length > 0 && (
+            <aside className="hidden w-[220px] shrink-0 xl:block">
+              <TableOfContents toc={toc} activeId={activeHeadingId} />
+            </aside>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}