@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-list-picker-panel.tsx

@@ -1,220 +0,0 @@
-'use client';
-
-import { Check, Plus } from '@tuturuuu/icons';
-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 { Separator } from '@tuturuuu/ui/separator';
-import { cn } from '@tuturuuu/utils/format';
-import { useTranslations } from 'next-intl';
-import { useMemo } from 'react';
-import { EmptyStateCard } from '../../empty-state-card';
-import {
-  type TaskListLabels,
-  translateTaskListNameForDisplay,
-} from '../../utils/translate-task-list-display-name';
-import {
-  taskListStatusIcon,
-  taskListStatusToneClass,
-} from './task-list-trigger-styles';
-
-const statusOrder: TaskBoardStatus[] = [
-  'documents',
-  'not_started',
-  'active',
-  'review',
-  'done',
-  'closed',
-];
-
-/** Left accent bar + soft tinted surface (matches board column list styling, compact) */
-export const taskListPickerRowColorClass: Record<SupportedColor, string> = {
-  GRAY: 'border-l-[3px] border-l-dynamic-gray/70 border-y border-r border-border/45 bg-dynamic-gray/[0.07] hover:bg-dynamic-gray/[0.12]',
-  RED: 'border-l-[3px] border-l-dynamic-red/70 border-y border-r border-border/45 bg-dynamic-red/[0.07] hover:bg-dynamic-red/[0.12]',
-  BLUE: 'border-l-[3px] border-l-dynamic-blue/70 border-y border-r border-border/45 bg-dynamic-blue/[0.07] hover:bg-dynamic-blue/[0.12]',
-  GREEN:
-    'border-l-[3px] border-l-dynamic-green/70 border-y border-r border-border/45 bg-dynamic-green/[0.07] hover:bg-dynamic-green/[0.12]',
-  YELLOW:
-    'border-l-[3px] border-l-dynamic-yellow/70 border-y border-r border-border/45 bg-dynamic-yellow/[0.07] hover:bg-dynamic-yellow/[0.12]',
-  ORANGE:
-    'border-l-[3px] border-l-dynamic-orange/70 border-y border-r border-border/45 bg-dynamic-orange/[0.07] hover:bg-dynamic-orange/[0.12]',
-  PURPLE:
-    'border-l-[3px] border-l-dynamic-purple/70 border-y border-r border-border/45 bg-dynamic-purple/[0.07] hover:bg-dynamic-purple/[0.12]',
-  PINK: 'border-l-[3px] border-l-dynamic-pink/70 border-y border-r border-border/45 bg-dynamic-pink/[0.07] hover:bg-dynamic-pink/[0.12]',
-  INDIGO:
-    'border-l-[3px] border-l-dynamic-indigo/70 border-y border-r border-border/45 bg-dynamic-indigo/[0.07] hover:bg-dynamic-indigo/[0.12]',
-  CYAN: 'border-l-[3px] border-l-dynamic-cyan/70 border-y border-r border-border/45 bg-dynamic-cyan/[0.07] hover:bg-dynamic-cyan/[0.12]',
-};
-
-export interface TaskListPickerPanelProps {
-  selectedListId: string;
-  availableLists: TaskList[];
-  disabled?: boolean;
-  onSelectList: (listId: string) => void;
-  /** Parent-controlled create-list dialog opener */
-  onRequestOpenCreateDialog: () => void;
-  className?: string;
-}
-
-export function TaskListPickerPanel({
-  selectedListId,
-  availableLists,
-  disabled = false,
-  onSelectList,
-  onRequestOpenCreateDialog,
-  className,
-}: TaskListPickerPanelProps) {
-  const t = useTranslations();
-
-  const statusLabels = useMemo(
-    (): Record<TaskBoardStatus, string> => ({
-      not_started: t('common.list_name_to_do'),
-      active: t('common.list_name_in_progress'),
-      review: t('common.list_name_review'),
-      done: t('common.list_name_done'),
-      closed: t('common.list_name_closed'),
-      documents: t('common.documents'),
-    }),
-    [t]
-  );
-
-  const nameLabels = useMemo<TaskListLabels>(
-    () => ({
-      toDo: statusLabels.not_started,
-      inProgress: statusLabels.active,
-      review: statusLabels.review,
-      done: statusLabels.done,
-      closed: statusLabels.closed,
-      documents: statusLabels.documents,
-    }),
-    [statusLabels]
-  );
-
-  const groupedLists = useMemo(
-    () =>
-      statusOrder
-        .map((status) => {
-          const lists = availableLists
-            .filter((list) => list.status === status)
-            .sort((a, b) => {
-              const positionDiff = (a.position ?? 0) - (b.position ?? 0);
-              if (positionDiff !== 0) return positionDiff;
-              return a.name.localeCompare(b.name);
-            });
-          return { status, lists };
-        })
-        .filter((group) => group.lists.length > 0),
-    [availableLists]
-  );
-
-  const addNewListLabel = t('ws-task-boards.layout_settings.add_new_list');
-  const emptyDescription = t('ws-task-boards.select_or_create_list');
-
-  const openCreateDialog = () => {
-    if (disabled) {
-      return;
-    }
-    onRequestOpenCreateDialog();
-  };
-
-  return (
-    <div className={cn('w-full min-w-0 p-0', className)}>
-      {availableLists.length === 0 ? (
-        <EmptyStateCard
-          title={t('ws-task-boards.dialog.no_lists_found')}
-          description={emptyDescription}
-          actionLabel={addNewListLabel}
-          ActionIcon={Plus}
-          onAction={openCreateDialog}
-        />
-      ) : (
-        <>
-          <div
-            className="max-h-72 overflow-y-auto overscroll-contain p-1"
-            onWheel={(e) => e.stopPropagation()}
-          >
-            {groupedLists.map((group, index) => {
-              const StatusIcon = taskListStatusIcon[group.status];
-
-              return (
-                <div key={group.status}>
-                  {index > 0 && <Separator className="my-1.5" />}
-                  <div className="px-2 py-1.5">
-                    <div className="flex items-center gap-1.5 font-medium text-muted-foreground text-xs">
-                      <StatusIcon
-                        className={cn(
-                          'h-3.5 w-3.5',
-                          taskListStatusToneClass[group.status]
-                        )}
-                      />
-                      <span>{statusLabels[group.status]}</span>
-                      <span className="font-normal opacity-70">
-                        ({group.lists.length})
-                      </span>
-                    </div>
-                  </div>
-                  <div className="space-y-1.5 px-0.5 pb-0.5">
-                    {group.lists.map((list) => {
-                      const isSelected = selectedListId === list.id;
-                      const colorKey = list.color ?? 'GRAY';
-                      const rowTint =
-                        taskListPickerRowColorClass[colorKey] ??
-                        taskListPickerRowColorClass.GRAY;
-                      const displayName = translateTaskListNameForDisplay(
-                        list.name,
-                        nameLabels
-                      );
-
-                      return (
-                        <button
-                          key={list.id}
-                          type="button"
-                          disabled={disabled}
-                          onClick={() => onSelectList(list.id)}
-                          className={cn(
-                            'flex w-full items-center gap-2.5 rounded-lg py-2 pr-2.5 pl-2.5 text-left text-sm shadow-sm transition-colors',
-                            rowTint,
-                            isSelected &&
-                              'bg-primary/[0.07] ring-1 ring-primary/35 ring-inset hover:bg-primary/10',
-                            disabled && 'pointer-events-none opacity-50'
-                          )}
-                        >
-                          <span
-                            className={cn(
-                              'min-w-0 flex-1 truncate text-foreground',
-                              isSelected ? 'font-semibold' : 'font-medium'
-                            )}
-                          >
-                            {displayName}
-                          </span>
-                          {isSelected && (
-                            <Check className="h-4 w-4 shrink-0 text-primary" />
-                          )}
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-
-          <Separator />
-          <div className="p-2">
-            <Button
-              size="sm"
-              variant="ghost"
-              className="h-8 w-full justify-start"
-              disabled={disabled}
-              onClick={openCreateDialog}
-            >
-              <Plus className="mr-1.5 h-3.5 w-3.5" />
-              {addNewListLabel}
-            </Button>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-list-selector.tsx

@@ -1,165 +0,0 @@
-'use client';
-
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
-import { cn } from '@tuturuuu/utils/format';
-import { useTranslations } from 'next-intl';
-import { type ComponentProps, useMemo, useState } from 'react';
-import { CreateListDialog } from '../../create-list-dialog';
-import { translateTaskListNameForDisplay } from '../../utils/translate-task-list-display-name';
-import { TaskListPickerPanel } from './task-list-picker-panel';
-import {
-  getTaskListTriggerIcon,
-  getTaskListTriggerSurfaceClass,
-} from './task-list-trigger-styles';
-
-interface TaskListSelectorProps {
-  wsId: string;
-  boardId: string;
-  selectedListId: string;
-  availableLists: TaskList[];
-  disabled?: boolean;
-  compact?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  onPopoverCloseAutoFocus?: ComponentProps<
-    typeof PopoverContent
-  >['onCloseAutoFocus'];
-  onPopoverInteractOutside?: ComponentProps<
-    typeof PopoverContent
-  >['onInteractOutside'];
-  onListChange: (listId: string) => void;
-  propertyPopoverId?: string;
-}
-
-export function TaskListSelector({
-  wsId,
-  boardId,
-  selectedListId,
-  availableLists,
-  disabled = false,
-  compact = false,
-  open,
-  onOpenChange,
-  onPopoverCloseAutoFocus,
-  onPopoverInteractOutside,
-  onListChange,
-  propertyPopoverId,
-}: TaskListSelectorProps) {
-  const t = useTranslations();
-  const [uncontrolledPopoverOpen, setUncontrolledPopoverOpen] = useState(false);
-  const [isCreateListDialogOpen, setIsCreateListDialogOpen] = useState(false);
-  const isPopoverOpen = open ?? uncontrolledPopoverOpen;
-  const setIsPopoverOpen = onOpenChange ?? setUncontrolledPopoverOpen;
-
-  const statusLabels = useMemo(
-    () => ({
-      not_started: t('common.list_name_to_do'),
-      active: t('common.list_name_in_progress'),
-      review: t('common.list_name_review'),
-      done: t('common.list_name_done'),
-      closed: t('common.list_name_closed'),
-      documents: t('common.documents'),
-    }),
-    [t]
-  );
-
-  const nameLabels = useMemo(
-    () => ({
-      toDo: statusLabels.not_started,
-      inProgress: statusLabels.active,
-      review: statusLabels.review,
-      done: statusLabels.done,
-      closed: statusLabels.closed,
-      documents: statusLabels.documents,
-    }),
-    [statusLabels]
-  );
-
-  const selectedList = useMemo(
-    () => availableLists.find((list) => list.id === selectedListId),
-    [availableLists, selectedListId]
-  );
-
-  const TriggerIcon = getTaskListTriggerIcon(selectedList);
-  const triggerSurfaceClass = getTaskListTriggerSurfaceClass(selectedList);
-  const triggerLabel = selectedList
-    ? translateTaskListNameForDisplay(selectedList.name, nameLabels)
-    : t('ws-task-boards.dialog.field.list');
-  const triggerButton = (
-    <button
-      type="button"
-      data-task-property-popover-trigger={propertyPopoverId}
-      disabled={disabled}
-      aria-label={compact ? triggerLabel : undefined}
-      className={cn(
-        'inline-flex shrink-0 items-center border font-medium text-xs transition-colors',
-        compact
-          ? 'h-9 w-9 justify-center rounded-md p-0'
-          : 'h-8 gap-1.5 rounded-lg px-3',
-        selectedList && triggerSurfaceClass
-          ? triggerSurfaceClass
-          : 'border-border bg-background text-muted-foreground hover:border-primary/30 hover:bg-muted hover:text-foreground',
-        disabled && 'cursor-not-allowed opacity-50'
-      )}
-    >
-      <TriggerIcon className="h-3.5 w-3.5 shrink-0" />
-      <span className={compact ? 'sr-only' : undefined}>{triggerLabel}</span>
-    </button>
-  );
-
-  return (
-    <>
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-        {compact ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">{triggerLabel}</TooltipContent>
-          </Tooltip>
-        ) : (
-          <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
-        )}
-        <PopoverContent
-          align="start"
-          className="w-80 p-0"
-          onCloseAutoFocus={onPopoverCloseAutoFocus}
-          onInteractOutside={onPopoverInteractOutside}
-        >
-          <TaskListPickerPanel
-            selectedListId={selectedListId}
-            availableLists={availableLists}
-            disabled={disabled}
-            onSelectList={(listId) => {
-              onListChange(listId);
-              setIsPopoverOpen(false);
-            }}
-            onRequestOpenCreateDialog={() => {
-              setIsPopoverOpen(false);
-              setIsCreateListDialogOpen(true);
-            }}
-            className="w-full"
-          />
-        </PopoverContent>
-      </Popover>
-
-      <CreateListDialog
-        open={isCreateListDialogOpen}
-        onOpenChange={setIsCreateListDialogOpen}
-        boardId={boardId}
-        wsId={wsId}
-        initialStatus="active"
-        onSuccess={(listId) => {
-          onListChange(listId);
-        }}
-        translations={{
-          listNameAlreadyExists: t(
-            'ws-task-boards.layout_settings.list_name_exists'
-          ),
-        }}
-      />
-    </>
-  );
-}

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-list-trigger-styles.ts

@@ -1,69 +0,0 @@
-import {
-  Circle,
-  CircleCheck,
-  CircleDashed,
-  CircleX,
-  ClipboardCheck,
-  FileText,
-  ListTodo,
-} from '@tuturuuu/icons';
-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 type { ComponentType } from 'react';
-
-/** Popover trigger / summary chip: border/bg/text from list column color; icon from status */
-export const listTriggerSurfaceClass: Record<SupportedColor, string> = {
-  GRAY: 'border-dynamic-gray/30 bg-dynamic-gray/15 text-dynamic-gray hover:border-dynamic-gray/50 hover:bg-dynamic-gray/20',
-  RED: 'border-dynamic-red/30 bg-dynamic-red/15 text-dynamic-red hover:border-dynamic-red/50 hover:bg-dynamic-red/20',
-  BLUE: 'border-dynamic-blue/30 bg-dynamic-blue/15 text-dynamic-blue hover:border-dynamic-blue/50 hover:bg-dynamic-blue/20',
-  GREEN:
-    'border-dynamic-green/30 bg-dynamic-green/15 text-dynamic-green hover:border-dynamic-green/50 hover:bg-dynamic-green/20',
-  YELLOW:
-    'border-dynamic-yellow/30 bg-dynamic-yellow/15 text-dynamic-yellow hover:border-dynamic-yellow/50 hover:bg-dynamic-yellow/20',
-  ORANGE:
-    'border-dynamic-orange/30 bg-dynamic-orange/15 text-dynamic-orange hover:border-dynamic-orange/50 hover:bg-dynamic-orange/20',
-  PURPLE:
-    'border-dynamic-purple/30 bg-dynamic-purple/15 text-dynamic-purple hover:border-dynamic-purple/50 hover:bg-dynamic-purple/20',
-  PINK: 'border-dynamic-pink/30 bg-dynamic-pink/15 text-dynamic-pink hover:border-dynamic-pink/50 hover:bg-dynamic-pink/20',
-  INDIGO:
-    'border-dynamic-indigo/30 bg-dynamic-indigo/15 text-dynamic-indigo hover:border-dynamic-indigo/50 hover:bg-dynamic-indigo/20',
-  CYAN: 'border-dynamic-cyan/30 bg-dynamic-cyan/15 text-dynamic-cyan hover:border-dynamic-cyan/50 hover:bg-dynamic-cyan/20',
-};
-
-export const taskListStatusIcon: Record<
-  TaskBoardStatus,
-  ComponentType<{ className?: string }>
-> = {
-  not_started: CircleDashed,
-  active: Circle,
-  review: ClipboardCheck,
-  done: CircleCheck,
-  closed: CircleX,
-  documents: FileText,
-};
-
-/** Group header icon tone (status semantics, independent of list column color) */
-export const taskListStatusToneClass: Record<TaskBoardStatus, string> = {
-  not_started: 'text-dynamic-gray',
-  active: 'text-dynamic-blue',
-  review: 'text-dynamic-orange',
-  done: 'text-dynamic-green',
-  closed: 'text-dynamic-purple',
-  documents: 'text-dynamic-cyan',
-};
-
-export function getTaskListTriggerSurfaceClass(
-  list: TaskList | undefined
-): string | null {
-  if (!list) return null;
-  const key = list.color ?? 'GRAY';
-  return listTriggerSurfaceClass[key] ?? listTriggerSurfaceClass.GRAY;
-}
-
-export function getTaskListTriggerIcon(
-  list: TaskList | undefined
-): ComponentType<{ className?: string }> {
-  if (!list) return ListTodo;
-  return taskListStatusIcon[list.status];
-}

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

@@ -1,180 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { fireEvent, render, screen } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { TaskNameInput } from './task-name-input';
-
-vi.mock('next-intl', () => ({
-  useTranslations: () => (key: string) => key,
-}));
-
-function renderTaskNameInput({
-  isCreateMode = true,
-  targetCursor = 12,
-  variant = 'fullscreen',
-  onSubmit,
-}: {
-  isCreateMode?: boolean;
-  targetCursor?: number | null;
-  variant?: 'fullscreen' | 'compact';
-  onSubmit?: () => void;
-} = {}) {
-  const editorWrapper = document.createElement('div');
-  const editorElement = document.createElement('div');
-  editorElement.className = 'ProseMirror';
-  editorElement.tabIndex = -1;
-  editorWrapper.append(editorElement);
-
-  const titleInputRef = {
-    current: null as HTMLInputElement | HTMLTextAreaElement | null,
-  };
-  const editorRef = { current: editorWrapper };
-  const lastCursorPositionRef = { current: null };
-  const targetEditorCursorRef = { current: targetCursor };
-  const props = {
-    name: 'APIs for Agent Pi',
-    isCreateMode,
-    titleInputRef,
-    editorRef,
-    lastCursorPositionRef,
-    targetEditorCursorRef,
-    setName: vi.fn(),
-    updateName: vi.fn(),
-    flushNameUpdate: vi.fn(),
-    variant,
-    onSubmit,
-  };
-
-  render(<TaskNameInput {...props} />);
-
-  return {
-    ...props,
-    editorElement,
-    focusEditor: vi.spyOn(editorElement, 'focus'),
-    input: screen.getByPlaceholderText('task_name_placeholder'),
-  };
-}
-
-describe('TaskNameInput', () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.runOnlyPendingTimers();
-    vi.useRealTimers();
-    vi.restoreAllMocks();
-  });
-
-  it.each([
-    'fullscreen',
-    'compact',
-  ] as const)('places the initial %s title caret at the end', (variant) => {
-    const { input } = renderTaskNameInput({ variant });
-    const expectedCursorPosition = 'APIs for Agent Pi'.length;
-
-    expect(input).toHaveFocus();
-    expect(input).toHaveProperty('selectionStart', expectedCursorPosition);
-    expect(input).toHaveProperty('selectionEnd', expectedCursorPosition);
-  });
-
-  it('defers focusing the description editor after Enter', () => {
-    const { focusEditor, targetEditorCursorRef, input } = renderTaskNameInput();
-
-    const eventAllowed = fireEvent.keyDown(input, { key: 'Enter' });
-
-    expect(eventAllowed).toBe(false);
-    expect(targetEditorCursorRef.current).toBe(null);
-    expect(focusEditor).not.toHaveBeenCalled();
-
-    vi.runOnlyPendingTimers();
-
-    expect(focusEditor).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not move focus while Enter is committing composed text', () => {
-    const { focusEditor, targetEditorCursorRef, input } = renderTaskNameInput();
-
-    const eventAllowed = fireEvent.keyDown(input, {
-      key: 'Enter',
-      keyCode: 229,
-    });
-
-    expect(eventAllowed).toBe(true);
-    expect(targetEditorCursorRef.current).toBe(12);
-
-    vi.runOnlyPendingTimers();
-
-    expect(focusEditor).not.toHaveBeenCalled();
-  });
-
-  it('flushes pending title edits before focusing the editor in edit mode', () => {
-    const { flushNameUpdate, focusEditor, input } = renderTaskNameInput({
-      isCreateMode: false,
-    });
-
-    fireEvent.keyDown(input, { key: 'Enter' });
-
-    expect(flushNameUpdate).toHaveBeenCalledTimes(1);
-    expect(focusEditor).not.toHaveBeenCalled();
-
-    vi.runOnlyPendingTimers();
-
-    expect(focusEditor).toHaveBeenCalledTimes(1);
-  });
-
-  it.each([
-    ['Ctrl+Enter', { ctrlKey: true }],
-    ['Cmd+Enter', { metaKey: true }],
-  ])('lets %s bubble to the dialog shortcut handler', (_, modifier) => {
-    const { flushNameUpdate, focusEditor, targetEditorCursorRef, input } =
-      renderTaskNameInput({
-        isCreateMode: false,
-      });
-    const windowKeyDown = vi.fn((event: KeyboardEvent) => {
-      event.preventDefault();
-    });
-
-    window.addEventListener('keydown', windowKeyDown);
-
-    try {
-      const eventAllowed = fireEvent.keyDown(input, {
-        key: 'Enter',
-        ...modifier,
-      });
-
-      expect(eventAllowed).toBe(false);
-      expect(windowKeyDown).toHaveBeenCalledTimes(1);
-      expect(flushNameUpdate).not.toHaveBeenCalled();
-      expect(targetEditorCursorRef.current).toBe(12);
-
-      vi.runOnlyPendingTimers();
-
-      expect(focusEditor).not.toHaveBeenCalled();
-    } finally {
-      window.removeEventListener('keydown', windowKeyDown);
-    }
-  });
-
-  it('submits from compact mode without focusing the description editor', () => {
-    const onSubmit = vi.fn();
-    const { focusEditor, targetEditorCursorRef, input } = renderTaskNameInput({
-      onSubmit,
-      variant: 'compact',
-    });
-
-    const eventAllowed = fireEvent.keyDown(input, { key: 'Enter' });
-
-    expect(input.tagName).toBe('TEXTAREA');
-    expect(eventAllowed).toBe(false);
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-    expect(targetEditorCursorRef.current).toBe(12);
-    expect(input).toHaveProperty('value', 'APIs for Agent Pi');
-
-    vi.runOnlyPendingTimers();
-
-    expect(focusEditor).not.toHaveBeenCalled();
-  });
-});