@taskmark/ui 0.1.0 → 0.2.1

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

@@ -1,363 +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,
-} 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 { EpicSummary, ProjectEpicList } from "@/lib/taskmark/epic-types"
-import { isGeneralEpic } from "@/lib/taskmark/general-epic"
-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 EpicListProps = {
-  lists: ProjectEpicList[]
-  selectedEpicId?: string | null
-  /** Stories + epic-direct tasks/bugs for day/week story-point badges. */
-  countableCompletions?: readonly SolvedCompletionSample[]
-  initialHideCompleted?: boolean
-}
-
-function ProjectEpicCard({
-  project,
-  epics,
-  errors,
-  selectedEpicId,
-  countableCompletions = [],
-  initialHideCompleted = false,
-}: {
-  project: ProjectEpicList["project"]
-  epics: EpicSummary[]
-  errors: ProjectEpicList["errors"]
-  selectedEpicId: string | null
-  countableCompletions?: readonly SolvedCompletionSample[]
-  initialHideCompleted?: boolean
-}) {
-  const [query, setQuery] = useState("")
-  const [hideCompleted, setHideCompleted] = usePersistedHideCompleted(
-    "epics",
-    initialHideCompleted
-  )
-  const { sort, onSort } = useTableSort()
-  const [timeframe, setTimeframe] = useState<TimeframeFilterState>(
-    DEFAULT_TIMEFRAME_FILTER
-  )
-
-  const visibleEpics = useMemo(
-    () =>
-      epics.filter(
-        (epic) => !(isGeneralEpic(epic) && epic.workItemCount === 0)
-      ),
-    [epics]
-  )
-
-  const completedAts = useMemo(
-    () => visibleEpics.map((epic) => epic.completedAt),
-    [visibleEpics]
-  )
-
-  const filtered = useMemo(
-    () =>
-      filterListRows(visibleEpics, {
-        query,
-        hideCompleted,
-        selectedTags: [],
-        timeframe,
-      }),
-    [visibleEpics, query, hideCompleted, timeframe]
-  )
-
-  const sorted = useMemo(
-    () => sortRowsByTableSort(filtered, sort),
-    [filtered, sort]
-  )
-
-  const {
-    pageRows,
-    page,
-    pageSize,
-    totalCount,
-    totalPages,
-    setPage,
-    setPageSize,
-  } = usePaginatedRows(
-    sorted,
-    [
-      listFilterResetKey(project.id, {
-        query,
-        hideCompleted,
-        parentKey: null,
-        selectedTags: [],
-        timeframe,
-      }),
-      tableSortResetKey(sort),
-    ].join("|")
-  )
-
-  const hasSourceRows = visibleEpics.length > 0
-  const filtersActive =
-    Boolean(query.trim()) || hideCompleted || isTimeframeActive(timeframe)
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="font-head text-xl">{project.name}</CardTitle>
-        <CardDescription className="font-mono text-xs">
-          {project.boardPath}
-        </CardDescription>
-        {hasSourceRows ? (
-          <CardAction>
-            <TimeframeFilter
-              id={`epic-timeframe-${project.id}`}
-              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} epic file
-              {errors.length === 1 ? "" : "s"} could not be parsed
-            </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.filePath}: {err.message}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ) : null}
-
-        {!hasSourceRows ? (
-          <p className="text-sm text-muted-foreground">
-            No epics in this board yet. Init should seed a General epic for
-            general tasks and user stories.
-          </p>
-        ) : (
-          <>
-            <ListFiltersBar
-              searchId={`epic-search-${project.id}`}
-              query={query}
-              onQueryChange={setQuery}
-              hideCompleted={hideCompleted}
-              onHideCompletedChange={setHideCompleted}
-            />
-            {filtered.length === 0 ? (
-              <p className="text-sm text-muted-foreground">
-                {filtersActive
-                  ? "No epics match the current search or filters."
-                  : "No epics in this board 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="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"
-                      />
-                      <TableHead>Progress</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {pageRows.map((epic) => {
-                      const selected = selectedEpicId === epic.id
-                      const general = isGeneralEpic(epic)
-                      return (
-                        <TableRow
-                          key={`${project.id}:${epic.id}:${epic.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: "epic",
-                                id: epic.id,
-                                title: epic.title,
-                                filePath: epic.filePath,
-                              }}
-                            />
-                          </TableCell>
-                          <TableCell className="font-mono text-xs">
-                            <IdCreatedTooltip id={epic.id} created={epic.created}>
-                              <Link
-                                href={`/board?epic=${encodeURIComponent(epic.id)}`}
-                                className="underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-                                aria-current={selected ? "true" : undefined}
-                              >
-                                {epic.id}
-                              </Link>
-                            </IdCreatedTooltip>
-                          </TableCell>
-                          <TableCell className="max-w-[18rem] whitespace-normal font-medium">
-                            <Link
-                              href={`/board?epic=${encodeURIComponent(epic.id)}`}
-                              className="underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-                            >
-                              {epic.title}
-                              {general ? (
-                                <span className="ml-2 text-xs font-normal text-muted-foreground">
-                                  general tasks and user stories
-                                </span>
-                              ) : null}
-                            </Link>
-                          </TableCell>
-                          <TableCell className="tabular-nums">
-                            {epic.workItemCount}
-                          </TableCell>
-                          <TableCell>{formatPoints(epic.points)}</TableCell>
-                          <TableCell className="text-center">
-                            <div className="flex justify-center">
-                              <AttributionAvatarGroup
-                                reporters={epic.reporters}
-                                resolvers={epic.resolvers}
-                              />
-                            </div>
-                          </TableCell>
-                          <TableCell>
-                            <ChildProgressBar
-                              done={epic.doneWorkItemCount}
-                              total={epic.workItemCount}
-                            />
-                          </TableCell>
-                        </TableRow>
-                      )
-                    })}
-                  </TableBody>
-                </Table>
-                <ListPagination
-                  page={page}
-                  totalPages={totalPages}
-                  totalCount={totalCount}
-                  pageSize={pageSize}
-                  onPageChange={setPage}
-                  onPageSizeChange={setPageSize}
-                />
-              </>
-            )}
-          </>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-export function EpicList({
-  lists,
-  selectedEpicId = null,
-  countableCompletions = [],
-  initialHideCompleted = false,
-}: EpicListProps) {
-  if (lists.length === 0) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle className="font-head text-xl">Epics</CardTitle>
-          <CardDescription>
-            No Taskmark projects were discovered under this master folder.
-          </CardDescription>
-        </CardHeader>
-      </Card>
-    )
-  }
-
-  return (
-    <div className="flex flex-col gap-6">
-      {lists.map(({ project, epics, errors }) => (
-        <ProjectEpicCard
-          key={project.boardPath}
-          project={project}
-          epics={epics}
-          errors={errors}
-          selectedEpicId={selectedEpicId}
-          countableCompletions={countableCompletions}
-          initialHideCompleted={initialHideCompleted}
-        />
-      ))}
-    </div>
-  )
-}

package/dist/standalone/dist/standalone/dist/standalone/dist/standalone/dist/standalone/components/board/hide-completed-toggle.tsx

@@ -1,39 +0,0 @@
-"use client"
-
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { cn } from "@/lib/utils"
-
-type HideCompletedToggleProps = {
-  checked: boolean
-  onCheckedChange: (checked: boolean) => void
-  id?: string
-  className?: string
-}
-
-/** Default off — completed rows remain visible until the user enables this. */
-export function HideCompletedToggle({
-  checked,
-  onCheckedChange,
-  id = "hide-completed",
-  className,
-}: HideCompletedToggleProps) {
-  return (
-    <Label
-      htmlFor={id}
-      className={cn(
-        "inline-flex h-8 cursor-pointer items-center gap-2 px-1 text-sm font-normal text-muted-foreground hover:text-foreground",
-        className
-      )}
-    >
-      <Switch
-        id={id}
-        size="sm"
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        aria-label="Hide completed"
-      />
-      Hide completed
-    </Label>
-  )
-}

package/dist/standalone/dist/standalone/dist/standalone/dist/standalone/dist/standalone/components/board/list-filters-bar.tsx

@@ -1,78 +0,0 @@
-"use client"
-
-import { ListSearchBox } from "@/components/board/list-search-box"
-import { HideCompletedToggle } from "@/components/board/hide-completed-toggle"
-import { ParentFilterCombobox } from "@/components/board/parent-filter-combobox"
-import { TagsMultiselectFilter } from "@/components/board/tags-multiselect-filter"
-import type { ParentFilterOption } from "@/lib/taskmark/list-filters"
-import { cn } from "@/lib/utils"
-
-type ListFiltersBarProps = {
-  query: string
-  onQueryChange: (query: string) => void
-  hideCompleted: boolean
-  onHideCompletedChange: (hide: boolean) => void
-  /** Work items: parent autocomplete options. */
-  parentOptions?: ParentFilterOption[]
-  parentKeys?: string[]
-  onParentKeysChange?: (keys: string[]) => void
-  /** Work items (or any list with tags): multiselect. */
-  tagOptions?: string[]
-  selectedTags?: string[]
-  onSelectedTagsChange?: (tags: string[]) => void
-  searchId?: string
-  className?: string
-}
-
-export function ListFiltersBar({
-  query,
-  onQueryChange,
-  hideCompleted,
-  onHideCompletedChange,
-  parentOptions,
-  parentKeys = [],
-  onParentKeysChange,
-  tagOptions,
-  selectedTags = [],
-  onSelectedTagsChange,
-  searchId,
-  className,
-}: ListFiltersBarProps) {
-  const showParent = Boolean(parentOptions && onParentKeysChange)
-  const showTags = Boolean(tagOptions && onSelectedTagsChange)
-
-  return (
-    <div
-      className={cn(
-        "flex flex-wrap items-center gap-2 border-b border-border pb-3",
-        className
-      )}
-      role="search"
-    >
-      <ListSearchBox
-        id={searchId}
-        value={query}
-        onChange={onQueryChange}
-      />
-      {showParent ? (
-        <ParentFilterCombobox
-          options={parentOptions!}
-          value={parentKeys}
-          onChange={onParentKeysChange!}
-        />
-      ) : null}
-      {showTags ? (
-        <TagsMultiselectFilter
-          options={tagOptions!}
-          value={selectedTags}
-          onChange={onSelectedTagsChange!}
-        />
-      ) : null}
-      <HideCompletedToggle
-        checked={hideCompleted}
-        onCheckedChange={onHideCompletedChange}
-        id={searchId ? `${searchId}-hide-completed` : undefined}
-      />
-    </div>
-  )
-}

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

@@ -1,124 +0,0 @@
-"use client"
-
-import {
-  ChevronFirstIcon,
-  ChevronLastIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { Label } from "@/components/ui/label"
-import {
-  PAGE_SIZE_OPTIONS,
-  type PageSize,
-} from "@/lib/taskmark/pagination"
-import { cn } from "@/lib/utils"
-
-type ListPaginationProps = {
-  page: number
-  totalPages: number
-  totalCount: number
-  pageSize: PageSize
-  onPageChange: (page: number) => void
-  onPageSizeChange: (pageSize: PageSize) => void
-  className?: string
-}
-
-export function ListPagination({
-  page,
-  totalPages,
-  totalCount,
-  pageSize,
-  onPageChange,
-  onPageSizeChange,
-  className,
-}: ListPaginationProps) {
-  if (totalCount === 0) return null
-
-  const safeTotalPages = Math.max(totalPages, 1)
-  const atFirst = page <= 1
-  const atLast = page >= safeTotalPages
-  const from = (page - 1) * pageSize + 1
-  const to = Math.min(page * pageSize, totalCount)
-
-  return (
-    <div
-      className={cn(
-        "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-        className
-      )}
-    >
-      <p className="text-xs text-muted-foreground tabular-nums">
-        {from}–{to} of {totalCount}
-        <span className="mx-1.5 text-border">·</span>
-        Page {page} of {safeTotalPages}
-      </p>
-
-      <div className="flex flex-wrap items-center gap-3">
-        <div className="flex items-center gap-1.5">
-          <Label htmlFor="list-page-size" className="text-xs text-muted-foreground">
-            Rows
-          </Label>
-          <select
-            id="list-page-size"
-            className="h-8 rounded border-2 border-border bg-input px-2 text-sm shadow-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-            value={pageSize}
-            onChange={(e) =>
-              onPageSizeChange(Number(e.target.value) as PageSize)
-            }
-          >
-            {PAGE_SIZE_OPTIONS.map((size) => (
-              <option key={size} value={size}>
-                {size}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <nav aria-label="Pagination" className="flex items-center gap-0.5">
-          <Button
-            type="button"
-            variant="outline"
-            size="icon-sm"
-            aria-label="First page"
-            disabled={atFirst}
-            onClick={() => onPageChange(1)}
-          >
-            <ChevronFirstIcon />
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="icon-sm"
-            aria-label="Previous page"
-            disabled={atFirst}
-            onClick={() => onPageChange(page - 1)}
-          >
-            <ChevronLeftIcon />
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="icon-sm"
-            aria-label="Next page"
-            disabled={atLast}
-            onClick={() => onPageChange(page + 1)}
-          >
-            <ChevronRightIcon />
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="icon-sm"
-            aria-label="Last page"
-            disabled={atLast}
-            onClick={() => onPageChange(safeTotalPages)}
-          >
-            <ChevronLastIcon />
-          </Button>
-        </nav>
-      </div>
-    </div>
-  )
-}

package/dist/standalone/dist/standalone/dist/standalone/dist/standalone/dist/standalone/components/board/list-search-box.tsx

@@ -1,59 +0,0 @@
-"use client"
-
-import { SearchIcon, XIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { FILTER_CHIPS_FIELD_CLASS } from "@/lib/taskmark/list-filters"
-import { cn } from "@/lib/utils"
-
-type ListSearchBoxProps = {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-  className?: string
-  id?: string
-}
-
-export function ListSearchBox({
-  value,
-  onChange,
-  placeholder = "Search by id or name…",
-  className,
-  id = "list-search",
-}: ListSearchBoxProps) {
-  return (
-    <div
-      className={cn(
-        FILTER_CHIPS_FIELD_CLASS,
-        "min-w-[12rem] flex-1 max-w-sm",
-        className
-      )}
-    >
-      <SearchIcon
-        className="size-3.5 shrink-0 text-muted-foreground"
-        aria-hidden
-      />
-      <input
-        id={id}
-        type="search"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        className="min-w-16 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
-        aria-label="Search by work item id or name"
-      />
-      {value ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-xs"
-          className="-mr-1 opacity-50 hover:opacity-100"
-          onClick={() => onChange("")}
-          aria-label="Clear search"
-        >
-          <XIcon className="size-3.5" />
-        </Button>
-      ) : null}
-    </div>
-  )
-}