@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/clickup/dialogs/ClickUpTaskMain.tsx

@@ -0,0 +1,156 @@
+import "../task-ui.css";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { Sparkles } from "lucide-react";
+import { cn } from "../../support/utils";
+import {
+  ClickUpTask,
+  ClickUpStatus,
+  ClickUpPhase,
+  ClickUpUser,
+  ClickUpSprint,
+} from "../types";
+import { ClickUpTaskProperties } from "./ClickUpTaskProperties";
+import { ClickUpTaskDescription } from "./ClickUpTaskDescription";
+import { ClickUpTaskActions } from "./ClickUpTaskActions";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface ClickUpTaskMainProps {
+  task: Partial<ClickUpTask>;
+  formId?: string;
+  showActions?: boolean;
+  isExisting?: boolean;
+  statuses?: ClickUpStatus[];
+  phases?: ClickUpPhase[];
+  users?: ClickUpUser[];
+  sprints?: ClickUpSprint[];
+  editable?: boolean;
+  onFieldChange: (field: keyof ClickUpTask, value: any) => void;
+  onSave?: () => void;
+  onCancel?: () => void;
+  onDelete?: () => void;
+  onAiAssist?: () => void;
+  className?: string;
+  feedback?: React.ReactNode;
+  extraFields?: React.ReactNode;
+}
+
+export const ClickUpTaskMain: React.FC<ClickUpTaskMainProps> = ({
+  task,
+  formId,
+  showActions = true,
+  isExisting = false,
+  statuses = [],
+  phases = [],
+  users = [],
+  sprints = [],
+  editable = true,
+  onFieldChange,
+  onSave,
+  onCancel,
+  onDelete,
+  onAiAssist,
+  className,
+  feedback,
+  extraFields,
+}) => {
+  const { t: tr } = useTranslation("designSystem");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (editable && onSave) {
+      onSave();
+    }
+  };
+
+  return (
+    <section className={cn("cu-task-main", className)}>
+      <form id={formId} onSubmit={handleSubmit} className="cu-task-form">
+        {/* Task Title Input */}
+        <div>
+          <input
+            id="cu-task-title-input"
+            aria-label={tr("clickup.Task_title")}
+            type="text"
+            required
+            maxLength={200}
+            disabled={!editable}
+            placeholder={tr("clickup.Task_name")}
+            value={task.title || ""}
+            onChange={(e) => onFieldChange("title", e.target.value)}
+            className="cu-task-title"
+          />
+        </div>
+
+        {/* AI / ClickUp Brain Banner */}
+        {onAiAssist && (
+          <div
+            role="button"
+            tabIndex={0}
+            onClick={onAiAssist}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onAiAssist?.();
+              }
+            }}
+            className="flex items-center justify-between p-2.5 rounded-lg border border-dashboard-primary/30 bg-dashboard-primary/10 text-dashboard-primary hover:bg-dashboard-primary/15 cursor-pointer transition-colors select-none"
+          >
+            <div className="flex items-center gap-2 text-xs font-medium">
+              <Sparkles className="w-4 h-4 shrink-0 text-dashboard-primary" />
+              <ThemedText
+                variant="caption"
+                as="span"
+                className="text-dashboard-primary font-medium text-xs"
+              >
+                Antigravity AI: Summarize or generate delivery update
+              </ThemedText>
+            </div>
+            <ThemedText
+              as="span"
+              variant="caption"
+              className="text-[10px] uppercase font-bold tracking-wider px-1.5 py-0.5 rounded bg-dashboard-primary/20 text-dashboard-primary"
+            >
+              AI
+            </ThemedText>
+          </div>
+        )}
+
+        {/* Properties Grid */}
+        <ClickUpTaskProperties
+          task={task}
+          statuses={statuses}
+          phases={phases}
+          users={users}
+          sprints={sprints}
+          editable={editable}
+          onChange={onFieldChange}
+          extraFields={extraFields}
+        />
+        {feedback}
+
+        {/* Description Section */}
+        <ClickUpTaskDescription
+          helperText=""
+          value={task.description || ""}
+          editable={editable}
+          onChange={(val) => onFieldChange("description", val)}
+        />
+
+        {showActions && (
+          <footer className="cu-task-savebar">
+            <ClickUpTaskActions
+              isExisting={isExisting}
+              editable={editable}
+              hasTitle={Boolean(task.title?.trim())}
+              onDelete={onDelete}
+              onCancel={onCancel}
+            />
+          </footer>
+        )}
+      </form>
+    </section>
+  );
+};
+
+export default ClickUpTaskMain;

package/src/clickup/dialogs/ClickUpTaskProperties.tsx

