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

package/portal/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/portal/next.config.ts

@@ -0,0 +1,21 @@
+import type { NextConfig } from "next";
+import path from "path";
+
+const nextConfig: NextConfig = {
+  output: "export",
+  distDir: process.env.DIST_DIR || "out",
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
+  // Base path can be configured for deployment
+  basePath: process.env.BASE_PATH || "",
+  env: {
+    PORTAL_DATA_DIR: process.env.PORTAL_DATA_DIR || "./data",
+    PROJECT_NAME: process.env.PROJECT_NAME || "Documentation",
+  },
+  // Fix workspace root warning
+  outputFileTracingRoot: path.join(__dirname, "./"),
+};
+
+export default nextConfig;

package/portal/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@shirokuma-docs/portal",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@types/dagre": "^0.7.53",
+    "@xyflow/react": "^12.10.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "dagre": "^0.8.5",
+    "drawflow": "^0.0.60",
+    "elkjs": "^0.11.0",
+    "highlight.js": "^11.11.1",
+    "lucide-react": "^0.468.0",
+    "mermaid": "^11.12.2",
+    "next": "^15.5.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^2.5.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.2"
+  }
+}

package/portal/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/portal/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "next-env.d.ts",
+    "out/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/portal/types/drawflow.d.ts

@@ -0,0 +1,80 @@
+declare module "drawflow" {
+  interface DrawflowNode {
+    id: number;
+    name: string;
+    data: Record<string, unknown>;
+    class: string;
+    html: string;
+    typenode: boolean;
+    inputs: Record<string, { connections: Array<{ node: string; input: string }> }>;
+    outputs: Record<string, { connections: Array<{ node: string; output: string }> }>;
+    pos_x: number;
+    pos_y: number;
+  }
+
+  interface DrawflowData {
+    drawflow: {
+      [module: string]: {
+        data: Record<string, DrawflowNode>;
+      };
+    };
+  }
+
+  class Drawflow {
+    constructor(container: HTMLElement, render?: unknown, parent?: unknown);
+
+    drawflow: DrawflowData;
+    reroute: boolean;
+    reroute_fix_curvature: boolean;
+    force_first_input: boolean;
+    editor_mode: "edit" | "view" | "fixed";
+    zoom: number;
+    zoom_max: number;
+    zoom_min: number;
+
+    start(): void;
+    clear(): void;
+
+    addNode(
+      name: string,
+      inputs: number,
+      outputs: number,
+      posX: number,
+      posY: number,
+      className: string,
+      data: Record<string, unknown>,
+      html: string,
+      typenode?: boolean
+    ): number;
+
+    removeNodeId(id: string): void;
+
+    addConnection(
+      nodeOutput: number,
+      nodeInput: number,
+      outputClass: string,
+      inputClass: string
+    ): void;
+
+    removeSingleConnection(
+      nodeOutput: number,
+      nodeInput: number,
+      outputClass: string,
+      inputClass: string
+    ): void;
+
+    zoom_in(): void;
+    zoom_out(): void;
+    zoom_reset(): void;
+
+    on(
+      event: string,
+      callback: (...args: unknown[]) => void
+    ): void;
+
+    import(data: DrawflowData): void;
+    export(): DrawflowData;
+  }
+
+  export default Drawflow;
+}

package/templates/README.md

@@ -0,0 +1,73 @@
+# shirokuma-docs テンプレート
+
+## ファイル一覧
+
+| ファイル | 説明 |
+|----------|------|
+| `dark-theme.css` | ダークテーマの共通 CSS |
+
+## CSS カスタマイズ
+
+`dark-theme.css` には以下の CSS 変数が定義されています。
+設定ファイルやコマンドオプションでカスタマイズ可能です。
+
+### 背景色
+
+```css
+--bg-color: #0a0a0a;      /* メイン背景 */
+--card-bg: #141414;       /* カード背景 */
+--code-bg: #1e1e1e;       /* コードブロック背景 */
+```
+
+### テキスト
+
+```css
+--text-primary: #fafafa;    /* メインテキスト */
+--text-secondary: #a1a1aa;  /* セカンダリテキスト */
+```
+
+### アクセントカラー
+
+```css
+--accent-blue: #3b82f6;
+--accent-green: #22c55e;
+--accent-purple: #a855f7;
+--accent-orange: #f97316;
+--accent-pink: #ec4899;
+```
+
+## テンプレート構文
+
+HTML テンプレートは Handlebars 形式をサポートしています。
+
+### 変数展開
+
+```handlebars
+{{projectName}}
+{{projectDescription}}
+```
+
+### 条件分岐
+
+```handlebars
+{{#if hasApi}}
+  <a href="/api">API ドキュメント</a>
+{{/if}}
+```
+
+### ループ
+
+```handlebars
+{{#each links}}
+  <a href="{{url}}">{{name}}</a>
+{{/each}}
+```
+
+## カスタムテンプレート
+
+プロジェクト内に `docs/templates/` ディレクトリを作成し、
+以下のファイルを配置することでカスタマイズできます。
+
+- `portal.html` - ポータルページ
+- `viewer.html` - ドキュメントビューア
+- `test-cases.html` - テストケース一覧

