@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/shared/mention-system/__tests__/mention-system.test.ts

@@ -1,250 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import {
-  createInitialSuggestionState,
-  isSameSuggestionState,
-  normalizeForSearch,
-} from '../types';
-import { useMentionSuggestions } from '../use-mention-suggestions';
-
-describe('useMentionSuggestions', () => {
-  const mockMembers = [
-    { user_id: 'user-1', display_name: 'John Doe', avatar_url: null },
-    { user_id: 'user-2', display_name: 'Jane Smith', avatar_url: null },
-  ];
-
-  const mockWorkspaces = [
-    { id: 'ws-1', name: 'Engineering', handle: 'eng', personal: false },
-    { id: 'ws-2', name: 'Personal', handle: null, personal: true },
-  ];
-
-  const mockProjects = [
-    { id: 'proj-1', name: 'Website Redesign', status: 'active' },
-    { id: 'proj-2', name: 'Mobile App', status: 'planning' },
-  ];
-
-  const mockTasks = [
-    {
-      id: 'task-1',
-      name: 'Fix login bug',
-      list: { name: 'In Progress' },
-    },
-    {
-      id: 'task-2',
-      name: 'Update documentation',
-      list: { name: 'To Do' },
-    },
-  ];
-
-  it('should generate user mention options', () => {
-    const { result } = renderHook(() =>
-      useMentionSuggestions({
-        workspaceMembers: mockMembers,
-        currentWorkspace: null,
-        taskProjects: [],
-        workspaceTasks: [],
-        query: '',
-      })
-    );
-
-    expect(result.current.mentionUserOptions).toHaveLength(2);
-    expect(result.current.mentionUserOptions[0]!.type).toBe('user');
-    expect(result.current.mentionUserOptions[0]!.label).toBe('Jane Smith');
-  });
-
-  it('should generate workspace mention options excluding personal', () => {
-    const { result } = renderHook(() =>
-      useMentionSuggestions({
-        workspaceMembers: [],
-        currentWorkspace: mockWorkspaces[0]!, // Non-personal workspace
-        taskProjects: [],
-        workspaceTasks: [],
-        query: '',
-      })
-    );
-
-    expect(result.current.mentionWorkspaceOptions).toHaveLength(1);
-    expect(result.current.mentionWorkspaceOptions[0]!.label).toBe(
-      'Engineering'
-    );
-  });
-
-  it('should generate project mention options', () => {
-    const { result } = renderHook(() =>
-      useMentionSuggestions({
-        workspaceMembers: [],
-        currentWorkspace: null,
-        taskProjects: mockProjects,
-        workspaceTasks: [],
-        query: '',
-      })
-    );
-
-    expect(result.current.mentionProjectOptions).toHaveLength(2);
-    expect(result.current.mentionProjectOptions[0]!.type).toBe('project');
-  });
-
-  it('should filter tasks excluding current task', () => {
-    const { result } = renderHook(() =>
-      useMentionSuggestions({
-        workspaceMembers: [],
-        currentWorkspace: null,
-        taskProjects: [],
-        workspaceTasks: mockTasks,
-        currentTaskId: 'task-1',
-        query: '',
-      })
-    );
-
-    expect(result.current.mentionTaskOptions).toHaveLength(1);
-    expect(result.current.mentionTaskOptions[0]!.id).toBe('task-2');
-  });
-
-  it('should generate date mention options', () => {
-    const { result } = renderHook(() =>
-      useMentionSuggestions({
-        workspaceMembers: [],
-        currentWorkspace: null,
-        taskProjects: [],
-        workspaceTasks: [],
-        query: '',
-      })
-    );
-
-    expect(result.current.mentionDateOptions).toHaveLength(5);
-    expect(result.current.mentionDateOptions[0]!.id).toBe('today');
-    expect(result.current.mentionDateOptions[4]!.id).toBe('custom-date');
-  });
-
-  it('should filter options by query', () => {
-    const { result } = renderHook(() =>
-      useMentionSuggestions({
-        workspaceMembers: mockMembers,
-        currentWorkspace: null,
-        taskProjects: [],
-        workspaceTasks: [],
-        query: 'john',
-      })
-    );
-
-    const filtered = result.current.filteredMentionOptions;
-    expect(filtered.length).toBeGreaterThan(0);
-    expect(
-      filtered.some((opt) => opt.label.toLowerCase().includes('john'))
-    ).toBe(true);
-  });
-
-  it('should limit tasks when no query', () => {
-    const manyTasks = Array.from({ length: 20 }, (_, i) => ({
-      id: `task-${i}`,
-      name: `Task ${i}`,
-      list: { name: 'To Do' },
-    }));
-
-    const { result } = renderHook(() =>
-      useMentionSuggestions({
-        workspaceMembers: [],
-        currentWorkspace: null,
-        taskProjects: [],
-        workspaceTasks: manyTasks,
-        query: '',
-      })
-    );
-
-    const filtered = result.current.filteredMentionOptions;
-    const taskCount = filtered.filter((opt) => opt.type === 'task').length;
-    expect(taskCount).toBeLessThanOrEqual(8);
-  });
-
-  it('should show external user option when no matches', () => {
-    const { result } = renderHook(() =>
-      useMentionSuggestions({
-        workspaceMembers: [],
-        currentWorkspace: null,
-        taskProjects: [],
-        workspaceTasks: [],
-        query: 'NonExistentUser',
-      })
-    );
-
-    const filtered = result.current.filteredMentionOptions;
-    expect(filtered).toHaveLength(1);
-    expect(filtered[0]!.type).toBe('external-user');
-    expect(filtered[0]!.label).toBe('NonExistentUser');
-  });
-});
-
-describe('Mention utility functions', () => {
-  describe('normalizeForSearch', () => {
-    it('should convert to lowercase', () => {
-      expect(normalizeForSearch('HELLO')).toBe('hello');
-    });
-
-    it('should remove diacritics', () => {
-      expect(normalizeForSearch('café')).toBe('cafe');
-      expect(normalizeForSearch('naïve')).toBe('naive');
-    });
-
-    it('should trim whitespace', () => {
-      expect(normalizeForSearch('  hello  ')).toBe('hello');
-    });
-
-    it('should handle empty strings', () => {
-      expect(normalizeForSearch('')).toBe('');
-    });
-  });
-
-  describe('isSameSuggestionState', () => {
-    it('should return true for identical states', () => {
-      const state1 = createInitialSuggestionState();
-      const state2 = createInitialSuggestionState();
-      expect(isSameSuggestionState(state1, state2)).toBe(true);
-    });
-
-    it('should return false for different open states', () => {
-      const state1 = { ...createInitialSuggestionState(), open: true };
-      const state2 = createInitialSuggestionState();
-      expect(isSameSuggestionState(state1, state2)).toBe(false);
-    });
-
-    it('should return false for different queries', () => {
-      const state1 = { ...createInitialSuggestionState(), query: 'test' };
-      const state2 = createInitialSuggestionState();
-      expect(isSameSuggestionState(state1, state2)).toBe(false);
-    });
-
-    it('should return false for different ranges', () => {
-      const state1 = {
-        ...createInitialSuggestionState(),
-        range: { from: 0, to: 5 },
-      };
-      const state2 = {
-        ...createInitialSuggestionState(),
-        range: { from: 0, to: 10 },
-      };
-      expect(isSameSuggestionState(state1, state2)).toBe(false);
-    });
-
-    it('should return false for different positions', () => {
-      const state1 = {
-        ...createInitialSuggestionState(),
-        position: { left: 0, top: 0 },
-      };
-      const state2 = {
-        ...createInitialSuggestionState(),
-        position: { left: 10, top: 10 },
-      };
-      expect(isSameSuggestionState(state1, state2)).toBe(false);
-    });
-  });
-
-  describe('createInitialSuggestionState', () => {
-    it('should create closed state with no query', () => {
-      const state = createInitialSuggestionState();
-      expect(state.open).toBe(false);
-      expect(state.query).toBe('');
-      expect(state.range).toBeNull();
-      expect(state.position).toBeNull();
-    });
-  });
-});

