@interactive-inc/docs-client 0.0.1

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

@@ -0,0 +1,230 @@
+import { useSuspenseQuery } from "@tanstack/react-query"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { useFilePropertiesMutation } from "@/hooks/use-file-properties-mutation"
+import { apiClient } from "@/lib/api-client"
+import type { DocDirectory, DocFile, DocFileMd, DocRelation, DocRelationFile } from "@/lib/types"
+import { ProjectPageGroup } from "./project-page-group"
+import { UnlinkedFeaturesSection } from "./unlinked-features-section"
+
+type Props = {
+  project: string
+}
+
+type PageGroup = {
+  page: DocFile
+  features: DocFile[]
+}
+
+export function ProjectView(props: Props) {
+  const pagesQuery = useSuspenseQuery({
+    queryKey: ["apps/client", props.project],
+    queryFn: async () => {
+      const response = await apiClient.api.directories[":path{.+}"].$get({
+        param: { path: `${props.project}/pages` },
+      })
+      return response.json()
+    },
+  })
+
+  const featuresQuery = useSuspenseQuery({
+    queryKey: ["apps/client",`products/${props.project}/features`],
+    queryFn: async () => {
+      const response = await apiClient.api.directories[":path{.+}"].$get({
+        param: { path: `${props.project}/features` },
+      })
+      return response.json()
+    },
+  })
+
+  const pages: DocFile[] = pagesQuery.data.files || []
+
+  const features: DocFile[] = featuresQuery.data.files || []
+
+  const milestoneRelation = featuresQuery.data.relations?.find(
+    (rel: DocRelation) => {return rel.path === `${props.project}/milestones`},
+  )
+
+  const milestoneOptions = milestoneRelation?.files || []
+
+  // マイルストーンフィルター状態
+  const [selectedMilestone, setSelectedMilestone] = useState<string | null>(
+    null,
+  )
+
+  const updatePropertiesMutation = useFilePropertiesMutation()
+
+  const handleMilestoneUpdate = async (
+    featurePath: string,
+    milestone: string,
+  ) => {
+    try {
+      await updatePropertiesMutation.mutateAsync({
+        path: featurePath,
+        field: "milestone",
+        value: milestone,
+      })
+      await featuresQuery.refetch()
+    } catch (error) {
+      console.error("Failed to update milestone:", error)
+    }
+  }
+
+  const handlePropertyUpdate = async (
+    featurePath: string,
+    field: string,
+    value: unknown,
+  ) => {
+    try {
+      await updatePropertiesMutation.mutateAsync({
+        path: featurePath,
+        field: field,
+        value: value,
+      })
+      await featuresQuery.refetch()
+    } catch (error) {
+      console.error("Failed to update property:", error)
+    }
+  }
+
+  const handleFeatureAdd = async (pagePath: string, featurePath: string) => {
+    // ページのfeaturesフィールドに新しい機能を追加
+    const page = pages.find((p: DocFile) => p.path.path === pagePath)
+    if (!page) return
+
+    const currentFeatures =
+      (page.type === 'markdown'
+        ? (page.content.frontMatter as Record<string, unknown>)?.features as string[]
+        : []) || []
+    const updatedFeatures = [...currentFeatures, featurePath]
+
+    await updatePropertiesMutation.mutateAsync({
+      path: pagePath,
+      field: "features",
+      value: updatedFeatures,
+    })
+
+    // 両方のクエリを再取得
+    await Promise.all([pagesQuery.refetch(), featuresQuery.refetch()])
+  }
+
+  const handleFeatureRemove = async (pagePath: string, featurePath: string) => {
+    try {
+      const page = pages.find((p: DocFile) => p.path.path === pagePath)
+      if (!page) return
+
+      const currentFeatures =
+        (page.type === 'markdown'
+          ? (page.content.frontMatter as Record<string, unknown>)?.features as string[]
+          : []) || []
+
+      // フィーチャーを削除
+      const updatedFeatures = currentFeatures.filter((f) => f !== featurePath)
+
+      await updatePropertiesMutation.mutateAsync({
+        path: pagePath,
+        field: "features",
+        value: updatedFeatures,
+      })
+
+      await Promise.all([pagesQuery.refetch(), featuresQuery.refetch()])
+    } catch (error) {
+      console.error("Failed to remove feature from page:", error)
+    }
+  }
+
+  // フィルタリング関数
+  const filterFeaturesByMilestone = (features: DocFile[]) => {
+    if (!selectedMilestone) return features
+    return features.filter((feature) => {
+      if (feature.type !== 'markdown') return false
+      const milestone = (feature.content.frontMatter as Record<string, unknown>)
+        ?.milestone as string
+      return milestone === selectedMilestone
+    })
+  }
+
+  function isDocFileMdWithFeatures(file: DocFile): file is DocFileMd {
+    return file.type === 'markdown'
+  }
+
+  // ページと関連機能をグループ化
+  const pageGroups: PageGroup[] = pages
+    .filter(isDocFileMdWithFeatures)
+    .map((page: DocFileMd) => {
+      const pageFeatures = isDocFileMdWithFeatures(page) 
+        ? ((page.content.frontMatter as Record<string, unknown>)?.features as string[]) || []
+        : []
+      const relatedFeatures = features.filter((feature: DocFile) => {
+        return pageFeatures.includes(feature.path.path)
+      })
+
+      // フィルタリング適用
+      const filteredFeatures = filterFeaturesByMilestone(relatedFeatures).filter((feature): feature is DocFileMd => feature.type === 'markdown')
+
+      return {
+        page,
+        features: filteredFeatures,
+      }
+    })
+
+  // 関連付けられていない機能
+  const allLinkedFeatures = pageGroups.flatMap((group) =>
+    group.features.map((f) => f.path.path),
+  )
+
+  const unlinkedFeatures = filterFeaturesByMilestone(
+    features.filter(
+      (feature: DocFile) => !allLinkedFeatures.includes(feature.path.path),
+    ),
+  )
+
+  return (
+    <main className="w-full space-y-2 p-2">
+      {/* マイルストーンフィルターボタン */}
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant={selectedMilestone === null ? "default" : "secondary"}
+          onClick={() => setSelectedMilestone(null)}
+          size="sm"
+        >
+          すべて
+        </Button>
+        {milestoneOptions.map((milestone: DocRelationFile) => (
+          <Button
+            key={milestone.name}
+            variant={
+              selectedMilestone === milestone.name ? "default" : "secondary"
+            }
+            onClick={() => setSelectedMilestone(milestone.name)}
+            size="sm"
+          >
+            {milestone.name}
+          </Button>
+        ))}
+      </div>
+
+      {/* ページグループ */}
+      <div className="space-y-2">
+        {pageGroups.map((group) => (
+          <ProjectPageGroup
+            key={group.page.path.name}
+            group={group}
+            milestoneOptions={milestoneOptions}
+            onMilestoneUpdate={handleMilestoneUpdate}
+            onPropertyUpdate={handlePropertyUpdate}
+            allFeatures={features}
+            onFeatureAdd={handleFeatureAdd}
+            onFeatureRemove={handleFeatureRemove}
+          />
+        ))}
+        <UnlinkedFeaturesSection
+          unlinkedFeatures={unlinkedFeatures.filter((feature): feature is DocFileMd => 'frontMatter' in feature && 'title' in feature)}
+          milestoneOptions={milestoneOptions}
+          onMilestoneUpdate={handleMilestoneUpdate}
+          onPropertyUpdate={handlePropertyUpdate}
+        />
+      </div>
+    </main>
+  )
+}

