@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/clickup/dialogs/ClickUpTaskActions.tsx

@@ -0,0 +1,73 @@
+import { Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../../components/button";
+import { ThemedText } from "../../components/ThemedText";
+
+export function ClickUpTaskActions({
+  isExisting,
+  editable,
+  hasTitle,
+  formId,
+  onDelete,
+  onCancel,
+}: {
+  isExisting: boolean;
+  editable: boolean;
+  hasTitle: boolean;
+  formId?: string;
+  onDelete?: () => void;
+  onCancel?: () => void;
+}) {
+  const { t } = useTranslation("designSystem");
+  return (
+    <div className="cu-task-actions">
+      {isExisting && onDelete && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          disabled={!editable}
+          onClick={onDelete}
+          aria-label={t("clickup.Delete_task_draft")}
+          className="cu-task-delete text-dashboard-destructive hover:bg-dashboard-destructive/10 hover:text-dashboard-destructive"
+        >
+          <Trash2 className="size-3.5" />
+          <ThemedText as="span" variant="body" className="text-xs text-inherit">
+            {t("clickup.Delete")}
+          </ThemedText>
+        </Button>
+      )}
+      {onCancel && (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onCancel}
+          aria-label={t("clickup.Cancel_task_editing")}
+        >
+          <ThemedText as="span" variant="body" className="text-xs text-inherit">
+            {t("clickup.Cancel")}
+          </ThemedText>
+        </Button>
+      )}
+      <Button
+        type="submit"
+        form={formId}
+        size="sm"
+        disabled={!editable || !hasTitle}
+        aria-label={t(
+          isExisting ? "clickup.Save_task_changes" : "clickup.Create_task",
+        )}
+        className="cu-task-save"
+      >
+        <ThemedText
+          as="span"
+          variant="body"
+          className="text-xs font-semibold text-inherit"
+        >
+          {t(isExisting ? "clickup.Save_changes" : "clickup.Create_task")}
+        </ThemedText>
+      </Button>
+    </div>
+  );
+}

package/src/clickup/dialogs/ClickUpTaskAssignee.tsx

