@tuturuuu/ui 0.10.0 → 0.11.1

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',
+    });
+  });
+});

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

@@ -0,0 +1,376 @@
+'use client';
+
+import type {
+  WorkspaceTaskBoardListItem,
+  WorkspaceTaskListSummary,
+} from '@tuturuuu/internal-api/tasks';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { Textarea } from '@tuturuuu/ui/textarea';
+import { useTranslations } from 'next-intl';
+import { useEffect, useId, useState } from 'react';
+import type {
+  WorkspaceTaskTemplate,
+  WorkspaceTaskTemplatePayload,
+} from './task-template-api';
+
+type Visibility = 'private' | 'workspace';
+
+interface CreateTaskTemplateDialogProps {
+  onCreate: (payload: WorkspaceTaskTemplatePayload) => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  pending: boolean;
+}
+
+export function CreateTaskTemplateDialog({
+  onCreate,
+  onOpenChange,
+  open,
+  pending,
+}: CreateTaskTemplateDialogProps) {
+  const t = useTranslations('ws-task-templates');
+  const nameId = useId();
+  const keyId = useId();
+  const taskNameId = useId();
+  const descriptionId = useId();
+  const [name, setName] = useState('');
+  const [key, setKey] = useState('');
+  const [taskName, setTaskName] = useState('');
+  const [description, setDescription] = useState('');
+  const [priority, setPriority] = useState<string>('none');
+  const [visibility, setVisibility] = useState<Visibility>('private');
+
+  useEffect(() => {
+    if (!open) return;
+    setName('');
+    setKey('');
+    setTaskName('');
+    setDescription('');
+    setPriority('none');
+    setVisibility('private');
+  }, [open]);
+
+  const canSubmit = name.trim().length > 0 || taskName.trim().length > 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('create.title')}</DialogTitle>
+          <DialogDescription>{t('create.description')}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor={nameId}>{t('fields.template_name')}</Label>
+            <Input
+              id={nameId}
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder={t('fields.template_name_placeholder')}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={keyId}>{t('fields.key')}</Label>
+            <Input
+              id={keyId}
+              value={key}
+              onChange={(event) => setKey(event.target.value)}
+              placeholder={t('fields.key_placeholder')}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={taskNameId}>{t('fields.task_name')}</Label>
+            <Input
+              id={taskNameId}
+              value={taskName}
+              onChange={(event) => setTaskName(event.target.value)}
+              placeholder={t('fields.task_name_placeholder')}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={descriptionId}>{t('fields.description')}</Label>
+            <Textarea
+              id={descriptionId}
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              placeholder={t('fields.description_placeholder')}
+            />
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <Select value={priority} onValueChange={setPriority}>
+              <SelectTrigger>
+                <SelectValue placeholder={t('fields.priority')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">{t('priority.none')}</SelectItem>
+                <SelectItem value="low">{t('priority.low')}</SelectItem>
+                <SelectItem value="normal">{t('priority.normal')}</SelectItem>
+                <SelectItem value="high">{t('priority.high')}</SelectItem>
+                <SelectItem value="critical">
+                  {t('priority.critical')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              value={visibility}
+              onValueChange={(value) => setVisibility(value as Visibility)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t('fields.visibility')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="private">
+                  {t('visibility.private')}
+                </SelectItem>
+                <SelectItem value="workspace">
+                  {t('visibility.workspace')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('actions.cancel')}
+          </Button>
+          <Button
+            disabled={!canSubmit || pending}
+            onClick={() =>
+              onCreate({
+                description: description.trim() || null,
+                key: key.trim() || undefined,
+                name: name.trim() || taskName.trim(),
+                priority: priority === 'none' ? null : (priority as never),
+                task_name: taskName.trim() || name.trim(),
+                visibility,
+              })
+            }
+          >
+            {t('actions.create')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface UseTaskTemplateDialogProps {
+  boards: WorkspaceTaskBoardListItem[];
+  lists: WorkspaceTaskListSummary[];
+  loadingLists: boolean;
+  onBoardChange: (boardId: string) => void;
+  onListChange: (listId: string) => void;
+  onOpenChange: (open: boolean) => void;
+  onUse: (payload: { listId: string; name?: string }) => void;
+  open: boolean;
+  pending: boolean;
+  selectedBoardId: string;
+  selectedListId: string;
+  template: WorkspaceTaskTemplate | null;
+}
+
+export function UseTaskTemplateDialog({
+  boards,
+  lists,
+  loadingLists,
+  onBoardChange,
+  onListChange,
+  onOpenChange,
+  onUse,
+  open,
+  pending,
+  selectedBoardId,
+  selectedListId,
+  template,
+}: UseTaskTemplateDialogProps) {
+  const t = useTranslations('ws-task-templates');
+  const overrideNameId = useId();
+  const [name, setName] = useState('');
+
+  useEffect(() => {
+    if (open) setName('');
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('use.title')}</DialogTitle>
+          <DialogDescription>
+            {template
+              ? t('use.description', { name: template.name })
+              : t('use.description_empty')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Select value={selectedBoardId} onValueChange={onBoardChange}>
+            <SelectTrigger>
+              <SelectValue placeholder={t('fields.board')} />
+            </SelectTrigger>
+            <SelectContent>
+              {boards.map((board) => (
+                <SelectItem key={board.id} value={board.id}>
+                  {board.name || t('fields.unnamed_board')}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select
+            disabled={!selectedBoardId || loadingLists}
+            onValueChange={onListChange}
+            value={selectedListId}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={t('fields.list')} />
+            </SelectTrigger>
+            <SelectContent>
+              {lists.map((list) => (
+                <SelectItem key={list.id} value={list.id}>
+                  {list.name || t('fields.unnamed_list')}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <div className="space-y-2">
+            <Label htmlFor={overrideNameId}>{t('fields.override_name')}</Label>
+            <Input
+              id={overrideNameId}
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder={template?.task_name ?? t('fields.task_name')}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('actions.cancel')}
+          </Button>
+          <Button
+            disabled={!template || !selectedListId || pending}
+            onClick={() =>
+              onUse({
+                listId: selectedListId,
+                name: name.trim() || undefined,
+              })
+            }
+          >
+            {t('actions.create_task')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface SaveTaskTemplateFromTaskDialogProps {
+  onOpenChange: (open: boolean) => void;
+  onSave: (payload: {
+    name?: string;
+    taskId: string;
+    visibility: Visibility;
+  }) => void;
+  open: boolean;
+  pending: boolean;
+}
+
+export function SaveTaskTemplateFromTaskDialog({
+  onOpenChange,
+  onSave,
+  open,
+  pending,
+}: SaveTaskTemplateFromTaskDialogProps) {
+  const t = useTranslations('ws-task-templates');
+  const taskIdInput = useId();
+  const nameInput = useId();
+  const [taskId, setTaskId] = useState('');
+  const [name, setName] = useState('');
+  const [visibility, setVisibility] = useState<Visibility>('private');
+
+  useEffect(() => {
+    if (!open) return;
+    setTaskId('');
+    setName('');
+    setVisibility('private');
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('save_from_task.title')}</DialogTitle>
+          <DialogDescription>
+            {t('save_from_task.description')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor={taskIdInput}>{t('fields.task_id')}</Label>
+            <Input
+              id={taskIdInput}
+              value={taskId}
+              onChange={(event) => setTaskId(event.target.value)}
+              placeholder={t('fields.task_id_placeholder')}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={nameInput}>{t('fields.template_name')}</Label>
+            <Input
+              id={nameInput}
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder={t('fields.template_name_placeholder')}
+            />
+          </div>
+          <Select
+            value={visibility}
+            onValueChange={(value) => setVisibility(value as Visibility)}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={t('fields.visibility')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="private">{t('visibility.private')}</SelectItem>
+              <SelectItem value="workspace">
+                {t('visibility.workspace')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('actions.cancel')}
+          </Button>
+          <Button
+            disabled={!taskId.trim() || pending}
+            onClick={() =>
+              onSave({
+                name: name.trim() || undefined,
+                taskId: taskId.trim(),
+                visibility,
+              })
+            }
+          >
+            {t('actions.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,114 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TaskTemplatesHub } from './task-templates-hub';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('./task-template-client', () => ({
+  TaskTemplateClient: ({
+    initialTemplates,
+    wsId,
+  }: {
+    initialTemplates: Array<{ name: string }>;
+    wsId: string;
+  }) => (
+    <div data-testid="task-template-tab">
+      task templates for {wsId}:{' '}
+      {initialTemplates.map((item) => item.name).join(', ')}
+    </div>
+  ),
+}));
+
+vi.mock('./client', () => ({
+  default: ({
+    initialTemplates,
+    templatesBasePath,
+    wsId,
+  }: {
+    initialTemplates: Array<{ name: string }>;
+    templatesBasePath: string;
+    wsId: string;
+  }) => (
+    <div data-testid="board-template-tab">
+      board templates for {wsId}/{templatesBasePath}:{' '}
+      {initialTemplates.map((item) => item.name).join(', ')}
+    </div>
+  ),
+}));
+
+describe('TaskTemplatesHub', () => {
+  it('defaults to task templates and keeps board templates available', () => {
+    render(
+      <TaskTemplatesHub
+        boardTemplates={[
+          {
+            createdAt: '2026-06-29T00:00:00.000Z',
+            createdBy: 'user-1',
+            description: null,
+            id: 'board-template-1',
+            isOwner: true,
+            name: 'Sprint board',
+            sourceBoardId: 'board-1',
+            stats: { labels: 0, lists: 1, tasks: 0 },
+            updatedAt: '2026-06-29T00:00:00.000Z',
+            visibility: 'workspace',
+            wsId: 'ws-1',
+          },
+        ]}
+        taskTemplates={[
+          {
+            archived_at: null,
+            assignee_ids: [],
+            created_at: '2026-06-29T00:00:00.000Z',
+            created_by: 'user-1',
+            default_board_id: null,
+            default_list_id: null,
+            description: null,
+            description_yjs_state: null,
+            end_date: null,
+            estimation_points: null,
+            id: 'task-template-1',
+            isOwner: true,
+            label_ids: [],
+            name: 'Bug report',
+            priority: null,
+            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',
+          },
+        ]}
+        templatesBasePath="tasks/templates"
+        wsId="ws-1"
+      />
+    );
+
+    expect(screen.getByRole('tab', { name: /tabs.tasks/i })).toHaveAttribute(
+      'data-state',
+      'active'
+    );
+    expect(screen.getByTestId('task-template-tab')).toHaveTextContent(
+      'Bug report'
+    );
+
+    const boardTab = screen.getByRole('tab', { name: /tabs.boards/i });
+    fireEvent.pointerDown(boardTab);
+    fireEvent.mouseDown(boardTab);
+    fireEvent.click(boardTab);
+
+    expect(boardTab).toHaveAttribute('data-state', 'active');
+    expect(screen.getByTestId('board-template-tab')).toHaveTextContent(
+      'Sprint board'
+    );
+    expect(screen.getByTestId('board-template-tab')).toHaveTextContent(
+      'tasks/templates'
+    );
+  });
+});

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { KanbanSquare, ListTodo } from '@tuturuuu/icons';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import { useTranslations } from 'next-intl';
+import TemplatesClient from './client';
+import type { WorkspaceTaskTemplate } from './task-template-api';
+import { TaskTemplateClient } from './task-template-client';
+import type { BoardTemplate } from './types';
+
+interface TaskTemplatesHubProps {
+  boardTemplates: BoardTemplate[];
+  taskTemplates?: WorkspaceTaskTemplate[];
+  templatesBasePath?: string;
+  wsId: string;
+}
+
+export function TaskTemplatesHub({
+  boardTemplates,
+  taskTemplates = [],
+  templatesBasePath = 'templates',
+  wsId,
+}: TaskTemplatesHubProps) {
+  const t = useTranslations('ws-task-templates');
+
+  return (
+    <Tabs defaultValue="tasks" className="space-y-4">
+      <TabsList>
+        <TabsTrigger value="tasks">
+          <ListTodo className="h-4 w-4" />
+          {t('tabs.tasks')}
+        </TabsTrigger>
+        <TabsTrigger value="boards">
+          <KanbanSquare className="h-4 w-4" />
+          {t('tabs.boards')}
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="tasks">
+        <TaskTemplateClient initialTemplates={taskTemplates} wsId={wsId} />
+      </TabsContent>
+      <TabsContent value="boards">
+        <TemplatesClient
+          initialTemplates={boardTemplates}
+          templatesBasePath={templatesBasePath}
+          wsId={wsId}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}