@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/clickup/common/TaskStatusPill.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { cn } from "../../support/utils";
+import { ClickUpStatus } from "../types";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskStatusPillProps {
+  status: ClickUpStatus | string;
+  color?: string;
+  size?: "sm" | "md";
+  interactive?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  className?: string;
+}
+
+export const TaskStatusPill: React.FC<TaskStatusPillProps> = ({
+  status,
+  color,
+  size = "sm",
+  interactive = false,
+  onClick,
+  className,
+}) => {
+  const label =
+    typeof status === "string" ? status : status?.label || "Unknown";
+  const statusColor =
+    color ||
+    (typeof status === "object" && status?.color
+      ? status.color
+      : "var(--color-dashboard-primary)");
+
+  const isInteractive = interactive || Boolean(onClick);
+
+  return (
+    <span
+      role={isInteractive ? "button" : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+      onClick={onClick}
+      onKeyDown={(event) => {
+        if (isInteractive && (event.key === "Enter" || event.key === " ")) {
+          event.preventDefault();
+          event.stopPropagation();
+          event.currentTarget.click();
+        }
+      }}
+      style={{
+        backgroundColor: `color-mix(in srgb, ${statusColor} 16%, transparent)`,
+        color: statusColor,
+        borderColor: `color-mix(in srgb, ${statusColor} 30%, transparent)`,
+      }}
+      className={cn(
+        "inline-flex items-center gap-[5px] rounded-[5px] border-0 transition-colors select-none font-semibold",
+        size === "sm" ? "px-[7px] py-[3px] text-[11px]" : "px-2.5 py-1 text-xs",
+        isInteractive && "cursor-pointer hover:opacity-90 active:scale-95",
+        className,
+      )}
+    >
+      <span
+        className="size-2 rounded-full shrink-0"
+        style={{ backgroundColor: statusColor }}
+      />
+      <ThemedText
+        variant="caption"
+        as="span"
+        className="text-[11px] font-semibold leading-[16.5px] tracking-normal"
+        style={{ color: statusColor }}
+      >
+        {label}
+      </ThemedText>
+    </span>
+  );
+};
+
+export default TaskStatusPill;

package/src/clickup/common/WorkspaceButton.tsx

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+import { Button } from "../../ui/button";
+import { cn } from "../../support/utils";
+
+export function WorkspaceButton({
+  className,
+  variant,
+  ...props
+}: ComponentProps<typeof Button>) {
+  return (
+    <Button
+      {...props}
+      variant={variant}
+      className={cn(
+        "[&_span]:text-inherit",
+        variant === "link" &&
+          "text-dashboard-foreground underline decoration-dashboard-primary underline-offset-4",
+        className,
+      )}
+    />
+  );
+}

package/src/clickup/common/WorkspaceHeader.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { ArrowLeft } from "lucide-react";
+import { ThemedText } from "../../components/ThemedText";
+
+interface WorkspaceHeaderProps {
+  title: string;
+  backLabel?: string;
+  onBack?: () => void;
+  action?: ReactNode;
+}
+
+export function WorkspaceHeader({
+  title,
+  backLabel,
+  onBack,
+  action,
+}: WorkspaceHeaderProps) {
+  return (
+    <header className="flex min-h-14 shrink-0 items-center gap-2 border-b border-dashboard-border px-3">
+      {onBack && (
+        <button
+          type="button"
+          onClick={onBack}
+          aria-label={backLabel}
+          className="rounded-md p-1.5 text-dashboard-muted-foreground hover:bg-dashboard-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-foreground"
+        >
+          <ArrowLeft className="size-4 rtl:rotate-180" />
+        </button>
+      )}
+      <ThemedText
+        as="h2"
+        variant="subheading"
+        className="min-w-0 flex-1 truncate text-dashboard-foreground"
+        title={title}
+      >
+        {title}
+      </ThemedText>
+      {action}
+    </header>
+  );
+}

package/src/clickup/common/WorkspaceMenus.tsx

@@ -0,0 +1,92 @@
+import type { ReactElement } from "react";
+import { MoreHorizontal } from "lucide-react";
+import {
+  ContextMenuAdvanced,
+  ContextMenuAdvancedItem,
+} from "../../components/context menu core/contextMenuAdvanced";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu";
+import { ThemedText } from "../../components/ThemedText";
+import { WorkspaceButton } from "./WorkspaceButton";
+
+export interface WorkspaceMenuAction {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  destructive?: boolean;
+  onSelect: () => void;
+}
+
+export function WorkspaceContextMenu({
+  children,
+  actions,
+}: {
+  children: ReactElement;
+  actions: WorkspaceMenuAction[];
+}) {
+  if (!actions.length) return children;
+  return (
+    <ContextMenuAdvanced
+      menuContent={actions.map((action) => (
+        <ContextMenuAdvancedItem
+          key={action.id}
+          disabled={action.disabled}
+          variant={action.destructive ? "destructive" : "default"}
+          onSelect={action.onSelect}
+        >
+          <ThemedText as="span" variant="body" className="text-inherit">
+            {action.label}
+          </ThemedText>
+        </ContextMenuAdvancedItem>
+      ))}
+    >
+      {children}
+    </ContextMenuAdvanced>
+  );
+}
+
+export function WorkspaceActionMenu({
+  label,
+  actions,
+  className,
+}: {
+  label: string;
+  actions: WorkspaceMenuAction[];
+  className?: string;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label={label}
+        onClick={(event) => event.stopPropagation()}
+        render={
+          <WorkspaceButton variant="ghost" size="icon" className={className} />
+        }
+      >
+        <MoreHorizontal className="size-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="w-max min-w-40"
+        onClick={(event) => event.stopPropagation()}
+      >
+        {actions.map((action) => (
+          <DropdownMenuItem
+            key={action.id}
+            disabled={action.disabled}
+            variant={action.destructive ? "destructive" : "default"}
+            onClick={action.onSelect}
+          >
+            <ThemedText as="span" variant="body" className="text-inherit">
+              {action.label}
+            </ThemedText>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/clickup/common/WorkspaceMessage.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { ThemedText } from "../../components/ThemedText";
+
+export function WorkspaceMessage({
+    title,
+    description,
+    action,
+    error = false,
+}: {
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    error?: boolean;
+}) {
+    return (
+        <div
+            className="flex flex-col gap-3 p-5"
+            role={error ? "alert" : "status"}
+        >
+            <ThemedText
+                as="p"
+                variant="subheading"
+                className="text-dashboard-foreground"
+            >
+                {title}
+            </ThemedText>
+            {description && (
+                <ThemedText
+                    as="p"
+                    variant="body"
+                    className="text-dashboard-muted-foreground"
+                >
+                    {description}
+                </ThemedText>
+            )}
+            {action}
+        </div>
+    );
+}

package/src/clickup/common/WorkspaceMetricStrip.tsx

@@ -0,0 +1,49 @@
+import { ThemedText } from "../../components/ThemedText";
+
+export interface WorkspaceMetric {
+    id: string;
+    label: string;
+    value: string;
+    description: string;
+}
+
+export function WorkspaceMetricStrip({
+    metrics,
+    label,
+}: {
+    metrics: WorkspaceMetric[];
+    label: string;
+}) {
+    return (
+        <dl
+            aria-label={label}
+            className="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-dashboard-border bg-dashboard-border lg:grid-cols-4"
+        >
+            {metrics.map((metric) => (
+                <div key={metric.id} className="min-w-0 bg-dashboard-card p-4">
+                    <ThemedText
+                        as="dt"
+                        variant="caption"
+                        className="text-dashboard-muted-foreground"
+                    >
+                        {metric.label}
+                    </ThemedText>
+                    <ThemedText
+                        as="dd"
+                        variant="metric"
+                        className="my-2 text-2xl font-semibold tabular-nums"
+                    >
+                        {metric.value}
+                    </ThemedText>
+                    <ThemedText
+                        as="dd"
+                        variant="caption"
+                        className="text-dashboard-muted-foreground"
+                    >
+                        {metric.description}
+                    </ThemedText>
+                </div>
+            ))}
+        </dl>
+    );
+}

package/src/clickup/common/WorkspacePanel.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { Card } from "../../ui/card";
+import { ThemedText } from "../../components/ThemedText";
+
+export function WorkspacePanel({
+    title,
+    action,
+    children,
+    className,
+}: {
+    title: string;
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}) {
+    return (
+        <Card className={className}>
+            <div className="flex flex-wrap items-center justify-between gap-2 border-b border-dashboard-border p-4">
+                <ThemedText as="h3" variant="subheading" className="text-sm">
+                    {title}
+                </ThemedText>
+                {action}
+            </div>
+            <div className="p-4">{children}</div>
+        </Card>
+    );
+}

package/src/clickup/common/WorkspaceSelect.tsx

@@ -0,0 +1,173 @@
+import {
+  Children,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  useLayoutEffect,
+  useId,
+  useRef,
+  useState,
+  type ReactNode,
+  type SelectHTMLAttributes,
+} from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../support/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu";
+import { ThemedText } from "../../components/ThemedText";
+
+type Choice = { value: string; label: ReactNode; disabled?: boolean };
+function choicesFrom(children: ReactNode, disabled = false): Choice[] {
+  return Children.toArray(children).flatMap((child) => {
+    if (
+      !isValidElement<{
+        children?: ReactNode;
+        value?: string | number;
+        disabled?: boolean;
+      }>(child)
+    )
+      return [];
+    if (child.type === Fragment || child.type === "optgroup")
+      return choicesFrom(
+        child.props.children,
+        disabled || child.props.disabled,
+      );
+    if (child.type !== "option") return [];
+    return [
+      {
+        value: String(child.props.value ?? child.props.children ?? ""),
+        label: child.props.children,
+        disabled: disabled || child.props.disabled,
+      },
+    ];
+  });
+}
+
+/** The native control is only a form bridge for validation, FormData and registered refs.
+ * All visible interaction and keyboard navigation use the shared dropdown menu.
+ */
+export const WorkspaceSelect = forwardRef<
+  HTMLSelectElement,
+  SelectHTMLAttributes<HTMLSelectElement>
+>(function WorkspaceSelect(
+  { className, children, id, onChange, onInvalid, ...props },
+  forwardedRef,
+) {
+  const native = useRef<HTMLSelectElement | null>(null);
+  const trigger = useRef<HTMLButtonElement | null>(null);
+  const choices = choicesFrom(children);
+  const errorId = useId();
+  const [validationMessage, setValidationMessage] = useState("");
+  const [selection, setSelection] = useState(
+    String(props.value ?? props.defaultValue ?? choices[0]?.value ?? ""),
+  );
+  useLayoutEffect(() => {
+    if (native.current) setSelection(native.current.value);
+  });
+  const value = String(props.value ?? selection);
+  const choose = (next: string) => {
+    if (!native.current) return;
+    native.current.value = next;
+    native.current.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+  return (
+    <>
+      <select
+        {...props}
+        ref={(element) => {
+          native.current = element;
+          if (typeof forwardedRef === "function") forwardedRef(element);
+          else if (forwardedRef) forwardedRef.current = element;
+        }}
+        hidden
+        aria-hidden="true"
+        aria-label={undefined}
+        aria-labelledby={undefined}
+        tabIndex={-1}
+        onChange={(event) => {
+          setValidationMessage("");
+          setSelection(event.target.value);
+          onChange?.(event);
+        }}
+        onInvalid={(event) => {
+          event.preventDefault();
+          setValidationMessage(event.currentTarget.validationMessage);
+          trigger.current?.focus();
+          onInvalid?.(event);
+        }}
+      >
+        {children}
+      </select>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          ref={trigger}
+          id={id}
+          disabled={props.disabled}
+          aria-label={props["aria-label"]}
+          aria-labelledby={props["aria-labelledby"]}
+          aria-describedby={
+            [props["aria-describedby"], validationMessage ? errorId : undefined]
+              .filter(Boolean)
+              .join(" ") || undefined
+          }
+          aria-invalid={validationMessage ? true : props["aria-invalid"]}
+          onBlur={() =>
+            native.current?.dispatchEvent(
+              new FocusEvent("focusout", { bubbles: true }),
+            )
+          }
+          className={cn(
+            "cu-workspace-select flex h-8 min-w-0 items-center justify-between gap-2 rounded-md border border-dashboard-border bg-dashboard-card px-2 text-xs text-dashboard-foreground outline-none hover:bg-dashboard-secondary focus-visible:ring-2 focus-visible:ring-dashboard-primary disabled:opacity-50",
+            className,
+          )}
+        >
+          <ThemedText
+            as="span"
+            variant="body"
+            className="truncate text-xs text-inherit"
+          >
+            {choices.find((choice) => choice.value === value)?.label ?? ""}
+          </ThemedText>
+          <ChevronDown className="size-3 shrink-0" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="min-w-40">
+          <DropdownMenuRadioGroup value={value} onValueChange={choose}>
+            {choices.map((choice) => (
+              <DropdownMenuRadioItem
+                key={choice.value}
+                value={choice.value}
+                disabled={choice.disabled}
+                closeOnClick
+                className="py-1.5 text-xs hover:bg-dashboard-secondary"
+              >
+                <ThemedText
+                  as="span"
+                  variant="body"
+                  className="text-xs text-inherit"
+                >
+                  {choice.label}
+                </ThemedText>
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {validationMessage && (
+        <ThemedText
+          as="span"
+          id={errorId}
+          role="alert"
+          variant="caption"
+          className="text-dashboard-destructive"
+        >
+          {validationMessage}
+        </ThemedText>
+      )}
+    </>
+  );
+});

package/src/clickup/common/WorkspaceTable.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+import { ThemedText } from "../../components/ThemedText";
+import {
+  WorkspaceContextMenu,
+  type WorkspaceMenuAction,
+} from "./WorkspaceMenus";
+export interface WorkspaceColumn<T> {
+  id: string;
+  label: string;
+  cell: (row: T) => ReactNode;
+}
+export function WorkspaceTable<T extends { id: string }>({
+  rows,
+  columns,
+  label,
+  emptyText,
+  rowActions,
+}: {
+  rows: T[];
+  columns: WorkspaceColumn<T>[];
+  label: string;
+  emptyText: string;
+  rowActions?: (row: T) => WorkspaceMenuAction[];
+}) {
+  return (
+    <div className="max-w-full overflow-x-auto rounded-lg border border-dashboard-border bg-dashboard-card">
+      <table className="w-full text-start text-xs text-dashboard-foreground">
+        <caption className="sr-only">{label}</caption>
+        <thead className="border-b border-dashboard-border bg-dashboard-secondary/40">
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column.id}
+                scope="col"
+                className="whitespace-nowrap px-3 py-2 text-start"
+              >
+                <ThemedText as="span" variant="caption">
+                  {column.label}
+                </ThemedText>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-dashboard-border">
+          {rows.map((row) => (
+            <WorkspaceContextMenu
+              key={row.id}
+              actions={rowActions?.(row) ?? []}
+            >
+              <tr className="hover:bg-dashboard-secondary/30">
+                {columns.map((column) => (
+                  <td key={column.id} className="max-w-sm px-3 py-3 align-top">
+                    <ThemedText
+                      as="span"
+                      variant="body"
+                      className="text-xs text-dashboard-foreground"
+                    >
+                      {column.cell(row)}
+                    </ThemedText>
+                  </td>
+                ))}
+              </tr>
+            </WorkspaceContextMenu>
+          ))}
+        </tbody>
+      </table>
+      {!rows.length && (
+        <ThemedText
+          as="p"
+          variant="body"
+          className="p-8 text-center text-dashboard-muted-foreground"
+        >
+          {emptyText}
+        </ThemedText>
+      )}
+    </div>
+  );
+}

package/src/clickup/dialogs/ClickUpCommentComposer.tsx

@@ -0,0 +1,93 @@
+import { useTranslation } from "react-i18next";
+import React, { useState } from "react";
+import { Send } from "lucide-react";
+import { cn } from "../../support/utils";
+import { Button } from "../../components/button";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface ClickUpCommentComposerProps {
+  onSubmit: (body: string) => boolean | void | Promise<boolean | void>;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export const ClickUpCommentComposer: React.FC<ClickUpCommentComposerProps> = ({
+  onSubmit,
+  disabled = false,
+  placeholder,
+  className,
+}) => {
+  const { t: tr } = useTranslation("designSystem");
+  const [body, setBody] = useState("");
+  const [pending, setPending] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!body.trim() || disabled || pending) return;
+    setPending(true);
+    try {
+      if ((await onSubmit(body.trim())) !== false) setBody("");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={cn("cu-task-composer", className)}>
+      <div className="cu-task-composer-inner">
+        <textarea
+          id="cu-comment-body"
+          aria-label={tr("clickup.Write_a_task_comment")}
+          rows={3}
+          maxLength={3000}
+          disabled={disabled || pending}
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            disabled
+              ? tr("clickup.Comments_disabled")
+              : (placeholder ?? tr("clickup.Write_a_comment"))
+          }
+          className="cu-task-comment-input"
+        />
+
+        <div className="cu-task-composer-tools">
+          <ThemedText
+            as="span"
+            variant="caption"
+            className="text-[11px] font-normal text-dashboard-muted-foreground"
+          >
+            {tr("clickup.Ctrl_Enter_to_send")}
+          </ThemedText>
+
+          <Button
+            type="submit"
+            size="xs"
+            disabled={disabled || pending || !body.trim()}
+            aria-label={tr("clickup.Send_comment")}
+            className="cu-task-send"
+          >
+            <Send className="size-3" />
+            <ThemedText
+              as="span"
+              variant="body"
+              className="text-xs font-semibold text-inherit"
+            >
+              {tr("clickup.Send")}
+            </ThemedText>
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default ClickUpCommentComposer;