@tuturuuu/ui 0.10.0 → 0.11.0

package/src/components/ui/tu-do/templates/task-template-api.ts

@@ -0,0 +1,142 @@
+import {
+  encodePathSegment,
+  getInternalApiClient,
+} from '@tuturuuu/internal-api/client';
+import type { TaskPriority } from '@tuturuuu/types/primitives/Priority';
+import type { Task } from '@tuturuuu/types/primitives/Task';
+
+export type WorkspaceTaskTemplateVisibility = 'private' | 'workspace';
+
+export interface WorkspaceTaskTemplate {
+  archived_at: string | null;
+  assignee_ids: string[];
+  created_at: string;
+  created_by: string;
+  default_board_id: string | null;
+  default_list_id: string | null;
+  description: string | null;
+  description_yjs_state: number[] | null;
+  end_date: string | null;
+  estimation_points: number | null;
+  id: string;
+  isOwner: boolean;
+  label_ids: string[];
+  name: string;
+  priority: TaskPriority | null;
+  project_ids: string[];
+  slug: string;
+  source_task_id: string | null;
+  start_date: string | null;
+  task_name: string;
+  updated_at: string;
+  visibility: WorkspaceTaskTemplateVisibility;
+  ws_id: string;
+}
+
+export interface WorkspaceTaskTemplatePayload {
+  assignee_ids?: string[];
+  default_board_id?: string | null;
+  default_list_id?: string | null;
+  description?: string | null;
+  description_yjs_state?: number[] | null;
+  end_date?: string | null;
+  estimation_points?: number | null;
+  key?: string;
+  label_ids?: string[];
+  name: string;
+  priority?: TaskPriority | null;
+  project_ids?: string[];
+  slug?: string;
+  source_task_id?: string | null;
+  start_date?: string | null;
+  task_name?: string;
+  title?: string;
+  visibility?: WorkspaceTaskTemplateVisibility;
+}
+
+interface WorkspaceTaskTemplatesResponse {
+  templates: WorkspaceTaskTemplate[];
+}
+
+interface WorkspaceTaskTemplateResponse {
+  template: WorkspaceTaskTemplate;
+}
+
+interface InstantiateWorkspaceTaskTemplateResponse {
+  task: Task;
+  template: WorkspaceTaskTemplate;
+}
+
+function taskTemplatePath(workspaceId: string, suffix = '') {
+  return `/api/v1/workspaces/${encodePathSegment(workspaceId)}/task-templates${suffix}`;
+}
+
+export async function listWorkspaceTaskTemplates(workspaceId: string) {
+  return getInternalApiClient().json<WorkspaceTaskTemplatesResponse>(
+    taskTemplatePath(workspaceId),
+    { cache: 'no-store' }
+  );
+}
+
+export async function createWorkspaceTaskTemplate(
+  workspaceId: string,
+  payload: WorkspaceTaskTemplatePayload
+) {
+  return getInternalApiClient().json<WorkspaceTaskTemplateResponse>(
+    taskTemplatePath(workspaceId),
+    {
+      body: JSON.stringify(payload),
+      cache: 'no-store',
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    }
+  );
+}
+
+export async function deleteWorkspaceTaskTemplate(
+  workspaceId: string,
+  templateKey: string
+) {
+  return getInternalApiClient().json<{ success: true }>(
+    taskTemplatePath(workspaceId, `/${encodePathSegment(templateKey)}`),
+    { cache: 'no-store', method: 'DELETE' }
+  );
+}
+
+export async function instantiateWorkspaceTaskTemplate(
+  workspaceId: string,
+  templateKey: string,
+  payload: { listId: string; name?: string }
+) {
+  return getInternalApiClient().json<InstantiateWorkspaceTaskTemplateResponse>(
+    taskTemplatePath(
+      workspaceId,
+      `/${encodePathSegment(templateKey)}/instantiate`
+    ),
+    {
+      body: JSON.stringify(payload),
+      cache: 'no-store',
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    }
+  );
+}
+
+export async function saveWorkspaceTaskTemplateFromTask(
+  workspaceId: string,
+  payload: {
+    name?: string;
+    taskId: string;
+    visibility: WorkspaceTaskTemplateVisibility;
+  }
+) {
+  return getInternalApiClient().json<WorkspaceTaskTemplateResponse>(
+    taskTemplatePath(workspaceId, '/from-task'),
+    {
+      body: JSON.stringify(payload),
+      cache: 'no-store',
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    }
+  );
+}