package/src/components/ui/tu-do/shared/mention-system/mention-menu.tsx

@@ -1,217 +0,0 @@
-import {
-  Box,
-  BriefcaseBusiness,
-  Calendar,
-  CircleCheck,
-  Loader2,
-  User,
-} from '@tuturuuu/icons';
-import { Badge } from '@tuturuuu/ui/badge';
-import { cn } from '@tuturuuu/utils/format';
-import Image from 'next/image';
-import { createPortal } from 'react-dom';
-import type { MentionOption } from './types';
-import { mentionGroupOrder, mentionTypeStyles } from './types';
-
-interface MentionMenuProps {
-  isOpen: boolean;
-  position: { left: number; top: number } | null;
-  options: MentionOption[];
-  highlightIndex: number;
-  isLoading?: boolean;
-  query?: string;
-  onSelect: (option: MentionOption) => void;
-  onHighlightChange: (index: number) => void;
-  listRef?: React.RefObject<HTMLDivElement | null>;
-}
-
-export function MentionMenu({
-  isOpen,
-  position,
-  options,
-  highlightIndex,
-  isLoading = false,
-  query = '',
-  onSelect,
-  onHighlightChange,
-  listRef,
-}: MentionMenuProps) {
-  if (!isOpen || !position || typeof window === 'undefined') {
-    return null;
-  }
-
-  const groups = mentionGroupOrder
-    .map((group) => ({
-      ...group,
-      options: options.filter((option) => option.type === group.type),
-    }))
-    .filter((group) => group.options.length > 0);
-
-  return createPortal(
-    <div
-      role="dialog"
-      className="pointer-events-auto fixed z-200 flex w-[360px] flex-col overflow-hidden rounded-lg border border-dynamic-border bg-popover/95 shadow-xl backdrop-blur"
-      style={{
-        top: position.top,
-        left: position.left,
-      }}
-    >
-      <div className="shrink-0 border-dynamic-border/60 border-b px-3 py-2 font-medium text-muted-foreground text-xs uppercase tracking-wide">
-        Mention people, workspaces, projects, dates, or tasks
-      </div>
-      {isLoading && (
-        <div className="flex shrink-0 items-center gap-2 px-3 py-2 text-muted-foreground text-xs">
-          <Loader2 className="h-3 w-3 animate-spin" />
-          Fetching latest context…
-        </div>
-      )}
-      <div
-        ref={listRef}
-        className="scrollbar-thin max-h-80 flex-1 overflow-y-auto overscroll-contain py-1"
-        style={{ maxHeight: 320 }}
-        onWheel={(e) => {
-          // Allow wheel events for scrolling
-          e.stopPropagation();
-        }}
-        onTouchMove={(e) => {
-          // Allow touch move for mobile scrolling
-          e.stopPropagation();
-        }}
-        onMouseDown={(e) => {
-          // Prevent editor from taking focus when clicking to scroll
-          if (e.target === e.currentTarget) {
-            e.stopPropagation();
-          }
-        }}
-      >
-        {options.length === 0 ? (
-          <div className="px-3 py-3 text-muted-foreground text-sm">
-            {query
-              ? 'No matches found. Try a different keyword.'
-              : 'Start typing to mention teammates, workspaces, projects, dates, or tasks.'}
-          </div>
-        ) : (
-          (() => {
-            let optionCursor = -1;
-            return groups.map((group) => (
-              <div key={group.type} className="py-1">
-                <div className="px-3 pb-1 font-semibold text-[11px] text-muted-foreground uppercase tracking-wide">
-                  {group.title}
-                </div>
-                {group.options.map((option, optionIndex) => {
-                  optionCursor += 1;
-                  const currentIndex = optionCursor;
-                  const isActive = currentIndex === highlightIndex;
-                  const typeMeta = mentionTypeStyles[option.type];
-                  const fallbackGlyph =
-                    option.type === 'user' || option.type === 'external-user'
-                      ? (option.label || '')
-                          .split(/\s+/)
-                          .map((part) => part?.[0]?.toUpperCase() ?? '')
-                          .join('')
-                          .slice(0, 2) || typeMeta.avatarFallback
-                      : typeMeta.avatarFallback;
-                  const badgeLabel =
-                    option.type === 'user'
-                      ? 'Person'
-                      : option.type === 'workspace'
-                        ? 'Workspace'
-                        : option.type === 'project'
-                          ? 'Project'
-                          : option.type === 'date'
-                            ? 'Date'
-                            : option.type === 'external-user'
-                              ? 'Guest'
-                              : 'Task';
-
-                  return (
-                    <button
-                      data-mention-item={currentIndex}
-                      key={`${option.type}-${option.id || optionIndex}`}
-                      type="button"
-                      className={cn(
-                        'flex w-full items-center gap-3 px-3 py-2 text-left text-sm transition-colors',
-                        isActive
-                          ? 'bg-dynamic-blue/20 text-foreground ring-1 ring-dynamic-blue/40'
-                          : 'text-muted-foreground hover:bg-dynamic-surface/70 hover:text-foreground'
-                      )}
-                      onMouseDown={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        onSelect(option);
-                      }}
-                      onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        onSelect(option);
-                      }}
-                      onKeyDown={(event) => {
-                        if (event.key === 'Enter' || event.key === ' ') {
-                          event.preventDefault();
-                          event.stopPropagation();
-                          onSelect(option);
-                        }
-                      }}
-                      onMouseEnter={() => onHighlightChange(currentIndex)}
-                    >
-                      <div
-                        className={cn(
-                          'flex h-7 w-7 items-center justify-center overflow-hidden rounded-full border font-semibold text-xs uppercase',
-                          typeMeta.avatarClass,
-                          option.avatarUrl ? 'p-0' : 'px-1'
-                        )}
-                      >
-                        {option.avatarUrl ? (
-                          <Image
-                            src={option.avatarUrl}
-                            alt={option.label}
-                            width={28}
-                            height={28}
-                            className="h-full w-full object-cover"
-                            referrerPolicy="no-referrer"
-                          />
-                        ) : option.type === 'workspace' ? (
-                          <BriefcaseBusiness className="h-3.5 w-3.5" />
-                        ) : option.type === 'project' ? (
-                          <Box className="h-3.5 w-3.5" />
-                        ) : option.type === 'task' ? (
-                          <CircleCheck className="h-3.5 w-3.5" />
-                        ) : option.type === 'date' ? (
-                          <Calendar className="h-3.5 w-3.5" />
-                        ) : option.type === 'external-user' ? (
-                          <User className="h-3.5 w-3.5" />
-                        ) : (
-                          <span className="truncate">{fallbackGlyph}</span>
-                        )}
-                      </div>
-                      <div className="flex min-w-0 flex-1 flex-col">
-                        <span className="truncate font-medium text-foreground text-sm">
-                          {option.label}
-                        </span>
-                        {option.subtitle && (
-                          <span className="truncate text-muted-foreground text-xs">
-                            {option.subtitle}
-                          </span>
-                        )}
-                      </div>
-                      <Badge
-                        variant="secondary"
-                        className={cn(
-                          'shrink-0 font-semibold text-[10px] uppercase tracking-wide',
-                          typeMeta.badgeClass
-                        )}
-                      >
-                        {badgeLabel}
-                      </Badge>
-                    </button>
-                  );
-                })}
-              </div>
-            ));
-          })()
-        )}
-      </div>
-    </div>,
-    document.body
-  );
-}

