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

package/portal/app/db-schema/table-list-document.tsx

@@ -0,0 +1,224 @@
+/**
+ * DB Schema Table List - ドキュメント形式表示
+ *
+ * テーブル一覧をカテゴリ別のアコーディオン・テーブル形式で表示
+ */
+
+import Link from "next/link";
+import { Database, Link2, Key, Layers } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { DocSection, DocTable, type DocTableColumn } from "@/components/document";
+import type { DbTable, DbSchemaData } from "@/lib/types";
+import {
+  normalizeCategory,
+  inferCategory,
+  getCategoryConfig,
+} from "@/lib/db-schema-utils";
+
+interface DbSchemaTableListDocumentProps {
+  data: DbSchemaData;
+  /** Database name for URL prefix (multi-DB mode) */
+  dbName?: string;
+}
+
+interface TableRowData {
+  name: string;
+  columnCount: number;
+  fkCount: number;
+  description?: string;
+  primaryKeys: string[];
+}
+
+/**
+ * Database Schema Table List - Document Format
+ */
+export function DbSchemaTableListDocument({
+  data,
+  dbName,
+}: DbSchemaTableListDocumentProps) {
+  // URL prefix for links
+  const urlPrefix = dbName
+    ? `/db-schema/${encodeURIComponent(dbName)}`
+    : "/db-schema";
+
+  // Group tables by category
+  const tablesByCategory = new Map<string, DbTable[]>();
+  for (const table of data.tables) {
+    const category =
+      normalizeCategory(table.category) || inferCategory(table.name);
+    if (!tablesByCategory.has(category)) {
+      tablesByCategory.set(category, []);
+    }
+    tablesByCategory.get(category)!.push(table);
+  }
+
+  // Sort categories by table count
+  const sortedCategories = Array.from(tablesByCategory.entries()).sort(
+    (a, b) => b[1].length - a[1].length
+  );
+
+  // Calculate totals
+  const totalColumns = data.tables.reduce(
+    (sum, t) => sum + (t.columns?.length ?? t.columnCount ?? 0),
+    0
+  );
+  const totalFKs = data.tables.reduce(
+    (sum, t) => sum + (t.foreignKeys?.length ?? 0),
+    0
+  );
+
+  // Table columns definition
+  const tableColumns: DocTableColumn<TableRowData>[] = [
+    {
+      key: "name",
+      header: "Table",
+      width: "200px",
+      render: (_, row) => (
+        <Link
+          href={`${urlPrefix}/${encodeURIComponent(row.name)}`}
+          className="font-medium text-primary hover:underline font-mono text-sm"
+        >
+          {row.name}
+        </Link>
+      ),
+    },
+    {
+      key: "columnCount",
+      header: "Columns",
+      width: "100px",
+      align: "center",
+      render: (_, row) => row.columnCount,
+    },
+    {
+      key: "fkCount",
+      header: "FK",
+      width: "80px",
+      align: "center",
+      render: (_, row) =>
+        row.fkCount > 0 ? (
+          <span className="flex items-center justify-center gap-1">
+            <Link2 className="h-3 w-3" />
+            {row.fkCount}
+          </span>
+        ) : (
+          "-"
+        ),
+    },
+    {
+      key: "primaryKeys",
+      header: "Primary Keys",
+      width: "150px",
+      render: (_, row) =>
+        row.primaryKeys.length > 0 ? (
+          <span className="flex items-center gap-1 text-xs font-mono">
+            <Key className="h-3 w-3" />
+            {row.primaryKeys.join(", ")}
+          </span>
+        ) : (
+          "-"
+        ),
+    },
+    {
+      key: "description",
+      header: "Description",
+      render: (_, row) => row.description || "-",
+    },
+  ];
+
+  // Convert table to row data
+  function tableToRowData(table: DbTable): TableRowData {
+    const primaryKeys =
+      table.columns?.filter((c) => c.primaryKey).map((c) => c.name) || [];
+    return {
+      name: table.name,
+      columnCount: table.columns?.length ?? table.columnCount ?? 0,
+      fkCount: table.foreignKeys?.length ?? 0,
+      description: table.description,
+      primaryKeys,
+    };
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Summary */}
+      <DocSection
+        title="サマリー"
+        variant="info"
+        icon={<Database className="h-4 w-4" />}
+        preview={`${data.tables.length} tables, ${totalColumns} cols, ${totalFKs} FKs`}
+      >
+        <div className="flex flex-wrap gap-4 text-sm">
+          <span className="flex items-center gap-1">
+            <Database className="h-4 w-4 text-purple-500" />
+            {data.tables.length} tables
+          </span>
+          <span className="flex items-center gap-1">
+            <Layers className="h-4 w-4 text-blue-500" />
+            {totalColumns} columns
+          </span>
+          <span className="flex items-center gap-1">
+            <Link2 className="h-4 w-4 text-green-500" />
+            {totalFKs} foreign keys
+          </span>
+          <span className="text-muted-foreground">
+            ({sortedCategories.length} categories)
+          </span>
+        </div>
+      </DocSection>
+
+      {/* Categories */}
+      {sortedCategories.map(([category, tables]) => {
+        const config = getCategoryConfig(category);
+        const totalCols = tables.reduce(
+          (sum, t) => sum + (t.columns?.length ?? t.columnCount ?? 0),
+          0
+        );
+        const totalRels = tables.reduce(
+          (sum, t) => sum + (t.foreignKeys?.length ?? 0),
+          0
+        );
+
+        const rowData = tables.map(tableToRowData);
+
+        return (
+          <DocSection
+            key={category}
+            title={config.label}
+            badge={
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">{tables.length} tables</Badge>
+                <span className="text-xs text-muted-foreground">
+                  {totalCols} cols
+                  {totalRels > 0 && ` · ${totalRels} FKs`}
+                </span>
+              </div>
+            }
+            preview={tables.slice(0, 3).map(t => t.name).join(", ")}
+          >
+            <DocTable columns={tableColumns} data={rowData} />
+          </DocSection>
+        );
+      })}
+
+      {/* Diagram Link */}
+      <DocSection title="関連ページ">
+        <div className="flex flex-wrap gap-4">
+          <Link
+            href={`${urlPrefix}/diagram`}
+            className="flex items-center gap-2 text-sm text-primary hover:underline"
+          >
+            <Database className="h-4 w-4" />
+            ER Diagram (Full Screen)
+          </Link>
+        </div>
+      </DocSection>
+
+      {/* Footer */}
+      {data.generatedAt && (
+        <div className="text-sm text-muted-foreground text-right">
+          Generated: {new Date(data.generatedAt).toLocaleString("ja-JP")}
+        </div>
+      )}
+    </div>
+  );
+}

