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

package/portal/components/search-dialog.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { Search, FileText, Code, Zap, Database, TestTube2, Table2 } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { searchItems, getCategoryInfo, type SearchIndex, type SearchItem } from "@/lib/search";
+import { cn } from "@/lib/utils";
+
+interface SearchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  searchIndex: SearchIndex;
+}
+
+const categoryIcons: Record<SearchItem["category"], React.ComponentType<{ className?: string }>> = {
+  screen: FileText,
+  component: Code,
+  action: Zap,
+  table: Table2,
+  test: TestTube2,
+  db: Database,
+};
+
+export function SearchDialog({ open, onOpenChange, searchIndex }: SearchDialogProps) {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchItem[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Update results when query changes
+  useEffect(() => {
+    if (query.trim()) {
+      const items = searchItems(searchIndex, query, 15);
+      setResults(items);
+      setSelectedIndex(0);
+    } else {
+      setResults([]);
+      setSelectedIndex(0);
+    }
+  }, [query, searchIndex]);
+
+  // Focus input when dialog opens
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+    } else {
+      setQuery("");
+      setResults([]);
+    }
+  }, [open]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((i) => Math.min(i + 1, results.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((i) => Math.max(i - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (results[selectedIndex]) {
+            router.push(results[selectedIndex].path);
+            onOpenChange(false);
+          }
+          break;
+        case "Escape":
+          onOpenChange(false);
+          break;
+      }
+    },
+    [results, selectedIndex, router, onOpenChange]
+  );
+
+  const handleSelect = (item: SearchItem) => {
+    router.push(item.path);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl gap-0 p-0 overflow-hidden">
+        <DialogTitle className="sr-only">ドキュメント検索</DialogTitle>
+        <DialogDescription className="sr-only">
+          画面、コンポーネント、アクション、テーブル、テストを検索
+        </DialogDescription>
+
+        {/* Search Input */}
+        <div className="flex items-center border-b px-4 py-3">
+          <Search className="mr-3 h-5 w-5 text-muted-foreground" />
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder="検索... (画面、コンポーネント、アクション、テーブル、テスト)"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          />
+          <kbd className="ml-2 hidden sm:inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <ScrollArea className="max-h-[400px]">
+          {results.length > 0 ? (
+            <div className="py-2">
+              {results.map((item, index) => {
+                const Icon = categoryIcons[item.category];
+                const info = getCategoryInfo(item.category);
+                return (
+                  <button
+                    key={item.id}
+                    onClick={() => handleSelect(item)}
+                    onMouseEnter={() => setSelectedIndex(index)}
+                    className={cn(
+                      "flex w-full items-start gap-3 px-4 py-3 text-left transition-colors",
+                      index === selectedIndex
+                        ? "bg-accent text-accent-foreground"
+                        : "hover:bg-accent/50"
+                    )}
+                  >
+                    <div className={cn("rounded-md p-1.5", info.bgColor)}>
+                      <Icon className={cn("h-4 w-4", info.color)} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium truncate">{item.title}</span>
+                        <Badge
+                          variant="outline"
+                          className={cn("shrink-0 text-xs", info.bgColor, info.color)}
+                        >
+                          {info.label}
+                        </Badge>
+                      </div>
+                      <p className="text-sm text-muted-foreground truncate mt-0.5">
+                        {item.description}
+                      </p>
+                      {item.module && (
+                        <span className="text-xs text-muted-foreground">
+                          {item.module}
+                        </span>
+                      )}
+                    </div>
+                    {index === selectedIndex && (
+                      <kbd className="hidden sm:flex shrink-0 h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+                        Enter
+                      </kbd>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          ) : query.trim() ? (
+            <div className="py-12 text-center">
+              <p className="text-sm text-muted-foreground">
+                &quot;{query}&quot; に一致する結果がありません
+              </p>
+            </div>
+          ) : (
+            <div className="py-12 text-center">
+              <p className="text-sm text-muted-foreground">
+                キーワードを入力して検索
+              </p>
+              <div className="mt-4 flex flex-wrap justify-center gap-2 px-4">
+                {["画面", "コンポーネント", "アクション", "テスト"].map((hint) => (
+                  <button
+                    key={hint}
+                    onClick={() => setQuery(hint)}
+                    className="rounded-full border px-3 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  >
+                    {hint}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </ScrollArea>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between border-t px-4 py-2 text-xs text-muted-foreground">
+          <div className="flex items-center gap-4">
+            <span className="flex items-center gap-1">
+              <kbd className="rounded border bg-muted px-1.5 py-0.5">↑</kbd>
+              <kbd className="rounded border bg-muted px-1.5 py-0.5">↓</kbd>
+              <span>移動</span>
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="rounded border bg-muted px-1.5 py-0.5">Enter</kbd>
+              <span>選択</span>
+            </span>
+          </div>
+          <span>{searchIndex.items.length} 件のドキュメント</span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface SearchButtonProps {
+  searchIndex: SearchIndex | null;
+}
+
+export function SearchButton({ searchIndex }: SearchButtonProps) {
+  const [open, setOpen] = useState(false);
+
+  // Global keyboard shortcut (⌘K or Ctrl+K)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        if (searchIndex) {
+          setOpen(true);
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [searchIndex]);
+
+  // Don't render if no search index
+  if (!searchIndex || !searchIndex.items) {
+    return (
+      <button
+        disabled
+        className="flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-muted-foreground opacity-50 cursor-not-allowed"
+        type="button"
+      >
+        <Search className="h-4 w-4" />
+        <span className="hidden sm:inline">検索</span>
+      </button>
+    );
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent transition-colors"
+        type="button"
+      >
+        <Search className="h-4 w-4" />
+        <span className="hidden sm:inline">検索</span>
+        <kbd className="hidden sm:inline ml-2 rounded border border-border bg-muted px-1.5 py-0.5 text-xs">
+          ⌘K
+        </kbd>
+      </button>
+      <SearchDialog open={open} onOpenChange={setOpen} searchIndex={searchIndex} />
+    </>
+  );
+}

package/portal/components/shared/coverage-score-bar.tsx

@@ -0,0 +1,144 @@
+/**
+ * Shared CoverageScoreBar Component
+ *
+ * Displays test coverage score with color-coded progress bar.
+ * Replaces duplicated code in:
+ * - feature-map/feature-map-client.tsx
+ * - details/[type]/[module]/[item]/page.tsx
+ * - api-tools/[tool]/page.tsx
+ */
+
+import { cn } from "@/lib/utils";
+
+export interface CoverageScoreBarProps {
+  /** Coverage score (0-100) */
+  score: number;
+  /** Label text (default: "カバレッジスコア") */
+  label?: string;
+  /** Show label text (default: true) */
+  showLabel?: boolean;
+  /** Total test count (optional) */
+  totalTests?: number;
+  /** Display variant */
+  variant?: "default" | "compact" | "badge";
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Get color class based on coverage score
+ */
+export function getCoverageColor(score: number): string {
+  if (score >= 70) return "text-green-600 dark:text-green-400";
+  if (score >= 40) return "text-yellow-600 dark:text-yellow-400";
+  return "text-red-600 dark:text-red-400";
+}
+
+/**
+ * Get background color class based on coverage score
+ */
+export function getCoverageBgColor(score: number): string {
+  if (score >= 70) return "bg-green-100 dark:bg-green-900/30";
+  if (score >= 40) return "bg-yellow-100 dark:bg-yellow-900/30";
+  return "bg-red-100 dark:bg-red-900/30";
+}
+
+/**
+ * Get progress bar color class based on coverage score
+ */
+export function getCoverageBarColor(score: number): string {
+  if (score >= 70) return "bg-green-500";
+  if (score >= 40) return "bg-yellow-500";
+  return "bg-red-500";
+}
+
+/**
+ * Get border color class for badge variant
+ */
+export function getCoverageBorderColor(score: number): string {
+  if (score >= 70) return "border-green-500 text-green-600";
+  if (score >= 40) return "border-yellow-500 text-yellow-600";
+  return "border-red-500 text-red-600";
+}
+
+/**
+ * CoverageScoreBar Component
+ *
+ * @example
+ * // Default variant with progress bar
+ * <CoverageScoreBar score={75} />
+ *
+ * @example
+ * // Compact variant for cards
+ * <CoverageScoreBar score={45} variant="compact" totalTests={12} />
+ *
+ * @example
+ * // Badge variant for inline display
+ * <CoverageScoreBar score={80} variant="badge" />
+ */
+export function CoverageScoreBar({
+  score,
+  label = "カバレッジスコア",
+  showLabel = true,
+  totalTests,
+  variant = "default",
+  className,
+}: CoverageScoreBarProps) {
+  const clampedScore = Math.min(Math.max(score, 0), 100);
+
+  // Badge variant - simple colored badge
+  if (variant === "badge") {
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium",
+          getCoverageBorderColor(clampedScore),
+          className
+        )}
+      >
+        {clampedScore}%
+      </span>
+    );
+  }
+
+  // Compact variant - minimal display for cards
+  if (variant === "compact") {
+    return (
+      <div className={cn("flex items-center gap-2", className)}>
+        <div className="flex-1 h-1.5 overflow-hidden rounded-full bg-muted">
+          <div
+            className={cn("h-full transition-all", getCoverageBarColor(clampedScore))}
+            style={{ width: `${clampedScore}%` }}
+          />
+        </div>
+        <span className={cn("text-xs font-medium", getCoverageColor(clampedScore))}>
+          {clampedScore}%
+        </span>
+        {totalTests !== undefined && (
+          <span className="text-xs text-muted-foreground">({totalTests})</span>
+        )}
+      </div>
+    );
+  }
+
+  // Default variant - full progress bar with label
+  return (
+    <div className={cn("space-y-2", className)}>
+      {showLabel && (
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-muted-foreground">{label}</span>
+          <span className="font-medium">{clampedScore}%</span>
+        </div>
+      )}
+      <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
+        <div
+          className={cn("h-full transition-all", getCoverageBarColor(clampedScore))}
+          style={{ width: `${clampedScore}%` }}
+        />
+      </div>
+      {totalTests !== undefined && (
+        <p className="text-xs text-muted-foreground">{totalTests} テストケース</p>
+      )}
+    </div>
+  );
+}

package/portal/components/swagger/endpoint-accordion.tsx

@@ -0,0 +1,117 @@
+/**
+ * Endpoint Accordion for Swagger-style display
+ *
+ * Displays a single API tool as an expandable accordion item
+ * with method badge, name, description, and parameter details.
+ */
+
+import Link from "next/link";
+import { ExternalLink, FlaskConical, Database, Shield } from "lucide-react";
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { MethodBadge, type HttpMethod } from "./method-badge";
+import { ParamsTable, type ApiToolParam } from "./params-table";
+
+export interface ApiToolData {
+  name: string;
+  description: string;
+  params?: ApiToolParam[];
+  sourceFile?: string;
+  category?: string;
+  feature?: string;
+  dbTables?: string[];
+  authLevel?: string;
+  httpMethod?: HttpMethod;
+  testCoverage?: {
+    hasTest: boolean;
+    totalTests: number;
+    coverageScore: number;
+  };
+}
+
+interface EndpointAccordionProps {
+  tool: ApiToolData;
+}
+
+export function EndpointAccordion({ tool }: EndpointAccordionProps) {
+  const method = tool.httpMethod || "POST";
+  const coverage = tool.testCoverage;
+
+  return (
+    <AccordionItem value={tool.name} className="border-b-0">
+      <AccordionTrigger className="hover:no-underline py-2 px-3 rounded-md hover:bg-muted/50 [&>svg]:hidden group">
+        <div className="flex items-center gap-3 w-full">
+          <MethodBadge method={method} />
+          <span className="font-mono text-sm font-medium group-hover:text-primary transition-colors">
+            {tool.name}
+          </span>
+          <span className="text-sm text-muted-foreground truncate flex-1 text-left">
+            {tool.description}
+          </span>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {coverage && coverage.totalTests > 0 && (
+              <Badge variant="outline" className="text-xs gap-1">
+                <FlaskConical className="h-3 w-3" />
+                {coverage.totalTests}
+              </Badge>
+            )}
+            {tool.authLevel && tool.authLevel !== "none" && (
+              <Badge variant="outline" className="text-xs gap-1">
+                <Shield className="h-3 w-3" />
+                {tool.authLevel}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </AccordionTrigger>
+      <AccordionContent className="pb-4">
+        <div className="pl-[68px] space-y-4">
+          {/* Parameters */}
+          <div>
+            <h4 className="text-sm font-semibold mb-2 text-muted-foreground">
+              Parameters
+            </h4>
+            <ParamsTable params={tool.params || []} />
+          </div>
+
+          {/* Metadata */}
+          <div className="flex flex-wrap gap-4 text-xs text-muted-foreground">
+            {tool.feature && (
+              <div className="flex items-center gap-1">
+                <span className="font-medium">Feature:</span>
+                <Badge variant="secondary" className="text-xs">
+                  {tool.feature}
+                </Badge>
+              </div>
+            )}
+            {tool.dbTables && tool.dbTables.length > 0 && (
+              <div className="flex items-center gap-1">
+                <Database className="h-3 w-3" />
+                <span>{tool.dbTables.join(", ")}</span>
+              </div>
+            )}
+            {tool.sourceFile && (
+              <div className="flex items-center gap-1">
+                <span className="font-medium">Source:</span>
+                <code className="text-xs">{tool.sourceFile}</code>
+              </div>
+            )}
+          </div>
+
+          {/* Detail link */}
+          <Link
+            href={`/api-tools/${tool.name}`}
+            className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+          >
+            View details
+            <ExternalLink className="h-3 w-3" />
+          </Link>
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  );
+}

package/portal/components/swagger/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Swagger-style UI components for API Tools display
+ */
+
+export { MethodBadge, type HttpMethod } from "./method-badge";
+export { ParamsTable, type ApiToolParam } from "./params-table";
+export { EndpointAccordion, type ApiToolData } from "./endpoint-accordion";

package/portal/components/swagger/method-badge.tsx

@@ -0,0 +1,55 @@
+/**
+ * HTTP Method Badge for Swagger-style display
+ *
+ * Displays HTTP method with appropriate color coding
+ * following Swagger UI conventions.
+ */
+
+import { cn } from "@/lib/utils";
+
+export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+
+const METHOD_STYLES: Record<HttpMethod, { bg: string; text: string }> = {
+  GET: {
+    bg: "bg-blue-500/20",
+    text: "text-blue-400",
+  },
+  POST: {
+    bg: "bg-green-500/20",
+    text: "text-green-400",
+  },
+  PUT: {
+    bg: "bg-amber-500/20",
+    text: "text-amber-400",
+  },
+  DELETE: {
+    bg: "bg-red-500/20",
+    text: "text-red-400",
+  },
+  PATCH: {
+    bg: "bg-purple-500/20",
+    text: "text-purple-400",
+  },
+};
+
+interface MethodBadgeProps {
+  method: HttpMethod;
+  className?: string;
+}
+
+export function MethodBadge({ method, className }: MethodBadgeProps) {
+  const style = METHOD_STYLES[method] || METHOD_STYLES.POST;
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-mono font-semibold uppercase tracking-wide min-w-[52px]",
+        style.bg,
+        style.text,
+        className
+      )}
+    >
+      {method}
+    </span>
+  );
+}

package/portal/components/swagger/params-table.tsx

@@ -0,0 +1,78 @@
+/**
+ * Parameters Table for Swagger-style display
+ *
+ * Displays tool parameters in a compact table format.
+ */
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export interface ApiToolParam {
+  name: string;
+  type: string;
+  description?: string;
+  required: boolean;
+  default?: unknown;
+}
+
+interface ParamsTableProps {
+  params: ApiToolParam[];
+}
+
+export function ParamsTable({ params }: ParamsTableProps) {
+  if (!params || params.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground italic">
+        No parameters
+      </p>
+    );
+  }
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow className="bg-muted/30">
+            <TableHead className="w-[140px]">Name</TableHead>
+            <TableHead className="w-[100px]">Type</TableHead>
+            <TableHead className="w-[80px] text-center">Required</TableHead>
+            <TableHead>Description</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {params.map((param) => (
+            <TableRow key={param.name}>
+              <TableCell className="font-mono text-sm text-primary">
+                {param.name}
+              </TableCell>
+              <TableCell className="font-mono text-xs text-muted-foreground">
+                {param.type}
+              </TableCell>
+              <TableCell className="text-center">
+                {param.required ? (
+                  <span className="text-red-500 font-medium">*</span>
+                ) : (
+                  <span className="text-muted-foreground">-</span>
+                )}
+              </TableCell>
+              <TableCell className="text-sm text-muted-foreground">
+                {param.description || "-"}
+                {param.default !== undefined && (
+                  <span className="ml-2 text-xs opacity-70">
+                    (default: {String(param.default)})
+                  </span>
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}