@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/clickup/views/TaskBoardView.tsx

@@ -0,0 +1,259 @@
+import { useTranslation } from "react-i18next";
+import React, { useState } from "react";
+import { ChevronRight, PanelLeftClose } from "lucide-react";
+import { TaskIcon } from "../common/TaskIcon";
+import "../task-ui.css";
+import { cn } from "../../support/utils";
+import {
+  ClickUpTask,
+  ClickUpStatus,
+  ClickUpPhase,
+  ClickUpUser,
+} from "../types";
+import { TaskStatusPill } from "../common/TaskStatusPill";
+import { TaskCard } from "../elements/TaskCard";
+import { ThemedText } from "../../components/ThemedText";
+import {
+  WorkspaceActionMenu,
+  WorkspaceContextMenu,
+} from "../common/WorkspaceMenus";
+
+export interface TaskBoardViewProps {
+  tasks: ClickUpTask[];
+  statuses: ClickUpStatus[];
+  phases?: ClickUpPhase[];
+  users?: ClickUpUser[];
+  canEdit?: boolean;
+  collapsedGroupIds?: Record<string, boolean>;
+  onToggleGroup?: (statusId: string) => void;
+  onTaskMove?: (taskId: string, targetStatusId: string) => void;
+  onTaskClick?: (task: ClickUpTask) => void;
+  onToggleComplete?: (task: ClickUpTask, checked: boolean) => void;
+  onAddTask?: (statusId: string) => void;
+  onStatusAction?: (status: ClickUpStatus) => void;
+  onAddStatus?: () => void;
+  className?: string;
+}
+
+export const TaskBoardView: React.FC<TaskBoardViewProps> = ({
+  tasks,
+  statuses,
+  phases = [],
+  users = [],
+  canEdit = true,
+  collapsedGroupIds,
+  onToggleGroup,
+  onTaskMove,
+  onTaskClick,
+  onToggleComplete,
+  onAddTask,
+  onStatusAction,
+  onAddStatus,
+  className,
+}) => {
+  const { t: tr } = useTranslation("designSystem");
+  const [dragOverStatusId, setDragOverStatusId] = useState<string | null>(null);
+
+  const phaseMap = React.useMemo(() => {
+    const map = new Map<string, ClickUpPhase>();
+    phases.forEach((p) => map.set(p.id, p));
+    return map;
+  }, [phases]);
+
+  const userMap = React.useMemo(() => {
+    const map = new Map<string, ClickUpUser>();
+    users.forEach((u) => map.set(u.id, u));
+    return map;
+  }, [users]);
+
+  const handleDragOver = (e: React.DragEvent, statusId: string) => {
+    if (!canEdit) return;
+    e.preventDefault();
+    if (dragOverStatusId !== statusId) {
+      setDragOverStatusId(statusId);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent, statusId: string) => {
+    if (dragOverStatusId === statusId) {
+      setDragOverStatusId(null);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent, statusId: string) => {
+    e.preventDefault();
+    setDragOverStatusId(null);
+    if (!canEdit || !onTaskMove) return;
+
+    const taskId = e.dataTransfer.getData("text/plain");
+    if (taskId) {
+      onTaskMove(taskId, statusId);
+    }
+  };
+
+  return (
+    <div className={cn("cu-task-board", className)}>
+      {statuses.map((status) => {
+        const columnTasks = tasks.filter((t) => t.status_id === status.id);
+        const isCollapsed = Boolean(collapsedGroupIds?.[status.id]);
+        const isDragOver = dragOverStatusId === status.id;
+        const statusActions = onStatusAction
+          ? [
+              {
+                id: "configure",
+                label: tr("clickup.Configure_status", { status: status.label }),
+                disabled: !canEdit,
+                onSelect: () => onStatusAction(status),
+              },
+            ]
+          : [];
+
+        if (isCollapsed) {
+          return (
+            <section
+              key={status.id}
+              onClick={() => onToggleGroup?.(status.id)}
+              onDragOver={(e) => handleDragOver(e, status.id)}
+              onDragLeave={(e) => handleDragLeave(e, status.id)}
+              onDrop={(e) => handleDrop(e, status.id)}
+              className={cn(
+                "w-10 min-w-10 h-[520px] rounded-xl border border-dashboard-border bg-dashboard-secondary/40 hover:bg-dashboard-secondary/80 transition-all p-2 flex flex-col items-center justify-between cursor-pointer select-none group shrink-0",
+                isDragOver &&
+                  "ring-2 ring-dashboard-primary border-dashboard-primary bg-dashboard-card",
+              )}
+              title={`${status.label} (${columnTasks.length})`}
+              aria-label={`Expand ${status.label} column`}
+            >
+              <div className="flex flex-col items-center gap-2 pt-1">
+                <ChevronRight className="size-3.5 text-dashboard-muted-foreground group-hover:text-dashboard-foreground rtl:rotate-180 transition-transform" />
+                <span
+                  className="size-2 rounded-full shrink-0"
+                  style={{ backgroundColor: status.color }}
+                />
+              </div>
+
+              <div className="[writing-mode:vertical-rl] rotate-180 text-xs font-semibold text-dashboard-muted-foreground group-hover:text-dashboard-foreground tracking-wide whitespace-nowrap overflow-hidden text-ellipsis max-h-[340px]">
+                {status.label}
+              </div>
+
+              <div className="size-5 rounded-full bg-dashboard-secondary border border-dashboard-border flex items-center justify-center text-[10px] font-bold text-dashboard-foreground pb-0.5">
+                {columnTasks.length}
+              </div>
+            </section>
+          );
+        }
+
+        return (
+          <section
+            key={status.id}
+            onDragOver={(e) => handleDragOver(e, status.id)}
+            onDragLeave={(e) => handleDragLeave(e, status.id)}
+            onDrop={(e) => handleDrop(e, status.id)}
+            className={cn(
+              "cu-task-board-column border transition-colors",
+              "bg-dashboard-secondary/30 border-dashboard-border",
+              isDragOver &&
+                "ring-2 ring-dashboard-primary border-dashboard-primary bg-dashboard-card",
+            )}
+          >
+            {/* Column Header */}
+            <WorkspaceContextMenu actions={statusActions}>
+              <div className="cu-task-board-head">
+                <div className="flex items-center gap-2">
+                  <TaskStatusPill status={status} size="sm" />
+                  <ThemedText
+                    variant="caption"
+                    as="span"
+                    className="text-dashboard-muted-foreground text-[10px] leading-[15px] font-normal"
+                  >
+                    {columnTasks.length}
+                  </ThemedText>
+                </div>
+                <div className="ms-auto flex items-center gap-1">
+                  {onToggleGroup && (
+                    <button
+                      type="button"
+                      onClick={() => onToggleGroup(status.id)}
+                      className="p-1 rounded text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary transition-colors cursor-pointer"
+                      title={tr("clickup.Collapse_column", {
+                        defaultValue: "Collapse column",
+                      })}
+                      aria-label={`${tr("clickup.Collapse_column", { defaultValue: "Collapse" })} ${status.label}`}
+                    >
+                      <PanelLeftClose className="size-3.5" />
+                    </button>
+                  )}
+                  {onStatusAction && (
+                  <WorkspaceActionMenu
+                    label={tr("clickup.Configure_status", {
+                      status: status.label,
+                    })}
+                    actions={statusActions}
+                    className="cu-task-icon-button"
+                  />
+                )}
+              </div>
+              </div>
+            </WorkspaceContextMenu>
+            {/* Task Cards */}
+            <div className="cu-task-board-cards">
+              {columnTasks.map((task) => (
+                <TaskCard
+                  key={task.id}
+                  task={task}
+                  phase={
+                    task.phase_id ? phaseMap.get(task.phase_id) : undefined
+                  }
+                  assignee={
+                    task.assignee_id ? userMap.get(task.assignee_id) : undefined
+                  }
+                  canEdit={canEdit}
+                  draggable={canEdit}
+                  onClick={onTaskClick}
+                  onToggleComplete={onToggleComplete}
+                />
+              ))}
+            </div>
+
+            {/* Quick Add Button */}
+            {canEdit && onAddTask && (
+              <button
+                type="button"
+                onClick={() => onAddTask(status.id)}
+                className="cu-task-board-add hover:bg-dashboard-secondary"
+              >
+                <TaskIcon name="plus" className="size-[13px]" />
+                <ThemedText
+                  as="span"
+                  variant="body"
+                  className="text-[11px] leading-[16.5px] font-normal text-inherit"
+                >
+                  {tr("clickup.Add_task")}
+                </ThemedText>
+              </button>
+            )}
+          </section>
+        );
+      })}
+      {onAddStatus && (
+        <button
+          type="button"
+          disabled={!canEdit}
+          onClick={onAddStatus}
+          className="cu-task-add-group inline-flex items-center gap-2 hover:bg-dashboard-secondary"
+        >
+          <TaskIcon name="plus" className="size-[13px]" />
+          <ThemedText
+            as="span"
+            variant="body"
+            className="text-[12px] font-normal text-inherit"
+          >
+            {tr("clickup.Add_group")}
+          </ThemedText>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default TaskBoardView;

package/src/clickup/views/TaskCalendarView.tsx

@@ -0,0 +1,410 @@
+import { useTranslation } from "react-i18next";
+import React, { useMemo, useState } from "react";
+import { cn } from "../../support/utils";
+import { ClickUpTask } from "../types";
+import { Button } from "../../components/button";
+import { ThemedText } from "../../components/ThemedText";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import "../task-ui.css";
+
+export interface TaskCalendarViewProps {
+  tasks: ClickUpTask[];
+  initialDate?: Date;
+  onTaskClick?: (task: ClickUpTask) => void;
+  onDayClick?: (dateIso: string) => void;
+  className?: string;
+}
+
+function parseToMidnight(val?: string | null): Date | null {
+  if (!val) return null;
+  const s = String(val).trim();
+  if (s.length >= 10 && s[4] === "-" && s[7] === "-") {
+    const y = parseInt(s.slice(0, 4), 10);
+    const m = parseInt(s.slice(5, 7), 10) - 1;
+    const d = parseInt(s.slice(8, 10), 10);
+    return new Date(y, m, d, 0, 0, 0, 0);
+  }
+  const parsed = new Date(s);
+  if (!isNaN(parsed.getTime())) {
+    return new Date(
+      parsed.getFullYear(),
+      parsed.getMonth(),
+      parsed.getDate(),
+      0,
+      0,
+      0,
+      0,
+    );
+  }
+  return null;
+}
+
+export const TaskCalendarView: React.FC<TaskCalendarViewProps> = ({
+  tasks,
+  initialDate,
+  onTaskClick,
+  onDayClick,
+  className,
+}) => {
+  const { t: tr, i18n } = useTranslation("designSystem");
+  const [currentDate, setCurrentDate] = useState(
+    () => initialDate || new Date(),
+  );
+
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth();
+
+  const handlePrevMonth = () => {
+    setCurrentDate(
+      (prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1),
+    );
+  };
+
+  const handleNextMonth = () => {
+    setCurrentDate(
+      (prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1),
+    );
+  };
+
+  const handleToday = () => {
+    setCurrentDate(new Date());
+  };
+
+  const monthLabel = new Intl.DateTimeFormat(i18n.language, {
+    month: "long",
+    year: "numeric",
+  }).format(new Date(year, month, 1));
+
+  const todayStr = useMemo(() => {
+    const now = new Date();
+    const y = now.getFullYear();
+    const m = String(now.getMonth() + 1).padStart(2, "0");
+    const d = String(now.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }, []);
+
+  // Compute weeks (Monday to Sunday)
+  const calendarWeeks = useMemo(() => {
+    const firstDay = new Date(year, month, 1);
+    // Monday as index 0: (day + 6) % 7
+    const startDayOfWeek = (firstDay.getDay() + 6) % 7;
+    const startDate = new Date(year, month, 1 - startDayOfWeek);
+    const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
+    const totalDaysNeeded = startDayOfWeek + lastDayOfMonth;
+    const totalCells = Math.ceil(totalDaysNeeded / 7) * 7;
+
+    const weeks: {
+      date: Date;
+      dayNumber: number;
+      month: number;
+      year: number;
+      dateIso: string;
+      isCurrentMonth: boolean;
+      isToday: boolean;
+    }[][] = [];
+
+    const iter = new Date(
+      startDate.getFullYear(),
+      startDate.getMonth(),
+      startDate.getDate(),
+      0,
+      0,
+      0,
+      0,
+    );
+
+    for (let w = 0; w < totalCells / 7; w++) {
+      const weekRow = [];
+      for (let d = 0; d < 7; d++) {
+        const y = iter.getFullYear();
+        const m = iter.getMonth();
+        const dayNum = iter.getDate();
+        const mStr = String(m + 1).padStart(2, "0");
+        const dStr = String(dayNum).padStart(2, "0");
+        const dateIso = `${y}-${mStr}-${dStr}`;
+
+        weekRow.push({
+          date: new Date(iter.getTime()),
+          dayNumber: dayNum,
+          month: m,
+          year: y,
+          dateIso,
+          isCurrentMonth: m === month,
+          isToday: dateIso === todayStr,
+        });
+
+        iter.setDate(iter.getDate() + 1);
+      }
+      weeks.push(weekRow);
+    }
+
+    return weeks;
+  }, [year, month, todayStr]);
+
+  const weekDayNames = useMemo(() => {
+    // Array of Mon, Tue, Wed, Thu, Fri, Sat, Sun
+    return Array.from({ length: 7 }, (_, i) => {
+      // 2026-01-05 is a Monday
+      return new Intl.DateTimeFormat(i18n.language, {
+        weekday: "short",
+      }).format(new Date(2026, 0, 5 + i));
+    });
+  }, [i18n.language]);
+
+  return (
+    <div className={cn("cu-task-calendar flex flex-col w-full", className)}>
+      {/* Calendar Navigation */}
+      <div className="cu-task-calendar-nav flex items-center justify-between gap-3 mb-3">
+        <ThemedText
+          variant="title"
+          as="h2"
+          className="text-base font-semibold text-dashboard-foreground"
+        >
+          {monthLabel}
+        </ThemedText>
+
+        <div className="flex items-center gap-1.5">
+          <Button
+            variant="outline"
+            size="xs"
+            onClick={handlePrevMonth}
+            aria-label={tr("clickup.Previous_month", {
+              defaultValue: "Previous month",
+            })}
+            className="p-1 h-7 w-7 rounded-md border-dashboard-border hover:bg-dashboard-secondary cursor-pointer"
+          >
+            <ChevronLeft className="size-3.5 rtl:rotate-180" />
+          </Button>
+
+          <Button
+            variant="outline"
+            size="xs"
+            onClick={handleNextMonth}
+            aria-label={tr("clickup.Next_month", {
+              defaultValue: "Next month",
+            })}
+            className="p-1 h-7 w-7 rounded-md border-dashboard-border hover:bg-dashboard-secondary cursor-pointer"
+          >
+            <ChevronRight className="size-3.5 rtl:rotate-180" />
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="xs"
+            onClick={handleToday}
+            aria-label="Jump to current month"
+            className="text-xs text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary px-2.5 h-7 rounded-md cursor-pointer"
+          >
+            <ThemedText as="span" variant="caption" className="text-inherit">
+              {tr("clickup.Today", { defaultValue: "Today" })}
+            </ThemedText>
+          </Button>
+        </div>
+      </div>
+
+      {/* Calendar Grid Frame */}
+      <div className="rounded-xl border border-dashboard-border bg-dashboard-card overflow-x-auto min-w-[640px] shadow-2xs">
+        {/* Weekday Header */}
+        <div className="grid grid-cols-7 border-b border-dashboard-border bg-dashboard-secondary/40 divide-x divide-dashboard-border">
+          {weekDayNames.map((day) => (
+            <ThemedText
+              as="div"
+              variant="caption"
+              key={day}
+              className="py-2 text-center text-xs font-semibold text-dashboard-muted-foreground"
+            >
+              {day}
+            </ThemedText>
+          ))}
+        </div>
+
+        {/* Week Rows */}
+        <div className="flex flex-col divide-y divide-dashboard-border">
+          {calendarWeeks.map((weekDaysList, weekIdx) => {
+            const weekStartMs = weekDaysList[0].date.getTime();
+            const weekEndMs = weekDaysList[6].date.getTime();
+
+            // Filter tasks overlapping this week
+            const weekTasks = tasks.filter((t) => {
+              const sDate = parseToMidnight(
+                t.start_date || (t as any).startDate,
+              );
+              const dDate = parseToMidnight(
+                t.due_date || (t as any).dueDate || (t as any).endDate,
+              );
+              if (!sDate && !dDate) return false;
+
+              const sMs = sDate ? sDate.getTime() : dDate!.getTime();
+              const dMs = dDate ? dDate.getTime() : sMs;
+              const minMs = Math.min(sMs, dMs);
+              const maxMs = Math.max(sMs, dMs);
+
+              return maxMs >= weekStartMs && minMs <= weekEndMs;
+            });
+
+            // Map tasks to columns in this week
+            const taskSpanMap: Record<
+              string,
+              { startCol: number; endCol: number; colSpan: number }
+            > = {};
+
+            const sortedWeekTasks = weekTasks
+              .map((task) => {
+                const sDate = parseToMidnight(
+                  task.start_date || (task as any).startDate,
+                );
+                const dDate = parseToMidnight(
+                  task.due_date ||
+                    (task as any).dueDate ||
+                    (task as any).endDate,
+                );
+                const sMs = sDate ? sDate.getTime() : dDate!.getTime();
+                const dMs = dDate ? dDate.getTime() : sMs;
+                const minMs = Math.min(sMs, dMs);
+                const maxMs = Math.max(sMs, dMs);
+
+                let startCol = 0;
+                let endCol = 6;
+
+                weekDaysList.forEach((cell, colIdx) => {
+                  const cellTime = cell.date.getTime();
+                  if (cellTime === minMs) startCol = colIdx;
+                  if (cellTime === maxMs) endCol = colIdx;
+                });
+
+                if (minMs < weekStartMs) startCol = 0;
+                if (maxMs > weekEndMs) endCol = 6;
+
+                const colSpan = Math.max(1, endCol - startCol + 1);
+                taskSpanMap[task.id] = { startCol, endCol, colSpan };
+
+                return { task, startCol, endCol, colSpan };
+              })
+              .sort(
+                (a, b) => a.startCol - b.startCol || b.colSpan - a.colSpan,
+              );
+
+            // Compute vertical non-overlapping tracks
+            const taskTrackMap: Record<string, number> = {};
+            const trackEndCols: number[] = [];
+
+            sortedWeekTasks.forEach(({ task, startCol, endCol }) => {
+              let assignedTrack = -1;
+              for (let t = 0; t < trackEndCols.length; t++) {
+                if (trackEndCols[t] < startCol) {
+                  assignedTrack = t;
+                  break;
+                }
+              }
+              if (assignedTrack === -1) {
+                assignedTrack = trackEndCols.length;
+                trackEndCols.push(endCol);
+              } else {
+                trackEndCols[assignedTrack] = endCol;
+              }
+              taskTrackMap[task.id] = assignedTrack;
+            });
+
+            const totalTracks = Math.max(1, trackEndCols.length);
+            const rowMinHeight = Math.max(112, 34 + totalTracks * 28);
+
+            return (
+              <div
+                key={weekIdx}
+                style={{ minHeight: `${rowMinHeight}px` }}
+                className="relative grid grid-cols-7 divide-x divide-dashboard-border flex-1"
+              >
+                {/* 7 Day Cell Dropzones */}
+                {weekDaysList.map((cell) => (
+                  <div
+                    key={cell.dateIso}
+                    onClick={() => onDayClick?.(cell.dateIso)}
+                    className={cn(
+                      "p-2 flex flex-col hover:bg-dashboard-secondary/20 transition-colors relative cursor-pointer select-none group",
+                      !cell.isCurrentMonth &&
+                        "bg-dashboard-secondary/10 opacity-50",
+                      cell.isToday && "bg-dashboard-primary/5",
+                    )}
+                  >
+                    <div className="flex items-center justify-between w-full mb-1 shrink-0">
+                      <span
+                        className={cn(
+                          "text-[11px] font-medium leading-none px-1",
+                          cell.isToday
+                            ? "bg-dashboard-primary text-white size-5 rounded-full flex items-center justify-center font-bold"
+                            : cell.isCurrentMonth
+                              ? "text-dashboard-foreground"
+                              : "text-dashboard-muted-foreground/60",
+                        )}
+                      >
+                        {cell.dayNumber}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+
+                {/* Spanning Linked Task Bars Layer */}
+                {weekTasks.map((task) => {
+                  const { startCol, colSpan } = taskSpanMap[task.id] || {
+                    startCol: 0,
+                    endCol: 0,
+                    colSpan: 1,
+                  };
+                  const trackIdx = taskTrackMap[task.id] ?? 0;
+                  const isCompleted =
+                    task.completed ||
+                    task.status?.category === "done" ||
+                    task.status_id === "completed";
+                  const statusColor =
+                    task.status?.color || "var(--color-dashboard-primary)";
+
+                  const leftPercent = (startCol / 7) * 100;
+                  const widthPercent = (colSpan / 7) * 100;
+
+                  return (
+                    <div
+                      key={task.id}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onTaskClick?.(task);
+                      }}
+                      style={{
+                        left: `calc(${leftPercent}% + 4px)`,
+                        width: `calc(${widthPercent}% - 8px)`,
+                        top: `${28 + trackIdx * 26}px`,
+                      }}
+                      className={cn(
+                        "absolute z-10 h-[22px] rounded-md text-xs border px-2 flex items-center justify-between cursor-pointer select-none transition-all shadow-2xs hover:shadow-md hover:border-dashboard-primary hover:z-20 group/task",
+                        isCompleted
+                          ? "line-through opacity-70 bg-dashboard-secondary/60 text-dashboard-muted-foreground border-dashboard-border"
+                          : "bg-dashboard-card text-dashboard-foreground border-dashboard-border hover:bg-dashboard-secondary/80",
+                      )}
+                      title={`${task.name || task.title} (${colSpan > 1 ? `${colSpan} days` : "1 day"})`}
+                    >
+                      <div className="flex items-center gap-1.5 min-w-0 flex-1 overflow-hidden">
+                        <span
+                          className="size-1.5 rounded-full shrink-0"
+                          style={{ backgroundColor: statusColor }}
+                        />
+                        <span className="truncate text-dashboard-foreground font-medium text-[11px] leading-tight">
+                          {task.name || task.title}
+                        </span>
+                      </div>
+                      {colSpan > 1 && (
+                        <span className="text-[10px] text-dashboard-muted-foreground shrink-0 ms-1 opacity-80 font-normal">
+                          {colSpan}d
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskCalendarView;