@geenius/docs 0.1.0

package/packages/react/src/pages/DocsIndexPage.tsx

@@ -0,0 +1,172 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import type { DocPage, DocSection, SearchResult } from '@geenius-docs/shared'
+import { buildDocsIndex, searchDocs } from '@geenius-docs/shared'
+import { useDocs } from '../hooks/useDocs'
+import { useDocSearch } from '../hooks/useDocSearch'
+import { DocSearch } from '../components/DocSearch'
+
+interface DocsIndexPageProps {
+  tree: (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  onSelectPage?: (page: DocPage, section: DocSection) => void
+}
+
+export function DocsIndexPage({ tree, onSelectPage }: DocsIndexPageProps) {
+  const docs = useDocs(tree)
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+
+  const searchFn = useCallback(
+    (q: string): SearchResult[] => {
+      const index = buildDocsIndex(docs.flatPages, docs.sections)
+      return searchDocs(q, index)
+    },
+    [docs.flatPages, docs.sections]
+  )
+
+  const search = useDocSearch(searchFn)
+
+  // Cmd+K handler
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setIsSearchOpen(true)
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [])
+
+  // Loading skeleton
+  if (docs.isLoading) {
+    return (
+      <div className="min-h-screen bg-[#090a0f] px-6 py-16">
+        <div className="mx-auto max-w-5xl">
+          <div className="mb-10 h-10 w-64 animate-pulse rounded-lg bg-white/5" />
+          <div className="mb-8 h-12 w-full max-w-xl animate-pulse rounded-xl bg-white/5" />
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="h-36 animate-pulse rounded-xl bg-white/5" />
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Empty state
+  if (docs.sections.length === 0) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center">
+        <div className="mb-4 text-6xl opacity-30">📚</div>
+        <h2 className="mb-2 text-xl font-semibold text-white/80">No documentation yet</h2>
+        <p className="max-w-sm text-sm text-white/40">
+          Create your first section and pages to get started with your documentation.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-[#090a0f] text-white">
+      <div className="mx-auto max-w-5xl px-6 py-16">
+        {/* Header */}
+        <h1 className="mb-2 text-4xl font-bold tracking-tight">Documentation</h1>
+        <p className="mb-10 text-lg text-white/50">
+          Browse guides, API references, and tutorials.
+        </p>
+
+        {/* Search bar */}
+        <button
+          type="button"
+          onClick={() => setIsSearchOpen(true)}
+          className="mb-12 flex w-full max-w-xl items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-5 py-3.5 text-left text-sm text-white/30 transition-colors hover:border-white/20 hover:bg-white/[0.07]"
+        >
+          <svg className="h-4.5 w-4.5 shrink-0" 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>
+          <span className="flex-1">Search documentation…</span>
+          <kbd className="rounded border border-white/10 bg-white/5 px-2 py-0.5 text-[11px]">⌘K</kbd>
+        </button>
+
+        {/* Section cards grid */}
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {docs.sections
+            .filter((s) => !s.parentId)
+            .map((section) => (
+              <button
+                key={section.id}
+                type="button"
+                onClick={() => {
+                  const firstPage = section.pages?.[0]
+                  if (firstPage && onSelectPage) onSelectPage(firstPage, section)
+                }}
+                className="group flex flex-col rounded-xl border border-white/8 bg-white/[0.03] p-5 text-left transition-all hover:border-indigo-500/30 hover:bg-white/[0.06] hover:shadow-lg hover:shadow-indigo-500/5"
+              >
+                {section.icon && (
+                  <span className="mb-3 text-2xl">{section.icon}</span>
+                )}
+                <h3 className="mb-1.5 text-base font-semibold text-white/90 group-hover:text-white transition-colors">
+                  {section.title}
+                </h3>
+                {section.description && (
+                  <p className="mb-3 flex-1 text-sm leading-relaxed text-white/40">
+                    {section.description}
+                  </p>
+                )}
+                <div className="flex items-center gap-2 text-xs text-white/25">
+                  <span>{section.pageCount ?? 0} pages</span>
+                </div>
+              </button>
+            ))}
+        </div>
+
+        {/* Recent pages */}
+        {docs.flatPages.length > 0 && (
+          <div className="mt-16">
+            <h2 className="mb-6 text-lg font-semibold text-white/80">Recently updated</h2>
+            <div className="space-y-2">
+              {docs.flatPages
+                .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+                .slice(0, 8)
+                .map((page) => {
+                  const section = docs.sections.find((s) => s.id === page.sectionId)
+                  return (
+                    <button
+                      key={page.id}
+                      type="button"
+                      onClick={() => section && onSelectPage?.(page, section)}
+                      className="flex w-full items-center gap-4 rounded-lg px-4 py-3 text-left transition-colors hover:bg-white/5"
+                    >
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-white/80 truncate">{page.title}</p>
+                        <p className="text-xs text-white/30 truncate">{section?.title}</p>
+                      </div>
+                      <span className="shrink-0 text-xs tabular-nums text-white/20">
+                        {page.readingTime} min read
+                      </span>
+                    </button>
+                  )
+                })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Search modal */}
+      <DocSearch
+        results={search.results}
+        query={search.query}
+        onQuery={search.setQuery}
+        onSelect={(result) => {
+          setIsSearchOpen(false)
+          search.clearSearch()
+          const section = docs.sections.find((s) => s.slug === result.sectionSlug)
+          const page = docs.flatPages.find((p) => p.id === result.pageId)
+          if (page && section && onSelectPage) onSelectPage(page, section)
+        }}
+        isOpen={isSearchOpen}
+        onClose={() => setIsSearchOpen(false)}
+      />
+    </div>
+  )
+}

package/packages/react/src/pages/index.ts

@@ -0,0 +1,4 @@
+export { DocsIndexPage } from './DocsIndexPage'
+export { DocViewPage } from './DocViewPage'
+export { DocSearchPage } from './DocSearchPage'
+export { DocsAdminPage } from './DocsAdminPage'

package/packages/react/src/useDocs.ts

@@ -0,0 +1,58 @@
+import { useState, useCallback, useMemo, useEffect } from 'react'
+import type { DocsPage, DocsSidebar, DocsSearchResult, DocsProvider } from '@geenius-docs/shared'
+
+/**
+ * React hook for documentation rendering and navigation.
+ * Wraps a DocsProvider with React state management.
+ */
+export function useDocs(provider: DocsProvider) {
+  const [sidebar, setSidebar] = useState<DocsSidebar | null>(null)
+  const [currentPage, setCurrentPage] = useState<DocsPage | null>(null)
+  const [searchResults, setSearchResults] = useState<DocsSearchResult[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  // Load sidebar on mount
+  useEffect(() => {
+    provider.getSidebar().then(setSidebar)
+  }, [provider])
+
+  const loadPage = useCallback(async (slug: string) => {
+    setIsLoading(true)
+    try {
+      const page = await provider.getPage(slug)
+      setCurrentPage(page)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [provider])
+
+  const search = useCallback(async (query: string) => {
+    setSearchQuery(query)
+    if (!query.trim()) {
+      setSearchResults([])
+      return
+    }
+    const results = await provider.search(query)
+    setSearchResults(results)
+  }, [provider])
+
+  const navigation = useMemo(() => {
+    if (!currentPage) return { prev: null, next: null }
+    return {
+      prev: currentPage.prev ?? null,
+      next: currentPage.next ?? null,
+    }
+  }, [currentPage])
+
+  return {
+    sidebar,
+    currentPage,
+    navigation,
+    isLoading,
+    searchResults,
+    searchQuery,
+    loadPage,
+    search,
+  }
+}

package/packages/react/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+    entry: { index: 'src/index.tsx' },
+    outDir: 'dist',
+    format: ['esm'],
+    dts: true,
+    sourcemap: true,
+    clean: true,
+    treeshake: true,
+    external: ['react', 'react-dom'],
+})

package/packages/react-css/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-docs/react-css\n\n> Geenius Docs — React components (vanilla CSS variant)\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-docs/react-css\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-docs/react-css';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n

package/packages/react-css/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@geenius-docs/react-css",
+  "version": "0.1.0",
+  "description": "Geenius Docs \u2014 React components (vanilla CSS variant)",
+  "type": "module",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": "./src/index.tsx"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "@tanstack/react-router": ">=1.0.0"
+  },
+  "dependencies": {
+    "@geenius-docs/shared": "workspace:*",
+    "lucide-react": "^0.475.0",
+    "react-markdown": "^9.0.3",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.2.4",
+    "typescript": "~6.0.2"
+  },
+  "author": "Antigravity HQ",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/react-css/src/DocsLayout.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import { useDocs } from './DocsProvider'
+
+interface DocsLayoutProps {
+  children?: React.ReactNode
+  currentPageId?: string
+  onSelectPage?: (id: string) => void
+  searchQuery?: string
+  onSearch?: (query: string) => void
+  searchResults?: any[]
+}
+
+/**
+ * A professional, high-quality layout for Geenius Documentation.
+ * Provides a responsive sidebar, searchable navigation, and premium typography via data-* CSS styling.
+ */
+export const DocsLayout: React.FC<DocsLayoutProps> = ({ 
+  children, 
+  currentPageId, 
+  onSelectPage,
+  searchQuery: searchQueryProp,
+  onSearch: onSearchProp,
+  searchResults: searchResultsProp
+}) => {
+  const { 
+    tree, 
+    selectPage, 
+    setSearchQuery, 
+    searchQuery: contextSearchQuery, 
+    searchResults: contextSearchResults 
+  } = useDocs()
+
+  const q = searchQueryProp ?? contextSearchQuery
+  const results = searchResultsProp ?? contextSearchResults
+  const onSelect = onSelectPage ?? selectPage
+  const onSearch = onSearchProp ?? setSearchQuery
+
+  return (
+    <div data-docs-container="">
+      {/* Searchable Sidebar */}
+      <aside data-docs-sidebar="">
+        <div data-docs-search-wrap="">
+          <div data-docs-search-input-wrap="">
+            <span data-docs-search-icon="">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+            </span>
+            <input 
+              value={q}
+              onChange={(e) => onSearch(e.target.value)}
+              placeholder="Search knowledge base..." 
+              data-docs-search-input=""
+            />
+          </div>
+        </div>
+
+        <nav data-docs-nav="">
+          {q && results.length > 0 ? (
+            <div data-docs-search-results="">
+              <p data-docs-search-results-label="">
+                Search Results ({results.length})
+              </p>
+              {results.map(page => (
+                <button 
+                  key={page.id}
+                  onClick={() => { onSelect(page.id); onSearch('') }}
+                  data-docs-search-result-btn=""
+                >
+                  <h5 data-docs-search-result-title="">{page.title}</h5>
+                  {page.description && <p data-docs-search-result-desc="">{page.description}</p>}
+                </button>
+              ))}
+            </div>
+          ) : (
+            tree.map(group => (
+              <div key={group.id} data-docs-nav-group="">
+                <h4 data-docs-nav-group-title="">
+                  {group.title}
+                </h4>
+                <div data-docs-nav-group-list="">
+                  {group.children.map(page => {
+                    const isActive = page.id === currentPageId
+                    return (
+                      <button 
+                        key={page.id}
+                        onClick={() => onSelect(page.id)}
+                        data-docs-nav-item=""
+                        data-active={isActive}
+                      >
+                        <span data-docs-nav-indicator="" data-active={isActive} />
+                        {page.title}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            ))
+          )}
+        </nav>
+      </aside>
+
+      {/* Dynamic Content Area */}
+      <main data-docs-main="">
+        <div data-docs-content="">
+          {children}
+          
+          <div data-docs-footer="">
+            <p data-docs-footer-copy="">© 2024 Geenius. Premium Documentation.</p>
+            <div data-docs-footer-links="">
+              <button data-docs-footer-link="">Edit on GitHub</button>
+              <button data-docs-footer-link="">Community Help</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

package/packages/react-css/src/DocsProvider.tsx

@@ -0,0 +1,93 @@
+import React, { createContext, useContext, useState, useMemo, useCallback } from 'react'
+
+export interface DocsPage {
+  id: string
+  title: string
+  description?: string
+  content: any
+}
+
+export interface DocsGroup {
+  id: string
+  title: string
+  children: DocsPage[]
+}
+
+export type DocsTree = DocsGroup[]
+
+interface DocsContextValue {
+  tree: DocsTree
+  currentPage: DocsPage | null
+  selectPage: (id: string) => void
+  searchQuery: string
+  setSearchQuery: (query: string) => void
+  searchResults: DocsPage[]
+}
+
+const DocsContext = createContext<DocsContextValue | null>(null)
+
+interface DocsProviderProps {
+  tree: DocsTree
+  children: React.ReactNode
+}
+
+/**
+ * DocsProvider — Manages documentation state including current page, 
+ * search, and navigation through the docs tree.
+ */
+export const DocsProvider: React.FC<DocsProviderProps> = ({ tree, children }) => {
+  const [currentPageId, setCurrentPageId] = useState<string | null>(tree[0]?.children[0]?.id || null)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const currentPage = useMemo(() => {
+    for (const group of tree) {
+      const page = group.children.find(p => p.id === currentPageId)
+      if (page) return page
+    }
+    return null
+  }, [tree, currentPageId])
+
+  const selectPage = useCallback((id: string) => {
+    setCurrentPageId(id)
+  }, [])
+
+  const searchResults = useMemo(() => {
+    if (!searchQuery) return []
+    const results: DocsPage[] = []
+    const query = searchQuery.toLowerCase()
+    
+    for (const group of tree) {
+      for (const page of group.children) {
+        if (
+          page.title.toLowerCase().includes(query) || 
+          page.description?.toLowerCase().includes(query) ||
+          (typeof page.content === 'string' && page.content.toLowerCase().includes(query))
+        ) {
+          results.push(page)
+        }
+      }
+    }
+    return results
+  }, [tree, searchQuery])
+
+  return (
+    <DocsContext.Provider value={{ 
+      tree, 
+      currentPage, 
+      selectPage, 
+      searchQuery, 
+      setSearchQuery, 
+      searchResults 
+    }}>
+      {children}
+    </DocsContext.Provider>
+  )
+}
+
+export function useDocs() {
+  const context = useContext(DocsContext)
+  if (!context) {
+    throw new Error('useDocs must be used within a DocsProvider')
+  }
+  return context
+}

package/packages/react-css/src/RouterDocsContent.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Link } from '@tanstack/react-router'
+
+interface RouterDocsContentProps {
+  content: string
+  title: string
+  description: string
+}
+
+export const RouterDocsContent: React.FC<RouterDocsContentProps> = ({
+  content,
+  title,
+  description,
+}) => {
+  return (
+    <article data-rdocs-article="">
+      {/* Header */}
+      <header data-rdocs-header="">
+        <h1 data-rdocs-title="">{title}</h1>
+        <p data-rdocs-description="">{description}</p>
+      </header>
+
+      {/* Markdown Content */}
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          h1: ({ children }) => <h1 data-rdocs-h1="">{children}</h1>,
+          h2: ({ children }) => <h2 data-rdocs-h2="">{children}</h2>,
+          h3: ({ children }) => <h3 data-rdocs-h3="">{children}</h3>,
+          h4: ({ children }) => <h4 data-rdocs-h4="">{children}</h4>,
+          p: ({ children }) => <p data-rdocs-p="">{children}</p>,
+          a: ({ href, children }) => {
+            if (href?.startsWith('/')) {
+              return <Link to={href} data-rdocs-a="">{children}</Link>
+            }
+            return <a href={href} target="_blank" rel="noopener noreferrer" data-rdocs-a="">{children}</a>
+          },
+          code: ({ className, children, ...props }) => {
+            if (!className) return <code data-rdocs-code-inline="">{children}</code>
+            return <code className={className} data-rdocs-code-block="" {...props}>{children}</code>
+          },
+          pre: ({ children }) => <pre data-rdocs-pre="">{children}</pre>,
+          ul: ({ children }) => <ul data-rdocs-ul="">{children}</ul>,
+          ol: ({ children }) => <ol data-rdocs-ol="">{children}</ol>,
+          li: ({ children }) => <li data-rdocs-li="">{children}</li>,
+          table: ({ children }) => <div data-rdocs-table-wrap=""><table data-rdocs-table="">{children}</table></div>,
+          thead: ({ children }) => <thead data-rdocs-thead="">{children}</thead>,
+          th: ({ children }) => <th data-rdocs-th="">{children}</th>,
+          td: ({ children }) => <td data-rdocs-td="">{children}</td>,
+          blockquote: ({ children }) => <blockquote data-rdocs-blockquote="">{children}</blockquote>,
+          hr: () => <hr data-rdocs-hr="" />,
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </article>
+  )
+}

package/packages/react-css/src/RouterDocsLayout.tsx

@@ -0,0 +1,101 @@
+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 RouterDocsLayoutProps {
+  children: React.ReactNode
+  docs: DocItem[]
+  currentSlug?: string
+}
+
+export const RouterDocsLayout: React.FC<RouterDocsLayoutProps> = ({ children, docs, currentSlug }) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
+  
+  const groupedDocs = docs.reduce((acc, doc) => {
+    if (!acc[doc.category]) { acc[doc.category] = [] }
+    acc[doc.category].push(doc)
+    return acc
+  }, {} as Record<string, DocItem[]>)
+
+  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 data-rdocs-layout="">
+      {/* Mobile Header */}
+      <div data-rdocs-mobile-header="">
+        <Link to="/" data-rdocs-logo="">
+          <Book />
+          <span>Documentation</span>
+        </Link>
+        <button onClick={() => setIsSidebarOpen(!isSidebarOpen)} data-rdocs-mobile-btn="">
+          {isSidebarOpen ? <X /> : <Menu />}
+        </button>
+      </div>
+
+      <div data-rdocs-body="">
+        {/* Sidebar */}
+        <aside data-rdocs-sidebar="" data-open={isSidebarOpen}>
+          <div data-rdocs-sidebar-content="">
+            <Link to="/" data-rdocs-logo="" data-desktop="">
+              <Book />
+              <span>Documentation</span>
+            </Link>
+
+            <div data-rdocs-search="">
+              <Search data-rdocs-search-icon="" />
+              <input type="text" placeholder="Search docs..." data-rdocs-search-input="" />
+            </div>
+
+            <nav data-rdocs-nav="">
+              {sortedCategories.map(([category, categoryDocs]) => (
+                <div key={category} data-rdocs-category-group="">
+                  <h3 data-rdocs-category-title="">{category}</h3>
+                  <ul data-rdocs-category-list="">
+                    {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)}
+                            data-rdocs-nav-link=""
+                            data-active={isActive}
+                          >
+                            <ChevronRight data-rdocs-chevron="" data-active={isActive} />
+                            {doc.title}
+                          </Link>
+                        </li>
+                      )
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </nav>
+          </div>
+        </aside>
+
+        {isSidebarOpen && (
+          <div data-rdocs-overlay="" onClick={() => setIsSidebarOpen(false)} />
+        )}
+
+        {/* Main Content */}
+        <main data-rdocs-main="">
+          <div data-rdocs-content="">{children}</div>
+        </main>
+      </div>
+    </div>
+  )
+}