@taskmark/ui 0.2.1 → 0.2.2

package/dist/standalone/components/board/sortable-table-head.tsx

@@ -1,69 +0,0 @@
-"use client"
-
-import { ArrowDownIcon, ArrowUpIcon } from "lucide-react"
-
-import { TableHead } from "@/components/ui/table"
-import { cn } from "@/lib/utils"
-import type { TableSortDirection, TableSortKey } from "@/lib/taskmark/table-sort"
-
-type SortableTableHeadProps = {
-  label: string
-  sortKey: TableSortKey
-  activeKey: TableSortKey | null
-  direction: TableSortDirection | null
-  onSort: (key: TableSortKey) => void
-  className?: string
-  /** Header label alignment (default start / left). */
-  align?: "start" | "center" | "end"
-}
-
-export function SortableTableHead({
-  label,
-  sortKey,
-  activeKey,
-  direction,
-  onSort,
-  className,
-  align = "start",
-}: SortableTableHeadProps) {
-  const active = activeKey === sortKey
-  const ariaSort = active
-    ? direction === "asc"
-      ? "ascending"
-      : "descending"
-    : "none"
-
-  return (
-    <TableHead
-      aria-sort={ariaSort}
-      className={cn("p-0", className)}
-    >
-      <button
-        type="button"
-        onClick={() => onSort(sortKey)}
-        className={cn(
-          "inline-flex h-10 w-full items-center gap-1.5 px-2 font-medium whitespace-nowrap",
-          "rounded-sm hover:bg-muted/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
-          active ? "text-foreground" : "text-foreground/80",
-          align === "center" && "justify-center text-center",
-          align === "end" && "justify-end text-right",
-          align === "start" && "justify-start text-left"
-        )}
-      >
-        <span>{label}</span>
-        {active && direction === "asc" ? (
-          <ArrowUpIcon className="size-3.5 shrink-0 text-foreground" aria-hidden />
-        ) : active && direction === "desc" ? (
-          <ArrowDownIcon className="size-3.5 shrink-0 text-foreground" aria-hidden />
-        ) : null}
-        <span className="sr-only">
-          {!active
-            ? "activate to sort ascending"
-            : direction === "asc"
-              ? "sorted ascending; activate to sort descending"
-              : "sorted descending; activate to clear sort"}
-        </span>
-      </button>
-    </TableHead>
-  )
-}

package/dist/standalone/components/board/static-board-app.tsx

