@opendocsdev/cli 0.2.0

package/src/engine/src/components/react/SearchModal.tsx

@@ -0,0 +1,358 @@
+import { useEffect, useRef, useCallback, useReducer } from "react";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+interface SearchResult {
+  url: string;
+  title: string;
+  excerpt: string;
+  breadcrumb?: string[];
+}
+
+interface SearchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  backend?: string;
+  siteId?: string;
+}
+
+// Consolidated state with useReducer to avoid useState hell
+interface SearchState {
+  query: string;
+  results: SearchResult[];
+  status: "idle" | "loading" | "error";
+  error: string | null;
+  selectedIndex: number;
+  pagefindLoaded: boolean;
+}
+
+type SearchAction =
+  | { type: "SET_QUERY"; payload: string }
+  | { type: "SEARCH_START" }
+  | { type: "SEARCH_SUCCESS"; payload: SearchResult[] }
+  | { type: "SEARCH_ERROR"; payload: string }
+  | { type: "CLEAR_RESULTS" }
+  | { type: "SET_SELECTED_INDEX"; payload: number }
+  | { type: "PAGEFIND_LOADED" }
+  | { type: "PAGEFIND_ERROR"; payload: string }
+  | { type: "RESET" };
+
+const initialState: SearchState = {
+  query: "",
+  results: [],
+  status: "idle",
+  error: null,
+  selectedIndex: 0,
+  pagefindLoaded: false,
+};
+
+function searchReducer(state: SearchState, action: SearchAction): SearchState {
+  switch (action.type) {
+    case "SET_QUERY":
+      return { ...state, query: action.payload };
+    case "SEARCH_START":
+      return { ...state, status: "loading" };
+    case "SEARCH_SUCCESS":
+      // Reset selectedIndex when results change - no useEffect needed
+      return { ...state, status: "idle", results: action.payload, selectedIndex: 0 };
+    case "SEARCH_ERROR":
+      return { ...state, status: "error", error: action.payload };
+    case "CLEAR_RESULTS":
+      return { ...state, results: [], selectedIndex: 0 };
+    case "SET_SELECTED_INDEX":
+      return { ...state, selectedIndex: action.payload };
+    case "PAGEFIND_LOADED":
+      return { ...state, pagefindLoaded: true, error: null };
+    case "PAGEFIND_ERROR":
+      return { ...state, error: action.payload };
+    case "RESET":
+      return { ...initialState, pagefindLoaded: state.pagefindLoaded };
+    default:
+      return state;
+  }
+}
+
+export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalProps) {
+  const [state, dispatch] = useReducer(searchReducer, initialState);
+  const { query, results, status, error, selectedIndex, pagefindLoaded } = state;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const resultsRef = useRef<HTMLDivElement>(null);
+  const pagefindRef = useRef<any>(null);
+
+  // Track the last search for analytics (only sent on meaningful actions)
+  const lastSearchRef = useRef<{ query: string; resultCount: number } | null>(null);
+  const hasTrackedRef = useRef(false);
+
+  const loadPagefind = async () => {
+    try {
+      // Use Function constructor to create a truly dynamic import that Vite won't analyze
+      const importPagefind = new Function(
+        'return import("/pagefind/pagefind.js")'
+      ) as () => Promise<any>;
+
+      const pagefind = await importPagefind();
+      await pagefind.init();
+      pagefindRef.current = pagefind;
+      dispatch({ type: "PAGEFIND_LOADED" });
+    } catch {
+      dispatch({ type: "PAGEFIND_ERROR", payload: "Search not available. Run build to enable search." });
+    }
+  };
+
+  // Track search query for analytics - only tracks once per search session
+  const trackSearch = useCallback(() => {
+    if (!backend || !siteId) return;
+    if (hasTrackedRef.current) return;
+    if (!lastSearchRef.current) return;
+
+    const { query: searchQuery, resultCount } = lastSearchRef.current;
+    if (!searchQuery.trim()) return;
+
+    hasTrackedRef.current = true;
+
+    fetch(`${backend}/api/analytics/sq`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        siteId,
+        query: searchQuery,
+        resultCount,
+      }),
+    }).catch(() => {
+      // Silently fail - analytics should not break search
+    });
+  }, [backend, siteId]);
+
+  // Handle close with analytics tracking
+  const handleClose = useCallback(() => {
+    trackSearch();
+    onClose();
+  }, [onClose, trackSearch]);
+
+  // Handle result selection with analytics tracking
+  const handleResultSelect = useCallback((url: string) => {
+    trackSearch();
+    window.location.href = url;
+  }, [trackSearch]);
+
+  const performSearch = useCallback(async (searchQuery: string) => {
+    if (!searchQuery.trim()) {
+      dispatch({ type: "CLEAR_RESULTS" });
+      return;
+    }
+
+    if (!pagefindRef.current) {
+      return;
+    }
+
+    dispatch({ type: "SEARCH_START" });
+    try {
+      const searchResults = await pagefindRef.current.search(searchQuery);
+      const formattedResults: SearchResult[] = await Promise.all(
+        searchResults.results.slice(0, 10).map(async (result: any) => {
+          const data = await result.data();
+          return {
+            url: data.url,
+            title: data.meta?.title || data.url,
+            excerpt: data.excerpt || "",
+            breadcrumb: data.url.split("/").filter(Boolean).slice(0, -1),
+          };
+        })
+      );
+      dispatch({ type: "SEARCH_SUCCESS", payload: formattedResults });
+      lastSearchRef.current = { query: searchQuery, resultCount: searchResults.results.length };
+    } catch (e) {
+      console.error("Search error:", e);
+      dispatch({ type: "SEARCH_ERROR", payload: "Search failed" });
+    }
+  }, []);
+
+  // Load Pagefind on first open
+  useEffect(() => {
+    if (isOpen && !pagefindLoaded && !pagefindRef.current) {
+      loadPagefind();
+    }
+  }, [isOpen, pagefindLoaded]);
+
+  // Reset state and focus input when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      dispatch({ type: "RESET" });
+      lastSearchRef.current = null;
+      hasTrackedRef.current = false;
+      // Small delay to ensure modal is rendered before focusing
+      const timerId = setTimeout(() => inputRef.current?.focus(), 50);
+      return () => clearTimeout(timerId);
+    }
+  }, [isOpen]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (resultsRef.current && results.length > 0) {
+      const selectedEl = resultsRef.current.querySelector(`[data-index="${selectedIndex}"]`);
+      selectedEl?.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex, results.length]);
+
+  // Debounced search - this is a valid useEffect for external system sync (pagefind)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      performSearch(query);
+    }, 150);
+    return () => clearTimeout(timer);
+  }, [query, performSearch]);
+
+  // Keyboard navigation - all handled in a single event handler, no separate useEffect
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        dispatch({ type: "SET_SELECTED_INDEX", payload: Math.min(selectedIndex + 1, results.length - 1) });
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        dispatch({ type: "SET_SELECTED_INDEX", payload: Math.max(selectedIndex - 1, 0) });
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (results[selectedIndex]) {
+          handleResultSelect(results[selectedIndex].url);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        handleClose();
+        break;
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const isLoading = status === "loading";
+
+  return (
+    <div
+      className="fixed inset-0 z-50"
+      role="dialog"
+      aria-modal="true"
+      onKeyDown={(e) => {
+        // Global escape handler for clicking outside input
+        if (e.key === "Escape") {
+          e.preventDefault();
+          handleClose();
+        }
+      }}
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={handleClose}
+        aria-hidden="true"
+      />
+
+      {/* Modal */}
+      <div className="relative flex flex-col max-w-2xl w-[calc(100%-1rem)] sm:w-[calc(100%-2rem)] mx-auto mt-4 sm:mt-[10vh] max-h-[85vh] sm:max-h-[70vh] bg-[var(--color-surface)] rounded-xl shadow-2xl overflow-hidden border border-[var(--color-border)]">
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-[var(--color-border)]">
+          <Search className="w-5 h-5 text-[var(--color-muted)] flex-shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => dispatch({ type: "SET_QUERY", payload: e.target.value })}
+            onKeyDown={handleKeyDown}
+            placeholder="Search documentation..."
+            className="flex-1 bg-transparent text-[var(--color-foreground)] text-base placeholder:text-[var(--color-muted)] focus:outline-none"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+          />
+          <kbd className="hidden sm:flex items-center px-2 py-1 text-xs font-medium text-[var(--color-muted-foreground)] bg-[var(--color-surface-sunken)] border border-[var(--color-border)] rounded">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div ref={resultsRef} className="flex-1 overflow-y-auto">
+          {error ? (
+            <div className="p-8 text-center">
+              <p className="text-sm text-[var(--color-muted)]">{error}</p>
+            </div>
+          ) : isLoading ? (
+            <div className="p-8 text-center">
+              <div className="inline-block w-5 h-5 border-2 border-[var(--color-primary)] border-t-transparent rounded-full animate-spin" />
+            </div>
+          ) : results.length > 0 ? (
+            <ul className="py-2">
+              {results.map((result, index) => (
+                <li key={result.url} data-index={index}>
+                  <a
+                    href={result.url}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleResultSelect(result.url);
+                    }}
+                    className={cn(
+                      "block px-4 py-3 transition-colors",
+                      index === selectedIndex
+                        ? "bg-[var(--color-primary-light)]"
+                        : "hover:bg-[var(--color-surface-sunken)]"
+                    )}
+                  >
+                    {result.breadcrumb && result.breadcrumb.length > 0 && (
+                      <div className="flex items-center gap-1 text-xs text-[var(--color-muted)] mb-1">
+                        {result.breadcrumb.map((crumb, i) => (
+                          <span key={i} className="flex items-center gap-1">
+                            {i > 0 && <span className="text-[var(--color-border)]">›</span>}
+                            <span className="capitalize">{crumb.replace(/-/g, " ")}</span>
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                    <div className="font-medium text-[var(--color-foreground)]">
+                      {result.title}
+                    </div>
+                    {result.excerpt && (
+                      <p
+                        className="mt-1 text-sm text-[var(--color-muted)] line-clamp-2 [&_mark]:bg-[var(--color-primary-light)] [&_mark]:text-[var(--color-primary)] [&_mark]:rounded [&_mark]:px-0.5"
+                        dangerouslySetInnerHTML={{ __html: result.excerpt }}
+                      />
+                    )}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          ) : query.trim() ? (
+            <div className="p-8 text-center">
+              <p className="text-sm text-[var(--color-muted)]">No results found for "{query}"</p>
+            </div>
+          ) : (
+            <div className="p-8 text-center">
+              <p className="text-sm text-[var(--color-muted)]">Start typing to search...</p>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-2 border-t border-[var(--color-border)] text-xs text-[var(--color-muted-foreground)]">
+          <div className="flex items-center gap-3">
+            <span className="flex items-center gap-1">
+              <kbd className="px-1.5 py-0.5 bg-[var(--color-surface-sunken)] border border-[var(--color-border)] rounded text-[10px]">↑</kbd>
+              <kbd className="px-1.5 py-0.5 bg-[var(--color-surface-sunken)] border border-[var(--color-border)] rounded text-[10px]">↓</kbd>
+              <span className="ml-1">to navigate</span>
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="px-1.5 py-0.5 bg-[var(--color-surface-sunken)] border border-[var(--color-border)] rounded text-[10px]">↵</kbd>
+              <span className="ml-1">to select</span>
+            </span>
+          </div>
+          <span>Powered by Pagefind</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SearchModal;

package/src/engine/src/components/react/SearchProvider.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState, useCallback } from "react";
+import { SearchModal } from "./SearchModal";
+
+interface SearchProviderProps {
+  backend?: string;
+  siteId?: string;
+}
+
+export function SearchProvider({ backend, siteId }: SearchProviderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openSearch = useCallback(() => setIsOpen(true), []);
+  const closeSearch = useCallback(() => setIsOpen(false), []);
+
+  // Global keyboard shortcut: Cmd+K / Ctrl+K
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  // Listen for custom event from search triggers
+  useEffect(() => {
+    document.addEventListener("open-search", openSearch);
+    return () => document.removeEventListener("open-search", openSearch);
+  }, [openSearch]);
+
+  return <SearchModal isOpen={isOpen} onClose={closeSearch} backend={backend} siteId={siteId} />;
+}
+
+export default SearchProvider;