@interactive-inc/docs-client 0.0.1

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

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

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

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

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

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

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

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

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