@echothink-ui/todo 0.1.0

package/src/components/TodoItem.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Badge, Checkbox, Tag } from "@echothink-ui/core";
+import type { TodoTaskItem } from "../types";
+import { formatDateTime, priorityLabel, prioritySeverity } from "../utils";
+
+export interface TodoItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> {
+  item: TodoTaskItem;
+  onToggle?: (id: string) => void;
+}
+
+function validDateTimeAttribute(value: string | undefined) {
+  if (!value) return undefined;
+  return Number.isNaN(new Date(value).getTime()) ? undefined : value;
+}
+
+export function TodoItem({ item, onToggle, className, ...props }: TodoItemProps) {
+  const hasMeta = Boolean(item.assignee || item.priority || item.dueAt);
+  const dueDateTime = validDateTimeAttribute(item.dueAt);
+  const itemClassName = [
+    "eth-todo-item",
+    hasMeta ? "eth-todo-item--has-meta" : "",
+    item.done ? "eth-todo-item--done" : "",
+    className ?? ""
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div
+      {...props}
+      className={itemClassName}
+      data-priority={item.priority}
+      data-state={item.done ? "done" : "open"}
+      data-eth-component="TodoItem"
+    >
+      <div className="eth-todo-item__content eth-todo-item__primary">
+        <Checkbox
+          checked={item.done}
+          className="eth-todo-item__checkbox"
+          label={<span className="eth-todo-item__label">{item.label}</span>}
+          onChange={() => onToggle?.(item.id)}
+        />
+      </div>
+      {hasMeta ? (
+        <div className="eth-todo-item__meta" role="group" aria-label="Task details">
+          {item.priority ? (
+            <Badge className="eth-todo-item__tag" severity={prioritySeverity(item.priority)}>
+              {priorityLabel(item.priority)}
+            </Badge>
+          ) : null}
+          {item.assignee ? <Tag className="eth-todo-item__tag">{item.assignee}</Tag> : null}
+          {item.dueAt ? (
+            <span className="eth-todo-item__due">
+              <span className="eth-todo-item__due-label">Due</span>
+              <time dateTime={dueDateTime}>{formatDateTime(item.dueAt)}</time>
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/TodoList.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { Button, Panel, TextInput } from "@echothink-ui/core";
+import { PlusIcon } from "@echothink-ui/icons";
+import type { TodoTaskItem } from "../types";
+import { TodoItem } from "./TodoItem";
+
+export interface TodoListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> {
+  items?: TodoTaskItem[];
+  onToggle?: (id: string) => void;
+  onAdd?: (label: string) => void;
+}
+
+export function TodoList({ items = [], onToggle, onAdd, className, ...props }: TodoListProps) {
+  const [label, setLabel] = React.useState("");
+  const completedCount = items.filter((item) => item.done).length;
+  const openCount = items.length - completedCount;
+  const summary = items.length
+    ? `${openCount} open / ${completedCount} done`
+    : "No tasks yet";
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!label.trim() || !onAdd) return;
+    onAdd(label.trim());
+    setLabel("");
+  };
+
+  return (
+    <Panel
+      {...props}
+      className={`eth-todo-list ${className ?? ""}`}
+      title="To-do"
+      subtitle={summary}
+      data-eth-component="TodoList"
+    >
+      {items.length ? (
+        <div
+          className="eth-todo-list__items"
+          role="list"
+          aria-label="Tasks"
+        >
+          {items.map((item) => (
+            <TodoItem key={item.id} item={item} onToggle={onToggle} role="listitem" />
+          ))}
+        </div>
+      ) : (
+        <p className="eth-todo-list__empty">No tasks have been added.</p>
+      )}
+      {onAdd ? (
+        <form className="eth-todo-list__add" aria-label="Add task" onSubmit={submit}>
+          <TextInput
+            value={label}
+            labelText="New task"
+            hideLabel
+            placeholder="Add a task"
+            onChange={(event) => setLabel(event.currentTarget.value)}
+          />
+          <Button type="submit" icon={<PlusIcon />} disabled={!label.trim()}>
+            Add
+          </Button>
+        </form>
+      ) : null}
+    </Panel>
+  );
+}

package/src/index.test.tsx

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { TodoList } from "./index";
+
+const items = [
+  {
+    id: "approve",
+    label: "Approve campaign brief",
+    done: false,
+    dueAt: "2026-05-30T17:00:00+08:00",
+    assignee: "AL",
+    priority: "high"
+  },
+  {
+    id: "tag-docs",
+    label: "Tag new docs",
+    done: true,
+    assignee: "MK"
+  }
+];
+
+describe("@echothink-ui/todo TodoList", () => {
+  it("renders a named task list with completion summary", () => {
+    render(<TodoList items={items} onAdd={vi.fn()} />);
+
+    const list = screen.getByRole("list", { name: "Tasks" });
+
+    expect(list.className).toContain("eth-todo-list__items");
+    expect(screen.getByText("1 open / 1 done")).toBeTruthy();
+    expect(screen.getByText("Approve campaign brief")).toBeTruthy();
+    expect(screen.getByText("AL")).toBeTruthy();
+  });
+
+  it("submits trimmed task labels through the add form", () => {
+    const onAdd = vi.fn();
+
+    render(<TodoList items={items} onAdd={onAdd} />);
+
+    fireEvent.change(screen.getByLabelText("New task"), {
+      target: { value: "  Follow up with finance  " }
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Add" }));
+
+    expect(onAdd).toHaveBeenCalledWith("Follow up with finance");
+  });
+});

package/src/index.tsx

@@ -0,0 +1,26 @@
+import "./styles.css";
+
+export * from "./types";
+export { TodoList, type TodoListProps } from "./components/TodoList";
+export { TodoItem, type TodoItemProps } from "./components/TodoItem";
+export { KanbanBoard, type KanbanBoardProps } from "./components/KanbanBoard";
+export { KanbanColumn, type KanbanColumnProps } from "./components/KanbanColumn";
+export { TaskCard, type TaskCardProps } from "./components/TaskCard";
+export { TaskTable, type TaskTableProps } from "./components/TaskTable";
+export {
+  TaskDependencyList,
+  type TaskDependencyListProps
+} from "./components/TaskDependencyList";
+export { TaskTimeline, type TaskTimelineProps } from "./components/TaskTimeline";
+
+export const TodoComponentNames = [
+  "TodoList",
+  "TodoItem",
+  "KanbanBoard",
+  "KanbanColumn",
+  "TaskCard",
+  "TaskTable",
+  "TaskDependencyList",
+  "TaskTimeline"
+] as const;
+export type TodoComponentName = (typeof TodoComponentNames)[number];