@interactive-inc/docs-client 0.0.1 → 0.0.2

package/app/components/file-view/file-header.tsx

@@ -1,115 +0,0 @@
-import { useMutation } from "@tanstack/react-query"
-import { useNavigate } from "@tanstack/react-router"
-import { ArrowLeft } from "lucide-react"
-import { useState, useEffect } from "react"
-import { ReloadButton } from "@/components/reload-button"
-import { SidebarButton } from "@/components/sidebar-button"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { VscodeButton } from "@/components/vscode-button"
-import { apiClient } from "@/lib/api-client"
-import { normalizePath } from "@/lib/path-utils"
-
-type Props = {
-  filePath: string
-  fileData: {
-    path: string
-    title: string | null
-  }
-  cwd: string
-  onReload: () => void
-  isLoading: boolean
-  children?: React.ReactNode
-}
-
-export function FileHeader(props: Props) {
-  const navigate = useNavigate()
-
-  const getInitialTitle = () => {
-    if (props.fileData.title) return props.fileData.title
-    return props.filePath.split("/").pop()?.replace(/\.md$/, "") || ""
-  }
-
-  const [title, setTitle] = useState(getInitialTitle())
-  
-  // propsが変更されたときにタイトルを更新
-  useEffect(() => {
-    setTitle(getInitialTitle())
-  }, [props.fileData.title, props.filePath])
-
-  const updateTitleMutation = useMutation({
-    async mutationFn(newTitle: string) {
-      const normalizedPath = normalizePath(props.filePath)
-
-      await apiClient.api.files[":path{.+}"].$put({
-        param: {
-          path: normalizedPath,
-        },
-        json: {
-          title: newTitle,
-          properties: null,
-          content: null,
-          description: null,
-          isArchived: null,
-        },
-      })
-    },
-    onSuccess() {
-      props.onReload()
-    },
-  })
-
-  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newTitle = e.target.value
-    setTitle(newTitle)
-  }
-
-  const handleTitleBlur = async () => {
-    if (props.fileData.path.endsWith(".md")) {
-      updateTitleMutation.mutate(title)
-    }
-  }
-
-  const handleBackClick = () => {
-    const pathSegments = props.filePath.split("/")
-    pathSegments.pop()
-
-    // アーカイブディレクトリ（_）を削除
-    const filteredSegments = pathSegments.filter((segment) => segment !== "_")
-    const directoryPath = filteredSegments.join("/")
-
-    navigate({ to: `/${directoryPath}` })
-  }
-
-  return (
-    <>
-      <div className="flex items-center gap-2">
-        <SidebarButton />
-        <VscodeButton
-          cwd={props.cwd}
-          filePath={props.fileData.path}
-          size="icon"
-          variant="outline"
-        />
-        <Button onClick={handleBackClick} size="icon" variant="outline">
-          <ArrowLeft className="h-4 w-4" />
-        </Button>
-
-        <Input
-          value={title}
-          onChange={handleTitleChange}
-          onBlur={handleTitleBlur}
-          placeholder="タイトルを入力"
-          className="flex-1"
-        />
-        <ReloadButton
-          onReload={props.onReload}
-          size="icon"
-          variant="outline"
-          disabled={props.isLoading}
-        />
-        {props.children}
-      </div>
-    </>
-  )
-}

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

