@interactive-inc/docs-client 0.0.1 → 0.0.3

package/app/components/directory-layout-sidebar.tsx

@@ -1,181 +0,0 @@
-import { useSuspenseQuery } from "@tanstack/react-query"
-import {
-  Link,
-  useLocation,
-  useNavigate,
-  useRouter,
-} from "@tanstack/react-router"
-import { useEffect, useState } from "react"
-import { DirectoryFileTreeNode } from "@/components/directory-file-tree-node"
-import { Button } from "@/components/ui/button"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarProvider,
-} from "@/components/ui/sidebar"
-import { apiClient } from "@/lib/api-client"
-import { normalizePath } from "@/lib/path-utils"
-import type { DocFileNode } from "@/lib/types"
-
-type FileNode = {
-  type: 'file' | 'directory'
-  name: string
-  path: string
-  icon?: string
-  title?: string
-  children?: unknown[]
-}
-
-function isFileNode(node: unknown): node is FileNode {
-  return (
-    typeof node === 'object' &&
-    node !== null &&
-    'type' in node &&
-    'name' in node &&
-    'path' in node
-  )
-}
-
-type Props = {
-  children: React.ReactNode
-}
-
-export function DirectoryLayoutSidebar(props: Props) {
-  const [openPaths, setOpenPaths] = useState<Set<string>>(new Set())
-
-  const [selectedDirectory, setSelectedDirectory] = useState<string>("")
-
-  const _router = useRouter()
-
-  const navigate = useNavigate()
-
-  const path = useLocation({ select: (location) => location.pathname })
-
-  const query = useSuspenseQuery({
-    queryKey: ["file-tree"],
-    queryFn: async () => {
-      const response = await apiClient.api.directories.tree.$get()
-      return response.json()
-    },
-  })
-
-  const files = query.data
-
-  function getCurrentPath(path: string) {
-    const dirPath = path
-
-    const pathSegments = dirPath.split("/").filter(Boolean)
-
-    if (pathSegments.length > 0) {
-      const lastSegment = pathSegments[pathSegments.length - 1]
-      if (lastSegment === undefined) {
-        throw new Error("Last segment is undefined")
-      }
-      const isFile = lastSegment.includes(".")
-
-      if (isFile) {
-        pathSegments.pop()
-        return `/${pathSegments.join("/")}`
-      }
-    }
-
-    return dirPath
-  }
-
-  getCurrentPath(path)
-
-  useEffect(() => {
-    const collectAllDirectoryPaths = (nodes: unknown[]): string[] => {
-      const paths: string[] = []
-      for (const node of nodes) {
-        if (isFileNode(node) && node.type === "directory") {
-          const nodePath = normalizePath(node.path)
-          paths.push(nodePath)
-          if (node.children) {
-            paths.push(...collectAllDirectoryPaths(node.children))
-          }
-        }
-      }
-      return paths
-    }
-
-    const allPaths = collectAllDirectoryPaths(files)
-    setOpenPaths(new Set(allPaths))
-  }, [files])
-
-  useEffect(() => {
-    const getCurrentDirectoryFromPath = (pathname: string) => {
-      const dirPath = pathname
-      const pathSegments = dirPath.split("/").filter(Boolean)
-
-      if (pathSegments.length > 0) {
-        const lastSegment = pathSegments[pathSegments.length - 1]
-        if (lastSegment?.includes(".")) {
-          pathSegments.pop()
-          return `/${pathSegments.join("/")}`
-        }
-      }
-      return dirPath
-    }
-
-    const currentDir = getCurrentDirectoryFromPath(path)
-    const cleanDir = currentDir.startsWith("/")
-      ? currentDir.substring(1)
-      : currentDir
-    setSelectedDirectory(cleanDir)
-  }, [path])
-
-  const handleSelectDirectory = (path: string) => {
-    setSelectedDirectory(path)
-    navigate({ to: `/${path}` })
-  }
-
-  const handleToggleOpen = (path: string) => {
-    const newOpenPaths = new Set(openPaths)
-    if (newOpenPaths.has(path)) {
-      newOpenPaths.delete(path)
-    } else {
-      newOpenPaths.add(path)
-    }
-    setOpenPaths(newOpenPaths)
-  }
-
-  const renderAllDirectories = (nodes: unknown[], currentDepth = 0) => {
-    return nodes.filter(isFileNode).map((node) => (
-      <DirectoryFileTreeNode
-        key={node.path || `file-${node.name}`}
-        node={node}
-        depth={currentDepth}
-        currentPath={window.location.pathname.match(/\/(.*)$/)?.[1] || ""}
-        onSelectDirectory={handleSelectDirectory}
-        openPaths={openPaths}
-        onToggleOpen={handleToggleOpen}
-        selectedDirectory={selectedDirectory}
-      />
-    ))
-  }
-
-  return (
-    <SidebarProvider>
-      <Sidebar collapsible={"offcanvas"} variant={"inset"}>
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupLabel>{"ファイル"}</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>{renderAllDirectories(files)}</SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-        <SidebarFooter />
-      </Sidebar>
-      <SidebarInset className="overflow-hidden">{props.children}</SidebarInset>
-    </SidebarProvider>
-  )
-}

