@geenius/docs 0.1.0 → 0.4.1

package/packages/react/src/RouterDocsLayout.tsx

@@ -1,161 +0,0 @@
-// 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

@@ -1,34 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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>
-  )
-}