@@ -1,165 +0,0 @@
-import { useState } from "react"
-import { CsvFileView } from "@/components/file-view/csv-file-view"
-import { DefaultFileViewer } from "@/components/file-view/default-file-view"
-import { JsonFileEditor } from "@/components/file-view/json-file-editor"
-import { MarkdownFileView } from "@/components/file-view/markdown-file-view"
-import { useDirectoryQuery } from "@/hooks/use-directory-query"
-import { useFilePropertiesMutation } from "@/hooks/use-file-properties-mutation"
-import { useFileQuery } from "@/hooks/use-file-query"
-import { apiClient } from "@/lib/api-client"
-import { normalizePath } from "@/lib/path-utils"
-
-type Props = {
-  filePath: string
-}
-
-export function FilePageView(props: Props) {
-  const fileQuery = useFileQuery(props.filePath)
-
-  const directoryQuery = useDirectoryQuery(props.filePath)
-
-  const fileData = fileQuery.data
-
-  const directorySchema =
-    directoryQuery.data?.indexFile?.content?.frontMatter?.schema || {}
-
-  const relations = directoryQuery.data?.relations || []
-
-  // contentがオブジェクトの場合はbodyプロパティを使用
-  const initialContent = typeof fileData?.content === 'string' 
-    ? fileData.content 
-    : fileData?.content?.body || ""
-  const [currentContent, setCurrentContent] = useState(initialContent)
-
-  const updateProperties = useFilePropertiesMutation()
-
-  const onChange = async (newContent: string) => {
-    const normalizedPath = normalizePath(props.filePath)
-
-    const result = await apiClient.api.files[":path{.+}"].$put({
-      param: { path: normalizedPath },
-      json: {
-        title: null,
-        properties: null,
-        content: newContent,
-        description: null,
-        isArchived: null,
-      },
-    })
-
-    const data = await result.json()
-    if ("content" in data && typeof data.content === "string") {
-      setCurrentContent(data.content)
-    }
-  }
-
-  const handleReload = async () => {
-    const result = await fileQuery.refetch()
-    if (result.data === undefined) return
-    const content = typeof result.data.content === 'string'
-      ? result.data.content
-      : result.data.content?.body || ""
-    setCurrentContent(content)
-  }
-
-  const handleFrontMatterUpdate = async (key: string, value: unknown) => {
-    await updateProperties.mutateAsync({
-      path: props.filePath,
-      field: key,
-      value: value,
-    })
-    // フロントマター更新後にファイル内容を再取得
-    handleReload()
-  }
-
-  if (!fileData) {
-    return <div>ファイルが見つかりません</div>
-  }
-
-  // pathオブジェクトから実際のパス文字列を取得
-  const filePath = typeof fileData.path === 'string' ? fileData.path : fileData.path?.path
-  
-  if (filePath?.endsWith(".md")) {
-    return (
-      <main className="p-2">
-        <MarkdownFileView
-          filePath={props.filePath}
-          fileData={{ path: filePath, title: fileData.content.title || null }}
-          cwd={directoryQuery.data.cwd}
-          content={currentContent}
-          onChange={onChange}
-          frontMatter={(() => {
-            // frontMatterはcontent内にある
-            const fm = fileData.content.frontMatter || {}
-            // スキーマやアイコンなどの複雑なオブジェクトを除外し、プリミティブ値のみを返す
-            const filtered: Record<
-              string,
-              string | number | boolean | string[] | number[] | boolean[] | null
-            > = {}
-            for (const [key, value] of Object.entries(fm)) {
-              if (key === "schema" || key === "icon") continue
-              if (
-                typeof value === "string" ||
-                typeof value === "number" ||
-                typeof value === "boolean" ||
-                value === null ||
-                (Array.isArray(value) &&
-                  value.every(
-                    (v) =>
-                      typeof v === "string" ||
-                      typeof v === "number" ||
-                      typeof v === "boolean",
-                  ))
-              ) {
-                filtered[key] = value as
-                  | string
-                  | number
-                  | boolean
-                  | string[]
-                  | number[]
-                  | boolean[]
-                  | null
-              }
-            }
-            return filtered
-          })()}
-          onFrontMatterUpdate={handleFrontMatterUpdate}
-          onReload={handleReload}
-          isLoading={fileQuery.isLoading}
-          schema={directorySchema}
-          relations={relations}
-        />
-      </main>
-    )
-  }
-
-  if (filePath?.endsWith(".csv")) {
-    return (
-      <main className="p-2">
-        <CsvFileView
-          filePath={props.filePath}
-          fileData={{ path: filePath, title: fileData.content.title || null }}
-          cwd={directoryQuery.data.cwd}
-          content={currentContent}
-          onChange={onChange}
-          onReload={handleReload}
-          isLoading={fileQuery.isLoading}
-        />
-      </main>
-    )
-  }
-
-  if (filePath?.endsWith(".json")) {
-    return (
-      <main className="p-2">
-        <JsonFileEditor content={currentContent} />
-      </main>
-    )
-  }
-
-  return (
-    <main className="p-2">
-      <DefaultFileViewer content={currentContent} />
-    </main>
-  )
-}

package/app/components/file-view/front-matter-input-field.tsx