package/app/components/directory-page-view.tsx

@@ -1,208 +0,0 @@
-import { useEffect, useState } from "react"
-import { DirectoryFileListView } from "@/components/directory-file-list-view"
-import { DirectoryTableView } from "@/components/directory-table-view"
-import { SidebarButton } from "@/components/sidebar-button"
-import { EmojiPicker } from "@/components/ui/emoji-picker"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import { VscodeButton } from "@/components/vscode-button"
-import { useDirectoryQuery } from "@/hooks/use-directory-query"
-import { apiClient } from "@/lib/api-client"
-import type { DocFile, DocFileMd, DocFileUnknown, DocSchemaFieldType } from "@/lib/types"
-
-/**
- * テーブルカラムの型定義
- */
-type DocTableColumn = {
-  key: string
-  label: string
-  type: DocSchemaFieldType
-  path: string
-  options: string[] | number[]
-}
-
-function isDocFileMd(file: DocFile): file is DocFileMd {
-  return file.type === 'markdown'
-}
-
-function isDocFileUnknown(file: DocFile): file is DocFileUnknown {
-  return file.type === 'unknown'
-}
-
-function hasIsArchived(file: DocFile): file is (DocFileMd | DocFileUnknown) {
-  return file.type === 'markdown' || file.type === 'unknown'
-}
-
-type Props = {
-  currentPath: string
-}
-
-export function DirectoryPageView(props: Props) {
-  const query = useDirectoryQuery(props.currentPath)
-
-  const directoryData = query.data
-
-  // アーカイブファイルの表示状態
-  const [showArchived, setShowArchived] = useState(false)
-
-  // ファイルをタイプ別にフィルタリング
-  const allMdFiles = directoryData.files.filter((file: DocFile) => isDocFileMd(file))
-  
-  const activeMdFiles = allMdFiles.filter((file: DocFile) => {
-    return !hasIsArchived(file) || !file.isArchived
-  })
-  
-  const archivedMdFiles = allMdFiles.filter((file: DocFile) => {
-    return hasIsArchived(file) && file.isArchived
-  })
-  
-  
-  // 表示するファイルを決定
-  const mdFiles = showArchived ? allMdFiles : activeMdFiles
-  
-  const otherFiles = directoryData.files.filter((file: DocFile) => {
-    return isDocFileUnknown(file) && (hasIsArchived(file) ? !file.isArchived : true)
-  })
-
-  const [title, setTitle] = useState("")
-  const [description, setDescription] = useState("")
-  const [icon, setIcon] = useState("📁")
-
-  useEffect(() => {
-    if (directoryData?.indexFile) {
-      setTitle(directoryData.indexFile.content.title || "")
-      setDescription(directoryData.indexFile.content.description || "")
-      setIcon(directoryData.indexFile.content.frontMatter?.icon || "📁")
-    }
-  }, [directoryData])
-
-  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(e.target.value)
-  }
-
-  const handleTitleBlur = async () => {
-    await apiClient.api.directories[":path{.+}"].$put({
-      param: {
-        path: props.currentPath.startsWith("/") ? props.currentPath.substring(1) : props.currentPath,
-      },
-      json: {
-        title: title,
-        description: null,
-        icon: null,
-        schema: null,
-      },
-    })
-  }
-
-  const handleDescriptionChange = (
-    e: React.ChangeEvent<HTMLTextAreaElement>,
-  ) => {
-    setDescription(e.target.value)
-  }
-
-  const handleDescriptionBlur = async () => {
-    await apiClient.api.directories[":path{.+}"].$put({
-      param: {
-        path: props.currentPath.startsWith("/") ? props.currentPath.substring(1) : props.currentPath,
-      },
-      json: {
-        title: null,
-        description: description,
-        icon: null,
-        schema: null,
-      },
-    })
-  }
-
-  const handleIconSelect = async (newIcon: string) => {
-    console.log("Selected icon:", newIcon)
-    console.log("Current path:", props.currentPath)
-    setIcon(newIcon)
-    try {
-      const response = await apiClient.api.directories[":path{.+}"].$put({
-        param: {
-          path: props.currentPath.startsWith("/") ? props.currentPath.substring(1) : props.currentPath,
-        },
-        json: {
-          title: null,
-          description: null,
-          icon: newIcon,
-          schema: null,
-        },
-      })
-      const result = await response.json()
-      console.log("API response:", result)
-      // キャッシュを更新して最新データを取得
-      await query.refetch()
-    } catch (error) {
-      console.error("Error updating icon:", error)
-    }
-  }
-
-  return (
-    <div className="h-full overflow-x-hidden">
-      <div className="space-y-2 p-2">
-        <div className="flex items-center gap-2">
-          <SidebarButton />
-          {directoryData.indexFile && (
-            <VscodeButton
-              cwd={directoryData.cwd}
-              filePath={directoryData.indexFile.path.fullPath}
-              size="icon"
-              variant="outline"
-            />
-          )}
-          <EmojiPicker currentIcon={icon} onIconSelect={handleIconSelect} />
-          <Input
-            value={title}
-            onChange={handleTitleChange}
-            onBlur={handleTitleBlur}
-            placeholder="タイトルを入力"
-            className="flex-1"
-          />
-        </div>
-        <Textarea
-          value={description}
-          onChange={handleDescriptionChange}
-          onBlur={handleDescriptionBlur}
-          placeholder="説明を入力"
-          rows={2}
-        />
-        <DirectoryTableView
-          files={mdFiles}
-          columns={(() => {
-            const schema = directoryData.indexFile?.content.frontMatter?.schema
-            if (!schema) return []
-            
-            const columns = Object.entries(schema).map(([key, fieldValue]) => {
-              // fieldValueが正しいオブジェクトであることを確認
-              if (!fieldValue || typeof fieldValue !== 'object' || !('type' in fieldValue)) {
-                return null
-              }
-              
-              const value = fieldValue as Record<string, unknown>
-              return { 
-                key, 
-                label: typeof value.title === 'string' ? value.title : key, 
-                type: String(value.type) as DocTableColumn['type'], 
-                path: (value.type === 'relation' || value.type === 'multi-relation') && typeof value.path === 'string' ? value.path : "", 
-                options: Array.isArray(value.options) ? value.options : [] 
-              }
-            }).filter((col): col is NonNullable<typeof col> => col !== null)
-            return columns
-          })()}
-          directoryPath={props.currentPath}
-          relations={directoryData.relations}
-          onDataChanged={() => query.refetch()}
-          archivedCount={archivedMdFiles.length}
-          showArchived={showArchived}
-          onToggleArchived={() => setShowArchived(!showArchived)}
-        />
-        <DirectoryFileListView
-          files={otherFiles}
-          onDataChanged={() => query.refetch()}
-        />
-      </div>
-    </div>
-  )
-}