@@ -1,202 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-import { useSearchParams } from "next/navigation"
-
-import { AppBar } from "@/components/board/app-bar"
-import { EpicList } from "@/components/board/epic-list"
-import { ListViewSwitcher } from "@/components/board/list-view-switcher"
-import { OverallWorkItemsList } from "@/components/board/overall-work-items-list"
-import { ProjectStatusMetricsStrip } from "@/components/board/project-status-metrics-strip"
-import { TaskList } from "@/components/board/task-list"
-import { WorkItemsList } from "@/components/board/work-items-list"
-import { WorkItemSheetProvider } from "@/components/board/work-item-sheet"
-import {
-  LIST_VIEW_LABELS,
-  boardHref,
-  parseListViewMode,
-  type ListViewMode,
-} from "@/lib/taskmark/list-view-mode"
-import { seedBoardSnapshot } from "@/lib/taskmark/snapshot-client"
-import {
-  storyKey,
-  type BoardSnapshot,
-} from "@/lib/taskmark/snapshot-types"
-
-function headingForView(view: ListViewMode): string {
-  if (view === "overall") return "Epics"
-  return LIST_VIEW_LABELS[view]
-}
-
-export function StaticBoardApp({ snapshot }: { snapshot: BoardSnapshot }) {
-  React.useMemo(() => {
-    seedBoardSnapshot(snapshot)
-    return null
-  }, [snapshot])
-
-  const searchParams = useSearchParams()
-  const activeView = parseListViewMode(searchParams.get("view") ?? undefined)
-  const selectedEpicId =
-    activeView === "overall" ? searchParams.get("epic")?.trim() || null : null
-  const selectedStoryId =
-    activeView === "overall" && selectedEpicId
-      ? searchParams.get("story")?.trim() || null
-      : null
-  const selectedItemId = searchParams.get("item")?.trim() || null
-
-  const activeProject = snapshot.project
-  const list = snapshot.epics
-  const epicCount = list.epics.length
-  const errorCount = list.errors.length
-  const hideCompletedPrefs = snapshot.hideCompletedDefaults
-  const countableCompletions = snapshot.countableCompletions
-  const statusMetrics = snapshot.statusMetrics
-  const workItemsList = snapshot.workItemsView
-
-  const selectedEpic = selectedEpicId
-    ? list.epics.find((e) => e.id === selectedEpicId) ?? null
-    : null
-
-  const epicWorkItems =
-    selectedEpicId != null
-      ? snapshot.workItemsByEpic[selectedEpicId] ?? null
-      : null
-
-  const selectedStory =
-    epicWorkItems && selectedStoryId
-      ? (epicWorkItems.rows.find(
-          (row) => row.kind === "story" && row.id === selectedStoryId
-        ) ?? null)
-      : null
-
-  const itemList =
-    selectedEpicId && selectedStory
-      ? snapshot.itemsByStory[storyKey(selectedEpicId, selectedStory.id)] ??
-        null
-      : null
-
-  return (
-    <WorkItemSheetProvider>
-      <div className="min-h-svh bg-[linear-gradient(180deg,_#fff_0%,_#f7f4ff_100%)]">
-        <AppBar
-          projects={snapshot.projects}
-          activeProjectId={activeProject.id}
-          masterCount={1}
-          autoconfig={true}
-        />
-
-        <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-4 py-8">
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-            <div>
-              <h1 className="font-head text-3xl tracking-tight">
-                {headingForView(activeView)}
-              </h1>
-              <p className="mt-1 text-sm text-muted-foreground">
-                {activeProject.name}
-                {activeView === "overall"
-                  ? ` · ${epicCount} epic${epicCount === 1 ? "" : "s"}`
-                  : ""}
-                {activeView === "overall" && errorCount > 0
-                  ? ` · ${errorCount} parse issue${errorCount === 1 ? "" : "s"}`
-                  : ""}
-                {activeView === "workitems"
-                  ? ` · ${workItemsList.rows.length} item${workItemsList.rows.length === 1 ? "" : "s"}`
-                  : ""}
-                {activeView === "overall" && selectedEpic
-                  ? ` · selected ${selectedEpic.id}`
-                  : activeView === "overall" && selectedEpicId
-                    ? ` · epic ${selectedEpicId} not in list`
-                    : activeView === "overall"
-                      ? " · select an epic to view work items"
-                      : ""}
-                {activeView === "overall" && selectedStory
-                  ? ` · story ${selectedStory.id}`
-                  : activeView === "overall" && selectedStoryId
-                    ? ` · story ${selectedStoryId} not in list`
-                    : ""}
-              </p>
-            </div>
-            <ListViewSwitcher
-              activeView={activeView}
-              selectedEpicId={selectedEpicId}
-              selectedStoryId={selectedStory?.id ?? null}
-            />
-          </div>
-
-          <ProjectStatusMetricsStrip metrics={statusMetrics} />
-
-          {activeView === "overall" ? (
-            <>
-              <EpicList
-                lists={[list]}
-                selectedEpicId={selectedEpicId}
-                countableCompletions={countableCompletions}
-                initialHideCompleted={hideCompletedPrefs.epics}
-              />
-
-              {epicWorkItems ? (
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-baseline justify-between gap-3">
-                    <h2 className="font-head text-2xl tracking-tight">
-                      Work items for{" "}
-                      {epicWorkItems.epicTitle ?? epicWorkItems.epicId}
-                    </h2>
-                    <Link
-                      href={boardHref({
-                        view: "overall",
-                        item: selectedItemId,
-                      })}
-                      className="text-sm text-muted-foreground underline-offset-2 hover:underline"
-                    >
-                      Clear selection
-                    </Link>
-                  </div>
-                  <OverallWorkItemsList
-                    list={epicWorkItems}
-                    selectedStoryId={selectedStory?.id ?? null}
-                    countableCompletions={countableCompletions}
-                    initialHideCompleted={hideCompletedPrefs.overallWorkItems}
-                  />
-                </div>
-              ) : null}
-
-              {itemList && selectedStory ? (
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-baseline justify-between gap-3">
-                    <h2 className="font-head text-2xl tracking-tight">
-                      Sub Tasks for {itemList.storyTitle ?? itemList.storyId}
-                    </h2>
-                    <Link
-                      href={boardHref({
-                        view: "overall",
-                        epic: itemList.epicId,
-                        item: selectedItemId,
-                      })}
-                      className="text-sm text-muted-foreground underline-offset-2 hover:underline"
-                    >
-                      Clear story
-                    </Link>
-                  </div>
-                  <TaskList
-                    list={itemList}
-                    countableCompletions={countableCompletions}
-                    initialHideCompleted={hideCompletedPrefs.tasks}
-                  />
-                </div>
-              ) : null}
-            </>
-          ) : null}
-
-          {activeView === "workitems" ? (
-            <WorkItemsList
-              list={workItemsList}
-              countableCompletions={countableCompletions}
-              initialHideCompleted={hideCompletedPrefs.workItems}
-            />
-          ) : null}
-        </div>
-      </div>
-    </WorkItemSheetProvider>
-  )
-}