@@ -1,157 +0,0 @@
-import { useEffect, useState } from "react"
-import { Input } from "@/components/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import type { DocRelationFile, DocSchemaField } from "@/lib/types"
-import { MultiRelationSelect } from "./multi-relation-select"
-import { SingleRelationSelect } from "./single-relation-select"
-
-type Props = {
-  fieldKey: string
-  value: unknown
-  originalValue: unknown
-  onValueChange: (key: string, value: string) => void
-  onBlur: (key: string, value: string) => void
-  schemaField?: DocSchemaField
-  relationOptions?: DocRelationFile[]
-}
-
-/**
- * Front Matter用の入力フィールドを表示するコンポーネント
- */
-export function FrontMatterInputField(props: Props) {
-  const [localValue, setLocalValue] = useState(() => {
-    if (Array.isArray(props.value)) {
-      return props.value.join(", ")
-    }
-    return String(props.value)
-  })
-
-  useEffect(() => {
-    if (Array.isArray(props.value)) {
-      setLocalValue(props.value.join(", "))
-    } else {
-      setLocalValue(String(props.value))
-    }
-  }, [props.value])
-
-  const _getDisplayValue = (value: unknown): string => {
-    if (Array.isArray(value)) {
-      return value.join(", ")
-    }
-    return String(value)
-  }
-
-  // リレーション型の場合
-  if (
-    props.schemaField &&
-    props.schemaField.type === "relation" &&
-    props.schemaField.path
-  ) {
-    return (
-      <SingleRelationSelect
-        value={(props.value as string) || ""}
-        relationOptions={props.relationOptions}
-        onValueChange={(value) => props.onValueChange(props.fieldKey, value)}
-      />
-    )
-  }
-
-  // 配列リレーション型の場合
-  if (
-    props.schemaField &&
-    props.schemaField.type === "multi-relation" &&
-    props.schemaField.path
-  ) {
-    // 値を配列に正規化
-    let normalizedValue: string[] = []
-    if (Array.isArray(props.value)) {
-      normalizedValue = props.value.filter(
-        (v) => typeof v === "string" && v.trim() !== "",
-      )
-    } else if (typeof props.value === "string" && props.value.trim() !== "") {
-      normalizedValue = props.value
-        .split(",")
-        .map((v) => v.trim())
-        .filter((v) => v !== "")
-    }
-
-    return (
-      <MultiRelationSelect
-        value={normalizedValue}
-        relationOptions={props.relationOptions}
-        onValueChange={(value) =>
-          props.onValueChange(props.fieldKey, value.join(", "))
-        }
-        wrap={true}
-      />
-    )
-  }
-
-  if (typeof props.originalValue === "boolean") {
-    return (
-      <Select
-        value={String(props.value)}
-        onValueChange={(value) => props.onValueChange(props.fieldKey, value)}
-      >
-        <SelectTrigger className="w-full">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="true">true</SelectItem>
-          <SelectItem value="false">false</SelectItem>
-        </SelectContent>
-      </Select>
-    )
-  }
-
-  if (typeof props.originalValue === "number") {
-    return (
-      <Input
-        type="number"
-        value={localValue}
-        onChange={(e) => setLocalValue(e.target.value)}
-        onBlur={(e) => props.onBlur(props.fieldKey, e.target.value)}
-        className="flex-1"
-        placeholder={`${props.fieldKey}の値を入力`}
-      />
-    )
-  }
-
-  if (Array.isArray(props.originalValue)) {
-    const placeholder =
-      props.originalValue.length > 0 &&
-      typeof props.originalValue[0] === "number"
-        ? "カンマ区切りで数値を入力 (例: 1, 2, 3)"
-        : props.originalValue.length > 0 &&
-            typeof props.originalValue[0] === "boolean"
-          ? "カンマ区切りでtrue/falseを入力 (例: true, false, true)"
-          : "カンマ区切りで入力 (例: item1, item2, item3)"
-
-    return (
-      <Input
-        value={localValue}
-        onChange={(e) => setLocalValue(e.target.value)}
-        onBlur={(e) => props.onBlur(props.fieldKey, e.target.value)}
-        className="flex-1"
-        placeholder={placeholder}
-      />
-    )
-  }
-
-  // string型の場合
-  return (
-    <Input
-      value={localValue}
-      onChange={(e) => setLocalValue(e.target.value)}
-      onBlur={(e) => props.onBlur(props.fieldKey, e.target.value)}
-      className="flex-1"
-      placeholder={`${props.fieldKey}の値を入力`}
-    />
-  )
-}

package/app/components/file-view/front-matter-view.tsx

