@skspwork/config-doc 1.0.0 → 2.0.1

package/packages/web/.next/standalone/app/page.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import { FileTextIcon } from 'lucide-react';
+import { Header } from '@/components/Header';
+import { ConfigFileTabs } from '@/components/ConfigFileTabs';
+import { PropertyEditor } from '@/components/PropertyEditor';
+import { ConfigTree } from '@/components/ConfigTree';
+import { FileBrowser } from '@/components/FileBrowser';
+import { ExportDialog } from '@/components/ExportDialog';
+import { ToastContainer } from '@/components/Toast';
+import { useConfigManager } from '@/hooks/useConfigManager';
+
+export default function Home() {
+  const [isFileBrowserOpen, setIsFileBrowserOpen] = useState(false);
+  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
+
+  const {
+    loadedConfigs,
+    activeConfigIndex,
+    activeConfig,
+    selectedPath,
+    editingDoc,
+    originalDoc,
+    hasUnsavedChanges,
+    exportSettings,
+    availableTags,
+    projectFields,
+    toasts,
+    rootPath,
+
+    setActiveConfigIndex,
+    setEditingDoc,
+    setHasUnsavedChanges,
+    removeToast,
+    handleSelectConfigFiles,
+    handleRemoveConfig,
+    handleReorderConfigs,
+    handleSelectProperty,
+    handleSaveProperty,
+    handleExport,
+    handleAvailableTagsChange,
+    handleProjectFieldsChange,
+    checkForChanges,
+    resetSelection
+  } = useConfigManager();
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
+      {/* ヘッダー */}
+      <Header onExportClick={() => setIsExportDialogOpen(true)} />
+
+      {/* メインコンテンツ */}
+      <main className="container mx-auto px-6 py-8">
+        {/* ファイル選択セクション */}
+        <ConfigFileTabs
+          loadedConfigs={loadedConfigs}
+          activeConfigIndex={activeConfigIndex}
+          onTabClick={(index) => {
+            setActiveConfigIndex(index);
+            resetSelection();
+          }}
+          onRemoveConfig={handleRemoveConfig}
+          onAddFileClick={() => setIsFileBrowserOpen(true)}
+          onReorder={handleReorderConfigs}
+        />
+
+        {/* ツリーと詳細パネル */}
+        {activeConfig && (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* 左パネル: JSON構造ツリー */}
+            <div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl border border-gray-100 p-6 flex flex-col max-h-[calc(100vh-190px)] hover:shadow-2xl transition-shadow duration-300">
+              <div className="flex items-center gap-2 mb-4">
+                <div className="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center">
+                  <FileTextIcon className="w-5 h-5 text-white" />
+                </div>
+                <h2 className="text-xl font-bold text-gray-800">JSON構造</h2>
+              </div>
+              <div className="overflow-y-auto flex-1">
+                <ConfigTree
+                  config={activeConfig.configData}
+                  docs={activeConfig.docs}
+                  onSelectProperty={handleSelectProperty}
+                  onEditProperty={handleSelectProperty}
+                  selectedPath={selectedPath}
+                />
+              </div>
+            </div>
+
+            {/* 右パネル: プロパティ詳細 */}
+            <PropertyEditor
+              selectedPath={selectedPath}
+              editingDoc={editingDoc}
+              hasUnsavedChanges={hasUnsavedChanges}
+              availableTags={availableTags}
+              projectFields={projectFields}
+              onEditingDocChange={(doc) => {
+                setEditingDoc(doc);
+                setHasUnsavedChanges(checkForChanges(doc, originalDoc));
+              }}
+              onAvailableTagsChange={handleAvailableTagsChange}
+              onProjectFieldsChange={handleProjectFieldsChange}
+              onSave={handleSaveProperty}
+            />
+          </div>
+        )}
+      </main>
+
+      {/* ファイルブラウザ */}
+      <FileBrowser
+        isOpen={isFileBrowserOpen}
+        currentPath={rootPath}
+        multiSelect={true}
+        filterJsonOnly={true}
+        onSelect={(filePaths) => {
+          handleSelectConfigFiles(filePaths);
+          setIsFileBrowserOpen(false);
+        }}
+        onClose={() => setIsFileBrowserOpen(false)}
+      />
+
+      {/* エクスポートダイアログ */}
+      <ExportDialog
+        isOpen={isExportDialogOpen}
+        onClose={() => setIsExportDialogOpen(false)}
+        onExport={handleExport}
+        currentSettings={exportSettings}
+        rootPath={rootPath}
+      />
+
+      {/* トースト通知 */}
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+    </div>
+  );
+}

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

