@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/clickup/toolbar/TaskToolbar.tsx

@@ -0,0 +1,130 @@
+import { WorkspaceSelect } from "../common/WorkspaceSelect";
+import { useTranslation } from "react-i18next";
+import { TaskIcon } from "../common/TaskIcon";
+import "../task-ui.css";
+import React from "react";
+import { cn } from "../../support/utils";
+import { ClickUpStatus, ClickUpPhase } from "../types";
+import { Button } from "../../components/button";
+import { Input } from "../../components/input";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskToolbarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  statusFilter?: string;
+  onStatusFilterChange?: (statusId: string) => void;
+  statuses?: ClickUpStatus[];
+  phaseFilter?: string;
+  onPhaseFilterChange?: (phaseId: string) => void;
+  phases?: ClickUpPhase[];
+  onClearFilters?: () => void;
+  onAddTask?: () => void;
+  canEdit?: boolean;
+  className?: string;
+  actions?: React.ReactNode;
+}
+
+export const TaskToolbar: React.FC<TaskToolbarProps> = ({
+  searchQuery,
+  onSearchChange,
+  statusFilter = "",
+  onStatusFilterChange,
+  statuses = [],
+  phaseFilter = "",
+  onPhaseFilterChange,
+  phases = [],
+  onClearFilters,
+  onAddTask,
+  canEdit = true,
+  className,
+  actions,
+}) => {
+  const { t } = useTranslation("designSystem");
+  const hasActiveFilters = Boolean(searchQuery || statusFilter || phaseFilter);
+
+  return (
+    <div className={cn("cu-task-toolbar", className)}>
+      {statuses.length > 0 && onStatusFilterChange && (
+        <WorkspaceSelect
+          id="task-toolbar-status-filter"
+          aria-label={t("clickup.Filter_by_status")}
+          value={statusFilter}
+          onChange={(e) => onStatusFilterChange(e.target.value)}
+        >
+          <option value="">{t("clickup.All_statuses")}</option>
+          {statuses.map((status) => (
+            <option key={status.id} value={status.id}>
+              {status.label}
+            </option>
+          ))}
+        </WorkspaceSelect>
+      )}
+      {phases.length > 0 && onPhaseFilterChange && (
+        <WorkspaceSelect
+          id="task-toolbar-phase-filter"
+          aria-label={t("clickup.Filter_by_phase")}
+          value={phaseFilter}
+          onChange={(e) => onPhaseFilterChange(e.target.value)}
+        >
+          <option value="">{t("clickup.All_phases")}</option>
+          {phases.map((phase) => (
+            <option key={phase.id} value={phase.id}>
+              {phase.name}
+            </option>
+          ))}
+        </WorkspaceSelect>
+      )}
+      <div className="cu-task-toolbar-search">
+        <TaskIcon
+          name="search"
+          className="size-[13px] text-dashboard-muted-foreground"
+        />
+        <Input
+          id="task-toolbar-search"
+          className="bg-transparent"
+          aria-label={t("clickup.Search_tasks")}
+          type="search"
+          placeholder={t("clickup.Search_tasks")}
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+        />
+      </div>
+      {hasActiveFilters && onClearFilters && (
+        <Button
+          variant="outline"
+          size="xs"
+          onClick={onClearFilters}
+          className="cu-task-toolbar-button"
+        >
+          <ThemedText
+            as="span"
+            variant="body"
+            className="text-[11px] font-normal text-inherit"
+          >
+            {t("clickup.Clear")}
+          </ThemedText>
+        </Button>
+      )}
+      {actions}
+      {onAddTask && (
+        <Button
+          disabled={!canEdit}
+          onClick={onAddTask}
+          size="sm"
+          className="gap-2"
+        >
+          <TaskIcon name="plus" className="size-[13px]" />
+          <ThemedText
+            as="span"
+            variant="body"
+            className="text-[12px] font-semibold text-inherit"
+          >
+            {t("clickup.Add_task")}
+          </ThemedText>
+        </Button>
+      )}
+    </div>
+  );
+};
+export default TaskToolbar;

package/src/clickup/toolbar/TaskViewPicker.tsx

