@etus/ui 0.1.1 → 0.1.2

package/src/components/workflow/TaskList/TaskList.tsx

@@ -1,556 +0,0 @@
-import type {
-  TaskGroupBy,
-  TaskItem,
-  TaskListPriority,
-  TaskListProps,
-  TaskListStatus,
-} from "./TaskList.types"
-import type { KeyboardEvent } from "react"
-
-import { Check, ChevronDown, ChevronUp, Filter, X } from "lucide-react"
-import { useCallback, useMemo, useState } from "react"
-
-import { cn } from "../../../lib/utils"
-import {
-  emptyStateStyles,
-  groupHeaderStyles,
-  loadingStyles,
-  priorityStyles,
-  selectedItemStyles,
-  statusStyles,
-  taskListHeaderVariants,
-  taskListItemVariants,
-  taskListTitleVariants,
-  taskListVariants,
-} from "./TaskList.variants"
-
-/**
- * Priority labels for display
- */
-const PRIORITY_LABELS: Record<TaskListPriority, string> = {
-  high: "High",
-  low: "Low",
-  medium: "Medium",
-  urgent: "Urgent",
-}
-
-/**
- * Status labels for display
- */
-const STATUS_LABELS: Record<TaskListStatus, string> = {
-  done: "Done",
-  "in-progress": "In Progress",
-  todo: "To Do",
-}
-
-/**
- * Group tasks by a specific field
- */
-function groupTasks(
-  tasks: TaskItem[],
-  groupBy: TaskGroupBy
-): Map<string, TaskItem[]> {
-  const groups = new Map<string, TaskItem[]>()
-
-  for (const task of tasks) {
-    let key: string
-
-    switch (groupBy) {
-      case "assignee":
-        key = task.assignee?.name ?? "Unassigned"
-        break
-      case "priority":
-        key = task.priority ? PRIORITY_LABELS[task.priority] : "No Priority"
-        break
-      case "status":
-        key = task.status ? STATUS_LABELS[task.status] : "No Status"
-        break
-      default:
-        key = "Default"
-    }
-
-    const existing = groups.get(key) ?? []
-    groups.set(key, [...existing, task])
-  }
-
-  return groups
-}
-
-/**
- * Sort tasks by field
- */
-function sortTasks(
-  tasks: TaskItem[],
-  sortField: "dueDate" | "priority" | "status" | "title",
-  sortDirection: "asc" | "desc"
-): TaskItem[] {
-  return [...tasks].sort((a, b) => {
-    let comparison = 0
-
-    switch (sortField) {
-      case "title":
-        comparison = a.title.localeCompare(b.title)
-        break
-      case "priority": {
-        const priorityOrder: Record<TaskListPriority, number> = {
-          urgent: 0,
-          high: 1,
-          medium: 2,
-          low: 3,
-        }
-        const aPriority = a.priority ? priorityOrder[a.priority] : 4
-        const bPriority = b.priority ? priorityOrder[b.priority] : 4
-        comparison = aPriority - bPriority
-        break
-      }
-      case "status": {
-        const statusOrder: Record<TaskListStatus, number> = {
-          "in-progress": 0,
-          todo: 1,
-          done: 2,
-        }
-        const aStatus = a.status ? statusOrder[a.status] : 3
-        const bStatus = b.status ? statusOrder[b.status] : 3
-        comparison = aStatus - bStatus
-        break
-      }
-      case "dueDate": {
-        const aDate = a.dueDate?.getTime() ?? Infinity
-        const bDate = b.dueDate?.getTime() ?? Infinity
-        comparison = aDate - bDate
-        break
-      }
-    }
-
-    return sortDirection === "desc" ? -comparison : comparison
-  })
-}
-
-/**
- * Individual task item component
- */
-function TaskListItem({
-  isSelected,
-  onKeyDown,
-  onSelect,
-  onTaskClick,
-  selectable,
-  size,
-  task,
-  variant,
-}: {
-  isSelected: boolean
-  onKeyDown: (event: KeyboardEvent<HTMLDivElement>, task: TaskItem) => void
-  onSelect: (task: TaskItem) => void
-  onTaskClick?: (task: TaskItem) => void
-  selectable: boolean
-  size: "default" | "lg" | "sm"
-  task: TaskItem
-  variant: "compact" | "default" | "grouped"
-}) {
-  const handleClick = () => {
-    if (selectable) {
-      onSelect(task)
-    }
-    onTaskClick?.(task)
-  }
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    onKeyDown(event, task)
-  }
-
-  return (
-    <div
-      className={cn(
-        taskListItemVariants({ size, variant }),
-        isSelected && selectedItemStyles
-      )}
-      aria-selected={selectable ? isSelected : undefined}
-      data-slot="task-list-item"
-      role="listitem"
-      tabIndex={0}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-    >
-      {/* Selection checkbox */}
-      {selectable && (
-        <div
-          className={cn(
-            "flex h-5 w-5 shrink-0 items-center justify-center rounded border",
-            isSelected
-              ? "bg-primary border-primary text-primary-foreground"
-              : "border-input"
-          )}
-          data-slot="task-list-checkbox"
-        >
-          {isSelected && <Check className="h-3 w-3" />}
-        </div>
-      )}
-
-      {/* Status indicator */}
-      {task.status && (
-        <div
-          className={cn("h-2 w-2 shrink-0 rounded-full", statusStyles[task.status])}
-          data-slot="task-list-status"
-          title={STATUS_LABELS[task.status]}
-        />
-      )}
-
-      {/* Task content */}
-      <div className="min-w-0 flex-1" data-slot="task-list-content">
-        <div className="flex items-start justify-between gap-2">
-          <span
-            className={cn(
-              "font-medium text-foreground",
-              task.status === "done" && "line-through opacity-70"
-            )}
-            data-slot="task-list-title"
-          >
-            {task.title}
-          </span>
-
-          {/* Priority badge */}
-          {task.priority && (
-            <span
-              className={cn(
-                "shrink-0 rounded px-1.5 py-0.5 text-xs font-medium",
-                priorityStyles[task.priority]
-              )}
-              data-slot="task-list-priority"
-            >
-              {PRIORITY_LABELS[task.priority]}
-            </span>
-          )}
-        </div>
-
-        {/* Description */}
-        {task.description && (
-          <p
-            className="mt-1 text-sm text-muted-foreground line-clamp-2"
-            data-slot="task-list-description"
-          >
-            {task.description}
-          </p>
-        )}
-
-        {/* Tags and metadata */}
-        <div className="mt-2 flex flex-wrap items-center gap-2">
-          {/* Tags */}
-          {task.tags && task.tags.length > 0 && (
-            <div className="flex flex-wrap gap-1" data-slot="task-list-tags">
-              {task.tags.map((tag) => (
-                <span
-                  key={tag}
-                  className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground"
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-          )}
-
-          {/* Due date */}
-          {task.dueDate && (
-            <span
-              className="text-xs text-muted-foreground"
-              data-slot="task-list-due-date"
-            >
-              Due: {task.dueDate.toLocaleDateString()}
-            </span>
-          )}
-
-          {/* Assignee */}
-          {task.assignee && (
-            <div
-              className="flex items-center gap-1"
-              data-slot="task-list-assignee"
-            >
-              {task.assignee.avatar ? (
-                <img
-                  alt={task.assignee.name}
-                  className="h-5 w-5 rounded-full"
-                  src={task.assignee.avatar}
-                />
-              ) : (
-                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-xs">
-                  {task.assignee.name.charAt(0).toUpperCase()}
-                </div>
-              )}
-              <span className="text-xs text-muted-foreground">
-                {task.assignee.name}
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-/**
- * Loading skeleton for task items
- */
-function TaskListSkeleton({ count = 3 }: { count?: number }) {
-  return (
-    <>
-      {Array.from({ length: count }).map((_, index) => (
-        <div
-          key={`skeleton-${String(index)}`}
-          className={cn(taskListItemVariants({}), loadingStyles)}
-          data-slot="task-list-skeleton"
-        >
-          <div className="h-2 w-2 shrink-0 rounded-full bg-muted" />
-          <div className="min-w-0 flex-1 space-y-2">
-            <div className="h-4 w-3/4 rounded bg-muted" />
-            <div className="h-3 w-1/2 rounded bg-muted" />
-          </div>
-        </div>
-      ))}
-    </>
-  )
-}
-
-/**
- * TaskList component displays a list of tasks with optional selection, filtering, and sorting.
- *
- * @example
- * ```tsx
- * const tasks = [
- *   { id: "1", title: "Task 1", status: "todo" },
- *   { id: "2", title: "Task 2", status: "in-progress" },
- *   { id: "3", title: "Task 3", status: "done" },
- * ]
- *
- * <TaskList tasks={tasks} title="My Tasks" />
- * ```
- */
-function TaskList({
-  className,
-  empty,
-  filterable = false,
-  groupBy,
-  loading = false,
-  onSelect,
-  onTaskClick,
-  selectable = false,
-  size = "default",
-  sortable = false,
-  tasks = [],
-  title,
-  variant = "default",
-  ...props
-}: TaskListProps) {
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set())
-  const [sortField, setSortField] = useState<"dueDate" | "priority" | "status" | "title">("title")
-  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc")
-  const [filterStatus, setFilterStatus] = useState<null | TaskListStatus>(null)
-
-  // Filter tasks
-  const filteredTasks = useMemo(() => {
-    if (!filterStatus) return tasks
-    return tasks.filter((task) => task.status === filterStatus)
-  }, [tasks, filterStatus])
-
-  // Sort tasks
-  const sortedTasks = useMemo(() => {
-    if (!sortable) return filteredTasks
-    return sortTasks(filteredTasks, sortField, sortDirection)
-  }, [filteredTasks, sortable, sortField, sortDirection])
-
-  // Group tasks if groupBy is specified
-  const groupedTasks = useMemo(() => {
-    if (!groupBy) return null
-    return groupTasks(sortedTasks, groupBy)
-  }, [sortedTasks, groupBy])
-
-  // Handle selection
-  const handleSelect = useCallback(
-    (task: TaskItem) => {
-      if (!selectable) return
-
-      const newSelected = new Set(selectedIds)
-      if (newSelected.has(task.id)) {
-        newSelected.delete(task.id)
-      } else {
-        newSelected.add(task.id)
-      }
-      setSelectedIds(newSelected)
-
-      if (onSelect) {
-        const selectedTasks = tasks.filter((t) => newSelected.has(t.id))
-        onSelect(selectedTasks)
-      }
-    },
-    [selectable, selectedIds, tasks, onSelect]
-  )
-
-  // Handle keyboard navigation
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>, task: TaskItem) => {
-      if (event.key === " " || event.key === "Spacebar") {
-        event.preventDefault()
-        if (selectable) {
-          handleSelect(task)
-        }
-      } else if (event.key === "Enter") {
-        onTaskClick?.(task)
-      }
-    },
-    [selectable, handleSelect, onTaskClick]
-  )
-
-  // Toggle sort direction
-  const toggleSort = (field: "dueDate" | "priority" | "status" | "title") => {
-    if (sortField === field) {
-      setSortDirection((prev) => (prev === "asc" ? "desc" : "asc"))
-    } else {
-      setSortField(field)
-      setSortDirection("asc")
-    }
-  }
-
-  // Render task items
-  const renderTaskItems = (tasksToRender: TaskItem[]) =>
-    tasksToRender.map((task) => (
-      <TaskListItem
-        key={task.id}
-        isSelected={selectedIds.has(task.id)}
-        selectable={selectable}
-        size={size ?? "default"}
-        task={task}
-        variant={variant ?? "default"}
-        onKeyDown={handleKeyDown}
-        onSelect={handleSelect}
-        onTaskClick={onTaskClick}
-      />
-    ))
-
-  return (
-    <div
-      aria-label={title ?? "Task list"}
-      aria-live="polite"
-      className={cn(taskListVariants({ size, variant }), className)}
-      data-slot="task-list"
-      role="list"
-      {...props}
-    >
-      {/* Header - uses || intentionally for boolean truthiness check */}
-      {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
-      {(title || filterable || sortable) && (
-        <div
-          className={taskListHeaderVariants({ size })}
-          data-slot="task-list-header"
-        >
-          {title && (
-            <h2
-              className={taskListTitleVariants({ size })}
-              data-slot="task-list-title"
-            >
-              {title}
-            </h2>
-          )}
-
-          <div className="flex items-center gap-2" data-slot="task-list-controls">
-            {/* Filter controls */}
-            {filterable && (
-              <div className="flex items-center gap-1">
-                <Filter className="h-4 w-4 text-muted-foreground" />
-                <select
-                  aria-label="Filter by status"
-                  className="rounded border border-input bg-background px-2 py-1 text-sm"
-                  value={filterStatus ?? ""}
-                  onChange={(e) =>
-                    { setFilterStatus(
-                      e.target.value ? (e.target.value as TaskListStatus) : null
-                    ); }
-                  }
-                >
-                  <option value="">All</option>
-                  <option value="todo">To Do</option>
-                  <option value="in-progress">In Progress</option>
-                  <option value="done">Done</option>
-                </select>
-                {filterStatus && (
-                  <button
-                    aria-label="Clear filter"
-                    className="rounded p-1 hover:bg-muted"
-                    type="button"
-                    onClick={() => { setFilterStatus(null); }}
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                )}
-              </div>
-            )}
-
-            {/* Sort controls */}
-            {sortable && (
-              <div className="flex items-center gap-1">
-                <select
-                  aria-label="Sort by"
-                  className="rounded border border-input bg-background px-2 py-1 text-sm"
-                  value={sortField}
-                  onChange={(e) =>
-                    { setSortField(
-                      e.target.value as "dueDate" | "priority" | "status" | "title"
-                    ); }
-                  }
-                >
-                  <option value="title">Title</option>
-                  <option value="priority">Priority</option>
-                  <option value="status">Status</option>
-                  <option value="dueDate">Due Date</option>
-                </select>
-                <button
-                  aria-label={`Sort ${sortDirection === "asc" ? "descending" : "ascending"}`}
-                  className="rounded p-1 hover:bg-muted"
-                  type="button"
-                  onClick={() => { toggleSort(sortField); }}
-                >
-                  {sortDirection === "asc" ? (
-                    <ChevronUp className="h-4 w-4" />
-                  ) : (
-                    <ChevronDown className="h-4 w-4" />
-                  )}
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Items container */}
-      <div data-slot="task-list-items">
-        {/* Loading state */}
-        {loading && <TaskListSkeleton />}
-
-        {/* Empty state */}
-        {!loading && sortedTasks.length === 0 && (
-          <div className={emptyStateStyles} data-slot="task-list-empty">
-            {empty ?? "No tasks to display"}
-          </div>
-        )}
-
-        {/* Grouped tasks */}
-        {!loading && groupedTasks && sortedTasks.length > 0 && (
-          <>
-            {[...groupedTasks.entries()].map(([group, groupTasks]) => (
-              <div key={group} data-slot="task-list-group">
-                <div className={groupHeaderStyles} data-slot="task-list-group-header">
-                  {group} ({groupTasks.length})
-                </div>
-                {renderTaskItems(groupTasks)}
-              </div>
-            ))}
-          </>
-        )}
-
-        {/* Ungrouped tasks */}
-        {!loading && !groupedTasks && sortedTasks.length > 0 && renderTaskItems(sortedTasks)}
-      </div>
-    </div>
-  )
-}
-
-export { TaskList }
-export type { TaskItem, TaskListProps }

package/src/components/workflow/TaskList/TaskList.types.ts

@@ -1,78 +0,0 @@
-import type { taskListVariants } from "./TaskList.variants"
-import type { VariantProps } from "class-variance-authority"
-import type { ReactNode } from "react"
-
-/**
- * Task priority levels for TaskList
- */
-export type TaskListPriority = "high" | "low" | "medium" | "urgent"
-
-/**
- * Task status options for TaskList
- */
-export type TaskListStatus = "done" | "in-progress" | "todo"
-
-/**
- * Assignee information for a task
- */
-export interface TaskAssignee {
-  /** Avatar image URL */
-  avatar?: string
-  /** Display name */
-  name: string
-}
-
-/**
- * Individual task item data structure
- */
-export interface TaskItem {
-  /** Task assignee */
-  assignee?: TaskAssignee
-  /** Task description */
-  description?: string
-  /** Due date for the task */
-  dueDate?: Date
-  /** Unique identifier */
-  id: string
-  /** Task priority level */
-  priority?: TaskListPriority
-  /** Current task status */
-  status?: TaskListStatus
-  /** Tags/labels for the task */
-  tags?: string[]
-  /** Task title */
-  title: string
-}
-
-/**
- * Group by options for task grouping
- */
-export type TaskGroupBy = "assignee" | "priority" | "status"
-
-/**
- * TaskList component props
- */
-export interface TaskListProps
-  extends Omit<React.ComponentPropsWithoutRef<"div">, "onSelect">,
-    VariantProps<typeof taskListVariants> {
-  /** Content to display when list is empty */
-  empty?: ReactNode
-  /** Enable filtering controls */
-  filterable?: boolean
-  /** Group tasks by a specific field */
-  groupBy?: TaskGroupBy
-  /** Loading state */
-  loading?: boolean
-  /** Callback when selection changes */
-  onSelect?: (tasks: TaskItem[]) => void
-  /** Callback when a task is clicked */
-  onTaskClick?: (task: TaskItem) => void
-  /** Enable multi-selection */
-  selectable?: boolean
-  /** Enable sorting controls */
-  sortable?: boolean
-  /** Array of tasks to display */
-  tasks?: TaskItem[]
-  /** List title */
-  title?: string
-}