@interactive-inc/docs-client 0.0.1 → 0.0.2

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

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

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

@@ -1,50 +0,0 @@
-import { useState } from "react"
-import { FileCsvColumns } from "@/components/file-view/file-csv-columns-view"
-import { FileCsvTable } from "@/components/file-view/file-csv-table"
-import { FileHeader } from "@/components/file-view/file-header"
-import { Button } from "@/components/ui/button"
-
-export type Props = {
-  filePath: string
-  fileData: {
-    path: string
-    title: string | null
-  }
-  cwd: string
-  content: string
-  onChange(content: string): void
-  onReload: () => void
-  isLoading: boolean
-}
-
-export function CsvFileView(props: Props) {
-  const [isColumnEditMode, setIsColumnEditMode] = useState(false)
-
-  const toggleColumnEditMode = () => {
-    setIsColumnEditMode(!isColumnEditMode)
-  }
-
-  return (
-    <div className="space-y-2">
-      <FileHeader
-        filePath={props.filePath}
-        fileData={props.fileData}
-        cwd={props.cwd}
-        onReload={props.onReload}
-        isLoading={props.isLoading}
-      >
-        <Button
-          onClick={toggleColumnEditMode}
-          variant={isColumnEditMode ? "default" : "secondary"}
-        >
-          {"カラム"}
-        </Button>
-      </FileHeader>
-      {isColumnEditMode ? (
-        <FileCsvColumns content={props.content} onChange={props.onChange} />
-      ) : (
-        <FileCsvTable content={props.content} onChange={props.onChange} />
-      )}
-    </div>
-  )
-}

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

@@ -1,11 +0,0 @@
-type Props = {
-  content: string
-}
-
-export function DefaultFileViewer(props: Props) {
-  return (
-    <div className="rounded bg-gray-800 p-4 text-white">
-      <pre className="whitespace-pre-wrap">{props.content}</pre>
-    </div>
-  )
-}

package/app/components/file-view/editable-csv-cell.tsx

@@ -1,37 +0,0 @@
-import { useRef, useState } from "react"
-import { TableCell } from "@/components/ui/table"
-
-type Props = {
-  content: string
-  rowIndex: number
-  columnIndex: number
-  onCellChange: (rowIndex: number, columnIndex: number, value: string) => void
-}
-
-export function EditableCsvCell(props: Props) {
-  const [value, setValue] = useState(props.content)
-  const cellRef = useRef<HTMLTableCellElement>(null)
-
-  function handleBlur() {
-    if (value !== props.content) {
-      props.onCellChange(props.rowIndex, props.columnIndex, value)
-    }
-  }
-
-  function handleInput(event: React.FormEvent<HTMLTableCellElement>) {
-    const newValue = event.currentTarget.textContent || ""
-    setValue(newValue)
-  }
-
-  return (
-    <TableCell
-      ref={cellRef}
-      contentEditable
-      suppressContentEditableWarning
-      onBlur={handleBlur}
-      onInput={handleInput}
-    >
-      {props.content}
-    </TableCell>
-  )
-}

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

