@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/boards/board-public-link-section.tsx

@@ -1,231 +0,0 @@
-'use client';
-
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  ChevronDown,
-  Copy,
-  ExternalLink,
-  Globe2,
-  Info,
-  Loader2,
-  Trash2,
-} from '@tuturuuu/icons';
-import {
-  disableWorkspaceTaskBoardPublicLink,
-  enableWorkspaceTaskBoardPublicLink,
-  getWorkspaceTaskBoardPublicLink,
-  type WorkspaceTaskBoardPublicLink,
-} from '@tuturuuu/internal-api/tasks';
-import { Badge } from '@tuturuuu/ui/badge';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@tuturuuu/ui/collapsible';
-import { Input } from '@tuturuuu/ui/input';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@tuturuuu/ui/tooltip';
-import { cn } from '@tuturuuu/utils/format';
-import { useLocale, useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { toast } from 'sonner';
-
-interface BoardPublicLinkSectionProps {
-  boardId: string;
-  open: boolean;
-  wsId: string;
-}
-
-function buildPublicBoardUrl(
-  locale: string,
-  link: WorkspaceTaskBoardPublicLink | null
-) {
-  if (!link?.code) return '';
-
-  const path = `/${locale}/shared/task-boards/${link.code}`;
-  if (typeof window === 'undefined') return path;
-  return `${window.location.origin}${path}`;
-}
-
-export function BoardPublicLinkSection({
-  boardId,
-  open,
-  wsId,
-}: BoardPublicLinkSectionProps) {
-  const t = useTranslations();
-  const locale = useLocale();
-  const queryClient = useQueryClient();
-  const [sectionOpen, setSectionOpen] = useState(false);
-  const queryKey = ['task-board-public-link', wsId, boardId] as const;
-
-  const publicLinkQuery = useQuery({
-    queryKey,
-    queryFn: () => getWorkspaceTaskBoardPublicLink(wsId, boardId),
-    enabled: open,
-    staleTime: 60_000,
-  });
-
-  const enableMutation = useMutation({
-    mutationFn: () => enableWorkspaceTaskBoardPublicLink(wsId, boardId),
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey });
-      toast.success(t('ws-task-boards.share.public.enabled'));
-    },
-    onError: () => {
-      toast.error(t('ws-task-boards.share.public.enable_failed'));
-    },
-  });
-
-  const disableMutation = useMutation({
-    mutationFn: () => disableWorkspaceTaskBoardPublicLink(wsId, boardId),
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey });
-      toast.success(t('ws-task-boards.share.public.disabled'));
-    },
-    onError: () => {
-      toast.error(t('ws-task-boards.share.public.disable_failed'));
-    },
-  });
-
-  const publicLink = publicLinkQuery.data?.publicLink ?? null;
-  const publicUrl = buildPublicBoardUrl(locale, publicLink);
-  const isMutating = enableMutation.isPending || disableMutation.isPending;
-  const statusBadge = publicLinkQuery.isLoading ? (
-    <Badge variant="secondary" className="gap-1 px-2 py-0.5 text-[10px]">
-      <Loader2 className="h-3 w-3 animate-spin" />
-      {t('common.loading')}
-    </Badge>
-  ) : publicLink ? (
-    <Badge className="bg-dynamic-green/10 px-2 py-0.5 text-[10px] text-dynamic-green">
-      {t('common.enabled')}
-    </Badge>
-  ) : (
-    <Badge variant="secondary" className="px-2 py-0.5 text-[10px]">
-      {t('common.disabled')}
-    </Badge>
-  );
-
-  async function copyPublicUrl() {
-    if (!publicUrl) return;
-
-    try {
-      await navigator.clipboard.writeText(publicUrl);
-      toast.success(t('ws-task-boards.share.public.copy_success'));
-    } catch {
-      toast.error(t('ws-task-boards.share.public.copy_failed'));
-    }
-  }
-
-  function openPublicUrl() {
-    if (!publicUrl || typeof window === 'undefined') return;
-    window.open(publicUrl, '_blank', 'noopener,noreferrer');
-  }
-
-  return (
-    <Collapsible
-      open={sectionOpen}
-      onOpenChange={setSectionOpen}
-      className="rounded-md border"
-    >
-      <div className="flex min-h-11 items-center gap-2 px-3">
-        <CollapsibleTrigger asChild>
-          <button
-            type="button"
-            className="flex min-w-0 flex-1 items-center gap-2 text-left transition-colors hover:text-foreground"
-          >
-            <Globe2 className="h-4 w-4 text-muted-foreground" />
-            <span className="min-w-0 flex-1 truncate font-medium text-sm">
-              {t('ws-task-boards.share.public.title')}
-            </span>
-            {statusBadge}
-            <ChevronDown
-              className={cn(
-                'h-4 w-4 shrink-0 text-muted-foreground transition-transform',
-                sectionOpen && 'rotate-180'
-              )}
-            />
-          </button>
-        </CollapsibleTrigger>
-        <TooltipProvider delayDuration={0} skipDelayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                className="text-muted-foreground transition-colors hover:text-foreground"
-                aria-label={t('ws-task-boards.share.note')}
-              >
-                <Info className="h-3.5 w-3.5" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent className="max-w-xs">
-              {t('ws-task-boards.share.public.tooltip')}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-
-      <CollapsibleContent className="border-t p-3">
-        {publicLinkQuery.isLoading ? (
-          <div className="flex items-center gap-2 rounded-md border border-dashed p-3 text-muted-foreground text-sm">
-            <Loader2 className="h-4 w-4 animate-spin" />
-            {t('common.loading')}
-          </div>
-        ) : publicLink ? (
-          <div className="grid gap-2 sm:grid-cols-[1fr_auto_auto_auto]">
-            <Input value={publicUrl} readOnly className="min-w-0" />
-            <Button
-              type="button"
-              variant="outline"
-              onClick={copyPublicUrl}
-              disabled={!publicUrl}
-            >
-              <Copy className="h-4 w-4" />
-              {t('ws-task-boards.share.public.copy')}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={openPublicUrl}
-              disabled={!publicUrl}
-            >
-              <ExternalLink className="h-4 w-4" />
-              {t('ws-task-boards.share.public.open')}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => disableMutation.mutate()}
-              disabled={isMutating}
-            >
-              {disableMutation.isPending ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Trash2 className="h-4 w-4" />
-              )}
-              {t('ws-task-boards.share.public.disable')}
-            </Button>
-          </div>
-        ) : (
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => enableMutation.mutate()}
-            disabled={isMutating}
-          >
-            {enableMutation.isPending ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <Globe2 className="h-4 w-4" />
-            )}
-            {t('ws-task-boards.share.public.enable')}
-          </Button>
-        )}
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}

