@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/clickup/common/InlineNameTab.tsx

@@ -0,0 +1,122 @@
+import { useRef, useState } from "react";
+import { Loader2, X } from "lucide-react";
+import { ThemedText } from "../../components/ThemedText";
+
+interface InlineNameTabProps {
+  label: string;
+  cancelLabel: string;
+  savingLabel: string;
+  requiredMessage: string;
+  saveErrorMessage: string;
+  onSave: (name: string) => Promise<void>;
+  onCancel: () => void;
+}
+
+export function InlineNameTab({
+  label,
+  cancelLabel,
+  savingLabel,
+  requiredMessage,
+  saveErrorMessage,
+  onSave,
+  onCancel,
+}: InlineNameTabProps) {
+  const [name, setName] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  const submitting = useRef(false);
+  const input = useRef<HTMLInputElement>(null);
+
+  const saveName = async () => {
+    if (submitting.current) return;
+    if (!name.trim()) {
+      setError(requiredMessage);
+      return;
+    }
+    submitting.current = true;
+    setPending(true);
+    setError("");
+    try {
+      await onSave(name.trim());
+    } catch {
+      // Keep the draft editable when persistence fails (including unavailable browser storage).
+      setError(saveErrorMessage);
+      requestAnimationFrame(() => input.current?.focus());
+    } finally {
+      submitting.current = false;
+      setPending(false);
+    }
+  };
+
+  return (
+    <div
+      className="rounded-md border border-dashboard-border bg-dashboard-secondary p-2"
+      aria-busy={pending}
+    >
+      <label className="flex flex-col gap-1">
+        <ThemedText
+          as="span"
+          variant="caption"
+          className="text-dashboard-muted-foreground"
+        >
+          {label}
+        </ThemedText>
+        <div className="flex items-center gap-1">
+          <input
+            ref={input}
+            autoFocus
+            aria-label={label}
+            value={name}
+            readOnly={pending}
+            maxLength={200}
+            aria-invalid={!!error}
+            aria-describedby={error ? "project-name-error" : undefined}
+            onChange={(event) => {
+              setName(event.target.value);
+              setError("");
+            }}
+            onKeyDown={(event) => {
+              if (event.nativeEvent.isComposing || event.keyCode === 229)
+                return;
+              if (event.key === "Enter") {
+                event.preventDefault();
+                void saveName();
+              }
+              if (event.key === "Escape" && !submitting.current) {
+                event.preventDefault();
+                onCancel();
+              }
+            }}
+            className="min-w-0 flex-1 rounded bg-dashboard-background px-2 py-1.5 text-sm text-dashboard-foreground outline-none focus-visible:ring-2 focus-visible:ring-dashboard-foreground"
+          />
+          {pending ? (
+            <Loader2
+              className="size-4 animate-spin text-dashboard-foreground"
+              aria-label={savingLabel}
+            />
+          ) : (
+            <button
+              type="button"
+              onClick={onCancel}
+              aria-label={cancelLabel}
+              className="rounded p-1 hover:bg-dashboard-secondary focus-visible:outline focus-visible:outline-dashboard-foreground"
+            >
+              <X className="size-4" />
+            </button>
+          )}
+        </div>
+      </label>
+      {error && (
+        <ThemedText
+          id="project-name-error"
+          as="p"
+          variant="caption"
+          role="alert"
+          className="mt-2 text-dashboard-destructive"
+        >
+          {error}
+        </ThemedText>
+      )}
+    </div>
+  );
+}

