@shirokuma-library/shirokuma-docs 0.1.0-alpha.5

package/portal/lib/search.ts

@@ -0,0 +1,126 @@
+/**
+ * Search functionality for documentation portal
+ */
+
+export interface SearchItem {
+  id: string;
+  title: string;
+  description: string;
+  category: "screen" | "component" | "action" | "table" | "test" | "db";
+  module?: string;
+  path: string;
+  keywords: string[];
+}
+
+export interface SearchIndex {
+  items: SearchItem[];
+  generatedAt: string;
+}
+
+/**
+ * Simple fuzzy search scoring
+ * Returns a score (higher = better match), or 0 for no match
+ */
+function fuzzyScore(query: string, text: string): number {
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+
+  // Exact match gets highest score
+  if (t === q) return 100;
+
+  // Contains exact query
+  if (t.includes(q)) {
+    // Bonus for starting with query
+    if (t.startsWith(q)) return 90;
+    return 70;
+  }
+
+  // Check if all characters in query appear in order
+  let qIdx = 0;
+  let score = 0;
+  let consecutiveBonus = 0;
+  let lastMatchIdx = -2;
+
+  for (let i = 0; i < t.length && qIdx < q.length; i++) {
+    if (t[i] === q[qIdx]) {
+      score += 10;
+      // Bonus for consecutive matches
+      if (i === lastMatchIdx + 1) {
+        consecutiveBonus += 5;
+      }
+      lastMatchIdx = i;
+      qIdx++;
+    }
+  }
+
+  // All query characters found in order
+  if (qIdx === q.length) {
+    return score + consecutiveBonus;
+  }
+
+  return 0;
+}
+
+/**
+ * Search through items and return ranked results
+ */
+export function searchItems(
+  index: SearchIndex,
+  query: string,
+  limit: number = 20
+): SearchItem[] {
+  if (!query.trim()) return [];
+
+  const q = query.trim().toLowerCase();
+
+  // Score each item
+  const scored = index.items
+    .map((item) => {
+      // Score title (highest weight)
+      let score = fuzzyScore(q, item.title) * 3;
+
+      // Score description
+      score += fuzzyScore(q, item.description) * 1.5;
+
+      // Score module name
+      if (item.module) {
+        score += fuzzyScore(q, item.module) * 2;
+      }
+
+      // Score keywords
+      for (const keyword of item.keywords) {
+        score += fuzzyScore(q, keyword);
+      }
+
+      // Category boost for exact match
+      if (item.category.toLowerCase().includes(q)) {
+        score += 20;
+      }
+
+      return { item, score };
+    })
+    .filter((x) => x.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, limit);
+
+  return scored.map((x) => x.item);
+}
+
+/**
+ * Get category display info
+ */
+export function getCategoryInfo(category: SearchItem["category"]): {
+  label: string;
+  color: string;
+  bgColor: string;
+} {
+  const info: Record<SearchItem["category"], { label: string; color: string; bgColor: string }> = {
+    screen: { label: "画面", color: "text-blue-600", bgColor: "bg-blue-100 dark:bg-blue-900/30" },
+    component: { label: "コンポーネント", color: "text-green-600", bgColor: "bg-green-100 dark:bg-green-900/30" },
+    action: { label: "アクション", color: "text-amber-600", bgColor: "bg-amber-100 dark:bg-amber-900/30" },
+    table: { label: "テーブル", color: "text-purple-600", bgColor: "bg-purple-100 dark:bg-purple-900/30" },
+    test: { label: "テスト", color: "text-cyan-600", bgColor: "bg-cyan-100 dark:bg-cyan-900/30" },
+    db: { label: "DB", color: "text-rose-600", bgColor: "bg-rose-100 dark:bg-rose-900/30" },
+  };
+  return info[category];
+}

package/portal/lib/sidebar-context.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";
+
+interface SidebarContextValue {
+  isCollapsed: boolean;
+  hideExpandButton: boolean;
+  /** Whether to skip animation (for programmatic state changes) */
+  skipAnimation: boolean;
+  toggle: () => void;
+  collapse: () => void;
+  expand: () => void;
+  setHideExpandButton: (hide: boolean) => void;
+  /** Temporarily collapse without saving to localStorage */
+  collapseTemporarily: () => void;
+  /** Restore to the persisted state */
+  restorePersistedState: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
+
+const STORAGE_KEY = "sidebar-collapsed";
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  // Read initial state synchronously from localStorage to avoid flash
+  const getInitialState = () => {
+    if (typeof window === "undefined") return false;
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored === "true";
+  };
+
+  const [isCollapsed, setIsCollapsed] = useState(getInitialState);
+  const [hideExpandButton, setHideExpandButton] = useState(false);
+  const [isTemporary, setIsTemporary] = useState(false);
+  const [skipAnimation, setSkipAnimation] = useState(false);
+  const persistedStateRef = useRef<boolean>(getInitialState());
+
+  // Update persisted state ref when localStorage changes
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored !== null) {
+      persistedStateRef.current = stored === "true";
+    }
+  }, []);
+
+  // Save to localStorage when changed (only if not temporary)
+  useEffect(() => {
+    if (!isTemporary) {
+      localStorage.setItem(STORAGE_KEY, String(isCollapsed));
+      persistedStateRef.current = isCollapsed;
+    }
+  }, [isCollapsed, isTemporary]);
+
+  // User actions - with animation
+  const toggle = useCallback(() => {
+    setSkipAnimation(false);
+    setIsTemporary(false);
+    setIsCollapsed((prev) => !prev);
+  }, []);
+
+  const collapse = useCallback(() => {
+    setSkipAnimation(false);
+    setIsTemporary(false);
+    setIsCollapsed(true);
+  }, []);
+
+  const expand = useCallback(() => {
+    setSkipAnimation(false);
+    setIsTemporary(false);
+    setIsCollapsed(false);
+  }, []);
+
+  // Programmatic actions - without animation
+  const collapseTemporarily = useCallback(() => {
+    setSkipAnimation(true);
+    setIsTemporary(true);
+    setIsCollapsed(true);
+  }, []);
+
+  const restorePersistedState = useCallback(() => {
+    setSkipAnimation(true);
+    setIsTemporary(false);
+    setIsCollapsed(persistedStateRef.current);
+  }, []);
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        isCollapsed,
+        hideExpandButton,
+        skipAnimation,
+        toggle,
+        collapse,
+        expand,
+        setHideExpandButton,
+        collapseTemporarily,
+        restorePersistedState,
+      }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+}