package/src/components/ui/tu-do/templates/task-template-card.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { Archive, CopyPlus, FileText, Lock, Users } from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@tuturuuu/ui/card';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import type { WorkspaceTaskTemplate } from './task-template-api';
+
+interface TaskTemplateCardProps {
+  onArchive: (template: WorkspaceTaskTemplate) => void;
+  onUse: (template: WorkspaceTaskTemplate) => void;
+  template: WorkspaceTaskTemplate;
+}
+
+export function TaskTemplateCard({
+  onArchive,
+  onUse,
+  template,
+}: TaskTemplateCardProps) {
+  const t = useTranslations('ws-task-templates');
+  const visibilityIcon =
+    template.visibility === 'private' ? (
+      <Lock className="h-3.5 w-3.5" />
+    ) : (
+      <Users className="h-3.5 w-3.5" />
+    );
+
+  return (
+    <Card className="flex h-full flex-col">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 space-y-1">
+            <CardTitle className="truncate text-base">
+              {template.name}
+            </CardTitle>
+            <CardDescription className="truncate">
+              {template.slug}
+            </CardDescription>
+          </div>
+          <Badge
+            variant="outline"
+            className={cn(
+              'shrink-0 gap-1 text-xs',
+              template.visibility === 'private' &&
+                'border-dynamic-orange/30 text-dynamic-orange',
+              template.visibility === 'workspace' &&
+                'border-dynamic-blue/30 text-dynamic-blue'
+            )}
+          >
+            {visibilityIcon}
+            <span>{t(`visibility.${template.visibility}`)}</span>
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-1 flex-col gap-4">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 font-medium text-sm">
+            <FileText className="h-4 w-4 text-muted-foreground" />
+            <span className="truncate">{template.task_name}</span>
+          </div>
+          {template.description && (
+            <p className="line-clamp-3 text-muted-foreground text-sm">
+              {template.description}
+            </p>
+          )}
+        </div>
+
+        <div className="mt-auto flex flex-wrap gap-2 text-muted-foreground text-xs">
+          {template.priority && (
+            <Badge variant="secondary">
+              {t(`priority.${template.priority}`)}
+            </Badge>
+          )}
+          {template.label_ids.length > 0 && (
+            <Badge variant="secondary">
+              {t('card.labels', { count: template.label_ids.length })}
+            </Badge>
+          )}
+          {template.assignee_ids.length > 0 && (
+            <Badge variant="secondary">
+              {t('card.assignees', { count: template.assignee_ids.length })}
+            </Badge>
+          )}
+          {template.project_ids.length > 0 && (
+            <Badge variant="secondary">
+              {t('card.projects', { count: template.project_ids.length })}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex gap-2">
+          <Button className="flex-1 gap-2" onClick={() => onUse(template)}>
+            <CopyPlus className="h-4 w-4" />
+            {t('actions.use')}
+          </Button>
+          {template.isOwner && (
+            <Button
+              aria-label={t('actions.archive')}
+              onClick={() => onArchive(template)}
+              size="icon"
+              variant="outline"
+            >
+              <Archive className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/tu-do/templates/task-template-client.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { FileText, Plus, Save, Search } from '@tuturuuu/icons';
+import {
+  listWorkspaceTaskBoards,
+  listWorkspaceTaskLists,
+  type WorkspaceTaskListSummary,
+} from '@tuturuuu/internal-api/tasks';
+import { Button } from '@tuturuuu/ui/button';
+import { Card, CardContent } from '@tuturuuu/ui/card';
+import { Input } from '@tuturuuu/ui/input';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  createWorkspaceTaskTemplate,
+  deleteWorkspaceTaskTemplate,
+  instantiateWorkspaceTaskTemplate,
+  listWorkspaceTaskTemplates,
+  saveWorkspaceTaskTemplateFromTask,
+  type WorkspaceTaskTemplate,
+  type WorkspaceTaskTemplatePayload,
+} from './task-template-api';
+import { TaskTemplateCard } from './task-template-card';
+import {
+  CreateTaskTemplateDialog,
+  SaveTaskTemplateFromTaskDialog,
+  UseTaskTemplateDialog,
+} from './task-template-dialogs';
+
+interface TaskTemplateClientProps {
+  initialTemplates?: WorkspaceTaskTemplate[];
+  wsId: string;
+}
+
+export function TaskTemplateClient({
+  initialTemplates = [],
+  wsId,
+}: TaskTemplateClientProps) {
+  const t = useTranslations('ws-task-templates');
+  const queryClient = useQueryClient();
+  const [search, setSearch] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+  const [saveFromTaskOpen, setSaveFromTaskOpen] = useState(false);
+  const [useOpen, setUseOpen] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] =
+    useState<WorkspaceTaskTemplate | null>(null);
+  const [selectedBoardId, setSelectedBoardId] = useState('');
+  const [selectedListId, setSelectedListId] = useState('');
+
+  const templatesQueryKey = ['task-templates', wsId] as const;
+
+  const { data: templates = initialTemplates } = useQuery({
+    queryKey: templatesQueryKey,
+    queryFn: async () => {
+      const payload = await listWorkspaceTaskTemplates(wsId);
+      return payload.templates;
+    },
+    initialData: initialTemplates,
+  });
+
+  const { data: boards = [] } = useQuery({
+    queryKey: ['task-template-boards', wsId],
+    queryFn: async () => {
+      const payload = await listWorkspaceTaskBoards(wsId);
+      return payload.boards.filter(
+        (board) => !board.archived_at && !board.deleted_at
+      );
+    },
+    enabled: useOpen,
+  });
+
+  const { data: lists = [], isLoading: loadingLists } = useQuery({
+    queryKey: ['task-template-lists', wsId, selectedBoardId],
+    queryFn: async (): Promise<WorkspaceTaskListSummary[]> => {
+      if (!selectedBoardId) return [];
+      const payload = await listWorkspaceTaskLists(wsId, selectedBoardId);
+      return payload.lists.filter((list) => !list.deleted);
+    },
+    enabled: useOpen && Boolean(selectedBoardId),
+  });
+
+  const filteredTemplates = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return templates;
+
+    return templates.filter((template) =>
+      [template.name, template.slug, template.task_name, template.description]
+        .filter(Boolean)
+        .some((value) => value?.toLowerCase().includes(query))
+    );
+  }, [search, templates]);
+
+  const createMutation = useMutation({
+    mutationFn: (payload: WorkspaceTaskTemplatePayload) =>
+      createWorkspaceTaskTemplate(wsId, payload),
+    onSuccess: async () => {
+      toast.success(t('toast.created'));
+      setCreateOpen(false);
+      await queryClient.invalidateQueries({ queryKey: templatesQueryKey });
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : t('toast.failed'));
+    },
+  });
+
+  const saveFromTaskMutation = useMutation({
+    mutationFn: (payload: {
+      name?: string;
+      taskId: string;
+      visibility: 'private' | 'workspace';
+    }) =>
+      saveWorkspaceTaskTemplateFromTask(wsId, {
+        name: payload.name,
+        taskId: payload.taskId,
+        visibility: payload.visibility,
+      }),
+    onSuccess: async () => {
+      toast.success(t('toast.saved_from_task'));
+      setSaveFromTaskOpen(false);
+      await queryClient.invalidateQueries({ queryKey: templatesQueryKey });
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : t('toast.failed'));
+    },
+  });
+
+  const useMutationForTemplate = useMutation({
+    mutationFn: (payload: { listId: string; name?: string }) => {
+      if (!selectedTemplate) {
+        throw new Error(t('toast.no_template_selected'));
+      }
+      return instantiateWorkspaceTaskTemplate(wsId, selectedTemplate.slug, {
+        listId: payload.listId,
+        name: payload.name,
+      });
+    },
+    onSuccess: async () => {
+      toast.success(t('toast.task_created'));
+      setUseOpen(false);
+      setSelectedTemplate(null);
+      setSelectedBoardId('');
+      setSelectedListId('');
+      await queryClient.invalidateQueries({ queryKey: ['tasks'] });
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : t('toast.failed'));
+    },
+  });
+
+  const archiveMutation = useMutation({
+    mutationFn: (template: WorkspaceTaskTemplate) =>
+      deleteWorkspaceTaskTemplate(wsId, template.id),
+    onSuccess: async () => {
+      toast.success(t('toast.archived'));
+      await queryClient.invalidateQueries({ queryKey: templatesQueryKey });
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : t('toast.failed'));
+    },
+  });
+
+  const openUseDialog = (template: WorkspaceTaskTemplate) => {
+    setSelectedTemplate(template);
+    setSelectedBoardId(template.default_board_id ?? '');
+    setSelectedListId(template.default_list_id ?? '');
+    setUseOpen(true);
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="flex flex-col gap-4 p-4 sm:flex-row sm:items-end sm:justify-between">
+          <div className="space-y-2">
+            <p className="font-medium text-sm leading-none">
+              {t('fields.search')}
+            </p>
+            <div className="relative w-full sm:w-80">
+              <Input
+                className="pl-9"
+                onChange={(event) => setSearch(event.target.value)}
+                placeholder={t('fields.search_placeholder')}
+                value={search}
+              />
+              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              className="gap-2"
+              onClick={() => setSaveFromTaskOpen(true)}
+              variant="outline"
+            >
+              <Save className="h-4 w-4" />
+              {t('actions.save_from_task')}
+            </Button>
+            <Button className="gap-2" onClick={() => setCreateOpen(true)}>
+              <Plus className="h-4 w-4" />
+              {t('actions.new_template')}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {filteredTemplates.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-16 text-center">
+          <FileText className="mb-4 h-10 w-10 text-muted-foreground/50" />
+          <h3 className="font-semibold text-lg">{t('empty.title')}</h3>
+          <p className="mt-2 max-w-sm text-muted-foreground text-sm">
+            {search ? t('empty.no_results') : t('empty.description')}
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {filteredTemplates.map((template) => (
+            <TaskTemplateCard
+              key={template.id}
+              onArchive={(item) => archiveMutation.mutate(item)}
+              onUse={openUseDialog}
+              template={template}
+            />
+          ))}
+        </div>
+      )}
+
+      <CreateTaskTemplateDialog
+        onCreate={(payload) => createMutation.mutate(payload)}
+        onOpenChange={setCreateOpen}
+        open={createOpen}
+        pending={createMutation.isPending}
+      />
+      <SaveTaskTemplateFromTaskDialog
+        onOpenChange={setSaveFromTaskOpen}
+        onSave={(payload) => saveFromTaskMutation.mutate(payload)}
+        open={saveFromTaskOpen}
+        pending={saveFromTaskMutation.isPending}
+      />
+      <UseTaskTemplateDialog
+        boards={boards}
+        lists={lists}
+        loadingLists={loadingLists}
+        onBoardChange={(boardId) => {
+          setSelectedBoardId(boardId);
+          setSelectedListId('');
+        }}
+        onListChange={setSelectedListId}
+        onOpenChange={setUseOpen}
+        onUse={(payload) => useMutationForTemplate.mutate(payload)}
+        open={useOpen}
+        pending={useMutationForTemplate.isPending}
+        selectedBoardId={selectedBoardId}
+        selectedListId={selectedListId}
+        template={selectedTemplate}
+      />
+    </div>
+  );
+}