package/dist/standalone/components/board/status-badge.tsx

@@ -1,82 +0,0 @@
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
-
-export function formatStatusLabel(status: string): string {
-  return status.replaceAll("_", " ")
-}
-
-export function statusBadgeClass(status: string): string {
-  switch (status) {
-    case "done":
-      return "border-black bg-[var(--chart-4)] text-black"
-    case "in_progress":
-      return "border-black bg-[var(--chart-1)] text-black"
-    case "blocked":
-      return "border-black bg-destructive text-destructive-foreground"
-    case "cancelled":
-      return "border-black bg-muted text-muted-foreground line-through"
-    case "backlog":
-      return "border-black bg-[var(--chart-3)] text-black"
-    default:
-      return "border-black bg-card text-foreground"
-  }
-}
-
-export function typeBadgeClass(type: string): string {
-  if (type === "bug") {
-    return "border-black bg-destructive/15 text-destructive"
-  }
-  if (type === "epic") {
-    return "border-black bg-[var(--chart-1)]/40 text-black"
-  }
-  if (type === "story") {
-    return "border-black bg-[var(--chart-3)]/50 text-black"
-  }
-  return "border-black bg-[var(--chart-2)] text-black"
-}
-
-export function formatPriorityLabel(priority: string): string {
-  return priority.replaceAll("_", " ")
-}
-
-export function priorityBadgeClass(priority: string): string {
-  switch (priority.toLowerCase()) {
-    case "critical":
-      return "border-black bg-destructive text-destructive-foreground"
-    case "high":
-      return "border-black bg-[var(--chart-1)] text-black"
-    case "medium":
-      return "border-black bg-[var(--chart-3)] text-black"
-    case "low":
-      return "border-black bg-muted text-muted-foreground"
-    default:
-      return "border-black bg-card text-foreground"
-  }
-}
-
-export function StatusBadge({ status }: { status: string }) {
-  return (
-    <Badge variant="outline" className={cn(statusBadgeClass(status))}>
-      {formatStatusLabel(status)}
-    </Badge>
-  )
-}
-
-export function TypeBadge({ type }: { type: string }) {
-  return (
-    <Badge variant="outline" className={cn(typeBadgeClass(type))}>
-      {type}
-    </Badge>
-  )
-}
-
-export function PriorityBadge({ priority }: { priority: string }) {
-  return (
-    <Badge
-      variant="outline"
-      className={cn("capitalize", priorityBadgeClass(priority))}
-    >
-      {formatPriorityLabel(priority)}
-    </Badge>
-  )
-}

package/dist/standalone/components/board/story-list.tsx

