@echothink-ui/todo 0.1.0

package/src/styles.css

@@ -0,0 +1,591 @@
+@import "@echothink-ui/core/styles.css";
+
+.eth-todo-kanban,
+.eth-kanban-board {
+  background: var(--eth-color-background);
+  color: var(--eth-color-text-primary);
+  inline-size: 100%;
+  overflow-x: auto;
+  padding: var(--eth-space-xl);
+}
+
+.eth-todo-kanban__columns,
+.eth-kanban-board__columns {
+  align-items: stretch;
+  display: flex;
+  gap: var(--eth-space-md);
+  min-block-size: 100%;
+}
+
+.eth-todo-kanban__column,
+.eth-kanban-column {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  display: grid;
+  flex: 1 0 18rem;
+  grid-template-rows: auto 1fr;
+  inline-size: 18rem;
+  min-block-size: 22rem;
+  min-inline-size: 18rem;
+  overflow: hidden;
+}
+
+.eth-kanban-column--over-limit {
+  border-color: var(--eth-color-danger);
+  box-shadow: inset 0 0.25rem 0 var(--eth-color-danger);
+}
+
+.eth-todo-kanban__column-header,
+.eth-kanban-column__header {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  border-bottom: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  gap: var(--eth-space-md);
+  inset-block-start: 0;
+  justify-content: space-between;
+  padding: var(--eth-space-md) var(--eth-space-lg);
+  position: sticky;
+  z-index: 1;
+}
+
+.eth-kanban-column__header {
+  align-items: stretch;
+  display: grid;
+  gap: var(--eth-space-md);
+  justify-content: initial;
+  margin: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-kanban-column__header-main {
+  align-items: flex-start;
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.eth-kanban-column__heading {
+  min-inline-size: 0;
+}
+
+.eth-kanban-column__actions {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  gap: var(--eth-space-xs);
+  justify-content: flex-end;
+}
+
+.eth-kanban-column__add-glyph {
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1;
+}
+
+.eth-todo-kanban__column-header h3,
+.eth-kanban-column__header h3 {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.2857;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-todo-kanban__column-header span,
+.eth-kanban-column__count {
+  color: var(--eth-color-text-secondary);
+  display: block;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  margin-block-start: var(--eth-space-2xs);
+}
+
+.eth-kanban-column__metrics,
+.eth-kanban-column__limit {
+  display: grid;
+  gap: var(--eth-space-sm);
+}
+
+.eth-kanban-column__limit-row {
+  align-items: center;
+  display: flex;
+  gap: var(--eth-space-sm);
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+
+.eth-kanban-column__limit-note {
+  color: var(--eth-color-text-helper);
+  flex: 0 0 auto;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  text-align: end;
+}
+
+.eth-kanban-column--over-limit .eth-kanban-column__limit-note {
+  color: var(--eth-color-danger);
+  font-weight: 600;
+}
+
+.eth-kanban-column__meter {
+  background: var(--eth-color-border-subtle);
+  block-size: 0.25rem;
+  display: block;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+.eth-kanban-column__meter span {
+  background: var(--eth-color-interactive-primary);
+  block-size: 100%;
+  display: block;
+  min-inline-size: 0;
+  transition: inline-size 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-kanban-column--over-limit .eth-kanban-column__meter span {
+  background: var(--eth-color-danger);
+}
+
+.eth-todo-kanban__cards,
+.eth-kanban-column__body {
+  align-content: start;
+  background: var(--eth-color-layer-01);
+  display: grid;
+  gap: var(--eth-space-sm);
+}
+
+.eth-todo-kanban__cards {
+  min-block-size: 13rem;
+  padding: var(--eth-space-md);
+}
+
+.eth-kanban-column__body {
+  min-block-size: 12rem;
+  padding: var(--eth-space-lg);
+}
+
+.eth-kanban-column__empty {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  border: 1px dashed var(--eth-color-border-subtle);
+  color: var(--eth-color-text-helper);
+  display: flex;
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  justify-content: center;
+  line-height: 1.2857;
+  min-block-size: 6rem;
+  padding: var(--eth-space-md);
+  text-align: center;
+}
+
+.eth-kanban-column .eth-todo-task-card {
+  background: var(--eth-color-layer-02);
+}
+
+.eth-kanban-column .eth-todo-task-card:hover {
+  background: var(--eth-color-layer-hover);
+}
+
+.eth-kanban-card-shell {
+  cursor: grab;
+  border-radius: 0;
+  outline: 0;
+}
+
+.eth-kanban-card-shell:active {
+  cursor: grabbing;
+}
+
+.eth-kanban-card-shell:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: 2px;
+}
+
+.eth-kanban-card-shell--lifted {
+  background: var(--eth-color-layer-selected);
+}
+
+.eth-todo-task-card {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-inline-start: 3px solid transparent;
+  border-radius: 0;
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: var(--eth-space-sm);
+  min-block-size: 7rem;
+  padding: var(--eth-space-md);
+  transition:
+    background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+    border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-todo-task-card:hover {
+  background: var(--eth-color-layer-hover);
+}
+
+.eth-todo-task-card[data-priority="critical"],
+.eth-todo-task-card[data-priority="urgent"],
+.eth-todo-task-card[data-priority="high"] {
+  border-inline-start-color: var(--eth-color-danger);
+}
+
+.eth-todo-task-card[data-priority="medium"] {
+  border-inline-start-color: var(--eth-color-warning);
+}
+
+.eth-todo-task-card[data-priority="low"] {
+  border-inline-start-color: var(--eth-color-info);
+}
+
+.eth-todo-task-card__header,
+.eth-todo-task-card__meta,
+.eth-todo-task-card__labels,
+.eth-todo-task-table__title {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+}
+
+.eth-todo-task-card__header {
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.eth-todo-task-card__header strong {
+  flex: 1 1 auto;
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-todo-task-card__meta,
+.eth-todo-task-card__labels {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-todo-task-card__due {
+  color: var(--eth-color-text-helper);
+}
+
+.eth-todo-task-table {
+  inline-size: 100%;
+}
+
+.eth-todo-task-dependency-list,
+.eth-todo-dependencies,
+.eth-todo-task-timeline,
+.eth-todo-timeline,
+.eth-todo-list {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  display: grid;
+  gap: 0;
+}
+
+.eth-todo-list.eth-panel {
+  gap: 0;
+  inline-size: 100%;
+  max-inline-size: 48rem;
+  overflow: hidden;
+  padding: 0;
+}
+
+.eth-todo-list .eth-panel__header {
+  background: var(--eth-color-layer-02);
+  border-bottom: 1px solid var(--eth-color-border-subtle);
+  padding: var(--eth-space-lg);
+}
+
+.eth-todo-list .eth-panel__header h3 {
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+}
+
+.eth-todo-list .eth-panel__header p {
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1rem;
+}
+
+.eth-todo-list .eth-panel__body {
+  display: grid;
+  gap: 0;
+  min-inline-size: 0;
+}
+
+.eth-todo-list__items,
+.eth-todo-dependencies__group,
+.eth-todo-timeline__events {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.eth-todo-dependencies__group {
+  border-bottom: 1px solid var(--eth-color-border-subtle);
+  padding: var(--eth-space-md);
+}
+
+.eth-todo-dependencies__group:last-child {
+  border-bottom: 0;
+}
+
+.eth-todo-dependencies__group h3 {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.2857;
+  margin: 0 0 var(--eth-space-sm);
+}
+
+.eth-todo-dependencies__group ul {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.eth-todo-dependencies__group li {
+  align-items: center;
+  border-top: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+  padding: var(--eth-space-sm) 0;
+}
+
+.eth-todo-item {
+  align-items: center;
+  background: var(--eth-color-layer-01);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  border-inline-start: 3px solid transparent;
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: minmax(0, 1fr);
+  min-block-size: 3.5rem;
+  padding: 0 var(--eth-space-lg) 0 var(--eth-space-md);
+  transition:
+    background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+    border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-todo-item--has-meta {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.eth-todo-item[data-priority="critical"],
+.eth-todo-item[data-priority="urgent"],
+.eth-todo-item[data-priority="high"] {
+  border-inline-start-color: var(--eth-color-danger);
+}
+
+.eth-todo-item[data-priority="medium"] {
+  border-inline-start-color: var(--eth-color-warning);
+}
+
+.eth-todo-item[data-priority="low"] {
+  border-inline-start-color: var(--eth-color-info);
+}
+
+.eth-todo-item:focus-within {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-todo-item:last-child,
+.eth-todo-list__items .eth-todo-item:last-child {
+  border-block-end: 0;
+}
+
+.eth-todo-item:hover {
+  background: var(--eth-color-layer-hover);
+}
+
+.eth-todo-item--done {
+  color: var(--eth-color-text-primary);
+}
+
+.eth-todo-item__content {
+  min-inline-size: 0;
+  padding-block: var(--eth-space-md);
+}
+
+.eth-todo-item__checkbox {
+  min-inline-size: 0;
+}
+
+.eth-todo-item__checkbox .cds--checkbox-label {
+  align-items: flex-start;
+  min-inline-size: 0;
+}
+
+.eth-todo-item__checkbox .cds--checkbox-label-text {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-todo-item--done .cds--checkbox-label-text {
+  color: var(--eth-color-text-secondary);
+}
+
+.eth-todo-item__primary {
+  min-inline-size: 0;
+}
+
+.eth-todo-item .eth-checkbox {
+  min-inline-size: 0;
+}
+
+.eth-todo-item__label {
+  color: var(--eth-color-text-primary);
+  display: block;
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  overflow-wrap: anywhere;
+}
+
+.eth-todo-item--done .eth-todo-item__label {
+  color: var(--eth-color-text-secondary);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+.eth-todo-item__meta {
+  align-items: center;
+  color: var(--eth-color-text-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  justify-content: flex-end;
+  max-inline-size: min(24rem, 45vw);
+  min-inline-size: 0;
+  padding-block: var(--eth-space-sm);
+}
+
+.eth-todo-item--done .eth-todo-item__meta {
+  opacity: 0.78;
+}
+
+.eth-todo-item__tag {
+  flex: 0 1 auto;
+}
+
+.eth-todo-item__due {
+  color: var(--eth-color-text-helper);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  gap: var(--eth-space-xs);
+  line-height: 1rem;
+  white-space: nowrap;
+}
+
+.eth-todo-item__due-label {
+  color: var(--eth-color-text-helper);
+}
+
+.eth-todo-list__empty {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  margin: 0;
+  padding: var(--eth-space-xl) var(--eth-space-lg);
+}
+
+.eth-todo-list__add {
+  align-items: end;
+  background: var(--eth-color-layer-02);
+  border-top: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-sm);
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-todo-list__add .cds--form-item,
+.eth-todo-list__add .cds--text-input-wrapper {
+  min-inline-size: 0;
+}
+
+.eth-todo-list__add .eth-button {
+  min-inline-size: 5.5rem;
+}
+
+.eth-todo-timeline__events {
+  list-style: none;
+}
+
+.eth-todo-timeline__event {
+  border-bottom: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
+  padding: var(--eth-space-md);
+}
+
+.eth-todo-timeline__event:last-child {
+  border-bottom: 0;
+}
+
+.eth-todo-timeline__event time {
+  color: var(--eth-color-text-helper);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-todo-timeline__event p {
+  margin: var(--eth-space-xs) 0 0;
+}
+
+.eth-kanban-board__live {
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+@media (width <= 42rem) {
+  .eth-todo-kanban,
+  .eth-kanban-board {
+    padding: var(--eth-space-md);
+  }
+
+  .eth-todo-list__add,
+  .eth-todo-timeline__event {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-todo-item {
+    align-items: stretch;
+    grid-template-columns: 1fr;
+    gap: var(--eth-space-xs);
+    padding-block: var(--eth-space-sm);
+  }
+
+  .eth-todo-item__content {
+    padding-block: 0;
+  }
+
+  .eth-todo-item__meta {
+    justify-content: flex-start;
+    max-inline-size: 100%;
+    padding-block: 0;
+    padding-inline-start: var(--eth-space-2xl);
+  }
+}

package/src/types.ts

@@ -0,0 +1,56 @@
+import type * as React from "react";
+import type { EthAction, EthOperationalStatus } from "@echothink-ui/core";
+
+export interface TodoTaskItem {
+  id: string;
+  label: string;
+  done: boolean;
+  dueAt?: string;
+  assignee?: string;
+  priority?: string;
+}
+
+export interface KanbanCard {
+  id: string;
+  title: string;
+  assignee?: string;
+  priority?: string;
+  status?: string;
+  dueAt?: string;
+  labels?: string[];
+}
+
+export interface KanbanColumnModel {
+  id: string;
+  title: string;
+  status?: string;
+  wipLimit?: number;
+  items: KanbanCard[];
+}
+
+export interface TaskTableTask extends Record<string, unknown> {
+  id: string;
+  title: string;
+  status?: EthOperationalStatus;
+  assignee?: string;
+  priority?: string;
+  dueAt?: string;
+  labels?: string[];
+}
+
+export interface TaskDependency {
+  id: string;
+  title: string;
+  status: string;
+  relation: "blocks" | "blocked-by";
+}
+
+export interface TaskTimelineEvent {
+  id: string;
+  timestamp: string;
+  actor?: string;
+  kind: string;
+  summary: React.ReactNode;
+}
+
+export type TaskRowActions = (task: TaskTableTask) => EthAction[];

package/src/utils.ts

@@ -0,0 +1,26 @@
+export function formatDateTime(value: string | undefined) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(date);
+}
+
+export function priorityLabel(priority: string | undefined) {
+  return priority ?? "normal";
+}
+
+export function prioritySeverity(
+  priority: string | undefined
+): "danger" | "warning" | "info" | "neutral" {
+  const normalized = priority?.toLowerCase();
+  if (normalized === "urgent" || normalized === "critical" || normalized === "high")
+    return "danger";
+  if (normalized === "medium") return "warning";
+  if (normalized === "low") return "info";
+  return "neutral";
+}