@interactive-inc/docs-client 0.0.1

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

@@ -0,0 +1,165 @@
+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

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,71 @@
+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>
+  )
+}

package/app/components/file-view/multi-relation-select.tsx

@@ -0,0 +1,129 @@
+import { X } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import type { DocRelationFile } from "@/lib/types"
+
+type Props = {
+  value: string[]
+  onValueChange: (value: string[]) => void
+  relationOptions?: DocRelationFile[]
+  wrap?: boolean
+}
+
+/**
+ * 複数リレーション用のSelectコンポーネント
+ */
+export function MultiRelationSelect(props: Props) {
+  const options = props.relationOptions || []
+  const selectedValues = Array.isArray(props.value) ? props.value : []
+
+  // 選択済みの値を除外した利用可能なオプション
+  const availableOptions = options.filter(
+    (option) => !selectedValues.includes(option.name),
+  )
+
+  const addValue = (newValue: string) => {
+    if (newValue && !selectedValues.includes(newValue)) {
+      const updatedValues = [...selectedValues, newValue]
+      props.onValueChange(updatedValues)
+    }
+  }
+
+  const removeValue = (valueToRemove: string) => {
+    const updatedValues = selectedValues.filter((val) => val !== valueToRemove)
+    props.onValueChange(updatedValues)
+  }
+
+  // wrapありの場合（ファイル詳細用）
+  if (props.wrap) {
+    return (
+      <div className="space-y-2">
+        {/* 新しい値を追加するSelect */}
+        {availableOptions.length > 0 && (
+          <Select onValueChange={addValue}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="項目を追加" />
+            </SelectTrigger>
+            <SelectContent>
+              {availableOptions.map((option) => (
+                <SelectItem key={option.name} value={option.name}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+        {/* 選択済みの値を表示（wrap対応） */}
+        <div className="flex flex-wrap gap-2">
+          {selectedValues.toReversed().map((value) => {
+            const option = options.find((opt) => opt.name === value)
+            const label = option?.label || value
+            return (
+              <Button
+                key={value}
+                variant={"outline"}
+                onClick={() => removeValue(value)}
+                className="h-auto break-words text-left"
+              >
+                <span className="flex-1">{label}</span>
+                <X className="ml-2 w-4 flex-shrink-0 text-muted-foreground" />
+              </Button>
+            )
+          })}
+        </div>
+        {selectedValues.length === 0 && availableOptions.length === 0 && (
+          <div className="text-muted-foreground text-sm">
+            利用可能なオプションがありません
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // wrapなしの場合（テーブル用）
+  return (
+    <div className="flex gap-2">
+      {/* 新しい値を追加するSelect */}
+      {availableOptions.length > 0 && (
+        <Select onValueChange={addValue}>
+          <SelectTrigger className="min-w-24">
+            <SelectValue placeholder="項目を追加" />
+          </SelectTrigger>
+          <SelectContent>
+            {availableOptions.map((option) => (
+              <SelectItem key={option.name} value={option.name}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+      {/* 選択済みの値を表示（横並び） */}
+      {selectedValues.toReversed().map((value) => {
+        const option = options.find((opt) => opt.name === value)
+        const label = option?.label || value
+        return (
+          <Button
+            key={value}
+            variant={"outline"}
+            onClick={() => removeValue(value)}
+          >
+            <span>{label}</span>
+            <X className="w-4 text-muted-foreground" />
+          </Button>
+        )
+      })}
+      {selectedValues.length === 0 && availableOptions.length === 0 && (
+        <div className="text-muted-foreground text-sm">
+          利用可能なオプションがありません
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,57 @@
+type Props = {
+  value: unknown
+}
+
+/**
+ * フロントマターの値を再帰的にレンダリングする
+ */
+export function RenderFrontMatterValue(props: Props) {
+  const value = props.value
+
+  if (value === null || value === undefined) {
+    return <span>null</span>
+  }
+
+  if (typeof value === "boolean") {
+    return <span>{value.toString()}</span>
+  }
+
+  if (typeof value === "number") {
+    return <span>{value}</span>
+  }
+
+  if (typeof value === "string") {
+    return <span>"{value}"</span>
+  }
+
+  if (Array.isArray(value)) {
+    return (
+      <div>
+        {value.map((item, index) => (
+          <div
+            key={`item-${index}-${String(item).substring(0, 8)}`}
+            className="flex"
+          >
+            <span className="mr-2">-</span>
+            <RenderFrontMatterValue value={item} />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (typeof value === "object") {
+    return (
+      <div>
+        {Object.entries(value as Record<string, unknown>).map(([key, val]) => (
+          <div key={key} className="flex">
+            <span className="mr-2">{key}:</span>
+            <RenderFrontMatterValue value={val} />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return <span>{String(value)}</span>
+}

package/app/components/file-view/single-relation-select.tsx

@@ -0,0 +1,41 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+import type { DocRelationFile } from "@/lib/types"
+
+type Props = {
+  value: string
+  onValueChange: (value: string) => void
+  relationOptions?: DocRelationFile[]
+}
+
+/**
+ * 単一リレーション用のSelectコンポーネント
+ */
+export function SingleRelationSelect(props: Props) {
+  const options = props.relationOptions || []
+
+  const handleValueChange = (value: string) => {
+    props.onValueChange(value)
+  }
+
+  return (
+    <Select value={props.value || ""} onValueChange={handleValueChange}>
+      <SelectTrigger className="w-full bg-background">
+        <SelectValue placeholder="リレーションを選択" />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.name} value={option.name}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}