@@ -0,0 +1,86 @@
+import { ChevronDown, UserPlus, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+} from "../../components/dropdown-menu";
+import { ThemedText } from "../../components/ThemedText";
+import { TaskAssigneeAvatar } from "../common/TaskAssigneeAvatar";
+import type { ClickUpUser } from "../types";
+
+export function ClickUpTaskAssignee({
+  value,
+  users,
+  editable,
+  onChange,
+}: {
+  value: string;
+  users: ClickUpUser[];
+  editable: boolean;
+  onChange: (value: string) => void;
+}) {
+  const { t } = useTranslation("designSystem");
+  const user = users.find((item) => item.id === value);
+  return (
+    <div className="cu-task-assignee-control">
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          disabled={!editable}
+          aria-label={t("clickup.Task_assignee")}
+          className="cu-task-assignee-trigger"
+        >
+          {user ? (
+            <TaskAssigneeAvatar user={user} size="xs" />
+          ) : (
+            <UserPlus className="size-3" />
+          )}
+          <ThemedText
+            as="span"
+            variant="body"
+            className="text-[11px] font-medium text-inherit"
+          >
+            {user?.name ?? t("clickup.Unassigned")}
+          </ThemedText>
+          <ChevronDown className="size-3 opacity-60" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="min-w-48">
+          <DropdownMenuRadioGroup value={value} onValueChange={onChange}>
+            <DropdownMenuRadioItem value="" closeOnClick>
+              <ThemedText
+                as="span"
+                variant="body"
+                className="text-xs text-inherit"
+              >
+                {t("clickup.Unassigned")}
+              </ThemedText>
+            </DropdownMenuRadioItem>
+            {users.map((item) => (
+              <DropdownMenuRadioItem key={item.id} value={item.id} closeOnClick>
+                <ThemedText
+                  as="span"
+                  variant="body"
+                  className="text-xs text-inherit"
+                >
+                  {item.name}
+                </ThemedText>
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {value && editable && (
+        <button
+          type="button"
+          onClick={() => onChange("")}
+          aria-label={t("clickup.Clear_assignee")}
+          className="rounded p-1 text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-destructive"
+        >
+          <X className="size-3" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/clickup/dialogs/ClickUpTaskDescription.tsx

@@ -0,0 +1,67 @@
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { FileText } from "lucide-react";
+import { cn } from "../../support/utils";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface ClickUpTaskDescriptionProps {
+  value: string;
+  onChange: (value: string) => void;
+  editable?: boolean;
+  placeholder?: string;
+  helperText?: string;
+  maxLength?: number;
+  className?: string;
+}
+
+export const ClickUpTaskDescription: React.FC<ClickUpTaskDescriptionProps> = ({
+  value,
+  onChange,
+  editable = true,
+  placeholder,
+  helperText,
+  maxLength = 12000,
+  className,
+}) => {
+  const { t: tr } = useTranslation("designSystem");
+  return (
+    <div className={cn("cu-task-description", className)}>
+      <label
+        htmlFor="cu-task-description"
+        className="cu-task-description-label"
+      >
+        <FileText className="size-3.5 text-dashboard-primary" />
+        <ThemedText as="span" variant="label" className="text-xs font-bold">
+          {tr("clickup.Description")}
+        </ThemedText>
+      </label>
+
+      <textarea
+        id="cu-task-description"
+        aria-label={tr("clickup.Task_description")}
+        rows={4}
+        maxLength={maxLength}
+        disabled={!editable}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder ?? tr("clickup.Add_description")}
+        className={cn("cu-task-description-input")}
+      />
+
+      {helperText !== "" && (
+        <ThemedText
+          variant="caption"
+          as="p"
+          className="text-[13px] font-normal leading-[19.5px] text-dashboard-muted-foreground"
+        >
+          {helperText ??
+            tr(
+              "clickup.One_project_task_Its_lifecycle_phase_is_separate_from_its_Board_status_Comments_save_independently_from_field_edits",
+            )}
+        </ThemedText>
+      )}
+    </div>
+  );
+};
+
+export default ClickUpTaskDescription;

package/src/clickup/dialogs/ClickUpTaskDialog.tsx

@@ -0,0 +1,187 @@
+import "../task-ui.css";
+import { TaskIcon } from "../common/TaskIcon";
+import { ThemedText } from "../../components/ThemedText";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { Maximize2, Minimize2 } from "lucide-react";
+import { cn } from "../../support/utils";
+import {
+  ClickUpTask,
+  ClickUpComment,
+  ClickUpStatus,
+  ClickUpPhase,
+  ClickUpUser,
+  ClickUpSprint,
+} from "../types";
+import { TaskBreadcrumb } from "../common/TaskBreadcrumb";
+import { ClickUpTaskMain } from "./ClickUpTaskMain";
+import { ClickUpTaskDiscussion } from "./ClickUpTaskDiscussion";
+import { ClickUpTaskActions } from "./ClickUpTaskActions";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/dialog";
+
+export interface ClickUpTaskDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  task: Partial<ClickUpTask>;
+  comments?: ClickUpComment[];
+  statuses?: ClickUpStatus[];
+  phases?: ClickUpPhase[];
+  users?: ClickUpUser[];
+  sprints?: ClickUpSprint[];
+  projectName?: string;
+  spaceName?: string;
+  editable?: boolean;
+  canComment?: boolean;
+  onFieldChange: (field: keyof ClickUpTask, value: any) => void;
+  onSave?: () => boolean | void | Promise<boolean | void>;
+  onDelete?: () => void;
+  onAddComment?: (body: string) => boolean | void | Promise<boolean | void>;
+  onAiAssist?: () => void;
+  className?: string;
+  feedback?: React.ReactNode;
+  extraFields?: React.ReactNode;
+}
+
+export const ClickUpTaskDialog: React.FC<ClickUpTaskDialogProps> = ({
+  open,
+  onOpenChange,
+  task,
+  comments = [],
+  statuses = [],
+  phases = [],
+  users = [],
+  sprints = [],
+  projectName = "Website Redesign",
+  spaceName = "Digital Experience",
+  editable = true,
+  canComment = editable,
+  onFieldChange,
+  onSave,
+  onDelete,
+  onAddComment,
+  onAiAssist,
+  className,
+  feedback,
+  extraFields,
+}) => {
+  const { t: tr } = useTranslation("designSystem");
+  const [isMaximized, setIsMaximized] = React.useState(true);
+  const formId = React.useId();
+  const isExisting = Boolean(task.id);
+  const deleteTask = onDelete
+    ? () => {
+        onDelete();
+        onOpenChange(false);
+      }
+    : undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className={cn(
+          "cu-task-dialog p-0 overflow-hidden bg-dashboard-card border border-dashboard-border shadow-2xl flex flex-col",
+          isMaximized ? "cu-task-dialog-full" : "cu-task-dialog-windowed",
+          className,
+        )}
+      >
+        {/* Topbar */}
+        <DialogHeader className="cu-task-topbar">
+          <DialogTitle className="sr-only">
+            <ThemedText as="span" variant="body">
+              {isExisting
+                ? task.title || tr("clickup.Edit_Task")
+                : tr("clickup.Create_Task")}
+            </ThemedText>
+          </DialogTitle>
+
+          {/* Breadcrumbs */}
+          <TaskBreadcrumb
+            spaceName={spaceName}
+            projectName={projectName}
+            taskId={task.id}
+            taskTitle={task.title}
+          />
+
+          {/* Window actions */}
+          <div className="cu-task-window-actions">
+            <ClickUpTaskActions
+              formId={formId}
+              isExisting={isExisting}
+              editable={editable}
+              hasTitle={Boolean(task.title?.trim())}
+              onDelete={deleteTask}
+            />
+            <button
+              type="button"
+              aria-label={
+                isMaximized
+                  ? tr("clickup.Restore_window")
+                  : tr("clickup.Maximize_window")
+              }
+              onClick={() => setIsMaximized(!isMaximized)}
+              className="p-1 rounded text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary transition-colors"
+            >
+              {isMaximized ? (
+                <Minimize2 className="w-3.5 h-3.5" />
+              ) : (
+                <Maximize2 className="w-3.5 h-3.5" />
+              )}
+            </button>
+
+            <button
+              type="button"
+              aria-label={tr("clickup.Close_task_dialog")}
+              onClick={() => onOpenChange(false)}
+              className="p-1 rounded text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary transition-colors"
+            >
+              <TaskIcon name="close" className="size-[17px]" />
+            </button>
+          </div>
+        </DialogHeader>
+
+        {/* Dual-Pane Body */}
+        <div className="cu-task-dialog-body">
+          {/* Left Pane: Task Details & Form */}
+          <ClickUpTaskMain
+            formId={formId}
+            showActions={false}
+            task={task}
+            isExisting={isExisting}
+            statuses={statuses}
+            phases={phases}
+            users={users}
+            sprints={sprints}
+            editable={editable}
+            onFieldChange={onFieldChange}
+            onSave={async () => {
+              if ((await onSave?.()) !== false) onOpenChange(false);
+            }}
+            onCancel={() => onOpenChange(false)}
+            onDelete={deleteTask}
+            onAiAssist={onAiAssist}
+            feedback={feedback}
+            extraFields={extraFields}
+          />
+
+          {/* Right Pane: Discussion & Comments */}
+          <div className="cu-task-discussion-pane">
+            <ClickUpTaskDiscussion
+              taskId={task.id}
+              comments={comments}
+              canComment={canComment}
+              onAddComment={onAddComment}
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ClickUpTaskDialog;

package/src/clickup/dialogs/ClickUpTaskDiscussion.tsx

@@ -0,0 +1,136 @@
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { MessageSquare } from "lucide-react";
+import { cn } from "../../support/utils";
+import { ClickUpComment } from "../types";
+import { TaskAssigneeAvatar } from "../common/TaskAssigneeAvatar";
+import { ClickUpCommentComposer } from "./ClickUpCommentComposer";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface ClickUpTaskDiscussionProps {
+  comments?: ClickUpComment[];
+  taskId?: string;
+  onAddComment?: (body: string) => boolean | void | Promise<boolean | void>;
+  canComment?: boolean;
+  className?: string;
+}
+
+export const ClickUpTaskDiscussion: React.FC<ClickUpTaskDiscussionProps> = ({
+  comments = [],
+  taskId,
+  onAddComment,
+  canComment = true,
+  className,
+}) => {
+  const { t: tr, i18n } = useTranslation("designSystem");
+  const formatTime = (timeStr?: string) => {
+    if (!timeStr) return "";
+    try {
+      const d = new Date(timeStr);
+      return new Intl.DateTimeFormat(i18n.language, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+      }).format(d);
+    } catch {
+      return timeStr;
+    }
+  };
+
+  return (
+    <aside
+      aria-label={tr("clickup.Task_discussion_and_comments")}
+      className={cn("cu-task-discussion", className)}
+    >
+      {/* Discussion Header */}
+      <div className="cu-task-discussion-header">
+        <div className="flex items-center gap-1.5">
+          <MessageSquare className="size-3.5 text-dashboard-primary" />
+          <ThemedText
+            variant="caption"
+            as="h4"
+            className="text-xs font-semibold text-dashboard-foreground"
+          >
+            {tr("clickup.Activity_Notes")} ({comments.length})
+          </ThemedText>
+        </div>
+      </div>
+
+      {/* Comments List */}
+      <div className="cu-task-discussion-scroll">
+        {comments.map((comment) => (
+          <article
+            key={comment.id}
+            className="cu-task-note text-xs text-dashboard-foreground"
+          >
+            <div className="min-w-0 flex-1 space-y-1">
+              <div className="flex items-center justify-between text-[11px]">
+                <div className="flex min-w-0 items-center gap-2">
+                  <TaskAssigneeAvatar
+                    name={comment.actor_name}
+                    avatarUrl={comment.actor_avatar}
+                    size="xs"
+                  />
+                  <ThemedText
+                    variant="caption"
+                    as="span"
+                    className="font-semibold text-dashboard-foreground"
+                  >
+                    {comment.actor_name}
+                  </ThemedText>
+                </div>
+                <ThemedText
+                  as="time"
+                  variant="caption"
+                  dateTime={comment.created_at}
+                  className="text-[10px] text-dashboard-muted-foreground/70"
+                >
+                  {formatTime(comment.created_at)}
+                </ThemedText>
+              </div>
+              <ThemedText
+                variant="body"
+                as="p"
+                className="text-xs text-dashboard-muted-foreground whitespace-pre-wrap leading-relaxed"
+              >
+                {comment.body}
+              </ThemedText>
+            </div>
+          </article>
+        ))}
+
+        {comments.length === 0 && !taskId && (
+          <div className="cu-task-comment-empty">
+            <ThemedText
+              variant="caption"
+              as="h5"
+              className="font-bold text-dashboard-foreground text-[14px] leading-[22.4px]"
+            >
+              {tr("clickup.Create_the_task_first")}
+            </ThemedText>
+            <ThemedText
+              variant="caption"
+              as="p"
+              className="text-[12px] leading-[19.2px] font-normal text-dashboard-muted-foreground mt-1"
+            >
+              {tr(
+                "clickup.Ask_a_question_share_evidence_or_leave_a_delivery_update",
+              )}
+            </ThemedText>
+          </div>
+        )}
+      </div>
+
+      {/* Composer */}
+      {onAddComment && (
+        <ClickUpCommentComposer
+          disabled={!canComment || !taskId}
+          onSubmit={onAddComment}
+        />
+      )}
+    </aside>
+  );
+};
+
+export default ClickUpTaskDiscussion;