package/src/clickup/common/TaskAssigneeAvatar.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { User as UserIcon } from "lucide-react";
+import { cn } from "../../support/utils";
+import { ClickUpUser } from "../types";
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar";
+import { ThemedText } from "../../components/ThemedText";
+import { Tooltip } from "../../components/Tooltip";
+
+export interface TaskAssigneeAvatarProps {
+  user?: ClickUpUser | null;
+  name?: string;
+  avatarUrl?: string;
+  size?: "xs" | "sm" | "md";
+  showName?: boolean;
+  interactive?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  className?: string;
+}
+
+export const TaskAssigneeAvatar: React.FC<TaskAssigneeAvatarProps> = ({
+  user,
+  name,
+  avatarUrl,
+  size = "sm",
+  showName = false,
+  interactive = false,
+  onClick,
+  className,
+}) => {
+  const displayName = user?.name || name || "";
+  const displayAvatar = user?.avatar || avatarUrl;
+
+  const initials = displayName
+    ? displayName
+        .split(" ")
+        .map((p) => p[0])
+        .filter(Boolean)
+        .slice(0, 2)
+        .join("")
+        .toUpperCase()
+    : "";
+
+  const sizeClasses = {
+    xs: "w-5 h-5 text-[9px]",
+    sm: "size-[27px] text-[10px]",
+    md: "w-8 h-8 text-xs",
+  }[size];
+
+  const avatarContent = displayName ? (
+    <div
+      role={interactive || onClick ? "button" : undefined}
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center gap-1.5 shrink-0 select-none",
+        (interactive || onClick) && "cursor-pointer hover:opacity-90",
+        className,
+      )}
+    >
+      <Avatar
+        size="default"
+        className={cn(sizeClasses, "border border-dashboard-border")}
+      >
+        {displayAvatar && <AvatarImage src={displayAvatar} alt={displayName} />}
+        <AvatarFallback className="bg-dashboard-primary/15 text-dashboard-primary font-semibold">
+          <ThemedText
+            as="span"
+            variant="caption"
+            className="text-[10px] font-semibold leading-[15px] text-inherit"
+          >
+            {initials || "U"}
+          </ThemedText>
+        </AvatarFallback>
+      </Avatar>
+      {showName && (
+        <ThemedText
+          variant="caption"
+          as="span"
+          truncate
+          className="text-dashboard-foreground font-medium max-w-[120px]"
+        >
+          {displayName}
+        </ThemedText>
+      )}
+    </div>
+  ) : (
+    <div
+      role={interactive || onClick ? "button" : undefined}
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center gap-1.5 shrink-0 text-dashboard-muted-foreground",
+        (interactive || onClick) &&
+          "cursor-pointer hover:text-dashboard-foreground",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          sizeClasses,
+          "rounded-full border border-dashed border-dashboard-border flex items-center justify-center bg-dashboard-card/40",
+        )}
+      >
+        <UserIcon className="w-3 h-3 opacity-60" />
+      </div>
+      {showName && (
+        <ThemedText
+          variant="caption"
+          as="span"
+          className="text-dashboard-muted-foreground italic"
+        >
+          Unassigned
+        </ThemedText>
+      )}
+    </div>
+  );
+
+  if (displayName) {
+    return (
+      <Tooltip content={displayName} placement="top">
+        {avatarContent}
+      </Tooltip>
+    );
+  }
+
+  return avatarContent;
+};
+
+export default TaskAssigneeAvatar;

package/src/clickup/common/TaskBreadcrumb.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { CheckSquare } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { cn } from "../../support/utils";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskBreadcrumbProps {
+  spaceIconText?: string;
+  spaceName?: string;
+  projectName?: string;
+  taskId?: string;
+  taskTitle?: string;
+  className?: string;
+}
+
+export const TaskBreadcrumb: React.FC<TaskBreadcrumbProps> = ({
+  spaceName = "Digital Experience",
+  projectName = "Website Redesign",
+  taskId,
+  taskTitle,
+  className,
+}) => {
+  const { t } = useTranslation("designSystem");
+  return (
+    <nav
+      aria-label="Task breadcrumb"
+      className={cn(
+        "cu-task-breadcrumb flex items-center gap-1 min-w-0 select-none",
+        className,
+      )}
+    >
+      <CheckSquare className="size-4 shrink-0 text-dashboard-primary" />
+
+      {/* Space Name */}
+      <ThemedText
+        variant="caption"
+        as="span"
+        truncate
+        className="text-dashboard-foreground font-semibold"
+      >
+        {spaceName || t("clickup.Task_workspace")}
+      </ThemedText>
+
+      {/* Separator */}
+      {projectName && (
+        <ThemedText
+          as="span"
+          variant="caption"
+          className="text-dashboard-muted-foreground shrink-0"
+        >
+          /
+        </ThemedText>
+      )}
+
+      {/* Project Name */}
+      {projectName && (
+        <ThemedText
+          variant="caption"
+          as="span"
+          truncate
+          className="text-dashboard-muted-foreground max-w-50"
+        >
+          {projectName}
+        </ThemedText>
+      )}
+
+      {/* Task ID / Title */}
+      {(taskId || taskTitle) && (
+        <>
+          <ThemedText
+            as="span"
+            variant="caption"
+            className="text-dashboard-muted-foreground shrink-0"
+          >
+            /
+          </ThemedText>
+          <ThemedText
+            variant="caption"
+            as="span"
+            truncate
+            className="text-dashboard-foreground font-bold font-mono"
+          >
+            {taskId ? `#${taskId}` : taskTitle}
+          </ThemedText>
+        </>
+      )}
+    </nav>
+  );
+};
+
+export default TaskBreadcrumb;