@@ -1,30 +0,0 @@
-import { Card } from "@/components/ui/card"
-import { RenderFrontMatterValue } from "./render-front-matter-value"
-
-type Props = {
-  frontMatter: Record<string, string | string[]> | null
-}
-
-/**
- * Front-matterをより見やすく表示するコンポーネント（表示のみ）
- */
-export function FrontMatterView(props: Props) {
-  const frontMatter = props.frontMatter
-  // front-matterが空の場合は表示しない
-  if (!frontMatter || Object.keys(frontMatter).length === 0) {
-    return null
-  }
-
-  return (
-    <Card className="gap-0 p-2">
-      {Object.entries(frontMatter).map(([key, value]) => (
-        <div key={key}>
-          <div className="flex gap-x-2">
-            <span className="font-bold">{key}</span>
-            <RenderFrontMatterValue value={value} />
-          </div>
-        </div>
-      ))}
-    </Card>
-  )
-}

package/app/components/file-view/json-file-editor.tsx

@@ -1,38 +0,0 @@
-import { useEffect, useState } from "react"
-
-type Props = {
-  content: string
-}
-
-export function JsonFileEditor(props: Props) {
-  const [formattedJson, setFormattedJson] = useState<string>("")
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    try {
-      const jsonData = JSON.parse(props.content)
-      setFormattedJson(JSON.stringify(jsonData, null, 2))
-      setError(null)
-    } catch (_e) {
-      setError(
-        "JSONのパースに失敗しました。有効なJSONではない可能性があります。",
-      )
-      setFormattedJson(props.content) // JSONのパースに失敗した場合はそのまま表示
-    }
-  }, [props.content])
-
-  return (
-    <div>
-      {error && (
-        <div className="mb-4 rounded border border-red-700 bg-red-900/30 p-2 text-red-300 text-sm">
-          {error}
-        </div>
-      )}
-      <div className="overflow-x-auto rounded bg-gray-800 p-4 text-white">
-        <pre className="whitespace-pre-wrap font-mono text-green-300">
-          {formattedJson}
-        </pre>
-      </div>
-    </div>
-  )
-}

package/app/components/file-view/markdown-file-view.tsx

@@ -1,71 +0,0 @@
-import { marked } from "marked"
-import type { ReactNode } from "react"
-import { ArchiveRestoreBanner } from "@/components/file-view/archive-restore-banner"
-import { EditableFrontMatterView } from "@/components/file-view/editable-front-matter-view"
-import { FileHeader } from "@/components/file-view/file-header"
-import { Card } from "@/components/ui/card"
-import type { DocRelation, DocSchemaRecord, DocFileMdFrontMatter } from "@/lib/types"
-
-import "github-markdown-css"
-
-type Props = {
-  filePath: string
-  fileData: {
-    path: string
-    title: string | null
-  }
-  cwd: string
-  content: string
-  onChange(content: string): void
-  frontMatter: DocFileMdFrontMatter
-  onFrontMatterUpdate: (key: string, value: unknown) => void
-  onReload: () => void
-  isLoading: boolean
-  schema?: DocSchemaRecord
-  relations?: DocRelation[]
-}
-
-export function MarkdownFileView(props: Props): ReactNode {
-  const frontMatter = props.frontMatter
-
-  const hasFrontMatter =
-    frontMatter !== null && Object.keys(frontMatter || {}).length > 0
-
-  const html = marked.parse(props.content)
-
-  // アーカイブファイルかどうかを判定
-  const isArchived = props.filePath.includes("/_/")
-
-  return (
-    <div className="h-full space-y-2">
-      {isArchived && (
-        <ArchiveRestoreBanner
-          filePath={props.filePath}
-          onRestore={props.onReload}
-        />
-      )}
-      <FileHeader
-        filePath={props.filePath}
-        fileData={props.fileData}
-        cwd={props.cwd}
-        onReload={props.onReload}
-        isLoading={props.isLoading}
-      />
-      {hasFrontMatter && (
-        <EditableFrontMatterView
-          frontMatter={frontMatter}
-          onUpdate={props.onFrontMatterUpdate}
-          schema={props.schema}
-          relations={props.relations}
-        />
-      )}
-      <Card className="overflow-hidden rounded-md p-0">
-        <div
-          className="markdown-body p-4"
-          // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
-      </Card>
-    </div>
-  )
-}