@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/clickup/views/TaskGanttView.tsx

@@ -0,0 +1,178 @@
+import "../task-ui.css";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { cn } from "../../support/utils";
+import { ClickUpTask } from "../types";
+import { TaskTimelineRow } from "../elements/TaskTimelineRow";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskGanttViewProps {
+  tasks: ClickUpTask[];
+  startDate?: Date;
+  daysCount?: number;
+  onTaskClick?: (task: ClickUpTask) => void;
+  className?: string;
+}
+
+export const TaskGanttView: React.FC<TaskGanttViewProps> = ({
+  tasks,
+  startDate,
+  daysCount = 28,
+  onTaskClick,
+  className,
+}) => {
+  const { t: tr, i18n } = useTranslation("designSystem");
+  // Compute timeline window
+  const baseStart = React.useMemo(() => {
+    if (startDate) return new Date(startDate);
+    const validDates = tasks
+      .map((t) => t.start_date)
+      .filter(Boolean)
+      .map((d) => new Date(d as string).getTime())
+      .filter((t) => !isNaN(t));
+
+    if (validDates.length > 0) {
+      return new Date(Math.min(...validDates));
+    }
+    return new Date();
+  }, [startDate, tasks]);
+
+  const DAY_MS = 86400000;
+  const startTime = Date.UTC(
+    baseStart.getUTCFullYear(),
+    baseStart.getUTCMonth(),
+    baseStart.getUTCDate(),
+  );
+
+  const days = Array.from({ length: daysCount }, (_, i) => {
+    const d = new Date(startTime + i * DAY_MS);
+    return {
+      date: d,
+      dayNumber: d.getUTCDate(),
+      isWeekend: d.getUTCDay() === 0 || d.getUTCDay() === 6,
+    };
+  });
+
+  const rangeLabel = React.useMemo(() => {
+    const startStr = new Intl.DateTimeFormat(i18n.language, {
+      month: "short",
+      day: "numeric",
+      timeZone: "UTC",
+    }).format(new Date(startTime));
+    const endStr = new Intl.DateTimeFormat(i18n.language, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      timeZone: "UTC",
+    }).format(new Date(startTime + (daysCount - 1) * DAY_MS));
+    return `${startStr} - ${endStr}`;
+  }, [startTime, daysCount, i18n.language]);
+
+  const scheduledTasks = tasks.filter((t) => t.start_date && t.due_date);
+
+  return (
+    <div className={cn("space-y-3 py-2", className)}>
+      {/* Range Header */}
+      <div className="cu-task-gantt-header">
+        <ThemedText
+          variant="title"
+          as="h3"
+          className="text-sm font-semibold text-dashboard-foreground"
+        >
+          {rangeLabel}
+        </ThemedText>
+        <ThemedText
+          variant="caption"
+          as="span"
+          className="text-xs text-dashboard-muted-foreground"
+        >
+          {tr("clickup.dateRange", { count: daysCount })}
+        </ThemedText>
+      </div>
+
+      {/* Timeline Wrapper */}
+      <div className="overflow-x-auto">
+        <div
+          className="cu-task-timeline"
+          style={{ "--task-days-count": daysCount } as React.CSSProperties}
+        >
+          {/* Days Header */}
+          <div className="cu-task-timeline-row">
+            <ThemedText
+              as="span"
+              variant="body"
+              className="cu-task-timeline-label text-[11px] font-medium text-dashboard-muted-foreground"
+            >
+              {tr("clickup.Project_Task")}
+            </ThemedText>
+            <div className="cu-task-timeline-days">
+              {days.map((d, index) => (
+                <ThemedText
+                  as="span"
+                  variant="caption"
+                  key={index}
+                  className={cn(
+                    "cu-task-timeline-day",
+                    d.isWeekend
+                      ? "text-dashboard-muted-foreground/40"
+                      : "text-dashboard-muted-foreground font-medium",
+                  )}
+                >
+                  {d.dayNumber}
+                </ThemedText>
+              ))}
+            </div>
+          </div>
+
+          {/* Rows */}
+          <div className="divide-y divide-dashboard-border/30">
+            {scheduledTasks.map((task) => {
+              const startTask = Date.parse(task.start_date + "T00:00:00Z");
+              const dueTask = Date.parse(task.due_date + "T00:00:00Z");
+
+              const leftDays = Math.max(0, (startTask - startTime) / DAY_MS);
+              const endDays = Math.min(
+                daysCount,
+                (dueTask - startTime) / DAY_MS + 1,
+              );
+
+              if (endDays <= leftDays || leftDays >= daysCount) return null;
+
+              const leftPercent = (leftDays / daysCount) * 100;
+              const widthPercent = ((endDays - leftDays) / daysCount) * 100;
+
+              return (
+                <TaskTimelineRow
+                  key={task.id}
+                  task={task}
+                  status={task.status}
+                  leftPercent={leftPercent}
+                  widthPercent={widthPercent}
+                  onClick={onTaskClick}
+                />
+              );
+            })}
+
+            {scheduledTasks.length === 0 && (
+              <div className="py-12 text-center text-dashboard-muted-foreground text-xs">
+                <ThemedText as="p" variant="body">
+                  {tr("clickup.noScheduled")}
+                </ThemedText>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <ThemedText
+        variant="caption"
+        as="p"
+        className="text-[11px] text-dashboard-muted-foreground/70 pt-1"
+      >
+        {tr("clickup.projection")}
+      </ThemedText>
+    </div>
+  );
+};
+
+export default TaskGanttView;

package/src/clickup/views/TaskListView.tsx

@@ -0,0 +1,95 @@
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { cn } from "../../support/utils";
+import {
+  ClickUpTask,
+  ClickUpStatus,
+  ClickUpPhase,
+  ClickUpUser,
+} from "../types";
+import { TaskGroup } from "../elements/TaskGroup";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskListViewProps {
+  tasks: ClickUpTask[];
+  statuses: ClickUpStatus[];
+  phases?: ClickUpPhase[];
+  users?: ClickUpUser[];
+  canEdit?: boolean;
+  collapsedGroupIds?: Record<string, boolean>;
+  onToggleGroup?: (statusId: string) => void;
+  onToggleComplete?: (task: ClickUpTask, checked: boolean) => void;
+  onTaskClick?: (task: ClickUpTask) => void;
+  onAddTask?: (statusId: string) => void;
+  onStatusAction?: (status: ClickUpStatus) => void;
+  onStatusClick?: (task: ClickUpTask) => void;
+  onAssigneeClick?: (task: ClickUpTask) => void;
+  onPriorityClick?: (task: ClickUpTask) => void;
+  onActionClick?: (task: ClickUpTask, e: React.MouseEvent) => void;
+  className?: string;
+}
+
+export const TaskListView: React.FC<TaskListViewProps> = ({
+  tasks,
+  statuses,
+  phases = [],
+  users = [],
+  canEdit = true,
+  collapsedGroupIds,
+  onToggleGroup,
+  onToggleComplete,
+  onTaskClick,
+  onAddTask,
+  onStatusAction,
+  onStatusClick,
+  onAssigneeClick,
+  onPriorityClick,
+  onActionClick,
+  className,
+}) => {
+  const { t: tr } = useTranslation("designSystem");
+  if (statuses.length === 0) {
+    return (
+      <div className="py-12 text-center text-dashboard-muted-foreground">
+        <ThemedText
+          variant="body"
+          as="p"
+          className="text-dashboard-muted-foreground"
+        >
+          {tr("clickup.No_task_statuses_configured")}
+        </ThemedText>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("cu-task-list", className)}>
+      {statuses.map((status) => {
+        const statusTasks = tasks.filter((t) => t.status_id === status.id);
+
+        return (
+          <TaskGroup
+            key={status.id}
+            status={status}
+            tasks={statusTasks}
+            phases={phases}
+            users={users}
+            canEdit={canEdit}
+            isExpanded={!collapsedGroupIds?.[status.id]}
+            onToggleExpand={onToggleGroup}
+            onToggleComplete={onToggleComplete}
+            onTaskClick={onTaskClick}
+            onAddTask={onAddTask}
+            onStatusAction={onStatusAction}
+            onStatusClick={onStatusClick}
+            onAssigneeClick={onAssigneeClick}
+            onPriorityClick={onPriorityClick}
+            onActionClick={onActionClick}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default TaskListView;

package/src/clickup/views/TaskTableView.tsx

@@ -0,0 +1,192 @@
+import "../task-ui.css";
+import { TaskTableHead } from "../elements/TaskTableHead";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../support/utils";
+import {
+  ClickUpTask,
+  ClickUpStatus,
+  ClickUpPhase,
+  ClickUpUser,
+} from "../types";
+import { TaskRow } from "../elements/TaskRow";
+import { TaskStatusPill } from "../common/TaskStatusPill";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskTableViewProps {
+  tasks: ClickUpTask[];
+  statuses?: ClickUpStatus[];
+  phases?: ClickUpPhase[];
+  users?: ClickUpUser[];
+  canEdit?: boolean;
+  collapsedGroupIds?: Record<string, boolean>;
+  onToggleGroup?: (statusId: string) => void;
+  onToggleComplete?: (task: ClickUpTask, checked: boolean) => void;
+  onTaskClick?: (task: ClickUpTask) => void;
+  onStatusClick?: (task: ClickUpTask) => void;
+  onAssigneeClick?: (task: ClickUpTask) => void;
+  onPriorityClick?: (task: ClickUpTask) => void;
+  onActionClick?: (task: ClickUpTask, e: React.MouseEvent) => void;
+  className?: string;
+}
+
+export const TaskTableView: React.FC<TaskTableViewProps> = ({
+  tasks,
+  statuses = [],
+  phases = [],
+  users = [],
+  canEdit = true,
+  collapsedGroupIds,
+  onToggleGroup,
+  onToggleComplete,
+  onTaskClick,
+  onStatusClick,
+  onAssigneeClick,
+  onPriorityClick,
+  onActionClick,
+  className,
+}) => {
+  const { t: tr } = useTranslation("designSystem");
+  const statusMap = React.useMemo(() => {
+    const map = new Map<string, ClickUpStatus>();
+    statuses.forEach((s) => map.set(s.id, s));
+    return map;
+  }, [statuses]);
+
+  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]);
+
+  return (
+    <div className={cn("cu-task-table-wrap", className)}>
+      <div className="overflow-x-auto">
+        <table className="cu-task-table">
+          <TaskTableHead />
+          <tbody>
+            {statuses.length > 0
+              ? statuses.map((status) => {
+                  const statusTasks = tasks.filter(
+                    (t) => t.status_id === status.id,
+                  );
+                  const isExpanded = !collapsedGroupIds?.[status.id];
+
+                  return (
+                    <React.Fragment key={status.id}>
+                      <tr className="bg-dashboard-secondary/35 border-b border-dashboard-border">
+                        <td colSpan={6} className="py-2 px-3">
+                          <button
+                            type="button"
+                            onClick={() => onToggleGroup?.(status.id)}
+                            className="inline-flex items-center gap-2 text-xs font-semibold text-dashboard-foreground hover:text-dashboard-primary transition-colors cursor-pointer"
+                            aria-expanded={isExpanded}
+                          >
+                            <ChevronDown
+                              className={cn(
+                                "size-3.5 text-dashboard-muted-foreground transition-transform duration-200",
+                                !isExpanded && "-rotate-90 rtl:rotate-90",
+                              )}
+                            />
+                            <TaskStatusPill status={status} size="sm" />
+                            <span className="text-[11px] text-dashboard-muted-foreground font-normal">
+                              ({statusTasks.length})
+                            </span>
+                          </button>
+                        </td>
+                      </tr>
+                      {isExpanded &&
+                        statusTasks.map((task) => (
+                          <TaskRow
+                            key={task.id}
+                            task={task}
+                            status={status}
+                            phase={
+                              task.phase_id
+                                ? phaseMap.get(task.phase_id)
+                                : undefined
+                            }
+                            assignee={
+                              task.assignee_id
+                                ? userMap.get(task.assignee_id)
+                                : undefined
+                            }
+                            canEdit={canEdit}
+                            onToggleComplete={onToggleComplete}
+                            onClick={onTaskClick}
+                            onStatusClick={onStatusClick}
+                            onAssigneeClick={onAssigneeClick}
+                            onPriorityClick={onPriorityClick}
+                            onActionClick={onActionClick}
+                          />
+                        ))}
+                      {isExpanded && statusTasks.length === 0 && (
+                        <tr className="border-b border-dashboard-border/50">
+                          <td
+                            colSpan={6}
+                            className="py-4 text-center text-xs text-dashboard-muted-foreground"
+                          >
+                            {tr("clickup.noStatusTasks", {
+                              defaultValue: "No tasks in this status.",
+                            })}
+                          </td>
+                        </tr>
+                      )}
+                    </React.Fragment>
+                  );
+                })
+              : tasks.map((task) => (
+                  <TaskRow
+                    key={task.id}
+                    task={task}
+                    status={
+                      task.status ||
+                      (task.status_id
+                        ? statusMap.get(task.status_id)
+                        : undefined)
+                    }
+                    phase={
+                      task.phase_id ? phaseMap.get(task.phase_id) : undefined
+                    }
+                    assignee={
+                      task.assignee ||
+                      (task.assignee_id
+                        ? userMap.get(task.assignee_id)
+                        : undefined)
+                    }
+                    canEdit={canEdit}
+                    onToggleComplete={onToggleComplete}
+                    onClick={onTaskClick}
+                    onStatusClick={onStatusClick}
+                    onAssigneeClick={onAssigneeClick}
+                    onPriorityClick={onPriorityClick}
+                    onActionClick={onActionClick}
+                  />
+                ))}
+          </tbody>
+        </table>
+
+        {tasks.length === 0 && statuses.length === 0 && (
+          <div className="py-12 text-center text-dashboard-muted-foreground">
+            <ThemedText
+              variant="body"
+              as="p"
+              className="text-dashboard-muted-foreground"
+            >
+              No tasks match this view.
+            </ThemedText>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TaskTableView;