@@ -1,336 +0,0 @@
-"use client"
-
-import { useMemo, useState } from "react"
-import Link from "next/link"
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import {
-  IdCreatedTooltip,
-  StatusWithSolvedTooltip,
-} from "@/components/board/date-tooltip"
-import { ChildProgressBar } from "@/components/board/child-progress-bar"
-import { ListFiltersBar } from "@/components/board/list-filters-bar"
-import { ListPagination } from "@/components/board/list-pagination"
-import { SortableTableHead } from "@/components/board/sortable-table-head"
-import { TimeframeFilter } from "@/components/board/timeframe-filter"
-import { ViewWorkItemButton } from "@/components/board/work-item-sheet"
-import { AttributionAvatarGroup } from "@/components/board/attribution-avatars"
-import { usePaginatedRows } from "@/hooks/use-paginated-rows"
-import { usePersistedHideCompleted } from "@/hooks/use-persisted-hide-completed"
-import { useTableSort } from "@/hooks/use-table-sort"
-import { cn } from "@/lib/utils"
-import type { EpicStoryList } from "@/lib/taskmark/story-types"
-import {
-  DEFAULT_TIMEFRAME_FILTER,
-  filterListRows,
-  isTimeframeActive,
-  listFilterResetKey,
-  type TimeframeFilterState,
-} from "@/lib/taskmark/list-filters"
-import type { SolvedCompletionSample } from "@/lib/taskmark/timeframe-filters"
-import {
-  sortRowsByTableSort,
-  tableSortResetKey,
-} from "@/lib/taskmark/table-sort"
-
-function formatPoints(value: number | null): string {
-  if (value === null) return "—"
-  return String(value)
-}
-
-type StoryListProps = {
-  list: EpicStoryList
-  selectedStoryId?: string | null
-  countableCompletions?: readonly SolvedCompletionSample[]
-  initialHideCompleted?: boolean
-}
-
-export function StoryList({
-  list,
-  selectedStoryId = null,
-  countableCompletions = [],
-  initialHideCompleted = false,
-}: StoryListProps) {
-  const { project, epicId, epicTitle, stories, errors } = list
-  const heading = epicTitle ? `${epicId}: ${epicTitle}` : epicId
-  const [query, setQuery] = useState("")
-  const [hideCompleted, setHideCompleted] = usePersistedHideCompleted(
-    "stories",
-    initialHideCompleted
-  )
-  const [timeframe, setTimeframe] = useState<TimeframeFilterState>(
-    DEFAULT_TIMEFRAME_FILTER
-  )
-  const { sort, onSort } = useTableSort()
-
-  const completedAts = useMemo(
-    () => stories.map((story) => story.completedAt),
-    [stories]
-  )
-
-  const filtered = useMemo(
-    () =>
-      filterListRows(stories, {
-        query,
-        hideCompleted,
-        selectedTags: [],
-        timeframe,
-      }),
-    [stories, query, hideCompleted, timeframe]
-  )
-
-  const sorted = useMemo(
-    () => sortRowsByTableSort(filtered, sort),
-    [filtered, sort]
-  )
-
-  const {
-    pageRows,
-    page,
-    pageSize,
-    totalCount,
-    totalPages,
-    setPage,
-    setPageSize,
-  } = usePaginatedRows(
-    sorted,
-    [
-      listFilterResetKey(epicId, {
-        query,
-        hideCompleted,
-        parentKey: null,
-        selectedTags: [],
-        timeframe,
-      }),
-      tableSortResetKey(sort),
-    ].join("|")
-  )
-
-  const hasSourceRows = stories.length > 0
-  const filtersActive =
-    Boolean(query.trim()) || hideCompleted || isTimeframeActive(timeframe)
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="font-head text-xl">Stories</CardTitle>
-        <CardDescription>
-          <span className="font-medium text-foreground">{heading}</span>
-          <span className="mt-1 block font-mono text-xs">{project.name}</span>
-        </CardDescription>
-        {hasSourceRows ? (
-          <CardAction>
-            <TimeframeFilter
-              id={`story-timeframe-${epicId}`}
-              value={timeframe}
-              onChange={setTimeframe}
-              completedAts={completedAts}
-              countableCompletions={countableCompletions}
-            />
-          </CardAction>
-        ) : null}
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        {errors.length > 0 ? (
-          <div
-            role="status"
-            className="rounded border-2 border-destructive/40 bg-destructive/10 px-3 py-2 text-sm"
-          >
-            <p className="font-medium text-destructive">
-              {errors.length} issue{errors.length === 1 ? "" : "s"} loading
-              stories
-            </p>
-            <ul className="mt-2 flex flex-col gap-1 font-mono text-xs text-muted-foreground">
-              {errors.map((err) => (
-                <li key={`${err.filePath}:${err.message}`}>
-                  {err.filePath}: {err.message}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ) : null}
-
-        {!hasSourceRows ? (
-          <p className="text-sm text-muted-foreground">
-            No stories under this epic yet
-            {epicTitle?.toLowerCase() === "general"
-              ? " — general user stories will appear here."
-              : "."}
-          </p>
-        ) : (
-          <>
-            <ListFiltersBar
-              searchId={`story-search-${epicId}`}
-              query={query}
-              onQueryChange={setQuery}
-              hideCompleted={hideCompleted}
-              onHideCompletedChange={setHideCompleted}
-            />
-            {filtered.length === 0 ? (
-              <p className="text-sm text-muted-foreground">
-                {filtersActive
-                  ? "No stories match the current search or filters."
-                  : "No stories under this epic yet."}
-              </p>
-            ) : (
-              <>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-10" />
-                      <SortableTableHead
-                        label="ID"
-                        sortKey="id"
-                        activeKey={sort?.key ?? null}
-                        direction={sort?.direction ?? null}
-                        onSort={onSort}
-                      />
-                      <SortableTableHead
-                        label="Title"
-                        sortKey="title"
-                        activeKey={sort?.key ?? null}
-                        direction={sort?.direction ?? null}
-                        onSort={onSort}
-                      />
-                      <TableHead>Work items</TableHead>
-                      <SortableTableHead
-                        label="Size"
-                        sortKey="size"
-                        activeKey={sort?.key ?? null}
-                        direction={sort?.direction ?? null}
-                        onSort={onSort}
-                      />
-                      <SortableTableHead
-                        label="Points"
-                        sortKey="points"
-                        activeKey={sort?.key ?? null}
-                        direction={sort?.direction ?? null}
-                        onSort={onSort}
-                      />
-                      <SortableTableHead
-                        label="People"
-                        sortKey="people"
-                        activeKey={sort?.key ?? null}
-                        direction={sort?.direction ?? null}
-                        onSort={onSort}
-                        className="w-16 text-center"
-                      />
-                      <SortableTableHead
-                        label="Status"
-                        sortKey="status"
-                        activeKey={sort?.key ?? null}
-                        direction={sort?.direction ?? null}
-                        onSort={onSort}
-                        align="center"
-                      />
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {pageRows.map((story) => {
-                      const selected = selectedStoryId === story.id
-                      const href = `/board?epic=${encodeURIComponent(epicId)}&story=${encodeURIComponent(story.id)}`
-                      return (
-                        <TableRow
-                          key={`${project.id}:${story.id}:${story.filePath}`}
-                          data-state={selected ? "selected" : undefined}
-                          className={cn(
-                            selected && "bg-muted/60",
-                            "hover:bg-muted/40"
-                          )}
-                        >
-                          <TableCell className="w-10 pr-0">
-                            <ViewWorkItemButton
-                              itemRef={{
-                                kind: "story",
-                                id: story.id,
-                                title: story.title,
-                                filePath: story.filePath,
-                              }}
-                            />
-                          </TableCell>
-                          <TableCell className="font-mono text-xs">
-                            <IdCreatedTooltip
-                              id={story.id}
-                              created={story.created}
-                            >
-                              <Link
-                                href={href}
-                                className="underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-                                aria-current={selected ? "true" : undefined}
-                              >
-                                {story.id}
-                              </Link>
-                            </IdCreatedTooltip>
-                          </TableCell>
-                          <TableCell className="max-w-[18rem] whitespace-normal font-medium">
-                            <Link
-                              href={href}
-                              className="underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-                            >
-                              {story.title}
-                            </Link>
-                          </TableCell>
-                          <TableCell className="tabular-nums">
-                            {story.workItemCount}
-                          </TableCell>
-                          <TableCell>{story.size}</TableCell>
-                          <TableCell>{formatPoints(story.points)}</TableCell>
-                          <TableCell className="text-center">
-                            <div className="flex justify-center">
-                              <AttributionAvatarGroup
-                                reporters={story.reporters}
-                                resolvers={story.resolvers}
-                              />
-                            </div>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <div className="inline-flex w-full justify-center">
-                              {story.workItemCount === 0 ? (
-                                <StatusWithSolvedTooltip
-                                  status={story.status}
-                                  solvedAt={story.completedAt}
-                                />
-                              ) : (
-                                <ChildProgressBar
-                                  done={story.doneWorkItemCount}
-                                  total={story.workItemCount}
-                                />
-                              )}
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      )
-                    })}
-                  </TableBody>
-                </Table>
-                <ListPagination
-                  page={page}
-                  totalPages={totalPages}
-                  totalCount={totalCount}
-                  pageSize={pageSize}
-                  onPageChange={setPage}
-                  onPageSizeChange={setPageSize}
-                />
-              </>
-            )}
-          </>
-        )}
-      </CardContent>
-    </Card>
-  )
-}