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

package/portal/app/db-schema/[db]/[table]/page.tsx

@@ -0,0 +1,235 @@
+import Link from "next/link";
+import { AlertCircle, ArrowLeft, Database } from "lucide-react";
+import { loadDbSchema, getDbList, loadFeatureMap, loadApiTools } from "@/lib/data-loader";
+import { TableDetail } from "../../table-detail";
+import { TableDetailDocument } from "../../table-detail-document";
+import { Button } from "@/components/ui/button";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { getPortalFormat } from "@/lib/format";
+
+export const dynamic = "force-static";
+export const dynamicParams = false;
+
+/**
+ * Generate static paths for all database/table combinations
+ */
+export async function generateStaticParams() {
+  const dbList = await getDbList();
+  const params: { db: string; table: string }[] = [];
+
+  for (const db of dbList) {
+    const dbData = await loadDbSchema(db.name);
+    if (dbData) {
+      for (const table of dbData.tables) {
+        params.push({
+          db: encodeURIComponent(db.name),
+          table: encodeURIComponent(table.name),
+        });
+      }
+    }
+  }
+
+  return params;
+}
+
+interface PageProps {
+  params: Promise<{ db: string; table: string }>;
+}
+
+/**
+ * Table detail page for multi-DB setups
+ */
+export default async function DbTableDetailPage({ params }: PageProps) {
+  const { db: dbParam, table: tableParam } = await params;
+  const dbName = decodeURIComponent(dbParam);
+  const tableName = decodeURIComponent(tableParam);
+
+  const [data, featureMap, apiTools] = await Promise.all([
+    loadDbSchema(dbName),
+    loadFeatureMap(),
+    loadApiTools(),
+  ]);
+  const format = getPortalFormat();
+
+  if (!data) {
+    return (
+      <div className="space-y-6">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/db-schema">DB Schema</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href={`/db-schema/${encodeURIComponent(dbName)}`}>{dbName}</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{tableName}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        <div className="flex flex-col items-center justify-center rounded-lg border bg-card p-12 text-center">
+          <div className="rounded-full bg-muted p-3">
+            <AlertCircle className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <h3 className="mt-4 text-lg font-semibold">Database not found: {dbName}</h3>
+          <Button asChild variant="outline" className="mt-4">
+            <Link href="/db-schema">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Databases
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const table = data.tables.find((t) => t.name === tableName);
+  if (!table) {
+    return (
+      <div className="space-y-6">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/db-schema">DB Schema</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href={`/db-schema/${encodeURIComponent(dbName)}`}>{dbName}</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{tableName}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        <div className="flex flex-col items-center justify-center rounded-lg border bg-card p-12 text-center">
+          <div className="rounded-full bg-muted p-3">
+            <AlertCircle className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <h3 className="mt-4 text-lg font-semibold">Table not found: {tableName}</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            in database: {dbName}
+          </p>
+          <Button asChild variant="outline" className="mt-4">
+            <Link href={`/db-schema/${encodeURIComponent(dbName)}`}>
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to {dbName}
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const urlPrefix = `/db-schema/${encodeURIComponent(dbName)}`;
+
+  // Document format
+  if (format === "document") {
+    return (
+      <div className="space-y-6">
+        {/* Breadcrumb */}
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/db-schema">DB Schema</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href={`/db-schema/${encodeURIComponent(dbName)}`}>{dbName}</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{tableName}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        {/* 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">
+                <span className="font-mono">{tableName}</span>
+              </h1>
+              {table.description && (
+                <p className="mt-1 text-muted-foreground">{table.description}</p>
+              )}
+            </div>
+          </div>
+        </header>
+
+        {/* Table Detail - Document Format */}
+        <TableDetailDocument
+          table={table}
+          allTables={data.tables}
+          featureMap={featureMap}
+          apiTools={apiTools}
+          urlPrefix={urlPrefix}
+          dbName={dbName}
+        />
+      </div>
+    );
+  }
+
+  // Card format (default)
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href="/db-schema">DB Schema</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href={`/db-schema/${encodeURIComponent(dbName)}`}>{dbName}</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>{tableName}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      {/* Table Detail */}
+      <TableDetail
+        table={table}
+        allTables={data.tables}
+        featureMap={featureMap}
+        apiTools={apiTools}
+        urlPrefix={urlPrefix}
+        dbName={dbName}
+      />
+    </div>
+  );
+}

package/portal/app/db-schema/[db]/diagram/page.tsx

@@ -0,0 +1,81 @@
+import Link from "next/link";
+import { AlertCircle, ArrowLeft } from "lucide-react";
+import { loadDbSchema, getDbList } from "@/lib/data-loader";
+import { ErDiagramClient } from "../../diagram/client";
+import { Button } from "@/components/ui/button";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+export const dynamic = "force-static";
+export const dynamicParams = false;
+
+/**
+ * Generate static paths for all database diagrams
+ */
+export async function generateStaticParams() {
+  const dbList = await getDbList();
+  return dbList.map((db) => ({
+    db: encodeURIComponent(db.name),
+  }));
+}
+
+interface PageProps {
+  params: Promise<{ db: string }>;
+}
+
+/**
+ * ER Diagram page for a specific database (multi-DB mode)
+ */
+export default async function DbDiagramPage({ params }: PageProps) {
+  const { db: dbParam } = await params;
+  const dbName = decodeURIComponent(dbParam);
+
+  const data = await loadDbSchema(dbName);
+
+  if (!data || data.tables.length === 0) {
+    return (
+      <div className="space-y-6">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/db-schema">DB Schema</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href={`/db-schema/${encodeURIComponent(dbName)}`}>{dbName}</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Diagram</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        <div className="flex flex-col items-center justify-center rounded-lg border bg-card p-12 text-center">
+          <div className="rounded-full bg-muted p-3">
+            <AlertCircle className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <h3 className="mt-4 text-lg font-semibold">No schema data for: {dbName}</h3>
+          <Button asChild variant="outline" className="mt-4">
+            <Link href="/db-schema">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Databases
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return <ErDiagramClient data={data} dbName={dbName} />;
+}

package/portal/app/db-schema/[db]/page.tsx

@@ -0,0 +1,148 @@
+import Link from "next/link";
+import { AlertCircle, ArrowLeft, Database } from "lucide-react";
+import { loadDbSchema, getDbList } from "@/lib/data-loader";
+import { DbSchemaTableList } from "../table-list";
+import { DbSchemaTableListDocument } from "../table-list-document";
+import { Button } from "@/components/ui/button";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { getPortalFormat } from "@/lib/format";
+
+export const dynamic = "force-static";
+export const dynamicParams = false;
+
+/**
+ * Generate static paths for all databases
+ */
+export async function generateStaticParams() {
+  const dbList = await getDbList();
+  return dbList.map((db) => ({
+    db: encodeURIComponent(db.name),
+  }));
+}
+
+interface PageProps {
+  params: Promise<{ db: string }>;
+}
+
+/**
+ * Database-specific table list page
+ *
+ * Shows tables for a specific database in multi-DB setups
+ */
+export default async function DbTableListPage({ params }: PageProps) {
+  const { db: dbParam } = await params;
+  const dbName = decodeURIComponent(dbParam);
+
+  const data = await loadDbSchema(dbName);
+  const format = getPortalFormat();
+
+  if (!data || data.tables.length === 0) {
+    return (
+      <div className="space-y-6">
+        {/* Breadcrumb */}
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/db-schema">DB Schema</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{dbName}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        <div className="flex flex-col items-center justify-center rounded-lg border bg-card p-12 text-center">
+          <div className="rounded-full bg-muted p-3">
+            <AlertCircle className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <h3 className="mt-4 text-lg font-semibold">Database not found: {dbName}</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            The database may have been renamed or removed.
+          </p>
+          <Button asChild variant="outline" className="mt-4">
+            <Link href="/db-schema">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Databases
+            </Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Document format
+  if (format === "document") {
+    return (
+      <div className="space-y-6">
+        {/* Breadcrumb */}
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/db-schema">DB Schema</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{dbName}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        {/* 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">
+                <span className="text-muted-foreground font-normal">Database:</span>{" "}
+                <span className="font-mono">{dbName}</span>
+              </h1>
+              <p className="mt-1 text-muted-foreground">
+                {data.tables.length} tables
+              </p>
+            </div>
+          </div>
+        </header>
+
+        {/* Table List - Document Format */}
+        <DbSchemaTableListDocument data={data} dbName={dbName} />
+      </div>
+    );
+  }
+
+  // Card format (default)
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href="/db-schema">DB Schema</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>{dbName}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      {/* Table List */}
+      <DbSchemaTableList data={data} dbName={dbName} />
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+/**
+ * DB Schema Landing Page - ドキュメント形式表示
+ *
+ * データベース一覧をテーブル形式で表示
+ */
+
+import Link from "next/link";
+import { Database, Server, ArrowRight } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { DocSection, DocTable, type DocTableColumn } from "@/components/document";
+
+interface DbInfo {
+  name: string;
+  description?: string;
+  tableCount: number;
+}
+
+interface DbSchemaDocumentProps {
+  dbList: DbInfo[];
+  totalTables: number;
+  generatedAt?: string;
+}
+
+export function DbSchemaDocument({
+  dbList,
+  totalTables,
+  generatedAt,
+}: DbSchemaDocumentProps) {
+  // Database list columns
+  const dbColumns: DocTableColumn<DbInfo>[] = [
+    {
+      key: "name",
+      header: "Database",
+      width: "200px",
+      render: (_, row) => (
+        <Link
+          href={`/db-schema/${encodeURIComponent(row.name)}`}
+          className="font-medium text-primary hover:underline flex items-center gap-1 font-mono"
+        >
+          {row.name}
+          <ArrowRight className="h-3 w-3" />
+        </Link>
+      ),
+    },
+    {
+      key: "tableCount",
+      header: "Tables",
+      width: "100px",
+      align: "right",
+      render: (_, row) => (
+        <Badge variant="secondary">{row.tableCount}</Badge>
+      ),
+    },
+    {
+      key: "description",
+      header: "Description",
+      render: (_, row) => row.description || "-",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Generated timestamp */}
+      {generatedAt && (
+        <div className="text-sm text-muted-foreground text-right">
+          Generated: {new Date(generatedAt).toLocaleString("ja-JP")}
+        </div>
+      )}
+
+      {/* Summary */}
+      <DocSection
+        title="サマリー"
+        variant="info"
+        icon={<Server className="h-4 w-4" />}
+        preview={`${dbList.length} DBs, ${totalTables} tables`}
+      >
+        <div className="flex flex-wrap gap-4 text-sm">
+          <span className="flex items-center gap-1">
+            <Server className="h-4 w-4 text-purple-500" />
+            {dbList.length === 1 ? "1 database" : `${dbList.length} databases`}
+          </span>
+          <span className="flex items-center gap-1">
+            <Database className="h-4 w-4 text-purple-500" />
+            {totalTables} tables total
+          </span>
+        </div>
+      </DocSection>
+
+      {/* Database List */}
+      <DocSection
+        title="Databases"
+        variant="primary"
+        badge={<Badge variant="outline">{dbList.length}</Badge>}
+        preview={dbList.slice(0, 3).map(d => d.name).join(", ")}
+      >
+        <DocTable columns={dbColumns} data={dbList} />
+      </DocSection>
+    </div>
+  );
+}