@interactive-inc/docs-client 0.0.1 → 0.0.2

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

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

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

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

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

@@ -1,57 +0,0 @@
-import { useSortable } from "@dnd-kit/sortable"
-import { CSS } from "@dnd-kit/utilities"
-import { GripVertical } from "lucide-react"
-import { TableCell, TableRow } from "@/components/ui/table"
-import { EditableCsvCell } from "./editable-csv-cell"
-
-type Props = {
-  id: string
-  row: string[]
-  rowIndex: number
-  onCellUpdate: (rowIndex: number, columnIndex: number, value: string) => void
-}
-
-export function SortableCsvRow(props: Props) {
-  const sortable = useSortable({
-    id: props.id,
-    attributes: {
-      role: "button",
-      tabIndex: 0,
-    },
-  })
-
-  const style = {
-    transform: CSS.Transform.toString(sortable.transform),
-    opacity: sortable.isDragging ? 0.5 : 1,
-    touchAction: "none",
-  }
-
-  function handleCellChange(
-    rowIndex: number,
-    columnIndex: number,
-    value: string,
-  ) {
-    props.onCellUpdate(rowIndex, columnIndex, value)
-  }
-
-  return (
-    <TableRow
-      ref={sortable.setNodeRef}
-      style={style}
-      className="hover:opacity-60"
-    >
-      <TableCell {...sortable.attributes} {...sortable.listeners}>
-        <GripVertical className="size-4" />
-      </TableCell>
-      {props.row.map((cell: string, cellIndex: number) => (
-        <EditableCsvCell
-          key={`cell-${props.rowIndex}-${cellIndex}-${cell}`}
-          content={cell}
-          rowIndex={props.rowIndex}
-          columnIndex={cellIndex}
-          onCellChange={handleCellChange}
-        />
-      ))}
-    </TableRow>
-  )
-}

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

@@ -1,30 +0,0 @@
-import { useSortable } from "@dnd-kit/sortable"
-import { CSS } from "@dnd-kit/utilities"
-
-type Props = {
-  id: string
-  index: number
-  children: React.ReactNode
-}
-
-export function CsvSortableHeader({ id, index, children }: Props) {
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id })
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  }
-
-  return (
-    <th
-      ref={setNodeRef}
-      style={style}
-      {...attributes}
-      {...listeners}
-      className="cursor-grab border border-gray-600 p-2 text-sm"
-    >
-      {children}
-    </th>
-  )
-}

package/app/components/file-view/utils.ts

@@ -1,8 +0,0 @@
-export function generateUniqueId(
-  prefix: string,
-  value: string,
-  index: number,
-): string {
-  // 単純な値とインデックスの組み合わせ
-  return `${prefix}-${value.slice(0, 10).replace(/\s+/g, "-")}-${index}`
-}

package/app/components/milestones-editor.tsx