package/templates/coverage.html

@@ -0,0 +1,367 @@
+{{!--
+  Coverage Dashboard HTML Template
+
+  Variables:
+  - projectName: プロジェクト名
+  - generatedAt: 生成日時
+  - total: 合計カバレッジ {lines, statements, functions, branches}
+  - files: ファイル一覧 [{path, lines, statements, functions, branches}]
+
+  Helpers:
+  - coverageStatus(pct): 'high' | 'medium' | 'low'
+--}}
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Coverage Dashboard - {{projectName}}</title>
+  <style>
+    :root {
+      --bg-color: #0a0a0a;
+      --card-bg: #141414;
+      --border-color: #262626;
+      --text-primary: #fafafa;
+      --text-secondary: #a1a1aa;
+      --accent-green: #22c55e;
+      --accent-orange: #f97316;
+      --accent-red: #ef4444;
+      --accent-blue: #3b82f6;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-color);
+      color: var(--text-primary);
+      min-height: 100vh;
+      line-height: 1.6;
+    }
+
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    header {
+      text-align: center;
+      margin-bottom: 3rem;
+    }
+
+    header h1 {
+      font-size: 2rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .subtitle {
+      color: var(--text-secondary);
+    }
+
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      margin-bottom: 3rem;
+    }
+
+    .summary-card {
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      padding: 1.5rem;
+      text-align: center;
+    }
+
+    .summary-card h3 {
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 0.5rem;
+    }
+
+    .summary-card .pct {
+      font-size: 2.5rem;
+      font-weight: 700;
+      line-height: 1;
+      margin-bottom: 0.5rem;
+    }
+
+    .summary-card .details {
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+    }
+
+    .progress-bar {
+      height: 8px;
+      background: var(--border-color);
+      border-radius: 4px;
+      overflow: hidden;
+      margin-top: 0.75rem;
+    }
+
+    .progress-bar-fill {
+      height: 100%;
+      border-radius: 4px;
+    }
+
+    .high { color: var(--accent-green); }
+    .high .progress-bar-fill { background: var(--accent-green); }
+    .medium { color: var(--accent-orange); }
+    .medium .progress-bar-fill { background: var(--accent-orange); }
+    .low { color: var(--accent-red); }
+    .low .progress-bar-fill { background: var(--accent-red); }
+
+    .section-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: var(--text-secondary);
+    }
+
+    .table-container {
+      overflow-x: auto;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      background: var(--card-bg);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+
+    th, td {
+      padding: 1rem;
+      text-align: left;
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    th {
+      background: var(--bg-color);
+      font-weight: 600;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      cursor: pointer;
+    }
+
+    th:hover {
+      color: var(--text-primary);
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+
+    tr:hover {
+      background: rgba(255,255,255,0.02);
+    }
+
+    .file-path {
+      font-family: 'SFMono-Regular', Consolas, monospace;
+      font-size: 0.875rem;
+      word-break: break-all;
+    }
+
+    .metric {
+      text-align: center;
+      font-weight: 500;
+    }
+
+    footer {
+      text-align: center;
+      margin-top: 3rem;
+      padding-top: 2rem;
+      border-top: 1px solid var(--border-color);
+      color: var(--text-secondary);
+      font-size: 0.875rem;
+    }
+
+    .filter-bar {
+      margin-bottom: 1rem;
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .filter-input {
+      flex: 1;
+      padding: 0.75rem 1rem;
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      color: var(--text-primary);
+      font-size: 0.875rem;
+    }
+
+    .filter-input:focus {
+      outline: none;
+      border-color: var(--accent-blue);
+    }
+
+    .filter-select {
+      padding: 0.75rem 1rem;
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      color: var(--text-primary);
+      font-size: 0.875rem;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>Coverage Dashboard</h1>
+      <p class="subtitle">{{projectName}} - {{files.length}} files analyzed</p>
+    </header>
+
+    <div class="summary-grid">
+      <div class="summary-card {{total.lines.status}}">
+        <h3>Lines</h3>
+        <div class="pct">{{total.lines.pct}}%</div>
+        <div class="details">{{total.lines.covered}} / {{total.lines.total}}</div>
+        <div class="progress-bar">
+          <div class="progress-bar-fill" style="width: {{total.lines.pct}}%"></div>
+        </div>
+      </div>
+      <div class="summary-card {{total.statements.status}}">
+        <h3>Statements</h3>
+        <div class="pct">{{total.statements.pct}}%</div>
+        <div class="details">{{total.statements.covered}} / {{total.statements.total}}</div>
+        <div class="progress-bar">
+          <div class="progress-bar-fill" style="width: {{total.statements.pct}}%"></div>
+        </div>
+      </div>
+      <div class="summary-card {{total.functions.status}}">
+        <h3>Functions</h3>
+        <div class="pct">{{total.functions.pct}}%</div>
+        <div class="details">{{total.functions.covered}} / {{total.functions.total}}</div>
+        <div class="progress-bar">
+          <div class="progress-bar-fill" style="width: {{total.functions.pct}}%"></div>
+        </div>
+      </div>
+      <div class="summary-card {{total.branches.status}}">
+        <h3>Branches</h3>
+        <div class="pct">{{total.branches.pct}}%</div>
+        <div class="details">{{total.branches.covered}} / {{total.branches.total}}</div>
+        <div class="progress-bar">
+          <div class="progress-bar-fill" style="width: {{total.branches.pct}}%"></div>
+        </div>
+      </div>
+    </div>
+
+    <h2 class="section-title">File Coverage</h2>
+
+    <div class="filter-bar">
+      <input type="text" class="filter-input" id="filter" placeholder="Filter by file path...">
+      <select class="filter-select" id="statusFilter">
+        <option value="all">All Status</option>
+        <option value="low">Low (&lt;70%)</option>
+        <option value="medium">Medium (70-89%)</option>
+        <option value="high">High (90%+)</option>
+      </select>
+    </div>
+
+    <div class="table-container">
+      <table id="fileTable">
+        <thead>
+          <tr>
+            <th data-sort="path">File</th>
+            <th data-sort="lines">Lines</th>
+            <th data-sort="statements">Statements</th>
+            <th data-sort="functions">Functions</th>
+            <th data-sort="branches">Branches</th>
+          </tr>
+        </thead>
+        <tbody>
+          {{#each files}}
+          <tr data-status="{{lines.status}}" data-path="{{path}}">
+            <td class="file-path">{{path}}</td>
+            <td class="metric {{lines.status}}">{{lines.pct}}%</td>
+            <td class="metric {{statements.status}}">{{statements.pct}}%</td>
+            <td class="metric {{functions.status}}">{{functions.pct}}%</td>
+            <td class="metric {{branches.status}}">{{branches.pct}}%</td>
+          </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    </div>
+
+    <footer>
+      <p>Generated by shirokuma-docs | {{generatedAt}}</p>
+    </footer>
+  </div>
+
+  <script>
+    // Filter functionality
+    const filterInput = document.getElementById('filter');
+    const statusFilter = document.getElementById('statusFilter');
+    const tableBody = document.querySelector('#fileTable tbody');
+    const rows = Array.from(tableBody.querySelectorAll('tr'));
+
+    function applyFilters() {
+      const searchTerm = filterInput.value.toLowerCase();
+      const statusTerm = statusFilter.value;
+
+      rows.forEach(row => {
+        const path = row.dataset.path.toLowerCase();
+        const status = row.dataset.status;
+
+        const matchesSearch = path.includes(searchTerm);
+        const matchesStatus = statusTerm === 'all' || status === statusTerm;
+
+        row.style.display = matchesSearch && matchesStatus ? '' : 'none';
+      });
+    }
+
+    filterInput.addEventListener('input', applyFilters);
+    statusFilter.addEventListener('change', applyFilters);
+
+    // Sort functionality
+    const headers = document.querySelectorAll('th[data-sort]');
+    let currentSort = { column: 'lines', direction: 'asc' };
+
+    headers.forEach(header => {
+      header.addEventListener('click', () => {
+        const column = header.dataset.sort;
+        const direction = currentSort.column === column && currentSort.direction === 'asc' ? 'desc' : 'asc';
+        currentSort = { column, direction };
+
+        rows.sort((a, b) => {
+          let aVal, bVal;
+
+          if (column === 'path') {
+            aVal = a.dataset.path;
+            bVal = b.dataset.path;
+            return direction === 'asc'
+              ? aVal.localeCompare(bVal)
+              : bVal.localeCompare(aVal);
+          } else {
+            const aCell = a.querySelector(`td:nth-child(${getColumnIndex(column)})`);
+            const bCell = b.querySelector(`td:nth-child(${getColumnIndex(column)})`);
+            aVal = parseFloat(aCell.textContent);
+            bVal = parseFloat(bCell.textContent);
+            return direction === 'asc' ? aVal - bVal : bVal - aVal;
+          }
+        });
+
+        rows.forEach(row => tableBody.appendChild(row));
+      });
+    });
+
+    function getColumnIndex(column) {
+      const columns = ['path', 'lines', 'statements', 'functions', 'branches'];
+      return columns.indexOf(column) + 1;
+    }
+  </script>
+</body>
+</html>