react-docs-module 0.1.0

package/search.tsx

@@ -0,0 +1,273 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Dialog, DialogContent, DialogTitle } from "./ui/dialog";
+import type { SearchResult } from "./search-index";
+import { AIChat, AIChatOption } from "./ai-chat";
+import { ReactDocsConfig } from "./config";
+import { useDocsColors } from "./theme-context";
+
+// Singleton to cache search index
+class SearchIndexCache {
+  private static instances: Map<string, SearchIndexCache> = new Map();
+  private searchIndex: SearchResult[] | null = null;
+  private loading = false;
+  private callbacks: ((index: SearchResult[]) => void)[] = [];
+
+  constructor(private config: ReactDocsConfig) { }
+
+  static getInstance(config: ReactDocsConfig): SearchIndexCache {
+    const key = config.searchApiPath;
+    if (!SearchIndexCache.instances.has(key)) {
+      SearchIndexCache.instances.set(key, new SearchIndexCache(config));
+    }
+    return SearchIndexCache.instances.get(key)!;
+  }
+
+  async getSearchIndex(): Promise<SearchResult[]> {
+    if (this.searchIndex) {
+      return this.searchIndex;
+    }
+
+    if (this.loading) {
+      return new Promise((resolve) => {
+        this.callbacks.push(resolve);
+      });
+    }
+
+    this.loading = true;
+    try {
+      const response = await fetch(this.config.searchApiPath);
+      const data = await response.json();
+      this.searchIndex = data;
+      this.callbacks.forEach(callback => callback(data));
+      this.callbacks = [];
+      return data;
+    } finally {
+      this.loading = false;
+    }
+  }
+}
+
+interface SearchResultWithScore extends SearchResult {
+  score: number;
+  snippet: string;
+}
+
+function highlightText(text: string, query: string) {
+  if (!query) return text;
+  const parts = text.split(new RegExp(`(${query})`, "gi"));
+  return parts.map((part, i) =>
+    part.toLowerCase() === query.toLowerCase() ?
+      <mark key={i} className="bg-yellow-500/20 text-yellow-200 rounded px-0.5">{part}</mark> :
+      part
+  );
+}
+
+export interface SearchProps {
+  config: ReactDocsConfig;
+}
+
+export function Search({ config }: SearchProps) {
+  const [open, setOpen] = useState(false);
+  const [isMac, setIsMac] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResultWithScore[]>([]);
+  const [searchIndex, setSearchIndex] = useState<SearchResult[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showAIChat, setShowAIChat] = useState(false);
+  const router = useRouter();
+  const colors = useDocsColors();
+
+  useEffect(() => {
+    // Detect if user is on macOS
+    setIsMac(navigator.platform.toUpperCase().indexOf('MAC') >= 0);
+
+    // Load search index using cache
+    const cache = SearchIndexCache.getInstance(config);
+    cache.getSearchIndex().then((data) => setSearchIndex(data));
+
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen(true);
+      }
+
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, [config]);
+
+  useEffect(() => {
+    const search = async () => {
+      setIsLoading(true);
+      // Only search if query has 2 or more characters
+      if (!query.trim() || query.length < 2) {
+        setResults([]);
+        setIsLoading(false);
+        return;
+      }
+
+      const searchQuery = query.toLowerCase();
+      const filtered = searchIndex
+        .map(item => {
+          const titleMatch = item.title.toLowerCase().includes(searchQuery);
+          const contentMatch = item.content.toLowerCase().includes(searchQuery);
+
+          if (!titleMatch && !contentMatch) return null;
+
+          // Find the best content snippet
+          let snippet = item.content;
+          if (contentMatch) {
+            const index = item.content.toLowerCase().indexOf(searchQuery);
+            const start = Math.max(0, index - 100);
+            const end = Math.min(item.content.length, index + 100);
+            snippet = (start > 0 ? "..." : "") +
+              item.content.slice(start, end) +
+              (end < item.content.length ? "..." : "");
+          }
+
+          return {
+            ...item,
+            snippet,
+            score: titleMatch ? 2 : 1,
+          };
+        })
+        .filter((item): item is SearchResultWithScore => item !== null)
+        .sort((a, b) => b.score - a.score);
+
+      setResults(filtered);
+      setIsLoading(false);
+    };
+
+    const debounce = setTimeout(search, 200);
+    return () => clearTimeout(debounce);
+  }, [query, searchIndex]);
+
+  const handleSelect = (result: SearchResultWithScore) => {
+    router.push(result.url);
+    setOpen(false);
+  };
+
+  const handleAIChat = () => {
+    setShowAIChat(true);
+  };
+
+  return (
+    <div className="relative w-full">
+      <Button
+        variant="outline"
+        className="relative w-full justify-start text-sm text-muted-foreground bg-gray-800/50 hover:bg-gray-800 border-0 hover:text-gray-100"
+        style={{
+          '--ring-color': colors.primary,
+        } as React.CSSProperties}
+        onClick={() => setOpen(true)}
+      >
+        <span className="inline-flex items-center">
+          <svg
+            className="mr-2 h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          Search documentation or ask AI...
+        </span>
+        <kbd className="pointer-events-none absolute right-2 top-[50%] translate-y-[-50%] inline-flex h-5 select-none items-center gap-1 rounded border border-gray-700 bg-gray-800 px-1.5 font-mono text-[10px] font-medium text-gray-400">
+          {isMac ? (
+            <span className="text-xs">⌘</span>
+          ) : (
+            <span className="text-xs">Ctrl</span>
+          )}
+          + K
+        </kbd>
+      </Button>
+
+      <Dialog open={open} onOpenChange={(isOpen) => {
+        setOpen(isOpen);
+        if (!isOpen) {
+          setShowAIChat(false);
+          setQuery("");
+        }
+      }}>
+        <DialogContent
+          className="fixed top-20 left-1/2 -translate-x-1/2 w-full max-w-2xl shadow-2xl backdrop-blur-sm bg-gray-900/95 border border-gray-800 rounded-lg overflow-hidden"
+          style={{ maxHeight: 'calc(100vh - 6rem)' }}
+        >
+          <DialogTitle className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)' }}>
+            Search Documentation
+          </DialogTitle>
+          {!showAIChat ? (
+            <div className="flex flex-col" style={{ maxHeight: 'calc(100vh - 6rem)' }}>
+              <div className="shrink-0 p-4 border-b border-gray-800">
+                <Input
+                  placeholder="Search documentation or ask AI..."
+                  className="w-full bg-gray-800/50 border-gray-700"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  autoFocus
+                />
+              </div>
+
+              <div className="min-h-0 overflow-y-auto">
+                <div className="p-4 space-y-4">
+                  {isLoading ? (
+                    <div className="text-sm text-gray-400">Searching...</div>
+                  ) : query.length < 2 ? (
+                    <div className="text-sm text-gray-400">Enter at least 2 characters to search...</div>
+                  ) : (
+                    <>
+                      {query.length >= 2 && <AIChatOption query={query} onClick={handleAIChat} />}
+                      {results.length > 0 ? (
+                        <div className="space-y-4">
+                          {results.map((result) => (
+                            <button
+                              key={result.url}
+                              className="block w-full text-left p-4 rounded-lg hover:bg-gray-800/50 transition-colors"
+                              onClick={() => handleSelect(result)}
+                            >
+                              <h3 className="text-sm font-medium text-white mb-1">
+                                {highlightText(result.title, query)}
+                              </h3>
+                              <p className="text-sm text-gray-400 line-clamp-2">
+                                {highlightText(result.snippet, query)}
+                              </p>
+                            </button>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="text-sm text-gray-400">No documentation results found</div>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="overflow-y-auto" style={{ maxHeight: 'calc(100vh - 6rem)' }}>
+              <div className="p-4">
+                <AIChat
+                  query={query}
+                  onBack={() => setShowAIChat(false)}
+                  config={config}
+                />
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+} 

package/table-of-contents-provider.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect } from "react";
+
+export function TableOfContentsProvider({ 
+  children 
+}: { 
+  children: React.ReactNode 
+}) {
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            // Remove active class from all links
+            document.querySelectorAll('[data-heading-id]').forEach(el => {
+              el.classList.remove('text-white');
+              el.classList.add('text-gray-400');
+            });
+            
+            // Add active class to current heading's link
+            const link = document.querySelector(
+              `[data-heading-id="${entry.target.id}"]`
+            );
+            if (link) {
+              link.classList.remove('text-gray-400');
+              link.classList.add('text-white');
+            }
+          }
+        });
+      },
+      { rootMargin: "-80px 0px -80% 0px" }
+    );
+
+    // Observe all headings
+    document.querySelectorAll("h1, h2, h3").forEach((heading) => {
+      observer.observe(heading);
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return children;
+} 

package/table-of-contents.tsx

@@ -0,0 +1,44 @@
+import { TableOfContentsProvider } from "./table-of-contents-provider";
+
+interface Heading {
+  id: string;
+  text: string;
+  level: number;
+}
+
+interface Props {
+  headings: Heading[];
+}
+
+function TableOfContentsList({ headings }: Props) {
+  return (
+    <nav className="sticky top-8 z-0 max-h-[calc(100vh-4rem)] overflow-y-auto">
+      <h4 className="text-sm font-semibold mb-4 text-gray-400">On this page</h4>
+      <ul className="space-y-2.5">
+        {headings.map(({ id, text, level }) => (
+          <li
+            key={id}
+            style={{ paddingLeft: `${(level - 1) * 16}px` }}
+            className="text-sm"
+          >
+            <a
+              href={`#${id}`}
+              className="hover:text-white transition-colors text-gray-400 block"
+              data-heading-id={id}
+            >
+              {text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+export function TableOfContents({ headings }: Props) {
+  return (
+    <TableOfContentsProvider>
+      <TableOfContentsList headings={headings} />
+    </TableOfContentsProvider>
+  );
+} 

package/theme-context.tsx

@@ -0,0 +1,57 @@
+"use client";
+import React, { createContext, useContext } from "react";
+import type { DocsJsonConfig } from "./util";
+
+export interface ThemeColors {
+  primary: string;
+  light?: string;
+  dark?: string;
+}
+
+export interface DocsTheme {
+  colors: ThemeColors;
+  name: string;
+  theme: string;
+}
+
+const DocsThemeContext = createContext<DocsTheme | null>(null);
+
+export interface DocsThemeProviderProps {
+  config: DocsJsonConfig;
+  children: React.ReactNode;
+}
+
+export function DocsThemeProvider({ config, children }: DocsThemeProviderProps) {
+  const theme: DocsTheme = {
+    colors: config.colors,
+    name: config.name,
+    theme: config.theme,
+  };
+
+  return (
+    <DocsThemeContext.Provider value={theme}>
+      <div
+        style={{
+          '--docs-primary': theme.colors.primary,
+          '--docs-primary-light': theme.colors.light || theme.colors.primary,
+          '--docs-primary-dark': theme.colors.dark || theme.colors.primary,
+        } as React.CSSProperties}
+      >
+        {children}
+      </div>
+    </DocsThemeContext.Provider>
+  );
+}
+
+export function useDocsTheme(): DocsTheme {
+  const context = useContext(DocsThemeContext);
+  if (!context) {
+    throw new Error('useDocsTheme must be used within a DocsThemeProvider');
+  }
+  return context;
+}
+
+export function useDocsColors(): ThemeColors {
+  const theme = useDocsTheme();
+  return theme.colors;
+}

package/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../cn"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/ui/dialog.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../cn";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] gap-4 border border-gray-700 bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-gray-400", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}; 

package/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "../cn";
+
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 ring-offset-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };