@skspwork/config-doc 2.0.3 → 2.0.5

package/packages/web/.next/standalone/components/ExportDialog.tsx

@@ -1,234 +0,0 @@
-import { useState, useEffect, useMemo } from 'react';
-import { ExportSettings, ExportFormat } from '@/types';
-import { XIcon, DownloadIcon, FolderIcon } from 'lucide-react';
-import { FileBrowser } from './FileBrowser';
-
-interface ExportDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onExport: (settings: ExportSettings) => void;
-  currentSettings?: ExportSettings;
-  rootPath?: string;
-}
-
-const DEFAULT_SETTINGS: ExportSettings = {
-  format: 'html',
-  autoExport: true,
-  fileName: 'config-doc',
-  outputDir: '.config_doc/output'
-};
-
-export function ExportDialog({ isOpen, onClose, onExport, currentSettings, rootPath = '.' }: ExportDialogProps) {
-  const [settings, setSettings] = useState<ExportSettings>(currentSettings || DEFAULT_SETTINGS);
-  const [isExporting, setIsExporting] = useState(false);
-  const [isFolderBrowserOpen, setIsFolderBrowserOpen] = useState(false);
-
-  useEffect(() => {
-    if (currentSettings) {
-      setSettings(currentSettings);
-    }
-  }, [currentSettings]);
-
-  // フォーマットに応じて出力先パスを決定
-  const absoluteOutputPath = useMemo(() => {
-    const normalized = rootPath.replace(/\//g, '\\');
-    const outputDir = settings.outputDir?.trim() || '';
-    const fileName = settings.fileName || 'config-doc';
-    const extension = (settings.format === 'markdown' || settings.format === 'markdown-table') ? 'md' : 'html';
-    if (outputDir) {
-      const normalizedOutputDir = outputDir.replace(/\//g, '\\');
-      return `${normalized}\\${normalizedOutputDir}\\${fileName}.${extension}`;
-    }
-    return `${normalized}\\${fileName}.${extension}`;
-  }, [settings.format, settings.fileName, settings.outputDir, rootPath]);
-
-  if (!isOpen) return null;
-
-  const handleExport = async () => {
-    setIsExporting(true);
-    try {
-      await onExport(settings);
-      onClose();
-    } catch (error) {
-      console.error('Export failed:', error);
-    } finally {
-      setIsExporting(false);
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
-        {/* ヘッダー */}
-        <div className="flex items-center justify-between p-6 border-b">
-          <h2 className="text-xl font-semibold text-gray-800">エクスポート設定</h2>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 transition-colors"
-          >
-            <XIcon className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* コンテンツ */}
-        <div className="p-6 space-y-6">
-
-          {/* 出力先フォルダ */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              出力先フォルダ
-            </label>
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={settings.outputDir || ''}
-                onChange={(e) => setSettings({ ...settings, outputDir: e.target.value })}
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="（空欄でプロジェクトルート）"
-              />
-              <button
-                type="button"
-                onClick={() => setIsFolderBrowserOpen(true)}
-                className="px-3 py-2 border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                title="フォルダを選択"
-              >
-                <FolderIcon className="w-5 h-5 text-gray-500" />
-              </button>
-            </div>
-            <p className="mt-1 text-xs text-gray-500">
-              相対パスを入力またはフォルダを選択（空欄でプロジェクトルート、チーム共有設定）
-            </p>
-          </div>
-
-          {/* ファイル名 */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              ファイル名
-            </label>
-            <input
-              type="text"
-              value={settings.fileName ?? ''}
-              onChange={(e) => setSettings({ ...settings, fileName: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="config-doc"
-            />
-            <p className="mt-1 text-xs text-gray-500">
-              拡張子なしのファイル名を指定します（空欄でconfig-doc、チーム共有設定）
-            </p>
-          </div>
-
-          {/* 出力形式 */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              出力形式
-            </label>
-            <select
-              value={settings.format}
-              onChange={(e) => setSettings({ ...settings, format: e.target.value as ExportFormat })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-            >
-              <option value="html">HTML</option>
-              <option value="markdown">Markdown</option>
-              <option value="markdown-table">Markdown (テーブル形式)</option>
-            </select>
-            <p className="mt-1 text-xs text-gray-500">
-              {settings.format === 'html'
-                ? 'スタイル付きのHTMLファイルとして出力します'
-                : settings.format === 'markdown-table'
-                ? 'Markdownテーブル形式で出力します（プロパティ名、説明、値、備考）'
-                : 'テキストベースのMarkdownファイルとして出力します'}
-            </p>
-          </div>
-
-          {/* 出力先パス */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              出力先パス
-            </label>
-            <div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-md text-sm text-gray-700 font-mono break-all">
-              {absoluteOutputPath}
-            </div>
-          </div>
-
-          {/* 自動エクスポート */}
-          <div className="flex items-start">
-            <div className="flex items-center h-5">
-              <input
-                id="auto-export"
-                type="checkbox"
-                checked={settings.autoExport}
-                onChange={(e) => setSettings({ ...settings, autoExport: e.target.checked })}
-                className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
-              />
-            </div>
-            <div className="ml-3">
-              <label htmlFor="auto-export" className="text-sm font-medium text-gray-700 cursor-pointer">
-                保存時に自動エクスポート
-              </label>
-              <p className="text-xs text-gray-500 mt-1">
-                ドキュメントを保存したときに自動的にHTMLファイルを更新します
-              </p>
-            </div>
-          </div>
-
-          {/* 最終エクスポート日時 */}
-          {settings.lastExportedAt && (
-            <div className="pt-4 border-t">
-              <p className="text-xs text-gray-500">
-                最終エクスポート: {new Date(settings.lastExportedAt).toLocaleString('ja-JP')}
-              </p>
-            </div>
-          )}
-        </div>
-
-        {/* フッター */}
-        <div className="flex items-center justify-end gap-3 p-6 border-t bg-gray-50 rounded-b-lg">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            キャンセル
-          </button>
-          <button
-            onClick={handleExport}
-            disabled={isExporting}
-            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            <DownloadIcon className="w-4 h-4" />
-            {isExporting ? 'エクスポート中...' : 'エクスポート'}
-          </button>
-        </div>
-      </div>
-
-      {/* フォルダ選択ダイアログ */}
-      <FileBrowser
-        isOpen={isFolderBrowserOpen}
-        currentPath={rootPath}
-        onSelect={(paths) => {
-          if (paths.length > 0) {
-            // 絶対パスから相対パスに変換
-            const selectedPath = paths[0];
-            const normalizedRoot = rootPath.replace(/\\/g, '/');
-            const normalizedSelected = selectedPath.replace(/\\/g, '/');
-            let relativePath = normalizedSelected;
-            if (normalizedSelected.startsWith(normalizedRoot)) {
-              relativePath = normalizedSelected.slice(normalizedRoot.length);
-              if (relativePath.startsWith('/')) {
-                relativePath = relativePath.slice(1);
-              }
-            }
-            // 空の場合は現在のディレクトリ
-            if (!relativePath) {
-              relativePath = '.';
-            }
-            setSettings({ ...settings, outputDir: relativePath });
-          }
-          setIsFolderBrowserOpen(false);
-        }}
-        onClose={() => setIsFolderBrowserOpen(false)}
-        folderSelectMode={true}
-        title="出力先フォルダを選択"
-      />
-    </div>
-  );
-}

package/packages/web/.next/standalone/components/FieldsEditor.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-import { EditableListWrapper } from './EditableList';
-
-interface FieldsEditorProps {
-  fields: Record<string, string>;
-  projectFields: Record<string, string>;
-  onFieldsChange: (fields: Record<string, string>) => void;
-  onUpdateProjectFields?: (fields: Record<string, string>) => void;
-}
-
-export function FieldsEditor({
-  fields,
-  projectFields,
-  onFieldsChange,
-  onUpdateProjectFields
-}: FieldsEditorProps) {
-  // フィールド名の一覧
-  const fieldNames = Object.keys(projectFields);
-
-  // 名前変更時にフィールドの値も更新
-  const handleRename = (renamedMap: Record<string, string>) => {
-    const newFields: Record<string, string> = {};
-    for (const [oldName, value] of Object.entries(fields)) {
-      const newName = renamedMap[oldName] || oldName;
-      newFields[newName] = value;
-    }
-    onFieldsChange(newFields);
-  };
-
-  // フィールド一覧が変更されたとき
-  const handleFieldNamesChange = (newNames: string[]) => {
-    // 新しいフィールド構造を構築
-    const newFields: Record<string, string> = {};
-    for (const name of newNames) {
-      newFields[name] = fields[name] || '';
-    }
-
-    // フィールドを更新（ローカル状態）
-    onFieldsChange(newFields);
-
-    // プロジェクト全体に適用
-    if (onUpdateProjectFields) {
-      const newProjectFields: Record<string, string> = {};
-      for (const name of newNames) {
-        newProjectFields[name] = '';
-      }
-      onUpdateProjectFields(newProjectFields);
-    }
-  };
-
-  // フィールド値の変更（通常モード）
-  const handleFieldValueChange = (label: string, value: string) => {
-    onFieldsChange({
-      ...fields,
-      [label]: value
-    });
-  };
-
-  return (
-    <EditableListWrapper
-      label="フィールド"
-      items={fieldNames}
-      onItemsChange={handleFieldNamesChange}
-      editButtonTitle="フィールドを編集"
-      editModeDescription="フィールドの追加・削除・名前変更"
-      inputPlaceholder="フィールド名"
-      newItemPlaceholder="新しいフィールド名を入力"
-      deleteButtonTitle="フィールドを削除"
-      addButtonTitle="フィールドを追加"
-      duplicateErrorMessage="同じ名前のフィールドがあります"
-      onRename={handleRename}
-    >
-      {/* 通常モード（フィールド値の入力） */}
-      <div className="space-y-3">
-        {Object.entries(fields).map(([label, value]) => (
-          <div key={label}>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              {label}
-            </label>
-            <textarea
-              value={value}
-              onChange={(e) => handleFieldValueChange(label, e.target.value)}
-              className="w-full border-2 border-gray-200 rounded-lg p-3 min-h-[80px] text-sm focus:border-blue-400 focus:ring-2 focus:ring-blue-200 transition-all duration-200 shadow-sm hover:shadow-md"
-              placeholder={`${label}を入力してください`}
-            />
-          </div>
-        ))}
-      </div>
-    </EditableListWrapper>
-  );
-}

package/packages/web/.next/standalone/components/FileBrowser.tsx

@@ -1,290 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { FileSystemItem } from '@/types';
-import { FolderIcon, FileIcon, ArrowUpIcon } from 'lucide-react';
-
-interface FileBrowserProps {
-  isOpen: boolean;
-  currentPath: string;
-  onSelect: (filePaths: string[]) => void;
-  onClose: () => void;
-  multiSelect?: boolean;
-  filterJsonOnly?: boolean;
-  /** フォルダ選択モード（trueの場合、ファイルは表示せずフォルダのみ選択可能） */
-  folderSelectMode?: boolean;
-  /** ダイアログのタイトル */
-  title?: string;
-}
-
-export function FileBrowser({
-  isOpen,
-  currentPath,
-  onSelect,
-  onClose,
-  multiSelect = false,
-  filterJsonOnly = false,
-  folderSelectMode = false,
-  title
-}: FileBrowserProps) {
-  const [path, setPath] = useState(currentPath);
-  const [items, setItems] = useState<FileSystemItem[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
-
-  useEffect(() => {
-    if (isOpen) {
-      // ダイアログが開かれた時、currentPathでパスをリセット
-      setPath(currentPath);
-      setSelectedFiles([]);
-    }
-  }, [isOpen, currentPath]);
-
-  useEffect(() => {
-    if (isOpen) {
-      // パスが変更された時にディレクトリをロード
-      loadDirectory(path);
-    }
-  }, [isOpen, path]);
-
-  const loadDirectory = async (dirPath: string) => {
-    setLoading(true);
-    try {
-      const response = await fetch('/api/files/browse', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ directory: dirPath })
-      });
-      const data = await response.json();
-      if (data.success) {
-        // フィルタリング
-        let filtered = data.data.items;
-        if (folderSelectMode) {
-          // フォルダ選択モード：フォルダのみ表示
-          filtered = data.data.items.filter((item: FileSystemItem) =>
-            item.type === 'directory'
-          );
-        } else if (filterJsonOnly) {
-          filtered = data.data.items.filter((item: FileSystemItem) =>
-            item.type === 'directory' || item.extension === '.json'
-          );
-        }
-        setItems(filtered);
-      } else {
-        console.error('API returned error:', data.error);
-      }
-    } catch (error) {
-      console.error('Failed to load directory:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleItemClick = (item: FileSystemItem) => {
-    if (item.type === 'directory') {
-      if (folderSelectMode) {
-        // フォルダ選択モード：ダブルクリックで移動、シングルクリックで選択
-        // ここではシングルクリックで選択のみ（移動はダブルクリックで）
-        setSelectedFiles([item.path]);
-      } else {
-        // 通常モード：ディレクトリはクリックで移動
-        setPath(item.path);
-      }
-    } else {
-      if (multiSelect) {
-        // 複数選択モード
-        setSelectedFiles(prev =>
-          prev.includes(item.path)
-            ? prev.filter(p => p !== item.path)
-            : [...prev, item.path]
-        );
-      } else {
-        // 単一選択モード
-        setSelectedFiles([item.path]);
-      }
-    }
-  };
-
-  const handleItemDoubleClick = (item: FileSystemItem) => {
-    if (item.type === 'directory') {
-      // ダブルクリックでディレクトリに移動
-      setPath(item.path);
-      setSelectedFiles([]);
-    }
-  };
-
-  // パス区切り文字を正規化する（クロスプラットフォーム対応）
-  const normalizePath = (p: string): string => {
-    // バックスラッシュをスラッシュに統一
-    return p.replace(/\\/g, '/');
-  };
-
-  // 親ディレクトリへの移動が可能かどうか
-  const canGoUp = (): boolean => {
-    const normalizedPath = normalizePath(path).toLowerCase();
-    const normalizedRoot = normalizePath(currentPath).toLowerCase();
-    // 現在のパスがルートパスと同じなら上に移動できない
-    return normalizedPath !== normalizedRoot;
-  };
-
-  const handleGoUp = () => {
-    // ルートパスより上には移動できない
-    if (!canGoUp()) {
-      return;
-    }
-
-    // パスを正規化（スラッシュに統一）
-    const normalizedPath = normalizePath(path);
-    const pathParts = normalizedPath.split('/').filter(p => p);
-
-    if (pathParts.length > 1) {
-      // 親ディレクトリへ移動
-      const parentParts = pathParts.slice(0, -1);
-
-      // パスを再構築
-      let parentPath: string;
-      if (parentParts.length === 1 && parentParts[0].includes(':')) {
-        // Windowsドライブルートの場合（例: C:/ ）
-        parentPath = parentParts[0] + '/';
-      } else if (parentParts[0].includes(':')) {
-        // Windowsドライブレターを含むパスの場合（例: C:/sksp）
-        parentPath = parentParts[0] + '/' + parentParts.slice(1).join('/');
-      } else if (normalizedPath.startsWith('/')) {
-        // Unix絶対パスの場合（例: /tmp/foo）
-        parentPath = '/' + parentParts.join('/');
-      } else {
-        // 相対パスの場合
-        parentPath = parentParts.join('/');
-      }
-
-      // 親パスがルートパスより上でなければ移動
-      const normalizedParent = normalizePath(parentPath).toLowerCase();
-      const normalizedRoot = normalizePath(currentPath).toLowerCase();
-      // 親パスがルートパスを含んでいれば（ルートパス以下であれば）移動可能
-      if (normalizedParent.startsWith(normalizedRoot) || normalizedParent === normalizedRoot) {
-        setPath(parentPath);
-      }
-    } else if (pathParts.length === 1 && !pathParts[0].includes(':')) {
-      // ルート以外の単一ディレクトリの場合
-      const normalizedRoot = normalizePath(currentPath).toLowerCase();
-      if (normalizedRoot === '.') {
-        return; // ルートが'.'なら上に移動しない
-      }
-      setPath('.');
-    }
-    // ドライブルート（例: C:/）やUnixルート（/）の場合は何もしない
-    // ディレクトリ移動時は選択を保持
-  };
-
-  const handleConfirm = () => {
-    if (folderSelectMode) {
-      // フォルダ選択モード：選択されたフォルダがあればそれを、なければ現在のパスを返す
-      const selectedPath = selectedFiles.length > 0 ? selectedFiles : [path];
-      onSelect(selectedPath);
-      setSelectedFiles([]);
-      onClose();
-    } else if (selectedFiles.length > 0) {
-      onSelect(selectedFiles);
-      setSelectedFiles([]);
-      onClose();
-    }
-  };
-
-  const handleClose = () => {
-    setSelectedFiles([]);
-    onClose();
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
-        {/* ヘッダー */}
-        <div className="flex items-center justify-between p-4 border-b">
-          <h2 className="text-lg font-semibold">{title || (folderSelectMode ? 'フォルダを選択' : 'ファイルを選択')}</h2>
-          <button
-            onClick={handleClose}
-            className="text-gray-500 hover:text-gray-700"
-          >
-            ✕
-          </button>
-        </div>
-
-        {/* パスとナビゲーション */}
-        <div className="flex items-center gap-2 p-4 border-b bg-gray-50">
-          <button
-            onClick={handleGoUp}
-            disabled={!canGoUp()}
-            className={`p-2 rounded flex-shrink-0 ${canGoUp() ? 'hover:bg-gray-200' : 'opacity-50 cursor-not-allowed'}`}
-            title={canGoUp() ? '上のディレクトリへ' : 'ルートディレクトリです'}
-          >
-            <ArrowUpIcon className="w-5 h-5" />
-          </button>
-          <span className="text-sm text-gray-600 flex-1 truncate">パス: {path}</span>
-        </div>
-
-        {/* ファイル一覧 */}
-        <div className="flex-1 overflow-y-auto p-4">
-          {loading ? (
-            <div className="text-center text-gray-500">読み込み中...</div>
-          ) : (
-            <div className="space-y-1">
-              {items.map((item) => {
-                const isSelected = selectedFiles.includes(item.path);
-                return (
-                  <div
-                    key={item.path}
-                    onClick={() => handleItemClick(item)}
-                    onDoubleClick={() => handleItemDoubleClick(item)}
-                    className={`flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-gray-100 ${
-                      isSelected ? 'bg-blue-100' : ''
-                    }`}
-                  >
-                    {item.type === 'directory' ? (
-                      <FolderIcon className="w-5 h-5 text-blue-500" />
-                    ) : (
-                      <FileIcon className="w-5 h-5 text-green-500" />
-                    )}
-                    <span className="text-sm">{item.name}</span>
-                    {isSelected && (multiSelect || folderSelectMode) && (
-                      <span className="ml-auto text-blue-500">✓</span>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-
-        {/* フッター */}
-        <div className="flex items-center justify-between p-4 border-t">
-          {folderSelectMode ? (
-            <div className="text-sm text-gray-600">
-              {selectedFiles.length > 0 ? `選択中: ${selectedFiles[0].split(/[/\\]/).pop()}` : `現在のフォルダ: ${path.split(/[/\\]/).pop() || path}`}
-            </div>
-          ) : multiSelect && selectedFiles.length > 0 ? (
-            <div className="text-sm text-gray-600">
-              {selectedFiles.length}件選択中
-            </div>
-          ) : null}
-          <div className="flex items-center gap-2 ml-auto">
-            <button
-              onClick={handleClose}
-              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
-            >
-              キャンセル
-            </button>
-            <button
-              onClick={handleConfirm}
-              disabled={!folderSelectMode && selectedFiles.length === 0}
-              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
-            >
-              選択
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/packages/web/.next/standalone/components/Header.tsx

@@ -1,37 +0,0 @@
-'use client';
-
-import { DownloadIcon } from 'lucide-react';
-
-interface HeaderProps {
-  onExportClick: () => void;
-}
-
-export function Header({ onExportClick }: HeaderProps) {
-  return (
-    <header className="bg-white/80 backdrop-blur-md border-b border-gray-200 shadow-sm sticky top-0 z-50">
-      <div className="container mx-auto px-6 py-4 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <img
-            src="/logo.svg"
-            alt="ConfigDoc"
-            className="w-12 h-12 rounded-lg"
-          />
-          <div>
-            <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              ConfigDoc
-            </h1>
-            <p className="text-xs text-gray-500">Configuration Documentation Tool</p>
-          </div>
-        </div>
-        <button
-          onClick={onExportClick}
-          className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-lg hover:from-green-600 hover:to-emerald-700 shadow-md hover:shadow-lg transition-all duration-200 transform"
-          title="エクスポート"
-        >
-          <DownloadIcon className="w-5 h-5" />
-          <span className="font-medium">エクスポート</span>
-        </button>
-      </div>
-    </header>
-  );
-}