@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tu-do/boards/boardId/task-dialogs/TaskCustomDateDialog.tsx

@@ -1,109 +0,0 @@
-'use client';
-
-import { X } from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import { DateTimePicker } from '@tuturuuu/ui/date-time-picker';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import { useCalendarPreferences } from '@tuturuuu/ui/hooks/use-calendar-preferences';
-
-// Default translations for when component is rendered outside NextIntlClientProvider
-const defaultTranslations = {
-  set_custom_due_date: 'Set Custom Due Date',
-  custom_due_date_description: 'Select a specific date and time for this task.',
-  cancel: 'Cancel',
-  remove_due_date: 'Remove Due Date',
-};
-
-interface TaskCustomDateDialogProps {
-  open: boolean;
-  endDate: string | null;
-  isLoading: boolean;
-  onOpenChange: (open: boolean) => void;
-  onDateChange: (date: Date | undefined) => void;
-  onClear: () => void;
-  /** Optional translations override for use in isolated React roots */
-  translations?: {
-    set_custom_due_date?: string;
-    custom_due_date_description?: string;
-    cancel?: string;
-    remove_due_date?: string;
-  };
-}
-
-export function TaskCustomDateDialog({
-  open,
-  endDate,
-  isLoading,
-  onOpenChange,
-  onDateChange,
-  onClear,
-  translations,
-}: TaskCustomDateDialogProps) {
-  // Use provided translations or defaults
-  const t = {
-    set_custom_due_date:
-      translations?.set_custom_due_date ??
-      defaultTranslations.set_custom_due_date,
-    custom_due_date_description:
-      translations?.custom_due_date_description ??
-      defaultTranslations.custom_due_date_description,
-    cancel: translations?.cancel ?? defaultTranslations.cancel,
-    remove_due_date:
-      translations?.remove_due_date ?? defaultTranslations.remove_due_date,
-  };
-
-  const { weekStartsOn, timezone, timeFormat } = useCalendarPreferences();
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{t.set_custom_due_date}</DialogTitle>
-          <DialogDescription>{t.custom_due_date_description}</DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <DateTimePicker
-            date={endDate ? new Date(endDate) : undefined}
-            setDate={onDateChange}
-            showTimeSelect={true}
-            minDate={new Date()}
-            inline
-            preferences={{ weekStartsOn, timezone, timeFormat }}
-          />
-        </div>
-        <DialogFooter>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={isLoading}
-          >
-            {t.cancel}
-          </Button>
-          {endDate && (
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => {
-                onClear();
-                onOpenChange(false);
-              }}
-              disabled={isLoading}
-              className="text-muted-foreground hover:text-foreground"
-            >
-              <X className="h-4 w-4" />
-              {t.remove_due_date}
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/boards/boardId/task-dialogs/TaskDeleteDialog.tsx

@@ -1,96 +0,0 @@
-'use client';
-
-import { Loader2 } from '@tuturuuu/icons';
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-
-// Default translations for when component is rendered outside NextIntlClientProvider
-// (e.g., in isolated React roots like TipTap mention extensions)
-const defaultTranslations = {
-  delete_task: 'Delete Task',
-  delete_task_confirmation: (name: string) =>
-    `Are you sure you want to delete "${name}"? This action cannot be undone.`,
-  cancel: 'Cancel',
-  deleting: 'Deleting...',
-};
-
-interface TaskDeleteDialogProps {
-  task: Task;
-  open: boolean;
-  isLoading: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: () => void;
-  /** Optional translations override for use in isolated React roots */
-  translations?: {
-    delete_task?: string;
-    delete_task_confirmation?: string | ((name: string) => string);
-    cancel?: string;
-    deleting?: string;
-  };
-}
-
-export function TaskDeleteDialog({
-  task,
-  open,
-  isLoading,
-  onOpenChange,
-  onConfirm,
-  translations,
-}: TaskDeleteDialogProps) {
-  // Use provided translations or defaults
-  const t = {
-    delete_task: translations?.delete_task ?? defaultTranslations.delete_task,
-    delete_task_confirmation:
-      typeof translations?.delete_task_confirmation === 'function'
-        ? translations.delete_task_confirmation(task.name ?? '')
-        : typeof translations?.delete_task_confirmation === 'string'
-          ? translations.delete_task_confirmation
-          : defaultTranslations.delete_task_confirmation(task.name ?? ''),
-    cancel: translations?.cancel ?? defaultTranslations.cancel,
-    deleting: translations?.deleting ?? defaultTranslations.deleting,
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{t.delete_task}</DialogTitle>
-          <DialogDescription>{t.delete_task_confirmation}</DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={isLoading}
-          >
-            {t.cancel}
-          </Button>
-          <Button
-            type="button"
-            variant="destructive"
-            onClick={onConfirm}
-            disabled={isLoading}
-          >
-            {isLoading ? (
-              <>
-                <Loader2 className="h-4 w-4 animate-spin" />
-                {t.deleting}
-              </>
-            ) : (
-              t.delete_task
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/boards/boardId/task-dialogs/TaskNewLabelDialog.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-import { Loader2, Shuffle } from '@tuturuuu/icons';
-import { Badge } from '@tuturuuu/ui/badge';
-import { Button } from '@tuturuuu/ui/button';
-import { ColorPicker } from '@tuturuuu/ui/color-picker';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import { Input } from '@tuturuuu/ui/input';
-import { Label } from '@tuturuuu/ui/label';
-import { useDomResolvedTheme } from '../../../../../../hooks/use-dom-resolved-theme';
-import {
-  computeAccessibleLabelStyles,
-  getRandomLabelColor,
-} from '../../../utils/label-colors';
-
-// Default translations for when component is rendered outside NextIntlClientProvider
-const defaultTranslations = {
-  create_new_label: 'Create New Label',
-  create_new_label_description:
-    'Create a new label to categorize and organize your tasks.',
-  label_name: 'Label Name',
-  color: 'Color',
-  preview: 'Preview',
-  cancel: 'Cancel',
-  creating: 'Creating...',
-  create_label: 'Create Label',
-  randomize_color: 'Randomize color',
-};
-
-interface TaskNewLabelDialogProps {
-  open: boolean;
-  newLabelName: string;
-  newLabelColor: string;
-  creatingLabel: boolean;
-  onOpenChange: (open: boolean) => void;
-  onNameChange: (name: string) => void;
-  onColorChange: (color: string) => void;
-  onConfirm: () => void;
-  /** Optional translations override for use in isolated React roots */
-  translations?: {
-    create_new_label?: string;
-    create_new_label_description?: string;
-    label_name?: string;
-    color?: string;
-    preview?: string;
-    cancel?: string;
-    creating?: string;
-    create_label?: string;
-    randomize_color?: string;
-  };
-}
-
-export function TaskNewLabelDialog({
-  open,
-  newLabelName,
-  newLabelColor,
-  creatingLabel,
-  onOpenChange,
-  onNameChange,
-  onColorChange,
-  onConfirm,
-  translations,
-}: TaskNewLabelDialogProps) {
-  // Use provided translations or defaults
-  const t = {
-    create_new_label:
-      translations?.create_new_label ?? defaultTranslations.create_new_label,
-    create_new_label_description:
-      translations?.create_new_label_description ??
-      defaultTranslations.create_new_label_description,
-    label_name: translations?.label_name ?? defaultTranslations.label_name,
-    color: translations?.color ?? defaultTranslations.color,
-    preview: translations?.preview ?? defaultTranslations.preview,
-    cancel: translations?.cancel ?? defaultTranslations.cancel,
-    creating: translations?.creating ?? defaultTranslations.creating,
-    create_label:
-      translations?.create_label ?? defaultTranslations.create_label,
-    randomize_color:
-      translations?.randomize_color ?? defaultTranslations.randomize_color,
-  };
-
-  const isDark = useDomResolvedTheme() === 'dark';
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{t.create_new_label}</DialogTitle>
-          <DialogDescription>
-            {t.create_new_label_description}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid gap-2">
-            <Label>{t.label_name}</Label>
-            <Input
-              value={newLabelName}
-              onChange={(e) => onNameChange(e.target.value)}
-              placeholder="e.g., Bug, Feature, Priority"
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && newLabelName.trim()) {
-                  onConfirm();
-                }
-              }}
-            />
-          </div>
-          <div className="grid gap-2">
-            <Label>{t.color}</Label>
-            <div className="flex items-center gap-3">
-              <ColorPicker value={newLabelColor} onChange={onColorChange} />
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                onClick={() =>
-                  onColorChange(getRandomLabelColor(newLabelColor))
-                }
-                title={t.randomize_color}
-              >
-                <Shuffle className="h-4 w-4" />
-                <span className="sr-only">{t.randomize_color}</span>
-              </Button>
-              <Badge
-                style={(() => {
-                  const styles = computeAccessibleLabelStyles(
-                    newLabelColor,
-                    isDark
-                  );
-                  return styles
-                    ? {
-                        backgroundColor: styles.bg,
-                        borderColor: styles.border,
-                        color: styles.text,
-                      }
-                    : undefined;
-                })()}
-                className="border"
-              >
-                {newLabelName.trim() || t.preview}
-              </Badge>
-            </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={creatingLabel}
-          >
-            {t.cancel}
-          </Button>
-          <Button
-            type="button"
-            onClick={onConfirm}
-            disabled={!newLabelName.trim() || creatingLabel}
-          >
-            {creatingLabel ? (
-              <>
-                <Loader2 className="h-4 w-4 animate-spin" />
-                {t.creating}
-              </>
-            ) : (
-              t.create_label
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/boards/boardId/task-dialogs/TaskNewProjectDialog.tsx

@@ -1,127 +0,0 @@
-'use client';
-
-import { Loader2 } from '@tuturuuu/icons';
-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';
-
-// Default translations for when component is rendered outside NextIntlClientProvider
-const defaultTranslations = {
-  create_new_project: 'Create New Project',
-  create_new_project_description:
-    'Create a new project to organize related tasks across boards.',
-  project_name: 'Project Name',
-  cancel: 'Cancel',
-  creating: 'Creating...',
-  create_project: 'Create Project',
-};
-
-interface TaskNewProjectDialogProps {
-  open: boolean;
-  newProjectName: string;
-  creatingProject: boolean;
-  onOpenChange: (open: boolean) => void;
-  onNameChange: (name: string) => void;
-  onConfirm: () => void;
-  /** Optional translations override for use in isolated React roots */
-  translations?: {
-    create_new_project?: string;
-    create_new_project_description?: string;
-    project_name?: string;
-    cancel?: string;
-    creating?: string;
-    create_project?: string;
-  };
-}
-
-export function TaskNewProjectDialog({
-  open,
-  newProjectName,
-  creatingProject,
-  onOpenChange,
-  onNameChange,
-  onConfirm,
-  translations,
-}: TaskNewProjectDialogProps) {
-  // Use provided translations or defaults
-  const t = {
-    create_new_project:
-      translations?.create_new_project ??
-      defaultTranslations.create_new_project,
-    create_new_project_description:
-      translations?.create_new_project_description ??
-      defaultTranslations.create_new_project_description,
-    project_name:
-      translations?.project_name ?? defaultTranslations.project_name,
-    cancel: translations?.cancel ?? defaultTranslations.cancel,
-    creating: translations?.creating ?? defaultTranslations.creating,
-    create_project:
-      translations?.create_project ?? defaultTranslations.create_project,
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{t.create_new_project}</DialogTitle>
-          <DialogDescription>
-            {t.create_new_project_description}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid gap-2">
-            <Label>{t.project_name}</Label>
-            <Input
-              value={newProjectName}
-              onChange={(e) => onNameChange(e.target.value)}
-              placeholder="e.g., Website Redesign, Q4 Campaign"
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && newProjectName.trim()) {
-                  if (creatingProject) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    return;
-                  }
-                  onConfirm();
-                }
-              }}
-              disabled={creatingProject}
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={creatingProject}
-          >
-            {t.cancel}
-          </Button>
-          <Button
-            type="button"
-            onClick={onConfirm}
-            disabled={!newProjectName.trim() || creatingProject}
-          >
-            {creatingProject ? (
-              <>
-                <Loader2 className="h-4 w-4 animate-spin" />
-                {t.creating}
-              </>
-            ) : (
-              t.create_project
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/boards/boardId/task-filter.test.tsx

@@ -1,152 +0,0 @@
-import '@testing-library/jest-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { fireEvent, render, screen } from '@testing-library/react';
-import type React from 'react';
-import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
-import type { TaskFilters } from '../../shared/task-filter.types';
-import { TaskFilter } from './task-filter';
-
-vi.mock('next-intl', () => ({
-  useTranslations: () => (key: string) => key,
-}));
-
-vi.mock('@tuturuuu/internal-api/tasks', () => ({
-  listWorkspaceLabels: vi.fn(() => Promise.resolve([])),
-  listWorkspaceTaskBoards: vi.fn(() =>
-    Promise.resolve({ boards: [], count: 0 })
-  ),
-  listWorkspaceTaskProjects: vi.fn(() => Promise.resolve([])),
-}));
-
-vi.mock('@tuturuuu/internal-api/workspaces', () => ({
-  listWorkspaces: vi.fn(() => Promise.resolve([])),
-}));
-
-vi.mock('@tuturuuu/ui/hooks/use-workspace-members', () => ({
-  useWorkspaceMembers: () => ({ data: [] }),
-}));
-
-vi.mock('@tuturuuu/ui/custom/combobox', () => ({
-  Combobox: ({
-    placeholder,
-  }: {
-    children?: React.ReactNode;
-    placeholder?: string;
-  }) => (
-    <button type="button" aria-label={placeholder}>
-      {placeholder}
-    </button>
-  ),
-}));
-
-beforeAll(() => {
-  class ResizeObserverMock {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-  }
-
-  vi.stubGlobal('ResizeObserver', ResizeObserverMock);
-});
-
-const baseFilters: TaskFilters = {
-  assignees: [],
-  dueDateRange: null,
-  estimationRange: null,
-  includeMyTasks: false,
-  includeUnassigned: false,
-  labels: [],
-  priorities: [],
-  projects: [],
-  sourceBoardIds: [],
-  sourceScope: 'all_visible',
-  sourceWorkspaceIds: [],
-};
-
-function renderTaskFilter(
-  overrides?: Partial<React.ComponentProps<typeof TaskFilter>>
-) {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-      },
-    },
-  });
-  const onFiltersChange = vi.fn();
-
-  render(
-    <QueryClientProvider client={queryClient}>
-      <TaskFilter
-        currentUserId="user-1"
-        filters={baseFilters}
-        onFiltersChange={onFiltersChange}
-        wsId="ws-1"
-        {...overrides}
-      />
-    </QueryClientProvider>
-  );
-
-  return { onFiltersChange };
-}
-
-describe('TaskFilter', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders compact filter sections with responsive due-date controls', () => {
-    const { onFiltersChange } = renderTaskFilter();
-
-    fireEvent.click(screen.getByRole('button', { name: 'common.filters' }));
-
-    expect(screen.getByText('common.quick_filters')).toBeInTheDocument();
-    expect(
-      screen.getAllByText('ws-tasks.filter_source_scope').length
-    ).toBeGreaterThan(0);
-    expect(screen.getByText('common.people')).toBeInTheDocument();
-    expect(screen.getByText('common.details')).toBeInTheDocument();
-    expect(screen.getAllByText('common.due_date').length).toBeGreaterThan(0);
-    expect(screen.getByLabelText('common.from')).toHaveAttribute(
-      'type',
-      'date'
-    );
-    expect(screen.getByLabelText('common.to')).toHaveAttribute('type', 'date');
-    expect(screen.getByLabelText('common.clear')).toBeInTheDocument();
-    expect(
-      screen.queryByRole('grid', { name: /calendar/i })
-    ).not.toBeInTheDocument();
-
-    fireEvent.change(screen.getByLabelText('common.from'), {
-      target: { value: '2026-06-22' },
-    });
-
-    expect(onFiltersChange).toHaveBeenCalledWith(
-      expect.objectContaining({
-        dueDateRange: expect.objectContaining({
-          from: expect.any(Date),
-        }),
-      })
-    );
-  });
-
-  it('shows active count badges for compact sections', () => {
-    renderTaskFilter({
-      filters: {
-        ...baseFilters,
-        dueDateRange: { from: new Date(2026, 5, 22), to: undefined },
-        includeMyTasks: true,
-        sourceScope: 'external_current_workspace',
-      },
-    });
-
-    expect(
-      screen.getByRole('button', { name: 'common.filters' })
-    ).toHaveTextContent('3');
-
-    fireEvent.click(screen.getByRole('button', { name: 'common.filters' }));
-
-    expect(screen.getByText('common.quick_filters')).toBeInTheDocument();
-    expect(screen.getAllByText('1').length).toBeGreaterThanOrEqual(3);
-  });
-});