@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/templates/save-as-template-dialog.tsx

@@ -1,381 +0,0 @@
-'use client';
-
-import { Bookmark, Loader2 } from '@tuturuuu/icons';
-import type { WorkspaceTaskBoard } from '@tuturuuu/types';
-import { Button } from '@tuturuuu/ui/button';
-import { Checkbox } from '@tuturuuu/ui/checkbox';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import { Input } from '@tuturuuu/ui/input';
-import { Label } from '@tuturuuu/ui/label';
-import { handleTemplateBackgroundUpload } from '@tuturuuu/ui/lib/template-background';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
-import { toast } from '@tuturuuu/ui/sonner';
-import { Textarea } from '@tuturuuu/ui/textarea';
-import { useRouter } from 'next/navigation';
-import { useTranslations } from 'next-intl';
-import { useEffect, useId, useState } from 'react';
-import { FileUploader, type StatedFile } from '../../custom/file-uploader';
-
-interface SaveAsTemplateDialogProps {
-  board: Pick<WorkspaceTaskBoard, 'id' | 'ws_id' | 'name'>;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-type TemplateVisibility = 'private' | 'workspace' | 'public';
-
-export function SaveAsTemplateDialog({
-  board,
-  open,
-  onOpenChange,
-}: SaveAsTemplateDialogProps) {
-  const t = useTranslations();
-  const router = useRouter();
-  const nameId = useId();
-  const descriptionId = useId();
-  const visibilityId = useId();
-
-  const [templateName, setTemplateName] = useState('');
-  const [description, setDescription] = useState('');
-  const [visibility, setVisibility] = useState<TemplateVisibility>('private');
-  const [includeTasks, setIncludeTasks] = useState(true);
-  const [includeLabels, setIncludeLabels] = useState(true);
-  const [includeDates, setIncludeDates] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-  const [backgroundFiles, setBackgroundFiles] = useState<StatedFile[]>([]);
-  const [backgroundPath, setBackgroundPath] = useState<string | null>(null); // Storage path
-  const [backgroundPreviewUrl, setBackgroundPreviewUrl] = useState<
-    string | null
-  >(null);
-
-  useEffect(() => {
-    return () => {
-      if (backgroundPreviewUrl?.startsWith('blob:')) {
-        URL.revokeObjectURL(backgroundPreviewUrl);
-      }
-    };
-  }, [backgroundPreviewUrl]);
-
-  // Initialize template name when dialog opens
-  useEffect(() => {
-    if (open && board) {
-      setTemplateName(board.name ?? '');
-      setDescription('');
-      setVisibility('private');
-      setIncludeTasks(true);
-      setIncludeLabels(true);
-      setIncludeDates(true);
-      setBackgroundFiles([]);
-      setBackgroundPath(null);
-      setBackgroundPreviewUrl((previousPreviewUrl) => {
-        if (previousPreviewUrl?.startsWith('blob:')) {
-          URL.revokeObjectURL(previousPreviewUrl);
-        }
-        return null;
-      });
-    }
-  }, [open, board]);
-
-  const handleBackgroundUpload = async (files: StatedFile[]) => {
-    await handleTemplateBackgroundUpload(
-      files,
-      board.ws_id,
-      (path) => {
-        const firstFile = files[0];
-        if (!firstFile) {
-          return;
-        }
-
-        if (backgroundPreviewUrl?.startsWith('blob:')) {
-          URL.revokeObjectURL(backgroundPreviewUrl);
-        }
-
-        setBackgroundPath(path);
-        setBackgroundPreviewUrl(firstFile.url);
-      },
-      (error) => {
-        toast.error(error);
-      }
-    );
-  };
-
-  const handleRemoveBackground = () => {
-    if (backgroundPreviewUrl?.startsWith('blob:')) {
-      URL.revokeObjectURL(backgroundPreviewUrl);
-    }
-    setBackgroundPath(null);
-    setBackgroundPreviewUrl(null);
-    setBackgroundFiles([]);
-  };
-
-  const handleSaveTemplate = async () => {
-    if (!templateName.trim()) {
-      toast.error(t('ws-board-templates.save_dialog.name_required'));
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const response = await fetch(
-        `/api/v1/workspaces/${board.ws_id}/task-boards/${board.id}/templates`,
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            name: templateName.trim(),
-            description: description.trim() || undefined,
-            visibility,
-            includeTasks,
-            includeLabels,
-            includeDates,
-            backgroundPath: backgroundPath || undefined,
-          }),
-        }
-      );
-
-      const data = await response.json();
-
-      if (response.ok) {
-        toast.success(t('ws-board-templates.save_dialog.success'), {
-          description: t('ws-board-templates.save_dialog.success_description', {
-            lists: data.stats?.lists || 0,
-            tasks: data.stats?.tasks || 0,
-          }),
-        });
-
-        // Reset form and close dialog
-        setTemplateName('');
-        setDescription('');
-        onOpenChange(false);
-
-        // Refresh
-        router.refresh();
-      } else {
-        throw new Error(data.error || 'Failed to save template');
-      }
-    } catch (error) {
-      console.error('Error saving template:', error);
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : t('ws-board-templates.save_dialog.failed')
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    if (backgroundPreviewUrl?.startsWith('blob:')) {
-      URL.revokeObjectURL(backgroundPreviewUrl);
-    }
-    setTemplateName('');
-    setDescription('');
-    onOpenChange(false);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Bookmark className="h-5 w-5" />
-            {t('ws-board-templates.save_dialog.title')}
-          </DialogTitle>
-          <DialogDescription>
-            {t('ws-board-templates.save_dialog.description', {
-              name: board.name ?? '',
-            })}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          {/* Template Name */}
-          <div className="space-y-2">
-            <Label htmlFor={nameId}>
-              {t('ws-board-templates.save_dialog.name_label')}
-            </Label>
-            <Input
-              id={nameId}
-              value={templateName}
-              onChange={(e) => setTemplateName(e.target.value)}
-              placeholder={t('ws-board-templates.save_dialog.name_placeholder')}
-              maxLength={255}
-            />
-          </div>
-
-          {/* Description */}
-          <div className="space-y-2">
-            <Label htmlFor={descriptionId}>
-              {t('ws-board-templates.save_dialog.description_label')}
-            </Label>
-            <Textarea
-              id={descriptionId}
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder={t(
-                'ws-board-templates.save_dialog.description_placeholder'
-              )}
-              rows={2}
-              maxLength={500}
-            />
-          </div>
-
-          {/* Visibility */}
-          <div className="space-y-2">
-            <Label htmlFor={visibilityId}>
-              {t('ws-board-templates.save_dialog.visibility_label')}
-            </Label>
-            <Select
-              value={visibility}
-              onValueChange={(v) => setVisibility(v as TemplateVisibility)}
-            >
-              <SelectTrigger id={visibilityId}>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="private">
-                  {t('ws-board-templates.visibility.private')}
-                </SelectItem>
-                <SelectItem value="workspace">
-                  {t('ws-board-templates.visibility.workspace')}
-                </SelectItem>
-                <SelectItem value="public">
-                  {t('ws-board-templates.visibility.public')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            <p className="text-muted-foreground text-xs">
-              {visibility === 'private'
-                ? t('ws-board-templates.visibility.private_hint')
-                : visibility === 'workspace'
-                  ? t('ws-board-templates.visibility.workspace_hint')
-                  : t('ws-board-templates.visibility.public_hint')}
-            </p>
-          </div>
-
-          {/* Import Options */}
-          <div className="space-y-3">
-            <Label>{t('ws-board-templates.save_dialog.include_label')}</Label>
-            <div className="space-y-2">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="include-tasks"
-                  checked={includeTasks}
-                  onCheckedChange={(checked) =>
-                    setIncludeTasks(checked === true)
-                  }
-                />
-                <Label
-                  htmlFor="include-tasks"
-                  className="cursor-pointer font-normal"
-                >
-                  {t('ws-board-templates.save_dialog.include_tasks')}
-                </Label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="include-labels"
-                  checked={includeLabels}
-                  onCheckedChange={(checked) =>
-                    setIncludeLabels(checked === true)
-                  }
-                />
-                <Label
-                  htmlFor="include-labels"
-                  className="cursor-pointer font-normal"
-                >
-                  {t('ws-board-templates.save_dialog.include_labels')}
-                </Label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="include-dates"
-                  checked={includeDates}
-                  onCheckedChange={(checked) =>
-                    setIncludeDates(checked === true)
-                  }
-                  disabled={!includeTasks}
-                />
-                <Label
-                  htmlFor="include-dates"
-                  className={`cursor-pointer font-normal ${!includeTasks ? 'text-muted-foreground' : ''}`}
-                >
-                  {t('ws-board-templates.save_dialog.include_dates')}
-                </Label>
-              </div>
-            </div>
-          </div>
-
-          {/* Background Image */}
-          <div className="space-y-2">
-            <Label>Background Image (Optional)</Label>
-            <p className="text-muted-foreground text-xs">
-              Upload a background image for your template. Only one image is
-              allowed.
-            </p>
-            {backgroundPreviewUrl ? (
-              <div className="space-y-2">
-                <div className="relative aspect-video w-full overflow-hidden rounded-lg border">
-                  {/* biome-ignore lint/performance/noImgElement: preview image */}
-                  <img
-                    src={backgroundPreviewUrl}
-                    alt="Template background"
-                    className="h-full w-full object-cover"
-                  />
-                </div>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={handleRemoveBackground}
-                  className="w-full"
-                >
-                  Remove Background
-                </Button>
-              </div>
-            ) : (
-              <FileUploader
-                value={backgroundFiles}
-                onValueChange={setBackgroundFiles}
-                onUpload={handleBackgroundUpload}
-                accept={{ 'image/*': ['.png', '.jpg', '.jpeg', '.webp'] }}
-                maxSize={5 * 1024 * 1024}
-                maxFileCount={1}
-                multiple={false}
-              />
-            )}
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={handleCancel} disabled={isLoading}>
-            {t('common.cancel')}
-          </Button>
-          <Button
-            onClick={handleSaveTemplate}
-            disabled={isLoading || !templateName.trim()}
-          >
-            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {t('ws-board-templates.save_dialog.confirm')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,142 +0,0 @@
-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

@@ -1,118 +0,0 @@
-'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.test.tsx

@@ -1,52 +0,0 @@
-import '@testing-library/jest-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, waitFor } from '@testing-library/react';
-import type { ReactNode } from 'react';
-import { describe, expect, it, vi } from 'vitest';
-import { listWorkspaceTaskTemplates } from './task-template-api';
-import { TaskTemplateClient } from './task-template-client';
-
-vi.mock('next-intl', () => ({
-  useTranslations: () => (key: string, values?: Record<string, string>) =>
-    values?.count ? `${key}:${values.count}` : key,
-}));
-
-vi.mock('@tuturuuu/internal-api/tasks', () => ({
-  listWorkspaceTaskBoards: vi.fn(async () => ({ boards: [] })),
-  listWorkspaceTaskLists: vi.fn(async () => ({ lists: [] })),
-}));
-
-vi.mock('./task-template-api', () => ({
-  createWorkspaceTaskTemplate: vi.fn(),
-  deleteWorkspaceTaskTemplate: vi.fn(),
-  instantiateWorkspaceTaskTemplate: vi.fn(),
-  listWorkspaceTaskTemplates: vi.fn(async () => ({ templates: [] })),
-  saveWorkspaceTaskTemplateFromTask: vi.fn(),
-}));
-
-function renderWithQueryClient(ui: ReactNode) {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-        staleTime: 30_000,
-      },
-    },
-  });
-
-  return render(
-    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
-  );
-}
-
-describe('TaskTemplateClient', () => {
-  it('fetches task templates even when the server shell starts empty', async () => {
-    renderWithQueryClient(
-      <TaskTemplateClient initialTemplates={[]} wsId="ws-1" />
-    );
-
-    await waitFor(() => {
-      expect(listWorkspaceTaskTemplates).toHaveBeenCalledWith('ws-1');
-    });
-  });
-});