@skspwork/config-doc 2.0.4 → 2.0.6

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

@@ -1,337 +0,0 @@
-'use client';
-
-import { useState, useMemo } from 'react';
-import { PencilIcon, PlusIcon, XIcon, SaveIcon, GripVerticalIcon } from 'lucide-react';
-
-export interface EditingItem {
-  originalName: string;
-  newName: string;
-  isNew: boolean;
-}
-
-interface EditableListWrapperProps {
-  /** セクションのラベル */
-  label: string;
-  /** 現在のアイテム一覧 */
-  items: string[];
-  /** アイテム一覧が変更されたときのコールバック */
-  onItemsChange: (items: string[]) => void;
-  /** 編集ボタンのtitle属性 */
-  editButtonTitle: string;
-  /** 編集モードの説明テキスト */
-  editModeDescription: string;
-  /** 入力欄のプレースホルダー */
-  inputPlaceholder: string;
-  /** 新規追加入力欄のプレースホルダー */
-  newItemPlaceholder: string;
-  /** 削除ボタンのtitle属性 */
-  deleteButtonTitle: string;
-  /** 追加ボタンのtitle属性 */
-  addButtonTitle: string;
-  /** 重複エラーメッセージ */
-  duplicateErrorMessage: string;
-  /** 名前変更時に呼ばれるコールバック（旧名 -> 新名のマップ） */
-  onRename?: (renamedMap: Record<string, string>) => void;
-  /** 通常モードの表示内容 */
-  children: React.ReactNode;
-}
-
-/**
- * 編集可能なリストを管理する共通コンポーネント
- * タグやフィールドの編集UIで使用
- */
-export function EditableListWrapper({
-  label,
-  items,
-  onItemsChange,
-  editButtonTitle,
-  editModeDescription,
-  inputPlaceholder,
-  newItemPlaceholder,
-  deleteButtonTitle,
-  addButtonTitle,
-  duplicateErrorMessage,
-  onRename,
-  children
-}: EditableListWrapperProps) {
-  const [isEditMode, setIsEditMode] = useState(false);
-  const [editingItems, setEditingItems] = useState<EditingItem[]>([]);
-  const [newItemName, setNewItemName] = useState('');
-
-  // ドラッグ&ドロップ用の状態
-  const [dragIndex, setDragIndex] = useState<number | null>(null);
-  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
-
-  // ドラッグ中のプレビュー用に並び替えた配列を計算
-  const displayItems = useMemo(() => {
-    if (dragIndex === null || dragOverIndex === null || dragIndex === dragOverIndex) {
-      return editingItems.map((item, index) => ({ item, originalIndex: index }));
-    }
-
-    // ドラッグ中は見た目上の並び替えを表示
-    const result = editingItems.map((item, index) => ({ item, originalIndex: index }));
-    const [draggedItem] = result.splice(dragIndex, 1);
-    result.splice(dragOverIndex, 0, draggedItem);
-    return result;
-  }, [editingItems, dragIndex, dragOverIndex]);
-
-  // 編集モードに入る
-  const enterEditMode = () => {
-    const itemList = items.map(name => ({
-      originalName: name,
-      newName: name,
-      isNew: false
-    }));
-    setEditingItems(itemList);
-    setIsEditMode(true);
-    setNewItemName('');
-  };
-
-  // 編集モードをキャンセル
-  const cancelEditMode = () => {
-    setIsEditMode(false);
-    setEditingItems([]);
-    setNewItemName('');
-    setDragIndex(null);
-    setDragOverIndex(null);
-  };
-
-  // アイテムを追加（編集モード内）
-  const handleAddItem = () => {
-    const trimmedName = newItemName.trim();
-    if (trimmedName && !editingItems.some(item => item.newName === trimmedName)) {
-      setEditingItems([...editingItems, {
-        originalName: '',
-        newName: trimmedName,
-        isNew: true
-      }]);
-      setNewItemName('');
-    }
-  };
-
-  // アイテムを削除（編集モード内）
-  const handleRemoveItem = (originalIndex: number) => {
-    setEditingItems(editingItems.filter((_, i) => i !== originalIndex));
-  };
-
-  // アイテム名を変更（編集モード内）
-  const handleNameChange = (originalIndex: number, newName: string) => {
-    setEditingItems(editingItems.map((item, i) =>
-      i === originalIndex ? { ...item, newName } : item
-    ));
-  };
-
-  // ドラッグ開始
-  const handleDragStart = (originalIndex: number) => {
-    setDragIndex(originalIndex);
-  };
-
-  // ドラッグオーバー（表示上のインデックスで処理）
-  const handleDragOver = (e: React.DragEvent, displayIndex: number) => {
-    e.preventDefault();
-    if (dragIndex === null) return;
-
-    // 表示上のインデックスをそのまま使用
-    if (dragOverIndex !== displayIndex) {
-      setDragOverIndex(displayIndex);
-    }
-  };
-
-  // ドロップ時にデータを確定
-  const handleDrop = () => {
-    if (dragIndex === null || dragOverIndex === null || dragIndex === dragOverIndex) {
-      setDragIndex(null);
-      setDragOverIndex(null);
-      return;
-    }
-
-    // 配列の並び替えを確定
-    const newItems = [...editingItems];
-    const [draggedItem] = newItems.splice(dragIndex, 1);
-    newItems.splice(dragOverIndex, 0, draggedItem);
-    setEditingItems(newItems);
-
-    setDragIndex(null);
-    setDragOverIndex(null);
-  };
-
-  // ドラッグ終了（キャンセル時など）
-  const handleDragEnd = () => {
-    setDragIndex(null);
-    setDragOverIndex(null);
-  };
-
-  // 保存処理
-  const handleSave = () => {
-    const newItems: string[] = [];
-    const renamedMap: Record<string, string> = {};
-
-    for (const item of editingItems) {
-      const trimmedName = item.newName.trim();
-      if (!trimmedName) continue;
-
-      newItems.push(trimmedName);
-
-      // 名前変更の追跡
-      if (!item.isNew && item.originalName !== trimmedName) {
-        renamedMap[item.originalName] = trimmedName;
-      }
-    }
-
-    // 入力中のアイテムがあれば追加
-    const pendingName = newItemName.trim();
-    if (pendingName && !newItems.includes(pendingName)) {
-      newItems.push(pendingName);
-    }
-
-    // 名前変更コールバック
-    if (onRename && Object.keys(renamedMap).length > 0) {
-      onRename(renamedMap);
-    }
-
-    onItemsChange(newItems);
-    setIsEditMode(false);
-    setEditingItems([]);
-    setNewItemName('');
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      handleAddItem();
-    }
-  };
-
-  // バリデーション: 重複チェック
-  const hasDuplicateNames = () => {
-    const names = editingItems.map(item => item.newName.trim()).filter(Boolean);
-    return new Set(names).size !== names.length;
-  };
-
-  // バリデーション: 空の名前チェック
-  const hasEmptyNames = () => {
-    return editingItems.some(item => !item.newName.trim());
-  };
-
-  const canSave = !hasDuplicateNames() && !hasEmptyNames();
-
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-2">
-        <label className="block text-sm font-semibold text-gray-700">
-          {label}
-        </label>
-        {!isEditMode && (
-          <button
-            onClick={enterEditMode}
-            className="text-gray-500 hover:text-blue-600 transition-colors p-1"
-            title={editButtonTitle}
-          >
-            <PencilIcon className="w-4 h-4" />
-          </button>
-        )}
-      </div>
-
-      {isEditMode ? (
-        <div className="space-y-3 p-4 bg-blue-50 rounded-lg border-2 border-blue-200">
-          <div className="text-xs font-medium text-blue-700 mb-2">
-            {editModeDescription}（ドラッグで並び替え可能）
-          </div>
-
-          {/* 既存アイテムの編集 */}
-          <div className="space-y-2">
-            {displayItems.map(({ item, originalIndex }, displayIndex) => {
-              const isDragging = dragIndex === originalIndex;
-
-              return (
-                <div
-                  key={originalIndex}
-                  draggable
-                  onDragStart={() => handleDragStart(originalIndex)}
-                  onDragOver={(e) => handleDragOver(e, displayIndex)}
-                  onDrop={handleDrop}
-                  onDragEnd={handleDragEnd}
-                  className={`flex items-center gap-2 transition-all ${
-                    isDragging ? 'opacity-50' : ''
-                  }`}
-                >
-                  <div
-                    className="cursor-grab text-gray-400 hover:text-gray-600 p-1"
-                    title="ドラッグして並び替え"
-                  >
-                    <GripVerticalIcon className="w-4 h-4" />
-                  </div>
-                  <input
-                    type="text"
-                    value={item.newName}
-                    onChange={(e) => handleNameChange(originalIndex, e.target.value)}
-                    placeholder={inputPlaceholder}
-                    className={`flex-1 px-3 py-2 border-2 rounded-lg text-sm focus:ring-2 transition-all duration-200 ${
-                      !item.newName.trim()
-                        ? 'border-red-300 focus:border-red-400 focus:ring-red-200'
-                        : 'border-gray-200 focus:border-blue-400 focus:ring-blue-200'
-                    }`}
-                  />
-                  <button
-                    onClick={() => handleRemoveItem(originalIndex)}
-                    className="text-gray-400 hover:text-red-600 transition-colors p-2"
-                    title={deleteButtonTitle}
-                  >
-                    <XIcon className="w-4 h-4" />
-                  </button>
-                </div>
-              );
-            })}
-          </div>
-
-          {/* 新規アイテム追加 */}
-          <div className="flex items-center gap-2 pt-2 border-t border-blue-200">
-            <input
-              type="text"
-              value={newItemName}
-              onChange={(e) => setNewItemName(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={newItemPlaceholder}
-              className="flex-1 px-3 py-2 border-2 border-gray-200 rounded-lg text-sm focus:border-blue-400 focus:ring-2 focus:ring-blue-200 transition-all duration-200"
-            />
-            <button
-              onClick={handleAddItem}
-              disabled={!newItemName.trim() || editingItems.some(item => item.newName.trim() === newItemName.trim())}
-              className="px-3 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
-              title={addButtonTitle}
-            >
-              <PlusIcon className="w-4 h-4" />
-            </button>
-          </div>
-
-          {/* エラーメッセージ */}
-          {hasDuplicateNames() && (
-            <div className="text-xs text-red-600 mt-2">
-              {duplicateErrorMessage}
-            </div>
-          )}
-
-          {/* 保存・キャンセルボタン */}
-          <div className="flex items-center gap-2 pt-3 border-t border-blue-200">
-            <button
-              onClick={handleSave}
-              disabled={!canSave}
-              className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed text-sm font-medium"
-            >
-              <SaveIcon className="w-4 h-4" />
-              保存
-            </button>
-            <button
-              onClick={cancelEditMode}
-              className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors text-sm font-medium"
-            >
-              キャンセル
-            </button>
-          </div>
-        </div>
-      ) : (
-        children
-      )}
-    </div>
-  );
-}

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>
-  );
-}