@@ -1,105 +0,0 @@
-import { Card } from "@/components/ui/card"
-import type { DocRelation, DocSchemaRecord, DocFileMdFrontMatter } from "@/lib/types"
-import { cn } from "@/lib/utils"
-import { FrontMatterInputField } from "./front-matter-input-field"
-
-type Props = {
-  frontMatter: DocFileMdFrontMatter | null
-  onUpdate?: (key: string, value: unknown) => void
-  schema?: DocSchemaRecord
-  relations?: DocRelation[]
-}
-
-/**
- * Front-matterを編集可能に表示するコンポーネント
- */
-export function EditableFrontMatterView(props: Props) {
-  const frontMatter = props.frontMatter
-  // front-matterが空の場合は表示しない
-  if (!frontMatter || Object.keys(frontMatter).length === 0) {
-    return null
-  }
-
-  const handleValueChange = (key: string, newValue: string) => {
-    if (!props.onUpdate) {
-      console.warn("onUpdate is not provided to EditableFrontMatterView")
-      return
-    }
-
-    const originalValue = frontMatter[key]
-
-    // 元の型に応じて値を変換
-    let convertedValue: unknown = newValue
-
-    if (typeof originalValue === "boolean") {
-      convertedValue = newValue === "true"
-    } else if (typeof originalValue === "number") {
-      const numValue = Number(newValue)
-      convertedValue = Number.isNaN(numValue) ? originalValue : numValue
-    } else if (Array.isArray(originalValue)) {
-      // 配列の場合はカンマ区切りで分割
-      const items = newValue
-        .split(",")
-        .map((v) => v.trim())
-        .filter((v) => v !== "")
-      if (originalValue.length > 0 && typeof originalValue[0] === "number") {
-        convertedValue = items
-          .map((v) => Number(v))
-          .filter((v) => !Number.isNaN(v))
-      } else if (
-        originalValue.length > 0 &&
-        typeof originalValue[0] === "boolean"
-      ) {
-        convertedValue = items.map((v) => v === "true")
-      } else {
-        convertedValue = items
-      }
-    } else if (originalValue === null && Array.isArray(newValue)) {
-      // null値だが新しい値が配列の場合（配列リレーションなど）
-      convertedValue = newValue
-    }
-
-    props.onUpdate(key, convertedValue)
-  }
-
-  const handleBlur = (key: string, value: string) => {
-    handleValueChange(key, value)
-  }
-
-  return (
-    <Card className="gap-4 rounded-md p-2">
-      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-        {Object.entries(frontMatter).map(([key, value]) => {
-          const schemaField = props.schema?.[key]
-          const relationData = props.relations?.find((rel) => {
-            return (
-              rel.path ===
-              (schemaField && "path" in schemaField ? schemaField.path : null)
-            )
-          })
-
-          // multi-系のフィールドは2カラムスペースを使用
-          const isMultiField = schemaField?.type?.startsWith("multi-")
-          const columnSpan = isMultiField ? "md:col-span-2" : ""
-
-          return (
-            <div key={key} className={cn("flex flex-col gap-1", columnSpan)}>
-              <span className="font-medium text-sm">{key}</span>
-              <div className="flex-1">
-                <FrontMatterInputField
-                  fieldKey={key}
-                  value={value}
-                  originalValue={frontMatter[key]}
-                  onValueChange={handleValueChange}
-                  onBlur={handleBlur}
-                  schemaField={schemaField}
-                  relationOptions={relationData?.files}
-                />
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </Card>
-  )
-}

package/app/components/file-view/file-csv-columns-view.tsx

@@ -1,181 +0,0 @@
-import { ArrowDown, ArrowUp, Check, Plus, XCircle } from "lucide-react"
-import { type FormEvent, useEffect, useState } from "react"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { OpenCsv } from "@/lib/open-csv/open-csv"
-import { cn } from "@/lib/utils"
-
-type Props = {
-  content: string
-  onChange(content: string): void
-}
-
-export function FileCsvColumns(props: Props) {
-  const [csvInstance, setCsvInstance] = useState<OpenCsv>(
-    new OpenCsv(props.content),
-  )
-
-  const [editingHeader, setEditingHeader] = useState<{
-    index: number
-    value: string
-  } | null>(null)
-
-  const [newColumnName, setNewColumnName] = useState("")
-
-  // propsの変更を検知してCSVインスタンスを更新
-  useEffect(() => {
-    setCsvInstance(new OpenCsv(props.content))
-  }, [props.content])
-
-  // カラム名の編集モードを開始
-  const startEditingHeader = (index: number, headerName: string) => {
-    setEditingHeader({ index, value: headerName })
-  }
-
-  // カラム名の編集を確定
-  const confirmHeaderEdit = () => {
-    if (editingHeader && editingHeader.value.trim() !== "") {
-      const newCsvInstance = csvInstance.renameColumn(
-        editingHeader.index,
-        editingHeader.value,
-      )
-      updateCsvAndNotify(newCsvInstance)
-      setEditingHeader(null)
-    }
-  }
-
-  // カラムを削除
-  const removeColumn = (index: number) => {
-    const newCsvInstance = csvInstance.removeColumn(index)
-    updateCsvAndNotify(newCsvInstance)
-  }
-
-  // カラムを上に移動
-  const moveColumnUp = (index: number) => {
-    if (index > 0) {
-      const newCsvInstance = csvInstance.moveColumn(index, index - 1)
-      updateCsvAndNotify(newCsvInstance)
-    }
-  }
-
-  // カラムを下に移動
-  const moveColumnDown = (index: number) => {
-    if (index < csvInstance.headers.length - 1) {
-      const newCsvInstance = csvInstance.moveColumn(index, index + 1)
-      updateCsvAndNotify(newCsvInstance)
-    }
-  }
-
-  // 新しいカラムを追加
-  const addNewColumn = (event?: FormEvent) => {
-    if (event) {
-      event.preventDefault()
-    }
-
-    if (newColumnName.trim() !== "") {
-      const newCsvInstance = csvInstance.addColumn(newColumnName)
-      updateCsvAndNotify(newCsvInstance)
-      setNewColumnName("")
-    }
-  }
-
-  // CSVインスタンスを更新し、親コンポーネントに通知
-  const updateCsvAndNotify = (newCsvInstance: OpenCsv) => {
-    setCsvInstance(newCsvInstance)
-    if (props.onChange) {
-      props.onChange(newCsvInstance.toString())
-    }
-  }
-
-  return (
-    <Card className="h-full max-h-fit max-w-none gap-0 rounded-md p-0">
-      <div className="flex items-center justify-end border-b p-2">
-        <form className="flex items-center space-x-2" onSubmit={addNewColumn}>
-          <Input
-            className="h-9 w-40"
-            onChange={(e) => setNewColumnName(e.target.value)}
-            placeholder="新しいカラム名"
-            value={newColumnName}
-          />
-          <Button
-            disabled={newColumnName.trim() === ""}
-            size="sm"
-            type="submit"
-          >
-            <Plus className="mr-1 h-4 w-4" />
-            {"追加"}
-          </Button>
-        </form>
-      </div>
-      <div className="flex flex-col gap-2 p-2">
-        {csvInstance.headers.map((header, headerIndex) => (
-          <Card
-            className={"relative gap-0 p-2"}
-            key={`column-${header}-${headerIndex.toFixed()}`}
-          >
-            <div className="flex items-center space-x-2">
-              <Input
-                autoFocus={editingHeader?.index === headerIndex}
-                className="h-8"
-                onChange={(e) =>
-                  editingHeader?.index === headerIndex
-                    ? setEditingHeader({
-                        ...editingHeader,
-                        value: e.target.value,
-                      })
-                    : startEditingHeader(headerIndex, e.target.value)
-                }
-                value={
-                  editingHeader?.index === headerIndex
-                    ? editingHeader.value
-                    : header
-                }
-              />
-              {editingHeader?.index === headerIndex && (
-                <Button
-                  className="h-8 w-8"
-                  onClick={confirmHeaderEdit}
-                  size="icon"
-                  variant="ghost"
-                >
-                  <Check className="h-4 w-4" />
-                </Button>
-              )}
-              <Button
-                className="h-7 w-7"
-                disabled={headerIndex === 0}
-                onClick={() => moveColumnUp(headerIndex)}
-                size="icon"
-                variant="outline"
-              >
-                <ArrowUp className="h-3 w-3" />
-              </Button>
-              <Button
-                className="h-7 w-7"
-                disabled={headerIndex === csvInstance.headers.length - 1}
-                onClick={() => moveColumnDown(headerIndex)}
-                size="icon"
-                variant="outline"
-              >
-                <ArrowDown className="h-3 w-3" />
-              </Button>
-              <Button
-                className={cn(
-                  "h-7 w-7",
-                  csvInstance.headers.length <= 1 && "opacity-50",
-                )}
-                disabled={csvInstance.headers.length <= 1}
-                onClick={() => removeColumn(headerIndex)}
-                size="icon"
-                variant="outline"
-              >
-                <XCircle className="h-3 w-3" />
-              </Button>
-            </div>
-          </Card>
-        ))}
-      </div>
-    </Card>
-  )
-}

package/app/components/file-view/file-csv-table.tsx

@@ -1,142 +0,0 @@
-import type { DragEndEvent } from "@dnd-kit/core"
-import {
-  closestCenter,
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core"
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
-import {
-  arrayMove,
-  SortableContext,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable"
-import { useState } from "react"
-import { Card } from "@/components/ui/card"
-import {
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { OpenCsv } from "@/lib/open-csv/open-csv"
-import { SortableCsvRow } from "./sortable-csv-row"
-
-type Props = {
-  content: string
-  onChange(content: string): void
-}
-
-export function FileCsvTable(props: Props) {
-  const [csvData, setCsvData] = useState(new OpenCsv(props.content))
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 5,
-      },
-    }),
-    useSensor(KeyboardSensor),
-  )
-
-  function handleDragEnd(event: DragEndEvent) {
-    const active = event.active
-    const over = event.over
-
-    if (over && active.id !== over.id) {
-      const activeId = String(active.id)
-      const overId = String(over.id)
-
-      const activeSplit = activeId.split("-")
-      const overSplit = overId.split("-")
-
-      if (activeSplit.length < 2 || overSplit.length < 2) {
-        return
-      }
-
-      const activeIndex = activeSplit[1]
-      const overIndex = overSplit[1]
-
-      if (activeIndex === undefined || overIndex === undefined) {
-        return
-      }
-
-      const activeRowIndex = Number.parseInt(activeIndex, 10) + 1 // +1 for header row
-      const overRowIndex = Number.parseInt(overIndex, 10) + 1
-
-      const newRecords = arrayMove(
-        csvData.records,
-        activeRowIndex - 1,
-        overRowIndex - 1,
-      )
-
-      // Create a new CSV string to initialize a new OpenCsv instance
-      const headers = csvData.headers
-      if (headers.length > 0) {
-        const newData = [headers, ...newRecords.map((row) => [...row])]
-        const newCsvString = newData.map((row) => row.join(",")).join("\n")
-        setCsvData(new OpenCsv(newCsvString))
-
-        // 親コンポーネントに変更を通知
-        props.onChange(newCsvString)
-      }
-    }
-  } // Create unique and stable ids for each row
-  const rowIds = csvData.records.map((_, idx) => `row-${idx}`)
-
-  function handleCellUpdate(
-    rowIndex: number,
-    columnIndex: number,
-    value: string,
-  ) {
-    const newCsvData = csvData.updateCell(rowIndex + 1, columnIndex, value) // +1 for header row
-    const newCsvString = newCsvData.toString()
-    setCsvData(newCsvData)
-    props.onChange(newCsvString)
-  }
-
-  return (
-    <Card className="h-full max-h-fit max-w-none overflow-hidden rounded-md p-0">
-      <Table className="w-full border-collapse">
-        <TableHeader>
-          <TableRow>
-            <TableHead />
-            {csvData.headers.map((header: string, index: number) => {
-              const headerKey = `header-${index}-${header}`
-              return <TableHead key={headerKey}>{header}</TableHead>
-            })}
-          </TableRow>
-        </TableHeader>
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleDragEnd}
-          modifiers={[restrictToVerticalAxis]}
-        >
-          <TableBody>
-            <SortableContext
-              items={rowIds}
-              strategy={verticalListSortingStrategy}
-            >
-              {csvData.records.map((row: string[], rowIndex: number) => {
-                const rowId = `row-${rowIndex}`
-                return (
-                  <SortableCsvRow
-                    key={rowId}
-                    id={rowId}
-                    row={row}
-                    rowIndex={rowIndex}
-                    onCellUpdate={handleCellUpdate}
-                  />
-                )
-              })}
-            </SortableContext>
-          </TableBody>
-        </DndContext>
-      </Table>
-    </Card>
-  )
-}