banhaten 0.3.0 → 0.5.0

package/registry/components/task-list.tsx

@@ -0,0 +1,429 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  CircleArrowRightIcon,
+  CircleCheckIcon,
+  ListChecksIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Collapsible,
+  CollapsiblePanel,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { RollingCount } from "@/components/ui/rolling-count"
+import { ShimmerText } from "@/components/ui/shimmer-text"
+import { useControllableState } from "@/hooks/use-controllable-state"
+
+import "./task-list.css"
+
+type TaskStatus = "pending" | "active" | "done"
+
+type TaskListItem = {
+  id: string
+  label: React.ReactNode
+  status?: TaskStatus
+}
+
+type TaskListSurface = "card" | "well" | "plain"
+
+type TaskListLabels = {
+  /**
+   * Accessible summary of the counter, for example "2 of 5 done". The toggle
+   * reads it after the title, so its name is "To-dos 2 of 5 done".
+   */
+  count: (done: number, total: number) => string
+}
+
+type TaskListPreviewLabels = {
+  /** Label of the control that reveals the remaining items. */
+  more: (count: number) => string
+  /** Label of the control that hides the remaining items again. */
+  less: string
+}
+
+type TaskListRootProps = React.ComponentProps<"div"> & {
+  surface?: TaskListSurface
+}
+
+type TaskListHeaderProps = React.ComponentProps<"div"> & {
+  /** Shown at the end of the header, for example a total. */
+  count?: React.ReactNode
+  /**
+   * Rows the header icon summarizes: a list before work starts, a progress pie
+   * while it runs, and a check once every row is done.
+   */
+  items?: readonly TaskListItem[]
+}
+
+type TaskListItemsProps = Omit<React.ComponentProps<"ul">, "children"> & {
+  items: readonly TaskListItem[]
+}
+
+type TaskListPreviewProps = Omit<React.ComponentProps<"div">, "children"> & {
+  items: readonly TaskListItem[]
+  labels?: Partial<TaskListPreviewLabels>
+  /** Rows shown before the rest fold behind a "more" control. */
+  visibleCount?: number
+}
+
+type TaskListProps = Omit<React.ComponentProps<"div">, "children" | "title"> & {
+  defaultOpen?: boolean
+  items: readonly TaskListItem[]
+  labels?: Partial<TaskListLabels>
+  onOpenChange?: (open: boolean) => void
+  open?: boolean
+  surface?: TaskListSurface
+  title?: React.ReactNode
+}
+
+const defaultLabels: TaskListLabels = {
+  count: (done, total) => `${done} of ${total} done`,
+}
+
+const defaultPreviewLabels: TaskListPreviewLabels = {
+  less: "Show less",
+  more: (count) => `${count} more`,
+}
+
+const noItems: readonly TaskListItem[] = []
+
+type TaskListState = "idle" | "running" | "done"
+
+function summarize(items: readonly TaskListItem[]) {
+  const total = items.length
+  const done = items.filter((item) => item.status === "done").length
+  const running = items.some((item) => item.status === "active")
+  const state: TaskListState =
+    total > 0 && done === total ? "done" : running || done > 0 ? "running" : "idle"
+
+  return {
+    done,
+    progress: total > 0 ? Math.round((done / total) * 100) : 0,
+    state,
+    total,
+  }
+}
+
+type TaskListContextValue = {
+  setTitleId: (id: string | undefined) => void
+  titleId: string | undefined
+}
+
+/** Lets the rows of a list take their name from its header. */
+const TaskListContext = React.createContext<TaskListContextValue | null>(null)
+
+/** Ten even dashes: pathLength makes the dash period divide the circle exactly,
+ * and the ring starts at 12 o'clock with a dash centered there, so it stays
+ * symmetric (and unchanged when mirrored in RTL). */
+function DashedCircleIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" {...props}>
+      <circle
+        cx="12"
+        cy="12"
+        pathLength="54"
+        r="9"
+        stroke="currentColor"
+        strokeDasharray="1.8 3.6"
+        strokeDashoffset="0.9"
+        strokeLinecap="round"
+        strokeWidth="var(--bh-icon-stroke-180)"
+        transform="rotate(-90 12 12)"
+      />
+    </svg>
+  )
+}
+
+function FilledCheckIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+type TaskListHeaderContentProps = {
+  chevron?: boolean
+  count?: React.ReactNode
+  items: readonly TaskListItem[]
+  title: React.ReactNode
+}
+
+/** Icon, title, and count shared by the toggle header and the static one. */
+function TaskListHeaderContent({
+  chevron = false,
+  count,
+  items,
+  title,
+}: TaskListHeaderContentProps) {
+  const { progress, state } = summarize(items)
+  const titleId = React.useId()
+  const register = React.useContext(TaskListContext)?.setTitleId
+
+  React.useEffect(() => {
+    if (!register) return
+    register(titleId)
+    return () => register(undefined)
+  }, [register, titleId])
+
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        data-slot="task-list-header-icon"
+        data-state={state}
+      >
+        <ListChecksIcon data-icon="list" strokeWidth="var(--bh-icon-stroke-200)" />
+        <span
+          data-icon="progress"
+          data-slot="task-list-progress"
+          style={{ "--task-list-progress": `${progress}%` } as React.CSSProperties}
+        >
+          <DashedCircleIcon data-slot="task-list-progress-ring" />
+        </span>
+        <FilledCheckIcon data-icon="done" />
+        {chevron ? (
+          <ChevronDownIcon
+            data-icon="chevron"
+            strokeWidth="var(--bh-icon-stroke-180)"
+          />
+        ) : null}
+      </span>
+      <span data-slot="task-list-title" dir="auto" id={titleId}>
+        {title}
+      </span>
+      {count === undefined || count === null ? null : (
+        <>
+          {/* Keeps title and count apart in the toggle's accessible name.
+              Flex layout drops the space, so nothing moves on screen. */}{" "}
+          <span data-slot="task-list-count">{count}</span>
+        </>
+      )}
+    </>
+  )
+}
+
+type TaskListRowProps = {
+  index: number
+  item: TaskListItem
+}
+
+function TaskListRow({ index, item }: TaskListRowProps) {
+  const status = item.status ?? "pending"
+
+  return (
+    <li
+      data-slot="task-list-item"
+      data-status={status}
+      style={{ "--task-list-index": index } as React.CSSProperties}
+    >
+      <span data-slot="task-list-item-icon">
+        <DashedCircleIcon data-icon="pending" />
+        <CircleArrowRightIcon
+          aria-hidden="true"
+          data-icon="active"
+          strokeWidth="var(--bh-icon-stroke-180)"
+        />
+        <CircleCheckIcon
+          aria-hidden="true"
+          data-icon="done"
+          strokeWidth="var(--bh-icon-stroke-180)"
+        />
+      </span>
+      <span data-slot="task-list-label" dir="auto">
+        <span data-slot="task-list-label-text">{item.label}</span>
+        <span aria-hidden="true" data-slot="task-list-label-shine">
+          <ShimmerText animated={status === "active"} tone="default">
+            {item.label}
+          </ShimmerText>
+        </span>
+      </span>
+    </li>
+  )
+}
+
+/** Surface of a composed list. Its header names the rows inside it. */
+const TaskListRoot = React.forwardRef<HTMLDivElement, TaskListRootProps>(
+  function TaskListRoot({ className, surface = "card", ...props }, ref) {
+    const [titleId, setTitleId] = React.useState<string>()
+    const context = React.useMemo(() => ({ setTitleId, titleId }), [titleId])
+
+    return (
+      <TaskListContext.Provider value={context}>
+        <div
+          data-slot="task-list"
+          data-surface={surface}
+          ref={ref}
+          className={cn("min-w-0 max-w-full", className)}
+          {...props}
+        />
+      </TaskListContext.Provider>
+    )
+  }
+)
+
+/** Static header: status icon, title, and an optional count. */
+const TaskListHeader = React.forwardRef<HTMLDivElement, TaskListHeaderProps>(
+  function TaskListHeader({ children, count, items = noItems, ...props }, ref) {
+    return (
+      <div data-slot="task-list-header" ref={ref} {...props}>
+        <TaskListHeaderContent count={count} items={items} title={children} />
+      </div>
+    )
+  }
+)
+
+/** Rows moving between pending, active, and done. */
+const TaskListItems = React.forwardRef<HTMLUListElement, TaskListItemsProps>(
+  function TaskListItems({ "aria-labelledby": labelledBy, items, ...props }, ref) {
+    const titleId = React.useContext(TaskListContext)?.titleId
+
+    return (
+      <ul
+        aria-labelledby={labelledBy ?? titleId}
+        data-slot="task-list-items"
+        ref={ref}
+        {...props}
+      >
+        {items.map((item, index) => (
+          <TaskListRow index={index} item={item} key={item.id} />
+        ))}
+      </ul>
+    )
+  }
+)
+
+/** Shows the first rows and folds the rest behind a "more" control. */
+const TaskListPreview = React.forwardRef<HTMLDivElement, TaskListPreviewProps>(
+  function TaskListPreview(
+    { items, labels: labelOverrides, visibleCount = 3, ...props },
+    ref
+  ) {
+    const labels = { ...defaultPreviewLabels, ...labelOverrides }
+    const [expanded, setExpanded] = React.useState(false)
+    const split = Math.max(0, visibleCount)
+    const rest = items.slice(split)
+
+    return (
+      <div data-slot="task-list-preview" ref={ref} {...props}>
+        <TaskListItems items={items.slice(0, split)} />
+        {rest.length > 0 ? (
+          <Collapsible onOpenChange={setExpanded} open={expanded}>
+            <CollapsiblePanel data-slot="task-list-collapsible">
+              <TaskListItems data-rest="true" items={rest} />
+            </CollapsiblePanel>
+            <CollapsibleTrigger asChild>
+              <button data-slot="task-list-more" type="button">
+                <span aria-hidden="true" data-slot="task-list-more-icon">
+                  <svg viewBox="0 0 24 24">
+                    {expanded ? (
+                      <rect
+                        fill="currentColor"
+                        height="1.5"
+                        rx="0.75"
+                        width="14.5"
+                        x="4.75"
+                        y="11.25"
+                      />
+                    ) : (
+                      <>
+                        <circle cx="6" cy="12" fill="currentColor" r="1.25" />
+                        <circle cx="12" cy="12" fill="currentColor" r="1.25" />
+                        <circle cx="18" cy="12" fill="currentColor" r="1.25" />
+                      </>
+                    )}
+                  </svg>
+                </span>
+                {expanded ? labels.less : labels.more(rest.length)}
+              </button>
+            </CollapsibleTrigger>
+          </Collapsible>
+        ) : null}
+      </div>
+    )
+  }
+)
+
+/**
+ * Agent progress tracker: a collapsible to-do list whose header icon, counter,
+ * and rows move between pending, active, and done as work completes. Compose
+ * the parts instead for a static or folded list.
+ */
+const TaskList = React.forwardRef<HTMLDivElement, TaskListProps>(
+  function TaskList(
+    {
+      defaultOpen = true,
+      items,
+      labels: labelOverrides,
+      onOpenChange,
+      open: controlledOpen,
+      title = "To-dos",
+      ...props
+    },
+    ref
+  ) {
+    const labels = { ...defaultLabels, ...labelOverrides }
+    const [open, setOpen] = useControllableState({
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+      value: controlledOpen,
+    })
+    const { done, state, total } = summarize(items)
+
+    // Collapsible wires the toggle's ARIA and unmounts folded rows once they
+    // have animated away, so nothing hidden stays focusable. The toggle is
+    // named by what it shows: the title, then the progress summary.
+    return (
+      <Collapsible asChild onOpenChange={setOpen} open={open}>
+        <TaskListRoot
+          data-open={open ? "true" : "false"}
+          data-state={state}
+          ref={ref}
+          {...props}
+        >
+          <CollapsibleTrigger asChild>
+            <button data-slot="task-list-header" type="button">
+              <TaskListHeaderContent
+                chevron
+                count={
+                  <>
+                    <span className="sr-only">{labels.count(done, total)}</span>
+                    <RollingCount aria-hidden="true" value={`${done}/${total}`} />
+                  </>
+                }
+                items={items}
+                title={title}
+              />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsiblePanel data-slot="task-list-collapsible">
+            <TaskListItems items={items} />
+          </CollapsiblePanel>
+        </TaskListRoot>
+      </Collapsible>
+    )
+  }
+)
+
+export { TaskList, TaskListHeader, TaskListItems, TaskListPreview, TaskListRoot }
+export type {
+  TaskListHeaderProps,
+  TaskListItem,
+  TaskListItemsProps,
+  TaskListLabels,
+  TaskListPreviewLabels,
+  TaskListPreviewProps,
+  TaskListProps,
+  TaskListRootProps,
+  TaskListSurface,
+  TaskStatus,
+}