@interactive-inc/docs-client 0.0.1

package/app/components/editable-table-cell/multi-select-text-editable-cell.tsx

@@ -0,0 +1,82 @@
+import { X } from "lucide-react"
+import { useState } from "react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+
+type Props = {
+  value: string[]
+  options: string[]
+  onUpdate: (value: string[]) => void
+}
+
+/**
+ * 複数選択テキストセル
+ */
+export function MultiSelectTextEditableCell(props: Props) {
+  const [isOpen, setIsOpen] = useState(false)
+  const currentValues = props.value || []
+
+  const handleToggle = (option: string) => {
+    const isSelected = currentValues.includes(option)
+    const newValues = isSelected
+      ? currentValues.filter((v) => v !== option)
+      : [...currentValues, option]
+    props.onUpdate(newValues)
+  }
+
+  const handleRemove = (value: string) => {
+    const newValues = currentValues.filter((v) => v !== value)
+    props.onUpdate(newValues)
+  }
+
+  return (
+    <div className="relative">
+      <div className="flex min-h-8 flex-wrap gap-1 rounded-md border p-2">
+        {currentValues.map((value) => (
+          <Badge
+            key={value}
+            variant="secondary"
+            className="flex items-center gap-1"
+          >
+            {value}
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-4 w-4 p-0"
+              onClick={() => handleRemove(value)}
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          </Badge>
+        ))}
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setIsOpen(!isOpen)}
+          className="text-muted-foreground"
+        >
+          追加
+        </Button>
+      </div>
+      {isOpen && (
+        <div className="absolute z-10 mt-1 w-full rounded-md border bg-white shadow-lg">
+          {props.options
+            .filter((option) => !currentValues.includes(option))
+            .map((option) => (
+              <button
+                type="button"
+                key={option}
+                className="w-full px-3 py-2 text-left hover:bg-gray-100"
+                onClick={() => {
+                  handleToggle(option)
+                  setIsOpen(false)
+                }}
+              >
+                {option}
+              </button>
+            ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/app/components/editable-table-cell/multi-text-editable-cell.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react"
+import { Input } from "@/components/ui/input"
+
+type Props = {
+  value: unknown
+  onUpdate: (value: unknown) => void
+}
+
+export function MultiTextEditableCell(props: Props) {
+  const formatValue = (value: unknown): string => {
+    if (value === undefined || value === null) {
+      return ""
+    }
+    return Array.isArray(value) ? value.join(", ") : ""
+  }
+
+  const [editValue, setEditValue] = useState(formatValue(props.value))
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    setEditValue(formatValue(props.value))
+  }, [props.value])
+
+  const parseValue = (text: string): unknown => {
+    if (text === "") {
+      return undefined
+    }
+    return text
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean)
+  }
+
+  const displayValue = formatValue(props.value)
+
+  const handleBlur = () => {
+    const parsedValue = parseValue(editValue)
+    if (parsedValue !== props.value) {
+      props.onUpdate(parsedValue)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleBlur()
+    }
+    if (e.key === "Escape") {
+      setEditValue(displayValue)
+    }
+  }
+
+  return (
+    <Input
+      type="text"
+      value={editValue}
+      onChange={(e) => setEditValue(e.target.value)}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      placeholder={displayValue || "-"}
+    />
+  )
+}

package/app/components/editable-table-cell/number-editable-cell.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react"
+import { Input } from "@/components/ui/input"
+
+type Props = {
+  value: number | null
+  onUpdate: (value: number | null) => void
+}
+
+export function NumberEditableCell(props: Props) {
+  const [_isEditing, setIsEditing] = useState(false)
+
+  const displayValue =
+    props.value !== undefined && props.value !== null ? String(props.value) : ""
+  const [editValue, setEditValue] = useState(displayValue)
+
+  useEffect(() => {
+    setEditValue(displayValue)
+  }, [displayValue])
+
+  const _handleClick = () => {
+    setIsEditing(true)
+    setEditValue(props.value ? String(props.value) : "")
+  }
+
+  const handleBlur = () => {
+    setIsEditing(false)
+    const num = Number(editValue)
+    const parsedValue =
+      editValue === "" ? undefined : Number.isNaN(num) ? undefined : num
+    if (parsedValue !== props.value) {
+      props.onUpdate(parsedValue ?? null)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleBlur()
+    }
+    if (e.key === "Escape") {
+      setIsEditing(false)
+      setEditValue(props.value ? String(props.value) : "")
+    }
+  }
+
+  return (
+    <Input
+      type="number"
+      value={editValue}
+      onChange={(e) => setEditValue(e.target.value)}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+    />
+  )
+}

package/app/components/editable-table-cell/relation-editable-cell.tsx

@@ -0,0 +1,20 @@
+import { SingleRelationSelect } from "@/components/file-view/single-relation-select"
+import type { DocRelationFile } from "@/lib/types"
+
+type Props = {
+  value: unknown
+  onUpdate: (value: unknown) => void
+  relationOptions?: DocRelationFile[]
+}
+
+export function RelationEditableCell(props: Props) {
+  return (
+    <SingleRelationSelect
+      value={(props.value as string) || ""}
+      relationOptions={props.relationOptions}
+      onValueChange={(value) => {
+        props.onUpdate(value)
+      }}
+    />
+  )
+}

package/app/components/editable-table-cell/select-number-editable-cell.tsx

@@ -0,0 +1,43 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+type Props = {
+  value: number
+  options: number[]
+  onValueChange: (value: number) => void
+}
+
+/**
+ * 数値選択セル
+ */
+export function SelectNumberEditableCell(props: Props) {
+  const handleValueChange = (value: string) => {
+    const numValue = Number.parseInt(value, 10)
+    if (!Number.isNaN(numValue)) {
+      props.onValueChange(numValue)
+    }
+  }
+
+  return (
+    <Select
+      value={props.value?.toString() || ""}
+      onValueChange={handleValueChange}
+    >
+      <SelectTrigger className="w-full bg-background">
+        <SelectValue placeholder="選択してください" />
+      </SelectTrigger>
+      <SelectContent>
+        {props.options.map((option) => (
+          <SelectItem key={option} value={option.toString()}>
+            {option}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/app/components/editable-table-cell/select-text-editable-cell.tsx

@@ -0,0 +1,33 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+type Props = {
+  value: string
+  options: string[]
+  onValueChange: (value: string) => void
+}
+
+/**
+ * テキスト選択セル
+ */
+export function SelectTextEditableCell(props: Props) {
+  return (
+    <Select value={props.value || ""} onValueChange={props.onValueChange}>
+      <SelectTrigger className="w-full bg-background">
+        <SelectValue placeholder="選択してください" />
+      </SelectTrigger>
+      <SelectContent>
+        {props.options.map((option) => (
+          <SelectItem key={option} value={option}>
+            {option}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/app/components/editable-table-cell/string-editable-cell.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react"
+import { Input } from "@/components/ui/input"
+
+type Props = {
+  value: unknown
+  onUpdate: (value: unknown) => void
+}
+
+export function StringEditableCell(props: Props) {
+  const displayValue = props.value ? String(props.value) : ""
+  const [editValue, setEditValue] = useState(displayValue)
+
+  useEffect(() => {
+    setEditValue(displayValue)
+  }, [displayValue])
+
+  const handleBlur = () => {
+    if (editValue !== props.value) {
+      props.onUpdate(editValue || undefined)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleBlur()
+    }
+    if (e.key === "Escape") {
+      setEditValue(displayValue)
+    }
+  }
+
+  return (
+    <Input
+      type="text"
+      value={editValue}
+      onChange={(e) => setEditValue(e.target.value)}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      placeholder={displayValue || "-"}
+    />
+  )
+}

package/app/components/editable-table-cell.tsx

@@ -0,0 +1,129 @@
+import type { DocRelationFile } from "@/lib/types"
+import { BooleanEditableCell } from "./editable-table-cell/boolean-editable-cell"
+import { MultiBooleanEditableCell } from "./editable-table-cell/multi-boolean-editable-cell"
+import { MultiNumberEditableCell } from "./editable-table-cell/multi-number-editable-cell"
+import { MultiRelationEditableCell } from "./editable-table-cell/multi-relation-editable-cell"
+import { MultiSelectNumberEditableCell } from "./editable-table-cell/multi-select-number-editable-cell"
+import { MultiSelectTextEditableCell } from "./editable-table-cell/multi-select-text-editable-cell"
+import { MultiTextEditableCell } from "./editable-table-cell/multi-text-editable-cell"
+import { NumberEditableCell } from "./editable-table-cell/number-editable-cell"
+import { RelationEditableCell } from "./editable-table-cell/relation-editable-cell"
+import { SelectNumberEditableCell } from "./editable-table-cell/select-number-editable-cell"
+import { SelectTextEditableCell } from "./editable-table-cell/select-text-editable-cell"
+import { StringEditableCell } from "./editable-table-cell/string-editable-cell"
+
+type Props = {
+  value: unknown
+  type: string
+  onUpdate: (value: unknown) => void
+  path?: string | null
+  relationOptions?: DocRelationFile[]
+  selectOptions?: string[] | number[]
+}
+
+export function EditableTableCell(props: Props) {
+  // Boolean型の場合
+  if (props.type === "boolean") {
+    return <BooleanEditableCell value={props.value} onUpdate={props.onUpdate} />
+  }
+
+  // 数値型の場合
+  if (props.type === "number") {
+    return (
+      <NumberEditableCell
+        value={props.value as number}
+        onUpdate={props.onUpdate}
+      />
+    )
+  }
+
+  // 単一リレーション型の場合
+  if (props.type === "relation") {
+    return (
+      <RelationEditableCell
+        value={props.value}
+        onUpdate={props.onUpdate}
+        relationOptions={props.relationOptions}
+      />
+    )
+  }
+
+  // 複数リレーション型の場合
+  if (props.type === "multi-relation") {
+    return (
+      <MultiRelationEditableCell
+        value={props.value}
+        onUpdate={props.onUpdate}
+        relationOptions={props.relationOptions}
+      />
+    )
+  }
+
+  // 複数テキスト型の場合
+  if (props.type === "multi-text") {
+    return (
+      <MultiTextEditableCell value={props.value} onUpdate={props.onUpdate} />
+    )
+  }
+
+  // 複数数値型の場合
+  if (props.type === "multi-number") {
+    return (
+      <MultiNumberEditableCell value={props.value} onUpdate={props.onUpdate} />
+    )
+  }
+
+  // 複数Boolean型の場合
+  if (props.type === "multi-boolean") {
+    return (
+      <MultiBooleanEditableCell value={props.value} onUpdate={props.onUpdate} />
+    )
+  }
+
+  // 選択テキスト型の場合
+  if (props.type === "select-text" && props.selectOptions) {
+    return (
+      <SelectTextEditableCell
+        value={props.value as string}
+        options={props.selectOptions as string[]}
+        onValueChange={props.onUpdate}
+      />
+    )
+  }
+
+  // 選択数値型の場合
+  if (props.type === "select-number" && props.selectOptions) {
+    return (
+      <SelectNumberEditableCell
+        value={props.value as number}
+        options={props.selectOptions as number[]}
+        onValueChange={props.onUpdate}
+      />
+    )
+  }
+
+  // 複数選択テキスト型の場合
+  if (props.type === "multi-select-text" && props.selectOptions) {
+    return (
+      <MultiSelectTextEditableCell
+        value={props.value as string[]}
+        options={props.selectOptions as string[]}
+        onUpdate={props.onUpdate}
+      />
+    )
+  }
+
+  // 複数選択数値型の場合
+  if (props.type === "multi-select-number" && props.selectOptions) {
+    return (
+      <MultiSelectNumberEditableCell
+        value={props.value as number[]}
+        options={props.selectOptions as number[]}
+        onUpdate={props.onUpdate}
+      />
+    )
+  }
+
+  // その他（文字列型）の場合
+  return <StringEditableCell value={props.value} onUpdate={props.onUpdate} />
+}

package/app/components/file-card.tsx

@@ -0,0 +1,120 @@
+import { useMutation } from "@tanstack/react-query"
+import { Link } from "@tanstack/react-router"
+import { Archive, Trash2 } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { apiClient } from "@/lib/api-client"
+import { normalizePath } from "@/lib/path-utils"
+import type { DocFileUnknown } from "@/lib/types"
+
+type Props = {
+  file: DocFileUnknown
+  onDataChanged?: () => void
+}
+
+export function FileCard(props: Props) {
+  const [deleteConfirmFiles, setDeleteConfirmFiles] = useState<Set<string>>(
+    new Set(),
+  )
+
+  const deleteFileMutation = useMutation({
+    async mutationFn(filePath: string) {
+      const path = normalizePath(filePath)
+      const pathSegments = path
+        .split("/")
+        .map((segment) => encodeURIComponent(segment))
+      const encodedPath = pathSegments.join("/")
+      const resp = await fetch(`/api/files/${encodedPath}`, {
+        method: "DELETE",
+      })
+
+      if (!resp.ok) {
+        const errorText = await resp.text()
+        throw new Error(`Failed to delete file: ${errorText}`)
+      }
+
+      return resp.json()
+    },
+    onSuccess() {
+      if (!props.onDataChanged) return
+      props.onDataChanged()
+    },
+  })
+
+  const archiveFileMutation = useMutation({
+    async mutationFn(filePath: string) {
+      const endpoint = apiClient.api.files[":path{.+}"]
+      const resp = await endpoint.$put({
+        param: { path: normalizePath(filePath) },
+        json: {
+          properties: null,
+          content: null,
+          title: null,
+          description: null,
+          isArchived: true,
+        },
+      })
+
+      return resp.json()
+    },
+    onSuccess() {
+      if (!props.onDataChanged) return
+      props.onDataChanged()
+    },
+  })
+
+
+  const handleDeleteClick = (filePath: string) => {
+    if (deleteConfirmFiles.has(filePath)) {
+      deleteFileMutation.mutate(filePath)
+      setDeleteConfirmFiles(new Set())
+    } else {
+      setDeleteConfirmFiles(new Set([filePath]))
+    }
+  }
+
+  const handleArchiveClick = (filePath: string) => {
+    archiveFileMutation.mutate(filePath)
+  }
+
+  return (
+    <div className="flex items-center justify-between">
+      <Link
+        to="/$"
+        params={{ _splat: normalizePath(props.file.path.path) }}
+        className="text-blue-600 hover:underline"
+      >
+        {props.file.path.name}
+      </Link>
+      <div className="flex items-center gap-2">
+        <span className="text-sm uppercase opacity-50">
+          {props.file.extension}
+        </span>
+        <div className="flex gap-1">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => handleArchiveClick(props.file.path.path)}
+            disabled={archiveFileMutation.isPending}
+            className="h-8 w-8 p-0"
+            title="アーカイブする"
+          >
+            <Archive className="h-4 w-4" />
+          </Button>
+          <Button
+            size="sm"
+            variant={
+              deleteConfirmFiles.has(props.file.path.path) ? "destructive" : "ghost"
+            }
+            onClick={() => handleDeleteClick(props.file.path.path)}
+            disabled={deleteFileMutation.isPending}
+            className="h-8 w-8 p-0"
+            title="削除する"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/app/components/file-tree-icon.tsx

@@ -0,0 +1,26 @@
+import {
+  FileIcon,
+  FileJsonIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+} from "lucide-react"
+
+type Props = {
+  fileName: string
+}
+
+export function FileTreeIcon(props: Props) {
+  if (props.fileName.endsWith(".md")) {
+    return <FileTextIcon size={16} className="mr-2 text-green-400" />
+  }
+
+  if (props.fileName.endsWith(".csv")) {
+    return <FileSpreadsheetIcon size={16} className="mr-2 text-purple-400" />
+  }
+
+  if (props.fileName.endsWith(".json")) {
+    return <FileJsonIcon size={16} className="mr-2 text-yellow-400" />
+  }
+
+  return <FileIcon size={16} className="mr-2 text-blue-400" />
+}

package/app/components/file-view/archive-restore-banner.tsx

@@ -0,0 +1,86 @@
+import { useMutation } from "@tanstack/react-query"
+import { useNavigate } from "@tanstack/react-router"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { apiClient } from "@/lib/api-client"
+import { normalizePath } from "@/lib/path-utils"
+
+type Props = {
+  filePath: string
+  onRestore?: () => void
+}
+
+export function ArchiveRestoreBanner(props: Props) {
+  const navigate = useNavigate()
+
+  const [isRestoring, setIsRestoring] = useState(false)
+
+  const restoreMutation = useMutation({
+    async mutationFn() {
+      setIsRestoring(true)
+
+      // パスから docs/ プレフィックスを削除
+      const normalizedPath = normalizePath(props.filePath)
+
+      // ファイルを復元（アーカイブから移動）
+      const response = await apiClient.api.files[":path{.+}"].$put({
+        param: {
+          path: normalizedPath,
+        },
+        json: {
+          title: null,
+          properties: null,
+          content: null,
+          description: null,
+          isArchived: false, // アーカイブを解除
+        },
+      })
+
+      return response.json()
+    },
+    onSuccess: async (_data) => {
+      // 復元後のパスを構築（_ディレクトリを除外）
+      const pathSegments = props.filePath.split("/")
+      const fileName = pathSegments.pop()
+      const restoredPath = pathSegments
+        .filter((segment) => segment !== "_")
+        .concat(fileName || "")
+        .join("/")
+
+      // コールバックを実行
+      if (props.onRestore) {
+        props.onRestore()
+      }
+
+      // 復元後のファイルパスにリダイレクト
+      navigate({ to: `/${restoredPath}` })
+    },
+    onError: (error) => {
+      console.error("復元エラー:", error)
+      alert("ファイルの復元に失敗しました")
+    },
+    onSettled: () => {
+      setIsRestoring(false)
+    },
+  })
+
+  return (
+    <Card className="p-2">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-x-2">
+          <span className="text-muted-foreground text-sm">
+            このファイルはアーカイブされています
+          </span>
+        </div>
+        <Button
+          size="sm"
+          onClick={() => restoreMutation.mutate()}
+          disabled={isRestoring || restoreMutation.isPending}
+        >
+          {isRestoring ? "復元中..." : "復元する"}
+        </Button>
+      </div>
+    </Card>
+  )
+}