package/src/clickup/common/TaskCheck.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { TaskIcon } from "./TaskIcon";
+import { cn } from "../../support/utils";
+
+export interface TaskCheckProps {
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+  ariaLabel?: string;
+  className?: string;
+}
+
+export const TaskCheck: React.FC<TaskCheckProps> = ({
+  checked = false,
+  disabled = false,
+  onChange,
+  ariaLabel = "Toggle task completion",
+  className,
+}) => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!disabled && onChange) {
+      onChange(!checked);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={handleClick}
+      className={cn(
+        "size-[14px] rounded-full border flex items-center justify-center transition-colors shrink-0",
+        "focus:outline-none focus:ring-1 focus:ring-dashboard-primary focus:ring-offset-1 focus:ring-offset-dashboard-background",
+        checked
+          ? "bg-dashboard-primary border-dashboard-primary text-dashboard-primary-foreground"
+          : "border-dashboard-border bg-dashboard-card/50 hover:border-dashboard-primary/70 text-transparent",
+        disabled &&
+          "opacity-50 cursor-not-allowed hover:border-dashboard-border",
+        className,
+      )}
+    >
+      {checked && <TaskIcon name="check" className="size-[10px]" />}
+    </button>
+  );
+};
+
+export default TaskCheck;

package/src/clickup/common/TaskContextMenu.tsx

@@ -0,0 +1,42 @@
+import type { ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+import type { ClickUpTask } from "../types";
+import {
+  WorkspaceContextMenu,
+  type WorkspaceMenuAction,
+} from "./WorkspaceMenus";
+
+export function TaskContextMenu({
+  children,
+  task,
+  onOpen,
+  onToggleComplete,
+  completed,
+  canEdit = true,
+}: {
+  children: ReactElement;
+  task: ClickUpTask;
+  onOpen?: (task: ClickUpTask) => void;
+  onToggleComplete?: (task: ClickUpTask, checked: boolean) => void;
+  completed?: boolean;
+  canEdit?: boolean;
+}) {
+  const { t } = useTranslation("designSystem");
+  const actions: WorkspaceMenuAction[] = [];
+  if (onOpen)
+    actions.push({
+      id: "open",
+      label: t("clickup.Open_task"),
+      onSelect: () => onOpen(task),
+    });
+  if (onToggleComplete)
+    actions.push({
+      id: "complete",
+      label: t(completed ? "clickup.Mark_incomplete" : "clickup.Mark_complete"),
+      disabled: !canEdit,
+      onSelect: () => onToggleComplete(task, !completed),
+    });
+  return (
+    <WorkspaceContextMenu actions={actions}>{children}</WorkspaceContextMenu>
+  );
+}

package/src/clickup/common/TaskIcon.tsx

@@ -0,0 +1,145 @@
+import type { SVGProps } from "react";
+import { cn } from "../../support/utils";
+
+// SVG paths from website-redesign-lifecycle-backend-handoff.html's icon registry.
+const paths = {
+  search: (
+    <>
+      <circle cx="10.5" cy="10.5" r="6.5" />
+      <path d="m16 16 4 4" />
+    </>
+  ),
+  plus: (
+    <>
+      <path d="M12 5v14M5 12h14" />
+    </>
+  ),
+  close: (
+    <>
+      <path d="m6 6 12 12M6 18 18 6" />
+    </>
+  ),
+  chevron: (
+    <>
+      <path d="m9 5 7 7-7 7" />
+    </>
+  ),
+  down: (
+    <>
+      <path d="m6 9 6 6 6-6" />
+    </>
+  ),
+  list: (
+    <>
+      <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
+    </>
+  ),
+  board: (
+    <>
+      <rect x="3" y="4" width="5" height="16" rx="1" />
+      <rect x="10" y="4" width="5" height="11" rx="1" />
+      <rect x="17" y="4" width="5" height="14" rx="1" />
+    </>
+  ),
+  overview: (
+    <>
+      <rect x="3" y="3" width="7" height="8" rx="1" />
+      <rect x="14" y="3" width="7" height="5" rx="1" />
+      <rect x="3" y="15" width="7" height="6" rx="1" />
+      <rect x="14" y="12" width="7" height="9" rx="1" />
+    </>
+  ),
+  calendar: (
+    <>
+      <rect x="3" y="5" width="18" height="16" rx="2" />
+      <path d="M7 3v4m10-4v4M3 11h18m-13 4h.01M12 15h.01M16 15h.01" />
+    </>
+  ),
+  timeline: (
+    <>
+      <path d="M4 3v18M4 6h12M4 12h8m-8 6h16" />
+    </>
+  ),
+  users: (
+    <>
+      <circle cx="9" cy="8" r="3" />
+      <path d="M3 21v-3a6 6 0 0 1 12 0v3m1-16a3 3 0 0 1 0 6m2 4a5 5 0 0 1 3 5" />
+    </>
+  ),
+  activity: (
+    <>
+      <path d="M3 12h4l3-8 4 16 3-8h4" />
+    </>
+  ),
+  flag: (
+    <>
+      <path d="M5 21V4c5-4 9 4 14 0v10c-5 4-9-4-14 0" />
+    </>
+  ),
+  more: (
+    <>
+      <circle cx="5" cy="12" r="1" />
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+    </>
+  ),
+  check: (
+    <>
+      <path d="m5 12 4 4L19 6" />
+    </>
+  ),
+  folder: (
+    <>
+      <path d="M3 7V4h6l2 3h10v13H3V7Z" />
+    </>
+  ),
+  clock: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5l3 2" />
+    </>
+  ),
+  send: (
+    <>
+      <path d="m3 3 18 9-18 9 4-9-4-9Zm4 9h14" />
+    </>
+  ),
+  back: (
+    <>
+      <path d="M19 12H5m6-6-6 6 6 6" />
+    </>
+  ),
+  arrow: (
+    <>
+      <path d="M5 12h14m-6-6 6 6-6 6" />
+    </>
+  ),
+  comment: (
+    <>
+      <path d="M21 4H3v14h5l4 4v-4h9V4Z" />
+      <path d="M7 9h10M7 13h7" />
+    </>
+  ),
+};
+export type TaskIconName = keyof typeof paths;
+export function TaskIcon({
+  name,
+  className,
+  ...props
+}: SVGProps<SVGSVGElement> & { name: TaskIconName }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={cn("size-[17px] shrink-0", className)}
+      {...props}
+    >
+      {paths[name]}
+    </svg>
+  );
+}

