@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tu-do/templates/templateId/edit-template-dialog.tsx

@@ -1,300 +0,0 @@
-'use client';
-
-import { Loader2, Pencil } from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  FileUploader,
-  type StatedFile,
-} from '@tuturuuu/ui/custom/file-uploader';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import { Input } from '@tuturuuu/ui/input';
-import { Label } from '@tuturuuu/ui/label';
-import {
-  deleteTemplateBackground,
-  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';
-
-interface EditTemplateDialogProps {
-  wsId: string;
-  templateId: string;
-  templateName: string;
-  templateDescription: string | null;
-  templateVisibility: 'private' | 'workspace' | 'public';
-  templateBackgroundPath?: string | null;
-  templateBackgroundUrl?: string | null;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function EditTemplateDialog({
-  wsId,
-  templateId,
-  templateName,
-  templateDescription,
-  templateVisibility,
-  templateBackgroundPath,
-  templateBackgroundUrl,
-  open,
-  onOpenChange,
-}: EditTemplateDialogProps) {
-  const t = useTranslations('ws-board-templates');
-  const router = useRouter();
-
-  const [isEditing, setIsEditing] = useState(false);
-  const [editName, setEditName] = useState(templateName);
-  const [editDescription, setEditDescription] = useState(
-    templateDescription || ''
-  );
-  const [editVisibility, setEditVisibility] = useState(templateVisibility);
-  const [backgroundFiles, setBackgroundFiles] = useState<StatedFile[]>([]);
-  const [backgroundPath, setBackgroundPath] = useState<string | null>(null); // Storage path
-  const [backgroundPreviewUrl, setBackgroundPreviewUrl] = useState<
-    string | null
-  >(templateBackgroundUrl || null);
-  const [pendingBackgroundDeletionPath, setPendingBackgroundDeletionPath] =
-    useState<string | null>(null);
-
-  useEffect(() => {
-    if (!open) {
-      setEditName(templateName);
-      setEditDescription(templateDescription || '');
-      setEditVisibility(templateVisibility);
-      setBackgroundFiles([]);
-      setBackgroundPath(null);
-      setBackgroundPreviewUrl(templateBackgroundUrl || null);
-      setPendingBackgroundDeletionPath(null);
-    }
-  }, [
-    open,
-    templateBackgroundUrl,
-    templateDescription,
-    templateName,
-    templateVisibility,
-  ]);
-
-  const nameId = useId();
-  const descId = useId();
-  const visibilityId = useId();
-
-  const handleEdit = async () => {
-    if (!editName.trim()) {
-      toast.error(t('detail.name_required'));
-      return;
-    }
-
-    setIsEditing(true);
-    try {
-      const requestedBackgroundPath =
-        backgroundPath !== null
-          ? backgroundPath
-          : pendingBackgroundDeletionPath
-            ? null
-            : undefined;
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/templates/${templateId}`,
-        {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            name: editName.trim(),
-            description: editDescription.trim() || null,
-            visibility: editVisibility,
-            backgroundPath: requestedBackgroundPath,
-          }),
-        }
-      );
-
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Failed to update template');
-      }
-
-      if (pendingBackgroundDeletionPath) {
-        try {
-          await deleteTemplateBackground(wsId, pendingBackgroundDeletionPath);
-        } catch (error) {
-          console.error('Failed to delete old background:', error);
-        }
-      }
-
-      toast.success(t('detail.update_success'));
-      onOpenChange(false);
-      router.refresh();
-    } catch (error) {
-      console.error('Error updating template:', error);
-      toast.error(
-        error instanceof Error ? error.message : t('detail.update_error')
-      );
-    } finally {
-      setIsEditing(false);
-    }
-  };
-
-  const handleBackgroundUpload = async (files: StatedFile[]) => {
-    await handleTemplateBackgroundUpload(
-      files,
-      wsId,
-      (path) => {
-        const firstFile = files[0];
-        if (!firstFile) {
-          return;
-        }
-
-        if (templateBackgroundPath) {
-          setPendingBackgroundDeletionPath(templateBackgroundPath);
-        }
-
-        setBackgroundPreviewUrl(firstFile.url);
-        setBackgroundPath(path); // Store storage path for API
-      },
-      (error) => {
-        console.error('Background upload error:', error);
-      }
-    );
-  };
-
-  const handleRemoveBackground = () => {
-    if (templateBackgroundPath) {
-      setPendingBackgroundDeletionPath(templateBackgroundPath);
-    }
-    setBackgroundPath(null);
-    setBackgroundPreviewUrl(null);
-    setBackgroundFiles([]);
-  };
-
-  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">
-            <Pencil className="h-5 w-5" />
-            {t('detail.edit_title')}
-          </DialogTitle>
-          <DialogDescription>{t('detail.edit_description')}</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor={nameId}>{t('save_dialog.name_label')}</Label>
-            <Input
-              id={nameId}
-              value={editName}
-              onChange={(e) => setEditName(e.target.value)}
-              placeholder={t('save_dialog.name_placeholder')}
-              maxLength={255}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={descId}>{t('save_dialog.description_label')}</Label>
-            <Textarea
-              id={descId}
-              value={editDescription}
-              onChange={(e) => setEditDescription(e.target.value)}
-              placeholder={t('save_dialog.description_placeholder')}
-              rows={2}
-              maxLength={500}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={visibilityId}>
-              {t('save_dialog.visibility_label')}
-            </Label>
-            <Select
-              value={editVisibility}
-              onValueChange={(v) =>
-                setEditVisibility(v as 'private' | 'workspace' | 'public')
-              }
-            >
-              <SelectTrigger id={visibilityId}>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="private">
-                  {t('visibility.private')}
-                </SelectItem>
-                <SelectItem value="workspace">
-                  {t('visibility.workspace')}
-                </SelectItem>
-                <SelectItem value="public">{t('visibility.public')}</SelectItem>
-              </SelectContent>
-            </Select>
-            <p className="text-muted-foreground text-xs">
-              {editVisibility === 'private'
-                ? t('visibility.private_hint')
-                : t('visibility.workspace_hint')}
-            </p>
-          </div>
-          <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={() => onOpenChange(false)}
-            disabled={isEditing}
-          >
-            {t('common.cancel')}
-          </Button>
-          <Button onClick={handleEdit} disabled={isEditing || !editName.trim()}>
-            {isEditing && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {t('common.save_changes')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/templates/templateId/share-template-dialog.tsx

@@ -1,261 +0,0 @@
-'use client';
-
-import { Loader2, Mail, Share2, UserPlus, Users, X } from '@tuturuuu/icons';
-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 { Separator } from '@tuturuuu/ui/separator';
-import { toast } from '@tuturuuu/ui/sonner';
-import { useTranslations } from 'next-intl';
-import { useCallback, useEffect, useId, useState } from 'react';
-
-interface TemplateShare {
-  id: string;
-  user_id: string | null;
-  email: string | null;
-  permission: string;
-  created_at: string;
-}
-
-interface ShareTemplateDialogProps {
-  wsId: string;
-  templateId: string;
-  isOwner: boolean;
-  visibility: 'private' | 'workspace' | 'public';
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function ShareTemplateDialog({
-  wsId,
-  templateId,
-  isOwner,
-  visibility,
-  open,
-  onOpenChange,
-}: ShareTemplateDialogProps) {
-  const t = useTranslations('ws-board-templates');
-
-  const [shares, setShares] = useState<TemplateShare[]>([]);
-  const [isLoadingShares, setIsLoadingShares] = useState(false);
-  const [isAddingShare, setIsAddingShare] = useState(false);
-  const [isDeletingShare, setIsDeletingShare] = useState<string | null>(null);
-  const [shareEmail, setShareEmail] = useState('');
-
-  const shareEmailId = useId();
-
-  // Fetch shares when dialog opens (only for private templates owned by user)
-  const fetchShares = useCallback(async () => {
-    if (!isOwner || visibility !== 'private') return;
-
-    setIsLoadingShares(true);
-    try {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/templates/${templateId}/shares`
-      );
-
-      if (response.ok) {
-        const data = await response.json();
-        setShares(data.shares || []);
-      }
-    } catch (error) {
-      console.error('Error fetching shares:', error);
-    } finally {
-      setIsLoadingShares(false);
-    }
-  }, [wsId, templateId, isOwner, visibility]);
-
-  useEffect(() => {
-    if (open) {
-      fetchShares();
-    }
-  }, [open, fetchShares]);
-
-  const handleAddShare = async () => {
-    if (!shareEmail.trim()) {
-      toast.error(t('share.email_required'));
-      return;
-    }
-
-    // Basic email validation
-    if (!shareEmail.includes('@')) {
-      toast.error(t('share.invalid_email'));
-      return;
-    }
-
-    setIsAddingShare(true);
-    try {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/templates/${templateId}/shares`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ email: shareEmail.trim().toLowerCase() }),
-        }
-      );
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to share template');
-      }
-
-      toast.success(t('share.add_success'));
-      setShareEmail('');
-      fetchShares();
-    } catch (error) {
-      console.error('Error adding share:', error);
-      toast.error(
-        error instanceof Error ? error.message : t('share.add_error')
-      );
-    } finally {
-      setIsAddingShare(false);
-    }
-  };
-
-  const handleRemoveShare = async (shareId: string) => {
-    setIsDeletingShare(shareId);
-    try {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/templates/${templateId}/shares?shareId=${shareId}`,
-        {
-          method: 'DELETE',
-        }
-      );
-
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Failed to remove share');
-      }
-
-      toast.success(t('share.remove_success'));
-      setShares((prev) => prev.filter((s) => s.id !== shareId));
-    } catch (error) {
-      console.error('Error removing share:', error);
-      toast.error(
-        error instanceof Error ? error.message : t('share.remove_error')
-      );
-    } finally {
-      setIsDeletingShare(null);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Share2 className="h-5 w-5" />
-            {t('share.dialog_title')}
-          </DialogTitle>
-          <DialogDescription>{t('share.dialog_description')}</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          {/* Add new share */}
-          <div className="space-y-2">
-            <Label htmlFor={shareEmailId}>{t('share.email_label')}</Label>
-            <div className="flex gap-2">
-              <Input
-                id={shareEmailId}
-                type="email"
-                value={shareEmail}
-                onChange={(e) => setShareEmail(e.target.value)}
-                placeholder={t('share.email_placeholder')}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    handleAddShare();
-                  }
-                }}
-                disabled={isAddingShare}
-              />
-              <Button
-                onClick={handleAddShare}
-                disabled={isAddingShare || !shareEmail.trim()}
-              >
-                {isAddingShare ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  <UserPlus className="h-4 w-4" />
-                )}
-              </Button>
-            </div>
-            <p className="text-muted-foreground text-xs">
-              {t('share.email_hint')}
-            </p>
-          </div>
-
-          <Separator />
-
-          {/* Existing shares */}
-          <div className="space-y-2">
-            <Label>{t('share.shared_with')}</Label>
-            {isLoadingShares ? (
-              <div className="flex items-center justify-center py-4">
-                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-              </div>
-            ) : shares.length === 0 ? (
-              <div className="rounded-md bg-muted/50 py-6 text-center">
-                <Users className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
-                <p className="text-muted-foreground text-sm">
-                  {t('share.no_shares')}
-                </p>
-              </div>
-            ) : (
-              <div className="max-h-48 space-y-2 overflow-y-auto">
-                {shares.map((share) => (
-                  <div
-                    key={share.id}
-                    className="flex items-center justify-between rounded-md bg-muted/50 p-2"
-                  >
-                    <div className="flex items-center gap-2">
-                      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
-                        <Mail className="h-4 w-4 text-primary" />
-                      </div>
-                      <div>
-                        <p className="text-sm">
-                          {share.email || share.user_id}
-                        </p>
-                        <p className="text-muted-foreground text-xs">
-                          {t('share.view_access')}
-                        </p>
-                      </div>
-                    </div>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => handleRemoveShare(share.id)}
-                      disabled={isDeletingShare === share.id}
-                      className="h-8 w-8 p-0 text-muted-foreground hover:text-dynamic-red"
-                    >
-                      {isDeletingShare === share.id ? (
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                      ) : (
-                        <X className="h-4 w-4" />
-                      )}
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t('common.close')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,127 +0,0 @@
-'use client';
-
-import { useQuery } from '@tanstack/react-query';
-import { Loader2 } from '@tuturuuu/icons';
-import {
-  getWorkspaceTemplate,
-  getWorkspaceTemplateBackgroundUrl,
-  type InternalApiWorkspaceTemplate,
-} from '@tuturuuu/internal-api/templates';
-import TemplateDetailClient from '@tuturuuu/ui/tu-do/templates/templateId/client';
-import type { BoardTemplateWithContent } from '@tuturuuu/ui/tu-do/templates/types';
-
-interface Props {
-  wsId: string;
-  templateId: string;
-  templatesBasePath: string;
-  embedded?: boolean;
-  initialTemplate?: InternalApiWorkspaceTemplate;
-  initialBackgroundUrl?: string | null;
-  onClose?: () => void;
-}
-
-function mapTemplateToDetail(
-  template: Awaited<ReturnType<typeof getWorkspaceTemplate>>,
-  backgroundUrl: string | null
-): BoardTemplateWithContent {
-  const content = template.content ?? {};
-
-  return {
-    id: template.id,
-    wsId: template.wsId,
-    createdBy: template.createdBy,
-    sourceBoardId: template.sourceBoardId,
-    name: template.name,
-    description: template.description,
-    visibility: template.visibility,
-    backgroundPath: template.backgroundPath ?? null,
-    backgroundUrl,
-    createdAt: template.createdAt,
-    updatedAt: template.updatedAt,
-    isOwner: template.isOwner,
-    stats: {
-      lists: template.stats?.lists ?? content.lists?.length ?? 0,
-      tasks:
-        template.stats?.tasks ??
-        content.lists?.reduce(
-          (acc, list) => acc + (list.tasks?.length ?? 0),
-          0
-        ) ??
-        0,
-      labels: template.stats?.labels ?? content.labels?.length ?? 0,
-    },
-    content: {
-      lists: (content.lists ?? []).map((list) => ({
-        name: list.name ?? '',
-        status: list.status ?? 'active',
-        color: null,
-        position: null,
-        archived: false,
-        tasks: (list.tasks ?? []).map((task) => ({
-          name: task.name,
-          description: task.description ?? null,
-          priority: task.priority ?? null,
-          completed: task.completed,
-          start_date: task.start_date ?? null,
-          end_date: task.end_date ?? null,
-        })),
-      })),
-      labels: content.labels ?? [],
-      settings: content.settings ?? {},
-    },
-  };
-}
-
-export default function TaskTemplateDetailPageClient({
-  wsId,
-  templateId,
-  templatesBasePath,
-  embedded = false,
-  initialTemplate,
-  initialBackgroundUrl,
-  onClose,
-}: Props) {
-  const { data: template, error } = useQuery({
-    queryKey: ['workspace-template', wsId, templateId],
-    queryFn: () => getWorkspaceTemplate(wsId, templateId),
-    enabled: !!wsId && !!templateId,
-    initialData: initialTemplate,
-  });
-
-  const { data: backgroundUrl } = useQuery({
-    queryKey: [
-      'workspace-template-background',
-      wsId,
-      templateId,
-      template?.backgroundPath ?? null,
-    ],
-    queryFn: () => getWorkspaceTemplateBackgroundUrl(wsId, templateId),
-    enabled: !!wsId && !!templateId && !!template?.backgroundPath,
-    staleTime: 30 * 60 * 1000,
-    initialData: initialBackgroundUrl,
-  });
-
-  if (error) {
-    throw error;
-  }
-
-  if (!template) {
-    return (
-      <div className="flex min-h-[320px] items-center justify-center">
-        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <TemplateDetailClient
-        embedded={embedded}
-        onClose={onClose}
-        wsId={wsId}
-        template={mapTemplateToDetail(template, backgroundUrl ?? null)}
-        templatesBasePath={templatesBasePath}
-      />
-    </div>
-  );
-}