package/src/components/ui/tu-do/shared/mention-system/types.ts

@@ -1,141 +0,0 @@
-export type MentionOptionType =
-  | 'user'
-  | 'workspace'
-  | 'task'
-  | 'project'
-  | 'date'
-  | 'external-user';
-
-export interface MentionOption {
-  id: string;
-  label: string;
-  subtitle?: string;
-  avatarUrl?: string | null;
-  type: MentionOptionType;
-  payload?: Record<string, unknown>;
-}
-
-export interface SuggestionRange {
-  from: number;
-  to: number;
-}
-
-export interface SuggestionState {
-  open: boolean;
-  query: string;
-  range: SuggestionRange | null;
-  position: { left: number; top: number } | null;
-}
-
-export const mentionGroupOrder: Array<{
-  type: MentionOptionType;
-  title: string;
-}> = [
-  { type: 'user', title: 'People' },
-  { type: 'external-user', title: 'External Users' },
-  { type: 'workspace', title: 'Workspaces' },
-  { type: 'project', title: 'Projects' },
-  { type: 'task', title: 'Tasks' },
-  { type: 'date', title: 'Dates' },
-];
-
-export const mentionTypeStyles: Record<
-  MentionOptionType,
-  {
-    badgeClass: string;
-    avatarFallback: string;
-    avatarClass: string;
-    prefix: string;
-  }
-> = {
-  user: {
-    badgeClass:
-      'border border-dynamic-green/40 bg-dynamic-green/10 text-dynamic-green',
-    avatarFallback: '@',
-    avatarClass:
-      'bg-dynamic-green/20 text-dynamic-green border border-dynamic-green/30',
-    prefix: '@',
-  },
-  workspace: {
-    badgeClass:
-      'border border-dynamic-orange/40 bg-dynamic-orange/10 text-dynamic-orange',
-    avatarFallback: 'W',
-    avatarClass:
-      'bg-dynamic-orange/20 text-dynamic-orange border border-dynamic-orange/30',
-    prefix: '@',
-  },
-  project: {
-    badgeClass:
-      'border border-dynamic-cyan/40 bg-dynamic-cyan/10 text-dynamic-cyan',
-    avatarFallback: 'P',
-    avatarClass:
-      'bg-dynamic-cyan/20 text-dynamic-cyan border border-dynamic-cyan/30',
-    prefix: '@',
-  },
-  task: {
-    badgeClass:
-      'border border-dynamic-blue/40 bg-dynamic-blue/10 text-dynamic-blue',
-    avatarFallback: '#',
-    avatarClass:
-      'bg-dynamic-blue/20 text-dynamic-blue border border-dynamic-blue/30',
-    prefix: '#',
-  },
-  date: {
-    badgeClass:
-      'border border-dynamic-pink/40 bg-dynamic-pink/10 text-dynamic-pink',
-    avatarFallback: 'D',
-    avatarClass:
-      'bg-dynamic-pink/20 text-dynamic-pink border border-dynamic-pink/30',
-    prefix: '@',
-  },
-  'external-user': {
-    badgeClass: 'border border-border bg-muted text-muted-foreground',
-    avatarFallback: '@',
-    avatarClass: 'bg-muted text-muted-foreground border border-border',
-    prefix: '@',
-  },
-};
-
-export const createInitialSuggestionState = (): SuggestionState => ({
-  open: false,
-  query: '',
-  range: null,
-  position: null,
-});
-
-export const isSameSuggestionState = (
-  a: SuggestionState,
-  b: SuggestionState
-): boolean => {
-  if (a.open !== b.open) return false;
-  if (a.query !== b.query) return false;
-
-  if (!!a.range !== !!b.range) return false;
-  if (
-    a.range &&
-    b.range &&
-    (a.range.from !== b.range.from || a.range.to !== b.range.to)
-  ) {
-    return false;
-  }
-
-  if (!!a.position !== !!b.position) return false;
-  if (
-    a.position &&
-    b.position &&
-    (a.position.left !== b.position.left || a.position.top !== b.position.top)
-  ) {
-    return false;
-  }
-
-  return true;
-};
-
-// Normalize text for search: remove diacritics and convert to lowercase
-export const normalizeForSearch = (text: string): string => {
-  return text
-    .normalize('NFD') // Decompose combined characters
-    .replace(/[\u0300-\u036f]/g, '') // Remove diacritical marks
-    .toLowerCase()
-    .trim();
-};