package/src/clickup/common/TaskPriorityBadge.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { TaskIcon } from "./TaskIcon";
+import { cn } from "../../support/utils";
+import { ClickUpPriority } from "../types";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskPriorityBadgeProps {
+  priority?: ClickUpPriority | string;
+  showLabel?: boolean;
+  size?: "sm" | "md";
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}
+
+export const TaskPriorityBadge: React.FC<TaskPriorityBadgeProps> = ({
+  priority = "Normal",
+  showLabel = true,
+  size = "sm",
+  className,
+  onClick,
+}) => {
+  const normPriority =
+    (typeof priority === "string" ? priority.trim() : "Normal") || "Normal";
+  const isInteractive = Boolean(onClick);
+
+  return (
+    <span
+      role={isInteractive ? "button" : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center gap-1.5 transition-colors select-none text-dashboard-muted-foreground",
+        size === "sm" ? "text-[11px]" : "text-xs",
+        isInteractive && "cursor-pointer hover:opacity-90 active:scale-95",
+        className,
+      )}
+    >
+      {!showLabel && <TaskIcon name="flag" className="size-[13px]" />}
+      {showLabel && (
+        <ThemedText
+          variant="caption"
+          as="span"
+          className="text-[11px] font-normal leading-[16.5px] text-inherit"
+        >
+          {normPriority}
+        </ThemedText>
+      )}
+    </span>
+  );
+};
+
+export default TaskPriorityBadge;

package/src/clickup/common/TaskRowActionMenu.tsx

@@ -0,0 +1,43 @@
+import type { MouseEvent } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu";
+import { ThemedText } from "../../components/ThemedText";
+import { TaskIcon } from "./TaskIcon";
+import type { ClickUpTask } from "../types";
+
+export function TaskRowActionMenu({
+  task,
+  onAction,
+}: {
+  task: ClickUpTask;
+  onAction: (task: ClickUpTask, event: MouseEvent) => void;
+}) {
+  const { t } = useTranslation("designSystem");
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label={`${t("clickup.Open_task")}: ${task.title}`}
+        onClick={(event) => event.stopPropagation()}
+        className="cu-task-row-action rounded hover:bg-dashboard-secondary focus-visible:opacity-100 group-hover:opacity-100"
+      >
+        <TaskIcon name="more" className="size-[14px]" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="w-max min-w-40"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <DropdownMenuItem onClick={(event) => onAction(task, event)}>
+          <ThemedText as="span" variant="body" className="text-inherit">
+            {t("clickup.Open_task")}
+          </ThemedText>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}