package/app/components/project-view/unlinked-features-section.tsx

@@ -0,0 +1,73 @@
+import { Badge } from "@/components/ui/badge"
+import { Card } from "@/components/ui/card"
+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 Props = {
+  unlinkedFeatures: DocFile[]
+  milestoneOptions?: DocRelationFile[]
+  onMilestoneUpdate?: (featurePath: string, milestone: string) => void
+  onPropertyUpdate?: (
+    featurePath: string,
+    field: string,
+    value: unknown,
+  ) => void
+}
+
+export function UnlinkedFeaturesSection(props: Props) {
+  if (props.unlinkedFeatures.length === 0) {
+    return null
+  }
+
+  const sortedFeatures = props.unlinkedFeatures
+    .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)
+    })
+
+  return (
+    <Card className="w-full p-2">
+      <div className="flex gap-2">
+        <div className="w-1/3 border-r pr-4">
+          <h2 className="font-semibold text-lg">未関連付け機能</h2>
+          <p className="text-gray-600 text-sm">
+            ページに関連付けられていない機能
+          </p>
+          <Badge variant="outline" className="mt-2">
+            {props.unlinkedFeatures.length}機能
+          </Badge>
+        </div>
+        <div className="flex-1">
+          <div className="space-y-3">
+            {sortedFeatures.map((feature) => (
+              <FeatureItem
+                key={feature.path.name}
+                feature={feature}
+                milestoneOptions={props.milestoneOptions}
+                onMilestoneUpdate={props.onMilestoneUpdate}
+                onPropertyUpdate={props.onPropertyUpdate}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+}

package/app/components/providers.tsx

@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { useState } from "react"
+
+export function Providers(props: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => {
+    return new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 60 * 1000, // 1分
+          retry: 1,
+        },
+      },
+    })
+  })
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {props.children}
+    </QueryClientProvider>
+  )
+}

package/app/components/reload-button.tsx

@@ -0,0 +1,25 @@
+import { RefreshCw } from "lucide-react"
+import { Button } from "./ui/button"
+
+type Props = {
+  onReload: () => void
+  size?: "sm" | "default" | "lg" | "icon"
+  variant?: "default" | "secondary" | "ghost" | "outline"
+  disabled?: boolean
+}
+
+/**
+ * リロードボタンコンポーネント
+ */
+export function ReloadButton(props: Props) {
+  return (
+    <Button
+      size={props.size || "sm"}
+      variant={props.variant || "secondary"}
+      onClick={props.onReload}
+      disabled={props.disabled}
+    >
+      <RefreshCw />
+    </Button>
+  )
+}

package/app/components/sidebar-button.tsx

@@ -0,0 +1,13 @@
+import { PanelLeftIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useSidebar } from "@/components/ui/sidebar"
+
+export function SidebarButton() {
+  const sidebar = useSidebar()
+
+  return (
+    <Button variant={"outline"} onClick={sidebar.toggleSidebar} size={"icon"}>
+      <PanelLeftIcon />
+    </Button>
+  )
+}

package/app/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-muted-foreground text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/app/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot as SlotPrimitive } from "radix-ui"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? SlotPrimitive.Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/app/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot as SlotPrimitive } from "radix-ui"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? SlotPrimitive.Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/app/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-semibold leading-none", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}