@interactive-inc/docs-client 0.0.1

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

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

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

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

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

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

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

package/app/components/project-view/project-page-group.tsx

@@ -0,0 +1,125 @@
+import { Card } from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import type { DocFile, DocFileMd, DocRelationFile } from "@/lib/types"
+import { FeatureItem } from "./feature-item"
+
+function isDocFileMd(file: DocFile): file is DocFileMd {
+  return file.type === 'markdown'
+}
+
+type Priority = "high" | "medium" | "low"
+
+type PageGroup = {
+  page: DocFile
+  features: DocFile[]
+}
+
+type Props = {
+  group: PageGroup
+  milestoneOptions?: DocRelationFile[]
+  onMilestoneUpdate?: (featurePath: string, milestone: string) => void
+  onPropertyUpdate?: (
+    featurePath: string,
+    field: string,
+    value: unknown,
+  ) => void
+  allFeatures?: DocFile[]
+  onFeatureAdd?: (pagePath: string, featurePath: string) => void
+  onFeatureRemove?: (pagePath: string, featurePath: string) => void
+}
+
+export function ProjectPageGroup(props: Props) {
+  const sortedFeatures = props.group.features
+    .filter(isDocFileMd)
+    .sort((a, b) => {
+      const priorityOrder: Record<Priority, number> = {
+        high: 0,
+        medium: 1,
+        low: 2,
+      }
+      const aPriority =
+        ((a.content.frontMatter as Record<string, unknown>)?.priority as Priority) ||
+        "low"
+      const bPriority =
+        ((b.content.frontMatter as Record<string, unknown>)?.priority as Priority) ||
+        "low"
+      return (priorityOrder[aPriority] || 2) - (priorityOrder[bPriority] || 2)
+    })
+
+  // このページに関連付けられていない機能を取得
+  const linkedFeaturePaths = props.group.features.map((f) => f.path.path)
+  const availableFeatures = (props.allFeatures || [])
+    .filter(isDocFileMd)
+    .filter((feature) => !linkedFeaturePaths.includes(feature.path.path))
+
+  const handleFeatureAdd = (featureValue: string) => {
+    if (featureValue && props.onFeatureAdd) {
+      props.onFeatureAdd(props.group.page.path.path, featureValue)
+    }
+  }
+
+  return (
+    <Card className="w-full rounded-md p-2">
+      <div className="flex flex-col gap-2 lg:flex-row">
+        {/* 左側: ページ情報 */}
+        <div className="space-y-2 lg:w-1/3">
+          <h2 className="font-semibold text-lg">
+            {isDocFileMd(props.group.page) ? props.group.page.content.title || props.group.page.path.name : props.group.page.path.name}
+          </h2>
+          <div className="text-xs opacity-50">{props.group.page.path.name}</div>
+          {isDocFileMd(props.group.page) && props.group.page.content.description && (
+            <p className="text-sm opacity-50">{props.group.page.content.description}</p>
+          )}
+        </div>
+        {/* 右側: 関連機能一覧 */}
+        <div className="flex-1">
+          <div className="space-y-2">
+            {sortedFeatures.length > 0 ? (
+              sortedFeatures.map((feature) => (
+                <FeatureItem
+                  key={feature.path.name}
+                  feature={feature}
+                  milestoneOptions={props.milestoneOptions}
+                  onMilestoneUpdate={props.onMilestoneUpdate}
+                  onPropertyUpdate={props.onPropertyUpdate}
+                  onFeatureRemove={(featurePath) =>
+                    props.onFeatureRemove?.(
+                      props.group.page.path.path,
+                      featurePath,
+                    )
+                  }
+                />
+              ))
+            ) : (
+              <p className="text-sm italic opacity-50">
+                このページに関連する機能はありません
+              </p>
+            )}
+
+            {/* 機能追加用Select */}
+            {availableFeatures.length > 0 && (
+              <Select value="" onValueChange={handleFeatureAdd}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="機能を追加..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableFeatures.map((feature) => (
+                    <SelectItem key={feature.path.path} value={feature.path.path || ""}>
+                      {feature.content.title || feature.path.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+}