@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-name-input.tsx

@@ -1,218 +0,0 @@
-import { Input } from '@tuturuuu/ui/input';
-import { Textarea } from '@tuturuuu/ui/textarea';
-import { MAX_TASK_NAME_LENGTH } from '@tuturuuu/utils/constants';
-import { useTranslations } from 'next-intl';
-import { useLayoutEffect, useRef } from 'react';
-import {
-  getNormalizedCursorPosition,
-  normalizeLiveTextReplacements,
-  normalizeTextReplacements,
-} from '../../../../text-editor/text-replacements';
-
-type TaskTitleControlElement = HTMLInputElement | HTMLTextAreaElement;
-
-interface TaskNameInputProps {
-  name: string;
-  isCreateMode: boolean;
-  titleInputRef: React.RefObject<TaskTitleControlElement | null>;
-  editorRef: React.RefObject<HTMLDivElement | null>;
-  lastCursorPositionRef: React.RefObject<number | null>;
-  targetEditorCursorRef: React.MutableRefObject<number | null>;
-  setName: (value: string) => void;
-  updateName: (value: string) => void;
-  flushNameUpdate: () => void;
-  disabled?: boolean;
-  variant?: 'fullscreen' | 'compact';
-  onSubmit?: () => void;
-}
-
-export function TaskNameInput({
-  name,
-  isCreateMode,
-  titleInputRef,
-  editorRef,
-  lastCursorPositionRef,
-  targetEditorCursorRef,
-  setName,
-  updateName,
-  flushNameUpdate,
-  disabled,
-  variant = 'fullscreen',
-  onSubmit,
-}: TaskNameInputProps) {
-  const t = useTranslations('ws-task-boards.dialog');
-  const isCompact = variant === 'compact';
-  const hasPlacedInitialCaretRef = useRef(false);
-
-  useLayoutEffect(() => {
-    if (hasPlacedInitialCaretRef.current || disabled) return;
-
-    const titleInput = titleInputRef.current;
-    if (!titleInput) return;
-
-    hasPlacedInitialCaretRef.current = true;
-    const endPosition = titleInput.value.length;
-
-    titleInput.focus();
-    titleInput.setSelectionRange(endPosition, endPosition);
-  }, [disabled, titleInputRef]);
-
-  const focusDescriptionEditor = () => {
-    if (isCompact) return;
-
-    targetEditorCursorRef.current = null;
-
-    setTimeout(() => {
-      const editorElement = editorRef.current?.querySelector(
-        '.ProseMirror'
-      ) as HTMLElement | null;
-
-      editorElement?.focus();
-    }, 0);
-  };
-
-  const handleChange = (e: React.ChangeEvent<TaskTitleControlElement>) => {
-    const rawValue = e.target.value;
-    const normalizedValue = normalizeLiveTextReplacements(rawValue);
-
-    if (rawValue !== normalizedValue) {
-      const rawCursorPosition = e.target.selectionStart ?? rawValue.length;
-      const nextCursorPosition = getNormalizedCursorPosition(
-        rawValue,
-        rawCursorPosition,
-        normalizeLiveTextReplacements
-      );
-
-      requestAnimationFrame(() => {
-        titleInputRef.current?.setSelectionRange(
-          nextCursorPosition,
-          nextCursorPosition
-        );
-      });
-    }
-
-    setName(normalizedValue);
-    // Trigger debounced save while typing (in edit mode)
-    if (!isCreateMode && normalizedValue.trim()) {
-      updateName(normalizedValue);
-    }
-  };
-
-  const handleBlur = (e: React.FocusEvent<TaskTitleControlElement>) => {
-    const normalizedValue = normalizeTextReplacements(e.target.value);
-
-    if (normalizedValue !== e.target.value) {
-      setName(normalizedValue);
-      if (!isCreateMode && normalizedValue.trim()) {
-        updateName(normalizedValue);
-      }
-    }
-
-    // Flush pending save immediately when user clicks away (in edit mode)
-    if (!isCreateMode && normalizedValue.trim()) {
-      flushNameUpdate();
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<TaskTitleControlElement>) => {
-    // Enter key moves to description
-    if (
-      e.key === 'Enter' &&
-      !e.altKey &&
-      !e.ctrlKey &&
-      !e.metaKey &&
-      !e.shiftKey
-    ) {
-      if (e.nativeEvent.isComposing || e.keyCode === 229) {
-        return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-      // Flush pending save immediately when pressing Enter (in edit mode)
-      if (!isCreateMode && e.currentTarget.value.trim()) {
-        flushNameUpdate();
-      }
-      if (isCompact) {
-        onSubmit?.();
-        return;
-      }
-      focusDescriptionEditor();
-    }
-
-    if (!isCompact && e.key === 'ArrowDown') {
-      e.preventDefault();
-      const input = e.currentTarget;
-      const cursorPosition = input.selectionStart ?? 0;
-
-      // Store cursor position for smart navigation
-      lastCursorPositionRef.current = cursorPosition;
-      targetEditorCursorRef.current = cursorPosition;
-
-      // Focus the editor - cursor positioning will be handled by the editor via prop
-      const editorElement = editorRef.current?.querySelector(
-        '.ProseMirror'
-      ) as HTMLElement;
-      if (editorElement) {
-        editorElement.focus();
-      }
-    }
-
-    // Right arrow at end of title moves to description
-    if (!isCompact && e.key === 'ArrowRight') {
-      const input = e.currentTarget;
-      const cursorPosition = input.selectionStart ?? 0;
-      const textLength = input.value.length;
-
-      // Only move if cursor is at the end
-      if (cursorPosition === textLength) {
-        e.preventDefault();
-        const editorElement = editorRef.current?.querySelector(
-          '.ProseMirror'
-        ) as HTMLElement;
-        if (editorElement) {
-          editorElement.focus();
-        }
-      }
-    }
-  };
-
-  if (isCompact) {
-    return (
-      <div className="group">
-        <Textarea
-          ref={titleInputRef as React.RefObject<HTMLTextAreaElement | null>}
-          data-task-name-input
-          disabled={disabled}
-          value={name}
-          maxLength={MAX_TASK_NAME_LENGTH}
-          rows={1}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          onKeyDown={handleKeyDown}
-          placeholder={t('task_name_placeholder')}
-          className="max-h-32 min-h-11 resize-none overflow-y-auto border-0 bg-transparent px-0 py-0 font-semibold text-base text-foreground leading-tight shadow-none transition-colors placeholder:text-muted-foreground/40 focus-visible:outline-0 focus-visible:ring-0 disabled:opacity-100 md:text-lg"
-          autoFocus
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="group">
-      <Input
-        ref={titleInputRef as React.RefObject<HTMLInputElement | null>}
-        data-task-name-input
-        disabled={disabled}
-        value={name}
-        maxLength={MAX_TASK_NAME_LENGTH}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        placeholder={t('task_name_placeholder')}
-        className="h-auto border-0 bg-transparent px-4 pt-4 pb-2 font-bold text-2xl text-foreground leading-tight tracking-tight shadow-none transition-colors placeholder:text-muted-foreground/30 focus-visible:outline-0 focus-visible:ring-0 disabled:opacity-100 md:px-8 md:pt-4 md:pb-2 md:text-2xl"
-        autoFocus
-      />
-    </div>
-  );
-}

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-suggestion-menus.tsx

@@ -1,148 +0,0 @@
-'use client';
-
-import { createPortal } from 'react-dom';
-import { CustomDatePickerDialog } from '../../custom-date-picker/custom-date-picker-dialog';
-import { MentionMenu } from '../../mention-system/mention-menu';
-import type {
-  MentionOption,
-  SuggestionState,
-} from '../../mention-system/types';
-import type { SlashCommandDefinition } from '../../slash-commands/definitions';
-import { SlashCommandMenu } from '../../slash-commands/slash-command-menu';
-
-export interface TaskSuggestionMenusProps {
-  // Slash command state
-  slashState: SuggestionState;
-  filteredSlashCommands: SlashCommandDefinition[];
-  slashHighlightIndex: number;
-  setSlashHighlightIndex: React.Dispatch<React.SetStateAction<number>>;
-  slashListRef: React.RefObject<HTMLDivElement | null>;
-
-  // Mention state
-  mentionState: SuggestionState;
-  filteredMentionOptions: MentionOption[];
-  mentionHighlightIndex: number;
-  setMentionHighlightIndex: React.Dispatch<React.SetStateAction<number>>;
-  mentionListRef: React.RefObject<HTMLDivElement | null>;
-  workspaceTasksLoading: boolean;
-
-  // Custom date picker state
-  showCustomDatePicker: boolean;
-  setShowCustomDatePicker: React.Dispatch<React.SetStateAction<boolean>>;
-  customDate: Date | undefined;
-  setCustomDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
-  includeTime: boolean;
-  setIncludeTime: React.Dispatch<React.SetStateAction<boolean>>;
-  selectedHour: string;
-  setSelectedHour: React.Dispatch<React.SetStateAction<string>>;
-  selectedMinute: string;
-  setSelectedMinute: React.Dispatch<React.SetStateAction<string>>;
-  selectedPeriod: 'AM' | 'PM';
-  setSelectedPeriod: React.Dispatch<React.SetStateAction<'AM' | 'PM'>>;
-
-  // Callbacks
-  executeSlashCommand: (command: SlashCommandDefinition) => void;
-  insertMentionOption: (option: MentionOption) => void;
-  handleCustomDateSelect: (date: Date) => void;
-}
-
-/**
- * Component that renders the slash command menu, mention menu, and custom date picker.
- * These are portaled to document.body to avoid z-index issues.
- */
-export function TaskSuggestionMenus({
-  slashState,
-  filteredSlashCommands,
-  slashHighlightIndex,
-  setSlashHighlightIndex,
-  slashListRef,
-  mentionState,
-  filteredMentionOptions,
-  mentionHighlightIndex,
-  setMentionHighlightIndex,
-  mentionListRef,
-  workspaceTasksLoading,
-  showCustomDatePicker,
-  setShowCustomDatePicker,
-  customDate,
-  setCustomDate,
-  includeTime,
-  setIncludeTime,
-  selectedHour,
-  setSelectedHour,
-  selectedMinute,
-  setSelectedMinute,
-  selectedPeriod,
-  setSelectedPeriod,
-  executeSlashCommand,
-  insertMentionOption,
-  handleCustomDateSelect,
-}: TaskSuggestionMenusProps) {
-  return (
-    <>
-      <SlashCommandMenu
-        isOpen={slashState.open}
-        position={slashState.position}
-        commands={filteredSlashCommands}
-        highlightIndex={slashHighlightIndex}
-        onSelect={executeSlashCommand}
-        onHighlightChange={setSlashHighlightIndex}
-        listRef={slashListRef}
-      />
-
-      <MentionMenu
-        isOpen={mentionState.open}
-        position={mentionState.position}
-        options={filteredMentionOptions}
-        highlightIndex={mentionHighlightIndex}
-        isLoading={workspaceTasksLoading}
-        query={mentionState.query}
-        onSelect={insertMentionOption}
-        onHighlightChange={setMentionHighlightIndex}
-        listRef={mentionListRef}
-      />
-
-      {showCustomDatePicker &&
-        mentionState.position &&
-        typeof document !== 'undefined' &&
-        createPortal(
-          <div
-            className="pointer-events-auto"
-            style={{
-              position: 'fixed',
-              top: mentionState.position.top,
-              left: mentionState.position.left,
-              zIndex: 9999,
-            }}
-          >
-            <CustomDatePickerDialog
-              selectedDate={customDate}
-              includeTime={includeTime}
-              selectedHour={selectedHour}
-              selectedMinute={selectedMinute}
-              selectedPeriod={selectedPeriod}
-              onDateSelect={setCustomDate}
-              onIncludeTimeChange={setIncludeTime}
-              onHourChange={setSelectedHour}
-              onMinuteChange={setSelectedMinute}
-              onPeriodChange={setSelectedPeriod}
-              onCancel={() => {
-                setShowCustomDatePicker(false);
-                setCustomDate(undefined);
-                setIncludeTime(false);
-                setSelectedHour('12');
-                setSelectedMinute('00');
-                setSelectedPeriod('PM');
-              }}
-              onInsert={() => {
-                if (customDate) {
-                  handleCustomDateSelect(customDate);
-                }
-              }}
-            />
-          </div>,
-          document.body
-        )}
-    </>
-  );
-}

package/src/components/ui/tu-do/shared/task-edit-dialog/constants.ts

@@ -1,18 +0,0 @@
-/**
- * Constants for task edit dialog
- */
-
-// Debounce delay for Yjs update events (milliseconds)
-export const DESCRIPTION_SYNC_DEBOUNCE_MS = 500;
-
-// Width of suggestion menus (pixels)
-export const SUGGESTION_MENU_WIDTH = 360;
-
-// Name update debounce delay (milliseconds)
-export const NAME_UPDATE_DEBOUNCE_MS = 1000;
-
-// Draft save debounce delay (milliseconds)
-export const DRAFT_SAVE_DEBOUNCE_MS = 300;
-
-// Task search debounce delay (milliseconds)
-export const TASK_SEARCH_DEBOUNCE_MS = 300;

package/src/components/ui/tu-do/shared/task-edit-dialog/context-menu-guard.test.ts

@@ -1,37 +0,0 @@
-// @vitest-environment jsdom
-
-import { describe, expect, it } from 'vitest';
-import { shouldPreserveNativeContextMenu } from './utils';
-
-describe('shouldPreserveNativeContextMenu', () => {
-  it('preserves the native context menu inside the rich text editor', () => {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'ProseMirror';
-
-    const paragraph = document.createElement('p');
-    const text = document.createTextNode('Task description');
-
-    paragraph.appendChild(text);
-    wrapper.appendChild(paragraph);
-    document.body.appendChild(wrapper);
-
-    expect(shouldPreserveNativeContextMenu(text)).toBe(true);
-  });
-
-  it('preserves the native context menu for form inputs', () => {
-    const input = document.createElement('input');
-    document.body.appendChild(input);
-
-    expect(shouldPreserveNativeContextMenu(input)).toBe(true);
-  });
-
-  it('continues suppressing the dialog context menu on non-editable surfaces', () => {
-    const container = document.createElement('div');
-    const button = document.createElement('button');
-
-    container.appendChild(button);
-    document.body.appendChild(container);
-
-    expect(shouldPreserveNativeContextMenu(button)).toBe(false);
-  });
-});