@@ -0,0 +1,214 @@
+import { Calendar, Clock, Layers, ListChecks, Tag, Users } from "lucide-react";
+import { ClickUpTaskAssignee } from "./ClickUpTaskAssignee";
+import { WorkspaceSelect } from "../common/WorkspaceSelect";
+import { ThemedText } from "../../components/ThemedText";
+import "../task-ui.css";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { cn } from "../../support/utils";
+import {
+  ClickUpTask,
+  ClickUpStatus,
+  ClickUpPhase,
+  ClickUpUser,
+  ClickUpSprint,
+  ClickUpPriority,
+} from "../types";
+
+export interface ClickUpTaskPropertiesProps {
+  task: Partial<ClickUpTask>;
+  statuses?: ClickUpStatus[];
+  phases?: ClickUpPhase[];
+  users?: ClickUpUser[];
+  sprints?: ClickUpSprint[];
+  priorities?: ClickUpPriority[];
+  onChange?: (field: keyof ClickUpTask, value: any) => void;
+  editable?: boolean;
+  className?: string;
+  extraFields?: React.ReactNode;
+}
+
+const DEFAULT_PRIORITIES: ClickUpPriority[] = [
+  "Urgent",
+  "High",
+  "Normal",
+  "Low",
+];
+
+function PropertyLabel({
+  htmlFor,
+  icon,
+  children,
+}: {
+  htmlFor?: string;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <label htmlFor={htmlFor} className="cu-task-property-label">
+      {icon}
+      <ThemedText as="span" variant="body" className="cu-task-property-text">
+        {children}
+      </ThemedText>
+    </label>
+  );
+}
+export const ClickUpTaskProperties: React.FC<ClickUpTaskPropertiesProps> = ({
+  task,
+  statuses = [],
+  phases = [],
+  users = [],
+  sprints = [],
+  priorities = DEFAULT_PRIORITIES,
+  onChange,
+  editable = true,
+  className,
+  extraFields,
+}) => {
+  const { t: tr } = useTranslation("designSystem");
+  const status = statuses.find((item) => item.id === task.status_id);
+  return (
+    <div className={cn("cu-task-properties", className)}>
+      <div
+        className="cu-task-property"
+        style={
+          {
+            "--cu-status-color":
+              status?.color ?? "var(--color-dashboard-muted-foreground)",
+          } as React.CSSProperties
+        }
+      >
+        <PropertyLabel htmlFor="cu-property-status" icon={<Clock />}>
+          {tr("clickup.Status")}
+        </PropertyLabel>
+        <WorkspaceSelect
+          id="cu-property-status"
+          aria-label={tr("clickup.Task_status")}
+          disabled={!editable}
+          value={task.status_id || ""}
+          onChange={(e) => onChange?.("status_id", e.target.value)}
+          className="cu-task-status-select"
+        >
+          <option value="">{tr("clickup.Select_status")}</option>
+          {statuses.map((item) => (
+            <option key={item.id} value={item.id}>
+              {item.label}
+            </option>
+          ))}
+        </WorkspaceSelect>
+      </div>
+      <div className="cu-task-property">
+        <PropertyLabel htmlFor="cu-property-priority" icon={<Tag />}>
+          {tr("clickup.Priority")}
+        </PropertyLabel>
+        <WorkspaceSelect
+          id="cu-property-priority"
+          aria-label={tr("clickup.Task_priority")}
+          disabled={!editable}
+          value={task.priority || "Normal"}
+          onChange={(e) => onChange?.("priority", e.target.value)}
+          className="cu-task-priority-select"
+        >
+          {priorities.map((item) => (
+            <option key={item} value={item}>
+              {tr("clickup." + item)}
+            </option>
+          ))}
+        </WorkspaceSelect>
+      </div>
+      <div className="cu-task-property cu-task-property-wide cu-task-property-separated">
+        <PropertyLabel icon={<Users />}>{tr("clickup.Assignee")}</PropertyLabel>
+        <ClickUpTaskAssignee
+          value={task.assignee_id || ""}
+          users={users}
+          editable={editable}
+          onChange={(value) => onChange?.("assignee_id", value)}
+        />
+      </div>
+      <div className="cu-task-property cu-task-property-wide cu-task-property-separated">
+        <PropertyLabel icon={<Calendar />}>{tr("clickup.Dates")}</PropertyLabel>
+        <div className="cu-task-dates">
+          <label
+            htmlFor="cu-property-start-date"
+            className="cu-task-date-field"
+          >
+            <ThemedText
+              as="span"
+              variant="caption"
+              className="text-[11px] text-dashboard-muted-foreground"
+            >
+              {tr("clickup.Start_Date")}
+            </ThemedText>
+            <input
+              id="cu-property-start-date"
+              aria-label={tr("clickup.Task_start_date")}
+              type="date"
+              disabled={!editable}
+              value={task.start_date || ""}
+              onChange={(e) => onChange?.("start_date", e.target.value)}
+            />
+          </label>
+          <label htmlFor="cu-property-due-date" className="cu-task-date-field">
+            <ThemedText
+              as="span"
+              variant="caption"
+              className="text-[11px] text-dashboard-muted-foreground"
+            >
+              {tr("clickup.Due_Date")}
+            </ThemedText>
+            <input
+              id="cu-property-due-date"
+              aria-label={tr("clickup.Task_due_date")}
+              type="date"
+              disabled={!editable}
+              value={task.due_date || ""}
+              onChange={(e) => onChange?.("due_date", e.target.value)}
+            />
+          </label>
+        </div>
+      </div>
+      <div className="cu-task-property cu-task-property-separated">
+        <PropertyLabel htmlFor="cu-property-phase" icon={<Layers />}>
+          {tr("clickup.Phase")}
+        </PropertyLabel>
+        <WorkspaceSelect
+          id="cu-property-phase"
+          aria-label={tr("clickup.Project_phase")}
+          disabled={!editable}
+          value={task.phase_id || ""}
+          onChange={(e) => onChange?.("phase_id", e.target.value)}
+        >
+          <option value="">{tr("clickup.Select_phase")}</option>
+          {phases.map((item) => (
+            <option key={item.id} value={item.id}>
+              {item.name}
+            </option>
+          ))}
+        </WorkspaceSelect>
+      </div>
+      {sprints.length > 0 && (
+        <div className="cu-task-property cu-task-property-separated">
+          <PropertyLabel htmlFor="cu-property-sprint" icon={<ListChecks />}>
+            {tr("clickup.Sprint")}
+          </PropertyLabel>
+          <WorkspaceSelect
+            id="cu-property-sprint"
+            aria-label={tr("clickup.Sprint")}
+            disabled={!editable}
+            value={task.sprint_id || ""}
+            onChange={(e) => onChange?.("sprint_id", e.target.value)}
+          >
+            <option value="">{tr("clickup.No_sprint")}</option>
+            {sprints.map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.name}
+              </option>
+            ))}
+          </WorkspaceSelect>
+        </div>
+      )}
+      {extraFields && <div className="cu-task-extra">{extraFields}</div>}
+    </div>
+  );
+};
+export default ClickUpTaskProperties;