package/portal/app/db-schema/table-list.tsx

@@ -0,0 +1,247 @@
+import Link from "next/link";
+import {
+  Database,
+  Maximize2,
+  Link2,
+  Layers,
+} from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import type { DbTable, DbSchemaData } from "@/lib/types";
+import { ReactFlowErDiagram } from "@/components/reactflow-er-diagram";
+import {
+  normalizeCategory,
+  inferCategory,
+  getCategoryConfig,
+} from "@/lib/db-schema-utils";
+
+interface DbSchemaTableListProps {
+  data: DbSchemaData;
+  /** Database name for URL prefix (multi-DB mode) */
+  dbName?: string;
+}
+
+/**
+ * Database Schema Table List Component (Server Component)
+ *
+ * Displays tables grouped by category with ER diagram
+ * Used for both single-DB and per-DB pages in multi-DB mode
+ */
+export function DbSchemaTableList({ data, dbName }: DbSchemaTableListProps) {
+  // URL prefix for links
+  const urlPrefix = dbName ? `/db-schema/${encodeURIComponent(dbName)}` : "/db-schema";
+
+  // Group tables by category
+  const tablesByCategory = new Map<string, DbTable[]>();
+  for (const table of data.tables) {
+    const category = normalizeCategory(table.category) || inferCategory(table.name);
+    if (!tablesByCategory.has(category)) {
+      tablesByCategory.set(category, []);
+    }
+    tablesByCategory.get(category)!.push(table);
+  }
+
+  // Sort categories by table count
+  const sortedCategories = Array.from(tablesByCategory.entries()).sort(
+    (a, b) => b[1].length - a[1].length
+  );
+
+  // Prepare data for ER diagram
+  const drawflowTables = data.tables.map((table) => ({
+    name: table.name,
+    category: normalizeCategory(table.category) || inferCategory(table.name),
+    columns: table.columns?.map((col) => ({
+      name: col.name,
+      type: col.type.split(" ")[0],
+      primaryKey: col.primaryKey,
+    })),
+  }));
+
+  const drawflowForeignKeys: {
+    table: string;
+    column: string;
+    referencesTable: string;
+    referencesColumn: string;
+  }[] = [];
+  for (const table of data.tables) {
+    if (table.foreignKeys) {
+      for (const fk of table.foreignKeys) {
+        drawflowForeignKeys.push({
+          table: table.name,
+          column: fk.column,
+          referencesTable: fk.references.table,
+          referencesColumn: fk.references.column,
+        });
+      }
+    }
+  }
+
+  const totalColumns = data.tables.reduce(
+    (sum, t) => sum + (t.columns?.length ?? t.columnCount ?? 0),
+    0
+  );
+  const totalFKs = data.tables.reduce(
+    (sum, t) => sum + (t.foreignKeys?.length ?? 0),
+    0
+  );
+
+  // Get database info if available
+  const dbInfo = data.databases?.[0];
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <header>
+        <div className="flex items-center gap-3">
+          <div className="rounded-lg bg-purple-100 dark:bg-purple-900/30 p-2">
+            <Database className="h-6 w-6 text-purple-500" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">
+              {dbName ? (
+                <>
+                  <span className="text-muted-foreground font-normal">Database:</span>{" "}
+                  <span className="font-mono">{dbName}</span>
+                </>
+              ) : (
+                "Database Schema"
+              )}
+            </h1>
+            <p className="mt-1 text-muted-foreground">
+              {data.tables.length} tables - {totalColumns} columns - {totalFKs} relationships
+            </p>
+            {dbInfo?.description && (
+              <p className="mt-1 text-sm text-muted-foreground">{dbInfo.description}</p>
+            )}
+          </div>
+        </div>
+      </header>
+
+      {/* Stats Cards */}
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Total Tables</CardDescription>
+            <CardTitle className="text-3xl">{data.tables.length}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Total Columns</CardDescription>
+            <CardTitle className="text-3xl">{totalColumns}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Foreign Keys</CardDescription>
+            <CardTitle className="text-3xl">{totalFKs}</CardTitle>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {/* Category Summary */}
+      <section>
+        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+          <Layers className="h-5 w-5" />
+          Categories
+        </h2>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {sortedCategories.map(([category, tables]) => {
+            const config = getCategoryConfig(category);
+            const totalCols = tables.reduce(
+              (sum, t) => sum + (t.columns?.length ?? t.columnCount ?? 0),
+              0
+            );
+            const totalRels = tables.reduce(
+              (sum, t) => sum + (t.foreignKeys?.length ?? 0),
+              0
+            );
+
+            return (
+              <Card key={category} className="hover:border-primary/50 transition-colors">
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-3">
+                    <div className={`rounded-lg p-2 ${config.bgColor}`}>
+                      <Database className={`h-5 w-5 ${config.color}`} />
+                    </div>
+                    <div>
+                      <CardTitle className="text-lg">{config.label}</CardTitle>
+                      <CardDescription>
+                        {tables.length} tables - {totalCols} cols
+                        {totalRels > 0 && ` - ${totalRels} FKs`}
+                      </CardDescription>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  <div className="flex flex-wrap gap-1.5">
+                    {tables.map((table) => {
+                      const columnCount =
+                        table.columns?.length ?? table.columnCount ?? 0;
+                      const fkCount = table.foreignKeys?.length ?? 0;
+
+                      return (
+                        <Link
+                          key={table.name}
+                          href={`${urlPrefix}/${encodeURIComponent(table.name)}`}
+                          className="inline-flex items-center gap-1.5 text-xs font-mono px-2 py-1 rounded bg-muted hover:bg-muted/80 hover:text-primary transition-colors group"
+                        >
+                          <span>{table.name}</span>
+                          <span className="text-muted-foreground text-[10px]">
+                            {columnCount}
+                            {fkCount > 0 && (
+                              <Link2 className="inline h-2.5 w-2.5 ml-0.5" />
+                            )}
+                          </span>
+                        </Link>
+                      );
+                    })}
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* ER Diagram */}
+      <section>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold flex items-center gap-2">
+            <Database className="h-5 w-5" />
+            ER Diagram
+          </h2>
+          <Button asChild variant="outline" size="sm">
+            <Link href={`${urlPrefix}/diagram`}>
+              <Maximize2 className="h-4 w-4 mr-2" />
+              Full Screen
+            </Link>
+          </Button>
+        </div>
+        <Card>
+          <CardContent className="p-0">
+            <div className="h-[500px] rounded-lg overflow-hidden">
+              <ReactFlowErDiagram
+                tables={drawflowTables}
+                foreignKeys={drawflowForeignKeys}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* Footer */}
+      {data.generatedAt && (
+        <footer className="text-center text-sm text-muted-foreground">
+          Generated at {new Date(data.generatedAt).toLocaleString()}
+        </footer>
+      )}
+    </div>
+  );
+}

package/portal/app/details/[type]/[module]/[item]/item-tabs-client.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useHashTab } from "@/lib/hooks/use-hash-tab";
+
+const VALID_TABS = ["overview", "code", "tests", "related"] as const;
+type TabValue = (typeof VALID_TABS)[number];
+
+interface ItemTabsClientProps {
+  overviewContent: ReactNode;
+  codeContent: ReactNode;
+  testsContent: ReactNode;
+  relatedContent: ReactNode;
+}
+
+export function ItemTabsClient({
+  overviewContent,
+  codeContent,
+  testsContent,
+  relatedContent,
+}: ItemTabsClientProps) {
+  const { activeTab, mounted, handleTabChange } = useHashTab<TabValue>(
+    "overview",
+    VALID_TABS
+  );
+
+  // SSR placeholder to prevent hydration mismatch
+  if (!mounted) {
+    return (
+      <Tabs defaultValue="overview" className="w-full">
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="overview">概要</TabsTrigger>
+          <TabsTrigger value="code">コード</TabsTrigger>
+          <TabsTrigger value="tests">テスト</TabsTrigger>
+          <TabsTrigger value="related">関連</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview" className="mt-6">
+          {overviewContent}
+        </TabsContent>
+      </Tabs>
+    );
+  }
+
+  return (
+    <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
+      <TabsList className="grid w-full grid-cols-4">
+        <TabsTrigger value="overview">概要</TabsTrigger>
+        <TabsTrigger value="code">コード</TabsTrigger>
+        <TabsTrigger value="tests">テスト</TabsTrigger>
+        <TabsTrigger value="related">関連</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="overview" className="mt-6">
+        {overviewContent}
+      </TabsContent>
+
+      <TabsContent value="code" className="mt-6">
+        {codeContent}
+      </TabsContent>
+
+      <TabsContent value="tests" className="mt-6">
+        {testsContent}
+      </TabsContent>
+
+      <TabsContent value="related" className="mt-6">
+        {relatedContent}
+      </TabsContent>
+    </Tabs>
+  );
+}