@taskmark/ui 0.1.0 → 0.2.0

package/dist/standalone/dist/standalone/dist/standalone/dist/standalone/components/board/list-view-switcher.tsx

@@ -1,74 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useRouter, useSearchParams } from "next/navigation"
-
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import {
-  LIST_VIEW_LABELS,
-  LIST_VIEW_MODES,
-  boardHref,
-  type ListViewMode,
-} from "@/lib/taskmark/list-view-mode"
-
-type ListViewSwitcherProps = {
-  activeView: ListViewMode
-  selectedEpicId?: string | null
-  selectedStoryId?: string | null
-}
-
-function ListViewSwitcherInner({
-  activeView,
-  selectedEpicId = null,
-  selectedStoryId = null,
-}: ListViewSwitcherProps) {
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const itemId = searchParams.get("item")
-
-  return (
-    <Tabs
-      value={activeView}
-      onValueChange={(value) => {
-        if (typeof value !== "string") return
-        const next = value as ListViewMode
-        router.push(
-          boardHref({
-            view: next,
-            epic: next === "overall" ? selectedEpicId : null,
-            story: next === "overall" ? selectedStoryId : null,
-            item: itemId,
-          })
-        )
-      }}
-    >
-      <TabsList aria-label="Board list view">
-        {LIST_VIEW_MODES.map((mode) => (
-          <TabsTrigger key={mode} value={mode}>
-            {LIST_VIEW_LABELS[mode]}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-    </Tabs>
-  )
-}
-
-export function ListViewSwitcher(props: ListViewSwitcherProps) {
-  return (
-    <React.Suspense
-      fallback={
-        <Tabs value={props.activeView}>
-          <TabsList aria-label="Board list view">
-            {LIST_VIEW_MODES.map((mode) => (
-              <TabsTrigger key={mode} value={mode} disabled>
-                {LIST_VIEW_LABELS[mode]}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
-      }
-    >
-      <ListViewSwitcherInner {...props} />
-    </React.Suspense>
-  )
-}

package/dist/standalone/dist/standalone/dist/standalone/dist/standalone/components/board/markdown-content.tsx

@@ -1,91 +0,0 @@
-"use client"
-
-import ReactMarkdown from "react-markdown"
-import remarkGfm from "remark-gfm"
-
-import { cn } from "@/lib/utils"
-
-type MarkdownContentProps = {
-  text: string
-  className?: string
-  /** Inline-only rendering (no block elements) for checklist labels. */
-  inline?: boolean
-}
-
-const proseClassName = cn(
-  "text-sm leading-relaxed text-foreground",
-  "[&>:first-child]:mt-0 [&>:last-child]:mb-0",
-  "[&_p]:my-2",
-  "[&_h1]:mt-3 [&_h1]:mb-2 [&_h1]:font-head [&_h1]:text-lg [&_h1]:font-semibold",
-  "[&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:font-head [&_h2]:text-base [&_h2]:font-semibold",
-  "[&_h3]:mt-2.5 [&_h3]:mb-1.5 [&_h3]:font-head [&_h3]:text-sm [&_h3]:font-semibold",
-  "[&_h4]:mt-2 [&_h4]:mb-1 [&_h4]:font-head [&_h4]:text-sm [&_h4]:font-semibold",
-  "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5",
-  "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5",
-  "[&_li]:my-0.5 [&_li]:leading-relaxed",
-  "[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground",
-  "[&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:text-primary",
-  "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]",
-  "[&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:border-2 [&_pre]:border-border [&_pre]:bg-muted [&_pre]:p-3",
-  "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
-  "[&_hr]:my-3 [&_hr]:border-border",
-  "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_table]:text-left [&_table]:text-xs",
-  "[&_th]:border [&_th]:border-border [&_th]:bg-muted/50 [&_th]:px-2 [&_th]:py-1.5 [&_th]:font-head",
-  "[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1.5",
-  "[&_strong]:font-semibold",
-  "[&_em]:italic",
-  "[&_del]:text-muted-foreground [&_del]:line-through",
-  "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded"
-)
-
-/**
- * Render Taskmark markdown body sections (GFM: tables, strikethrough, task lists).
- */
-export function MarkdownContent({
-  text,
-  className,
-  inline = false,
-}: MarkdownContentProps) {
-  const trimmed = text.trim()
-  if (!trimmed) {
-    if (inline) return null
-    return <p className="text-sm text-muted-foreground">None noted.</p>
-  }
-
-  const markdown = (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      components={
-        inline
-          ? {
-              p: ({ children }) => <span>{children}</span>,
-              h1: ({ children }) => (
-                <span className="font-semibold">{children}</span>
-              ),
-              h2: ({ children }) => (
-                <span className="font-semibold">{children}</span>
-              ),
-              h3: ({ children }) => (
-                <span className="font-semibold">{children}</span>
-              ),
-              ul: ({ children }) => <span>{children}</span>,
-              ol: ({ children }) => <span>{children}</span>,
-              li: ({ children }) => <span>{children} </span>,
-            }
-          : undefined
-      }
-    >
-      {trimmed}
-    </ReactMarkdown>
-  )
-
-  if (inline) {
-    return (
-      <span className={cn("text-sm leading-relaxed text-foreground", className)}>
-        {markdown}
-      </span>
-    )
-  }
-
-  return <div className={cn(proseClassName, className)}>{markdown}</div>
-}

package/dist/standalone/dist/standalone/dist/standalone/dist/standalone/components/board/metric-stat-card.tsx

@@ -1,55 +0,0 @@
-import type { ReactNode } from "react"
-
-import { cn } from "@/lib/utils"
-
-type MetricStatCardProps = {
-  title: string
-  value: ReactNode
-  subtitle?: ReactNode
-  icon: ReactNode
-  /** Tailwind background class for the icon square (e.g. bg-violet-400). */
-  accentClassName: string
-  className?: string
-}
-
-/**
- * Neo-brutalism metric card: title, large value, accent icon with hard black shadow.
- */
-export function MetricStatCard({
-  title,
-  value,
-  subtitle,
-  icon,
-  accentClassName,
-  className,
-}: MetricStatCardProps) {
-  return (
-    <div
-      className={cn(
-        "flex min-h-[7.5rem] flex-col justify-between gap-3 border-2 border-black bg-white p-4 shadow-none",
-        className
-      )}
-    >
-      <div className="flex items-start justify-between gap-3">
-        <p className="text-sm font-medium text-neutral-800">{title}</p>
-        <div
-          className={cn(
-            "flex size-9 shrink-0 items-center justify-center border-2 border-black text-black shadow-[3px_3px_0_0_#000]",
-            accentClassName
-          )}
-          aria-hidden
-        >
-          {icon}
-        </div>
-      </div>
-      <div className="flex flex-col gap-1">
-        <p className="font-head text-3xl font-bold leading-none tracking-tight text-black tabular-nums sm:text-4xl">
-          {value}
-        </p>
-        {subtitle ? (
-          <p className="text-xs text-muted-foreground">{subtitle}</p>
-        ) : null}
-      </div>
-    </div>
-  )
-}

package/dist/standalone/dist/standalone/dist/standalone/dist/standalone/components/board/overall-work-items-list.tsx

@@ -1,356 +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 { ChildProgressBar } from "@/components/board/child-progress-bar"
-import {
-  IdCreatedTooltip,
-  SizeWithPointsTooltip,
-  StatusWithSolvedTooltip,
-} from "@/components/board/date-tooltip"
-import { ListFiltersBar } from "@/components/board/list-filters-bar"
-import { ListPagination } from "@/components/board/list-pagination"
-import { SortableTableHead } from "@/components/board/sortable-table-head"
-import { TypeBadge } from "@/components/board/status-badge"
-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 { EpicWorkItemsList } from "@/lib/taskmark/flat-work-item-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"
-
-type OverallWorkItemsListProps = {
-  list: EpicWorkItemsList
-  selectedStoryId?: string | null
-  countableCompletions?: readonly SolvedCompletionSample[]
-  initialHideCompleted?: boolean
-}
-
-export function OverallWorkItemsList({
-  list,
-  selectedStoryId = null,
-  countableCompletions = [],
-  initialHideCompleted = false,
-}: OverallWorkItemsListProps) {
-  const { project, epicId, epicTitle, rows, errors } = list
-  const heading = epicTitle ? `${epicId}: ${epicTitle}` : epicId
-  const [query, setQuery] = useState("")
-  const [hideCompleted, setHideCompleted] = usePersistedHideCompleted(
-    "overallWorkItems",
-    initialHideCompleted
-  )
-  const [timeframe, setTimeframe] = useState<TimeframeFilterState>(
-    DEFAULT_TIMEFRAME_FILTER
-  )
-  const { sort, onSort } = useTableSort()
-
-  const completedAts = useMemo(
-    () => rows.map((row) => row.completedAt),
-    [rows]
-  )
-
-  const filtered = useMemo(
-    () =>
-      filterListRows(rows, {
-        query,
-        hideCompleted,
-        selectedTags: [],
-        timeframe,
-      }),
-    [rows, 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 = rows.length > 0
-  const filtersActive =
-    Boolean(query.trim()) || hideCompleted || isTimeframeActive(timeframe)
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="font-head text-xl">Work items</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={`overall-workitems-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 work
-              items
-            </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 work items under this epic yet
-            {epicTitle?.toLowerCase() === "general"
-              ? " — stories and general tasks will appear here."
-              : "."}
-          </p>
-        ) : (
-          <>
-            <ListFiltersBar
-              searchId={`overall-workitems-search-${epicId}`}
-              query={query}
-              onQueryChange={setQuery}
-              hideCompleted={hideCompleted}
-              onHideCompletedChange={setHideCompleted}
-            />
-            {filtered.length === 0 ? (
-              <p className="text-sm text-muted-foreground">
-                {filtersActive
-                  ? "No work items match the current search or filters."
-                  : "No work items 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="Type"
-                        sortKey="type"
-                        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>Sub tasks</TableHead>
-                      <SortableTableHead
-                        label="Size"
-                        sortKey="size"
-                        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((row) => {
-                      const isStory = row.kind === "story"
-                      const selected = isStory && selectedStoryId === row.id
-                      const href = isStory
-                        ? `/board?epic=${encodeURIComponent(epicId)}&story=${encodeURIComponent(row.id)}`
-                        : null
-                      const sheetKind = isStory ? "story" : "item"
-                      return (
-                        <TableRow
-                          key={`${project.id}:${row.kind}:${row.id}:${row.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: sheetKind,
-                                id: row.id,
-                                title: row.title,
-                                filePath: row.filePath,
-                                itemType:
-                                  row.kind === "task" || row.kind === "bug"
-                                    ? row.kind
-                                    : undefined,
-                              }}
-                            />
-                          </TableCell>
-                          <TableCell className="font-mono text-xs">
-                            <IdCreatedTooltip
-                              id={row.id}
-                              created={row.created}
-                            >
-                              {href ? (
-                                <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}
-                                >
-                                  {row.id}
-                                </Link>
-                              ) : (
-                                row.id
-                              )}
-                            </IdCreatedTooltip>
-                          </TableCell>
-                          <TableCell>
-                            <TypeBadge type={row.kind} />
-                          </TableCell>
-                          <TableCell className="max-w-[18rem] whitespace-normal font-medium">
-                            {href ? (
-                              <Link
-                                href={href}
-                                className="underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-                              >
-                                {row.title}
-                              </Link>
-                            ) : (
-                              row.title
-                            )}
-                          </TableCell>
-                          <TableCell className="tabular-nums">
-                            {isStory ? row.workItemCount : "—"}
-                          </TableCell>
-                          <TableCell>
-                            <SizeWithPointsTooltip
-                              size={row.size}
-                              points={row.points}
-                            />
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <div className="flex justify-center">
-                              <AttributionAvatarGroup
-                                reporters={row.reporters}
-                                resolvers={row.resolvers}
-                              />
-                            </div>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <div className="inline-flex w-full justify-center">
-                              {isStory && row.workItemCount > 0 ? (
-                                <ChildProgressBar
-                                  done={row.doneWorkItemCount}
-                                  total={row.workItemCount}
-                                />
-                              ) : (
-                                <StatusWithSolvedTooltip
-                                  status={row.status}
-                                  solvedAt={row.completedAt}
-                                />
-                              )}
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      )
-                    })}
-                  </TableBody>
-                </Table>
-                <ListPagination
-                  page={page}
-                  totalPages={totalPages}
-                  totalCount={totalCount}
-                  pageSize={pageSize}
-                  onPageChange={setPage}
-                  onPageSizeChange={setPageSize}
-                />
-              </>
-            )}
-          </>
-        )}
-      </CardContent>
-    </Card>
-  )
-}

