@taskmark/ui 0.2.0 → 0.2.2

package/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/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>
-  )
-}

package/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/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/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>
-  )
-}