package/src/components/ui/tu-do/templates/task-template-dialogs.test.tsx

@@ -0,0 +1,167 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { WorkspaceTaskTemplate } from './task-template-api';
+import {
+  CreateTaskTemplateDialog,
+  SaveTaskTemplateFromTaskDialog,
+  UseTaskTemplateDialog,
+} from './task-template-dialogs';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, string>) =>
+    values?.name ? `${key}:${values.name}` : key,
+}));
+
+const template: WorkspaceTaskTemplate = {
+  archived_at: null,
+  assignee_ids: [],
+  created_at: '2026-06-29T00:00:00.000Z',
+  created_by: 'user-1',
+  default_board_id: 'board-1',
+  default_list_id: 'list-1',
+  description: 'Template body',
+  description_yjs_state: null,
+  end_date: null,
+  estimation_points: null,
+  id: 'template-1',
+  isOwner: true,
+  label_ids: [],
+  name: 'Bug report',
+  priority: 'high',
+  project_ids: [],
+  slug: 'bug-report',
+  source_task_id: null,
+  start_date: null,
+  task_name: 'Investigate bug',
+  updated_at: '2026-06-29T00:00:00.000Z',
+  visibility: 'private',
+  ws_id: 'ws-1',
+};
+
+describe('task template dialogs', () => {
+  it('validates and emits create payloads for new templates', () => {
+    const onCreate = vi.fn();
+
+    render(
+      <CreateTaskTemplateDialog
+        onCreate={onCreate}
+        onOpenChange={vi.fn()}
+        open
+        pending={false}
+      />
+    );
+
+    const submit = screen.getByRole('button', { name: 'actions.create' });
+    expect(submit).toBeDisabled();
+
+    fireEvent.change(screen.getByLabelText('fields.template_name'), {
+      target: { value: 'Bug report' },
+    });
+    fireEvent.change(screen.getByLabelText('fields.key'), {
+      target: { value: 'bug-report' },
+    });
+    fireEvent.change(screen.getByLabelText('fields.task_name'), {
+      target: { value: 'Investigate bug' },
+    });
+    fireEvent.change(screen.getByLabelText('fields.description'), {
+      target: { value: 'Reproduce and capture expected behavior.' },
+    });
+    fireEvent.click(submit);
+
+    expect(onCreate).toHaveBeenCalledWith({
+      description: 'Reproduce and capture expected behavior.',
+      key: 'bug-report',
+      name: 'Bug report',
+      priority: null,
+      task_name: 'Investigate bug',
+      visibility: 'private',
+    });
+  });
+
+  it('emits use-template payloads with override titles and selected lists', () => {
+    const onUse = vi.fn();
+
+    render(
+      <UseTaskTemplateDialog
+        boards={[
+          {
+            allow_zero_estimates: false,
+            archived_at: null,
+            count_unestimated_issues: false,
+            created_at: '2026-06-29T00:00:00.000Z',
+            deleted_at: null,
+            estimation_type: null,
+            extended_estimation: false,
+            icon: null,
+            id: 'board-1',
+            name: 'Board',
+            ticket_prefix: null,
+            ws_id: 'ws-1',
+          },
+        ]}
+        lists={[
+          {
+            color: null,
+            id: 'list-1',
+            name: 'Todo',
+            position: 1,
+            status: 'active',
+          },
+        ]}
+        loadingLists={false}
+        onBoardChange={vi.fn()}
+        onListChange={vi.fn()}
+        onOpenChange={vi.fn()}
+        onUse={onUse}
+        open
+        pending={false}
+        selectedBoardId="board-1"
+        selectedListId="list-1"
+        template={template}
+      />
+    );
+
+    fireEvent.change(screen.getByLabelText('fields.override_name'), {
+      target: { value: 'Checkout bug' },
+    });
+    fireEvent.click(
+      screen.getByRole('button', { name: 'actions.create_task' })
+    );
+
+    expect(onUse).toHaveBeenCalledWith({
+      listId: 'list-1',
+      name: 'Checkout bug',
+    });
+  });
+
+  it('saves existing tasks as templates with private visibility by default', () => {
+    const onSave = vi.fn();
+
+    render(
+      <SaveTaskTemplateFromTaskDialog
+        onOpenChange={vi.fn()}
+        onSave={onSave}
+        open
+        pending={false}
+      />
+    );
+
+    const submit = screen.getByRole('button', { name: 'actions.save' });
+    expect(submit).toBeDisabled();
+
+    fireEvent.change(screen.getByLabelText('fields.task_id'), {
+      target: { value: 'task-1' },
+    });
+    fireEvent.change(screen.getByLabelText('fields.template_name'), {
+      target: { value: 'Release checklist' },
+    });
+    fireEvent.click(submit);
+
+    expect(onSave).toHaveBeenCalledWith({
+      name: 'Release checklist',
+      taskId: 'task-1',
+      visibility: 'private',
+    });
+  });
+});