package/src/components/ui/tu-do/boards/board-selector.tsx

@@ -1,301 +0,0 @@
-'use client';
-
-import { useQuery } from '@tanstack/react-query';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { Button } from '@tuturuuu/ui/button';
-import { Combobox } from '@tuturuuu/ui/custom/combobox';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import { Label } from '@tuturuuu/ui/label';
-import { useTranslations } from 'next-intl';
-import { useCallback, useId, useMemo, useState } from 'react';
-import { CreateListDialog } from '../shared/create-list-dialog';
-import { TaskBoardForm } from './form';
-
-interface Board {
-  id: string;
-  name: string;
-  task_lists: TaskList[];
-}
-
-interface BoardSelectorProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  wsId: string;
-  currentBoardId: string;
-  currentListId?: string;
-  taskCount: number;
-  onMove: (boardId: string, listId: string) => void;
-  isMoving?: boolean;
-}
-
-export function BoardSelector({
-  open,
-  onOpenChange,
-  wsId,
-  currentBoardId,
-  currentListId,
-  taskCount,
-  onMove,
-  isMoving = false,
-}: BoardSelectorProps) {
-  const t = useTranslations();
-  const tc = useTranslations('common');
-  const [selectedBoardId, setSelectedBoardId] =
-    useState<string>(currentBoardId);
-  const [selectedListId, setSelectedListId] = useState<string>('');
-  const [newBoardDialogOpen, setNewBoardDialogOpen] = useState(false);
-  const [newBoardName, setNewBoardName] = useState<string>('');
-  const [newListDialogOpen, setNewListDialogOpen] = useState(false);
-  const [newListName, setNewListName] = useState<string>('');
-
-  // Generate unique IDs for form elements
-  const boardSelectId = useId();
-  const listSelectId = useId();
-
-  // Fetch boards with their lists
-  const { data: boardsData, isLoading } = useQuery<{ boards: Board[] }>({
-    queryKey: ['boards-with-lists', wsId],
-    queryFn: async () => {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/boards-with-lists`,
-        { cache: 'no-store' }
-      );
-      if (!response.ok) {
-        throw new Error('Failed to fetch boards');
-      }
-      return response.json();
-    },
-    enabled: open,
-  });
-
-  const boards = useMemo(() => {
-    return boardsData?.boards || [];
-  }, [boardsData?.boards]);
-
-  const selectedBoard = useMemo(() => {
-    return boards.find((board) => board.id === selectedBoardId);
-  }, [boards, selectedBoardId]);
-
-  const availableLists = useMemo(() => {
-    const lists = selectedBoard?.task_lists || [];
-    // When moving from a specific list, exclude it from the target options
-    if (currentListId && selectedBoardId === currentBoardId) {
-      return lists.filter((list) => list.id !== currentListId);
-    }
-    return lists;
-  }, [selectedBoard, currentListId, selectedBoardId, currentBoardId]);
-
-  const selectedList = useMemo(() => {
-    return availableLists.find((list) => list.id === selectedListId);
-  }, [availableLists, selectedListId]);
-
-  const handleBoardSelect = useCallback((boardId: string) => {
-    setSelectedBoardId(boardId);
-    setSelectedListId(''); // Reset list selection when board changes
-  }, []);
-
-  const handleListSelect = useCallback((listId: string) => {
-    setSelectedListId(listId);
-  }, []);
-
-  const handleMove = useCallback(() => {
-    if (selectedBoardId && selectedListId) {
-      onMove(selectedBoardId, selectedListId);
-    }
-  }, [selectedBoardId, selectedListId, onMove]);
-
-  const canMove = selectedBoardId && selectedListId && !isMoving;
-
-  const resetSelections = useCallback(() => {
-    setSelectedBoardId(currentBoardId);
-    setSelectedListId('');
-  }, [currentBoardId]);
-
-  // Reset selections when dialog closes
-  const handleOpenChange = useCallback(
-    (open: boolean) => {
-      if (!open) {
-        resetSelections();
-      }
-      onOpenChange(open);
-    },
-    [onOpenChange, resetSelections]
-  );
-
-  if (isLoading) {
-    return (
-      <Dialog open={open} onOpenChange={handleOpenChange}>
-        <DialogContent className="sm:max-w-125">
-          <DialogHeader>
-            <DialogTitle>
-              {tc('move_tasks_title', { count: taskCount })}
-            </DialogTitle>
-            <DialogDescription>{tc('loading_boards')}</DialogDescription>
-          </DialogHeader>
-          <div className="flex h-32 items-center justify-center">
-            <div className="h-6 w-6 animate-spin rounded-full border-2 border-dynamic-blue/20 border-t-dynamic-blue"></div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-125">
-        <DialogHeader>
-          <DialogTitle>
-            {tc('move_tasks_title', { count: taskCount })}
-          </DialogTitle>
-          <DialogDescription>
-            {tc('move_tasks_description', { count: taskCount })}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-4">
-          {/* Board Selection */}
-          <div className="space-y-2">
-            <Label htmlFor={boardSelectId}>{tc('destination_board')}</Label>
-            <Combobox
-              t={t}
-              mode="single"
-              options={boards.map((board) => ({
-                value: board.id,
-                label: board.name,
-              }))}
-              placeholder={tc('select_or_create_board')}
-              selected={selectedBoardId}
-              onChange={(value) => handleBoardSelect(value as string)}
-              onCreate={(name) => {
-                setNewBoardName(name);
-                setNewBoardDialogOpen(true);
-              }}
-              className="w-full"
-            />
-          </div>
-
-          {/* List Selection */}
-          <div className="space-y-2">
-            <Label htmlFor={listSelectId}>{tc('destination_list')}</Label>
-            <Combobox
-              t={t}
-              mode="single"
-              options={availableLists.map((list) => ({
-                value: list.id,
-                label: list.name,
-              }))}
-              placeholder={
-                !selectedBoardId
-                  ? tc('select_board_first')
-                  : tc('select_or_create_list')
-              }
-              selected={selectedListId}
-              onChange={(value) => handleListSelect(value as string)}
-              onCreate={
-                selectedBoardId
-                  ? (name) => {
-                      setNewListName(name);
-                      setNewListDialogOpen(true);
-                    }
-                  : undefined
-              }
-              disabled={!selectedBoardId}
-              className="w-full"
-            />
-          </div>
-
-          {/* Preview */}
-          {selectedBoard && selectedList && (
-            <div className="rounded-lg border bg-muted/50 p-3">
-              <div className="font-medium text-sm">{tc('move_preview')}</div>
-              <div className="mt-1 text-muted-foreground text-sm">
-                {tc('moving_tasks_to', { count: taskCount })}{' '}
-                <span className="font-medium text-foreground">
-                  {selectedList.name}
-                </span>{' '}
-                in{' '}
-                <span className="font-medium text-foreground">
-                  {selectedBoard.name}
-                </span>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <DialogFooter className="gap-2">
-          <Button
-            variant="outline"
-            onClick={() => handleOpenChange(false)}
-            disabled={isMoving}
-          >
-            {tc('cancel')}
-          </Button>
-          <Button onClick={handleMove} disabled={!canMove} className="min-w-25">
-            {isMoving ? (
-              <div className="flex items-center gap-2">
-                <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground/20 border-t-primary-foreground"></div>
-                {tc('moving')}
-              </div>
-            ) : (
-              tc('move_tasks_count', { count: taskCount })
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-
-      {/* Board Creation Dialog */}
-      <Dialog open={newBoardDialogOpen} onOpenChange={setNewBoardDialogOpen}>
-        <DialogContent
-          className="p-0"
-          style={
-            {
-              maxWidth: '1200px',
-              width: '85vw',
-            } as React.CSSProperties
-          }
-          onOpenAutoFocus={(e) => e.preventDefault()}
-        >
-          <TaskBoardForm
-            wsId={wsId}
-            data={{ name: newBoardName }}
-            onFinish={(formData) => {
-              setNewBoardDialogOpen(false);
-              setNewBoardName('');
-              // Auto-select the newly created board
-              if (formData?.id) {
-                setSelectedBoardId(formData.id);
-              }
-            }}
-          />
-        </DialogContent>
-      </Dialog>
-
-      {/* List Creation Dialog */}
-      {selectedBoardId && (
-        <CreateListDialog
-          open={newListDialogOpen}
-          onOpenChange={setNewListDialogOpen}
-          boardId={selectedBoardId}
-          wsId={wsId}
-          initialName={newListName}
-          onSuccess={(listId) => {
-            setSelectedListId(listId);
-            setNewListName('');
-          }}
-          translations={{
-            listNameAlreadyExists: t(
-              'ws-task-boards.layout_settings.list_name_exists'
-            ),
-          }}
-        />
-      )}
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/boards/board-share-dialog.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import { Share2 } from '@tuturuuu/icons';
-import type { WorkspaceTaskBoard } from '@tuturuuu/types';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import { useTranslations } from 'next-intl';
-import { useRef } from 'react';
-import { BoardShareSettingsPanel } from './board-share-settings-panel';
-
-interface BoardShareDialogProps {
-  board: Pick<WorkspaceTaskBoard, 'id' | 'name'>;
-  onOpenChange: (open: boolean) => void;
-  open: boolean;
-  wsId: string;
-}
-
-export function BoardShareDialog({
-  board,
-  onOpenChange,
-  open,
-  wsId,
-}: BoardShareDialogProps) {
-  const t = useTranslations();
-  const initialFocusRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="max-h-[min(88dvh,720px)] overflow-y-auto sm:max-w-xl"
-        onClick={(e) => e.stopPropagation()}
-        onOpenAutoFocus={(event) => {
-          event.preventDefault();
-          initialFocusRef.current?.focus();
-        }}
-      >
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Share2 className="h-5 w-5" />
-            {t('ws-task-boards.share.title', {
-              name: board.name || t('common.untitled'),
-            })}
-          </DialogTitle>
-          <DialogDescription className="sr-only">
-            {t('ws-task-boards.share.title', {
-              name: board.name || t('common.untitled'),
-            })}
-          </DialogDescription>
-        </DialogHeader>
-        <div ref={initialFocusRef} tabIndex={-1} className="sr-only" />
-
-        <BoardShareSettingsPanel board={board} enabled={open} wsId={wsId} />
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t('common.close')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}