@@ -1,95 +0,0 @@
-import { useSuspenseQuery } from "@tanstack/react-query"
-import { Card } from "@/components/ui/card"
-import { apiClient } from "@/lib/api-client"
-import type { DocFile, DocFileMd } from "@/lib/types"
-
-type Props = {
-  project: string
-}
-
-export function MilestonesEditor(props: Props) {
-  const { data: milestonesData } = useSuspenseQuery({
-    queryKey: ["directories", `products/${props.project}/milestones`],
-    queryFn: async () => {
-      const response = await apiClient.api.directories[":path{.+}"].$get({
-        param: { path: `products/${props.project}/milestones` },
-      })
-      if (!response.ok) {
-        throw new Error("Failed to fetch milestones")
-      }
-      return response.json()
-    },
-  })
-
-  const { data: featuresData } = useSuspenseQuery({
-    queryKey: ["directories", `products/${props.project}/features`],
-    queryFn: async () => {
-      const response = await apiClient.api.directories[":path{.+}"].$get({
-        param: { path: `products/${props.project}/features` },
-      })
-      if (!response.ok) {
-        throw new Error("Failed to fetch features")
-      }
-      return response.json()
-    },
-  })
-
-  function isDocFileMd(file: DocFile): file is DocFileMd {
-    return file.type === 'markdown'
-  }
-  
-  function hasMarkdownContent(file: { content: unknown }): file is { content: { title: string; description: string; frontMatter: Record<string, unknown> } } {
-    return typeof file.content === 'object' && file.content !== null && 'frontMatter' in file.content
-  }
-
-  const milestones = (milestonesData.files || []).filter(isDocFileMd)
-  const features = (featuresData.files || []).filter(isDocFileMd)
-
-  function getFeaturesByMilestone(milestoneId: string) {
-    return features.filter(
-      (feature) => {
-        if (!hasMarkdownContent(feature)) return false
-        const frontMatter = feature.content.frontMatter
-        return typeof frontMatter === 'object' && frontMatter !== null && 'milestone' in frontMatter && frontMatter.milestone === milestoneId
-      }
-    )
-  }
-
-  return (
-    <div className="grid gap-2">
-      {milestones.map((milestone) => {
-        const milestoneFeatures = getFeaturesByMilestone(milestone.path.name)
-        return (
-          <Card key={milestone.path.name} className="gap-2 overflow-hidden p-2">
-            <div className="space-y-1">
-              <h2 className="font-semibold text-xl">
-                {hasMarkdownContent(milestone) ? milestone.content.title || milestone.path.name : milestone.path.name}
-              </h2>
-              <p className="text-muted-foreground text-sm">
-                {hasMarkdownContent(milestone) ? milestone.content.description : ''}
-              </p>
-            </div>
-            {milestoneFeatures.length > 0 ? (
-              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-                {milestoneFeatures.map((feature) => (
-                  <div key={feature.path.name} className="rounded border p-2">
-                    <h3 className="font-medium">
-                      {hasMarkdownContent(feature) ? feature.content.title || feature.path.name : feature.path.name}
-                    </h3>
-                    <p className="text-muted-foreground text-sm">
-                      {hasMarkdownContent(feature) ? feature.content.description : ''}
-                    </p>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <p className="py-4 text-center text-muted-foreground">
-                このマイルストーンに関連する機能はありません
-              </p>
-            )}
-          </Card>
-        )
-      })}
-    </div>
-  )
-}

package/app/components/page-header.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from "react"
-import { SidebarButton } from "@/components/sidebar-button"
-import { Input } from "@/components/ui/input"
-
-type Props = {
-  filePath: string
-}
-
-export function PageHeader(props: Props): ReactNode {
-  const paths = props.filePath.split("/")
-
-  const fileName = paths[paths.length - 1]
-
-  return (
-    <div className="flex flex-1 items-center gap-2">
-      <SidebarButton />
-      <Input value={fileName} readOnly />
-    </div>
-  )
-}

package/app/components/project-view/feature-item.tsx

@@ -1,139 +0,0 @@
-import { CheckCircle, X } from "lucide-react"
-import { SingleRelationSelect } from "@/components/file-view/single-relation-select"
-import { Button } from "@/components/ui/button"
-import type { DocFile, DocFileMd, DocRelationFile } from "@/lib/types"
-import { cn } from "@/lib/utils"
-
-function isDocFileMd(file: DocFile): file is DocFileMd {
-  return file.type === 'markdown'
-}
-
-type Priority = "high" | "medium" | "low"
-
-type Props = {
-  feature: DocFile
-  milestoneOptions?: DocRelationFile[]
-  onMilestoneUpdate?: (featurePath: string, milestone: string) => void
-  onPropertyUpdate?: (
-    featurePath: string,
-    field: string,
-    value: unknown,
-  ) => void
-  onFeatureRemove?: (featurePath: string) => void
-}
-
-export function FeatureItem(props: Props) {
-  if (!isDocFileMd(props.feature)) {
-    return null
-  }
-
-  const frontMatter = props.feature.content.frontMatter as Record<string, unknown>
-
-  const isDone = (frontMatter?.["is-done"] as boolean) === true
-
-  const priorityNumber = (frontMatter?.priority as number) || 0
-
-  const priority =
-    priorityNumber === 2 ? "high" : priorityNumber === 1 ? "medium" : "low"
-
-  const milestone = frontMatter?.milestone as string
-
-  const getCurrentValue = () => {
-    const matchingOption = props.milestoneOptions?.find(
-      (option) => option.label === milestone,
-    )
-    return matchingOption?.name || ""
-  }
-
-  const handleMilestoneChange = (value: string) => {
-    if (!value) {
-      props.onMilestoneUpdate?.(props.feature.path.path, "")
-      return
-    }
-
-    const selectedOption = props.milestoneOptions?.find(
-      (option) => option.name === value,
-    )
-    const labelToSave = selectedOption?.label || value
-    props.onMilestoneUpdate?.(props.feature.path.path, labelToSave)
-  }
-
-  const handleDoneToggle = () => {
-    props.onPropertyUpdate?.(props.feature.path.path, "is-done", !isDone)
-  }
-
-  const handlePriorityClick = () => {
-    const currentValue = (frontMatter?.priority as number) || 0
-    const nextValue = (currentValue + 1) % 3
-    props.onPropertyUpdate?.(props.feature.path.path, "priority", nextValue)
-  }
-
-  const getPriorityColor = (priority: Priority): string => {
-    switch (priority) {
-      case "high":
-        return "border-red-500"
-      case "medium":
-        return "border-yellow-500"
-      case "low":
-        return "border-green-500"
-      default:
-        return "border-gray-500"
-    }
-  }
-
-  const getPriorityLabel = (priority: Priority): string => {
-    if (priority === "high") return "高"
-    if (priority === "medium") return "中"
-    return "低"
-  }
-
-  return (
-    <div
-      className={cn("space-y-2 rounded-md border p-2", isDone && "opacity-75")}
-    >
-      <div className="flex items-center gap-3">
-        <Button
-          variant={isDone ? "default" : "secondary"}
-          size="sm"
-          onClick={handleDoneToggle}
-        >
-          <CheckCircle className="size-4" />
-        </Button>
-        <h3 className={`font-bold ${isDone ? "line-through opacity-80" : ""}`}>
-          {props.feature.content.title || props.feature.path.name}
-        </h3>
-      </div>
-      {props.feature.content.description && (
-        <p className="text-sm opacity-80">{props.feature.content.description}</p>
-      )}
-      <div className="flex flex-col items-end justify-between gap-2 lg:flex-row">
-        <div className="text-xs opacity-50">{props.feature.path.name}</div>
-        <div className="flex gap-2">
-          <SingleRelationSelect
-            value={getCurrentValue()}
-            relationOptions={props.milestoneOptions}
-            onValueChange={handleMilestoneChange}
-          />
-          <Button
-            variant="outline"
-            className={cn("w-8", getPriorityColor(priority))}
-            onClick={handlePriorityClick}
-          >
-            {getPriorityLabel(priority)}
-          </Button>
-          {props.onFeatureRemove && (
-            <Button
-              variant="outline"
-              className="w-8"
-              onClick={() => {
-                props.onFeatureRemove?.(props.feature.path.path)
-              }}
-            >
-              <X className="size-3" />
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}