@@ -0,0 +1,148 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+} from "../../components/dropdown-menu";
+import { ThemedText } from "../../components/ThemedText";
+import { TaskIcon, type TaskIconName } from "../common/TaskIcon";
+import { WorkspaceButton } from "../common/WorkspaceButton";
+import type { ClickUpViewType } from "../types";
+import "../task-ui.css";
+
+export interface TaskViewPickerProps {
+  onSelect: (type: ClickUpViewType) => void;
+  disabled?: boolean;
+}
+
+const groups: {
+  label: string;
+  views: { type: ClickUpViewType; icon: TaskIconName }[];
+}[] = [
+  {
+    label: "Popular",
+    views: [
+      { type: "list", icon: "list" },
+      { type: "board", icon: "board" },
+      { type: "calendar", icon: "calendar" },
+      { type: "gantt", icon: "timeline" },
+    ],
+  },
+  {
+    label: "Data_reporting",
+    views: [
+      { type: "table", icon: "overview" },
+      { type: "activity", icon: "activity" },
+    ],
+  },
+];
+
+/** Chooses a view type; project naming, persistence and permissions stay with the caller. */
+export function TaskViewPicker({ onSelect, disabled }: TaskViewPickerProps) {
+  const { t } = useTranslation("designSystem");
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={(value) => {
+        setOpen(value);
+        if (value) setQuery("");
+      }}
+    >
+      <DropdownMenuTrigger
+        disabled={disabled}
+        render={
+          <WorkspaceButton variant="outline" size="sm" className="gap-[5px]" />
+        }
+      >
+        <TaskIcon name="plus" className="size-[13px]" />
+        <ThemedText
+          as="span"
+          variant="body"
+          className="text-[11px] font-normal text-inherit"
+        >
+          {t("clickup.View")}
+        </ThemedText>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="start"
+        sideOffset={6}
+        className="cu-task-view-picker"
+      >
+        <label className="cu-task-view-search">
+          <input
+            autoFocus
+            type="search"
+            aria-label={t("clickup.Find_view")}
+            placeholder={t("clickup.Find_view")}
+            value={query}
+            onKeyDown={(event) => {
+              if (
+                !["Escape", "Tab", "ArrowDown", "ArrowUp"].includes(event.key)
+              )
+                event.stopPropagation();
+            }}
+            onChange={(event) => setQuery(event.target.value)}
+          />
+          <TaskIcon name="search" />
+        </label>
+        <div className="cu-task-view-options">
+          {groups.map((group) => (
+            <DropdownMenuGroup key={group.label}>
+              <DropdownMenuLabel>
+                <ThemedText
+                  as="h3"
+                  variant="caption"
+                  className="cu-task-view-group-label"
+                >
+                  {t(`clickup.${group.label}`)}
+                </ThemedText>
+              </DropdownMenuLabel>
+              <div className="grid grid-cols-2 gap-x-3 gap-y-0.5">
+                {group.views
+                  .filter((view) =>
+                    t(`clickup.view_${view.type}`)
+                      .toLocaleLowerCase()
+                      .includes(query.toLocaleLowerCase()),
+                  )
+                  .map((view) => (
+                    <DropdownMenuItem
+                      key={view.type}
+                      className="cu-task-view-option hover:bg-dashboard-secondary"
+                      onClick={() => {
+                        onSelect(view.type);
+                        setOpen(false);
+                      }}
+                    >
+                      <span className="flex size-[23px] items-center justify-center rounded-[5px] bg-dashboard-primary text-dashboard-primary-foreground">
+                        <TaskIcon name={view.icon} />
+                      </span>
+                      <ThemedText
+                        as="span"
+                        variant="body"
+                        className="text-[12px] leading-[18px] font-semibold text-inherit"
+                      >
+                        {t(`clickup.view_${view.type}`)}
+                      </ThemedText>
+                    </DropdownMenuItem>
+                  ))}
+              </div>
+            </DropdownMenuGroup>
+          ))}
+        </div>
+        <ThemedText
+          as="p"
+          variant="caption"
+          className="cu-task-view-picker-foot"
+        >
+          {t("clickup.View_project_scope")}
+        </ThemedText>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/clickup/toolbar/TaskViewSwitcher.tsx

@@ -0,0 +1,129 @@
+import { TaskIcon } from "../common/TaskIcon";
+import "../task-ui.css";
+import React from "react";
+import { cn } from "../../support/utils";
+import { ClickUpViewType, ClickUpViewOption } from "../types";
+import { ThemedText } from "../../components/ThemedText";
+
+export interface TaskViewSwitcherProps {
+  activeView: ClickUpViewType;
+  onViewChange: (view: ClickUpViewType) => void;
+  views?: ClickUpViewOption[];
+  className?: string;
+}
+
+const DEFAULT_VIEWS: ClickUpViewOption[] = [
+  {
+    key: "list",
+    label: "List",
+    icon: (props) => <TaskIcon name="list" {...props} />,
+  },
+  {
+    key: "board",
+    label: "Board",
+    icon: (props) => <TaskIcon name="board" {...props} />,
+  },
+  {
+    key: "table",
+    label: "Table",
+    icon: (props) => <TaskIcon name="overview" {...props} />,
+  },
+  {
+    key: "gantt",
+    label: "Gantt",
+    icon: (props) => <TaskIcon name="timeline" {...props} />,
+  },
+  {
+    key: "calendar",
+    label: "Calendar",
+    icon: (props) => <TaskIcon name="calendar" {...props} />,
+  },
+  {
+    key: "activity",
+    label: "Activity",
+    icon: (props) => <TaskIcon name="activity" {...props} />,
+  },
+];
+
+export function TaskViewTabs<Key extends string>({
+  activeView,
+  onViewChange,
+  views,
+  label = "ClickUp Task Views",
+  className,
+  renderTab,
+}: {
+  activeView: Key;
+  onViewChange: (view: Key) => void;
+  views: (Omit<ClickUpViewOption, "key"> & { key: Key })[];
+  className?: string;
+  label?: string;
+  renderTab?: (key: Key, tab: React.ReactElement) => React.ReactNode;
+}) {
+  return (
+    <div
+      role="tablist"
+      aria-label={label}
+      className={cn("cu-task-tabs select-none", className)}
+    >
+      {views.map((view) => {
+        const isActive = activeView === view.key;
+        const IconComponent = view.icon;
+
+        const tab = (
+          <button
+            key={view.key}
+            role="tab"
+            aria-selected={isActive}
+            type="button"
+            onClick={() => onViewChange(view.key)}
+            className={cn(
+              "cu-task-tab shrink-0",
+              isActive
+                ? "border-dashboard-primary text-dashboard-primary font-semibold"
+                : "border-transparent text-dashboard-muted-foreground hover:text-dashboard-foreground hover:border-dashboard-border",
+            )}
+          >
+            {IconComponent && (
+              <IconComponent className="size-[13px] shrink-0" />
+            )}
+            <ThemedText
+              variant="caption"
+              as="span"
+              className="cu-task-tab-label"
+            >
+              {view.label}
+            </ThemedText>
+            {typeof view.count === "number" && (
+              <ThemedText
+                as="span"
+                variant="caption"
+                className={cn(
+                  "text-[10px] px-1.5 py-0.2 rounded-full font-semibold",
+                  isActive
+                    ? "bg-dashboard-primary/20 text-dashboard-primary"
+                    : "bg-dashboard-secondary text-dashboard-muted-foreground",
+                )}
+              >
+                {view.count}
+              </ThemedText>
+            )}
+          </button>
+        );
+        return (
+          <React.Fragment key={view.key}>
+            {renderTab ? renderTab(view.key, tab) : tab}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+export function TaskViewSwitcher({
+  views = DEFAULT_VIEWS,
+  ...props
+}: TaskViewSwitcherProps) {
+  return <TaskViewTabs {...props} views={views} />;
+}
+export default TaskViewSwitcher;

package/src/clickup/types.ts

@@ -0,0 +1,79 @@
+import React from "react";
+
+export type ClickUpPriority = "Urgent" | "High" | "Normal" | "Low";
+
+export interface ClickUpStatus {
+  id: string;
+  label: string;
+  color: string;
+  category?: "not_started" | "active" | "done" | "closed" | "cancelled";
+}
+
+export interface ClickUpUser {
+  id: string;
+  name: string;
+  avatar?: string;
+  email?: string;
+  color?: string;
+}
+
+export interface ClickUpPhase {
+  id: string;
+  name: string;
+  color?: string;
+  order?: number;
+}
+
+export interface ClickUpSprint {
+  id: string;
+  name: string;
+}
+
+export interface ClickUpTask {
+  id: string;
+  title: string;
+  description?: string;
+  status_id: string;
+  status?: ClickUpStatus;
+  phase_id?: string;
+  phase_name?: string;
+  assignee_id?: string;
+  assignee?: ClickUpUser;
+  due_date?: string; // ISO date YYYY-MM-DD
+  start_date?: string; // ISO date YYYY-MM-DD
+  priority?: ClickUpPriority | string;
+  sprint_id?: string;
+  sprint_name?: string;
+  tags?: string[];
+  points?: number;
+  completed?: boolean;
+  comments_count?: number;
+  created_at?: string;
+  updated_at?: string;
+  [key: string]: any;
+}
+
+export interface ClickUpComment {
+  id: string;
+  task_id: string;
+  actor_id: string;
+  actor_name: string;
+  actor_avatar?: string;
+  body: string;
+  created_at: string;
+}
+
+export type ClickUpViewType =
+  | "list"
+  | "board"
+  | "table"
+  | "gantt"
+  | "calendar"
+  | "activity";
+
+export interface ClickUpViewOption {
+  key: ClickUpViewType;
+  label: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  count?: number;
+}