@geenius/docs 0.1.0 → 0.4.1

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

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

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

package/packages/react/src/useDocs.ts

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

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

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

@@ -1,37 +0,0 @@
-{
-  "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

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

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

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

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