@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/clickup/elements/TaskGroup.tsx

@@ -0,0 +1,208 @@
+import "../task-ui.css";
+import { TaskTableHead } from "../elements/TaskTableHead";
+import { useTranslation } from "react-i18next";
+import React, { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { TaskIcon } from "../common/TaskIcon";
+import { cn } from "../../support/utils";
+import {
+  ClickUpStatus,
+  ClickUpTask,
+  ClickUpPhase,
+  ClickUpUser,
+} from "../types";
+import { TaskStatusPill } from "../common/TaskStatusPill";
+import { TaskRow } from "./TaskRow";
+import { ThemedText } from "../../components/ThemedText";
+import {
+  WorkspaceActionMenu,
+  WorkspaceContextMenu,
+} from "../common/WorkspaceMenus";
+
+export interface TaskGroupProps {
+  status: ClickUpStatus;
+  tasks: ClickUpTask[];
+  phases?: ClickUpPhase[];
+  users?: ClickUpUser[];
+  canEdit?: boolean;
+  defaultExpanded?: boolean;
+  isExpanded?: boolean;
+  onToggleExpand?: (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 TaskGroup: React.FC<TaskGroupProps> = ({
+  status,
+  tasks,
+  phases = [],
+  users = [],
+  canEdit = true,
+  defaultExpanded = true,
+  isExpanded: isExpandedProp,
+  onToggleExpand,
+  onToggleComplete,
+  onTaskClick,
+  onAddTask,
+  onStatusAction,
+  onStatusClick,
+  onAssigneeClick,
+  onPriorityClick,
+  onActionClick,
+  className,
+}) => {
+  const { t: tr } = useTranslation("designSystem");
+  const [localExpanded, setLocalExpanded] = useState(defaultExpanded);
+  const isExpanded =
+    isExpandedProp !== undefined ? isExpandedProp : localExpanded;
+
+  const toggleExpanded = () => {
+    if (onToggleExpand) {
+      onToggleExpand(status.id);
+    } else {
+      setLocalExpanded(!localExpanded);
+    }
+  };
+
+  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 statusActions = onStatusAction
+    ? [
+        {
+          id: "configure",
+          label: tr("clickup.Configure_status", { status: status.label }),
+          disabled: !canEdit,
+          onSelect: () => onStatusAction(status),
+        },
+      ]
+    : [];
+  return (
+    <section className={cn("cu-task-group", className)}>
+      {/* Group Header */}
+      <WorkspaceContextMenu actions={statusActions}>
+        <div className="cu-task-group-head">
+          <div className="flex items-center gap-1.5">
+            <button
+              type="button"
+              onClick={toggleExpanded}
+              aria-expanded={isExpanded}
+              aria-label={`${isExpanded ? "Collapse" : "Expand"} ${status.label} group`}
+              className="p-1 -ms-1 text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary rounded transition-colors cursor-pointer"
+            >
+              <ChevronDown
+                className={cn(
+                  "size-3.5 transition-transform duration-200",
+                  !isExpanded && "-rotate-90 rtl:rotate-90",
+                )}
+              />
+            </button>
+            <button
+              type="button"
+              onClick={toggleExpanded}
+              aria-expanded={isExpanded}
+              aria-label={`${isExpanded ? "Collapse" : "Expand"} ${status.label} group`}
+              className="rounded-[5px] focus-visible:outline focus-visible:outline-dashboard-primary cursor-pointer"
+            >
+              <TaskStatusPill status={status} size="sm" />
+            </button>
+            {/* Task count */}
+            <ThemedText
+              variant="caption"
+              as="span"
+              className="text-dashboard-muted-foreground text-[10px] leading-[15px] font-normal"
+            >
+              {tr("clickup.taskCount", { count: tasks.length })}
+            </ThemedText>
+          </div>
+
+          {/* Group Actions */}
+          {onStatusAction && (
+            <WorkspaceActionMenu
+              label={tr("clickup.Configure_status", { status: status.label })}
+              actions={statusActions}
+              className="cu-task-icon-button"
+            />
+          )}
+          <div className="ms-auto flex items-center gap-1">
+            {canEdit && onAddTask && (
+              <button
+                type="button"
+                onClick={() => onAddTask(status.id)}
+                aria-label={tr("clickup.addToStatus", { status: status.label })}
+                className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary rounded transition-colors"
+              >
+                <TaskIcon name="plus" className="size-[13px]" />
+                <ThemedText
+                  as="span"
+                  variant="caption"
+                  className="hidden sm:inline text-[11px] font-normal text-inherit"
+                >
+                  {tr("clickup.Add_task")}
+                </ThemedText>
+              </button>
+            )}
+          </div>
+        </div>
+      </WorkspaceContextMenu>
+      {/* Group Content */}
+      {isExpanded && (
+        <div className="overflow-x-auto">
+          {tasks.length > 0 ? (
+            <table className="cu-task-table">
+              <TaskTableHead />
+              <tbody>
+                {tasks.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}
+                  />
+                ))}
+              </tbody>
+            </table>
+          ) : (
+            <div className="py-6 text-center text-dashboard-muted-foreground text-xs">
+              <ThemedText as="p" variant="body" className="text-[11px]">
+                {tr("clickup.noStatusTasks")}
+              </ThemedText>
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default TaskGroup;

package/src/clickup/elements/TaskRow.tsx

@@ -0,0 +1,172 @@
+import { TaskContextMenu } from "../common/TaskContextMenu";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { TaskRowActionMenu } from "../common/TaskRowActionMenu";
+import "../task-ui.css";
+import { cn } from "../../support/utils";
+import {
+  ClickUpTask,
+  ClickUpStatus,
+  ClickUpPhase,
+  ClickUpUser,
+} from "../types";
+import { TaskCheck } from "../common/TaskCheck";
+import { TaskStatusPill } from "../common/TaskStatusPill";
+import { TaskPriorityBadge } from "../common/TaskPriorityBadge";
+import { TaskAssigneeAvatar } from "../common/TaskAssigneeAvatar";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskRowProps {
+  task: ClickUpTask;
+  status?: ClickUpStatus;
+  phase?: ClickUpPhase | string;
+  assignee?: ClickUpUser;
+  canEdit?: boolean;
+  onToggleComplete?: (task: ClickUpTask, checked: boolean) => void;
+  onClick?: (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 TaskRow: React.FC<TaskRowProps> = ({
+  task,
+  status = task.status,
+  phase = task.phase_name,
+  assignee = task.assignee,
+  canEdit = true,
+  onToggleComplete,
+  onClick,
+  onStatusClick,
+  onAssigneeClick,
+  onPriorityClick,
+  onActionClick,
+  className,
+}) => {
+  const { i18n } = useTranslation("designSystem");
+  const isCompleted =
+    task.completed ||
+    task.status?.category === "done" ||
+    task.status_id === "completed";
+  const phaseName =
+    typeof phase === "string" ? phase : phase?.name || task.phase_name || "";
+
+  const handleRowClick = () => {
+    if (onClick) onClick(task);
+  };
+
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return "-";
+    try {
+      const d = new Date(dateStr);
+      return new Intl.DateTimeFormat(i18n.language, {
+        month: "short",
+        day: "numeric",
+      }).format(d);
+    } catch {
+      return dateStr;
+    }
+  };
+
+  return (
+    <TaskContextMenu
+      task={task}
+      onOpen={onClick}
+      onToggleComplete={onToggleComplete}
+      completed={isCompleted}
+      canEdit={canEdit}
+    >
+      <tr
+        tabIndex={onClick ? 0 : undefined}
+        onKeyDown={(event) => {
+          if (
+            event.target === event.currentTarget &&
+            (event.key === "Enter" || event.key === " ")
+          ) {
+            event.preventDefault();
+            onClick?.(task);
+          }
+        }}
+        onClick={handleRowClick}
+        className={cn(
+          "cu-task-row group cursor-pointer hover:bg-dashboard-secondary",
+          className,
+        )}
+      >
+        <td className="relative">
+          <div className="flex items-center gap-2">
+            <TaskCheck
+              checked={isCompleted}
+              disabled={!canEdit}
+              onChange={(checked) => onToggleComplete?.(task, checked)}
+              ariaLabel={`Mark "${task.title}" as ${isCompleted ? "incomplete" : "complete"}`}
+            />
+            <ThemedText as="span" variant="body" className="cu-task-name">
+              {task.title}
+            </ThemedText>
+            {onActionClick && (
+              <TaskRowActionMenu task={task} onAction={onActionClick} />
+            )}
+          </div>
+        </td>
+        <td>
+          <ThemedText as="span" variant="body" className="cu-task-cell-text">
+            {phaseName || "-"}
+          </ThemedText>
+        </td>
+        <td>
+          <TaskStatusPill
+            status={status || task.status_id}
+            color={status?.color}
+            interactive={canEdit && Boolean(onStatusClick)}
+            onClick={
+              onStatusClick
+                ? (e) => {
+                    e.stopPropagation();
+                    onStatusClick(task);
+                  }
+                : undefined
+            }
+          />
+        </td>
+        <td>
+          <TaskAssigneeAvatar
+            user={assignee}
+            name={assignee?.name}
+            interactive={canEdit && Boolean(onAssigneeClick)}
+            onClick={
+              onAssigneeClick
+                ? (e) => {
+                    e.stopPropagation();
+                    onAssigneeClick(task);
+                  }
+                : undefined
+            }
+          />
+        </td>
+        <td>
+          <ThemedText as="span" variant="body" className="cu-task-cell-text">
+            {formatDate(task.due_date)}
+          </ThemedText>
+        </td>
+        <td>
+          <TaskPriorityBadge
+            priority={task.priority}
+            size="sm"
+            onClick={
+              onPriorityClick
+                ? (e) => {
+                    e.stopPropagation();
+                    onPriorityClick(task);
+                  }
+                : undefined
+            }
+          />
+        </td>
+      </tr>
+    </TaskContextMenu>
+  );
+};
+export default TaskRow;

package/src/clickup/elements/TaskTableHead.tsx

@@ -0,0 +1,29 @@
+import { useTranslation } from "react-i18next";
+import { ThemedText } from "../../components/ThemedText";
+export function TaskTableHead() {
+  const { t } = useTranslation("designSystem");
+  return (
+    <thead>
+      <tr>
+        {[
+          "Task_Name",
+          "Phase",
+          "Status",
+          "Assignee",
+          "Due_Date",
+          "Priority",
+        ].map((key) => (
+          <th key={key} scope="col">
+            <ThemedText
+              as="span"
+              variant="label"
+              className="cu-task-column-label"
+            >
+              {t(`clickup.${key}`)}
+            </ThemedText>
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+}

package/src/clickup/elements/TaskTimelineRow.tsx

@@ -0,0 +1,77 @@
+import { TaskContextMenu } from "../common/TaskContextMenu";
+import React from "react";
+import { cn } from "../../support/utils";
+import { ClickUpTask, ClickUpStatus } from "../types";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskTimelineRowProps {
+  task: ClickUpTask;
+  status?: ClickUpStatus;
+  leftPercent: number; // 0 - 100
+  widthPercent: number; // 0 - 100
+  onClick?: (task: ClickUpTask) => void;
+  className?: string;
+}
+
+export const TaskTimelineRow: React.FC<TaskTimelineRowProps> = ({
+  task,
+  status = task.status,
+  leftPercent,
+  widthPercent,
+  onClick,
+  className,
+}) => {
+  const statusColor = status?.color || "var(--color-dashboard-primary)";
+  const clampedLeft = Math.max(0, Math.min(100, leftPercent));
+  const clampedWidth = Math.max(2, Math.min(100 - clampedLeft, widthPercent));
+
+  return (
+    <TaskContextMenu task={task} onOpen={onClick}>
+      <div
+        className={cn(
+          "cu-task-timeline-row hover:bg-dashboard-secondary transition-colors",
+          className,
+        )}
+      >
+        {/* Task Label */}
+        <button
+          type="button"
+          onClick={() => onClick?.(task)}
+          className="cu-task-timeline-label hover:text-dashboard-primary transition-colors focus-visible:outline focus-visible:outline-dashboard-primary"
+        >
+          <ThemedText
+            variant="caption"
+            as="span"
+            truncate
+            className="text-xs font-medium text-dashboard-foreground hover:text-dashboard-primary"
+          >
+            {task.title}
+          </ThemedText>
+        </button>
+
+        {/* Timeline Bar Track */}
+        <div className="cu-task-timeline-track">
+          <button
+            type="button"
+            onClick={() => onClick?.(task)}
+            style={
+              {
+                insetInlineStart: `${clampedLeft}%`,
+                width: `${clampedWidth}%`,
+                "--task-status-color": statusColor,
+              } as React.CSSProperties
+            }
+            title={`${task.title} (${task.start_date || ""} - ${task.due_date || ""})`}
+            className="cu-task-timeline-bar hover:opacity-90 focus-visible:outline focus-visible:outline-dashboard-primary"
+          >
+            <ThemedText as="span" variant="caption" className="truncate">
+              {task.title}
+            </ThemedText>
+          </button>
+        </div>
+      </div>
+    </TaskContextMenu>
+  );
+};
+
+export default TaskTimelineRow;

package/src/clickup/index.ts

@@ -0,0 +1,63 @@
+// Types
+export * from "./types";
+
+// Common Primitives
+export * from "./common/TaskCheck";
+export * from "./common/TaskStatusPill";
+export * from "./common/TaskPriorityBadge";
+export * from "./common/TaskAssigneeAvatar";
+export * from "./common/TaskBreadcrumb";
+export * from "./common/WorkspaceHeader";
+export * from "./common/WorkspaceMessage";
+export * from "./common/InlineNameTab";
+export * from "./common/WorkspacePanel";
+export * from "./common/WorkspaceMetricStrip";
+export * from "./common/WorkspaceButton";
+export { Badge as WorkspaceBadge } from "../ui/badge";
+export { Input as WorkspaceInput } from "../ui/input";
+export { Textarea as WorkspaceTextarea } from "../ui/textarea";
+export { ConfirmDialog as WorkspaceConfirmDialog } from "../components/ConfirmDialog";
+export {
+  Dialog as WorkspaceDialog,
+  DialogContent as WorkspaceDialogContent,
+  DialogHeader as WorkspaceDialogHeader,
+  DialogTitle as WorkspaceDialogTitle,
+  DialogDescription as WorkspaceDialogDescription,
+} from "../components/dialog";
+export * from "./common/WorkspaceSelect";
+export * from "./common/WorkspaceMenus";
+export * from "./common/WorkspaceTable";
+export {
+  Popover as WorkspacePopover,
+  PopoverTrigger as WorkspacePopoverTrigger,
+  PopoverContent as WorkspacePopoverContent,
+} from "../components/popover";
+
+// Elements
+export * from "./elements/TaskRow";
+export * from "./elements/TaskGroup";
+export * from "./elements/TaskCard";
+export * from "./elements/TaskTimelineRow";
+export * from "./elements/TaskCalendarCell";
+
+// Toolbar & Controls
+export * from "./toolbar/TaskViewSwitcher";
+export * from "./toolbar/TaskToolbar";
+
+// Views
+export * from "./views/TaskListView";
+export * from "./views/TaskBoardView";
+export * from "./views/TaskTableView";
+export * from "./views/TaskGanttView";
+export * from "./views/TaskCalendarView";
+
+// Dialogs & Modals
+export * from "./dialogs/ClickUpTaskProperties";
+export * from "./dialogs/ClickUpTaskDescription";
+export * from "./dialogs/ClickUpCommentComposer";
+export * from "./dialogs/ClickUpTaskDiscussion";
+export * from "./dialogs/ClickUpTaskMain";
+export * from "./dialogs/ClickUpTaskDialog";
+
+export * from "./common/TaskIcon";
+export * from "./toolbar/TaskViewPicker";