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

package/portal/app/apps/[appId]/[type]/[module]/page.tsx

@@ -0,0 +1,373 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import {
+  Monitor,
+  Component,
+  Zap,
+  Database,
+  Package,
+  ArrowLeft,
+  FileCode,
+  TestTube2,
+  ChevronRight,
+} from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { loadFeatureMap, loadDetails, loadApplications } from "@/lib/data-loader";
+import type {
+  FeatureMapData,
+  ScreenItem,
+  ComponentItem,
+  ActionItem,
+  ModuleItem,
+  TableItem,
+  DetailItem,
+} from "@/lib/types";
+
+export const dynamicParams = false;
+
+type LayerType = "screens" | "components" | "actions" | "modules" | "tables";
+
+interface LayerConfig {
+  key: LayerType;
+  singular: string;
+  label: string;
+  icon: typeof Monitor;
+  color: string;
+  bgColor: string;
+}
+
+const layerConfigs: Record<LayerType, LayerConfig> = {
+  screens: {
+    key: "screens",
+    singular: "screen",
+    label: "Screens",
+    icon: Monitor,
+    color: "text-accent-blue",
+    bgColor: "bg-accent-blue/10",
+  },
+  components: {
+    key: "components",
+    singular: "component",
+    label: "Components",
+    icon: Component,
+    color: "text-accent-green",
+    bgColor: "bg-accent-green/10",
+  },
+  actions: {
+    key: "actions",
+    singular: "action",
+    label: "Actions",
+    icon: Zap,
+    color: "text-accent-yellow",
+    bgColor: "bg-accent-yellow/10",
+  },
+  modules: {
+    key: "modules",
+    singular: "module",
+    label: "Modules",
+    icon: Package,
+    color: "text-accent-orange",
+    bgColor: "bg-accent-orange/10",
+  },
+  tables: {
+    key: "tables",
+    singular: "table",
+    label: "Tables",
+    icon: Database,
+    color: "text-accent-purple",
+    bgColor: "bg-accent-purple/10",
+  },
+};
+
+interface PageProps {
+  params: Promise<{ appId: string; type: string; module: string }>;
+}
+
+/**
+ * Generate static params for all app/type/module combinations
+ */
+export async function generateStaticParams(): Promise<
+  { appId: string; type: string; module: string }[]
+> {
+  const [data, applications] = await Promise.all([
+    loadFeatureMap(),
+    loadApplications(),
+  ]);
+
+  if (!data || !applications?.apps) return [];
+
+  const params: { appId: string; type: string; module: string }[] = [];
+  const layers: LayerType[] = ["screens", "components", "actions", "modules", "tables"];
+
+  // For each app
+  for (const app of applications.apps) {
+    // Skip API type apps - they don't have feature map items
+    if (app.type === "api") continue;
+
+    const appNameForFilter = app.name.replace(" アプリ", "");
+
+    // Check each module
+    for (const [moduleName, group] of Object.entries(data.features)) {
+      for (const layer of layers) {
+        const items = group[layer] || [];
+        // Only add if this app has items in this module/layer
+        const hasAppItems = items.some((item: ScreenItem | ComponentItem | ActionItem | ModuleItem | TableItem) => item.app === appNameForFilter);
+        if (hasAppItems) {
+          params.push({ appId: app.id, type: layer, module: moduleName });
+        }
+      }
+    }
+
+    // Check uncategorized
+    for (const layer of layers) {
+      const items = data.uncategorized[layer] || [];
+      const hasAppItems = items.some((item: ScreenItem | ComponentItem | ActionItem | ModuleItem | TableItem) => item.app === appNameForFilter);
+      if (hasAppItems) {
+        params.push({ appId: app.id, type: layer, module: "Uncategorized" });
+      }
+    }
+  }
+
+  return params;
+}
+
+function getModuleItems(
+  data: FeatureMapData,
+  module: string,
+  type: LayerType,
+  appName: string
+): (ScreenItem | ComponentItem | ActionItem | ModuleItem | TableItem)[] {
+  const items = module === "Uncategorized"
+    ? data.uncategorized[type] || []
+    : data.features[module]?.[type] || [];
+
+  // Filter by app
+  return items.filter((item) => item.app === appName);
+}
+
+/**
+ * Item List Card Component
+ */
+function ItemListCard({
+  item,
+  type,
+  module,
+  appId,
+  config,
+  detail,
+}: {
+  item: ScreenItem | ComponentItem | ActionItem | ModuleItem | TableItem;
+  type: LayerType;
+  module: string;
+  appId: string;
+  config: LayerConfig;
+  detail?: DetailItem;
+}) {
+  const Icon = config.icon;
+  const hasTests = (detail?.testCoverage?.totalTests || 0) > 0;
+
+  return (
+    <Link href={`/apps/${appId}/${type}/${encodeURIComponent(module)}/${encodeURIComponent(item.name)}`}>
+      <Card className="transition-all hover:border-primary/50 hover:shadow-md cursor-pointer h-full">
+        <CardHeader className="pb-2">
+          <div className="flex items-start gap-3">
+            <div className={`rounded-md p-2 mt-0.5 ${config.bgColor}`}>
+              <Icon className={`h-4 w-4 ${config.color}`} />
+            </div>
+            <div className="flex-1 min-w-0">
+              <CardTitle className="text-base font-mono group-hover:text-primary transition-colors flex items-center gap-2">
+                {item.name}
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              </CardTitle>
+              {item.description && (
+                <CardDescription className="mt-1 line-clamp-2">
+                  {item.description}
+                </CardDescription>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            {"path" in item && item.path && (
+              <span className="flex items-center gap-1">
+                <FileCode className="h-3.5 w-3.5" />
+                <code className="truncate max-w-[200px]">{item.path}</code>
+              </span>
+            )}
+            <span className="flex items-center gap-1">
+              <TestTube2 className={`h-3.5 w-3.5 ${hasTests ? 'text-accent-green' : ''}`} />
+              {detail?.testCoverage?.totalTests || 0} テスト
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+
+export default async function AppModulePage({ params }: PageProps) {
+  const { appId, type, module } = await params;
+  const decodedModule = decodeURIComponent(module);
+  const layerType = type as LayerType;
+
+  // Validate layer type
+  if (!layerConfigs[layerType]) {
+    notFound();
+  }
+
+  const config = layerConfigs[layerType];
+
+  const [data, details, applications] = await Promise.all([
+    loadFeatureMap(),
+    loadDetails(),
+    loadApplications(),
+  ]);
+
+  // Find the app configuration
+  const app = applications?.apps?.find((a) => a.id === appId);
+  if (!app) {
+    notFound();
+  }
+
+  const appNameForFilter = app.name.replace(" アプリ", "");
+
+  if (!data) {
+    return (
+      <div className="space-y-8">
+        <header>
+          <h1 className="text-3xl font-bold tracking-tight">{decodedModule}</h1>
+          <p className="mt-2 text-destructive">No feature map data available.</p>
+        </header>
+      </div>
+    );
+  }
+
+  // Get items filtered by app
+  const items = getModuleItems(data, decodedModule, layerType, appNameForFilter);
+
+  if (items.length === 0) {
+    notFound();
+  }
+
+  // Get detail for an item
+  const getDetailForItem = (itemName: string): DetailItem | undefined => {
+    if (!details) return undefined;
+
+    // First try exact key match (type/module/name)
+    const exactKey = `${config.singular}/${decodedModule}/${itemName}`;
+    if (details.details[exactKey]) {
+      return details.details[exactKey];
+    }
+
+    // Search by item name across all modules
+    const prefix = `${config.singular}/`;
+    const suffix = `/${itemName}`;
+
+    for (const [key, detail] of Object.entries(details.details)) {
+      if (key.startsWith(prefix) && key.endsWith(suffix)) {
+        return detail;
+      }
+    }
+
+    return undefined;
+  };
+
+  // Stats
+  const testedItems = items.filter((item) => {
+    const detail = getDetailForItem(item.name);
+    return (detail?.testCoverage?.totalTests || 0) > 0;
+  }).length;
+  const totalTests = items.reduce((sum, item) => {
+    const detail = getDetailForItem(item.name);
+    return sum + (detail?.testCoverage?.totalTests || 0);
+  }, 0);
+
+  const Icon = config.icon;
+
+  return (
+    <div className="space-y-8">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm">
+        <Link
+          href={`/apps/${appId}/feature-map`}
+          className="flex items-center gap-1 text-muted-foreground hover:text-primary"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          {app.name} Feature Map
+        </Link>
+        <span className="text-muted-foreground">/</span>
+        <span className="text-muted-foreground">{config.label}</span>
+        <span className="text-muted-foreground">/</span>
+        <span className="font-medium">{decodedModule}</span>
+      </div>
+
+      {/* Header */}
+      <header className="flex items-start gap-4">
+        <div className={`rounded-lg p-3 ${config.bgColor}`}>
+          <Icon className={`h-8 w-8 ${config.color}`} />
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">{decodedModule}</h1>
+          <div className="mt-2 flex items-center gap-4">
+            <Badge variant="secondary">
+              {items.length} {config.label.toLowerCase()}
+            </Badge>
+            <Badge variant="outline" className={config.color}>
+              {config.label}
+            </Badge>
+          </div>
+        </div>
+      </header>
+
+      {/* Stats */}
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>アイテム数</CardDescription>
+            <CardTitle className="text-3xl">{items.length}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>テスト付きアイテム</CardDescription>
+            <CardTitle className="text-3xl">{testedItems}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>総テスト数</CardDescription>
+            <CardTitle className="text-3xl">{totalTests}</CardTitle>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {/* Items List - No app grouping needed since we're already in app context */}
+      <section>
+        <h2 className="mb-4 text-xl font-semibold">
+          {config.label} in this module
+        </h2>
+        <div className="grid gap-4 md:grid-cols-2">
+          {items.map((item) => (
+            <ItemListCard
+              key={item.name}
+              item={item}
+              type={layerType}
+              module={decodedModule}
+              appId={appId}
+              config={config}
+              detail={getDetailForItem(item.name)}
+            />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

package/portal/app/apps/[appId]/feature-map/feature-map-app-document.tsx

@@ -0,0 +1,298 @@
+/**
+ * App Feature Map - ドキュメント形式表示
+ *
+ * アプリ別の機能マップをテーブル・アコーディオン形式で表示
+ */
+
+import Link from "next/link";
+import {
+  Monitor,
+  Component,
+  Zap,
+  Database,
+  Package,
+  FlaskConical,
+  ArrowRight,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { DocSection, DocTable, type DocTableColumn } from "@/components/document";
+import type {
+  FeatureMapData,
+  FeatureGroup,
+  ScreenItem,
+  ComponentItem,
+  ActionItem,
+  TableItem,
+} from "@/lib/types";
+
+interface ModuleCoverage {
+  totalTests: number;
+  testedItems: number;
+  totalItems: number;
+  averageCoverage: number;
+}
+
+interface FeatureMapAppDocumentProps {
+  data: FeatureMapData;
+  moduleCoverages: Record<string, ModuleCoverage>;
+  appId: string;
+}
+
+/**
+ * モジュールセクション
+ */
+function ModuleSection({
+  moduleName,
+  group,
+  coverage,
+  appId,
+}: {
+  moduleName: string;
+  group: FeatureGroup;
+  coverage?: ModuleCoverage;
+  appId: string;
+}) {
+  const screenCount = group.screens?.length || 0;
+  const componentCount = group.components?.length || 0;
+  const actionCount = group.actions?.length || 0;
+  const tableCount = group.tables?.length || 0;
+  const totalCount = screenCount + componentCount + actionCount + tableCount;
+
+  if (totalCount === 0) return null;
+
+  // Screen columns
+  const screenColumns: DocTableColumn<ScreenItem>[] = [
+    {
+      key: "name",
+      header: "Name",
+      width: "200px",
+      render: (_, row) => (
+        <Link
+          href={`/details/screens/${moduleName}/${row.name}`}
+          className="font-medium text-primary hover:underline"
+        >
+          {row.name}
+        </Link>
+      ),
+    },
+    { key: "path", header: "Path" },
+    {
+      key: "route",
+      header: "Route",
+      width: "150px",
+      render: (_, row) => row.route || "-",
+    },
+  ];
+
+  // Component columns
+  const componentColumns: DocTableColumn<ComponentItem>[] = [
+    {
+      key: "name",
+      header: "Name",
+      width: "200px",
+      render: (_, row) => (
+        <Link
+          href={`/details/components/${moduleName}/${row.name}`}
+          className="font-medium text-primary hover:underline"
+        >
+          {row.name}
+        </Link>
+      ),
+    },
+    { key: "path", header: "Path" },
+    {
+      key: "props",
+      header: "Props",
+      width: "80px",
+      align: "center",
+      render: (_, row) => row.props?.length || "-",
+    },
+  ];
+
+  // Action columns
+  const actionColumns: DocTableColumn<ActionItem>[] = [
+    {
+      key: "name",
+      header: "Name",
+      width: "200px",
+      render: (_, row) => (
+        <Link
+          href={`/details/actions/${moduleName}/${row.name}`}
+          className="font-medium text-primary hover:underline font-mono text-sm"
+        >
+          {row.name}
+        </Link>
+      ),
+    },
+    {
+      key: "dbTables",
+      header: "DB Tables",
+      render: (_, row) => {
+        const tables = row.dbTables?.join(", ");
+        return tables || "-";
+      },
+    },
+    {
+      key: "params",
+      header: "Params",
+      width: "80px",
+      align: "center",
+      render: (_, row) => row.params?.length || "-",
+    },
+  ];
+
+  // Table columns
+  const tableColumns: DocTableColumn<TableItem>[] = [
+    {
+      key: "name",
+      header: "Name",
+      width: "200px",
+      render: (_, row) => (
+        <Link
+          href={`/db-schema/database/${row.name}`}
+          className="font-medium text-primary hover:underline font-mono text-sm"
+        >
+          {row.name}
+        </Link>
+      ),
+    },
+    {
+      key: "columns",
+      header: "Columns",
+      width: "80px",
+      align: "center",
+      render: (_, row) => row.columns?.length || "-",
+    },
+  ];
+
+  return (
+    <DocSection
+      title={moduleName}
+      badge={
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">{totalCount} items</Badge>
+          {coverage && coverage.totalTests > 0 && (
+            <Badge variant="secondary" className="gap-1">
+              <FlaskConical className="h-3 w-3" />
+              {coverage.totalTests}
+            </Badge>
+          )}
+        </div>
+      }
+      preview={`${screenCount} screens, ${componentCount} components, ${actionCount} actions`}
+    >
+      <div className="space-y-6">
+        {/* Screens */}
+        {screenCount > 0 && (
+          <div>
+            <h4 className="flex items-center gap-2 text-sm font-medium mb-2">
+              <Monitor className="h-4 w-4 text-blue-500" />
+              Screens ({screenCount})
+            </h4>
+            <DocTable columns={screenColumns} data={group.screens || []} />
+          </div>
+        )}
+
+        {/* Components */}
+        {componentCount > 0 && (
+          <div>
+            <h4 className="flex items-center gap-2 text-sm font-medium mb-2">
+              <Component className="h-4 w-4 text-green-500" />
+              Components ({componentCount})
+            </h4>
+            <DocTable columns={componentColumns} data={group.components || []} />
+          </div>
+        )}
+
+        {/* Actions */}
+        {actionCount > 0 && (
+          <div>
+            <h4 className="flex items-center gap-2 text-sm font-medium mb-2">
+              <Zap className="h-4 w-4 text-yellow-500" />
+              Server Actions ({actionCount})
+            </h4>
+            <DocTable columns={actionColumns} data={group.actions || []} />
+          </div>
+        )}
+
+        {/* Tables */}
+        {tableCount > 0 && (
+          <div>
+            <h4 className="flex items-center gap-2 text-sm font-medium mb-2">
+              <Database className="h-4 w-4 text-purple-500" />
+              Tables ({tableCount})
+            </h4>
+            <DocTable columns={tableColumns} data={group.tables || []} />
+          </div>
+        )}
+      </div>
+    </DocSection>
+  );
+}
+
+export function FeatureMapAppDocument({
+  data,
+  moduleCoverages,
+  appId,
+}: FeatureMapAppDocumentProps) {
+  const moduleNames = Object.keys(data.features).sort();
+
+  // Calculate totals
+  let totalScreens = 0;
+  let totalComponents = 0;
+  let totalActions = 0;
+  let totalTables = 0;
+
+  for (const group of Object.values(data.features)) {
+    totalScreens += group.screens?.length || 0;
+    totalComponents += group.components?.length || 0;
+    totalActions += group.actions?.length || 0;
+    totalTables += group.tables?.length || 0;
+  }
+
+  const totalItems = totalScreens + totalComponents + totalActions + totalTables;
+
+  return (
+    <div className="space-y-6">
+      {/* Summary */}
+      <div className="flex flex-wrap gap-4 text-sm">
+        <span className="flex items-center gap-1">
+          <Monitor className="h-4 w-4 text-blue-500" /> {totalScreens} Screens
+        </span>
+        <span className="flex items-center gap-1">
+          <Component className="h-4 w-4 text-green-500" /> {totalComponents} Components
+        </span>
+        <span className="flex items-center gap-1">
+          <Zap className="h-4 w-4 text-yellow-500" /> {totalActions} Actions
+        </span>
+        <span className="flex items-center gap-1">
+          <Database className="h-4 w-4 text-purple-500" /> {totalTables} Tables
+        </span>
+        <span className="text-muted-foreground">
+          ({moduleNames.length} modules, {totalItems} total items)
+        </span>
+      </div>
+
+      {/* Modules */}
+      {moduleNames.map((moduleName) => (
+        <ModuleSection
+          key={moduleName}
+          moduleName={moduleName}
+          group={data.features[moduleName]}
+          coverage={moduleCoverages[moduleName]}
+          appId={appId}
+        />
+      ))}
+
+      {/* Uncategorized */}
+      {data.uncategorized && (
+        <ModuleSection
+          moduleName="Uncategorized"
+          group={data.uncategorized}
+          coverage={moduleCoverages["Uncategorized"]}
+          appId={appId}
+        />
+      )}
+    </div>
+  );
+}