@interactive-inc/docs-client 0.0.1 → 0.0.2

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

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

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

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

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

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

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

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

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

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

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