package/dist/standalone/dist/standalone/dist/standalone/dist/standalone/components/board/parent-filter-combobox.tsx

@@ -1,89 +0,0 @@
-"use client"
-
-import {
-  Combobox,
-  ComboboxChip,
-  ComboboxChips,
-  ComboboxChipsInput,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxItem,
-  ComboboxList,
-  useComboboxAnchor,
-} from "@/components/ui/combobox"
-import {
-  FILTER_CHIPS_FIELD_CLASS,
-  type ParentFilterOption,
-} from "@/lib/taskmark/list-filters"
-import { cn } from "@/lib/utils"
-
-type ParentFilterComboboxProps = {
-  options: ParentFilterOption[]
-  value: string[]
-  onChange: (keys: string[]) => void
-  id?: string
-}
-
-export function ParentFilterCombobox({
-  options,
-  value,
-  onChange,
-  id = "parent-filter",
-}: ParentFilterComboboxProps) {
-  const anchor = useComboboxAnchor()
-  const selected = options.filter((o) => value.includes(o.key))
-
-  if (options.length === 0) {
-    return (
-      <span className="text-xs text-muted-foreground">No parents on board</span>
-    )
-  }
-
-  return (
-    <Combobox
-      multiple
-      items={options}
-      value={selected}
-      onValueChange={(next) => {
-        const opts = (next as ParentFilterOption[] | null) ?? []
-        onChange(opts.map((o) => o.key))
-      }}
-      itemToStringLabel={(item) => {
-        const opt = item as ParentFilterOption
-        return `${opt.chipLabel} ${opt.title} ${opt.label}`
-      }}
-      isItemEqualToValue={(a, b) =>
-        (a as ParentFilterOption | null)?.key ===
-        (b as ParentFilterOption | null)?.key
-      }
-    >
-      <ComboboxChips
-        ref={anchor}
-        className={cn(FILTER_CHIPS_FIELD_CLASS, "min-w-[16rem] max-w-md")}
-      >
-        {selected.map((opt) => (
-          <ComboboxChip key={opt.key}>{opt.chipLabel}</ComboboxChip>
-        ))}
-        <ComboboxChipsInput
-          id={id}
-          placeholder={
-            selected.length === 0
-              ? "Filter by parent epic or story…"
-              : "Add parent…"
-          }
-          aria-label="Filter by parent epic or story"
-        />
-      </ComboboxChips>
-      <ComboboxContent anchor={anchor} className="w-80">
-        <ComboboxEmpty>No matching parents</ComboboxEmpty>
-        <ComboboxList>
-          {(opt: ParentFilterOption) => (
-            <ComboboxItem key={opt.key} value={opt}>
-              <span className="truncate">{opt.label}</span>
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  )
-}