package/src/clickup/elements/TaskCalendarCell.tsx

@@ -0,0 +1,91 @@
+import { TaskContextMenu } from "../common/TaskContextMenu";
+import React from "react";
+import { cn } from "../../support/utils";
+import { ClickUpTask } from "../types";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskCalendarCellProps {
+  dayNumber: number;
+  dateIso: string;
+  isCurrentMonth?: boolean;
+  isToday?: boolean;
+  tasks?: ClickUpTask[];
+  onTaskClick?: (task: ClickUpTask) => void;
+  onCellClick?: (dateIso: string) => void;
+  className?: string;
+}
+
+export const TaskCalendarCell: React.FC<TaskCalendarCellProps> = ({
+  dayNumber,
+  dateIso,
+  isCurrentMonth = true,
+  isToday = false,
+  tasks = [],
+  onTaskClick,
+  onCellClick,
+  className,
+}) => {
+  return (
+    <div
+      onClick={() => onCellClick?.(dateIso)}
+      className={cn(
+        "cu-task-calendar-cell flex flex-col gap-1 transition-colors bg-dashboard-card select-none",
+        !isCurrentMonth && "opacity-40 bg-dashboard-background/50",
+        isToday && "ring-1 ring-inset ring-dashboard-primary",
+        className,
+      )}
+    >
+      {/* Day number */}
+      <div className="flex items-center justify-between">
+        <ThemedText
+          as="span"
+          variant="caption"
+          className={cn(
+            "cu-task-calendar-day flex items-center rounded-full",
+            isToday
+              ? "bg-dashboard-primary text-dashboard-primary-foreground"
+              : "text-dashboard-muted-foreground",
+          )}
+        >
+          {dayNumber}
+        </ThemedText>
+      </div>
+
+      {/* Task pills in this day */}
+      <div className="flex flex-col gap-1 mt-1 overflow-y-auto max-h-[80px]">
+        {tasks.map((task) => {
+          const statusColor =
+            task.status?.color || "var(--color-dashboard-primary)";
+          return (
+            <TaskContextMenu key={task.id} task={task} onOpen={onTaskClick}>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onTaskClick?.(task);
+                }}
+                style={
+                  {
+                    "--task-status-color": statusColor,
+                  } as React.CSSProperties
+                }
+                className="cu-task-calendar-chip hover:opacity-90 focus-visible:outline focus-visible:outline-dashboard-primary"
+              >
+                <ThemedText
+                  variant="caption"
+                  as="span"
+                  truncate
+                  className="text-dashboard-primary-foreground text-[11px] font-medium leading-tight block truncate"
+                >
+                  {task.title}
+                </ThemedText>
+              </button>
+            </TaskContextMenu>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TaskCalendarCell;

package/src/clickup/elements/TaskCard.tsx

@@ -0,0 +1,154 @@
+import { TaskContextMenu } from "../common/TaskContextMenu";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { TaskIcon } from "../common/TaskIcon";
+import "../task-ui.css";
+import { cn } from "../../support/utils";
+import { ClickUpTask, ClickUpPhase, ClickUpUser } from "../types";
+import { TaskCheck } from "../common/TaskCheck";
+import { TaskAssigneeAvatar } from "../common/TaskAssigneeAvatar";
+import { TaskPriorityBadge } from "../common/TaskPriorityBadge";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskCardProps {
+  task: ClickUpTask;
+  phase?: ClickUpPhase | string;
+  assignee?: ClickUpUser;
+  canEdit?: boolean;
+  draggable?: boolean;
+  onDragStart?: (e: React.DragEvent, task: ClickUpTask) => void;
+  onClick?: (task: ClickUpTask) => void;
+  onToggleComplete?: (task: ClickUpTask, checked: boolean) => void;
+  className?: string;
+}
+
+export const TaskCard: React.FC<TaskCardProps> = ({
+  task,
+  phase = task.phase_name,
+  assignee = task.assignee,
+  canEdit = true,
+  draggable = true,
+  onDragStart,
+  onClick,
+  onToggleComplete,
+  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 handleDragStart = (e: React.DragEvent) => {
+    if (onDragStart) {
+      onDragStart(e, task);
+    } else {
+      e.dataTransfer.setData("text/plain", task.id);
+    }
+  };
+
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return null;
+    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}
+    >
+      <article
+        role="button"
+        tabIndex={0}
+        draggable={draggable && canEdit}
+        onDragStart={handleDragStart}
+        onClick={() => onClick?.(task)}
+        onKeyDown={(e) => {
+          if (
+            e.target === e.currentTarget &&
+            (e.key === "Enter" || e.key === " ")
+          ) {
+            e.preventDefault();
+            onClick?.(task);
+          }
+        }}
+        className={cn(
+          "cu-task-card group relative border border-dashboard-border bg-dashboard-card text-start hover:bg-dashboard-secondary",
+          draggable && canEdit && "cursor-grab active:cursor-grabbing",
+          className,
+        )}
+      >
+        <div className="cu-task-card-phase">
+          {phaseName && (
+            <>
+              <TaskIcon name="folder" className="size-[13px]" />
+              <ThemedText
+                as="span"
+                variant="caption"
+                className="text-[9px] leading-[13.5px] font-normal text-inherit"
+              >
+                {typeof phase === "object" && phase.order
+                  ? `${String(phase.order).padStart(2, "0")} `
+                  : ""}
+                {phaseName}
+              </ThemedText>
+            </>
+          )}
+          {onToggleComplete && (
+            <div className="absolute end-3 top-3 opacity-0 group-hover:opacity-100 focus-within:opacity-100">
+              <TaskCheck
+                checked={isCompleted}
+                disabled={!canEdit}
+                onChange={(checked) => onToggleComplete(task, checked)}
+                ariaLabel={`Mark ${task.title} as ${isCompleted ? "incomplete" : "complete"}`}
+              />
+            </div>
+          )}
+        </div>
+        <ThemedText as="h3" variant="body" className="cu-task-card-title">
+          {task.title}
+        </ThemedText>
+        <div className="cu-task-card-foot">
+          <TaskAssigneeAvatar user={assignee} size="sm" />
+          <ThemedText
+            as="span"
+            variant="caption"
+            className="text-[10px] leading-[15px] font-normal text-inherit"
+          >
+            {formatDate(task.due_date)}
+          </ThemedText>
+          <div className="grow" />
+          {typeof task.comments_count === "number" &&
+            task.comments_count > 0 && (
+              <ThemedText
+                as="span"
+                variant="caption"
+                className="inline-flex gap-1 text-inherit"
+              >
+                <TaskIcon name="comment" className="size-[13px]" />
+                {task.comments_count}
+              </ThemedText>
+            )}
+          <TaskPriorityBadge
+            priority={task.priority}
+            className="cu-task-card-priority"
+          />
+        </div>
+      </article>
+    </TaskContextMenu>
+  );
+};
+export default TaskCard;