@@ -0,0 +1,188 @@
+'use client';
+
+import { useState } from 'react';
+import { FolderOpenIcon, XIcon } from 'lucide-react';
+import { ConfigDocs } from '@/types';
+
+export interface LoadedConfig {
+  filePath: string;
+  configData: unknown;
+  docs: ConfigDocs;
+}
+
+interface ConfigFileTabsProps {
+  loadedConfigs: LoadedConfig[];
+  activeConfigIndex: number;
+  onTabClick: (index: number) => void;
+  onRemoveConfig: (index: number) => void;
+  onAddFileClick: () => void;
+  onReorder: (newConfigs: LoadedConfig[], newActiveIndex: number) => void;
+}
+
+// 同名ファイルを区別するための表示名を生成
+function getDisplayName(filePath: string, allFilePaths: string[]): string {
+  const fileName = filePath.split(/[/\\]/).pop() || filePath;
+
+  // 同じファイル名を持つファイルパスを検索
+  const sameNamePaths = allFilePaths.filter(p => {
+    const name = p.split(/[/\\]/).pop();
+    return name === fileName;
+  });
+
+  // 同名のファイルが1つしかない場合はファイル名のみ
+  if (sameNamePaths.length === 1) {
+    return fileName;
+  }
+
+  // 同名ファイルが複数ある場合、親フォルダを追加
+  const pathParts = filePath.split(/[/\\]/);
+
+  // 必要な親フォルダのレベル数を決定
+  for (let depth = 1; depth < pathParts.length; depth++) {
+    const displayWithParents = pathParts.slice(-depth - 1).join('/');
+
+    // この表示名が他の同名ファイルと区別できるかチェック
+    const conflicts = sameNamePaths.filter(p => {
+      const otherParts = p.split(/[/\\]/);
+      const otherDisplay = otherParts.slice(-depth - 1).join('/');
+      return displayWithParents === otherDisplay && p !== filePath;
+    });
+
+    if (conflicts.length === 0) {
+      return displayWithParents;
+    }
+  }
+
+  // 全パスが必要な場合
+  return filePath;
+}
+
+export function ConfigFileTabs({
+  loadedConfigs,
+  activeConfigIndex,
+  onTabClick,
+  onRemoveConfig,
+  onAddFileClick,
+  onReorder
+}: ConfigFileTabsProps) {
+  // ドラッグ＆ドロップ用の状態
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
+  const handleDragStart = (index: number) => {
+    setDragIndex(index);
+  };
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    if (dragIndex !== null && dragIndex !== index) {
+      setDragOverIndex(index);
+    }
+  };
+
+  const handleDragLeave = () => {
+    setDragOverIndex(null);
+  };
+
+  const handleDrop = (index: number) => {
+    if (dragIndex === null || dragIndex === index) {
+      setDragIndex(null);
+      setDragOverIndex(null);
+      return;
+    }
+
+    // 配列の並び替え
+    const newConfigs = [...loadedConfigs];
+    const [draggedItem] = newConfigs.splice(dragIndex, 1);
+    newConfigs.splice(index, 0, draggedItem);
+
+    // アクティブなインデックスを調整
+    let newActiveIndex = activeConfigIndex;
+    if (activeConfigIndex === dragIndex) {
+      newActiveIndex = index;
+    } else if (dragIndex < activeConfigIndex && index >= activeConfigIndex) {
+      newActiveIndex = activeConfigIndex - 1;
+    } else if (dragIndex > activeConfigIndex && index <= activeConfigIndex) {
+      newActiveIndex = activeConfigIndex + 1;
+    }
+
+    onReorder(newConfigs, newActiveIndex);
+
+    setDragIndex(null);
+    setDragOverIndex(null);
+  };
+
+  const handleDragEnd = () => {
+    setDragIndex(null);
+    setDragOverIndex(null);
+  };
+
+  const allFilePaths = loadedConfigs.map(c => c.filePath);
+
+  return (
+    <div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl border border-gray-100 p-6 mb-8 hover:shadow-2xl transition-shadow duration-300">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
+            <FolderOpenIcon className="w-5 h-5 text-white" />
+          </div>
+          <h2 className="text-xl font-bold text-gray-800">設定ファイル</h2>
+        </div>
+        <button
+          onClick={onAddFileClick}
+          className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-blue-700 shadow-md hover:shadow-lg transition-all duration-200 transform"
+        >
+          <FolderOpenIcon className="w-5 h-5" />
+          <span className="font-medium">ファイルを追加</span>
+        </button>
+      </div>
+
+      {loadedConfigs.length > 0 ? (
+        <div className="flex flex-wrap gap-3">
+          {loadedConfigs.map((config, index) => (
+            <div
+              key={config.filePath}
+              draggable
+              onDragStart={() => handleDragStart(index)}
+              onDragOver={(e) => handleDragOver(e, index)}
+              onDragLeave={handleDragLeave}
+              onDrop={() => handleDrop(index)}
+              onDragEnd={handleDragEnd}
+              onClick={() => onTabClick(index)}
+              className={`group flex items-center gap-2 px-4 py-2.5 rounded-xl border-2 cursor-grab transition-all duration-200 ${
+                activeConfigIndex === index
+                  ? 'bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-400 shadow-md'
+                  : 'bg-white border-gray-200 hover:border-blue-300 hover:shadow-md'
+              } ${
+                dragIndex === index ? 'opacity-50' : ''
+              } ${
+                dragOverIndex === index ? 'border-blue-500 border-dashed' : ''
+              }`}
+            >
+              <span className={`text-sm font-medium ${
+                activeConfigIndex === index ? 'text-blue-700' : 'text-gray-700'
+              }`}>
+                {getDisplayName(config.filePath, allFilePaths)}
+              </span>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRemoveConfig(index);
+                }}
+                className="text-gray-400 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100"
+              >
+                <XIcon className="w-4 h-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-12 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border-2 border-dashed border-gray-300">
+          <FolderOpenIcon className="w-16 h-16 text-gray-400 mx-auto mb-3" />
+          <p className="text-sm text-gray-600 font-medium">設定ファイルを選択してください</p>
+          <p className="text-xs text-gray-500 mt-1">「ファイルを追加」ボタンから開始</p>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,176 @@
+'use client';
+
+import { useState } from 'react';
+import { ConfigTreeNode, ConfigDocs } from '@/types';
+import { ChevronRightIcon, ChevronDownIcon, FileTextIcon } from 'lucide-react';
+import { ConfigParser } from '@/lib/configParser';
+
+interface ConfigTreeProps {
+  config: any;
+  docs: ConfigDocs;
+  onSelectProperty: (path: string) => void;
+  onEditProperty: (path: string) => void;
+  selectedPath?: string;
+}
+
+export function ConfigTree({
+  config,
+  docs,
+  onSelectProperty,
+  onEditProperty,
+  selectedPath
+}: ConfigTreeProps) {
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  const toggleNode = (path: string) => {
+    const newExpanded = new Set(expandedNodes);
+    if (newExpanded.has(path)) {
+      newExpanded.delete(path);
+    } else {
+      newExpanded.add(path);
+    }
+    setExpandedNodes(newExpanded);
+  };
+
+  // すべてのノードパスを収集
+  const getAllNodePaths = (nodes: ConfigTreeNode[]): string[] => {
+    const paths: string[] = [];
+    const collectPaths = (node: ConfigTreeNode) => {
+      if (node.children && node.children.length > 0) {
+        paths.push(node.fullPath);
+        node.children.forEach(collectPaths);
+      }
+    };
+    nodes.forEach(collectPaths);
+    return paths;
+  };
+
+  // すべて展開
+  const expandAll = () => {
+    const tree = ConfigParser.buildTree(config);
+    const allPaths = getAllNodePaths(tree);
+    setExpandedNodes(new Set(allPaths));
+  };
+
+  // すべて閉じる
+  const collapseAll = () => {
+    setExpandedNodes(new Set());
+  };
+
+  // ドキュメントが有効な内容を持っているかチェック
+  const hasValidDocumentation = (path: string): boolean => {
+    const doc = docs.properties[path];
+    if (!doc) return false;
+
+    // タグがあるか
+    if (doc.tags && doc.tags.length > 0) return true;
+
+    // フィールドに値があるか
+    if (doc.fields) {
+      const hasFieldValue = Object.values(doc.fields).some(
+        value => value && value.trim() !== ''
+      );
+      if (hasFieldValue) return true;
+    }
+
+    return false;
+  };
+
+  const renderNode = (node: ConfigTreeNode, depth: number = 0) => {
+    const hasDoc = hasValidDocumentation(node.fullPath);
+    const isExpanded = expandedNodes.has(node.fullPath);
+    const isSelected = selectedPath === node.fullPath;
+
+    return (
+      <div key={node.fullPath}>
+        <div
+          style={{ paddingLeft: `${depth * 20}px` }}
+          className={`group flex items-center gap-2 py-2 px-3 cursor-pointer rounded-lg transition-all duration-150 ${
+            isSelected
+              ? 'bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500 shadow-sm'
+              : 'hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100'
+          }`}
+        >
+          {node.children && node.children.length > 0 ? (
+            <button
+              onClick={() => toggleNode(node.fullPath)}
+              className="p-1 hover:bg-blue-100 rounded-md transition-colors"
+            >
+              {isExpanded ? (
+                <ChevronDownIcon className="w-4 h-4 text-blue-600" />
+              ) : (
+                <ChevronRightIcon className="w-4 h-4 text-gray-600" />
+              )}
+            </button>
+          ) : (
+            <div className="w-6" />
+          )}
+
+          <div
+            onClick={() => onSelectProperty(node.fullPath)}
+            className="flex-1 flex items-center gap-2"
+          >
+            <span className={`${node.children ? 'font-bold text-gray-800' : 'font-medium text-gray-700'}`}>
+              {node.key}
+            </span>
+            {!node.children && (
+              <span className="text-sm text-gray-500 truncate max-w-[200px]">
+                : {JSON.stringify(node.value)}
+              </span>
+            )}
+            {hasDoc && (
+              <div className="flex items-center gap-1 px-2 py-0.5 bg-green-100 border border-green-300 rounded-full">
+                <FileTextIcon className="w-3 h-3 text-green-600" />
+                <span className="text-xs text-green-700 font-medium">Doc</span>
+              </div>
+            )}
+          </div>
+
+          {!node.children && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onEditProperty(node.fullPath);
+              }}
+              className="p-1 hover:bg-gray-200 rounded"
+              title="編集"
+            />
+          )}
+        </div>
+
+        {node.children && isExpanded && (
+          <div>
+            {node.children.map((child) => renderNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const tree = ConfigParser.buildTree(config);
+
+  return (
+    <div className="h-full flex flex-col border-2 border-gray-100 rounded-xl bg-white shadow-sm">
+      {/* ツールバー */}
+      <div className="flex items-center gap-2 p-3 border-b-2 border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100">
+        <button
+          onClick={expandAll}
+          className="px-4 py-1.5 text-sm font-medium bg-white border-2 border-blue-200 text-blue-600 rounded-lg hover:bg-blue-50 hover:border-blue-300 transition-all duration-200 shadow-sm hover:shadow-md"
+        >
+          すべて展開
+        </button>
+        <button
+          onClick={collapseAll}
+          className="px-4 py-1.5 text-sm font-medium bg-white border-2 border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 shadow-sm hover:shadow-md"
+        >
+          すべて閉じる
+        </button>
+      </div>
+
+      {/* ツリー表示 */}
+      <div className="flex-1 overflow-y-auto p-3">
+        {tree.map((node) => renderNode(node))}
+      </div>
+    </div>
+  );
+}