@tuturuuu/ui 0.17.0 → 0.18.0

package/src/components/ui/tu-do/shared/clear-menu-item.tsx

@@ -1,34 +0,0 @@
-import { X } from '@tuturuuu/icons';
-
-interface ClearMenuItemProps {
-  label: string;
-  onClick: () => void;
-}
-
-/**
- * ClearMenuItem component displays a destructive action to clear/remove a value.
- * Features consistent red styling for clear actions across popovers.
- *
- * @example
- * ```tsx
- * <ClearMenuItem
- *   label="Clear priority"
- *   onClick={() => updatePriority(null)}
- * />
- * ```
- */
-export function ClearMenuItem({ label, onClick }: ClearMenuItemProps) {
-  return (
-    <>
-      <div className="my-1 border-t" />
-      <button
-        type="button"
-        onClick={onClick}
-        className="flex w-full items-center gap-2.5 rounded-md px-2 py-2 text-left text-dynamic-red/80 text-sm transition-colors hover:bg-dynamic-red/10 hover:text-dynamic-red"
-      >
-        <X className="h-4 w-4" />
-        {label}
-      </button>
-    </>
-  );
-}

package/src/components/ui/tu-do/shared/create-list-dialog.tsx

@@ -1,401 +0,0 @@
-'use client';
-
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import {
-  Circle,
-  CircleCheck,
-  CircleDashed,
-  CircleX,
-  ClipboardCheck,
-  FileText,
-  Loader2,
-} from '@tuturuuu/icons';
-import { createWorkspaceTaskList } from '@tuturuuu/internal-api/tasks';
-import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
-import type { TaskBoardStatus } from '@tuturuuu/types/primitives/TaskBoard';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-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 { toast } from '@tuturuuu/ui/sonner';
-import { cn } from '@tuturuuu/utils/format';
-import { getDefaultTaskListColorForStatus } from '@tuturuuu/utils/task-list-status';
-import { useEffect, useRef, useState } from 'react';
-import { isTaskListNameExistsError } from './task-board-errors';
-
-interface CreateListDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  boardId: string;
-  wsId?: string;
-  initialName?: string;
-  initialStatus?: TaskBoardStatus;
-  onSuccess?: (listId: string) => void;
-  translations?: {
-    createNewList?: string;
-    addListDescription?: string;
-    listName?: string;
-    listNamePlaceholder?: string;
-    statusCategory?: string;
-    color?: string;
-    cancel?: string;
-    creating?: string;
-    createList?: string;
-    listCreatedSuccessfully?: string;
-    failedToCreateList?: string;
-    listNameAlreadyExists?: string;
-    // Status labels
-    backlog?: string;
-    active?: string;
-    review?: string;
-    doneStatus?: string;
-    closed?: string;
-    documents?: string;
-  };
-}
-
-const statusConfig = {
-  not_started: {
-    icon: CircleDashed,
-    label: 'Backlog',
-    color: 'text-dynamic-gray',
-  },
-  active: {
-    icon: Circle,
-    label: 'Active',
-    color: 'text-dynamic-blue',
-  },
-  review: {
-    icon: ClipboardCheck,
-    label: 'Review',
-    color: 'text-dynamic-orange',
-  },
-  done: {
-    icon: CircleCheck,
-    label: 'Done',
-    color: 'text-dynamic-green',
-  },
-  closed: {
-    icon: CircleX,
-    label: 'Closed',
-    color: 'text-dynamic-purple',
-  },
-  documents: {
-    icon: FileText,
-    label: 'Documents',
-    color: 'text-dynamic-cyan',
-  },
-};
-
-const colorOptions: { value: SupportedColor; label: string; class: string }[] =
-  [
-    { value: 'GRAY', label: 'Gray', class: 'bg-dynamic-gray/30' },
-    { value: 'RED', label: 'Red', class: 'bg-dynamic-red/30' },
-    { value: 'BLUE', label: 'Blue', class: 'bg-dynamic-blue/30' },
-    { value: 'GREEN', label: 'Green', class: 'bg-dynamic-green/30' },
-    { value: 'YELLOW', label: 'Yellow', class: 'bg-dynamic-yellow/30' },
-    { value: 'ORANGE', label: 'Orange', class: 'bg-dynamic-orange/30' },
-    { value: 'PURPLE', label: 'Purple', class: 'bg-dynamic-purple/30' },
-    { value: 'PINK', label: 'Pink', class: 'bg-dynamic-pink/30' },
-    { value: 'INDIGO', label: 'Indigo', class: 'bg-dynamic-indigo/30' },
-    { value: 'CYAN', label: 'Cyan', class: 'bg-dynamic-cyan/30' },
-  ];
-
-const statuses: TaskBoardStatus[] = [
-  'documents',
-  'not_started',
-  'active',
-  'review',
-  'done',
-  'closed',
-];
-
-export function CreateListDialog({
-  open,
-  onOpenChange,
-  boardId,
-  wsId,
-  initialName = '',
-  initialStatus = 'active',
-  onSuccess,
-  translations,
-}: CreateListDialogProps) {
-  const t = {
-    createNewList: translations?.createNewList ?? 'Create New List',
-    addListDescription:
-      translations?.addListDescription ??
-      'Add a new list to organize your tasks.',
-    listName: translations?.listName ?? 'List Name',
-    listNamePlaceholder:
-      translations?.listNamePlaceholder ??
-      'e.g., In Review, Testing, Ready for Deploy',
-    statusCategory: translations?.statusCategory ?? 'Status Category',
-    color: translations?.color ?? 'Color',
-    cancel: translations?.cancel ?? 'Cancel',
-    creating: translations?.creating ?? 'Creating...',
-    createList: translations?.createList ?? 'Create List',
-    listCreatedSuccessfully:
-      translations?.listCreatedSuccessfully ?? 'List created successfully',
-    failedToCreateList:
-      translations?.failedToCreateList ?? 'Failed to create list',
-    listNameAlreadyExists:
-      translations?.listNameAlreadyExists ??
-      'A list with this name already exists on this board',
-    // Status labels
-    backlog: translations?.backlog ?? 'Backlog',
-    active: translations?.active ?? 'Active',
-    review: translations?.review ?? 'Review',
-    doneStatus: translations?.doneStatus ?? 'Done',
-    closed: translations?.closed ?? 'Closed',
-    documents: translations?.documents ?? 'Documents',
-  };
-
-  const statusLabels: Record<TaskBoardStatus, string> = {
-    not_started: t.backlog,
-    active: t.active,
-    review: t.review,
-    done: t.doneStatus,
-    closed: t.closed,
-    documents: t.documents,
-  };
-  const queryClient = useQueryClient();
-  const resolvedInitialStatus = initialStatus;
-
-  const [newListName, setNewListName] = useState('');
-  const [newListStatus, setNewListStatus] = useState<TaskBoardStatus>(
-    resolvedInitialStatus
-  );
-  const [newListColor, setNewListColor] = useState<SupportedColor>(
-    getDefaultTaskListColorForStatus(resolvedInitialStatus)
-  );
-  const submitInFlightRef = useRef(false);
-
-  // Sync initial fields when dialog opens
-  useEffect(() => {
-    if (!open) return;
-
-    setNewListName(initialName);
-    setNewListStatus(resolvedInitialStatus);
-    setNewListColor(getDefaultTaskListColorForStatus(resolvedInitialStatus));
-  }, [initialName, open, resolvedInitialStatus]);
-
-  useEffect(() => {
-    if (!open) return;
-    const expectedDefaultColor =
-      getDefaultTaskListColorForStatus(newListStatus);
-    setNewListColor((current) =>
-      current === expectedDefaultColor ? current : expectedDefaultColor
-    );
-  }, [newListStatus, open]);
-
-  const resetForm = () => {
-    setNewListName('');
-    setNewListStatus(resolvedInitialStatus);
-    setNewListColor(getDefaultTaskListColorForStatus(resolvedInitialStatus));
-  };
-
-  const createListMutation = useMutation({
-    mutationFn: async ({
-      name,
-      status,
-      color,
-    }: {
-      name: string;
-      status: TaskBoardStatus;
-      color: SupportedColor;
-    }) => {
-      if (!wsId) {
-        throw new Error('Workspace ID is required');
-      }
-
-      const { list } = await createWorkspaceTaskList(wsId, boardId, {
-        name,
-        status,
-        color,
-      });
-
-      return list;
-    },
-    onSuccess: async (data) => {
-      toast.success(t.listCreatedSuccessfully);
-
-      // Use setQueryData for immediate UI update without flicker
-      // Realtime subscription handles cross-user sync
-      queryClient.setQueryData(
-        ['task_lists', boardId],
-        (old: TaskList[] | undefined) => {
-          if (!old) return [data as TaskList];
-          // Check if already exists (from realtime)
-          if (old.some((l) => l.id === data.id)) return old;
-          return [...old, data as TaskList];
-        }
-      );
-
-      // Invalidate sidebar board lists (acceptable - not causing main view flicker)
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ['boards-with-lists'] }),
-        wsId
-          ? queryClient.invalidateQueries({
-              queryKey: ['workspace', wsId, 'boards-with-lists'],
-            })
-          : Promise.resolve(),
-      ]);
-
-      // Then call onSuccess callback which will select the list
-      onSuccess?.(data.id);
-
-      // Finally close dialog and reset form
-      onOpenChange(false);
-      resetForm();
-    },
-    onError: (error: any) => {
-      toast.error(
-        isTaskListNameExistsError(error)
-          ? t.listNameAlreadyExists
-          : error.message || t.failedToCreateList
-      );
-    },
-    onSettled: () => {
-      submitInFlightRef.current = false;
-    },
-  });
-
-  const handleCreateList = () => {
-    if (
-      !newListName.trim() ||
-      submitInFlightRef.current ||
-      createListMutation.isPending
-    ) {
-      return;
-    }
-
-    submitInFlightRef.current = true;
-    createListMutation.mutate({
-      name: newListName.trim(),
-      status: newListStatus,
-      color: newListColor,
-    });
-  };
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(open) => {
-        onOpenChange(open);
-        if (!open) resetForm();
-      }}
-    >
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{t.createNewList}</DialogTitle>
-          <DialogDescription>{t.addListDescription}</DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="space-y-2">
-            <Label htmlFor="new-list-name">{t.listName}</Label>
-            <Input
-              id="new-list-name"
-              value={newListName}
-              onChange={(e) => setNewListName(e.target.value)}
-              placeholder={t.listNamePlaceholder}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && newListName.trim()) {
-                  e.preventDefault();
-                  handleCreateList();
-                }
-              }}
-              autoFocus
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="new-list-status">{t.statusCategory}</Label>
-            <Select
-              value={newListStatus}
-              onValueChange={(value) =>
-                setNewListStatus(value as TaskBoardStatus)
-              }
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {statuses.map((status) => {
-                  const Icon = statusConfig[status].icon;
-                  return (
-                    <SelectItem key={status} value={status}>
-                      <div className="flex items-center gap-2">
-                        <Icon
-                          className={cn('h-4 w-4', statusConfig[status].color)}
-                        />
-                        {statusLabels[status]}
-                      </div>
-                    </SelectItem>
-                  );
-                })}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2">
-            <Label>{t.color}</Label>
-            <div className="grid grid-cols-5 gap-2">
-              {colorOptions.map((color) => (
-                <button
-                  type="button"
-                  key={color.value}
-                  onClick={() => setNewListColor(color.value)}
-                  className={cn(
-                    'h-8 w-8 rounded border-2 transition-all',
-                    color.class,
-                    newListColor === color.value &&
-                      'scale-110 ring-2 ring-primary'
-                  )}
-                  title={color.label}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={() => {
-              onOpenChange(false);
-              resetForm();
-            }}
-            disabled={createListMutation.isPending}
-          >
-            {t.cancel}
-          </Button>
-          <Button
-            onClick={handleCreateList}
-            disabled={!newListName.trim() || createListMutation.isPending}
-          >
-            {createListMutation.isPending ? (
-              <>
-                <Loader2 className="h-4 w-4 animate-spin" />
-                {t.creating}
-              </>
-            ) : (
-              t.createList
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/shared/cursor-overlay-multi-wrapper.tsx

@@ -1,245 +0,0 @@
-'use client';
-
-import { getCurrentUserProfile } from '@tuturuuu/internal-api';
-import type { User } from '@tuturuuu/types/primitives/User';
-import {
-  type CursorPosition,
-  useCursorTracking,
-} from '@tuturuuu/ui/hooks/useCursorTracking';
-import { useEffect, useMemo, useState } from 'react';
-import type { ListStatusFilter } from './board-header';
-import CursorOverlay from './cursor-overlay';
-import type { BoardFiltersMetadata, TaskFilters } from './task-filter.types';
-
-type CursorScopeMetadata =
-  | { type: 'board'; boardId: string }
-  | { type: 'task-description'; taskId: string };
-
-type CursorOverlayMetadata = Partial<BoardFiltersMetadata> & {
-  cursorScope: CursorScopeMetadata;
-};
-
-/**
- * Efficiently compares two sorted arrays of primitive values
- */
-function arraysEqual<T extends string | number>(arr1: T[], arr2: T[]): boolean {
-  if (arr1.length !== arr2.length) return false;
-  for (let i = 0; i < arr1.length; i++) {
-    if (arr1[i] !== arr2[i]) return false;
-  }
-  return true;
-}
-
-/**
- * Checks if two cursor metadata objects represent the same view configuration
- */
-function isMatchingFilters(
-  metadata1?: CursorOverlayMetadata,
-  metadata2?: CursorOverlayMetadata
-): boolean {
-  if (!metadata1 || !metadata2) return true; // Show all cursors if no metadata
-  if (!isMatchingCursorScope(metadata1.cursorScope, metadata2.cursorScope)) {
-    return false;
-  }
-
-  if (!metadata1.filters || !metadata2.filters) return true;
-  if (!metadata1.listStatusFilter || !metadata2.listStatusFilter) return true;
-
-  // Check list status filter
-  if (metadata1.listStatusFilter !== metadata2.listStatusFilter) return false;
-
-  const f1 = metadata1.filters;
-  const f2 = metadata2.filters;
-
-  // Check sort option
-  if (f1.sortBy !== f2.sortBy) return false;
-
-  // Check label filters (compare IDs)
-  const labels1 = f1.labels.map((l) => l.id).sort();
-  const labels2 = f2.labels.map((l) => l.id).sort();
-  if (!arraysEqual(labels1, labels2)) return false;
-
-  // Check assignee filters (compare IDs)
-  const assignees1 = f1.assignees.map((a) => a.id).sort();
-  const assignees2 = f2.assignees.map((a) => a.id).sort();
-  if (!arraysEqual(assignees1, assignees2)) return false;
-
-  // Check project filters (compare IDs)
-  const projects1 = f1.projects.map((p) => p.id).sort();
-  const projects2 = f2.projects.map((p) => p.id).sort();
-  if (!arraysEqual(projects1, projects2)) return false;
-
-  // Check priority filters
-  const priorities1 = [...f1.priorities].sort();
-  const priorities2 = [...f2.priorities].sort();
-  if (!arraysEqual(priorities1, priorities2)) return false;
-
-  // Check due date range
-  const date1From = f1.dueDateRange?.from?.getTime();
-  const date1To = f1.dueDateRange?.to?.getTime();
-  const date2From = f2.dueDateRange?.from?.getTime();
-  const date2To = f2.dueDateRange?.to?.getTime();
-  if (date1From !== date2From || date1To !== date2To) return false;
-
-  // Check estimation range
-  if (
-    f1.estimationRange?.min !== f2.estimationRange?.min ||
-    f1.estimationRange?.max !== f2.estimationRange?.max
-  )
-    return false;
-
-  // Check boolean flags
-  if (f1.includeUnassigned !== f2.includeUnassigned) return false;
-
-  // Don't compare searchQuery as it's too volatile for cursor filtering
-  return true;
-}
-
-function isMatchingCursorScope(
-  scope1: CursorScopeMetadata,
-  scope2: CursorScopeMetadata
-) {
-  if (scope1.type !== scope2.type) return false;
-  if (scope1.type === 'board' && scope2.type === 'board') {
-    return scope1.boardId === scope2.boardId;
-  }
-  if (
-    scope1.type === 'task-description' &&
-    scope2.type === 'task-description'
-  ) {
-    return scope1.taskId === scope2.taskId;
-  }
-  return false;
-}
-
-export default function CursorOverlayMultiWrapper({
-  channelName,
-  containerRef,
-  cursorScope,
-  listStatusFilter,
-  filters,
-}: {
-  channelName: string;
-  containerRef: React.RefObject<HTMLDivElement | null>;
-  cursorScope: CursorScopeMetadata;
-  listStatusFilter?: ListStatusFilter;
-  filters?: TaskFilters;
-}) {
-  const [overlaySize, setOverlaySize] = useState<{
-    width: number;
-    height: number;
-  }>({ width: 0, height: 0 });
-  const [currentUser, setCurrentUser] = useState<User | null>(null);
-  const cursorScopeType = cursorScope.type;
-  const cursorScopeId =
-    cursorScope.type === 'board' ? cursorScope.boardId : cursorScope.taskId;
-
-  // Fetch current user
-  useEffect(() => {
-    const fetchUser = async () => {
-      try {
-        const userData = await getCurrentUserProfile();
-        if (!userData?.id) return;
-        setCurrentUser({
-          avatar_url: userData.avatar_url,
-          display_name: userData.display_name,
-          id: userData.id,
-        });
-      } catch (err) {
-        console.warn('Error fetching user:', err);
-      }
-    };
-
-    fetchUser();
-  }, []);
-
-  const metadata: CursorOverlayMetadata = useMemo(() => {
-    const resolvedCursorScope =
-      cursorScopeType === 'board'
-        ? ({ boardId: cursorScopeId, type: 'board' } as const)
-        : ({ taskId: cursorScopeId, type: 'task-description' } as const);
-
-    if (!listStatusFilter || !filters) {
-      return { cursorScope: resolvedCursorScope };
-    }
-
-    return {
-      cursorScope: resolvedCursorScope,
-      listStatusFilter,
-      filters,
-    };
-  }, [cursorScopeId, cursorScopeType, listStatusFilter, filters]);
-
-  const { cursors, error } = useCursorTracking(
-    channelName,
-    containerRef,
-    currentUser ?? undefined,
-    metadata
-  );
-
-  // Filter cursors based on matching view metadata
-  const filteredCursors = useMemo(() => {
-    const filtered = new Map<string, CursorPosition>();
-
-    for (const [userId, cursor] of cursors.entries()) {
-      if (!cursor.metadata) {
-        continue;
-      }
-
-      // Filter based on view matching
-      if (
-        isMatchingFilters(metadata, cursor.metadata as CursorOverlayMetadata)
-      ) {
-        filtered.set(userId, cursor);
-      }
-    }
-
-    return filtered;
-  }, [cursors, metadata]);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    try {
-      const updateOverlaySize = () => {
-        try {
-          const rect = containerRef.current?.getBoundingClientRect();
-          if (rect) {
-            setOverlaySize({ width: rect.width, height: rect.height });
-          }
-        } catch (err) {
-          // Silently fail on resize errors
-          console.warn('Cursor overlay resize error:', err);
-        }
-      };
-
-      // Initial update
-      updateOverlaySize();
-
-      // Update on resize
-      const resizeObserver = new ResizeObserver(updateOverlaySize);
-      resizeObserver.observe(containerRef.current);
-
-      return () => {
-        resizeObserver.disconnect();
-      };
-    } catch (err) {
-      // Catch any setup errors
-      console.warn('Cursor overlay setup error:', err);
-      return;
-    }
-  }, [containerRef]);
-
-  // Don't render if errors detected or user not fetched yet
-  if (error || !currentUser) {
-    return null;
-  }
-
-  return (
-    <CursorOverlay
-      cursors={filteredCursors}
-      width={overlaySize.width}
-      height={overlaySize.height}
-    />
-  );
-}